@vibe-forge/client 0.3.0 → 0.5.0

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

@@ -0,0 +1,262 @@
+import { App } from 'antd'
+import { useEffect, useRef, useState } from 'react'
+import { useSWRConfig } from 'swr'
+
+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) => {
+  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,
+  adapter,
+  setInteractionRequest
+}: {
+  session?: Session
+  modelForQuery?: string
+  permissionMode: PermissionMode
+  adapter?: string
+  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)
+  const lastConnectedAdapterRef = 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'
+    const normalizedAdapter = adapter ?? ''
+    const adapterChanged = adapter != null &&
+      lastConnectedAdapterRef.current != null &&
+      normalizedAdapter !== lastConnectedAdapterRef.current &&
+      session?.status !== 'running'
+    if (modelChanged || permissionModeChanged || adapterChanged) {
+      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 (permissionMode) {
+        connectionParams.permissionMode = permissionMode
+      }
+      if (adapter) {
+        connectionParams.adapter = adapter
+      }
+
+      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?.()
+    }
+  }, [adapter, 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,63 @@
+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'
+import { useChatSessionMessages } from './use-chat-session-messages'
+import { useChatView } from './use-chat-view'
+
+export function useChatSession({
+  session
+}: {
+  session?: Session
+}) {
+  const { t } = useTranslation()
+  const { selectedAdapter, setSelectedAdapter, adapterOptions } = useChatAdapter()
+  const {
+    selectedModel,
+    selectedModelWithService,
+    setSelectedModel,
+    modelOptions,
+    hasAvailableModels
+  } = 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({
+    session,
+    modelForQuery: selectedModelWithService,
+    permissionMode,
+    adapter: selectedAdapter,
+    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,
+    selectedAdapter,
+    setSelectedAdapter,
+    adapterOptions,
+    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/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

@@ -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",

package/src/resources/locales/zh.json

@@ -13,6 +13,7 @@
     "settings": "设置",
     "language": "语言",
     "automation": "自动化任务",
+    "benchmark": "评测",
     "delete": "删除",
     "deleteSession": "删除会话",
     "deleteSessionConfirm": "确定要删除这个会话吗？此操作不可撤销。",
@@ -176,6 +177,58 @@
     "runStarted": "已启动任务",
     "runFailed": "启动失败"
   },
+  "benchmark": {
+    "title": "评测",
+    "sidebarHint": "选择 category 和 case，查看任务目标并触发跑分。",
+    "category": "分类",
+    "categoryCount": "{{count}} 个分类",
+    "caseCount": "{{count}} 个用例",
+    "caseTree": "用例树",
+    "expandAll": "展开全部",
+    "collapseAll": "折叠全部",
+    "runSelected": "运行已选 ({{count}})",
+    "runAll": "运行全部",
+    "caseId": "用例：",
+    "searchPlaceholder": "搜索分类、标题或摘要",
+    "emptyCases": "暂无 benchmark 用例",
+    "noSummary": "暂无摘要",
+    "configTitle": "用例配置",
+    "baseCommit": "基线 Commit",
+    "setupCommand": "初始化命令",
+    "testCommand": "测试命令",
+    "timeoutSec": "超时（秒）",
+    "runState": "运行状态",
+    "noActiveRun": "当前没有运行中的 benchmark 任务",
+    "runStatus": "运行状态",
+    "progress": "进度",
+    "lastMessage": "最新消息",
+    "taskGoal": "任务目标",
+    "resultTitle": "最近结果",
+    "noResult": "暂无结果",
+    "finalScore": "总分",
+    "lastRunAt": "最近运行",
+    "testScore": "测试分",
+    "goalScore": "目标分",
+    "referenceScore": "参考分",
+    "changedFiles": "改动文件数",
+    "noChangedFiles": "暂无改动文件记录",
+    "testExitCode": "测试退出码",
+    "durationMs": "耗时（毫秒）",
+    "issues": "问题",
+    "noIssues": "暂无问题",
+    "concurrency": "并发",
+    "runCategory": "运行当前分类",
+    "runCase": "运行当前用例",
+    "runStarted": "Benchmark 已启动",
+    "categoryRunStarted": "分类跑分已启动",
+    "runCompleted": "Benchmark 已完成",
+    "runFailed": "Benchmark 运行失败",
+    "status": {
+      "pass": "通过",
+      "partial": "部分完成",
+      "fail": "失败"
+    }
+  },
   "knowledge": {
     "title": "项目知识库",
     "subtitle": "管理当前项目的技能、实体、流程与规则",
@@ -254,6 +307,9 @@
     "modelSearchPlaceholder": "搜索模型或服务",
     "modelUnavailable": "暂无可用模型",
     "modelConfigRequired": "请先在配置中添加模型服务后再开始会话",
+    "imageTooLarge": "图片大小不能超过 5MB",
+    "imageReadFailed": "图片读取失败",
+    "imageNotSupportedInInteraction": "当前交互不支持图片",
     "modelGroupRecommended": "推荐模型",
     "availableTools": "可用工具",
     "toolsCount": "{{count}} 个工具",
@@ -352,6 +408,12 @@
       "todo": "任务规划",
       "call": "调用",
       "reading": "正在读取文件...",
+      "offset": "offset",
+      "limit": "limit",
+      "timeout": "timeout",
+      "runInBackground": "后台执行",
+      "dangerouslyDisableSandbox": "禁用沙箱",
+      "viewCommand": "查看指令",
       "unknown": "未知工具"
     },
     "sessionSettings": "会话设置",
@@ -403,6 +465,7 @@
       "shortcutPlaceholder": "按下快捷键",
       "clearShortcut": "清除快捷键",
       "newModelServiceName": "新增模型服务名称",
+      "newChannelName": "新增频道名称",
       "newAdapterName": "新增适配器名称",
       "newPluginName": "新增插件名称",
       "newMcpServerName": "新增 MCP 服务名称",
@@ -422,6 +485,8 @@
       "defaultModelPlaceholder": "请选择模型",
       "titlePlaceholder": "请输入标题",
       "descriptionPlaceholder": "请输入描述",
+      "channelType": "频道类型",
+      "unknownChannelType": "未知类型",
       "complexValue": "复杂结构",
       "tagsPlaceholder": "输入后回车",
       "types": {
@@ -755,6 +820,7 @@
       "general": "通用",
       "conversation": "会话",
       "modelServices": "模型服务",
+      "channels": "频道",
       "adapters": "适配器",
       "plugins": "插件",
       "mcp": "MCP",