@vibe-forge/client 0.3.0 → 0.4.0

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

@@ -0,0 +1,147 @@
+import { App } from 'antd'
+import { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useNavigate } from 'react-router-dom'
+import { useSWRConfig } from 'swr'
+
+import type { ChatMessageContent, Session } from '@vibe-forge/core'
+import { createSession } from '#~/api.js'
+import { connectionManager } from '#~/connectionManager.js'
+import type { PermissionMode } from './use-chat-permission-mode'
+
+export function useChatSessionActions({
+  session,
+  modelForQuery,
+  hasAvailableModels,
+  permissionMode,
+  onClearMessages
+}: {
+  session?: Session
+  modelForQuery?: string
+  hasAvailableModels: boolean
+  permissionMode: PermissionMode
+  onClearMessages: () => void
+}) {
+  const { message } = App.useApp()
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const { mutate } = useSWRConfig()
+  const [isCreating, setIsCreating] = useState(false)
+  const isThinking = isCreating || session?.status === 'running'
+
+  const send = useCallback(async (text: string) => {
+    if (text.trim() === '' || isThinking) return
+    if (!hasAvailableModels) {
+      void message.warning(t('chat.modelConfigRequired'))
+      return
+    }
+
+    if (!session?.id) {
+      setIsCreating(true)
+      try {
+        const { session: newSession } = await createSession(undefined, text.trim(), undefined, modelForQuery, {
+          permissionMode
+        })
+
+        await mutate('/api/sessions', (prev: { sessions: Session[] } | undefined) => {
+          if (!prev?.sessions) return { sessions: [newSession] }
+          return {
+            ...prev,
+            sessions: [newSession, ...prev.sessions]
+          }
+        }, false)
+
+        void navigate(`/session/${newSession.id}`)
+      } catch (err) {
+        console.error(err)
+        setIsCreating(false)
+        void message.error('Failed to create session')
+      }
+      return
+    }
+
+    connectionManager.send(session.id, {
+      type: 'user_message',
+      text: text.trim()
+    })
+  }, [
+    hasAvailableModels,
+    isThinking,
+    message,
+    mutate,
+    navigate,
+    permissionMode,
+    modelForQuery,
+    session?.id,
+    t
+  ])
+
+  const sendContent = useCallback(async (content: ChatMessageContent[]) => {
+    if (content.length === 0 || isThinking) return
+    if (!hasAvailableModels) {
+      void message.warning(t('chat.modelConfigRequired'))
+      return
+    }
+
+    if (!session?.id) {
+      setIsCreating(true)
+      try {
+        const { session: newSession } = await createSession(undefined, undefined, content, modelForQuery, {
+          permissionMode
+        })
+
+        await mutate('/api/sessions', (prev: { sessions: Session[] } | undefined) => {
+          if (!prev?.sessions) return { sessions: [newSession] }
+          return {
+            ...prev,
+            sessions: [newSession, ...prev.sessions]
+          }
+        }, false)
+
+        void navigate(`/session/${newSession.id}`)
+        setIsCreating(false)
+      } catch (err) {
+        console.error(err)
+        setIsCreating(false)
+        void message.error('Failed to create session')
+      }
+      return
+    }
+
+    connectionManager.send(session.id, {
+      type: 'user_message',
+      content
+    })
+  }, [
+    hasAvailableModels,
+    isThinking,
+    message,
+    mutate,
+    navigate,
+    permissionMode,
+    modelForQuery,
+    session?.id,
+    t
+  ])
+
+  const interrupt = useCallback(() => {
+    if (!session?.id || isThinking === false) return
+    connectionManager.send(session.id, {
+      type: 'interrupt'
+    })
+  }, [isThinking, session?.id])
+
+  const clearMessages = useCallback(() => {
+    onClearMessages()
+    void message.success('Messages cleared')
+  }, [message, onClearMessages])
+
+  return {
+    isCreating,
+    isThinking,
+    send,
+    sendContent,
+    interrupt,
+    clearMessages
+  }
+}

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

