@vibe-forge/client 0.3.0 → 0.4.0

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

@@ -1,42 +1,20 @@
-import React, { useMemo } from 'react'
 import './GlobTool.scss'
-import { useTranslation } from 'react-i18next'
-
+import React, { useMemo } from 'react'
+import type { ToolInputs } from '@vibe-forge/core'
+import { ToolCallBox } from '../core/ToolCallBox'
+import { safeJsonStringify } from '#~/utils/safe-serialize'
 import { defineToolRender } from '../defineToolRender'
-import { ToolCallBox } from '../../ToolCallBox'
-import { safeJsonStringify } from '../../safeSerialize'
 import { FileList } from './components/FileList'
+import { normalizeResultLines } from './utils'
 
 export const GlobTool = defineToolRender(({ item, resultItem }) => {
-  const { t } = useTranslation()
-  const input = (item.input != null ? item.input : {}) as { pattern?: string; path?: string }
+  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 content = resultItem.content
-    let lines: string[] = []
-
-    if (typeof content === 'string') {
-      if (content.trim().startsWith('[') && content.trim().endsWith(']')) {
-        try {
-          const parsed = JSON.parse(content)
-          if (Array.isArray(parsed)) {
-            lines = parsed.map(String)
-          } else {
-            lines = content.split('\n')
-          }
-        } catch (e) {
-          lines = content.split('\n')
-        }
-      } else {
-        lines = content.split('\n')
-      }
-    } else if (Array.isArray(content)) {
-      lines = content.map(String)
-    }
-
+    const lines = normalizeResultLines(resultItem.content)
     const count = lines.filter(line => line.trim() !== '').length
     return count
   }, [resultItem])
