@vibe-forge/client 0.4.0 → 0.6.0

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

@@ -1,10 +1,11 @@
 import { App } from 'antd'
-import { useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { useSWRConfig } from 'swr'
 
-import type { AskUserQuestionParams, ChatMessage, Session, SessionInfo, WSEvent } from '@vibe-forge/core'
 import { getSessionMessages } from '#~/api.js'
 import { connectionManager } from '#~/connectionManager.js'
+import type { AskUserQuestionParams, ChatMessage, Session, SessionInfo, WSEvent } from '@vibe-forge/core'
 import type { PermissionMode } from './use-chat-permission-mode'
 
 const applyMessageEvent = (currentMessages: ChatMessage[], data: WSEvent) => {
@@ -38,26 +39,41 @@ export function useChatSessionMessages({
   session,
   modelForQuery,
   permissionMode,
+  adapter,
   setInteractionRequest
 }: {
   session?: Session
   modelForQuery?: string
   permissionMode: PermissionMode
+  adapter?: string
   setInteractionRequest: (value: { id: string; payload: AskUserQuestionParams } | null) => void
 }) {
-  const { message } = App.useApp()
+  const { t } = useTranslation()
   const { mutate } = useSWRConfig()
   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 [retryCount, setRetryCount] = useState(0)
   const isInitialLoadRef = useRef<boolean>(true)
   const lastConnectedModelRef = useRef<string | undefined>(undefined)
   const lastConnectedPermissionModeRef = useRef<string | undefined>(undefined)
+  const lastConnectedAdapterRef = useRef<string | undefined>(undefined)
+  const expectedCloseRef = useRef(false)
+
+  const retryConnection = useCallback(() => {
+    if (session?.id == null || session.id === '') return
+    expectedCloseRef.current = true
+    setConnectionError(null)
+    connectionManager.close(session.id)
+    setRetryCount((count) => count + 1)
+  }, [session?.id])
 
   useEffect(() => {
     setMessages([])
     setSessionInfo(null)
     setIsReady(false)
+    setConnectionError(null)
     setInteractionRequest(null)
     isInitialLoadRef.current = true
 
@@ -65,6 +81,7 @@ export function useChatSessionMessages({
       setIsReady(true)
       lastConnectedModelRef.current = undefined
       lastConnectedPermissionModeRef.current = undefined
+      lastConnectedAdapterRef.current = undefined
       return
     }
 
@@ -141,31 +158,44 @@ export function useChatSessionMessages({
       lastConnectedPermissionModeRef.current != null &&
       normalizedPermissionMode !== lastConnectedPermissionModeRef.current &&
       session?.status !== 'running'
-    if (modelChanged || permissionModeChanged) {
+    const normalizedAdapter = adapter ?? ''
+    const adapterChanged = adapter != null &&
+      lastConnectedAdapterRef.current != null &&
+      normalizedAdapter !== lastConnectedAdapterRef.current &&
+      session?.status !== 'running'
+    if (modelChanged || permissionModeChanged || adapterChanged) {
+      expectedCloseRef.current = true
+      setConnectionError(null)
       connectionManager.send(session.id, { type: 'terminate_session' })
       connectionManager.close(session.id)
     }
     lastConnectedModelRef.current = normalizedModel
     lastConnectedPermissionModeRef.current = normalizedPermissionMode
+    lastConnectedAdapterRef.current = normalizedAdapter
 
     const timer = setTimeout(() => {
       if (isDisposed) return
 
       const connectionParams: Record<string, string> = {}
-    if (modelForQuery) {
-      connectionParams.model = modelForQuery
+      if (modelForQuery) {
+        connectionParams.model = modelForQuery
       }
       if (permissionMode) {
         connectionParams.permissionMode = permissionMode
       }
+      if (adapter) {
+        connectionParams.adapter = adapter
+      }
 
       cleanup = connectionManager.connect(session.id, {
         onOpen() {
+          expectedCloseRef.current = false
+          setConnectionError(null)
         },
         onMessage(data: WSEvent) {
           if (isDisposed) return
           if (data.type === 'error') {
-            void message.error(data.message)
+            setConnectionError(data.message)
             return
           }
 
@@ -229,22 +259,44 @@ export function useChatSessionMessages({
             setInteractionRequest({ id: data.id, payload: data.payload })
           }
         },
+        onError() {
+          if (isDisposed) return
+          setConnectionError(t('chat.connectionError'))
+        },
         onClose() {
+          if (isDisposed) return
+          if (expectedCloseRef.current) {
+            expectedCloseRef.current = false
+            return
+          }
+          setConnectionError((current) => current ?? t('chat.connectionClosed'))
         }
       }, Object.keys(connectionParams).length > 0 ? connectionParams : undefined)
-    }, modelChanged ? 200 : 100)
+    }, (modelChanged || permissionModeChanged || adapterChanged) ? 200 : 100)
 
     return () => {
       isDisposed = true
       clearTimeout(timer)
       cleanup?.()
     }
-  }, [message, modelForQuery, mutate, permissionMode, session?.id, session?.status, setInteractionRequest])
+  }, [
+    adapter,
+    modelForQuery,
+    mutate,
+    permissionMode,
+    retryCount,
+    session?.id,
+    session?.status,
+    setInteractionRequest,
+    t
+  ])
 
   return {
     messages,
     setMessages,
     sessionInfo,
-    isReady
+    isReady,
+    connectionError,
+    retryConnection
   }
 }

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

@@ -1,6 +1,8 @@
+import { useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import type { Session } from '@vibe-forge/core'
+import { useChatAdapter } from './use-chat-adapter'
 import { useChatInteraction } from './use-chat-interaction'
 import { useChatModels } from './use-chat-models'
 import { useChatPermissionMode } from './use-chat-permission-mode'
@@ -13,31 +15,73 @@ export function useChatSession({
   session?: Session
 }) {
   const { t } = useTranslation()
+  const { selectedAdapter, setSelectedAdapter, adapterOptions } = useChatAdapter()
   const {
     selectedModel,
     selectedModelWithService,
     setSelectedModel,
     modelOptions,
     hasAvailableModels
-  } = useChatModels()
+  } = useChatModels({ selectedAdapter })
   const { permissionMode, setPermissionMode, permissionModeOptions } = useChatPermissionMode()
   const { activeView, setActiveView } = useChatView()
   const { interactionRequest, setInteractionRequest, handleInteractionResponse } = useChatInteraction({
     sessionId: session?.id
   })
-  const { messages, setMessages, sessionInfo, isReady } = useChatSessionMessages({
+  const { messages, setMessages, sessionInfo, isReady, connectionError, retryConnection } = useChatSessionMessages({
     session,
     modelForQuery: selectedModelWithService,
     permissionMode,
+    adapter: selectedAdapter,
     setInteractionRequest
   })
+  const lastObservedSessionRef = useRef<Pick<Session, 'id' | 'model' | 'permissionMode' | 'adapter'> | null>(null)
   const isThinking = session?.status === 'running'
 
+  useEffect(() => {
+    if (session?.id == null || session.id === '') {
+      lastObservedSessionRef.current = null
+      return
+    }
+
+    const previous = lastObservedSessionRef.current
+    const sessionChanged = previous?.id !== session.id
+
+    if (sessionChanged || previous?.model !== session.model) {
+      setSelectedModel(session.model)
+    }
+
+    if (sessionChanged || previous?.permissionMode !== session.permissionMode) {
+      setPermissionMode(session.permissionMode)
+    }
+
+    if (sessionChanged || previous?.adapter !== session.adapter) {
+      setSelectedAdapter(session.adapter)
+    }
+
+    lastObservedSessionRef.current = {
+      id: session.id,
+      model: session.model,
+      permissionMode: session.permissionMode,
+      adapter: session.adapter
+    }
+  }, [
+    session?.adapter,
+    session?.id,
+    session?.model,
+    session?.permissionMode,
+    setPermissionMode,
+    setSelectedAdapter,
+    setSelectedModel
+  ])
+
   return {
     messages,
     sessionInfo,
     interactionRequest,
     isReady,
+    connectionError,
+    retryConnection,
     isThinking,
     activeView,
     setActiveView,
@@ -51,6 +95,9 @@ export function useChatSession({
     permissionMode,
     setPermissionMode,
     permissionModeOptions,
+    selectedAdapter,
+    setSelectedAdapter,
+    adapterOptions,
     hasAvailableModels,
     modelUnavailable: !hasAvailableModels
   }

package/src/hooks/use-app-preferences.ts

@@ -0,0 +1,41 @@
+import { theme } from 'antd'
+import { useAtomValue } from 'jotai'
+import { useEffect, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import useSWR from 'swr'
+
+import type { ConfigResponse } from '@vibe-forge/core'
+
+import { getConfig } from '#~/api'
+import { themeAtom } from '#~/store'
+
+export function useAppPreferences() {
+  const { i18n } = useTranslation()
+  const themeMode = useAtomValue(themeAtom)
+  const { data: configRes } = useSWR<ConfigResponse>('/api/config', getConfig)
+  const interfaceLanguage = configRes?.sources?.merged?.general?.interfaceLanguage
+  const isDarkMode = themeMode === 'dark'
+    || (themeMode === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
+
+  useEffect(() => {
+    document.documentElement.classList.toggle('dark', isDarkMode)
+  }, [isDarkMode])
+
+  useEffect(() => {
+    if (interfaceLanguage && i18n.language !== interfaceLanguage) {
+      void i18n.changeLanguage(interfaceLanguage)
+    }
+  }, [i18n, interfaceLanguage])
+
+  const themeConfig = useMemo(() => ({
+    algorithm: isDarkMode ? theme.darkAlgorithm : theme.defaultAlgorithm,
+    token: {
+      colorPrimary: isDarkMode ? '#3b82f6' : '#000000'
+    }
+  }), [isDarkMode])
+
+  return {
+    isDarkMode,
+    themeConfig
+  }
+}

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

@@ -0,0 +1,101 @@
+import { useEffect } from 'react'
+import { useSWRConfig } from 'swr'
+
+import type { Session, WSEvent } from '@vibe-forge/core'
+
+import { createSocket } from '#~/ws.js'
+
+interface SessionListResponse {
+  sessions: Session[]
+}
+type SessionUpdate = Session | { id: string; isDeleted: boolean }
+
+const sortSessions = (sessions: Session[]) => {
+  return [...sessions].sort((a, b) => {
+    const starredDelta = Number(b.isStarred === true) - Number(a.isStarred === true)
+    if (starredDelta !== 0) return starredDelta
+    return (b.createdAt ?? 0) - (a.createdAt ?? 0)
+  })
+}
+
+const mergeSessionList = (
+  prev: SessionListResponse | undefined,
+  updatedSession: SessionUpdate,
+  filter: 'active' | 'archived'
+) => {
+  if (prev?.sessions == null) return prev
+
+  if ('isDeleted' in updatedSession && updatedSession.isDeleted) {
+    return {
+      ...prev,
+      sessions: prev.sessions.filter((session) => session.id !== updatedSession.id)
+    }
+  }
+
+  const shouldInclude = filter === 'archived'
+    ? updatedSession.isArchived === true
+    : updatedSession.isArchived !== true
+  const existing = prev.sessions.find((session) => session.id === updatedSession.id)
+
+  if (!shouldInclude) {
+    return {
+      ...prev,
+      sessions: prev.sessions.filter((session) => session.id !== updatedSession.id)
+    }
+  }
+
+  const nextSessions = existing
+    ? prev.sessions.map((session) => session.id === updatedSession.id ? { ...session, ...updatedSession } : session)
+    : [updatedSession, ...prev.sessions]
+
+  return {
+    ...prev,
+    sessions: sortSessions(nextSessions)
+  }
+}
+
+export function useSessionSubscription() {
+  const { mutate } = useSWRConfig()
+
+  useEffect(() => {
+    let disposed = false
+    let socket: WebSocket | undefined
+    let reconnectTimer: ReturnType<typeof setTimeout> | undefined
+
+    const connect = () => {
+      if (disposed) return
+
+      socket = createSocket({
+        onMessage: (data: WSEvent) => {
+          if (data.type !== 'session_updated') return
+          const updatedSession = data.session as SessionUpdate
+
+          void mutate('/api/sessions', (prev: SessionListResponse | undefined) => {
+            return mergeSessionList(prev, updatedSession, 'active')
+          }, false)
+
+          void mutate('/api/sessions/archived', (prev: SessionListResponse | undefined) => {
+            return mergeSessionList(prev, updatedSession, 'archived')
+          }, false)
+        },
+        onClose: () => {
+          if (disposed) return
+          reconnectTimer = setTimeout(connect, 1000)
+        },
+        onError: () => {
+          socket?.close()
+        }
+      }, { subscribe: 'sessions' })
+    }
+
+    connect()
+
+    return () => {
+      disposed = true
+      if (reconnectTimer) {
+        clearTimeout(reconnectTimer)
+      }
+      socket?.close()
+    }
+  }, [mutate])
+}

package/src/hooks/use-sidebar-navigation.ts

@@ -0,0 +1,35 @@
+import { useAtomValue } from 'jotai'
+import { useCallback } from 'react'
+import { matchPath, useLocation, useNavigate } from 'react-router-dom'
+
+import type { Session } from '@vibe-forge/core'
+
+import { sidebarWidthAtom } from '#~/store'
+
+const SESSION_ROUTE_PATTERN = '/session/:sessionId'
+
+export function useSidebarNavigation() {
+  const navigate = useNavigate()
+  const location = useLocation()
+  const sidebarWidth = useAtomValue(sidebarWidthAtom)
+  const sessionMatch = matchPath({ path: SESSION_ROUTE_PATTERN, end: true }, location.pathname)
+  const activeSessionId = sessionMatch?.params.sessionId
+  const showSidebar = location.pathname === '/' || activeSessionId != null
+
+  const handleSelectSession = useCallback((session: Session, _isNew?: boolean) => {
+    void navigate(session.id === '' ? '/' : `/session/${session.id}`)
+  }, [navigate])
+
+  const handleDeletedSession = useCallback((deletedId: string, nextId?: string) => {
+    if (activeSessionId !== deletedId) return
+    void navigate(nextId ? `/session/${nextId}` : '/')
+  }, [activeSessionId, navigate])
+
+  return {
+    activeSessionId,
+    handleDeletedSession,
+    handleSelectSession,
+    showSidebar,
+    sidebarWidth
+  }
+}

package/src/resources/adapters.ts

@@ -0,0 +1,20 @@
+import { adapterDisplayName as claudeCodeDisplayName, adapterIcon as claudeCodeIcon } from '@vibe-forge/adapter-claude-code/icon'
+import { adapterDisplayName as codexDisplayName, adapterIcon as codexIcon } from '@vibe-forge/adapter-codex/icon'
+
+export const adapterDisplayMap = {
+  'claude-code': {
+    title: claudeCodeDisplayName,
+    icon: claudeCodeIcon
+  },
+  codex: {
+    title: codexDisplayName,
+    icon: codexIcon
+  }
+} as const
+
+export const getAdapterDisplay = (adapterKey: string) => {
+  return adapterDisplayMap[adapterKey as keyof typeof adapterDisplayMap] ?? {
+    title: adapterKey,
+    icon: undefined
+  }
+}

package/src/resources/locales/en.json

@@ -306,11 +306,17 @@
     "modelSearchPlaceholder": "Search models or services",
     "modelUnavailable": "No models available",
     "modelConfigRequired": "Add a model service in config before starting a session",
+    "connectionErrorTitle": "Connection error",
+    "connectionError": "WebSocket connection failed. Check the server and try again.",
+    "connectionClosed": "WebSocket connection closed. Try reconnecting.",
+    "retryConnection": "Retry",
     "imageTooLarge": "Image must be smaller than 5MB",
     "imageReadFailed": "Failed to read image",
     "imageNotSupportedInInteraction": "Images are not supported for this interaction",
     "modelGroupRecommended": "Recommended Models",
     "availableTools": "Available Tools",
+    "toolGroupChromeDevtools": "ChromeDevtools",
+    "toolGroupSystem": "System",
     "toolsCount": "{{count}} tools",
     "usedTools": "Used {{count}} tools",
     "viewInitInfo": "Double click to view initialization info",

package/src/resources/locales/zh.json

@@ -307,11 +307,17 @@
     "modelSearchPlaceholder": "搜索模型或服务",
     "modelUnavailable": "暂无可用模型",
     "modelConfigRequired": "请先在配置中添加模型服务后再开始会话",
+    "connectionErrorTitle": "连接异常",
+    "connectionError": "WebSocket 连接失败，请检查服务状态后重试",
+    "connectionClosed": "WebSocket 连接已关闭，请重试",
+    "retryConnection": "重试连接",
     "imageTooLarge": "图片大小不能超过 5MB",
     "imageReadFailed": "图片读取失败",
     "imageNotSupportedInInteraction": "当前交互不支持图片",
     "modelGroupRecommended": "推荐模型",
     "availableTools": "可用工具",
+    "toolGroupChromeDevtools": "ChromeDevtools",
+    "toolGroupSystem": "系统",
     "toolsCount": "{{count}} 个工具",
     "usedTools": "使用了 {{count}} 个工具",
     "viewInitInfo": "双击查看初始化信息",

package/src/routes/AppRoutes.tsx

@@ -0,0 +1,22 @@
+import { Route, Routes } from 'react-router-dom'
+
+import { ArchiveRoute } from '#~/routes/ArchiveRoute'
+import { AutomationRoute } from '#~/routes/AutomationRoute'
+import { BenchmarkRoute } from '#~/routes/BenchmarkRoute'
+import { ChatRoute } from '#~/routes/ChatRoute'
+import { ConfigRoute } from '#~/routes/ConfigRoute'
+import { KnowledgeRoute } from '#~/routes/KnowledgeRoute'
+
+export function AppRoutes() {
+  return (
+    <Routes>
+      <Route path='/' element={<ChatRoute />} />
+      <Route path='/session/:sessionId' element={<ChatRoute />} />
+      <Route path='/archive' element={<ArchiveRoute />} />
+      <Route path='/benchmark' element={<BenchmarkRoute />} />
+      <Route path='/automation' element={<AutomationRoute />} />
+      <Route path='/knowledge' element={<KnowledgeRoute />} />
+      <Route path='/config' element={<ConfigRoute />} />
+    </Routes>
+  )
+}

package/src/routes/ArchiveRoute.tsx

@@ -0,0 +1,5 @@
+import { ArchiveView } from '#~/components/ArchiveView'
+
+export function ArchiveRoute() {
+  return <ArchiveView />
+}

package/src/routes/AutomationRoute.tsx

@@ -0,0 +1,5 @@
+import { AutomationView } from '#~/components/automation-view'
+
+export function AutomationRoute() {
+  return <AutomationView />
+}

package/src/routes/BenchmarkRoute.tsx

@@ -0,0 +1,5 @@
+import { BenchmarkView } from '#~/components/benchmark-view'
+
+export function BenchmarkRoute() {
+  return <BenchmarkView />
+}

package/src/{components/Chat.scss → routes/ChatRoute.scss}

@@ -43,6 +43,33 @@
   }
 }
 
+.chat-messages-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-height: 100%;
+}
+
+.chat-pending-session-banner {
+  align-self: center;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0 auto 4px;
+  padding: 8px 14px;
+  border: 1px solid rgba(59, 130, 246, .18);
+  border-radius: 999px;
+  background: linear-gradient(135deg, rgba(239, 246, 255, .92), rgba(255, 255, 255, .96));
+  color: #2563eb;
+  font-size: 13px;
+  font-weight: 500;
+  box-shadow: 0 8px 24px rgba(59, 130, 246, .08);
+
+  .material-symbols-rounded {
+    font-size: 16px;
+  }
+}
+
 .sender-container {
   flex: 0;
   display: flex;
@@ -87,3 +114,11 @@
   overflow: auto;
   padding: 20px 24px 24px;
 }
+
+.chat-route__empty-state {
+  height: 100%;
+  display: grid;
+  place-items: center;
+  align-content: center;
+  gap: 16px;
+}