@@ -0,0 +1,250 @@
+import { App } from 'antd'
+import { useEffect, useRef, useState } from 'react'
+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 { PermissionMode } from './use-chat-permission-mode'
+
+const applyMessageEvent = (currentMessages: ChatMessage[], data: WSEvent) => {
+  if (data.type !== 'message') return currentMessages
+  const exists = currentMessages.find((msg) => msg.id === data.message.id)
+  if (exists != null) {
+    return currentMessages.map((msg) => (msg.id === data.message.id ? data.message : msg))
+  }
+  return [...currentMessages, data.message]
+}
+
+const applyToolResultEvent = (currentMessages: ChatMessage[], data: WSEvent): ChatMessage[] => {
+  if (data.type !== 'tool_result') return currentMessages
+  const status = data.isError === true ? 'error' : 'success'
+  return currentMessages.map((msg) => {
+    if (msg.toolCall != null && msg.toolCall.id === data.toolCallId) {
+      return {
+        ...msg,
+        toolCall: {
+          ...msg.toolCall,
+          status,
+          output: data.output
+        }
+      }
+    }
+    return msg
+  })
+}
+
+export function useChatSessionMessages({
+  session,
+  modelForQuery,
+  permissionMode,
+  setInteractionRequest
+}: {
+  session?: Session
+  modelForQuery?: string
+  permissionMode: PermissionMode
+  setInteractionRequest: (value: { id: string; payload: AskUserQuestionParams } | null) => void
+}) {
+  const { message } = App.useApp()
+  const { mutate } = useSWRConfig()
+  const [messages, setMessages] = useState<ChatMessage[]>([])
+  const [sessionInfo, setSessionInfo] = useState<SessionInfo | null>(null)
+  const [isReady, setIsReady] = useState(false)
+  const isInitialLoadRef = useRef<boolean>(true)
+  const lastConnectedModelRef = useRef<string | undefined>(undefined)
+  const lastConnectedPermissionModeRef = useRef<string | undefined>(undefined)
+
+  useEffect(() => {
+    setMessages([])
+    setSessionInfo(null)
+    setIsReady(false)
+    setInteractionRequest(null)
+    isInitialLoadRef.current = true
+
+    if (session?.id == null || session.id === '') {
+      setIsReady(true)
+      lastConnectedModelRef.current = undefined
+      lastConnectedPermissionModeRef.current = undefined
+      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
+            }
+          }
+        }
+
+        setMessages(currentMessages)
+        setSessionInfo(currentSessionInfo)
+
+        setTimeout(() => {
+          if (isDisposed) return
+          setIsReady(true)
+          isInitialLoadRef.current = false
+        }, 100)
+      } catch (err) {
+        console.error('Failed to fetch history messages:', err)
+      }
+    }
+
+    void fetchHistory()
+
+    return () => {
+      isDisposed = true
+    }
+  }, [mutate, session?.id, setInteractionRequest])
+
+  useEffect(() => {
+    if (session?.id == null || session.id === '') {
+      return
+    }
+
+    let isDisposed = false
+    let cleanup: (() => void) | undefined
+    const normalizedModel = modelForQuery ?? ''
+    const modelChanged = modelForQuery != null &&
+      lastConnectedModelRef.current != null &&
+      normalizedModel !== lastConnectedModelRef.current &&
+      session?.status !== 'running'
+    const normalizedPermissionMode = permissionMode ?? ''
+    const permissionModeChanged = permissionMode != null &&
+      lastConnectedPermissionModeRef.current != null &&
+      normalizedPermissionMode !== lastConnectedPermissionModeRef.current &&
+      session?.status !== 'running'
+    if (modelChanged || permissionModeChanged) {
+      connectionManager.send(session.id, { type: 'terminate_session' })
+      connectionManager.close(session.id)
+    }
+    lastConnectedModelRef.current = normalizedModel
+    lastConnectedPermissionModeRef.current = normalizedPermissionMode
+
+    const timer = setTimeout(() => {
+      if (isDisposed) return
+
+      const connectionParams: Record<string, string> = {}
+    if (modelForQuery) {
+      connectionParams.model = modelForQuery
+      }
+      if (permissionMode) {
+        connectionParams.permissionMode = permissionMode
+      }
+
+      cleanup = connectionManager.connect(session.id, {
+        onOpen() {
+        },
+        onMessage(data: WSEvent) {
+          if (isDisposed) return
+          if (data.type === 'error') {
+            void message.error(data.message)
+            return
+          }
+
+          if (data.type === 'session_updated') {
+            void mutate('/api/sessions', (prev: { sessions: Session[] } | undefined) => {
+              if (prev?.sessions == null) return prev
+              const updatedSession = data.session as Session | { id: string; isDeleted: boolean }
+
+              if ('isDeleted' in updatedSession && updatedSession.isDeleted) {
+                return {
+                  ...prev,
+                  sessions: prev.sessions.filter((s: Session) => s.id !== updatedSession.id)
+                }
+              }
+
+              const typedUpdatedSession = updatedSession as Session
+              const newSessions = prev.sessions.map((s: Session) =>
+                s.id === typedUpdatedSession.id ? { ...s, ...typedUpdatedSession } : s
+              )
+
+              if (
+                !newSessions.some((s: Session) => s.id === typedUpdatedSession.id) && !('isDeleted' in updatedSession)
+              ) {
+                newSessions.unshift(typedUpdatedSession)
+              }
+
+              return { ...prev, sessions: newSessions }
+            }, false)
+            return
+          }
+
+          if (data.type === 'message') {
+            setMessages((current) => applyMessageEvent(current, data))
+            return
+          }
+
+          if (data.type === 'session_info') {
+            if (data.info != null && data.info.type === 'summary') {
+              void mutate('/api/sessions')
+            } else {
+              setSessionInfo(data.info ?? null)
+              if (isInitialLoadRef.current) {
+                setTimeout(() => {
+                  if (isDisposed) return
+                  if (isInitialLoadRef.current) {
+                    setIsReady(true)
+                    isInitialLoadRef.current = false
+                  }
+                }, 100)
+              }
+            }
+            return
+          }
+
+          if (data.type === 'tool_result') {
+            setMessages((current) => applyToolResultEvent(current, data))
+            return
+          }
+
+          if (data.type === 'interaction_request') {
+            setInteractionRequest({ id: data.id, payload: data.payload })
+          }
+        },
+        onClose() {
+        }
+      }, Object.keys(connectionParams).length > 0 ? connectionParams : undefined)
+    }, modelChanged ? 200 : 100)
+
+    return () => {
+      isDisposed = true
+      clearTimeout(timer)
+      cleanup?.()
+    }
+  }, [message, modelForQuery, mutate, permissionMode, session?.id, session?.status, setInteractionRequest])
+
+  return {
+    messages,
+    setMessages,
+    sessionInfo,
+    isReady
+  }
+}

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

