@vibe-forge/client 0.10.1 → 0.11.0

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

@@ -0,0 +1,168 @@
+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 '../core/tool-display'
+import type { ClaudeToolField, ClaudeToolQuestion } from './claude-tool-presentation'
+
+type Translate = (key: string, options?: Record<string, unknown>) => string
+
+const getFieldKey = (field: ClaudeToolField, 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 ClaudeToolInlineFields({
+  fields,
+  t
+}: {
+  fields: ClaudeToolField[]
+  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 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 === 'text') {
+    return (
+      <div className='tool-detail-section claude-generic-tool__section' key={getFieldKey(field, index)}>
+        {sectionHeader}
+        <div className='tool-detail-section__text'>{String(field.value)}</div>
+      </div>
+    )
+  }
+
+  if (field.format === 'code') {
+    return (
+      <div className='tool-detail-section claude-generic-tool__section' 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='tool-detail-section claude-generic-tool__section' key={getFieldKey(field, index)}>
+        {sectionHeader}
+        <div className='claude-generic-tool__list'>
+          {items.map(listItem => (
+            <div className='claude-generic-tool__list-item' key={listItem}>{listItem}</div>
+          ))}
+        </div>
+      </div>
+    )
+  }
+
+  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={getFieldKey(field, 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 (
+    <div className='tool-detail-section claude-generic-tool__section' key={getFieldKey(field, index)}>
+      {sectionHeader}
+      <CodeBlock
+        code={safeJsonStringify(field.value, 2)}
+        lang='json'
+        hideHeader={true}
+      />
+    </div>
+  )
+}

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
+  }
+}

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

@@ -0,0 +1,185 @@
+export type ClaudeToolFieldFormat = 'inline' | 'text' | 'code' | 'list' | 'json' | 'questions'
+
+export interface ClaudeToolQuestionOption {
+  label: string
+  description?: string
+}
+
+export interface ClaudeToolQuestion {
+  header?: string
+  question: string
+  options: ClaudeToolQuestionOption[]
+  multiSelect: boolean
+}
+
+export interface ClaudeToolField {
+  labelKey: string
+  fallbackLabel: string
+  format: ClaudeToolFieldFormat
+  value: unknown
+  lang?: string
+}
+
+export interface ClaudeToolPresentation {
+  baseName: string
+  titleKey: string
+  fallbackTitle: string
+  icon: string
+  primary?: string
+  fields: ClaudeToolField[]
+}
+
+export const CLAUDE_TOOL_META: Record<string, Pick<ClaudeToolPresentation, 'titleKey' | 'fallbackTitle' | 'icon'>> = {
+  AskUserQuestion: { titleKey: 'chat.tools.askUserQuestion', fallbackTitle: 'Ask User Question', icon: 'help' },
+  Bash: { titleKey: 'chat.tools.bash', fallbackTitle: 'Bash', icon: 'terminal' },
+  Edit: { titleKey: 'chat.tools.editTool', fallbackTitle: 'Edit File', icon: 'edit' },
+  EnterPlanMode: { titleKey: 'chat.tools.enterPlanMode', fallbackTitle: 'Enter Plan Mode', icon: 'rule_settings' },
+  ExitPlanMode: { titleKey: 'chat.tools.exitPlanMode', fallbackTitle: 'Exit Plan Mode', icon: 'exit_to_app' },
+  Glob: { titleKey: 'chat.tools.globTool', fallbackTitle: 'Glob', icon: 'search' },
+  Grep: { titleKey: 'chat.tools.grepTool', fallbackTitle: 'Grep', icon: 'find_in_page' },
+  LS: { titleKey: 'chat.tools.lsTool', fallbackTitle: 'List Directory', icon: 'folder_open' },
+  NotebookEdit: { titleKey: 'chat.tools.notebookEdit', fallbackTitle: 'Notebook Edit', icon: 'edit_note' },
+  Read: { titleKey: 'chat.tools.read', fallbackTitle: 'Read File', icon: 'visibility' },
+  Skill: { titleKey: 'chat.tools.skill', fallbackTitle: 'Skill', icon: 'auto_awesome' },
+  Task: { titleKey: 'chat.tools.claudeTask', fallbackTitle: 'Claude Task', icon: 'smart_toy' },
+  TaskCreate: { titleKey: 'chat.tools.taskCreate', fallbackTitle: 'Create Task', icon: 'add_task' },
+  TaskGet: { titleKey: 'chat.tools.taskGet', fallbackTitle: 'Get Task', icon: 'info' },
+  TaskList: { titleKey: 'chat.tools.taskList', fallbackTitle: 'List Tasks', icon: 'list_alt' },
+  TaskUpdate: { titleKey: 'chat.tools.taskUpdate', fallbackTitle: 'Update Task', icon: 'edit_calendar' },
+  TodoWrite: { titleKey: 'chat.tools.todo', fallbackTitle: 'Task Planning', icon: 'task_alt' },
+  WebFetch: { titleKey: 'chat.tools.webFetch', fallbackTitle: 'Web Fetch', icon: 'language' },
+  WebSearch: { titleKey: 'chat.tools.webSearch', fallbackTitle: 'Web Search', icon: 'travel_explore' },
+  Write: { titleKey: 'chat.tools.write', fallbackTitle: 'Write File', icon: 'edit_note' }
+}
+
+export const isRecord = (value: unknown): value is Record<string, unknown> => (
+  value != null && typeof value === 'object' && !Array.isArray(value)
+)
+
+export const asString = (value: unknown) => (
+  typeof value === 'string' && value.trim() !== '' ? value : undefined
+)
+
+export const asNumber = (value: unknown) => (
+  typeof value === 'number' && Number.isFinite(value) ? value : undefined
+)
+
+export const asBoolean = (value: unknown) => (
+  typeof value === 'boolean' ? value : undefined
+)
+
+export const asStringArray = (value: unknown) => {
+  if (!Array.isArray(value)) {
+    return undefined
+  }
+
+  const items = value
+    .filter(item => typeof item === 'string' && item.trim() !== '')
+    .map(item => item.trim())
+  return items.length > 0 ? items : undefined
+}
+
+export const pushField = (
+  fields: ClaudeToolField[],
+  usedKeys: Set<string>,
+  key: string,
+  field: Omit<ClaudeToolField, 'value'> & { value: unknown }
+) => {
+  const { value } = field
+  if (value == null || value === '') {
+    return
+  }
+  if (Array.isArray(value) && value.length === 0) {
+    return
+  }
+  if (isRecord(value) && Object.keys(value).length === 0) {
+    return
+  }
+
+  usedKeys.add(key)
+  fields.push(field)
+}
+
+export const toQuestionList = (value: unknown): ClaudeToolQuestion[] | undefined => {
+  if (!Array.isArray(value)) {
+    return undefined
+  }
+
+  const questions: ClaudeToolQuestion[] = []
+  for (const item of value) {
+    if (!isRecord(item)) {
+      continue
+    }
+
+    const question = asString(item.question)
+    if (question == null) {
+      continue
+    }
+
+    const options: ClaudeToolQuestionOption[] = []
+    if (Array.isArray(item.options)) {
+      for (const option of item.options) {
+        if (!isRecord(option)) {
+          continue
+        }
+
+        const label = asString(option.label)
+        if (label == null) {
+          continue
+        }
+
+        options.push({
+          label,
+          description: asString(option.description)
+        })
+      }
+    }
+
+    questions.push({
+      header: asString(item.header),
+      question,
+      options,
+      multiSelect: item.multiSelect === true
+    })
+  }
+
+  return questions.length > 0 ? questions : undefined
+}
+
+export const getDescriptionTitle = (value: string | undefined) => (
+  value != null && value !== '' ? value.split('\n')[0]?.trim() || value : undefined
+)
+
+export const addDetailsField = (
+  fields: ClaudeToolField[],
+  record: Record<string, unknown> | null,
+  usedKeys: Set<string>
+) => {
+  if (record == null) {
+    return
+  }
+
+  const details = Object.fromEntries(
+    Object.entries(record).filter(([key, value]) => {
+      if (usedKeys.has(key) || value == null) {
+        return false
+      }
+      if (typeof value === 'string') {
+        return value.trim() !== ''
+      }
+      if (Array.isArray(value)) {
+        return value.length > 0
+      }
+      return !isRecord(value) || Object.keys(value).length > 0
+    })
+  )
+
+  if (Object.keys(details).length > 0) {
+    fields.push({
+      labelKey: 'chat.tools.fields.details',
+      fallbackLabel: 'Details',
+      format: 'json',
+      value: details
+    })
+  }
+}

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

@@ -0,0 +1,76 @@
+import { buildClaudeToolPresentation, getClaudeToolBaseName } from './claude-tool-presentation'
+import { isRecord, toQuestionList } from './claude-tool-shared'
+import { getFileInfo } from './utils'
+
+type Translate = (key: string, options?: Record<string, unknown>) => string
+
+const getRecord = (input: unknown) => (isRecord(input) ? input : null)
+
+const joinSummary = (title: string, primary?: string) => (
+  primary != null && primary !== '' ? `${title} ${primary}` : title
+)
+
+export function getClaudeToolSummaryText(name: string, input: unknown, t: Translate) {
+  const baseName = getClaudeToolBaseName(name)
+  const record = getRecord(input)
+
+  if (baseName === 'Bash') {
+    const description = [record?.description, record?.reason, record?.thought]
+      .find(value => typeof value === 'string' && value.trim() !== '')
+    const command = typeof record?.command === 'string' ? record.command : ''
+    const commandLine = command.split('\n')[0]?.trim()
+    return typeof description === 'string' && description.trim() !== ''
+      ? description.trim()
+      : joinSummary(t('chat.tools.bash', { defaultValue: 'Bash' }), commandLine)
+  }
+
+  if (baseName === 'Read' || baseName === 'Write' || baseName === 'Edit') {
+    const pathValue = typeof record?.file_path === 'string' ? getFileInfo(record.file_path).filePath : undefined
+    const titleKey = baseName === 'Read'
+      ? 'chat.tools.read'
+      : baseName === 'Write'
+      ? 'chat.tools.write'
+      : 'chat.tools.editTool'
+    const fallback = baseName === 'Read' ? 'Read File' : baseName === 'Write' ? 'Write File' : 'Edit File'
+    return joinSummary(t(titleKey, { defaultValue: fallback }), pathValue)
+  }
+
+  if (baseName === 'NotebookEdit') {
+    const notebookPath = typeof record?.notebook_path === 'string'
+      ? getFileInfo(record.notebook_path).filePath
+      : undefined
+    return joinSummary(t('chat.tools.notebookEdit', { defaultValue: 'Notebook Edit' }), notebookPath)
+  }
+
+  if (baseName === 'LS') {
+    const pathValue = typeof record?.path === 'string' && record.path !== '' ? record.path : 'current directory'
+    return joinSummary(t('chat.tools.lsTool', { defaultValue: 'List Directory' }), pathValue)
+  }
+
+  if (baseName === 'Glob') {
+    const pattern = typeof record?.pattern === 'string' && record.pattern !== '' ? record.pattern : '*'
+    return joinSummary(t('chat.tools.globTool', { defaultValue: 'Glob' }), pattern)
+  }
+
+  if (baseName === 'Grep') {
+    const pattern = typeof record?.pattern === 'string' ? record.pattern : undefined
+    return joinSummary(t('chat.tools.grepTool', { defaultValue: 'Grep' }), pattern)
+  }
+
+  if (baseName === 'TodoWrite') {
+    const count = Array.isArray(record?.todos) ? record.todos.length : 0
+    return joinSummary(t('chat.tools.todo', { defaultValue: 'Task Planning' }), count > 0 ? `${count}` : undefined)
+  }
+
+  if (baseName === 'AskUserQuestion') {
+    const firstQuestion = toQuestionList(record?.questions)?.[0]
+    return joinSummary(
+      t('chat.tools.askUserQuestion', { defaultValue: 'Ask User Question' }),
+      firstQuestion?.header ?? firstQuestion?.question
+    )
+  }
+
+  const presentation = buildClaudeToolPresentation(name, input)
+  const title = t(presentation.titleKey, { defaultValue: presentation.fallbackTitle })
+  return joinSummary(title, presentation.primary)
+}