@vibe-forge/client 0.11.0 → 0.11.2

package/src/components/chat/tools/core/tool-field-sections.tsx

@@ -0,0 +1,132 @@
+import { Tooltip } from 'antd'
+import React from 'react'
+
+import { CodeBlock } from '#~/components/CodeBlock'
+import { safeJsonStringify } from '#~/utils/safe-serialize'
+
+import { TOOL_TOOLTIP_PROPS, getToolFieldIcon, getToolInlineValueText, getToolValueText } from './tool-display'
+
+type Translate = (key: string, options?: Record<string, unknown>) => string
+
+export type ToolFieldFormat = 'inline' | 'text' | 'code' | 'list' | 'json' | 'questions'
+
+export interface ToolFieldView {
+  labelKey: string
+  fallbackLabel: string
+  format: ToolFieldFormat
+  value: unknown
+  lang?: string
+}
+
+const getFieldKey = (field: ToolFieldView, index: number) => `${field.labelKey}-${index}`
+
+const getSectionHeader = (icon: string, label: string) => (
+  <div className='tool-detail-section__header'>
+    <Tooltip title={label} {...TOOL_TOOLTIP_PROPS}>
+      <span className='tool-detail-section__icon material-symbols-rounded'>{icon}</span>
+    </Tooltip>
+  </div>
+)
+
+export function ToolInlineFields({
+  fields,
+  t
+}: {
+  fields: ToolFieldView[]
+  t: Translate
+}) {
+  if (fields.length === 0) {
+    return null
+  }
+
+  return (
+    <div
+      className='tool-inline-token-list tool-inline-token-list--standalone'
+      aria-label={t('chat.tools.fields.details')}
+    >
+      {fields.map((field, index) => {
+        const label = t(field.labelKey, { defaultValue: field.fallbackLabel })
+        const valueText = getToolInlineValueText(field.value)
+        return (
+          <Tooltip
+            key={getFieldKey(field, index)}
+            title={
+              <div className='tool-tooltip-content'>
+                <div className='tool-tooltip-content__title'>{label}</div>
+                <div className='tool-tooltip-content__value'>{getToolValueText(field.value)}</div>
+              </div>
+            }
+            {...TOOL_TOOLTIP_PROPS}
+          >
+            <div className='tool-inline-token'>
+              <span className='tool-inline-token__icon material-symbols-rounded'>
+                {getToolFieldIcon(field.labelKey, field.format)}
+              </span>
+              <span className='tool-inline-token__value'>{valueText}</span>
+            </div>
+          </Tooltip>
+        )
+      })}
+    </div>
+  )
+}
+
+export function renderToolBlockField(
+  field: ToolFieldView,
+  index: number,
+  t: Translate,
+  options: {
+    sectionClassName?: string
+  } = {}
+) {
+  const label = t(field.labelKey, { defaultValue: field.fallbackLabel })
+  const sectionHeader = getSectionHeader(getToolFieldIcon(field.labelKey, field.format), label)
+  const sectionClassName = options.sectionClassName ?? 'tool-detail-section'
+
+  if (field.format === 'text') {
+    return (
+      <div className={sectionClassName} key={getFieldKey(field, index)}>
+        {sectionHeader}
+        <div className='tool-detail-section__text'>{String(field.value)}</div>
+      </div>
+    )
+  }
+
+  if (field.format === 'code') {
+    return (
+      <div className={sectionClassName} key={getFieldKey(field, index)}>
+        {sectionHeader}
+        <CodeBlock
+          code={String(field.value)}
+          lang={field.lang ?? 'text'}
+          hideHeader={true}
+        />
+      </div>
+    )
+  }
+
+  if (field.format === 'list') {
+    const items = Array.isArray(field.value) ? field.value.map(item => String(item)) : []
+    return (
+      <div className={sectionClassName} key={getFieldKey(field, index)}>
+        {sectionHeader}
+        <div className='tool-detail-list'>
+          {items.map(listItem => (
+            <div className='tool-detail-list-item' key={listItem}>{listItem}</div>
+          ))}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className={sectionClassName} key={getFieldKey(field, index)}>
+      {sectionHeader}
+      <CodeBlock
+        code={safeJsonStringify(field.value, 2)}
+        lang='json'
+        hideHeader={true}
+      />
+    </div>
+  )
+}

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

@@ -1,3 +1,5 @@
+/* eslint-disable max-lines */
+
 import type { ChatMessageContent } from '@vibe-forge/core'
 
 import {
@@ -6,6 +8,7 @@ import {
   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
@@ -28,7 +31,7 @@ export const formatToolName = (name: string) => {
     return name.replace('mcp__ChromeDevtools__', '')
   }
 
-  const namespaceSegments = name.split('__').filter(Boolean)
+  const namespaceSegments = name.includes('__') ? name.split('__').filter(Boolean) : []
   const lastSegment = namespaceSegments.length > 0
     ? namespaceSegments[namespaceSegments.length - 1]
     : name.split(':').pop() ?? name
@@ -76,8 +79,11 @@ export function getToolSummaryText(item: ToolUseItem, t: Translate) {
     return getClaudeToolSummaryText(item.name, item.input, t)
   }
 
-  const displayName = formatToolName(item.name)
-  const preview = getToolInputPreview(item.input)
+  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
 }
 
@@ -87,7 +93,10 @@ export function getToolTitleText(item: ToolUseItem, t: Translate) {
     return t(presentation.titleKey, { defaultValue: presentation.fallbackTitle })
   }
 
-  return formatToolName(item.name)
+  const presentation = buildGenericToolPresentation(item.name, item.input)
+  return presentation.titleKey != null
+    ? t(presentation.titleKey, { defaultValue: presentation.fallbackTitle })
+    : presentation.fallbackTitle
 }
 
 export function getToolPrimaryText(item: ToolUseItem) {
@@ -95,7 +104,7 @@ export function getToolPrimaryText(item: ToolUseItem) {
     return buildClaudeToolPresentation(item.name, item.input).primary
   }
 
-  return getToolInputPreview(item.input)
+  return buildGenericToolPresentation(item.name, item.input).primary ?? getToolInputPreview(item.input)
 }
 
 const getToolNamespaceLabel = (name: string) => {
@@ -133,7 +142,10 @@ function getToolGroupDescriptor(item: ToolUseItem, t: Translate): ToolGroupDescr
     }
   }
 
