@vibe-forge/client 0.10.1 → 0.11.1

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,119 @@
+import './GenericClaudeTool.scss'
+
+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 { getToolFieldIcon, getToolInlineValueText, 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'>
+                  <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,109 @@
+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)
+        const activeForm = asString(data.activeForm)
+        if (content == null) {
+          return []
+        }
+        const detail = status === 'in_progress' && activeForm != null && activeForm !== content
+          ? ` (${activeForm})`
+          : ''
+        return [`[${status ?? 'pending'}] ${content}${detail}`]
+      })
+      : 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 }
+}

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

@@ -0,0 +1,83 @@
+import { Tooltip } from 'antd'
+import React from 'react'
+
+import { TOOL_TOOLTIP_PROPS, getToolFieldIcon } from '../core/tool-display'
+import { renderToolBlockField } from '../core/tool-field-sections'
+import type { ClaudeToolField, ClaudeToolQuestion } from './claude-tool-presentation'
+
+type Translate = (key: string, options?: Record<string, unknown>) => string
+
+export { ToolInlineFields as ClaudeToolInlineFields } from '../core/tool-field-sections'
+
+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 renderClaudeBlockField(field: ClaudeToolField, index: number, t: Translate) {
+  const label = t(field.labelKey, { defaultValue: field.fallbackLabel })
+  const sectionHeader = getSectionHeader(getToolFieldIcon(field.labelKey, field.format), label)
+
+  if (field.format === 'questions') {
+    const questions = Array.isArray(field.value) ? field.value as ClaudeToolQuestion[] : []
+    return (
+      <div
+        className='tool-detail-section claude-generic-tool__section'
+        key={`${field.labelKey}-${index}`}
+      >
+        {sectionHeader}
+        <div className='claude-generic-tool__questions'>
+          {questions.map((question, questionIndex) => (
+            <div
+              className='claude-generic-tool__question'
+              key={`${question.header ?? question.question}-${questionIndex}`}
+            >
+              <div className='claude-generic-tool__question-header'>
+                <div className='claude-generic-tool__question-title'>
+                  {question.header ?? `${label} ${questionIndex + 1}`}
+                </div>
+                <Tooltip
+                  title={question.multiSelect
+                    ? t('chat.tools.multiSelect')
+                    : t('chat.tools.singleSelect')}
+                  {...TOOL_TOOLTIP_PROPS}
+                >
+                  <span className='claude-generic-tool__question-mode material-symbols-rounded'>
+                    {question.multiSelect ? 'checklist' : 'radio_button_checked'}
+                  </span>
+                </Tooltip>
+              </div>
+              <div
+                className='tool-detail-section__text'
+                title={question.question}
+              >
+                {question.question}
+              </div>
+              {question.options.length > 0 && (
+                <div className='claude-generic-tool__question-options'>
+                  {question.options.map(option => (
+                    <div className='claude-generic-tool__question-option' key={option.label}>
+                      <div className='claude-generic-tool__question-option-label'>{option.label}</div>
+                      {option.description != null && option.description !== '' && (
+                        <div className='claude-generic-tool__question-option-description'>
+                          {option.description}
+                        </div>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    )
+  }
+
+  return renderToolBlockField(field, index, t, {
+    sectionClassName: 'tool-detail-section claude-generic-tool__section'
+  })
+}

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

@@ -0,0 +1,135 @@
+import { asBoolean, asNumber, asString, asStringArray, 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 buildClaudeOperationToolPresentation(params: BuilderParams) {
+  const { baseName, record, fields, usedKeys } = params
+
+  if (baseName === 'Bash') {
+    const command = asString(record?.command)
+    const description = asString(record?.description) ?? asString(record?.reason) ?? asString(record?.thought)
+
+    pushField(fields, usedKeys, 'description', {
+      labelKey: 'chat.tools.fields.description',
+      fallbackLabel: 'Description',
+      format: 'text',
+      value: description
+    })
+    pushField(fields, usedKeys, 'command', {
+      labelKey: 'chat.tools.fields.command',
+      fallbackLabel: 'Command',
+      format: 'code',
+      value: command,
+      lang: 'bash'
+    })
+    pushField(fields, usedKeys, 'timeout', {
+      labelKey: 'chat.tools.fields.timeout',
+      fallbackLabel: 'Timeout',
+      format: 'inline',
+      value: asNumber(record?.timeout)
+    })
+    pushField(fields, usedKeys, 'run_in_background', {
+      labelKey: 'chat.tools.fields.runInBackground',
+      fallbackLabel: 'Run In Background',
+      format: 'inline',
+      value: asBoolean(record?.run_in_background) != null ? String(record?.run_in_background) : undefined
+    })
+    pushField(fields, usedKeys, 'dangerouslyDisableSandbox', {
+      labelKey: 'chat.tools.fields.disableSandbox',
+      fallbackLabel: 'Disable Sandbox',
+      format: 'inline',
+      value: asBoolean(record?.dangerouslyDisableSandbox) != null
+        ? String(record?.dangerouslyDisableSandbox)
+        : undefined
+    })
+    return { handled: true, primary: description ?? command?.split('\n')[0] }
+  }
+
+  if (baseName === 'Read') {
+    const filePath = asString(record?.file_path)
+    const primary = filePath != null ? getFileInfo(filePath).filePath : undefined
+
+    pushField(fields, usedKeys, 'offset', {
+      labelKey: 'chat.tools.fields.offset',
+      fallbackLabel: 'Offset',
+      format: 'inline',
+      value: asNumber(record?.offset)
+    })
+    pushField(fields, usedKeys, 'limit', {
+      labelKey: 'chat.tools.fields.limit',
+      fallbackLabel: 'Limit',
+      format: 'inline',
+      value: asNumber(record?.limit)
+    })
+    usedKeys.add('file_path')
+    return { handled: true, primary }
+  }
+
+  if (baseName === 'Write') {
+    const filePath = asString(record?.file_path)
+    const primary = filePath != null ? getFileInfo(filePath).filePath : undefined
+    const language = getLanguageFromPath(primary ?? '')
+
+    pushField(fields, usedKeys, 'content', {
+      labelKey: 'chat.tools.fields.content',
+      fallbackLabel: 'Content',
+      format: 'code',
+      value: asString(record?.content),
+      lang: language
+    })
+    usedKeys.add('file_path')
+    return { handled: true, primary }
+  }
+
+  if (baseName === 'LS') {
+    pushField(fields, usedKeys, 'ignore', {
+      labelKey: 'chat.tools.fields.ignore',
+      fallbackLabel: 'Ignore',
+      format: 'list',
+      value: asStringArray(record?.ignore)
+    })
+    return { handled: true, primary: asString(record?.path) ?? 'current directory' }
+  }
+
+  if (baseName === 'Glob') {
+    pushField(fields, usedKeys, 'path', {
+      labelKey: 'chat.tools.fields.path',
+      fallbackLabel: 'Path',
+      format: 'text',
+      value: asString(record?.path)
+    })
+    usedKeys.add('pattern')
+    return { handled: true, primary: asString(record?.pattern) ?? '*' }
+  }
+
+  if (baseName === 'Grep') {
+    pushField(fields, usedKeys, 'path', {
+      labelKey: 'chat.tools.fields.path',
+      fallbackLabel: 'Path',
+      format: 'text',
+      value: asString(record?.path)
+    })
+    pushField(fields, usedKeys, 'glob', {
+      labelKey: 'chat.tools.fields.glob',
+      fallbackLabel: 'Glob',
+      format: 'text',
+      value: asString(record?.glob)
+    })
+    pushField(fields, usedKeys, 'output_mode', {
+      labelKey: 'chat.tools.fields.mode',
+      fallbackLabel: 'Mode',
+      format: 'inline',
+      value: asString(record?.output_mode)
+    })
+    usedKeys.add('pattern')
+    return { handled: true, primary: asString(record?.pattern) }
+  }
+  return { handled: false }
+}

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

@@ -0,0 +1,61 @@
+import { buildClaudeEditToolPresentation } from './claude-tool-edit-builders'
+import { buildClaudeOperationToolPresentation } from './claude-tool-operation-builders'
+import { CLAUDE_TOOL_META, addDetailsField, isRecord } from './claude-tool-shared'
+import type {
+  ClaudeToolField,
+  ClaudeToolPresentation,
+  ClaudeToolQuestion,
+  ClaudeToolQuestionOption
+} from './claude-tool-shared'
+import { buildClaudeSystemToolPresentation } from './claude-tool-system-builders'
+import { buildClaudeTaskToolPresentation } from './claude-tool-task-builders'
+
+export type { ClaudeToolField, ClaudeToolPresentation, ClaudeToolQuestion, ClaudeToolQuestionOption }
+
+export const getClaudeToolBaseName = (name: string) => (
+  name.startsWith('adapter:claude-code:') ? name.slice('adapter:claude-code:'.length) : name
+)
+
+export const isClaudeToolName = (name: string) => (
+  name.startsWith('adapter:claude-code:') || name in CLAUDE_TOOL_META
+)
+
+export function buildClaudeToolPresentation(name: string, input: unknown): ClaudeToolPresentation {
+  const baseName = getClaudeToolBaseName(name)
+  const meta = CLAUDE_TOOL_META[baseName] ?? {
+    titleKey: 'chat.tools.unknown',
+    fallbackTitle: baseName,
+    icon: 'build'
+  }
+  const record = isRecord(input) ? input : null
+  const fields: ClaudeToolField[] = []
+  const usedKeys = new Set<string>()
+  const editResult = buildClaudeEditToolPresentation({ baseName, record, fields, usedKeys })
+  const operationResult = editResult.handled
+    ? { handled: false as const, primary: undefined as string | undefined }
+    : buildClaudeOperationToolPresentation({ baseName, record, fields, usedKeys })
+  const systemResult = editResult.handled || operationResult.handled
+    ? { handled: false as const, primary: undefined as string | undefined }
+    : buildClaudeSystemToolPresentation({ baseName, record, fields, usedKeys })
+  const taskResult = editResult.handled || operationResult.handled || systemResult.handled
+    ? { handled: false as const, primary: undefined as string | undefined }
+    : buildClaudeTaskToolPresentation({ baseName, record, fields, usedKeys })
+  const primary = editResult.handled
+    ? editResult.primary
+    : operationResult.handled
+    ? operationResult.primary
+    : systemResult.handled
+    ? systemResult.primary
+    : taskResult.primary
+
+  addDetailsField(fields, record, usedKeys)
+
+  return {
+    baseName,
+    titleKey: meta.titleKey,
+    fallbackTitle: meta.fallbackTitle,
+    icon: meta.icon,
+    primary,
+    fields
+  }
+}