@vibe-forge/client 0.10.1 → 0.11.1

package/src/components/chat/tools/core/tool-summary.ts

@@ -0,0 +1,206 @@
+/* eslint-disable max-lines */
+
+import type { ChatMessageContent } from '@vibe-forge/core'
+
+import {
+  buildClaudeToolPresentation,
+  getClaudeToolBaseName,
+  isClaudeToolName
+} from '../adapter-claude/claude-tool-presentation'
+import { getClaudeToolSummaryText } from '../adapter-claude/claude-tool-summary'
+import { buildGenericToolPresentation } from './generic-tool-presentation'
+
+export type ToolUseItem = Extract<ChatMessageContent, { type: 'tool_use' }>
+type Translate = (key: string, options?: Record<string, unknown>) => string
+
+const HUMANIZED_SEGMENT_SEPARATOR = /[_:-]+/g
+const GENERIC_TOOL_NAMESPACE_PREFIXES = new Set(['adapter', 'agent', 'mcp', 'plugin', 'tool'])
+
+const humanizeToolSegment = (value: string) =>
+  value
+    .replace(HUMANIZED_SEGMENT_SEPARATOR, ' ')
+    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+    .trim()
+
+const getToolNameSegments = (name: string) => (
+  name.includes('__') ? name.split('__').filter(Boolean) : name.split(':').filter(Boolean)
+)
+
+export const formatToolName = (name: string) => {
+  if (name.startsWith('mcp__ChromeDevtools__')) {
+    return name.replace('mcp__ChromeDevtools__', '')
+  }
+
+  const namespaceSegments = name.includes('__') ? name.split('__').filter(Boolean) : []
+  const lastSegment = namespaceSegments.length > 0
+    ? namespaceSegments[namespaceSegments.length - 1]
+    : name.split(':').pop() ?? name
+  return humanizeToolSegment(lastSegment)
+}
+
+export const getToolInputPreview = (input: unknown) => {
+  if (input == null || typeof input !== 'object' || Array.isArray(input)) {
+    return undefined
+  }
+
+  const record = input as Record<string, unknown>
+  const preferredKeys = [
+    'file_path',
+    'path',
+    'url',
+    'query',
+    'pattern',
+    'command',
+    'selector',
+    'taskId',
+    'subject',
+    'skill',
+    'title'
+  ]
+
+  for (const key of preferredKeys) {
+    const value = record[key]
+    if (typeof value === 'string' && value.trim() !== '') {
+      return value.trim().split('\n')[0]
+    }
+  }
+
+  for (const value of Object.values(record)) {
+    if (typeof value === 'string' && value.trim() !== '') {
+      return value.trim().split('\n')[0]
+    }
+  }
+
+  return undefined
+}
+
+export function getToolSummaryText(item: ToolUseItem, t: Translate) {
+  if (isClaudeToolName(item.name)) {
+    return getClaudeToolSummaryText(item.name, item.input, t)
+  }
+
+  const presentation = buildGenericToolPresentation(item.name, item.input)
+  const displayName = presentation.titleKey != null
+    ? t(presentation.titleKey, { defaultValue: presentation.fallbackTitle })
+    : presentation.fallbackTitle
+  const preview = presentation.primary ?? getToolInputPreview(item.input)
+  return preview != null && preview !== '' ? `${displayName} ${preview}` : displayName
+}
+
+export function getToolTitleText(item: ToolUseItem, t: Translate) {
+  if (isClaudeToolName(item.name)) {
+    const presentation = buildClaudeToolPresentation(item.name, item.input)
+    return t(presentation.titleKey, { defaultValue: presentation.fallbackTitle })
+  }
+
+  const presentation = buildGenericToolPresentation(item.name, item.input)
+  return presentation.titleKey != null
+    ? t(presentation.titleKey, { defaultValue: presentation.fallbackTitle })
+    : presentation.fallbackTitle
+}
+
+export function getToolPrimaryText(item: ToolUseItem) {
+  if (isClaudeToolName(item.name)) {
+    return buildClaudeToolPresentation(item.name, item.input).primary
+  }
+
+  return buildGenericToolPresentation(item.name, item.input).primary ?? getToolInputPreview(item.input)
+}
+
+const getToolNamespaceLabel = (name: string) => {
+  const namespaceSegments = getToolNameSegments(name)
+    .slice(0, -1)
+    .filter((segment, index) => !(index === 0 && GENERIC_TOOL_NAMESPACE_PREFIXES.has(segment.toLowerCase())))
+    .map(humanizeToolSegment)
+    .filter(Boolean)
+
+  return namespaceSegments.length > 0 ? namespaceSegments.join(' ') : undefined
+}
+
+const getToolQualifiedLabel = (name: string, fallbackLabel: string) => {
+  const namespaceLabel = getToolNamespaceLabel(name)
+  return namespaceLabel != null && namespaceLabel !== ''
+    ? `${namespaceLabel} ${fallbackLabel}`
+    : fallbackLabel
+}
+
+interface ToolGroupDescriptor {
+  key: string
+  label: string
+  qualifiedLabel: string
+}
+
+function getToolGroupDescriptor(item: ToolUseItem, t: Translate): ToolGroupDescriptor {
+  if (isClaudeToolName(item.name)) {
+    const baseName = getClaudeToolBaseName(item.name)
+    const presentation = buildClaudeToolPresentation(item.name, item.input)
+    const label = t(presentation.titleKey, { defaultValue: presentation.fallbackTitle })
+    return {
+      key: `claude:${baseName}`,
+      label,
+      qualifiedLabel: label
+    }
+  }
+
+  const presentation = buildGenericToolPresentation(item.name, item.input)
+  const label = presentation.titleKey != null
+    ? t(presentation.titleKey, { defaultValue: presentation.fallbackTitle })
+    : presentation.fallbackTitle
+  return {
+    key: item.name,
+    label,
+    qualifiedLabel: getToolQualifiedLabel(item.name, label)
+  }
+}
+
+export function getToolGroupSummaryText(
+  items: Array<{
+    item: ToolUseItem
+  }>,
+  t: Translate
+) {
+  const groupedTools = new Map<string, { label: string; qualifiedLabel: string; count: number }>()
+
+  for (const { item } of items) {
+    const descriptor = getToolGroupDescriptor(item, t)
+    const label = descriptor.label
+    if (label === '') continue
+
+    const current = groupedTools.get(descriptor.key)
+    if (current != null) {
+      current.count += 1
+      continue
+    }
+
+    groupedTools.set(descriptor.key, {
+      label,
+      qualifiedLabel: descriptor.qualifiedLabel,
+      count: 1
+    })
+  }
+
+  const groups = Array.from(groupedTools.values())
+  const labelCounts = groups.reduce((map, group) => {
+    map.set(group.label, (map.get(group.label) ?? 0) + 1)
+    return map
+  }, new Map<string, number>())
+
+  if (groups.length === 0) {
+    return t('chat.usedTools', { count: items.length })
+  }
+
+  const summaries = groups.map((group) => {
+    const name = (labelCounts.get(group.label) ?? 0) > 1 ? group.qualifiedLabel : group.label
+    return {
+      count: group.count,
+      text: t('chat.tools.groupSummaryCount', { name, count: group.count })
+    }
+  })
+
+  const visible = summaries.slice(0, 2).map(summary => summary.text)
+  const hiddenCallCount = summaries.slice(2).reduce((count, summary) => count + summary.count, 0)
+
+  return hiddenCallCount > 0
+    ? [...visible, t('chat.tools.groupSummaryMoreCount', { count: hiddenCallCount })].join(' · ')
+    : visible.join(' · ')
+}

