@vibe-forge/client 0.10.0 → 0.11.0

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 { Tooltip } from 'antd'
 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
-}
+import type { ChatMessageContent } from '@vibe-forge/core'
 
-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 { CodeBlock } from '#~/components/CodeBlock'
+import { safeJsonStringify } from '#~/utils/safe-serialize'
 
-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 { 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'
 
 export function DefaultTool({
   item,
@@ -176,51 +21,73 @@ export function DefaultTool({
   resultItem?: Extract<ChatMessageContent, { type: 'tool_result' }>
 }) {
   const { t } = useTranslation()
-  const structuredBlocks = resultItem != null ? getStructuredBlocks(resultItem.content) : null
+  const hasCallDetails = hasMeaningfulToolValue(item.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'>
+    <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'>build</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'>
+              {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={safeJsonStringify(item.input != null ? item.input : {}, 2)}
+                    lang='json'
+                    hideHeader={true}
+                  />
+                </div>
+              )}
+              {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>
+              )}
             </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')}
+    />
+  )
+}

package/src/components/chat/tools/adapter-claude/GenericClaudeTool.scss

@@ -0,0 +1,128 @@
+.tool-group.claude-generic-tool {
+  .claude-generic-tool__content {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .claude-generic-tool__section {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    min-width: 0;
+  }
+
+  .claude-generic-tool__status {
+    display: inline-flex;
+    align-items: center;
+
+    .material-symbols-rounded {
+      font-size: 16px;
+    }
+
+    &.is-success {
+      color: var(--success-color);
+    }
+
+    &.is-error {
+      color: var(--danger-color);
+    }
+  }
+
+  .claude-generic-tool__list {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .claude-generic-tool__list-item {
+    padding: 4px 0 4px 10px;
+    border: none;
+    border-left: 1px solid var(--border-color);
+    border-radius: 0;
+    background: transparent;
+    color: var(--text-color);
+    font-family: var(--font-mono);
+    font-size: 12px;
+    overflow-wrap: anywhere;
+  }
+
+  .claude-generic-tool__questions {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .claude-generic-tool__question {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    padding-left: 10px;
+    border-left: 1px solid var(--border-color);
+  }
+
+  .claude-generic-tool__question-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+  }
+
+  .claude-generic-tool__question-title {
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--text-color);
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .claude-generic-tool__question-mode {
+    flex-shrink: 0;
+    color: var(--sub-text-color);
+    font-size: 15px;
+    cursor: help;
+  }
+
+  .claude-generic-tool__question-text {
+    color: var(--text-color);
+    font-size: 12px;
+    line-height: 1.55;
+  }
+
+  .claude-generic-tool__question-options {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .claude-generic-tool__question-option {
+    padding: 4px 0 4px 10px;
+    border-radius: 0;
+    background: transparent;
+    border: none;
+    border-left: 1px solid var(--border-color);
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .claude-generic-tool__question-option-label {
+    color: var(--text-color);
+    font-size: 12px;
+    font-weight: 500;
+  }
+
+  .claude-generic-tool__question-option-description {
+    color: var(--sub-text-color);
+    font-size: 11px;
+    line-height: 1.45;
+  }
+
+  .claude-generic-tool__placeholder {
+    color: var(--sub-text-color);
+    font-size: 12px;
+    font-style: italic;
+  }
+}

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

@@ -0,0 +1,133 @@
+import './GenericClaudeTool.scss'
+
+import { Tooltip } from 'antd'
+import React, { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+
+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,
+  getToolFieldIcon,
+  getToolInlineValueText,
+  getToolSectionIcon,
+  getToolTargetPresentation
+} from '../core/tool-display'
+import { defineToolRender } from '../defineToolRender'
+import { ClaudeEditDiff } from './ClaudeEditDiff'
+import { ClaudeToolInlineFields, renderClaudeBlockField } from './claude-tool-field-sections'
+import { buildClaudeToolPresentation, getClaudeToolBaseName } from './claude-tool-presentation'
+import { getClaudeToolSummaryText } from './claude-tool-summary'
+
+export const GenericClaudeTool = defineToolRender(({ item, resultItem }) => {
+  const { t } = useTranslation()
+  const view = useMemo(() => buildClaudeToolPresentation(item.name, item.input), [item.input, item.name])
+  const titleText = useMemo(() => t(view.titleKey, { defaultValue: view.fallbackTitle }), [
+    t,
+    view.fallbackTitle,
+    view.titleKey
+  ])
+  const inlineFields = view.fields.filter(field => field.format === 'inline')
+  const isEditTool = view.baseName === 'Edit'
+  const blockFields = view.fields.filter((field) => {
+    if (field.format === 'inline') return false
+    if (!isEditTool) return true
+    return field.labelKey !== 'chat.tools.fields.oldString' && field.labelKey !== 'chat.tools.fields.newString'
+  })
+  const hasFields = view.fields.length > 0
+  const hasResultDetails = resultItem != null && hasMeaningfulToolValue(resultItem.content)
+  const showResultDetails = hasResultDetails && (!isEditTool || resultItem?.is_error === true)
+  const hasDetails = hasFields || hasResultDetails
+  const preferMarkdown = ['WebFetch', 'WebSearch'].includes(getClaudeToolBaseName(item.name))
+  const editInput = isEditTool && item.input != null && typeof item.input === 'object' && !Array.isArray(item.input)
+    ? item.input as Record<string, unknown>
+    : null
+  const editLanguage = blockFields.find(field => field.lang != null)?.lang
+  const editOldValue = typeof editInput?.old_string === 'string' ? editInput.old_string : undefined
+  const editNewValue = typeof editInput?.new_string === 'string' ? editInput.new_string : undefined
+  const hasEditDiff = isEditTool && (editOldValue != null || editNewValue != null)
+  const editMetaItems = hasEditDiff
+    ? inlineFields.map((field) => {
+      const label = t(field.labelKey, { defaultValue: field.fallbackLabel })
+      const isBooleanTrue = field.value === true || field.value === 'true'
+      const isBooleanFalse = field.value === false || field.value === 'false'
+
+      return {
+        icon: getToolFieldIcon(field.labelKey, field.format),
+        label,
+        value: isBooleanTrue
+          ? t('chat.tools.booleanOn')
+          : isBooleanFalse
+          ? t('chat.tools.booleanOff')
+          : getToolInlineValueText(field.value),
+        tone: isBooleanTrue ? 'success' : isBooleanFalse ? 'muted' : 'default'
+      } as const
+    })
+    : []
+  const standaloneInlineFields = hasEditDiff ? [] : inlineFields
+  const summaryText = useMemo(() => getClaudeToolSummaryText(item.name, item.input, t), [item.input, item.name, t])
+  const rawTargetText = view.primary ?? (summaryText !== titleText ? summaryText : undefined)
+  const targetPresentation = getToolTargetPresentation(rawTargetText)
+  const errorMeta = resultItem?.is_error === true
+    ? (
+      <span className='claude-generic-tool__status is-error'>
+        <span className='material-symbols-rounded'>error</span>
+      </span>
+    )
+    : undefined
+
+  return (
+    <div className='tool-group tool-group--compact claude-generic-tool'>
+      <ToolCallBox
+        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 claude-generic-tool__content'>
+              <ClaudeToolInlineFields fields={standaloneInlineFields} t={t} />
+              {hasEditDiff && (
+                <div className='tool-detail-section claude-generic-tool__section'>
+                  <ClaudeEditDiff
+                    oldValue={editOldValue}
+                    newValue={editNewValue}
+                    lang={editLanguage}
+                    metaItems={editMetaItems}
+                  />
+                </div>
+              )}
+              {blockFields.map((field, index) => renderClaudeBlockField(field, index, t))}
+              {showResultDetails && 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} preferMarkdown={preferMarkdown} />
+                </div>
+              )}
+            </div>
+          )
+          : null}
+      />
+    </div>
+  )
+})

package/src/components/chat/tools/adapter-claude/claude-tool-edit-builders.ts

@@ -0,0 +1,102 @@
+import { asBoolean, asString, pushField } from './claude-tool-shared'
+import type { ClaudeToolField } from './claude-tool-shared'
+import { getFileInfo, getLanguageFromPath } from './utils'
+
+interface BuilderParams {
+  baseName: string
+  record: Record<string, unknown> | null
+  fields: ClaudeToolField[]
+  usedKeys: Set<string>
+}
+
+export function buildClaudeEditToolPresentation(params: BuilderParams) {
+  const { baseName, record, fields, usedKeys } = params
+
+  if (baseName === 'TodoWrite') {
+    const todos = Array.isArray(record?.todos)
+      ? record.todos.flatMap((todo) => {
+        if (todo == null || typeof todo !== 'object') {
+          return []
+        }
+        const data = todo as Record<string, unknown>
+        const content = asString(data.content)
+        const status = asString(data.status)
+        return content != null ? [`[${status ?? 'pending'}] ${content}`] : []
+      })
+      : undefined
+
+    pushField(fields, usedKeys, 'todos', {
+      labelKey: 'chat.tools.fields.todos',
+      fallbackLabel: 'Todos',
+      format: 'list',
+      value: todos
+    })
+    return { handled: true, primary: todos != null ? `${todos.length} todos` : undefined }
+  }
+
+  if (baseName === 'Edit') {
+    const filePath = asString(record?.file_path)
+    const primary = filePath != null ? getFileInfo(filePath).filePath : undefined
+    const language = getLanguageFromPath(primary ?? '')
+    const replaceAll = asBoolean(record?.replace_all)
+
+    pushField(fields, usedKeys, 'replace_all', {
+      labelKey: 'chat.tools.fields.replaceAll',
+      fallbackLabel: 'Replace All',
+      format: 'inline',
+      value: replaceAll != null ? String(replaceAll) : undefined
+    })
+    pushField(fields, usedKeys, 'old_string', {
+      labelKey: 'chat.tools.fields.oldString',
+      fallbackLabel: 'Old String',
+      format: 'code',
+      value: asString(record?.old_string),
+      lang: language
+    })
+    pushField(fields, usedKeys, 'new_string', {
+      labelKey: 'chat.tools.fields.newString',
+      fallbackLabel: 'New String',
+      format: 'code',
+      value: asString(record?.new_string),
+      lang: language
+    })
+    usedKeys.add('file_path')
+    return { handled: true, primary }
+  }
+
+  if (baseName !== 'NotebookEdit') {
+    return { handled: false }
+  }
+
+  const notebookPath = asString(record?.notebook_path)
+  const primary = notebookPath != null ? getFileInfo(notebookPath).filePath : undefined
+  const cellType = asString(record?.cell_type)
+
+  pushField(fields, usedKeys, 'cell_id', {
+    labelKey: 'chat.tools.fields.cellId',
+    fallbackLabel: 'Cell ID',
+    format: 'inline',
+    value: asString(record?.cell_id)
+  })
+  pushField(fields, usedKeys, 'cell_type', {
+    labelKey: 'chat.tools.fields.cellType',
+    fallbackLabel: 'Cell Type',
+    format: 'inline',
+    value: cellType
+  })
+  pushField(fields, usedKeys, 'edit_mode', {
+    labelKey: 'chat.tools.fields.editMode',
+    fallbackLabel: 'Edit Mode',
+    format: 'inline',
+    value: asString(record?.edit_mode)
+  })
+  pushField(fields, usedKeys, 'new_source', {
+    labelKey: 'chat.tools.fields.newSource',
+    fallbackLabel: 'New Source',
+    format: 'code',
+    value: asString(record?.new_source),
+    lang: cellType === 'markdown' ? 'markdown' : 'text'
+  })
+  usedKeys.add('notebook_path')
+  return { handled: true, primary }
+}