@vibe-forge/client 3.0.0-alpha.6 → 3.0.0-alpha.7

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

@@ -1,119 +0,0 @@
-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/GlobTool.scss

@@ -1,9 +0,0 @@
-.glob-tool {
-  .file-list-container {
-    border-radius: 0;
-    border-left: none;
-    border-right: none;
-    border-bottom: none;
-    border: none;
-  }
-}

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

@@ -1,65 +0,0 @@
-import './GlobTool.scss'
-import { safeJsonStringify } from '#~/utils/safe-serialize'
-import type { ToolInputs } from '@vibe-forge/core'
-import React, { useMemo } from 'react'
-import { ToolCallBox } from '../core/ToolCallBox'
-import { defineToolRender } from '../defineToolRender'
-import { FileList } from './components/FileList'
-import { normalizeResultLines } from './utils'
-
-export const GlobTool = defineToolRender(({ item, resultItem }) => {
-  const input = (item.input != null ? item.input : {}) as ToolInputs['adapter:claude-code:Glob']
-  const pattern = (input.pattern != null && input.pattern !== '') ? input.pattern : '*'
-  const path = input.path
-
-  const fileCount = useMemo(() => {
-    if (!resultItem) return null
-    const lines = normalizeResultLines(resultItem.content)
-    const count = lines.filter(line => line.trim() !== '').length
-    return count
-  }, [resultItem])
-
-  return (
-    <div className='tool-group glob-tool'>
-      <ToolCallBox
-        header={
-          <div className='tool-header-content'>
-            <span className='material-symbols-rounded tool-header-icon'>search</span>
-            <span className='tool-header-title'>Glob</span>
-            <span className='tool-header-secondary'>{pattern}</span>
-            {fileCount !== null && (
-              <span className='tool-header-chip'>{fileCount} files</span>
-            )}
-          </div>
-        }
-        content={
-          <div className='tool-content'>
-            {path && (
-              <div className='tool-input-grid'>
-                <div className='tool-input-item'>
-                  <span className='tool-input-label'>Path</span>
-                  <span className='tool-input-value'>{path}</span>
-                </div>
-              </div>
-            )}
-            {resultItem
-              ? (
-                <div className='result-content'>
-                  <FileList
-                    content={typeof resultItem.content === 'string'
-                      ? resultItem.content
-                      : safeJsonStringify(resultItem.content)}
-                  />
-                </div>
-              )
-              : (
-                <div className='tool-placeholder'>
-                  Searching...
-                </div>
-              )}
-          </div>
-        }
-      />
-    </div>
-  )
-})

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

@@ -1,9 +0,0 @@
-.grep-tool {
-  .file-list-container {
-    border-radius: 0;
-    border-left: none;
-    border-right: none;
-    border-bottom: none;
-    border: none;
-  }
-}

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