-  const label = formatToolName(item.name)
+  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,

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

@@ -69,13 +69,6 @@ export const ChromeDevtoolsTool = defineToolRender(({ item, resultItem }) => {
               )}
               {hasResultDetails && resultItem != null && (
                 <div className='tool-detail-section'>
-                  <div className='tool-detail-section__header'>
-                    <Tooltip title={t('chat.result')} {...TOOL_TOOLTIP_PROPS}>
-                      <span className='tool-detail-section__icon material-symbols-rounded'>
-                        {getToolSectionIcon('result')}
-                      </span>
-                    </Tooltip>
-                  </div>
                   <ToolResultContent content={resultItem.content} />
                 </div>
               )}

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-session-messages.ts

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
+import type { SetStateAction } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSWRConfig } from 'swr'
 
@@ -8,13 +9,19 @@ import type { SessionInfo } from '@vibe-forge/types'
 import { getSessionMessages } from '#~/api.js'
 import { connectionManager } from '#~/connectionManager.js'
 
-import type { ChatErrorState } from './interaction-state'
+import type { ChatErrorState, InteractionRequestState } from './interaction-state'
 import {
   applyInteractionStateEvent,
   findLatestFatalError,
   getFatalSessionError,
   restoreInteractionStateFromHistory
 } from './interaction-state'
+import {
+  deleteChatSessionViewSnapshot,
+  restoreChatSessionViewSnapshot,
+  setChatSessionViewSnapshot
+} from './session-view-cache'
+import type { ChatSessionViewSnapshot } from './session-view-cache'
 import type { ChatEffort } from './use-chat-effort'
 import type { PermissionMode } from './use-chat-permission-mode'
 