package/src/components/chat/tools/plugin-chrome-devtools/ChromeDevtoolsTool.tsx

@@ -1,75 +1,81 @@
 import './ChromeDevtoolsTool.scss'
+import { Tooltip } from 'antd'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { CodeBlock } from '#~/components/CodeBlock'
 import { safeJsonStringify } from '#~/utils/safe-serialize'
 import { ToolCallBox } from '../core/ToolCallBox'
+import { ToolResultContent } from '../core/ToolResultContent'
+import { ToolSummaryHeader } from '../core/ToolSummaryHeader'
+import { hasMeaningfulToolValue } from '../core/tool-content-presence'
+import { TOOL_TOOLTIP_PROPS, getToolSectionIcon, getToolTargetPresentation } from '../core/tool-display'
+import { getToolPrimaryText, getToolTitleText } from '../core/tool-summary'
 import { defineToolRender } from '../defineToolRender'
 
-const formatToolName = (name: string) => {
-  if (name.startsWith('mcp__ChromeDevtools__')) {
-    return name.replace('mcp__ChromeDevtools__', '')
-  }
-  return name
-}
-
 export const ChromeDevtoolsTool = defineToolRender(({ item, resultItem }) => {
   const { t } = useTranslation()
-  const displayName = formatToolName(item.name)
   const input = item.input != null ? item.input : {}
+  const hasCallDetails = hasMeaningfulToolValue(input)
+  const hasResultDetails = resultItem != null && hasMeaningfulToolValue(resultItem.content)
+  const hasDetails = hasCallDetails || hasResultDetails
+  const titleText = getToolTitleText(item, t)
+  const targetPresentation = getToolTargetPresentation(getToolPrimaryText(item))
+  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 chrome-devtools-tool'>
+    <div className='tool-group tool-group--compact chrome-devtools-tool'>
       <ToolCallBox
-        defaultExpanded={true}
-        header={
-          <div className='tool-header-content'>
-            <i className='tool-header-icon chrome-devtools-tool__icon devicon-chrome-plain colored' />
-            <span className='tool-header-title'>{displayName}</span>
-            <span className='tool-header-hint'>{t('chat.tools.call')}</span>
-          </div>
-        }
-        content={
-          <div className='tool-content'>
-            <CodeBlock
-              code={safeJsonStringify(input, 2)}
-              lang='json'
-            />
-          </div>
-        }
-      />
-      {resultItem != null && (
-        <ToolCallBox
-          type='result'
-          isError={resultItem.is_error}
-          header={
-            <div className='tool-header-content'>
-              <span className='material-symbols-rounded tool-header-icon'>
-                {resultItem.is_error === true ? 'error' : 'check_circle'}
-              </span>
-              <span className='tool-header-title'>{t('chat.result')}</span>
-            </div>
-          }
-          content={
-            <div className='tool-content'>
-              {typeof resultItem.content === 'string'
-                ? (
+        variant='inline'
+        defaultExpanded={false}
+        collapsible={hasDetails}
+        header={({ isExpanded, isCollapsible }) => (
+          <ToolSummaryHeader
+            icon={<i className='devicon-chrome-plain colored' />}
+            title={titleText}
+            target={targetPresentation.text}
+            targetTitle={targetPresentation.title}
+            targetMonospace={targetPresentation.monospace}
+            expanded={isExpanded}
+            collapsible={isCollapsible}
+            meta={errorMeta}
+            metaTitle={errorMeta == null ? undefined : t('chat.result')}
+          />
+        )}
+        content={hasDetails
+          ? (
+            <div className='tool-detail-sections'>
+              {hasCallDetails && (
+                <div className='tool-detail-section'>
+                  <div className='tool-detail-section__header'>
+                    <Tooltip title={t('chat.tools.call')} {...TOOL_TOOLTIP_PROPS}>
+                      <span className='tool-detail-section__icon material-symbols-rounded'>
+                        {getToolSectionIcon('call')}
+                      </span>
+                    </Tooltip>
+                  </div>
                   <CodeBlock
-                    code={resultItem.content}
-                    lang='text'
-                  />
-                )
-                : (
-                  <CodeBlock
-                    code={safeJsonStringify(resultItem.content, 2)}
+                    code={safeJsonStringify(input, 2)}
                     lang='json'
+                    hideHeader={true}
                   />
-                )}
+                </div>
+              )}
+              {hasResultDetails && resultItem != null && (
+                <div className='tool-detail-section'>
+                  <ToolResultContent content={resultItem.content} />
+                </div>
+              )}
             </div>
-          }
-        />
-      )}
+          )
+          : null}
+      />
     </div>
   )
 })

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/session-view-cache.ts