@@ -1,95 +0,0 @@
-import './GrepTool.scss'
-import { CodeBlock } from '#~/components/CodeBlock'
-import { safeJsonStringify } from '#~/utils/safe-serialize'
-import React, { useMemo } from 'react'
-import { ToolCallBox } from '../core/ToolCallBox'
-import { defineToolRender } from '../defineToolRender'
-import { FileList } from './components/FileList'
-import { normalizeResultLines } from './utils'
-
-export const GrepTool = defineToolRender(({ item, resultItem }) => {
-  const input = (item.input != null ? item.input : {}) as {
-    pattern?: string
-    path?: string
-    output_mode?: string
-    glob?: string
-  }
-  const pattern = (input.pattern != null && input.pattern !== '') ? input.pattern : ''
-  const path = input.path
-  const outputMode = input.output_mode || 'files_with_matches'
-  const fileGlob = input.glob
-
-  const fileCount = useMemo(() => {
-    if (!resultItem) return null
-    const lines = normalizeResultLines(resultItem.content)
-    const count = lines.filter(line => line.trim() !== '').length
-    return count
-  }, [resultItem])
-
-  return (
-    <div className='tool-group grep-tool'>
-      <ToolCallBox
-        header={
-          <div className='tool-header-content'>
-            <span className='material-symbols-rounded tool-header-icon'>find_in_page</span>
-            <span className='tool-header-title'>Grep</span>
-            <span className='tool-header-secondary'>{pattern}</span>
-            {fileCount !== null && (
-              <span className='tool-header-chip'>{fileCount} matches</span>
-            )}
-          </div>
-        }
-        content={
-          <div className='tool-content'>
-            {(path || fileGlob || outputMode) && (
-              <div className='tool-input-grid'>
-                {path && (
-                  <div className='tool-input-item'>
-                    <span className='tool-input-label'>Path</span>
-                    <span className='tool-input-value'>{path}</span>
-                  </div>
-                )}
-                {fileGlob && (
-                  <div className='tool-input-item'>
-                    <span className='tool-input-label'>Glob</span>
-                    <span className='tool-input-value'>{fileGlob}</span>
-                  </div>
-                )}
-                <div className='tool-input-item'>
-                  <span className='tool-input-label'>Mode</span>
-                  <span className='tool-input-value'>{outputMode}</span>
-                </div>
-              </div>
-            )}
-            {resultItem
-              ? (
-                <div className='result-content'>
-                  {outputMode === 'files_with_matches'
-                    ? (
-                      <FileList
-                        content={typeof resultItem.content === 'string'
-                          ? resultItem.content
-                          : safeJsonStringify(resultItem.content)}
-                      />
-                    )
-                    : (
-                      <CodeBlock
-                        code={typeof resultItem.content === 'string'
-                          ? resultItem.content
-                          : safeJsonStringify(resultItem.content, 2)}
-                        lang='text'
-                      />
-                    )}
-                </div>
-              )
-              : (
-                <div className='tool-placeholder'>
-                  Searching...
-                </div>
-              )}
-          </div>
-        }
-      />
-    </div>
-  )
-})

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

@@ -1,6 +0,0 @@
-.ls-tool {
-  .file-list-container {
-    border-radius: 0;
-    border: none;
-  }
-}

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

@@ -1,94 +0,0 @@
-import './LsTool.scss'
-import { CodeBlock } from '#~/components/CodeBlock'
-import { safeJsonStringify } from '#~/utils/safe-serialize'
-import type { ToolInputs } from '@vibe-forge/core'
-import React, { useMemo } from 'react'
-import { ToolCallBox } from '../core/ToolCallBox'
-import { defineToolRender } from '../defineToolRender'
-import { FileList } from './components/FileList'
-
-export const LsTool = defineToolRender(({ item, resultItem }) => {
-  const input = (item.input != null ? item.input : {}) as ToolInputs['adapter:claude-code:LS']
-  const path = (input.path != null && input.path !== '') ? input.path : 'current directory'
-  const ignore = input.ignore
-
-  const shouldShowList = (content: any) => {
-    if (typeof content !== 'string') return false
-    const lines = content.split('\n').filter(l => l.trim())
-    if (lines.length > 0 && lines[0].includes('drwxr')) return false
-    return true
-  }
-
-  const processContent = (content: string) => {
-    const lines = content.split('\n').filter(line => line.trim() !== '')
-    if (lines.length > 0) {
-      lines.pop()
-    }
-    return lines
-  }
-
-  const fileCount = useMemo(() => {
-    if (!resultItem) return null
-    if (typeof resultItem.content !== 'string') return null
-    if (!shouldShowList(resultItem.content)) return null
-
-    const lines = processContent(resultItem.content)
-    return lines.length
-  }, [resultItem])
-
-  return (
-    <div className='tool-group ls-tool'>
-      <ToolCallBox
-        header={
-          <div className='tool-header-content'>
-            <span className='material-symbols-rounded tool-header-icon'>folder_open</span>
-            <span className='tool-header-title'>LS</span>
-            <span className='tool-header-secondary'>{path}</span>
-            {fileCount !== null && (
-              <span className='tool-header-chip'>{fileCount} files</span>
-            )}
-          </div>
-        }
-        content={
-          <div className='tool-content'>
-            {ignore && ignore.length > 0 && (
-              <div className='tool-input-grid'>
-                <div className='tool-input-item'>
-                  <span className='tool-input-label'>Ignore</span>
-                  <span className='tool-input-value'>{JSON.stringify(ignore)}</span>
-                </div>
-              </div>
-            )}
-
-            {resultItem
-              ? (
-                <div className='result-content'>
-                  {shouldShowList(resultItem.content)
-                    ? (
-                      <FileList
-                        content={processContent(resultItem.content as string)}
-                        removeRoot={true}
-                        defaultCollapsed={true}
-                      />
-                    )
-                    : (
-                      <CodeBlock
-                        code={typeof resultItem.content === 'string'
-                          ? resultItem.content
-                          : safeJsonStringify(resultItem.content, 2)}
-                        lang='text'
-                      />
-                    )}
-                </div>
-              )
-              : (
-                <div className='tool-placeholder'>
-                  Listing files...
-                </div>
-              )}
-          </div>
-        }
-      />
-    </div>
-  )
-})

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