@@ -0,0 +1,57 @@
+import { useTranslation } from 'react-i18next'
+
+import type { Session } from '@vibe-forge/core'
+import { useChatInteraction } from './use-chat-interaction'
+import { useChatModels } from './use-chat-models'
+import { useChatPermissionMode } from './use-chat-permission-mode'
+import { useChatSessionMessages } from './use-chat-session-messages'
+import { useChatView } from './use-chat-view'
+
+export function useChatSession({
+  session
+}: {
+  session?: Session
+}) {
+  const { t } = useTranslation()
+  const {
+    selectedModel,
+    selectedModelWithService,
+    setSelectedModel,
+    modelOptions,
+    hasAvailableModels
+  } = useChatModels()
+  const { permissionMode, setPermissionMode, permissionModeOptions } = useChatPermissionMode()
+  const { activeView, setActiveView } = useChatView()
+  const { interactionRequest, setInteractionRequest, handleInteractionResponse } = useChatInteraction({
+    sessionId: session?.id
+  })
+  const { messages, setMessages, sessionInfo, isReady } = useChatSessionMessages({
+    session,
+    modelForQuery: selectedModelWithService,
+    permissionMode,
+    setInteractionRequest
+  })
+  const isThinking = session?.status === 'running'
+
+  return {
+    messages,
+    sessionInfo,
+    interactionRequest,
+    isReady,
+    isThinking,
+    activeView,
+    setActiveView,
+    handleInteractionResponse,
+    setMessages,
+    placeholder: !session?.id ? t('chat.newSessionPlaceholder') : undefined,
+    modelOptions,
+    selectedModel,
+    modelForQuery: selectedModelWithService,
+    setSelectedModel,
+    permissionMode,
+    setPermissionMode,
+    permissionModeOptions,
+    hasAvailableModels,
+    modelUnavailable: !hasAvailableModels
+  }
+}

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

