@vibe-forge/client 0.8.4 → 0.10.0

package/src/hooks/chat/use-chat-session-actions.ts

@@ -1,10 +1,10 @@
 import { App } from 'antd'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
 import { useSWRConfig } from 'swr'
 
-import { createSession, getApiErrorMessage } from '#~/api.js'
+import { branchSessionFromMessage, createSession, getApiErrorMessage } from '#~/api.js'
 import { connectionManager } from '#~/connectionManager.js'
 import type { ChatMessageContent, Session } from '@vibe-forge/core'
 import type { ChatEffort } from './use-chat-effort'
@@ -30,10 +30,32 @@ export function useChatSessionActions({
   const { message } = App.useApp()
   const { t } = useTranslation()
   const navigate = useNavigate()
+  const location = useLocation()
   const { mutate } = useSWRConfig()
   const [isCreating, setIsCreating] = useState(false)
   const isThinking = isCreating || session?.status === 'running'
 
+  const navigateWithCurrentSearch = useCallback((pathname: string) => {
+    void navigate({
+      pathname,
+      search: location.search
+    })
+  }, [location.search, navigate])
+
+  const insertSessionIntoCache = useCallback(async (newSession: Session) => {
+    await mutate('/api/sessions', (prev: { sessions: Session[] } | undefined) => {
+      if (!prev?.sessions) {
+        return { sessions: [newSession] }
+      }
+
+      const withoutCurrent = prev.sessions.filter((item) => item.id !== newSession.id)
+      return {
+        ...prev,
+        sessions: [newSession, ...withoutCurrent]
+      }
+    }, false)
+  }, [mutate])
+
   useEffect(() => {
     if (!isCreating || session?.id == null || session.id === '') return
     setIsCreating(false)
@@ -55,15 +77,9 @@ export function useChatSessionActions({
           adapter
         })
 
-        await mutate('/api/sessions', (prev: { sessions: Session[] } | undefined) => {
-          if (!prev?.sessions) return { sessions: [newSession] }
-          return {
-            ...prev,
-            sessions: [newSession, ...prev.sessions]
-          }
-        }, false)
+        await insertSessionIntoCache(newSession)
 
-        void navigate(`/session/${newSession.id}`)
+        navigateWithCurrentSearch(`/session/${newSession.id}`)
         return true
       } catch (err) {
         console.error(err)
@@ -82,9 +98,9 @@ export function useChatSessionActions({
     adapter,
     hasAvailableModels,
     isThinking,
+    insertSessionIntoCache,
     message,
-    mutate,
-    navigate,
+    navigateWithCurrentSearch,
     effort,
     permissionMode,
     modelForQuery,
@@ -108,15 +124,9 @@ export function useChatSessionActions({
           adapter
         })
 
-        await mutate('/api/sessions', (prev: { sessions: Session[] } | undefined) => {
-          if (!prev?.sessions) return { sessions: [newSession] }
-          return {
-            ...prev,
-            sessions: [newSession, ...prev.sessions]
-          }
-        }, false)
+        await insertSessionIntoCache(newSession)
 
-        void navigate(`/session/${newSession.id}`)
+        navigateWithCurrentSearch(`/session/${newSession.id}`)
         return true
       } catch (err) {
         console.error(err)
@@ -134,10 +144,10 @@ export function useChatSessionActions({
   }, [
     adapter,
     hasAvailableModels,
+    insertSessionIntoCache,
     isThinking,
+    navigateWithCurrentSearch,
     message,
-    mutate,
-    navigate,
     effort,
     permissionMode,
     modelForQuery,
@@ -157,12 +167,48 @@ export function useChatSessionActions({
     void message.success('Messages cleared')
   }, [message, onClearMessages])
 
+  const runMessageAction = useCallback(async (
+    messageId: string,
+    action: 'fork' | 'recall' | 'edit',
+    options?: { content?: string | ChatMessageContent[] }
+  ) => {
+    if (session?.id == null || session.id === '') {
+      return false
+    }
+
+    try {
+      const { session: newSession } = await branchSessionFromMessage(session.id, messageId, action, options)
+      await insertSessionIntoCache(newSession)
+      navigateWithCurrentSearch(`/session/${newSession.id}`)
+      return true
+    } catch (err) {
+      console.error(err)
+      void message.error(getApiErrorMessage(err, t('common.operationFailed')))
+      return false
+    }
+  }, [insertSessionIntoCache, message, navigateWithCurrentSearch, session?.id, t])
+
+  const forkMessage = useCallback((messageId: string) => {
+    return runMessageAction(messageId, 'fork')
+  }, [runMessageAction])
+
+  const recallMessage = useCallback((messageId: string) => {
+    return runMessageAction(messageId, 'recall')
+  }, [runMessageAction])
+
+  const editMessage = useCallback((messageId: string, content: string | ChatMessageContent[]) => {
+    return runMessageAction(messageId, 'edit', { content })
+  }, [runMessageAction])
+
   return {
     isCreating,
     isThinking,
     send,
     sendContent,
+    editMessage,
+    forkMessage,
     interrupt,
-    clearMessages
+    clearMessages,
+    recallMessage
   }
 }

package/src/hooks/chat/use-chat-session-messages.ts

@@ -6,6 +6,13 @@ import { getSessionMessages } from '#~/api.js'
 import { connectionManager } from '#~/connectionManager.js'
 import type { AskUserQuestionParams, ChatMessage, Session, WSEvent } from '@vibe-forge/core'
 import type { SessionInfo } from '@vibe-forge/types'
+import type { ChatErrorBannerState } from './interaction-state'
+import {
+  applyInteractionStateEvent,
+  findLatestFatalError,
+  getFatalSessionError,
+  restoreInteractionStateFromHistory
+} from './interaction-state'
 import type { ChatEffort } from './use-chat-effort'
 import type { PermissionMode } from './use-chat-permission-mode'
 
@@ -56,19 +63,118 @@ export function useChatSessionMessages({
   const [messages, setMessages] = useState<ChatMessage[]>([])
   const [sessionInfo, setSessionInfo] = useState<SessionInfo | null>(null)
   const [isReady, setIsReady] = useState(false)
-  const [connectionError, setConnectionError] = useState<string | null>(null)
+  const [errorBanner, setErrorBanner] = useState<ChatErrorBannerState | null>(null)
   const [retryCount, setRetryCount] = useState(0)
   const isInitialLoadRef = useRef<boolean>(true)
   const lastConnectedModelRef = useRef<string | undefined>(undefined)
   const lastConnectedEffortRef = useRef<string | undefined>(undefined)
   const lastConnectedPermissionModeRef = useRef<string | undefined>(undefined)
   const lastConnectedAdapterRef = useRef<string | undefined>(undefined)
+  const lastObservedSessionStatusRef = useRef<Session['status'] | undefined>(session?.status)
   const expectedCloseRef = useRef(false)
+  const interactionRequestRef = useRef<{ id: string; payload: AskUserQuestionParams } | null>(null)
+  const activeSessionIdRef = useRef<string | undefined>(session?.id)
+  const historyRequestSeqRef = useRef(0)
+  const reconcileTimersRef = useRef<Array<ReturnType<typeof setTimeout>>>([])
+
+  activeSessionIdRef.current = session?.id
+
+  const clearScheduledReconciles = useCallback(() => {
+    for (const timer of reconcileTimersRef.current) {
+      clearTimeout(timer)
+    }
+    reconcileTimersRef.current = []
+  }, [])
+
+  const refreshHistory = useCallback(async (options: { updateReadiness?: boolean } = {}) => {
+    const sessionId = activeSessionIdRef.current
+    if (sessionId == null || sessionId === '') {
+      return
+    }
+
+    const requestSeq = ++historyRequestSeqRef.current
+
+    try {
+      const res = await getSessionMessages(sessionId)
+      if (activeSessionIdRef.current !== sessionId || historyRequestSeqRef.current !== requestSeq) {
+        return
+      }
+
+      const events = res.messages as WSEvent[]
+
+      if (res.session) {
+        const updatedSession = res.session
+        void mutate('/api/sessions', (prev: { sessions: Session[] } | undefined) => {
+          if (prev?.sessions == null) return prev
+          const newSessions = prev.sessions.map((s: Session) =>
+            s.id === updatedSession.id ? { ...s, ...updatedSession } : s
+          )
+          return { ...prev, sessions: newSessions }
+        }, false)
+      }
+
+      let currentMessages: ChatMessage[] = []
+      let currentSessionInfo: SessionInfo | null = null
+      const restoredInteraction = restoreInteractionStateFromHistory(
+        events,
+        res.interaction ?? null,
+        res.session?.status
+      )
+      const latestFatalError = findLatestFatalError(events)
+
+      interactionRequestRef.current = restoredInteraction
+      setInteractionRequest(restoredInteraction)
+      setErrorBanner(
+        restoredInteraction == null && res.session?.status === 'failed' && latestFatalError != null
+          ? {
+            kind: 'session',
+            message: latestFatalError.message
+          }
+          : null
+      )
+
+      for (const data of events) {
+        currentMessages = applyMessageEvent(currentMessages, data)
+        currentMessages = applyToolResultEvent(currentMessages, data)
+        if (data.type === 'session_info') {
+          if (data.info != null && data.info.type !== 'summary') {
+            currentSessionInfo = data.info
+          }
+        }
+      }
+
+      setMessages(currentMessages)
+      setSessionInfo(currentSessionInfo)
+
+      if (options.updateReadiness !== false) {
+        setTimeout(() => {
+          if (activeSessionIdRef.current !== sessionId || historyRequestSeqRef.current !== requestSeq) {
+            return
+          }
+          setIsReady(true)
+          isInitialLoadRef.current = false
+        }, 100)
+      }
+    } catch (err) {
+      console.error('Failed to fetch history messages:', err)
+    }
+  }, [mutate, setInteractionRequest])
+
+  const reconcileAfterInteraction = useCallback(() => {
+    clearScheduledReconciles()
+
+    for (const delay of [0, 800, 2400, 5000, 9000, 15000]) {
+      const timer = globalThis.setTimeout(() => {
+        void refreshHistory({ updateReadiness: false })
+      }, delay)
+      reconcileTimersRef.current.push(timer)
+    }
+  }, [clearScheduledReconciles, refreshHistory])
 
   const retryConnection = useCallback(() => {
     if (session?.id == null || session.id === '') return
     expectedCloseRef.current = true
-    setConnectionError(null)
+    setErrorBanner(null)
     connectionManager.close(session.id)
     setRetryCount((count) => count + 1)
   }, [session?.id])
@@ -77,8 +183,9 @@ export function useChatSessionMessages({
     setMessages([])
     setSessionInfo(null)
     setIsReady(false)
-    setConnectionError(null)
+    setErrorBanner(null)
     setInteractionRequest(null)
+    interactionRequestRef.current = null
     isInitialLoadRef.current = true
 
     if (session?.id == null || session.id === '') {
@@ -87,64 +194,32 @@ export function useChatSessionMessages({
       lastConnectedEffortRef.current = undefined
       lastConnectedPermissionModeRef.current = undefined
       lastConnectedAdapterRef.current = undefined
+      clearScheduledReconciles()
       return
     }
 
-    let isDisposed = false
-
-    const fetchHistory = async () => {
-      try {
-        const res = await getSessionMessages(session.id)
-        if (isDisposed) return
-        const events = res.messages as WSEvent[]
-
-        if (res.session) {
-          const updatedSession = res.session
-          void mutate('/api/sessions', (prev: { sessions: Session[] } | undefined) => {
-            if (prev?.sessions == null) return prev
-            const newSessions = prev.sessions.map((s: Session) =>
-              s.id === updatedSession.id ? { ...s, ...updatedSession } : s
-            )
-            return { ...prev, sessions: newSessions }
-          }, false)
-        }
-
-        if (res.interaction) {
-          setInteractionRequest(res.interaction)
-        }
-
-        let currentMessages: ChatMessage[] = []
-        let currentSessionInfo: SessionInfo | null = null
-
-        for (const data of events) {
-          currentMessages = applyMessageEvent(currentMessages, data)
-          currentMessages = applyToolResultEvent(currentMessages, data)
-          if (data.type === 'session_info') {
-            if (data.info != null && data.info.type !== 'summary') {
-              currentSessionInfo = data.info
-            }
-          }
-        }
+    void refreshHistory()
 
-        setMessages(currentMessages)
-        setSessionInfo(currentSessionInfo)
+    return () => {
+      clearScheduledReconciles()
+    }
+  }, [clearScheduledReconciles, refreshHistory, session?.id, setInteractionRequest])
 
-        setTimeout(() => {
-          if (isDisposed) return
-          setIsReady(true)
-          isInitialLoadRef.current = false
-        }, 100)
-      } catch (err) {
-        console.error('Failed to fetch history messages:', err)
-      }
+  useEffect(() => {
+    if (session?.id == null || session.id === '') {
+      lastObservedSessionStatusRef.current = undefined
+      return
     }
 
-    void fetchHistory()
+    const previousStatus = lastObservedSessionStatusRef.current
+    lastObservedSessionStatusRef.current = session.status
 
-    return () => {
-      isDisposed = true
+    if (previousStatus == null || previousStatus === session.status) {
+      return
     }
-  }, [mutate, session?.id, setInteractionRequest])
+
+    void refreshHistory({ updateReadiness: false })
+  }, [refreshHistory, session?.id, session?.status])
 
   useEffect(() => {
     if (session?.id == null || session.id === '') {
@@ -174,7 +249,7 @@ export function useChatSessionMessages({
       session?.status !== 'running'
     if (modelChanged || effortChanged || permissionModeChanged || adapterChanged) {
       expectedCloseRef.current = true
-      setConnectionError(null)
+      setErrorBanner(null)
       connectionManager.send(session.id, { type: 'terminate_session' })
       connectionManager.close(session.id)
     }
@@ -203,12 +278,30 @@ export function useChatSessionMessages({
       cleanup = connectionManager.connect(session.id, {
         onOpen() {
           expectedCloseRef.current = false
-          setConnectionError(null)
+          setErrorBanner((current) => current?.kind === 'session' ? current : null)
         },
         onMessage(data: WSEvent) {
           if (isDisposed) return
+          const nextInteraction = applyInteractionStateEvent(interactionRequestRef.current, data)
+          if (nextInteraction !== interactionRequestRef.current) {
+            interactionRequestRef.current = nextInteraction
+            setInteractionRequest(nextInteraction)
+            if (nextInteraction != null) {
+              setErrorBanner(null)
+            }
+          }
+          if (data.type === 'interaction_response') {
+            reconcileAfterInteraction()
+            return
+          }
           if (data.type === 'error') {
-            setConnectionError(data.data?.message ?? data.message ?? 'Unknown error')
+            const fatalError = getFatalSessionError(data)
+            if (fatalError != null) {
+              setErrorBanner({
+                kind: 'session',
+                message: fatalError.message
+              })
+            }
             return
           }
 
@@ -269,12 +362,15 @@ export function useChatSessionMessages({
           }
 
           if (data.type === 'interaction_request') {
-            setInteractionRequest({ id: data.id, payload: data.payload })
+            setInteractionRequest(data)
           }
         },
         onError() {
           if (isDisposed) return
-          setConnectionError(t('chat.connectionError'))
+          setErrorBanner({
+            kind: 'connection',
+            message: t('chat.connectionError')
+          })
         },
         onClose() {
           if (isDisposed) return
@@ -282,7 +378,12 @@ export function useChatSessionMessages({
             expectedCloseRef.current = false
             return
           }
-          setConnectionError((current) => current ?? t('chat.connectionClosed'))
+          setErrorBanner((current) =>
+            current ?? {
+              kind: 'connection',
+              message: t('chat.connectionClosed')
+            }
+          )
         }
       }, Object.keys(connectionParams).length > 0 ? connectionParams : undefined)
     }, (modelChanged || effortChanged || permissionModeChanged || adapterChanged) ? 200 : 100)
@@ -294,11 +395,14 @@ export function useChatSessionMessages({
     }
   }, [
     adapter,
+    clearScheduledReconciles,
     effort,
     modelForQuery,
     mutate,
     permissionMode,
+    reconcileAfterInteraction,
     retryCount,
+    refreshHistory,
     session?.id,
     session?.status,
     setInteractionRequest,
@@ -310,7 +414,8 @@ export function useChatSessionMessages({
     setMessages,
     sessionInfo,
     isReady,
-    connectionError,
-    retryConnection
+    errorBanner,
+    retryConnection,
+    reconcileAfterInteraction
   }
 }

package/src/hooks/chat/use-chat-session.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react'
+import { useCallback, useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import type { Session } from '@vibe-forge/core'
@@ -18,23 +18,37 @@ export function useChatSession({
   const {
     adapterOptions,
     applySessionSelection,
+    modelMenuGroups,
     selectedAdapter,
     selectedModel,
     selectedModelWithService,
     setSelectedModel,
     setSelectedAdapter,
-    modelOptions,
+    modelSearchOptions,
+    recommendedModelOptions,
+    servicePreviewModelOptions,
+    toggleRecommendedModel,
+    updatingRecommendedModelValue,
     hasAvailableModels
   } = useChatModelAdapterSelection({
     adapterLocked: session?.id != null
   })
   const { permissionMode, setPermissionMode, permissionModeOptions } = useChatPermissionMode()
   const { effort, setEffort, effortOptions } = useChatEffort()
-  const { activeView, setActiveView } = useChatView()
-  const { interactionRequest, setInteractionRequest, handleInteractionResponse } = useChatInteraction({
-    sessionId: session?.id
-  })
-  const { messages, setMessages, sessionInfo, isReady, connectionError, retryConnection } = useChatSessionMessages({
+  const { activeView, isTerminalOpen, setActiveView, setIsTerminalOpen } = useChatView()
+  const { interactionRequest, setInteractionRequest, handleInteractionResponse: submitInteractionResponse } =
+    useChatInteraction({
+      sessionId: session?.id
+    })
+  const {
+    messages,
+    setMessages,
+    sessionInfo,
+    isReady,
+    errorBanner,
+    retryConnection,
+    reconcileAfterInteraction
+  } = useChatSessionMessages({
     session,
     modelForQuery: selectedModelWithService,
     effort,
@@ -42,6 +56,10 @@ export function useChatSession({
     adapter: selectedAdapter,
     setInteractionRequest
   })
+  const handleInteractionResponse = useCallback((id: string, data: string | string[]) => {
+    reconcileAfterInteraction()
+    submitInteractionResponse(id, data)
+  }, [reconcileAfterInteraction, submitInteractionResponse])
   const lastObservedSessionRef = useRef<Pick<Session, 'id' | 'model' | 'permissionMode' | 'adapter' | 'effort'> | null>(
     null
   )
@@ -94,15 +112,22 @@ export function useChatSession({
     sessionInfo,
     interactionRequest,
     isReady,
-    connectionError,
+    errorBanner,
     retryConnection,
     isThinking,
     activeView,
+    isTerminalOpen,
     setActiveView,
+    setIsTerminalOpen,
     handleInteractionResponse,
     setMessages,
     placeholder: !session?.id ? t('chat.newSessionPlaceholder') : undefined,
-    modelOptions,
+    modelMenuGroups,
+    modelSearchOptions,
+    recommendedModelOptions,
+    servicePreviewModelOptions,
+    toggleRecommendedModel,
+    updatingRecommendedModelValue,
     selectedModel,
     modelForQuery: selectedModelWithService,
     setSelectedModel,

package/src/hooks/chat/use-chat-view.ts

@@ -11,29 +11,49 @@ const normalizeView = (value: string): ChatHeaderView => {
 }
 
 export function useChatView() {
-  const { values: queryValues, update: updateQuery } = useQueryParams<{ view: string }>({
-    keys: ['view'],
+  const { values: queryValues, update: updateQuery } = useQueryParams<{ terminal: string; view: string }>({
+    keys: ['view', 'terminal'],
     defaults: {
-      view: 'history'
+      view: 'history',
+      terminal: ''
     },
     omit: {
-      view: (value) => value === 'history'
+      view: (value) => value === 'history',
+      terminal: (value) => value === '' || value === 'false'
     }
   })
 
-  const activeView = normalizeView(queryValues.view)
+  const legacyTerminalView = queryValues.view === 'terminal'
+  const activeView = normalizeView(legacyTerminalView ? 'history' : queryValues.view)
+  const isTerminalOpen = queryValues.terminal === 'true' || legacyTerminalView
+
   const setActiveView = useCallback((view: ChatHeaderView) => {
     updateQuery({ view })
   }, [updateQuery])
 
+  const setIsTerminalOpen = useCallback((nextOpen: boolean) => {
+    updateQuery({ terminal: nextOpen ? 'true' : 'false' })
+  }, [updateQuery])
+
   useEffect(() => {
     if (activeView !== queryValues.view) {
       updateQuery({ view: activeView })
     }
   }, [activeView, queryValues.view, updateQuery])
 
+  useEffect(() => {
+    if (legacyTerminalView) {
+      updateQuery({
+        view: 'history',
+        terminal: 'true'
+      })
+    }
+  }, [legacyTerminalView, updateQuery])
+
   return {
     activeView,
-    setActiveView
+    isTerminalOpen,
+    setActiveView,
+    setIsTerminalOpen
   }
 }

package/src/hooks/chat/use-composer-control-shortcuts.ts

@@ -0,0 +1,69 @@
+import { useMemo } from 'react'
+
+import type { Config } from '@vibe-forge/types'
+
+import { useGlobalShortcut } from '../useGlobalShortcut'
+
+type ComposerShortcutConfig = NonNullable<Config['shortcuts']>
+
+export const composerControlShortcutDefaults = {
+  switchModel: 'mod+shift+m',
+  switchEffort: 'mod+t',
+  switchPermissionMode: 'mod+p'
+} satisfies Pick<ComposerShortcutConfig, 'switchModel' | 'switchEffort' | 'switchPermissionMode'>
+
+export const resolveComposerControlShortcuts = (
+  shortcuts?: Config['shortcuts']
+) => {
+  const resolveShortcut = (value: string | undefined, fallback: string) => {
+    return value != null && value.trim() !== '' ? value : fallback
+  }
+
+  return {
+    switchModel: resolveShortcut(shortcuts?.switchModel, composerControlShortcutDefaults.switchModel),
+    switchEffort: resolveShortcut(shortcuts?.switchEffort, composerControlShortcutDefaults.switchEffort),
+    switchPermissionMode: resolveShortcut(
+      shortcuts?.switchPermissionMode,
+      composerControlShortcutDefaults.switchPermissionMode
+    )
+  }
+}
+
+export const useComposerControlShortcuts = ({
+  enabled = true,
+  isMac,
+  shortcuts,
+  onSwitchModel,
+  onSwitchEffort,
+  onSwitchPermissionMode
+}: {
+  enabled?: boolean
+  isMac: boolean
+  shortcuts?: Config['shortcuts']
+  onSwitchModel: (event: KeyboardEvent) => void
+  onSwitchEffort: (event: KeyboardEvent) => void
+  onSwitchPermissionMode: (event: KeyboardEvent) => void
+}) => {
+  const resolvedShortcuts = useMemo(() => resolveComposerControlShortcuts(shortcuts), [shortcuts])
+
+  useGlobalShortcut({
+    shortcut: resolvedShortcuts.switchModel,
+    enabled,
+    isMac,
+    onTrigger: onSwitchModel
+  })
+  useGlobalShortcut({
+    shortcut: resolvedShortcuts.switchEffort,
+    enabled,
+    isMac,
+    onTrigger: onSwitchEffort
+  })
+  useGlobalShortcut({
+    shortcut: resolvedShortcuts.switchPermissionMode,
+    enabled,
+    isMac,
+    onTrigger: onSwitchPermissionMode
+  })
+
+  return resolvedShortcuts
+}