@@ -1 +0,0 @@
-.read-tool {}

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

@@ -1,65 +0,0 @@
-import './ReadTool.scss'
-import { CodeBlock } from '#~/components/CodeBlock'
-import { safeJsonStringify } from '#~/utils/safe-serialize'
-import type { ToolInputs } from '@vibe-forge/core'
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import { ToolCallBox } from '../core/ToolCallBox'
-import { defineToolRender } from '../defineToolRender'
-import { getFileInfo, getLanguageFromPath } from './utils'
-
-export const ReadTool = defineToolRender(({ item, resultItem }) => {
-  const { t } = useTranslation()
-  const input = (item.input != null ? item.input : {}) as ToolInputs['adapter:claude-code:Read']
-  const { filePath } = getFileInfo(input.file_path)
-  const language = getLanguageFromPath(filePath)
-  const offset = input.offset
-  const limit = input.limit
-
-  const cleanContent = (content: any): string => {
-    if (typeof content !== 'string') return safeJsonStringify(content, 2)
-
-    return content.split('\n')
-      .filter(line => /^\s*\d+→/.test(line))
-      .map(line => line.replace(/^\s*\d+→/, ''))
-      .join('\n')
-  }
-
-  return (
-    <div className='tool-group read-tool'>
-      <ToolCallBox
-        header={
-          <div className='tool-header-content'>
-            <span className='material-symbols-rounded tool-header-icon'>visibility</span>
-            <span className='tool-header-primary tool-header-mono tool-header-row-text'>{filePath}</span>
-            {(typeof offset === 'number' && Number.isFinite(offset)) && (
-              <span className='tool-header-chip'>{t('chat.tools.offset')}:{offset}</span>
-            )}
-            {(typeof limit === 'number' && Number.isFinite(limit)) && (
-              <span className='tool-header-chip'>{t('chat.tools.limit')}:{limit}</span>
-            )}
-          </div>
-        }
-        content={
-          <div className='tool-content'>
-            {resultItem
-              ? (
-                <div className='result-content'>
-                  <CodeBlock
-                    code={cleanContent(resultItem.content)}
-                    lang={language}
-                    hideHeader={true}
-                  />
-                </div>
-              )
-              : (
-                <div className='tool-placeholder'>
-                  {t('chat.tools.reading')}
-                </div>
-              )}
-          </div>
-        }
-      />
-    </div>
-  )
-})

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