@@ -0,0 +1,39 @@
+import { useCallback, useEffect } from 'react'
+
+import { useQueryParams } from '#~/hooks/useQueryParams.js'
+import type { ChatHeaderView } from '#~/components/chat/ChatHeader.js'
+
+const normalizeView = (value: string): ChatHeaderView => {
+  if (value === 'timeline' || value === 'settings' || value === 'history') {
+    return value
+  }
+  return 'history'
+}
+
+export function useChatView() {
+  const { values: queryValues, update: updateQuery } = useQueryParams<{ view: string }>({
+    keys: ['view'],
+    defaults: {
+      view: 'history'
+    },
+    omit: {
+      view: (value) => value === 'history'
+    }
+  })
+
+  const activeView = normalizeView(queryValues.view)
+  const setActiveView = useCallback((view: ChatHeaderView) => {
+    updateQuery({ view })
+  }, [updateQuery])
+
+  useEffect(() => {
+    if (activeView !== queryValues.view) {
+      updateQuery({ view: activeView })
+    }
+  }, [activeView, queryValues.view, updateQuery])
+
+  return {
+    activeView,
+    setActiveView
+  }
+}

package/src/main.tsx

@@ -1,3 +1,5 @@
+import 'devicon/devicon.min.css'
+
 import './styles/global.scss'
 import './i18n'
 
@@ -8,30 +10,25 @@ import { createRoot } from 'react-dom/client'
 import { BrowserRouter } from 'react-router-dom'
 import { SWRConfig } from 'swr'
 
+import { fetchApiJson } from '#~/api/base.js'
+import { getClientBase } from '#~/runtime-config.js'
+
 import App from './App'
 
 const root = createRoot(document.getElementById('root')!)
+
+const clientBase = getClientBase()
+
 root.render(
   <React.StrictMode>
     <ConfigProvider locale={zhCN} theme={{ token: { colorPrimary: '#000000' } }}>
       <AntdApp>
         <SWRConfig
           value={{
-            fetcher: async (path: string) => {
-              const serverHost = (import.meta.env.__VF_PROJECT_AI_SERVER_HOST__ != null &&
-                  import.meta.env.__VF_PROJECT_AI_SERVER_HOST__ !== '')
-                ? import.meta.env.__VF_PROJECT_AI_SERVER_HOST__
-                : window.location.hostname
-              const serverPort = (import.meta.env.__VF_PROJECT_AI_SERVER_PORT__ != null &&
-                  import.meta.env.__VF_PROJECT_AI_SERVER_PORT__ !== '')
-                ? import.meta.env.__VF_PROJECT_AI_SERVER_PORT__
-                : '8787'
-              const baseUrl = `http://${serverHost}:${serverPort}`
-              return fetch(`${baseUrl}${path}`).then(async (r) => r.json() as Promise<unknown>)
-            }
+            fetcher: async (path: string) => fetchApiJson<unknown>(path)
           }}
         >
-          <BrowserRouter>
+          <BrowserRouter basename={clientBase}>
             <App />
           </BrowserRouter>
         </SWRConfig>

package/src/resources/locales/en.json

@@ -13,6 +13,7 @@
     "settings": "Settings",
     "language": "Language",
     "automation": "Automation",
+    "benchmark": "Benchmark",
     "delete": "Delete",
     "deleteSession": "Delete Session",
     "deleteSessionConfirm": "Are you sure you want to delete this session? This action cannot be undone.",
@@ -175,6 +176,58 @@
     "runStarted": "Task started",
     "runFailed": "Start failed"
   },
