@vibe-forge/client 2.0.0 → 3.0.0-alpha.0

package/src/hooks/chat/optimistic-session-creation.ts

@@ -0,0 +1,189 @@
+import { atom } from 'jotai'
+
+import type {
+  ChatMessage,
+  ChatMessageContent,
+  EffortLevel,
+  Session,
+  SessionPermissionMode,
+  SessionPromptType
+} from '@vibe-forge/core'
+import type { GitBranchKind } from '@vibe-forge/types'
+
+export interface OptimisticSessionCreationOptions {
+  start?: boolean
+  parentSessionId?: string
+  id: string
+  promptType?: SessionPromptType
+  promptName?: string
+  effort?: EffortLevel
+  permissionMode?: SessionPermissionMode
+  adapter?: string
+  account?: string
+  workspace?: {
+    createWorktree?: boolean
+    worktreeEnvironment?: string
+    branch?: {
+      name: string
+      kind?: GitBranchKind
+      mode?: 'checkout' | 'create'
+    }
+  }
+}
+
+export interface OptimisticSessionCreationRequest {
+  id: string
+  title?: string
+  initialMessage?: string
+  initialContent?: ChatMessageContent[]
+  model?: string
+  options: OptimisticSessionCreationOptions
+}
+
+export interface OptimisticSessionCreation {
+  errorMessage?: string
+  message: ChatMessage
+  request: OptimisticSessionCreationRequest
+  session: Session
+  status: 'creating' | 'failed'
+}
+
+export type OptimisticSessionCreationMap = Record<string, OptimisticSessionCreation>
+
+export const optimisticSessionCreationsAtom = atom<OptimisticSessionCreationMap>({})
+
+const discardedOptimisticSessionIds = new Set<string>()
+
+export const markOptimisticSessionDiscarded = (id: string) => {
+  discardedOptimisticSessionIds.add(id)
+}
+
+export const clearOptimisticSessionDiscarded = (id: string) => {
+  discardedOptimisticSessionIds.delete(id)
+}
+
+export const isOptimisticSessionDiscarded = (id: string) => {
+  return discardedOptimisticSessionIds.has(id)
+}
+
+export const createOptimisticSessionId = () => {
+  return globalThis.crypto?.randomUUID != null
+    ? globalThis.crypto.randomUUID()
+    : `local-session-${Date.now()}-${Math.random().toString(16).slice(2)}`
+}
+
+const getContentPreview = (content?: string | ChatMessageContent[]) => {
+  if (typeof content === 'string') {
+    return content.trim()
+  }
+
+  const textItem = content?.find(
+    (item): item is Extract<ChatMessageContent, { type: 'text' }> => item.type === 'text' && item.text.trim() !== ''
+  )
+  if (textItem != null) {
+    return textItem.text.trim()
+  }
+
+  const fileItem = content?.find(
+    (item): item is Extract<ChatMessageContent, { type: 'file' }> => item.type === 'file' && item.path.trim() !== ''
+  )
+  if (fileItem != null) {
+    return fileItem.path.trim()
+  }
+
+  const imageItem = content?.find((item): item is Extract<ChatMessageContent, { type: 'image' }> =>
+    item.type === 'image'
+  )
+  if (imageItem != null) {
+    return imageItem.name?.trim() ?? ''
+  }
+
+  return ''
+}
+
+const getTitlePreview = (contentPreview: string) => {
+  const firstLine = contentPreview.split('\n')[0]?.trim() ?? ''
+  if (firstLine === '') return undefined
+  return firstLine.length > 50 ? `${firstLine.slice(0, 50)}...` : firstLine
+}
+
+export const createOptimisticSessionCreation = (
+  request: OptimisticSessionCreationRequest,
+  now = Date.now()
+): OptimisticSessionCreation => {
+  const content = request.initialContent ?? request.initialMessage ?? ''
+  const contentPreview = getContentPreview(content)
+  const title = request.title ?? getTitlePreview(contentPreview)
+
+  return {
+    message: {
+      id: `${request.id}:optimistic-user-message`,
+      role: 'user',
+      content,
+      createdAt: now
+    },
+    request,
+    session: {
+      id: request.id,
+      title,
+      createdAt: now,
+      messageCount: 1,
+      lastMessage: contentPreview === '' ? undefined : contentPreview,
+      lastUserMessage: contentPreview === '' ? undefined : contentPreview,
+      isArchived: false,
+      isStarred: false,
+      tags: [],
+      status: 'running',
+      model: request.model,
+      adapter: request.options.adapter,
+      account: request.options.account,
+      permissionMode: request.options.permissionMode,
+      effort: request.options.effort,
+      promptType: request.options.promptType,
+      promptName: request.options.promptName
+    },
+    status: 'creating'
+  }
+}
+
+export const markOptimisticSessionCreationCreating = (
+  creation: OptimisticSessionCreation
+): OptimisticSessionCreation => ({
+  ...creation,
+  errorMessage: undefined,
+  session: {
+    ...creation.session,
+    status: 'running'
+  },
+  status: 'creating'
+})
+
+export const markOptimisticSessionCreationFailed = (
+  creation: OptimisticSessionCreation,
+  errorMessage: string
+): OptimisticSessionCreation => ({
+  ...creation,
+  errorMessage,
+  session: {
+    ...creation.session,
+    status: 'failed'
+  },
+  status: 'failed'
+})
+
+export const mergeOptimisticSessions = (
+  sessions: Session[],
+  creations: OptimisticSessionCreationMap
+) => {
+  const existingIds = new Set(sessions.map(session => session.id))
+  const mergedSessions = sessions.map(session => creations[session.id]?.session ?? session)
+  const optimisticSessions = Object.values(creations)
+    .map(creation => creation.session)
+    .filter(session => session.isArchived !== true && !existingIds.has(session.id))
+
+  return [...mergedSessions, ...optimisticSessions]
+}
+
+export const removeSessionFromList = (sessions: Session[], id: string) => {
+  return sessions.filter(session => session.id !== id)
+}

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])
+}