@@ -62,7 +69,7 @@ export function useChatSessionMessages({
 }) {
   const { t } = useTranslation()
   const { mutate } = useSWRConfig()
-  const [messages, setMessages] = useState<ChatMessage[]>([])
+  const [messagesState, setMessagesState] = useState<ChatMessage[]>([])
   const [sessionInfo, setSessionInfo] = useState<SessionInfo | null>(null)
   const [isReady, setIsReady] = useState(false)
   const [errorState, setErrorState] = useState<ChatErrorState | null>(null)
@@ -74,13 +81,50 @@ export function useChatSessionMessages({
   const lastConnectedAdapterRef = useRef<string | undefined>(undefined)
   const lastObservedSessionStatusRef = useRef<Session['status'] | undefined>(session?.status)
   const expectedCloseRef = useRef(false)
-  const interactionRequestRef = useRef<{ id: string; payload: AskUserQuestionParams } | null>(null)
+  const interactionRequestRef = useRef<InteractionRequestState | null>(null)
   const activeSessionIdRef = useRef<string | undefined>(session?.id)
   const historyRequestSeqRef = useRef(0)
   const reconcileTimersRef = useRef<Array<ReturnType<typeof setTimeout>>>([])
+  const sessionViewCacheRef = useRef(new Map<string, ChatSessionViewSnapshot>())
 
   activeSessionIdRef.current = session?.id
 
+  const updateSessionViewCache = useCallback((
+    sessionId: string,
+    patch: Partial<{
+      messages: ChatMessage[]
+      sessionInfo: SessionInfo | null
+      errorState: ChatErrorState | null
+      interactionRequest: InteractionRequestState | null
+      isHydrated: boolean
+    }>
+  ) => {
+    return setChatSessionViewSnapshot(sessionViewCacheRef.current, sessionId, patch)
+  }, [])
+
+  const removeSessionViewCache = useCallback((sessionId: string) => {
+    deleteChatSessionViewSnapshot(sessionViewCacheRef.current, sessionId)
+  }, [])
+
+  const setMessages = useCallback((value: SetStateAction<ChatMessage[]>) => {
+    setMessagesState((current) => {
+      const next = typeof value === 'function'
+        ? value(current)
+        : value
+      const sessionId = activeSessionIdRef.current
+
+      if (sessionId != null && sessionId !== '') {
+        const currentSnapshot = sessionViewCacheRef.current.get(sessionId)
+        updateSessionViewCache(sessionId, {
+          messages: next,
+          isHydrated: currentSnapshot?.isHydrated === true
+        })
+      }
+
+      return next
+    })
+  }, [updateSessionViewCache])
+
   const clearScheduledReconciles = useCallback(() => {
     for (const timer of reconcileTimersRef.current) {
       clearTimeout(timer)
@@ -123,18 +167,17 @@ export function useChatSessionMessages({
         res.session?.status
       )
       const latestFatalError = findLatestFatalError(events)
+      const nextErrorState = restoredInteraction == null && res.session?.status === 'failed' && latestFatalError != null
+        ? {
+          kind: 'session' as const,
+          message: latestFatalError.message,
+          code: latestFatalError.code
+        }
+        : null
 
       interactionRequestRef.current = restoredInteraction
       setInteractionRequest(restoredInteraction)
-      setErrorState(
-        restoredInteraction == null && res.session?.status === 'failed' && latestFatalError != null
-          ? {
-            kind: 'session',
-            message: latestFatalError.message,
-            code: latestFatalError.code
-          }
-          : null
-      )
+      setErrorState(nextErrorState)
 
       for (const data of events) {
         currentMessages = applyMessageEvent(currentMessages, data)
@@ -146,6 +189,14 @@ export function useChatSessionMessages({
         }
       }
 
+      updateSessionViewCache(sessionId, {
+        messages: currentMessages,
+        sessionInfo: currentSessionInfo,
+        errorState: nextErrorState,
+        interactionRequest: restoredInteraction,
+        isHydrated: true
+      })
+
       setMessages(currentMessages)
       setSessionInfo(currentSessionInfo)
 
@@ -161,7 +212,7 @@ export function useChatSessionMessages({
     } catch (err) {
       console.error('Failed to fetch history messages:', err)
     }
-  }, [mutate, setInteractionRequest])
+  }, [mutate, setInteractionRequest, setMessages, updateSessionViewCache])
 
   const reconcileAfterInteraction = useCallback(() => {
     clearScheduledReconciles()
@@ -178,21 +229,20 @@ export function useChatSessionMessages({
     if (session?.id == null || session.id === '') return
     expectedCloseRef.current = true
     setErrorState(null)
+    updateSessionViewCache(session.id, { errorState: null })
     connectionManager.close(session.id)
     setRetryCount((count) => count + 1)
-  }, [session?.id])
+  }, [session?.id, updateSessionViewCache])
 
   useEffect(() => {
-    setMessages([])
-    setSessionInfo(null)
-    setIsReady(false)
-    setErrorState(null)
-    setInteractionRequest(null)
-    interactionRequestRef.current = null
-    isInitialLoadRef.current = true
-
     if (session?.id == null || session.id === '') {
+      setMessagesState([])
+      setSessionInfo(null)
       setIsReady(true)
+      setErrorState(null)
+      setInteractionRequest(null)
+      interactionRequestRef.current = null
+      isInitialLoadRef.current = true
       lastConnectedModelRef.current = undefined
       lastConnectedEffortRef.current = undefined
       lastConnectedPermissionModeRef.current = undefined
@@ -201,6 +251,16 @@ export function useChatSessionMessages({
       return
     }
 
+    const restoredState = restoreChatSessionViewSnapshot(sessionViewCacheRef.current.get(session.id))
+
+    setMessagesState(restoredState.messages)
+    setSessionInfo(restoredState.sessionInfo)
+    setErrorState(restoredState.errorState)
+    setInteractionRequest(restoredState.interactionRequest)
+    interactionRequestRef.current = restoredState.interactionRequest
+    setIsReady(restoredState.isReady)
+    isInitialLoadRef.current = !restoredState.isReady
+
     void refreshHistory()
 
     return () => {
@@ -281,7 +341,13 @@ export function useChatSessionMessages({
       cleanup = connectionManager.connect(session.id, {
         onOpen() {
           expectedCloseRef.current = false
-          setErrorState((current) => current?.kind === 'session' ? current : null)
+          setErrorState((current) => {
+            const next = current?.kind === 'session' ? current : null
+            updateSessionViewCache(session.id, {
+              errorState: next
+            })
+            return next
+          })
         },
         onMessage(data: WSEvent) {
           if (isDisposed) return
@@ -289,8 +355,14 @@ export function useChatSessionMessages({
           if (nextInteraction !== interactionRequestRef.current) {
             interactionRequestRef.current = nextInteraction
             setInteractionRequest(nextInteraction)
+            updateSessionViewCache(session.id, {
+              interactionRequest: nextInteraction
+            })
             if (nextInteraction != null) {
               setErrorState(null)
+              updateSessionViewCache(session.id, {
+                errorState: null
+              })
             }
           }
           if (data.type === 'interaction_response') {
@@ -300,10 +372,14 @@ export function useChatSessionMessages({
           if (data.type === 'error') {
             const fatalError = getFatalSessionError(data)
             if (fatalError != null) {
-              setErrorState({
+              const nextErrorState = {
                 kind: 'session',
                 message: fatalError.message,
                 code: fatalError.code
+              } satisfies ChatErrorState
+              setErrorState(nextErrorState)
+              updateSessionViewCache(session.id, {
+                errorState: nextErrorState
               })
             }
             return
@@ -315,6 +391,7 @@ export function useChatSessionMessages({
               const updatedSession = data.session as Session | { id: string; isDeleted: boolean }
 
               if ('isDeleted' in updatedSession && updatedSession.isDeleted) {
+                removeSessionViewCache(updatedSession.id)
                 return {
                   ...prev,
                   sessions: prev.sessions.filter((s: Session) => s.id !== updatedSession.id)
@@ -347,6 +424,9 @@ export function useChatSessionMessages({
               void mutate('/api/sessions')
             } else {
               setSessionInfo(data.info ?? null)
+              updateSessionViewCache(session.id, {
+                sessionInfo: data.info ?? null
+              })
               if (isInitialLoadRef.current) {
                 setTimeout(() => {
                   if (isDisposed) return
@@ -366,15 +446,23 @@ export function useChatSessionMessages({
           }
 
           if (data.type === 'interaction_request') {
+            interactionRequestRef.current = data
             setInteractionRequest(data)
+            updateSessionViewCache(session.id, {
+              interactionRequest: data
+            })
           }
         },
         onError() {
           if (isDisposed) return
-          setErrorState({
+          const nextErrorState = {
             kind: 'connection',
             message: t('chat.connectionError'),
             reason: 'error'
+          } satisfies ChatErrorState
+          setErrorState(nextErrorState)
+          updateSessionViewCache(session.id, {
+            errorState: nextErrorState
           })
         },
         onClose() {
@@ -383,13 +471,17 @@ export function useChatSessionMessages({
             expectedCloseRef.current = false
             return
           }
-          setErrorState((current) =>
-            current ?? {
+          setErrorState((current) => {
+            const next = current ?? {
               kind: 'connection',
               message: t('chat.connectionClosed'),
               reason: 'closed'
             }
-          )
+            updateSessionViewCache(session.id, {
+              errorState: next
+            })
+            return next
+          })
         }
       }, Object.keys(connectionParams).length > 0 ? connectionParams : undefined)
     }, (modelChanged || effortChanged || permissionModeChanged || adapterChanged) ? 200 : 100)
@@ -412,11 +504,13 @@ export function useChatSessionMessages({
     session?.id,
     session?.status,
     setInteractionRequest,
-    t
+    t,
+    removeSessionViewCache,
+    updateSessionViewCache
   ])
 
   return {
-    messages,
+    messages: messagesState,
     setMessages,
     sessionInfo,
     isReady,