@vibe-forge/client 0.10.1 → 0.11.1

package/src/components/chat/messages/build-chat-history-status-notices.ts

@@ -0,0 +1,138 @@
+import type { ChatErrorState } from '#~/hooks/chat/interaction-state'
+
+type Translate = (key: string, options?: Record<string, unknown>) => string
+
+export interface ChatHistoryStatusNotice {
+  action?: 'retry-connection'
+  detail?: string
+  icon: string
+  id: string
+  isMock?: boolean
+  message: string
+  meta?: string
+  tone: 'error' | 'warning'
+  title: string
+}
+
+const createModelUnavailableNotice = (t: Translate, isMock = false): ChatHistoryStatusNotice => ({
+  icon: 'settings_suggest',
+  id: isMock ? 'mock-model-unavailable' : 'model-unavailable',
+  isMock,
+  message: t('chat.modelConfigRequired'),
+  detail: t('chat.modelConfigRequiredHelp'),
+  tone: 'warning',
+  title: t('chat.modelConfigRequiredTitle')
+})
+
+const createConnectionNotice = (
+  t: Translate,
+  state: ChatErrorState,
+  isMock = false
+): ChatHistoryStatusNotice => {
+  const isClosed = state.reason === 'closed'
+
+  return {
+    action: isMock ? undefined : 'retry-connection',
+    detail: isClosed ? t('chat.connectionClosedHelp') : t('chat.connectionErrorHelp'),
+    icon: isClosed ? 'wifi_off' : 'cloud_off',
+    id: isMock
+      ? isClosed ? 'mock-connection-closed' : 'mock-connection-error'
+      : isClosed
+      ? 'connection-closed'
+      : 'connection-error',
+    isMock,
+    message: state.message,
+    tone: 'error',
+    title: isClosed ? t('chat.connectionClosedTitle') : t('chat.connectionErrorTitle')
+  }
+}
+
+const createSessionNotice = (
+  t: Translate,
+  state: ChatErrorState,
+  isMock = false
+): ChatHistoryStatusNotice => ({
+  detail: t('chat.sessionErrorHelp'),
+  icon: 'error',
+  id: isMock ? 'mock-session-error' : 'session-error',
+  isMock,
+  message: state.message,
+  meta: state.code != null && state.code !== ''
+    ? t('chat.sessionErrorCode', { code: state.code })
+    : undefined,
+  tone: 'error',
+  title: t('chat.sessionErrorTitle')
+})
+
+export const buildChatHistoryStatusNotices = ({
+  errorState,
+  isDebugMode,
+  modelUnavailable,
+  t
+}: {
+  errorState?: ChatErrorState | null
+  isDebugMode: boolean
+  modelUnavailable: boolean
+  t: Translate
+}) => {
+  const notices: ChatHistoryStatusNotice[] = []
+  const activeScenarios = new Set<string>()
+
+  if (modelUnavailable) {
+    notices.push(createModelUnavailableNotice(t))
+    activeScenarios.add('model-unavailable')
+  }
+
+  if (errorState != null && errorState.message.trim() !== '') {
+    if (errorState.kind === 'session') {
+      notices.push(createSessionNotice(t, errorState))
+      activeScenarios.add('session-error')
+    } else {
+      notices.push(createConnectionNotice(t, errorState))
+      activeScenarios.add(errorState.reason === 'closed' ? 'connection-closed' : 'connection-error')
+    }
+  }
+
+  if (!isDebugMode) {
+    return notices
+  }
+
+  const mockNotices: Array<{ notice: ChatHistoryStatusNotice; scenario: string }> = [
+    {
+      scenario: 'connection-error',
+      notice: createConnectionNotice(t, {
+        kind: 'connection',
+        message: t('chat.debugMockConnectionErrorMessage'),
+        reason: 'error'
+      }, true)
+    },
+    {
+      scenario: 'connection-closed',
+      notice: createConnectionNotice(t, {
+        kind: 'connection',
+        message: t('chat.debugMockConnectionClosedMessage'),
+        reason: 'closed'
+      }, true)
+    },
+    {
+      scenario: 'session-error',
+      notice: createSessionNotice(t, {
+        kind: 'session',
+        message: t('chat.debugMockSessionErrorMessage'),
+        code: 'session_timeout'
+      }, true)
+    },
+    {
+      scenario: 'model-unavailable',
+      notice: createModelUnavailableNotice(t, true)
+    }
+  ]
+
+  for (const mock of mockNotices) {
+    if (!activeScenarios.has(mock.scenario)) {
+      notices.push(mock.notice)
+    }
+  }
+
+  return notices
+}