@@ -46,20 +24,22 @@ export const GlobTool = defineToolRender(({ item, resultItem }) => {
       <ToolCallBox
         header={
           <div className='tool-header-content'>
-            <span className='material-symbols-rounded'>search</span>
-            <span className='command-name'>Glob</span>
-            <span className='pattern'>{pattern}</span>
+            <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='file-count'>({fileCount} files)</span>
+              <span className='tool-header-chip'>{fileCount} files</span>
             )}
           </div>
         }
         content={
           <div className='tool-content'>
             {path && (
-              <div className='input-details'>
-                <span className='label'>Path:</span>
-                <span className='value'>{path}</span>
+              <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

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

@@ -1,91 +1,4 @@
 .grep-tool {
-  .tool-header-content {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-
-    .material-symbols-rounded {
-      font-size: 18px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: var(--sub-text-color);
-      height: 20px;
-      width: 18px;
-      margin-right: 8px;
-      position: relative;
-      top: 1px;
-    }
-
-    .command-name {
-      font-size: 13px;
-      font-weight: 500;
-      color: var(--text-color);
-      white-space: nowrap;
-      line-height: 20px;
-      display: flex;
-      align-items: center;
-      margin-right: 8px;
-    }
-
-    .pattern {
-      font-size: 12px;
-      color: var(--sub-text-color);
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      display: flex;
-      align-items: center;
-      min-width: 0;
-      flex: 1;
-      line-height: 20px;
-    }
-
-    .file-count {
-      font-size: 12px;
-      color: var(--sub-text-color);
-      white-space: nowrap;
-      margin-left: 8px;
-      flex-shrink: 0;
-    }
-  }
-
-  .input-details-grid {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 12px;
-    padding: 8px 12px;
-    border-bottom: 1px solid var(--border-color);
-
-    .input-detail-item {
-      display: flex;
-      align-items: center;
-      font-size: 12px;
-      color: var(--sub-text-color);
-
-      .label {
-        font-weight: 500;
-        margin-right: 6px;
-      }
-
-      .value {
-        font-family: var(--font-mono);
-        background: var(--bg-color-hover);
-        padding: 2px 4px;
-        border-radius: 4px;
-      }
-    }
-  }
-
-  .tool-placeholder {
-    padding: 8px 12px;
-    color: var(--sub-text-color);
-    font-size: 12px;
-    font-style: italic;
-  }
-
   .file-list-container {
     border-radius: 0;
     border-left: none;

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

@@ -1,15 +1,13 @@
-import React, { useMemo } from 'react'
 import './GrepTool.scss'
-import { useTranslation } from 'react-i18next'
-
+import React, { useMemo } from 'react'
+import { CodeBlock } from '#~/components/CodeBlock'
+import { ToolCallBox } from '../core/ToolCallBox'
+import { safeJsonStringify } from '#~/utils/safe-serialize'
 import { defineToolRender } from '../defineToolRender'
-import { CodeBlock } from '../../CodeBlock'
-import { ToolCallBox } from '../../ToolCallBox'
-import { safeJsonStringify } from '../../safeSerialize'
 import { FileList } from './components/FileList'
+import { normalizeResultLines } from './utils'
 
 export const GrepTool = defineToolRender(({ item, resultItem }) => {
-  const { t } = useTranslation()
   const input = (item.input != null ? item.input : {}) as {
     pattern?: string
     path?: string
@@ -23,28 +21,7 @@ export const GrepTool = defineToolRender(({ item, resultItem }) => {
 
   const fileCount = useMemo(() => {
     if (!resultItem) return null
-    const content = resultItem.content
-    let lines: string[] = []
-
-    if (typeof content === 'string') {
-      if (content.trim().startsWith('[') && content.trim().endsWith(']')) {
-        try {
-          const parsed = JSON.parse(content)
-          if (Array.isArray(parsed)) {
-            lines = parsed.map(String)
-          } else {
-            lines = content.split('\n')
-          }
-        } catch (e) {
-          lines = content.split('\n')
-        }
-      } else {
-        lines = content.split('\n')
-      }
-    } else if (Array.isArray(content)) {
-      lines = content.map(String)
-    }
-
+    const lines = normalizeResultLines(resultItem.content)
     const count = lines.filter(line => line.trim() !== '').length
     return count
   }, [resultItem])
@@ -54,30 +31,34 @@ export const GrepTool = defineToolRender(({ item, resultItem }) => {
       <ToolCallBox
         header={
           <div className='tool-header-content'>
-            <span className='material-symbols-rounded'>find_in_page</span>
-            <span className='command-name'>Grep</span>
-            <span className='pattern'>{pattern}</span>
+            <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='file-count'>({fileCount} matches)</span>
+              <span className='tool-header-chip'>{fileCount} matches</span>
             )}
           </div>
         }
         content={
           <div className='tool-content'>
-            {(path || fileGlob) && (
-              <div className='input-details-grid'>
+            {(path || fileGlob || outputMode) && (
+              <div className='tool-input-grid'>
                 {path && (
-                  <div className='input-detail-item'>
-                    <span className='label'>Path:</span>
-                    <span className='value'>{path}</span>
+                  <div className='tool-input-item'>
+                    <span className='tool-input-label'>Path</span>
+                    <span className='tool-input-value'>{path}</span>
                   </div>
                 )}
                 {fileGlob && (
-                  <div className='input-detail-item'>
-                    <span className='label'>Glob:</span>
-                    <span className='value'>{fileGlob}</span>
+                  <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

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

@@ -1,83 +1,4 @@
 .ls-tool {
-  .tool-header-content {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-
-    .material-symbols-rounded {
-      font-size: 18px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: var(--sub-text-color);
-      height: 20px;
-      width: 18px;
-      margin-right: 8px;
-      position: relative;
-      top: 1px;
-    }
-
-    .command-name {
-      font-size: 13px;
-      font-weight: 500;
-      color: var(--text-color);
-      white-space: nowrap;
-      line-height: 20px;
-      display: flex;
-      align-items: center;
-      margin-right: 8px;
-    }
-
-    .path {
-      font-size: 12px;
-      color: var(--sub-text-color);
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      display: flex;
-      align-items: center;
-      min-width: 0;
-      flex: 1;
-      line-height: 20px;
-    }
-
-    .file-count {
-      font-size: 12px;
-      color: var(--sub-text-color);
-      white-space: nowrap;
-      margin-left: 8px;
-      flex-shrink: 0;
-    }
-  }
-
-  .input-details {
-    padding: 8px 12px;
-    font-size: 12px;
-    color: var(--sub-text-color);
-    border-bottom: 1px solid var(--border-color);
-
-    .label {
-      font-weight: 500;
-      margin-right: 8px;
-    }
-
-    code {
-      font-family: var(--font-mono);
-      background: var(--bg-color-hover);
-      padding: 2px 4px;
-      border-radius: 4px;
-    }
-  }
-
-  .tool-placeholder {
-    padding: 8px 12px;
-    color: var(--sub-text-color);
-    font-size: 12px;
-    font-style: italic;
-  }
-
   .file-list-container {
     border-radius: 0;
     border: none;

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

@@ -1,16 +1,14 @@
-import React, { useMemo } from 'react'
 import './LsTool.scss'
-import { useTranslation } from 'react-i18next'
-
+import React, { useMemo } from 'react'
+import type { ToolInputs } from '@vibe-forge/core'
 import { defineToolRender } from '../defineToolRender'
-import { CodeBlock } from '../../CodeBlock'
-import { ToolCallBox } from '../../ToolCallBox'
-import { safeJsonStringify } from '../../safeSerialize'
+import { CodeBlock } from '#~/components/CodeBlock'
+import { ToolCallBox } from '../core/ToolCallBox'
+import { safeJsonStringify } from '#~/utils/safe-serialize'
 import { FileList } from './components/FileList'
 
 export const LsTool = defineToolRender(({ item, resultItem }) => {
-  const { t } = useTranslation()
-  const input = (item.input != null ? item.input : {}) as { path?: string; ignore?: string[] }
+  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
 
@@ -43,20 +41,22 @@ export const LsTool = defineToolRender(({ item, resultItem }) => {
       <ToolCallBox
         header={
           <div className='tool-header-content'>
-            <span className='material-symbols-rounded'>folder_open</span>
-            <span className='command-name'>LS</span>
-            <span className='path'>{path}</span>
+            <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='file-count'>({fileCount} files)</span>
+              <span className='tool-header-chip'>{fileCount} files</span>
             )}
           </div>
         }
         content={
           <div className='tool-content'>
             {ignore && ignore.length > 0 && (
-              <div className='input-details'>
-                <span className='label'>Ignore:</span>
-                <code>{JSON.stringify(ignore)}</code>
+              <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>
             )}
 

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

@@ -1,57 +1,2 @@
 .read-tool {
-  .tool-header-content {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-
-    .material-symbols-rounded {
-      font-size: 18px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: var(--sub-text-color);
-      height: 20px;
-      width: 18px;
-      margin-right: 8px;
-      position: relative;
-      top: 1px;
-    }
-
-    .file-name {
-      font-size: 13px;
-      font-weight: 500;
-      color: var(--text-color);
-      white-space: nowrap;
-      line-height: 20px;
-      display: flex;
-      align-items: center;
-    }
-
-    .file-path {
-      font-size: 12px;
-      color: var(--sub-text-color);
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      display: flex;
-      align-items: center;
-      min-width: 0;
-      flex: 1;
-      line-height: 20px;
-
-      &::before {
-        content: '—';
-        margin: 0 8px;
-        color: var(--border-color);
-        font-weight: 300;
-      }
-    }
-    .reading-placeholder {
-      padding: 8px;
-      color: var(--sub-text-color);
-      font-size: 12px;
-    }
-  }
 }

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

@@ -1,43 +1,20 @@
-import React from 'react'
 import './ReadTool.scss'
+import React from 'react'
 import { useTranslation } from 'react-i18next'
-
+import type { ToolInputs } from '@vibe-forge/core'
+import { CodeBlock } from '#~/components/CodeBlock'
+import { ToolCallBox } from '../core/ToolCallBox'
+import { safeJsonStringify } from '#~/utils/safe-serialize'
 import { defineToolRender } from '../defineToolRender'
-import { CodeBlock } from '../../CodeBlock'
-import { ToolCallBox } from '../../ToolCallBox'
-import { safeJsonStringify } from '../../safeSerialize'
+import { getFileInfo, getLanguageFromPath } from './utils'
 
 export const ReadTool = defineToolRender(({ item, resultItem }) => {
   const { t } = useTranslation()
-  const input = (item.input != null ? item.input : {}) as { file_path?: string }
-  const filePath = (input.file_path != null && input.file_path !== '') ? input.file_path : 'unknown file'
-  const lastPart = filePath.split('/').pop()
-  const fileName = (lastPart != null && lastPart !== '') ? lastPart : filePath
-  const dirPath = filePath.includes('/') ? filePath.substring(0, filePath.lastIndexOf('/')) : ''
-
-  const getLanguage = (path: string) => {
-    const extPart = path.split('.').pop()
-    const ext = (extPart != null && extPart !== '') ? extPart.toLowerCase() : ''
-    const langMap: Record<string, string> = {
-      'js': 'javascript',
-      'jsx': 'jsx',
-      'ts': 'typescript',
-      'tsx': 'tsx',
-      'py': 'python',
-      'md': 'markdown',
-      'json': 'json',
-      'scss': 'scss',
-      'css': 'css',
-      'html': 'html',
-      'sh': 'bash',
-      'yml': 'yaml',
-      'yaml': 'yaml',
-      'sql': 'sql'
-    }
-    return langMap[ext] || 'text'
-  }
-
-  const language = getLanguage(filePath)
+  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)
@@ -53,24 +30,25 @@ export const ReadTool = defineToolRender(({ item, resultItem }) => {
       <ToolCallBox
         header={
           <div className='tool-header-content'>
-            <span className='material-symbols-rounded'>description</span>
-            <span className='command-name'>{t('chat.tools.read')}</span>
-            <span className='file-name'>{fileName}</span>
+            <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'>
-            {dirPath && (
-              <div className='file-path'>
-                {dirPath}
-              </div>
-            )}
             {resultItem
               ? (
                 <div className='result-content'>
                   <CodeBlock
                     code={cleanContent(resultItem.content)}
                     lang={language}
+                    hideHeader={true}
                   />
                 </div>
               )

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

@@ -1,34 +1,15 @@
 .todo-tool {
-  .todo-header {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-
-    .status-icon {
-      font-size: 18px;
-    }
-
-    .todo-title {
-      font-size: 13px;
-      font-weight: 500;
-    }
-  }
-
-  .tool-content {
-    padding: 4px 0;
-  }
-
   .todo-item {
     display: flex;
     align-items: flex-start;
     gap: 8px;
     margin-bottom: 2px;
-    padding: 6px 12px;
+    padding: 6px 4px;
     border-radius: 0;
     transition: background-color .2s;
 
     &:hover {
-      background-color: rgba(0, 0, 0, .04);
+      background-color: var(--bg-color-hover);
     }
 
     &:last-child {
@@ -43,13 +24,13 @@
       }
 
       .status-icon {
-        color: #10b981;
+        color: var(--success-color);
       }
     }
 
     &.in_progress {
       .status-icon {
-        color: #3b82f6;
+        color: var(--primary-color);
       }
     }
 
@@ -59,6 +40,10 @@
       }
     }
 
+    .status-icon {
+      font-size: 16px;
+    }
+
     .todo-info {
       display: flex;
       flex-direction: column;

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

@@ -1,29 +1,42 @@
 import './TodoTool.scss'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
+import type { ToolInputs } from '@vibe-forge/core'
 
+import { ToolCallBox } from '../core/ToolCallBox'
 import { defineToolRender } from '../defineToolRender'
-import { ToolCallBox } from '../../ToolCallBox'
 
-interface TodoItem {
-  content: string
-  status: 'pending' | 'in_progress' | 'completed'
-  activeForm?: string
-}
+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 { todos?: TodoItem[] }
-  const todos = input.todos ?? []
+  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='todo-header'>
-            <span className='material-symbols-rounded status-icon'>task_alt</span>
-            <span className='todo-title'>{t('chat.tools.todo')}</span>
+          <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={