@vibe-forge/client 2.0.0 → 2.0.1

package/src/hooks/chat/use-chat-adapter-account-selection.tsx

@@ -0,0 +1,156 @@
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import useSWR from 'swr'
+
+import type { AdapterAccountInfo, AdapterAccountQuotaMetric, AdapterAccountsResult } from '@vibe-forge/types'
+
+import { getAdapterAccounts } from '#~/api.js'
+import { normalizeNonEmptyString } from './model-selector'
+
+export interface ChatAdapterAccountOption {
+  value: string
+  label: string
+  hint?: string
+  meta?: string
+}
+
+const ACCOUNT_STORAGE_KEY_PREFIX = 'vf_chat_adapter_account:'
+
+const formatQuotaMetric = (metric: AdapterAccountQuotaMetric) => {
+  const label = normalizeNonEmptyString(metric.label) ??
+    normalizeNonEmptyString(
+      metric.id
+        .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+        .replace(/[_-]+/g, ' ')
+        .trim()
+        .replace(/\b\w/g, match => match.toUpperCase())
+    )
+  const value = normalizeNonEmptyString(metric.value)
+  if (label != null && value != null) {
+    return `${label}: ${value}`
+  }
+  return value ?? label
+}
+
+const formatQuotaMeta = (quota: AdapterAccountInfo['quota']) => {
+  const metrics = (quota?.metrics ?? [])
+    .slice()
+    .sort((left, right) => Number(right.primary === true) - Number(left.primary === true))
+    .map(formatQuotaMetric)
+    .filter((value): value is string => value != null && value !== '')
+
+  if (metrics.length > 0) {
+    return metrics.slice(0, 2).join(' · ')
+  }
+
+  const summary = normalizeNonEmptyString(quota?.summary)
+  return summary == null ? undefined : `Quota: ${summary}`
+}
+
+const readStoredAccount = (adapter: string | undefined) => {
+  const normalizedAdapter = normalizeNonEmptyString(adapter)
+  if (normalizedAdapter == null) {
+    return undefined
+  }
+
+  try {
+    const raw = localStorage.getItem(`${ACCOUNT_STORAGE_KEY_PREFIX}${normalizedAdapter}`)
+    return raw == null || raw.trim() === '' ? undefined : raw.trim()
+  } catch {
+    return undefined
+  }
+}
+
+export function useChatAdapterAccountSelection({
+  adapter,
+  model
+}: {
+  adapter?: string
+  model?: string
+}) {
+  const normalizedAdapter = normalizeNonEmptyString(adapter)
+  const [selectedAccount, setSelectedAccountState] = useState<string | undefined>(() => readStoredAccount(adapter))
+
+  useEffect(() => {
+    setSelectedAccountState(readStoredAccount(normalizedAdapter))
+  }, [normalizedAdapter])
+
+  const { data } = useSWR<AdapterAccountsResult>(
+    normalizedAdapter == null ? null : ['/api/adapters', normalizedAdapter, model ?? ''],
+    normalizedAdapter == null ? null : () => getAdapterAccounts(normalizedAdapter, { model })
+  )
+
+  const accountOptions = useMemo<ChatAdapterAccountOption[]>(() => {
+    return (data?.accounts ?? [])
+      .filter(account => account.status !== 'missing')
+      .map(account => ({
+        value: account.key,
+        label: account.title,
+        hint: account.description,
+        meta: formatQuotaMeta(account.quota)
+      }))
+  }, [data?.accounts])
+
+  const resolveSelectableAccount = useCallback((value?: string, preserveUnknown = false) => {
+    const normalizedValue = normalizeNonEmptyString(value)
+    const accountValues = new Set(accountOptions.map(option => option.value))
+    if (normalizedValue != null) {
+      if (accountValues.has(normalizedValue)) {
+        return normalizedValue
+      }
+      if (preserveUnknown) {
+        return normalizedValue
+      }
+    }
+
+    const defaultAccount = normalizeNonEmptyString(data?.defaultAccount)
+    if (defaultAccount != null && accountValues.has(defaultAccount)) {
+      return defaultAccount
+    }
+
+    return accountOptions[0]?.value
+  }, [accountOptions, data?.defaultAccount])
+
+  useEffect(() => {
+    if (normalizedAdapter == null) {
+      setSelectedAccountState(undefined)
+      return
+    }
+
+    const nextValue = resolveSelectableAccount(selectedAccount)
+    setSelectedAccountState((prev) => prev === nextValue ? prev : nextValue)
+  }, [normalizedAdapter, resolveSelectableAccount, selectedAccount])
+
+  useEffect(() => {
+    if (normalizedAdapter == null) {
+      return
+    }
+
+    try {
+      const storageKey = `${ACCOUNT_STORAGE_KEY_PREFIX}${normalizedAdapter}`
+      if (selectedAccount == null || selectedAccount.trim() === '') {
+        localStorage.removeItem(storageKey)
+      } else {
+        localStorage.setItem(storageKey, selectedAccount)
+      }
+    } catch {}
+  }, [normalizedAdapter, selectedAccount])
+
+  const applySessionSelection = useCallback((params: { account?: string }) => {
+    const nextAccount = resolveSelectableAccount(params.account, true) ??
+      normalizeNonEmptyString(params.account)
+    setSelectedAccountState((prev) => prev === nextAccount ? prev : nextAccount)
+  }, [resolveSelectableAccount])
+
+  const updateSelectedAccount = useCallback((value?: string) => {
+    const nextAccount = resolveSelectableAccount(value)
+    setSelectedAccountState((prev) => prev === nextAccount ? prev : nextAccount)
+  }, [resolveSelectableAccount])
+
+  return {
+    accountOptions,
+    selectedAccount: resolveSelectableAccount(selectedAccount, true) ?? selectedAccount,
+    setSelectedAccount: updateSelectedAccount,
+    applySessionSelection,
+    showAccountSelector: normalizedAdapter != null && accountOptions.length > 0
+  }
+}

