@vibe-forge/client 0.2.0-alpha.9 → 0.4.0

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={

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

@@ -1,81 +1,39 @@
 .write-tool {
-  .tool-header-content {
+  .write-tool__header {
+    width: 100%;
+    min-width: 0;
     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;
-      }
-    }
+    justify-content: space-between;
+    gap: 8px;
   }
 
-  .write-result-status {
+  .write-tool__header-left {
     display: flex;
     align-items: center;
-    gap: 4px;
+    gap: 6px;
+    min-width: 0;
+    flex: 1;
+  }
 
-    .status-icon {
-      font-size: 14px;
-    }
+  .write-tool__status-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
 
-    .status-text {
-      font-size: 12px;
+    .material-symbols-rounded {
+      font-size: 16px;
     }
 
     &.error {
-      .status-icon, .status-text {
-        color: #ef4444;
-      }
+      color: var(--danger-color);
     }
 
     &.success {
-      .status-icon {
-        color: #10b981;
-      }
-      .status-text {
-        color: #059669;
-      }
+      color: var(--success-color);
     }
   }
 
@@ -83,10 +41,4 @@
     display: flex;
     flex-direction: column;
   }
-
-  .write-result-status {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-  }
 }

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

@@ -1,59 +1,40 @@
-import React from 'react'
 import './WriteTool.scss'
-import { useTranslation } from 'react-i18next'
-
+import React from 'react'
+import type { ToolInputs } from '@vibe-forge/core'
+import { CodeBlock } from '#~/components/CodeBlock'
+import { ToolCallBox } from '../core/ToolCallBox'
 import { defineToolRender } from '../defineToolRender'
-import { CodeBlock } from '../../CodeBlock'
-import { ToolCallBox } from '../../ToolCallBox'
+import { getFileInfo, getLanguageFromPath } from './utils'
 
 export const WriteTool = defineToolRender(({ item, resultItem }) => {
-  const { t } = useTranslation()
-  const input = (item.input != null ? item.input : {}) as { file_path?: string; content?: 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 input = (item.input != null ? item.input : {}) as ToolInputs['adapter:claude-code:Write']
+  const { filePath } = getFileInfo(input.file_path)
   const content = input.content ?? ''
-
-  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 language = getLanguageFromPath(filePath)
 
   return (
     <div className='tool-group write-tool'>
       <ToolCallBox
         defaultExpanded={false}
         header={
-          <div className='tool-header-content'>
-            <span className='material-symbols-rounded'>edit_note</span>
-            <span className='file-name'>{fileName}</span>
-            {(dirPath != null && dirPath !== '') && <span className='file-path'>{dirPath}</span>}
+          <div className='write-tool__header'>
+            <div className='write-tool__header-left'>
+              <span className='material-symbols-rounded tool-header-icon'>edit_note</span>
+              <span className='tool-header-primary tool-header-mono tool-header-row-text'>{filePath}</span>
+            </div>
+            {resultItem != null && (
+              <span className={`write-tool__status-icon ${resultItem.is_error ? 'error' : 'success'}`}>
+                <span className='material-symbols-rounded'>
+                  {resultItem.is_error === true ? 'error' : 'check_circle'}
+                </span>
+              </span>
+            )}
           </div>
         }
         content={
           <div className='tool-content'>
-            <div className='bash-content-scroll'>
-              <div className='bash-code-wrapper'>
+            <div className='tool-scroll'>
+              <div className='tool-code-wrapper'>
                 <CodeBlock
                   code={content}
                   lang={language}
@@ -64,23 +45,6 @@ export const WriteTool = defineToolRender(({ item, resultItem }) => {
           </div>
         }
       />
-      {resultItem != null && (
-        <ToolCallBox
-          type='result'
-          isError={resultItem.is_error}
-          header={
-            <div className={`write-result-status ${resultItem.is_error ? 'error' : 'success'}`}>
-              <span className='material-symbols-rounded status-icon'>
-                {resultItem.is_error === true ? 'error' : 'check_circle'}
-              </span>
-              <span className='status-text'>
-                {resultItem.is_error === true ? t('chat.tools.writeFailed') : t('chat.tools.writeSuccess')}
-              </span>
-            </div>
-          }
-          content={null}
-        />
-      )}
     </div>
   )
 })

package/src/components/chat/tools/adapter-claude/index.ts

@@ -1,3 +1,5 @@
+import type {} from '@vibe-forge/adapter-claude-code/schema'
+
 import { defineToolRenders } from '../defineToolRender'
 import { BashTool } from './BashTool'
 import { GlobTool } from './GlobTool'
@@ -15,14 +17,6 @@ export const adapterClaudeToolRenders = defineToolRenders({
   Read: ReadTool,
   Write: WriteTool,
   TodoWrite: TodoTool
-})
+}, { namespace: 'adapter:claude-code:' })
 
-export {
-  BashTool,
-  GlobTool,
-  GrepTool,
-  LsTool,
-  ReadTool,
-  TodoTool,
-  WriteTool
-}
+export { BashTool, GlobTool, GrepTool, LsTool, ReadTool, TodoTool, WriteTool }

package/src/components/chat/tools/adapter-claude/utils.ts

@@ -0,0 +1,54 @@
+export function getFileInfo(filePath?: string) {
+  const resolvedPath = (filePath != null && filePath !== '') ? filePath : 'unknown file'
+  const lastSlashIndex = resolvedPath.lastIndexOf('/')
+  const fileName = lastSlashIndex >= 0 ? resolvedPath.slice(lastSlashIndex + 1) : resolvedPath
+  const dirPath = lastSlashIndex >= 0 ? resolvedPath.slice(0, lastSlashIndex) : ''
+
+  return { filePath: resolvedPath, fileName, dirPath }
+}
+
+export function getLanguageFromPath(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'
+}
+
+export function normalizeResultLines(content: unknown): string[] {
+  if (Array.isArray(content)) {
+    return content.map(String)
+  }
+
+  if (typeof content !== 'string') {
+    return []
+  }
+
+  const trimmed = content.trim()
+  if (trimmed.startsWith('[') && trimmed.endsWith(']')) {
+    try {
+      const parsed = JSON.parse(trimmed)
+      if (Array.isArray(parsed)) {
+        return parsed.map(String)
+      }
+    } catch {
+      return content.split('\n')
+    }
+  }
+
+  return content.split('\n')
+}