+  "benchmark": {
+    "title": "Benchmark",
+    "sidebarHint": "Choose a category and case, inspect the task goal, and launch a run.",
+    "category": "Category",
+    "categoryCount": "{{count}} categories",
+    "caseCount": "{{count}} cases",
+    "caseTree": "Case Tree",
+    "expandAll": "Expand All",
+    "collapseAll": "Collapse All",
+    "runSelected": "Run Selected ({{count}})",
+    "runAll": "Run All",
+    "caseId": "Case:",
+    "searchPlaceholder": "Search category, title, or summary",
+    "emptyCases": "No benchmark cases",
+    "noSummary": "No summary",
+    "configTitle": "Case Config",
+    "baseCommit": "Base Commit",
+    "setupCommand": "Setup Command",
+    "testCommand": "Test Command",
+    "timeoutSec": "Timeout (sec)",
+    "runState": "Run State",
+    "noActiveRun": "No active benchmark run",
+    "runStatus": "Status",
+    "progress": "Progress",
+    "lastMessage": "Last Message",
+    "taskGoal": "Task Goal",
+    "resultTitle": "Latest Result",
+    "noResult": "No result yet",
+    "finalScore": "Final Score",
+    "lastRunAt": "Last Run",
+    "testScore": "Test Score",
+    "goalScore": "Goal Score",
+    "referenceScore": "Reference Score",
+    "changedFiles": "Changed Files",
+    "noChangedFiles": "No changed files recorded",
+    "testExitCode": "Test Exit Code",
+    "durationMs": "Duration (ms)",
+    "issues": "Issues",
+    "noIssues": "No issues",
+    "concurrency": "Concurrency",
+    "runCategory": "Run Category",
+    "runCase": "Run Case",
+    "runStarted": "Benchmark started",
+    "categoryRunStarted": "Category benchmark started",
+    "runCompleted": "Benchmark completed",
+    "runFailed": "Benchmark run failed",
+    "status": {
+      "pass": "Pass",
+      "partial": "Partial",
+      "fail": "Fail"
+    }
+  },
   "knowledge": {
     "title": "Project Knowledge Base",
     "subtitle": "Manage skills, entities, flows, and rules for this project",
@@ -253,6 +306,9 @@
     "modelSearchPlaceholder": "Search models or services",
     "modelUnavailable": "No models available",
     "modelConfigRequired": "Add a model service in config before starting a session",
+    "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",
     "toolsCount": "{{count}} tools",
@@ -351,6 +407,12 @@
       "todo": "Task Planning",
       "call": "call",
       "reading": "Reading file...",
+      "offset": "offset",
+      "limit": "limit",
+      "timeout": "timeout",
+      "runInBackground": "run in background",
+      "dangerouslyDisableSandbox": "sandbox disabled",
+      "viewCommand": "View command",
       "unknown": "Unknown tool"
     },
     "sessionSettings": "Session Settings",
@@ -402,6 +464,7 @@
       "shortcutPlaceholder": "Press shortcut",
       "clearShortcut": "Clear shortcut",
       "newModelServiceName": "New model service name",
+      "newChannelName": "New channel name",
       "newAdapterName": "New adapter name",
       "newPluginName": "New plugin name",
       "newMcpServerName": "New MCP server name",
@@ -421,6 +484,8 @@
       "defaultModelPlaceholder": "Select model",
       "titlePlaceholder": "Enter title",
       "descriptionPlaceholder": "Enter description",
+      "channelType": "Channel Type",
+      "unknownChannelType": "Unknown type",
       "complexValue": "Complex value",
       "tagsPlaceholder": "Type and press Enter",
       "types": {
@@ -754,6 +819,7 @@
       "general": "General",
       "conversation": "Conversation",
       "modelServices": "Model Services",
+      "channels": "Channels",
       "adapters": "Adapters",
       "plugins": "Plugins",
       "mcp": "MCP",