package/src/hooks/chat/use-chat-route-bottom-panel.ts

@@ -0,0 +1,181 @@
+import { useEffect, useState } from 'react'
+
+import type { Session } from '@vibe-forge/core'
+
+import { updateSession } from '#~/api'
+
+import {
+  normalizeWorkspaceFileState,
+  toSessionWorkspaceFileState,
+  uniqueNonEmptyPaths
+} from './workspace-file-panel-state'
+import type { WorkspaceFilePanelState } from './workspace-file-panel-state'
+
+export type ChatBottomPanelView = 'file' | 'terminal'
+
+export function useChatRouteBottomPanel({
+  isTerminalOpen,
+  session,
+  setIsTerminalOpen
+}: {
+  isTerminalOpen: boolean
+  session?: Session
+  setIsTerminalOpen: (isOpen: boolean) => void
+}) {
+  const initialWorkspaceFileState = normalizeWorkspaceFileState(session?.workspaceFileState)
+  const [bottomPanelView, setBottomPanelView] = useState<ChatBottomPanelView>('terminal')
+  const [selectedWorkspaceFilePath, setSelectedWorkspaceFilePath] = useState<string | null>(
+    initialWorkspaceFileState.selectedPath
+  )
+  const [openWorkspaceFilePaths, setOpenWorkspaceFilePaths] = useState<string[]>(initialWorkspaceFileState.openPaths)
+  const [isWorkspaceFileEditorOpen, setIsWorkspaceFileEditorOpen] = useState(initialWorkspaceFileState.isOpen)
+  const shouldShowTerminal = isTerminalOpen && bottomPanelView === 'terminal'
+  const shouldShowFileEditor = isWorkspaceFileEditorOpen && selectedWorkspaceFilePath != null &&
+    bottomPanelView === 'file'
+  const shouldShowBottomPanel = shouldShowTerminal || shouldShowFileEditor
+  const persistedWorkspaceFileStateKey = JSON.stringify(session?.workspaceFileState ?? null)
+
+  useEffect(() => {
+    const nextState = normalizeWorkspaceFileState(session?.workspaceFileState)
+    setOpenWorkspaceFilePaths(nextState.openPaths)
+    setSelectedWorkspaceFilePath(nextState.selectedPath)
+    setIsWorkspaceFileEditorOpen(nextState.isOpen)
+    setBottomPanelView(current => {
+      if (nextState.isOpen && nextState.selectedPath != null) {
+        return 'file'
+      }
+      return current === 'file' ? 'terminal' : current
+    })
+  }, [persistedWorkspaceFileStateKey, session?.id])
+
+  const commitWorkspaceFileState = (state: WorkspaceFilePanelState) => {
+    const nextState = normalizeWorkspaceFileState(state)
+    setOpenWorkspaceFilePaths(nextState.openPaths)
+    setSelectedWorkspaceFilePath(nextState.selectedPath)
+    setIsWorkspaceFileEditorOpen(nextState.isOpen)
+
+    if (session?.id != null) {
+      void updateSession(session.id, {
+        workspaceFileState: toSessionWorkspaceFileState(nextState)
+      }).catch((err: unknown) => {
+        console.error('[chat] failed to persist workspace file state:', err)
+      })
+    }
+  }
+
+  const handleToggleTerminal = () => {
+    if (bottomPanelView !== 'terminal') {
+      setBottomPanelView('terminal')
+      setIsTerminalOpen(true)
+      return
+    }
+
+    setIsTerminalOpen(!isTerminalOpen)
+  }
+  const handleOpenWorkspaceFile = (path: string) => {
+    commitWorkspaceFileState({
+      openPaths: uniqueNonEmptyPaths([...openWorkspaceFilePaths, path]),
+      selectedPath: path,
+      isOpen: true
+    })
+    setBottomPanelView('file')
+  }
+  const handleCloseWorkspaceFile = () => {
+    commitWorkspaceFileState({
+      openPaths: openWorkspaceFilePaths,
+      selectedPath: selectedWorkspaceFilePath,
+      isOpen: false
+    })
+    if (isTerminalOpen) {
+      setBottomPanelView('terminal')
+    }
+  }
+  const handleCloseAllWorkspaceFileTabs = () => {
+    commitWorkspaceFileState({
+      openPaths: [],
+      selectedPath: null,
+      isOpen: false
+    })
+    if (isTerminalOpen) {
+      setBottomPanelView('terminal')
+    }
+  }
+  const handleSelectWorkspaceFile = (path: string) => {
+    commitWorkspaceFileState({
+      openPaths: uniqueNonEmptyPaths([...openWorkspaceFilePaths, path]),
+      selectedPath: path,
+      isOpen: true
+    })
+    setBottomPanelView('file')
+  }
+  const handleCloseWorkspaceFileTab = (path: string) => {
+    const nextPaths = openWorkspaceFilePaths.filter(item => item !== path)
+    const closedIndex = openWorkspaceFilePaths.indexOf(path)
+    const nextPath = selectedWorkspaceFilePath === path
+      ? nextPaths[Math.min(Math.max(closedIndex - 1, 0), nextPaths.length - 1)] ?? null
+      : selectedWorkspaceFilePath
+
+    commitWorkspaceFileState({
+      openPaths: nextPaths,
+      selectedPath: nextPath,
+      isOpen: isWorkspaceFileEditorOpen && nextPath != null
+    })
+
+    if (nextPath == null && isTerminalOpen) {
+      setBottomPanelView('terminal')
+    }
+  }
+  const handleCloseOtherWorkspaceFileTabs = (path: string) => {
+    if (!openWorkspaceFilePaths.includes(path)) {
+      return
+    }
+
+    commitWorkspaceFileState({
+      openPaths: [path],
+      selectedPath: path,
+      isOpen: true
+    })
+    setBottomPanelView('file')
+  }
+  const handleCloseWorkspaceFileTabsToRight = (path: string) => {
+    const tabIndex = openWorkspaceFilePaths.indexOf(path)
+    if (tabIndex < 0) {
+      return
+    }
+
+    const nextPaths = openWorkspaceFilePaths.slice(0, tabIndex + 1)
+    const nextPath = selectedWorkspaceFilePath != null && nextPaths.includes(selectedWorkspaceFilePath)
+      ? selectedWorkspaceFilePath
+      : path
+    commitWorkspaceFileState({
+      openPaths: nextPaths,
+      selectedPath: nextPath,
+      isOpen: isWorkspaceFileEditorOpen && nextPath != null
+    })
+  }
+  const handleCloseTerminal = () => {
+    setIsTerminalOpen(false)
+    if (isWorkspaceFileEditorOpen && selectedWorkspaceFilePath != null) {
+      setBottomPanelView('file')
+    }
+  }
+
+  return {
+    handleCloseAllWorkspaceFileTabs,
+    handleCloseTerminal,
+    handleCloseWorkspaceFile,
+    handleCloseOtherWorkspaceFileTabs,
+    handleCloseWorkspaceFileTab,
+    handleCloseWorkspaceFileTabsToRight,
+    handleOpenWorkspaceFile,
+    handleSelectWorkspaceFile,
+    handleToggleTerminal,
+    openWorkspaceFilePaths,
+    selectedWorkspaceFilePath,
+    shouldShowBottomPanel,
+    shouldShowFileEditor,
+    shouldShowTerminal
+  }
+}
+
+export type ChatRouteBottomPanelState = ReturnType<typeof useChatRouteBottomPanel>