@@ -0,0 +1,80 @@
+import type { ChatMessage } from '@vibe-forge/core'
+import type { SessionInfo } from '@vibe-forge/types'
+
+import type { ChatErrorState, InteractionRequestState } from './interaction-state'
+
+export interface ChatSessionViewSnapshot {
+  messages: ChatMessage[]
+  sessionInfo: SessionInfo | null
+  errorState: ChatErrorState | null
+  interactionRequest: InteractionRequestState | null
+  isHydrated: boolean
+}
+
+export const MAX_CHAT_SESSION_VIEW_SNAPSHOTS = 20
+
+export const createChatSessionViewSnapshot = (
+  value?: Partial<ChatSessionViewSnapshot>
+): ChatSessionViewSnapshot => ({
+  messages: value?.messages ?? [],
+  sessionInfo: value?.sessionInfo ?? null,
+  errorState: value?.errorState ?? null,
+  interactionRequest: value?.interactionRequest ?? null,
+  isHydrated: value?.isHydrated ?? false
+})
+
+export const mergeChatSessionViewSnapshot = (
+  current: ChatSessionViewSnapshot | undefined,
+  patch: Partial<ChatSessionViewSnapshot>
+): ChatSessionViewSnapshot => {
+  return createChatSessionViewSnapshot({
+    ...createChatSessionViewSnapshot(current),
+    ...patch
+  })
+}
+
+export const restoreChatSessionViewSnapshot = (snapshot?: ChatSessionViewSnapshot) => {
+  const resolved = createChatSessionViewSnapshot(snapshot)
+  const restorable = resolved.isHydrated === true
+    ? resolved
+    : createChatSessionViewSnapshot()
+
+  return {
+    messages: restorable.messages,
+    sessionInfo: restorable.sessionInfo,
+    errorState: restorable.errorState,
+    interactionRequest: restorable.interactionRequest,
+    isReady: restorable.isHydrated
+  }
+}
+
+export const setChatSessionViewSnapshot = (
+  cache: Map<string, ChatSessionViewSnapshot>,
+  sessionId: string,
+  patch: Partial<ChatSessionViewSnapshot>
+) => {
+  const next = mergeChatSessionViewSnapshot(cache.get(sessionId), patch)
+
+  if (cache.has(sessionId)) {
+    cache.delete(sessionId)
+  }
+
+  cache.set(sessionId, next)
+
+  while (cache.size > MAX_CHAT_SESSION_VIEW_SNAPSHOTS) {
+    const oldestSessionId = cache.keys().next().value
+    if (oldestSessionId == null) {
+      break
+    }
+    cache.delete(oldestSessionId)
+  }
+
+  return next
+}
+
+export const deleteChatSessionViewSnapshot = (
+  cache: Map<string, ChatSessionViewSnapshot>,
+  sessionId: string
+) => {
+  cache.delete(sessionId)
+}

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,