package/src/components/chat/sender/@components/sender-body/SenderBody.tsx

@@ -1,11 +1,9 @@
-import { Button } from 'antd'
 import type { MutableRefObject } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import type { SessionInfo } from '@vibe-forge/types'
 
 import { ContextFilePicker } from '#~/components/workspace/ContextFilePicker'
-import type { ChatErrorBannerState } from '#~/hooks/chat/interaction-state'
 
 import type {
   SenderToolbarData,
@@ -25,8 +23,6 @@ export function SenderBody({
   isInlineEdit,
   isBusy,
   modelUnavailable,
-  errorBanner,
-  onRetryConnection,
   pendingImages,
   pendingFiles,
   onRemovePendingImage,
@@ -52,8 +48,6 @@ export function SenderBody({
   isInlineEdit: boolean
   isBusy: boolean
   modelUnavailable?: boolean
-  errorBanner?: ChatErrorBannerState | null
-  onRetryConnection?: () => void
   pendingImages: Parameters<typeof SenderAttachments>[0]['pendingImages']
   pendingFiles: Parameters<typeof SenderAttachments>[0]['pendingFiles']
   onRemovePendingImage: (id: string) => void
@@ -81,27 +75,9 @@ export function SenderBody({
   onConfirmContextPicker: (files: PendingContextFile[]) => void
 }) {
   const { t } = useTranslation()
-  const errorTitle = errorBanner?.kind === 'session'
-    ? t('chat.sessionErrorTitle')
-    : t('chat.connectionErrorTitle')
 
   return (
     <div className={`chat-input-container ${isInlineEdit ? 'chat-input-container--inline-edit' : ''}`.trim()}>
-      {!isInlineEdit && errorBanner != null && errorBanner.message.trim() !== '' && (
-        <div className='connection-error-banner'>
-          <div className='connection-error-content'>
-            <span className='material-symbols-rounded'>error</span>
-            <div className='connection-error-copy'>
-              <div className='connection-error-title'>{errorTitle}</div>
-              <div className='connection-error-message'>{errorBanner.message}</div>
-            </div>
-          </div>
-          {errorBanner.kind === 'connection' && onRetryConnection != null && (
-            <Button size='small' onClick={onRetryConnection}>{t('chat.retryConnection')}</Button>
-          )}
-        </div>
-      )}
-      {!isInlineEdit && modelUnavailable && <div className='model-unavailable'>{t('chat.modelConfigRequired')}</div>}
       <SenderAttachments
         pendingImages={pendingImages}
         pendingFiles={pendingFiles}

package/src/components/chat/sender/@core/build-sender-controller-result.ts

@@ -49,7 +49,6 @@ export const buildSenderControllerResult = ({
   attachments,
   completion,
   composer,
-  errorBanner,
   focusRestore,
   handleKeyDown,
   hideSender,
@@ -59,7 +58,6 @@ export const buildSenderControllerResult = ({
   isInlineEdit,
   isThinking,
   modelUnavailable,
-  onRetryConnection,
   permissionContext,
   placeholder,
   editorRef,
@@ -68,7 +66,6 @@ export const buildSenderControllerResult = ({
   attachments: SenderControllerAttachments
   completion: SenderControllerCompletion
   composer: SenderControllerComposer
-  errorBanner?: SenderProps['errorBanner']
   focusRestore: { queueEditorFocusRestore: () => void }
   handleKeyDown: (event: KeyboardEvent) => void
   hideSender: boolean
@@ -78,7 +75,6 @@ export const buildSenderControllerResult = ({
   isInlineEdit: boolean
   isThinking: boolean
   modelUnavailable?: boolean
-  onRetryConnection?: (() => void) | undefined
   permissionContext?: {
     deniedTools?: string[]
     reasons?: string[]
@@ -102,8 +98,6 @@ export const buildSenderControllerResult = ({
   handleKeyDown,
   interactionRequest,
   interactionResponse,
-  errorBanner,
-  onRetryConnection,
   modelUnavailable,
   placeholder,
   onInputChange: completion.handleInputChange,

package/src/components/chat/sender/@hooks/use-sender-controller.ts

@@ -174,7 +174,6 @@ export const useSenderController = (props: SenderProps) => {
     attachments,
     completion,
     composer,
-    errorBanner: props.errorBanner,
     focusRestore,
     handleKeyDown,
     hideSender,
@@ -184,7 +183,6 @@ export const useSenderController = (props: SenderProps) => {
     isInlineEdit,
     isThinking,
     modelUnavailable: props.modelUnavailable,
-    onRetryConnection: props.onRetryConnection,
     permissionContext,
     editorRef,
     placeholder: props.placeholder ?? props.interactionRequest?.payload.question ?? t('chat.inputPlaceholder'),

package/src/components/chat/sender/@types/sender-props.ts

@@ -3,7 +3,6 @@ import type { ReactNode } from 'react'
 import type { AskUserQuestionParams, ChatMessageContent, SessionStatus } from '@vibe-forge/core'
 import type { SessionInfo } from '@vibe-forge/types'
 
-import type { ChatErrorBannerState } from '#~/hooks/chat/interaction-state'
 import type { ChatEffort } from '#~/hooks/chat/use-chat-effort'
 import type { ModelSelectMenuGroup, ModelSelectOption } from '#~/hooks/chat/use-chat-model-adapter-selection'
 import type { PermissionMode } from '#~/hooks/chat/use-chat-permission-mode'
@@ -19,8 +18,6 @@ export interface SenderProps {
   onInterrupt: () => void
   onClear?: () => void
   sessionInfo?: SessionInfo | null
-  errorBanner?: ChatErrorBannerState | null
-  onRetryConnection?: () => void
   interactionRequest?: { id: string; payload: AskUserQuestionParams } | null
   onInteractionResponse?: (id: string, data: string | string[]) => void
   placeholder?: string

package/src/components/chat/sender/Sender.scss

@@ -27,64 +27,6 @@
   .chat-input-monaco {
     color: var(--text-color);
   }
-
-  .model-unavailable {
-    margin-bottom: 6px;
-    padding: 6px 8px;
-    border-radius: 8px;
-    border: 1px dashed var(--border-color);
-    background-color: var(--tag-bg, #f9fafb);
-    color: var(--placeholder-color);
-    font-size: 12px;
-  }
-
-  .connection-error-banner {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 12px;
-    margin-bottom: 8px;
-    padding: 10px 12px;
-    border-radius: 10px;
-    border: 1px solid rgba(220, 38, 38, .2);
-    background: linear-gradient(
-      135deg,
-      rgba(254, 242, 242, .95),
-      rgba(255, 255, 255, .92)
-    );
-  }
-
-  .connection-error-content {
-    display: flex;
-    align-items: flex-start;
-    gap: 10px;
-    min-width: 0;
-
-    .material-symbols-rounded {
-      color: #dc2626;
-      font-size: 18px;
-      line-height: 1;
-      margin-top: 1px;
-    }
-  }
-
-  .connection-error-copy {
-    min-width: 0;
-  }
-
-  .connection-error-title {
-    color: #991b1b;
-    font-size: 12px;
-    font-weight: 600;
-  }
-
-  .connection-error-message {
-    margin-top: 2px;
-    color: #7f1d1d;
-    font-size: 12px;
-    line-height: 1.4;
-    word-break: break-word;
-  }
 }
 
 .chat-input-container--inline-edit {

package/src/components/chat/sender/Sender.tsx

@@ -33,8 +33,6 @@ export function Sender(props: SenderProps) {
           isInlineEdit={controller.isInlineEdit}
           isBusy={controller.isBusy}
           modelUnavailable={controller.modelUnavailable}
-          errorBanner={controller.errorBanner}
-          onRetryConnection={controller.onRetryConnection}
           pendingImages={controller.composer.pendingImages}
           pendingFiles={controller.composer.pendingFiles}
           onRemovePendingImage={(id) =>

package/src/components/chat/tools/DefaultTool.tsx

@@ -1,172 +1,17 @@
-import { CodeBlock } from '#~/components/CodeBlock'
-import { MarkdownContent } from '#~/components/MarkdownContent'
-import { safeJsonStringify, toSerializable } from '#~/utils/safe-serialize'
-import type { ChatMessageContent } from '@vibe-forge/core'
+import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { ToolCallBox } from './core/ToolCallBox'
-
-interface StructuredTextBlock {
-  type: 'text'
-  text: string
-  format: 'text' | 'markdown'
-}
-
-interface StructuredImageBlock {
-  type: 'image'
-  src: string
-  alt?: string
-  title?: string
-  width?: number
-  height?: number
-}
-
-type StructuredBlock = StructuredTextBlock | StructuredImageBlock
 
-function parseStructuredInput(value: unknown) {
-  if (typeof value !== 'string') {
-    return value
-  }
-  const trimmed = value.trim()
-  if (
-    (trimmed.startsWith('{') && trimmed.endsWith('}')) ||
-    (trimmed.startsWith('[') && trimmed.endsWith(']'))
-  ) {
-    try {
-      return JSON.parse(trimmed)
-    } catch {
-      return value
-    }
-  }
-  return value
-}
-
-function resolveImageSource(value: Record<string, unknown>) {
-  const directUrl = typeof value.url === 'string'
-    ? value.url
-    : typeof value.src === 'string'
-    ? value.src
-    : typeof value.image_url === 'string'
-    ? value.image_url
-    : typeof value.imageUrl === 'string'
-    ? value.imageUrl
-    : typeof value.dataUrl === 'string'
-    ? value.dataUrl
-    : null
-  if (directUrl) {
-    return directUrl
-  }
-  const source = value.source != null && typeof value.source === 'object'
-    ? (value.source as Record<string, unknown>)
-    : null
-  const data = typeof value.data === 'string'
-    ? value.data
-    : typeof value.base64 === 'string'
-    ? value.base64
-    : source != null && typeof source.data === 'string'
-    ? source.data
-    : null
-  if (!data) {
-    return null
-  }
-  const mimeType = typeof value.mimeType === 'string'
-    ? value.mimeType
-    : typeof value.mime_type === 'string'
-    ? value.mime_type
-    : source != null && typeof source.media_type === 'string'
-    ? source.media_type
-    : source != null && typeof source.mimeType === 'string'
-    ? source.mimeType
-    : source != null && typeof source.mime_type === 'string'
-    ? source.mime_type
-    : 'image/png'
-  return `data:${mimeType};base64,${data}`
-}
-
-function parseBlock(value: unknown): StructuredBlock | null {
-  if (value == null || typeof value !== 'object') {
-    return null
-  }
-  const obj = value as Record<string, unknown>
-  const rawType = typeof obj.type === 'string' ? obj.type.toLowerCase() : ''
-  if (rawType === 'text' || rawType === 'markdown' || rawType === 'md') {
-    const text = typeof obj.text === 'string'
-      ? obj.text
-      : typeof obj.content === 'string'
-      ? obj.content
-      : null
-    if (text == null) {
-      return null
-    }
-    const rawFormat = typeof obj.format === 'string' ? obj.format.toLowerCase() : 'markdown'
-    const format = rawType === 'text'
-      ? (rawFormat === 'text' || rawFormat === 'plain' ? 'text' : 'markdown')
-      : 'markdown'
-    return { type: 'text', text, format }
-  }
-  if (rawType === 'image') {
-    const src = resolveImageSource(obj)
-    if (!src) {
-      return null
-    }
-    const alt = typeof obj.alt === 'string' ? obj.alt : undefined
-    const title = typeof obj.title === 'string' ? obj.title : undefined
-    const width = typeof obj.width === 'number' ? obj.width : undefined
-    const height = typeof obj.height === 'number' ? obj.height : undefined
-    return { type: 'image', src, alt, title, width, height }
-  }
-  return null
-}
-
-function getStructuredBlocks(value: unknown): StructuredBlock[] | null {
-  const serializable = toSerializable(value)
-  const parsed = parseStructuredInput(serializable)
-  if (Array.isArray(parsed)) {
-    const blocks = parsed.map(parseBlock)
-    return blocks.every(Boolean) ? (blocks as StructuredBlock[]) : null
-  }
-  if (parsed != null && typeof parsed === 'object') {
-    const container = parsed as Record<string, unknown>
-    const content = container.content ?? container.items ?? container.blocks
-    if (Array.isArray(content)) {
-      const blocks = content.map(parseBlock)
-      return blocks.every(Boolean) ? (blocks as StructuredBlock[]) : null
-    }
-  }
-  const single = parseBlock(parsed)
-  return single ? [single] : null
-}
+import type { ChatMessageContent } from '@vibe-forge/core'
 
-function StructuredToolResult({ blocks }: { blocks: StructuredBlock[] }) {
-  return (
-    <div className='tool-result-structured'>
-      {blocks.map((block, index) => {
-        if (block.type === 'text') {
-          return (
-            <div className='tool-result-text' key={`text-${index}`}>
-              {block.format === 'markdown'
-                ? <MarkdownContent content={block.text} />
-                : <div className='tool-result-text-content'>{block.text}</div>}
-            </div>
-          )
-        }
-        return (
-          <div className='tool-result-image-wrapper' key={`image-${index}`}>
-            <img
-              className='tool-result-image'
-              src={block.src}
-              alt={block.alt ?? ''}
-              width={block.width}
-              height={block.height}
-            />
-            {block.title != null && block.title.length > 0 && (
-              <div className='tool-result-image-caption'>{block.title}</div>
-            )}
-          </div>
-        )
-      })}
-    </div>
-  )
-}
+import { ToolCallBox } from './core/ToolCallBox'
+import { ToolDiffViewer } from './core/ToolDiffViewer'
+import { ToolResultContent } from './core/ToolResultContent'
+import { ToolSummaryHeader } from './core/ToolSummaryHeader'
+import { buildGenericToolPresentation } from './core/generic-tool-presentation'
+import { hasMeaningfulToolValue } from './core/tool-content-presence'
+import { getToolTargetPresentation } from './core/tool-display'
+import { ToolInlineFields, renderToolBlockField } from './core/tool-field-sections'
+import { getToolPrimaryText, getToolTitleText } from './core/tool-summary'
 
 export function DefaultTool({
   item,
@@ -176,51 +21,82 @@ export function DefaultTool({
   resultItem?: Extract<ChatMessageContent, { type: 'tool_result' }>
 }) {
   const { t } = useTranslation()
-  const structuredBlocks = resultItem != null ? getStructuredBlocks(resultItem.content) : null
+  const view = useMemo(() => buildGenericToolPresentation(item.name, item.input), [item.input, item.name])
+  const hasCallDetails = view.inlineFields.length > 0 || view.blockFields.length > 0 || view.diff != null
+  const hasResultDetails = resultItem != null && hasMeaningfulToolValue(resultItem.content)
+  const showResultDetails = hasResultDetails && !(view.suppressSuccessResult === true && resultItem?.is_error !== true)
+  const hasDetails = hasCallDetails || showResultDetails
+  const titleText = view.titleKey != null
+    ? t(view.titleKey, { defaultValue: view.fallbackTitle })
+    : getToolTitleText(item, t)
+  const targetPresentation = getToolTargetPresentation(view.primary ?? getToolPrimaryText(item))
+  const preferMarkdown = ['webfetch', 'websearch'].includes(
+    item.name.split(':').pop()?.replace(/[^a-z0-9]+/gi, '').toLowerCase() ?? ''
+  )
+  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'>
+    <div className='tool-group tool-group--compact'>
       <ToolCallBox
-        header={
-          <div className='tool-header-content'>
-            <span className='material-symbols-rounded tool-header-icon'>build</span>
-            <span className='tool-header-title'>{item.name}</span>
-            <span className='tool-header-hint'>{t('chat.tools.call')}</span>
-          </div>
-        }
-        content={
-          <div className='tool-content'>
-            <CodeBlock
-              code={safeJsonStringify(item.input != null ? item.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>
+        variant='inline'
+        defaultExpanded={false}
+        collapsible={hasDetails}
+        header={({ isExpanded, isCollapsible }) => (
+          <ToolSummaryHeader
+            icon={<span className='material-symbols-rounded'>{view.icon}</span>}
+            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'>
+              <ToolInlineFields fields={view.inlineFields} t={t} />
+              {view.diff != null && (
+                <div className='tool-detail-section'>
+                  <ToolDiffViewer
+                    original={view.diff.original}
+                    modified={view.diff.modified}
+                    language={view.diff.language}
+                    metaItems={(view.diff.metaItems ?? []).map(item => ({
+                      icon: item.icon,
+                      label: t(item.labelKey, { defaultValue: item.fallbackLabel }),
+                      value: item.value != null && item.value !== ''
+                        ? (item.value === 'true'
+                          ? t('chat.tools.booleanOn')
+                          : item.value === 'false'
+                          ? t('chat.tools.booleanOff')
+                          : item.value)
+                        : undefined,
+                      tone: item.tone
+                    }))}
+                    splitLabel={t('chat.tools.diffSplit')}
+                    inlineLabel={t('chat.tools.diffInline')}
+                  />
+                </div>
+              )}
+              {view.blockFields.map((field, index) => renderToolBlockField(field, index, t))}
+              {showResultDetails && resultItem != null && (
+                <div className='tool-detail-section'>
+                  <ToolResultContent content={resultItem.content} preferMarkdown={preferMarkdown} />
+                </div>
+              )}
             </div>
-          }
-          content={
-            <div className='tool-content'>
-              {structuredBlocks != null
-                ? <StructuredToolResult blocks={structuredBlocks} />
-                : (typeof resultItem.content === 'string'
-                  ? (resultItem.content.startsWith('```')
-                    ? <MarkdownContent content={resultItem.content} />
-                    : <CodeBlock code={resultItem.content} lang='text' />)
-                  : <CodeBlock code={safeJsonStringify(resultItem.content, 2)} lang='json' />)}
-            </div>
-          }
-        />
-      )}
+          )
+          : null}
+      />
     </div>
   )
 }

package/src/components/chat/tools/adapter-claude/ClaudeEditDiff.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { ToolDiffViewer } from '../core/ToolDiffViewer'
+import type { ToolDiffMetaItem } from '../core/ToolDiffViewer'
+
+export function ClaudeEditDiff({
+  oldValue,
+  newValue,
+  lang,
+  metaItems = []
+}: {
+  oldValue?: string
+  newValue?: string
+  lang?: string
+  metaItems?: ToolDiffMetaItem[]
+}) {
+  const { t } = useTranslation()
+
+  return (
+    <ToolDiffViewer
+      original={oldValue ?? ''}
+      modified={newValue ?? ''}
+      language={lang}
+      metaItems={metaItems}
+      splitLabel={t('chat.tools.diffSplit')}
+      inlineLabel={t('chat.tools.diffInline')}
+    />
+  )
+}