@@ -1,63 +0,0 @@
-.todo-tool {
-  .todo-item {
-    display: flex;
-    align-items: flex-start;
-    gap: 8px;
-    margin-bottom: 2px;
-    padding: 6px 4px;
-    border-radius: 0;
-    transition: background-color .2s;
-
-    &:hover {
-      background-color: var(--bg-color-hover);
-    }
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-
-    &.completed {
-      opacity: .6;
-
-      .todo-text {
-        text-decoration: line-through;
-      }
-
-      .status-icon {
-        color: var(--success-color);
-      }
-    }
-
-    &.in_progress {
-      .status-icon {
-        color: var(--primary-color);
-      }
-    }
-
-    &.pending {
-      .status-icon {
-        color: var(--sub-text-color);
-      }
-    }
-
-    .status-icon {
-      font-size: 16px;
-    }
-
-    .todo-info {
-      display: flex;
-      flex-direction: column;
-    }
-
-    .todo-text {
-      font-size: 13px;
-      color: var(--text-color);
-    }
-
-    .active-form {
-      font-size: 11px;
-      color: var(--sub-text-color);
-      font-style: italic;
-    }
-  }
-}

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

@@ -1,73 +0,0 @@
-import './TodoTool.scss'
-import type { ToolInputs } from '@vibe-forge/core'
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-
-import { ToolCallBox } from '../core/ToolCallBox'
-import { defineToolRender } from '../defineToolRender'
-
-type TodoItem = ToolInputs['adapter:claude-code:TodoWrite']['todos'][number]
-
-export const TodoTool = defineToolRender(({ item }) => {
-  const { t } = useTranslation()
-  const input = (item.input != null ? item.input : {}) as Partial<ToolInputs['adapter:claude-code:TodoWrite']>
-  const todos = (input.todos ?? []) as TodoItem[]
-  const totalCount = todos.length
-  const completedCount = todos.filter(todo => todo.status === 'completed').length
-  const inProgressCount = todos.filter(todo => todo.status === 'in_progress').length
-  const pendingCount = totalCount - completedCount - inProgressCount
-
-  return (
-    <div className='tool-group todo-tool'>
-      <ToolCallBox
-        defaultExpanded={true}
-        header={
-          <div className='tool-header-content'>
-            <span className='material-symbols-rounded tool-header-icon'>task_alt</span>
-            <span className='tool-header-title'>{t('chat.tools.todo')}</span>
-            {totalCount > 0 && (
-              <span className='tool-header-chip'>{totalCount} total</span>
-            )}
-            {inProgressCount > 0 && (
-              <span className='tool-header-chip'>{inProgressCount} doing</span>
-            )}
-            {pendingCount > 0 && (
-              <span className='tool-header-chip'>{pendingCount} todo</span>
-            )}
-            {completedCount > 0 && (
-              <span className='tool-header-chip'>{completedCount} done</span>
-            )}
-          </div>
-        }
-        content={
-          <div className='tool-content'>
-            {todos.map((todo, idx) => (
-              <div
-                key={idx}
-                className={`todo-item ${todo.status}`}
-              >
-                <span className='material-symbols-rounded status-icon'>
-                  {todo.status === 'completed'
-                    ? 'check_circle'
-                    : todo.status === 'in_progress'
-                    ? 'clock_loader_40'
-                    : 'radio_button_unchecked'}
-                </span>
-                <div className='todo-info'>
-                  <span className='todo-text'>
-                    {todo.content}
-                  </span>
-                  {(todo.activeForm != null && todo.activeForm !== '') && todo.status === 'in_progress' && (
-                    <span className='active-form'>
-                      {todo.activeForm}
-                    </span>
-                  )}
-                </div>
-              </div>
-            ))}
-          </div>
-        }
-      />
-    </div>
-  )
-})

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

@@ -1,44 +0,0 @@
-.write-tool {
-  .write-tool__header {
-    width: 100%;
-    min-width: 0;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 8px;
-  }
-
-  .write-tool__header-left {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    min-width: 0;
-    flex: 1;
-  }
-
-  .write-tool__status-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 16px;
-    height: 16px;
-    flex-shrink: 0;
-
-    .material-symbols-rounded {
-      font-size: 16px;
-    }
-
-    &.error {
-      color: var(--danger-color);
-    }
-
-    &.success {
-      color: var(--success-color);
-    }
-  }
-
-  .tool-content {
-    display: flex;
-    flex-direction: column;
-  }
-}