@vibe-forge/client 0.10.0 → 0.11.0

package/src/components/chat/tools/task/GetTaskInfoTool.tsx

@@ -5,6 +5,8 @@ import React, { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { ToolCallBox } from '../core/ToolCallBox'
+import { ToolSummaryHeader } from '../core/ToolSummaryHeader'
+import { getToolTargetPresentation } from '../core/tool-display'
 import { defineToolRender } from '../defineToolRender'
 import { TaskRow } from './components/TaskRow'
 
@@ -53,18 +55,33 @@ export const GetTaskInfoTool = defineToolRender(({ item, resultItem }) => {
     })()
     : []
   const titleFallback = t('chat.tools.task')
+  const taskIdPresentation = getToolTargetPresentation(taskResult?.taskId ?? inputTaskId)
+  const errorMeta = resultItem?.is_error === true
+    ? (
+      <span className='tool-status tool-status--error'>
+        <span className='material-symbols-rounded'>error</span>
+      </span>
+    )
+    : undefined
 
   return (
-    <div className='tool-group get-task-info-tool'>
+    <div className='tool-group tool-group--compact get-task-info-tool'>
       <ToolCallBox
-        defaultExpanded={true}
-        header={
-          <div className='tool-header-content'>
-            <span className='material-symbols-rounded tool-header-icon'>info</span>
-            <span className='tool-header-title'>{t('chat.tools.getTaskInfo')}</span>
-            <span className='tool-header-chip'>{taskResult ? 1 : 0}</span>
-          </div>
-        }
+        variant='inline'
+        defaultExpanded={false}
+        header={({ isExpanded, isCollapsible }) => (
+          <ToolSummaryHeader
+            icon={<span className='material-symbols-rounded'>info</span>}
+            title={t('chat.tools.getTaskInfo')}
+            target={taskIdPresentation.text}
+            targetTitle={taskIdPresentation.title}
+            targetMonospace={taskIdPresentation.monospace}
+            expanded={isExpanded}
+            collapsible={isCollapsible}
+            meta={errorMeta}
+            metaTitle={errorMeta == null ? undefined : t('chat.result')}
+          />
+        )}
         content={
           <div className='tool-content'>
             {taskResult

package/src/components/chat/tools/task/ListTasksTool.tsx

@@ -4,6 +4,7 @@ import React, { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { ToolCallBox } from '../core/ToolCallBox'
+import { ToolSummaryHeader } from '../core/ToolSummaryHeader'
 import { defineToolRender } from '../defineToolRender'
 import { TaskRow } from './components/TaskRow'
 
@@ -29,18 +30,30 @@ export const ListTasksTool = defineToolRender(({ resultItem }) => {
     const text = resultItem.content[0].text.trim()
     return JSON.parse(text) as TaskResult[]
   }, [resultItem?.content])
+  const errorMeta = resultItem?.is_error === true
+    ? (
+      <span className='tool-status tool-status--error'>
+        <span className='material-symbols-rounded'>error</span>
+      </span>
+    )
+    : undefined
 
   return (
-    <div className='tool-group list-tasks-tool'>
+    <div className='tool-group tool-group--compact list-tasks-tool'>
       <ToolCallBox
-        defaultExpanded={true}
-        header={
-          <div className='tool-header-content'>
-            <span className='material-symbols-rounded tool-header-icon'>list_alt</span>
-            <span className='tool-header-title'>{t('chat.tools.listTasks')}</span>
-            <span className='tool-header-chip'>{taskResults.length}</span>
-          </div>
-        }
+        variant='inline'
+        defaultExpanded={false}
+        header={({ isExpanded, isCollapsible }) => (
+          <ToolSummaryHeader
+            icon={<span className='material-symbols-rounded'>list_alt</span>}
+            title={t('chat.tools.listTasks')}
+            target={t('chat.tools.taskCount', { count: taskResults.length })}
+            expanded={isExpanded}
+            collapsible={isCollapsible}
+            meta={errorMeta}
+            metaTitle={errorMeta == null ? undefined : t('chat.result')}
+          />
+        )}
         content={
           <div className='tool-content'>
             <div className='list-tasks-tool__list'>

package/src/components/chat/tools/task/StartTasksTool.tsx

@@ -5,6 +5,7 @@ import React, { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { ToolCallBox } from '../core/ToolCallBox'
+import { ToolSummaryHeader } from '../core/ToolSummaryHeader'
 import { defineToolRender } from '../defineToolRender'
 import { TaskRow } from './components/TaskRow'
 
@@ -39,18 +40,30 @@ export const StartTasksTool = defineToolRender(({ item, resultItem }) => {
   }, [resultItem?.content])
 
   const { taskResults } = parsedResult
+  const errorMeta = resultItem?.is_error === true
+    ? (
+      <span className='tool-status tool-status--error'>
+        <span className='material-symbols-rounded'>error</span>
+      </span>
+    )
+    : undefined
 
   return (
-    <div className='tool-group start-tasks-tool'>
+    <div className='tool-group tool-group--compact start-tasks-tool'>
       <ToolCallBox
-        defaultExpanded={true}
-        header={
-          <div className='tool-header-content'>
-            <span className='material-symbols-rounded tool-header-icon'>playlist_add</span>
-            <span className='tool-header-title'>{t('chat.tools.startTasks')}</span>
-            <span className='tool-header-chip'>{tasks.length}</span>
-          </div>
-        }
+        variant='inline'
+        defaultExpanded={false}
+        header={({ isExpanded, isCollapsible }) => (
+          <ToolSummaryHeader
+            icon={<span className='material-symbols-rounded'>playlist_add</span>}
+            title={t('chat.tools.startTasks')}
+            target={t('chat.tools.taskCount', { count: tasks.length })}
+            expanded={isExpanded}
+            collapsible={isCollapsible}
+            meta={errorMeta}
+            metaTitle={errorMeta == null ? undefined : t('chat.result')}
+          />
+        )}
         content={
           <div className='tool-content'>
             <div className='start-tasks-tool__list'>

package/src/hooks/chat/interaction-state.ts

@@ -1,13 +1,17 @@
 import type { AskUserQuestionParams, Session, WSEvent } from '@vibe-forge/core'
 
+import { stripAnsi } from '#~/utils/strip-ansi'
+
 export interface InteractionRequestState {
   id: string
   payload: AskUserQuestionParams
 }
 
-export interface ChatErrorBannerState {
+export interface ChatErrorState {
   kind: 'connection' | 'session'
   message: string
+  code?: string
+  reason?: 'error' | 'closed'
 }
 
 export interface FatalSessionErrorState {
@@ -15,6 +19,8 @@ export interface FatalSessionErrorState {
   code?: string
 }
 
+const normalizeErrorMessage = (value: string) => stripAnsi(value).trim()
+
 export const getFatalSessionError = (event: WSEvent): FatalSessionErrorState | null => {
   if (event?.type !== 'error') {
     return null
@@ -24,20 +30,34 @@ export const getFatalSessionError = (event: WSEvent): FatalSessionErrorState | n
     return null
   }
 
+  const code = event.data != null && typeof event.data === 'object' &&
+      'code' in event.data &&
+      typeof event.data.code === 'string' &&
+      event.data.code.trim() !== ''
+    ? event.data.code
+    : undefined
+
   if (event.data != null && typeof event.data === 'object' && 'message' in event.data) {
     const message = event.data.message
-    if (typeof message === 'string' && message.trim() !== '') {
-      return {
-        message,
-        code: typeof event.data.code === 'string' && event.data.code.trim() !== ''
-          ? event.data.code
-          : undefined
+    if (typeof message === 'string') {
+      const normalizedMessage = normalizeErrorMessage(message)
+      if (normalizedMessage !== '') {
+        return {
+          message: normalizedMessage,
+          code
+        }
       }
     }
   }
 
-  if (typeof event.message === 'string' && event.message.trim() !== '') {
-    return { message: event.message }
+  if (typeof event.message === 'string') {
+    const normalizedMessage = normalizeErrorMessage(event.message)
+    if (normalizedMessage !== '') {
+      return {
+        message: normalizedMessage,
+        code
+      }
+    }
   }
 
   return null

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

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useRef, useState } from 'react'
 
 const SCROLL_THRESHOLD = 80
 
-export function useChatScroll({ messagesLength }: { messagesLength: number }) {
+export function useChatScroll({ contentVersion }: { contentVersion: number }) {
   const messagesEndRef = useRef<HTMLDivElement>(null)
   const messagesContainerRef = useRef<HTMLDivElement>(null)
   const messagesContentRef = useRef<HTMLDivElement>(null)
@@ -39,7 +39,7 @@ export function useChatScroll({ messagesLength }: { messagesLength: number }) {
 
   useEffect(() => {
     updateScrollState()
-  }, [updateScrollState, messagesLength])
+  }, [contentVersion, updateScrollState])
 
   return {
     messagesEndRef,

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

@@ -2,11 +2,13 @@ import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSWRConfig } from 'swr'
 
-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 { getSessionMessages } from '#~/api.js'
+import { connectionManager } from '#~/connectionManager.js'
+
+import type { ChatErrorState } from './interaction-state'
 import {
   applyInteractionStateEvent,
   findLatestFatalError,
@@ -63,7 +65,7 @@ export function useChatSessionMessages({
   const [messages, setMessages] = useState<ChatMessage[]>([])
   const [sessionInfo, setSessionInfo] = useState<SessionInfo | null>(null)
   const [isReady, setIsReady] = useState(false)
-  const [errorBanner, setErrorBanner] = useState<ChatErrorBannerState | null>(null)
+  const [errorState, setErrorState] = useState<ChatErrorState | null>(null)
   const [retryCount, setRetryCount] = useState(0)
   const isInitialLoadRef = useRef<boolean>(true)
   const lastConnectedModelRef = useRef<string | undefined>(undefined)
@@ -124,11 +126,12 @@ export function useChatSessionMessages({
 
       interactionRequestRef.current = restoredInteraction
       setInteractionRequest(restoredInteraction)
-      setErrorBanner(
+      setErrorState(
         restoredInteraction == null && res.session?.status === 'failed' && latestFatalError != null
           ? {
             kind: 'session',
-            message: latestFatalError.message
+            message: latestFatalError.message,
+            code: latestFatalError.code
           }
           : null
       )
@@ -174,7 +177,7 @@ export function useChatSessionMessages({
   const retryConnection = useCallback(() => {
     if (session?.id == null || session.id === '') return
     expectedCloseRef.current = true
-    setErrorBanner(null)
+    setErrorState(null)
     connectionManager.close(session.id)
     setRetryCount((count) => count + 1)
   }, [session?.id])
@@ -183,7 +186,7 @@ export function useChatSessionMessages({
     setMessages([])
     setSessionInfo(null)
     setIsReady(false)
-    setErrorBanner(null)
+    setErrorState(null)
     setInteractionRequest(null)
     interactionRequestRef.current = null
     isInitialLoadRef.current = true
@@ -249,7 +252,7 @@ export function useChatSessionMessages({
       session?.status !== 'running'
     if (modelChanged || effortChanged || permissionModeChanged || adapterChanged) {
       expectedCloseRef.current = true
-      setErrorBanner(null)
+      setErrorState(null)
       connectionManager.send(session.id, { type: 'terminate_session' })
       connectionManager.close(session.id)
     }
@@ -278,7 +281,7 @@ export function useChatSessionMessages({
       cleanup = connectionManager.connect(session.id, {
         onOpen() {
           expectedCloseRef.current = false
-          setErrorBanner((current) => current?.kind === 'session' ? current : null)
+          setErrorState((current) => current?.kind === 'session' ? current : null)
         },
         onMessage(data: WSEvent) {
           if (isDisposed) return
@@ -287,7 +290,7 @@ export function useChatSessionMessages({
             interactionRequestRef.current = nextInteraction
             setInteractionRequest(nextInteraction)
             if (nextInteraction != null) {
-              setErrorBanner(null)
+              setErrorState(null)
             }
           }
           if (data.type === 'interaction_response') {
@@ -297,9 +300,10 @@ export function useChatSessionMessages({
           if (data.type === 'error') {
             const fatalError = getFatalSessionError(data)
             if (fatalError != null) {
-              setErrorBanner({
+              setErrorState({
                 kind: 'session',
-                message: fatalError.message
+                message: fatalError.message,
+                code: fatalError.code
               })
             }
             return
@@ -367,9 +371,10 @@ export function useChatSessionMessages({
         },
         onError() {
           if (isDisposed) return
-          setErrorBanner({
+          setErrorState({
             kind: 'connection',
-            message: t('chat.connectionError')
+            message: t('chat.connectionError'),
+            reason: 'error'
           })
         },
         onClose() {
@@ -378,10 +383,11 @@ export function useChatSessionMessages({
             expectedCloseRef.current = false
             return
           }
-          setErrorBanner((current) =>
+          setErrorState((current) =>
             current ?? {
               kind: 'connection',
-              message: t('chat.connectionClosed')
+              message: t('chat.connectionClosed'),
+              reason: 'closed'
             }
           )
         }
@@ -414,7 +420,7 @@ export function useChatSessionMessages({
     setMessages,
     sessionInfo,
     isReady,
-    errorBanner,
+    errorState,
     retryConnection,
     reconcileAfterInteraction
   }

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

@@ -45,7 +45,7 @@ export function useChatSession({
     setMessages,
     sessionInfo,
     isReady,
-    errorBanner,
+    errorState,
     retryConnection,
     reconcileAfterInteraction
   } = useChatSessionMessages({
@@ -112,7 +112,7 @@ export function useChatSession({
     sessionInfo,
     interactionRequest,
     isReady,
-    errorBanner,
+    errorState,
     retryConnection,
     isThinking,
     activeView,

package/src/resources/locales/en.json

@@ -324,11 +324,22 @@
     "modelSearchPlaceholder": "Search models or services",
     "modelUnavailable": "No models available",
     "modelConfigRequired": "Add a model service in config before starting a session",
+    "modelConfigRequiredTitle": "Model setup required",
+    "modelConfigRequiredHelp": "Add at least one model service, then retry sending from the composer.",
     "connectionErrorTitle": "Connection error",
+    "connectionClosedTitle": "Connection closed",
     "sessionErrorTitle": "Task failed",
     "connectionError": "WebSocket connection failed. Check the server and try again.",
     "connectionClosed": "WebSocket connection closed. Try reconnecting.",
+    "connectionErrorHelp": "Streaming updates stopped before the session could recover. Retry to resubscribe to the running session.",
+    "connectionClosedHelp": "The current stream has ended unexpectedly. Retry to reconnect and continue receiving new messages.",
+    "sessionErrorHelp": "Check the latest tool output or terminal logs, then continue from the most recent user message if needed.",
+    "sessionErrorCode": "Error code: {{code}}",
     "retryConnection": "Retry",
+    "debugMockLabel": "Debug Preview",
+    "debugMockConnectionErrorMessage": "Unable to reach the session stream. The websocket handshake timed out before any updates arrived.",
+    "debugMockConnectionClosedMessage": "The connection dropped after the assistant started responding. No further tokens will arrive until you reconnect.",
+    "debugMockSessionErrorMessage": "The runtime hit its session timeout while waiting for a downstream tool result and stopped this turn.",
     "permissionRequestBadge": "Permission request",
     "permissionRequestTitleWithTool": "Requesting permission to use 【{{tool}}】. Choose how to proceed.",
     "permissionSubject": "Scope",
@@ -547,9 +558,30 @@
       "startTasksFailed": "Failed",
       "startTasksLogs": "Task Logs",
       "task": "Task",
+      "taskCount": "{{count}} tasks",
       "taskExitCode": "Exit: {{code}}",
       "writeSuccess": "Write Success",
       "writeFailed": "Write Failed",
+      "askUserQuestion": "Ask User Question",
+      "globTool": "Glob",
+      "grepTool": "Grep",
+      "editTool": "Edit File",
+      "lsTool": "List Directory",
+      "notebookEdit": "Notebook Edit",
+      "webFetch": "Web Fetch",
+      "webSearch": "Web Search",
+      "booleanOn": "On",
+      "booleanOff": "Off",
+      "diffSplit": "Split",
+      "diffInline": "Inline",
+      "skill": "Skill",
+      "enterPlanMode": "Enter Plan Mode",
+      "exitPlanMode": "Exit Plan Mode",
+      "taskCreate": "Create Task",
+      "taskGet": "Get Task",
+      "taskUpdate": "Update Task",
+      "taskList": "List Tasks",
+      "claudeTask": "Claude Task",
       "todo": "Task Planning",
       "call": "call",
       "reading": "Reading file...",
@@ -559,6 +591,55 @@
       "runInBackground": "run in background",
       "dangerouslyDisableSandbox": "sandbox disabled",
       "viewCommand": "View command",
+      "noParameters": "No parameters",
+      "groupSummaryCount": "{{name}} {{count}}x",
+      "groupSummaryMoreCount": "+{{count}}x",
+      "singleSelect": "single",
+      "multiSelect": "multi",
+      "fields": {
+        "activeForm": "Active Form",
+        "addBlockedBy": "Add Blocked By",
+        "addBlocks": "Add Blocks",
+        "allowedDomains": "Allowed Domains",
+        "allowedPrompts": "Allowed Prompts",
+        "answers": "Answers",
+        "args": "Args",
+        "blockedDomains": "Blocked Domains",
+        "cellId": "Cell ID",
+        "cellType": "Cell Type",
+        "command": "Command",
+        "content": "Content",
+        "description": "Description",
+        "disableSandbox": "Disable Sandbox",
+        "details": "Details",
+        "editMode": "Edit Mode",
+        "glob": "Glob",
+        "ignore": "Ignore",
+        "limit": "Limit",
+        "maxTurns": "Max Turns",
+        "metadata": "Metadata",
+        "model": "Model",
+        "mode": "Mode",
+        "newSource": "New Source",
+        "newString": "New String",
+        "oldString": "Old String",
+        "owner": "Owner",
+        "offset": "Offset",
+        "path": "Path",
+        "prompt": "Prompt",
+        "pushToRemote": "Push To Remote",
+        "questions": "Questions",
+        "remoteSession": "Remote Session",
+        "remoteSessionUrl": "Remote Session URL",
+        "replaceAll": "Replace All",
+        "resume": "Resume",
+        "runInBackground": "Run In Background",
+        "status": "Status",
+        "subagentType": "Subagent Type",
+        "subject": "Subject",
+        "timeout": "Timeout",
+        "todos": "Todos"
+      },
       "unknown": "Unknown tool"
     },
     "terminal": {

package/src/resources/locales/zh.json

@@ -325,11 +325,22 @@
     "modelSearchPlaceholder": "搜索模型或服务",
     "modelUnavailable": "暂无可用模型",
     "modelConfigRequired": "请先在配置中添加模型服务后再开始会话",
+    "modelConfigRequiredTitle": "需要先配置模型服务",
+    "modelConfigRequiredHelp": "至少添加一个模型服务后，再回到输入框重新发送消息。",
     "connectionErrorTitle": "连接异常",
+    "connectionClosedTitle": "连接已断开",
     "sessionErrorTitle": "任务失败",
     "connectionError": "WebSocket 连接失败，请检查服务状态后重试",
     "connectionClosed": "WebSocket 连接已关闭，请重试",
+    "connectionErrorHelp": "当前流式更新还没恢复就中断了。重试连接后可以重新订阅这个会话的实时输出。",
+    "connectionClosedHelp": "当前消息流意外结束了。重试连接后，可以继续接收这个会话后续的新消息。",
+    "sessionErrorHelp": "可以先检查最近一次工具输出或终端日志，再决定是否从最近一条用户消息继续。",
+    "sessionErrorCode": "错误码：{{code}}",
     "retryConnection": "重试连接",
+    "debugMockLabel": "调试预览",
+    "debugMockConnectionErrorMessage": "无法连上当前会话的消息流，WebSocket 握手在收到任何更新前就超时了。",
+    "debugMockConnectionClosedMessage": "assistant 已经开始回复，但连接中途断开；在重新连接前，不会再收到新的 token。",
+    "debugMockSessionErrorMessage": "runtime 在等待下游工具结果时触发了会话超时，这一轮任务已经停止。",
     "permissionRequestBadge": "权限请求",
     "permissionRequestTitleWithTool": "正在请求使用【{{tool}}】的调用权限，请选择通过",
     "permissionSubject": "审批范围",
@@ -548,9 +559,30 @@
       "startTasksFailed": "失败",
       "startTasksLogs": "任务日志",
       "task": "任务",
+      "taskCount": "{{count}} 个任务",
       "taskExitCode": "退出码: {{code}}",
       "writeSuccess": "写入成功",
       "writeFailed": "写入失败",
+      "askUserQuestion": "询问问题",
+      "globTool": "Glob",
+      "grepTool": "Grep",
+      "editTool": "编辑文件",
+      "lsTool": "浏览目录",
+      "notebookEdit": "编辑 Notebook",
+      "webFetch": "抓取网页",
+      "webSearch": "网页搜索",
+      "booleanOn": "开启",
+      "booleanOff": "关闭",
+      "diffSplit": "双栏",
+      "diffInline": "单栏",
+      "skill": "技能",
+      "enterPlanMode": "进入计划模式",
+      "exitPlanMode": "退出计划模式",
+      "taskCreate": "创建任务",
+      "taskGet": "获取任务",
+      "taskUpdate": "更新任务",
+      "taskList": "列出任务",
+      "claudeTask": "Claude 任务",
       "todo": "任务规划",
       "call": "调用",
       "reading": "正在读取文件...",
@@ -560,6 +592,55 @@
       "runInBackground": "后台执行",
       "dangerouslyDisableSandbox": "禁用沙箱",
       "viewCommand": "查看指令",
+      "noParameters": "无参数",
+      "groupSummaryCount": "{{name}} {{count}} 次",
+      "groupSummaryMoreCount": "+{{count}} 次",
+      "singleSelect": "单选",
+      "multiSelect": "多选",
+      "fields": {
+        "activeForm": "当前表述",
+        "addBlockedBy": "新增阻塞源",
+        "addBlocks": "新增阻塞项",
+        "allowedDomains": "允许域名",
+        "allowedPrompts": "允许的提示",
+        "answers": "回答",
+        "args": "参数",
+        "blockedDomains": "屏蔽域名",
+        "cellId": "单元 ID",
+        "cellType": "单元类型",
+        "command": "命令",
+        "content": "内容",
+        "description": "说明",
+        "disableSandbox": "禁用沙箱",
+        "details": "详情",
+        "editMode": "编辑模式",
+        "glob": "Glob",
+        "ignore": "忽略项",
+        "limit": "Limit",
+        "maxTurns": "最大轮次",
+        "metadata": "元数据",
+        "model": "模型",
+        "mode": "模式",
+        "newSource": "新内容",
+        "newString": "新字符串",
+        "oldString": "旧字符串",
+        "owner": "负责人",
+        "offset": "Offset",
+        "path": "路径",
+        "prompt": "提示词",
+        "pushToRemote": "推送到远端",
+        "questions": "问题",
+        "remoteSession": "远端会话",
+        "remoteSessionUrl": "远端会话地址",
+        "replaceAll": "全量替换",
+        "resume": "恢复",
+        "runInBackground": "后台执行",
+        "status": "状态",
+        "subagentType": "子代理类型",
+        "subject": "主题",
+        "timeout": "超时",
+        "todos": "待办事项"
+      },
       "unknown": "未知工具"
     },
     "terminal": {