Function StatusBarConnection

src/components/layout/status-bar-connection.tsx:41–131

()

}

export function StatusBarConnection() {
  const t = useTranslations("Folder.statusBar.connection")
  const store = useConnectionStore()
  const { tabs, activeTabId } = useTabContext()
  const { conversations } = useAppWorkspace()

  // Subscribe to activeKey changes
  const subscribeActiveKey = useCallback(
    (cb: () => void) => store.subscribeActiveKey(cb),
    [store]
  )
  const getActiveKey = useCallback(() => store.getActiveKey(), [store])
  const activeKey = useSyncExternalStore(
    subscribeActiveKey,
    getActiveKey,
    getActiveKey
  )

  // Subscribe to the active connection's changes
  const subscribeConn = useCallback(
    (cb: () => void) => {
      if (!activeKey) return () => {}
      return store.subscribeKey(activeKey, cb)
    },
    [store, activeKey]
  )
  const getConnSnapshot = useCallback(
    () => (activeKey ? store.getConnection(activeKey) : undefined),
    [store, activeKey]
  )
  const activeConn = useSyncExternalStore(
    subscribeConn,
    getConnSnapshot,
    getConnSnapshot
  )

  const status = activeConn?.status ?? null
  const agentType = activeConn?.agentType ?? null

  const model = useMemo(() => {
    const tab = tabs.find((t) => t.id === activeTabId)
    if (!tab || tab.kind !== "conversation") return null
    const conv = conversations.find(
      (c) => c.id === tab.conversationId && c.agent_type === tab.agentType
    )
    return conv?.model ?? null
  }, [tabs, activeTabId, conversations])

  if (!agentType || !status || status === "disconnected") {
    return (
      <TooltipProvider>
        <Tooltip>
          <TooltipTrigger asChild>
            <div className="flex items-center gap-1.5">
              <Unplug className="h-3.5 w-3.5 text-muted-foreground/50" />
              {model && <span>{model}</span>}
            </div>
          </TooltipTrigger>