package/src/hooks/chat/use-chat-route-deep-link-view.ts

@@ -0,0 +1,33 @@
+import { useEffect, useRef } from 'react'
+
+import type { ChatHeaderView } from '#~/components/chat/ChatHeader.js'
+
+export function useChatRouteDeepLinkView({
+  activeView,
+  setActiveView,
+  targetMessageId,
+  targetToolUseId
+}: {
+  activeView: ChatHeaderView
+  setActiveView: (view: ChatHeaderView) => void
+  targetMessageId?: string
+  targetToolUseId?: string
+}) {
+  const handledDeepLinkTargetRef = useRef('')
+  const deepLinkTargetKey = targetToolUseId?.trim()
+    ? `tool:${targetToolUseId.trim()}`
+    : targetMessageId?.trim()
+    ? `message:${targetMessageId.trim()}`
+    : ''
+
+  useEffect(() => {
+    if (deepLinkTargetKey === '') {
+      handledDeepLinkTargetRef.current = ''
+    } else if (handledDeepLinkTargetRef.current !== deepLinkTargetKey) {
+      handledDeepLinkTargetRef.current = deepLinkTargetKey
+      if (activeView !== 'history') {
+        setActiveView('history')
+      }
+    }
+  }, [activeView, deepLinkTargetKey, setActiveView])
+}