@vibe-forge/client 0.3.0 → 0.4.0

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

package/src/components/chat/tools/core/ToolCallBox.scss

@@ -0,0 +1,356 @@
+.tool-group {
+  margin: 0;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  overflow: hidden;
+  background-color: var(--bg-color);
+
+  .tool-call-box {
+    border: none;
+    margin: 0;
+    border-radius: 0;
+
+    &.result {
+      background-color: transparent;
+    }
+  }
+
+  .tool-call-header {
+    padding: 6px 10px;
+    height: 32px;
+    box-sizing: border-box;
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--text-color);
+    background-color: var(--tag-bg);
+    transition: text-shadow .4s ease;
+
+    &.collapsed {
+      cursor: default;
+    }
+
+    .tool-call-header-main {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      flex: 1;
+      min-width: 0;
+    }
+
+    &:hover {
+      text-shadow: 0 0 .5px currentColor;
+    }
+
+    .material-symbols-rounded {
+      font-size: 16px;
+      color: var(--sub-text-color);
+
+      &.expand-icon {
+        font-size: 14px;
+      }
+    }
+  }
+
+  .tool-result-header {
+    padding: 6px 10px;
+    height: 32px;
+    box-sizing: border-box;
+    cursor: pointer;
+    user-select: none;
+    border-top: 1px solid var(--border-color);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--success-color);
+    background-color: var(--tag-bg);
+
+    &.error {
+      color: var(--danger-color);
+      .material-symbols-rounded {
+        color: var(--danger-color);
+      }
+    }
+
+    &:hover {
+      opacity: .8;
+    }
+
+    .material-symbols-rounded {
+      font-size: 16px;
+      color: var(--success-color);
+    }
+  }
+
+  .tool-call-box:first-child {
+    .tool-result-header {
+      border-top: none;
+    }
+  }
+
+  .tool-call-box.expanded {
+    .tool-call-header {
+      border-bottom: 1px solid var(--border-color);
+    }
+    .tool-result-header {
+      border-bottom: none;
+    }
+  }
+
+  .tool-call-box.collapsed {
+    .tool-call-header {
+      border-bottom: none;
+    }
+    .tool-result-header {
+      border-bottom: none;
+    }
+  }
+
+  .tool-call-body {
+    padding: 0;
+    overflow: hidden;
+    transition: all .2s ease-in-out;
+    background-color: var(--bg-color);
+
+    .tool-call-box.result & {
+      background-color: var(--bg-color);
+      border-top: 1px dashed var(--border-color);
+    }
+
+    .tool-content {
+      padding: 0;
+
+      // Override code block wrapper styles
+      .code-block-wrapper {
+        border: none;
+        border-radius: 0;
+      }
+
+        .tool-result-structured {
+          display: flex;
+          flex-direction: column;
+          gap: 12px;
+          padding: 12px;
+        }
+
+        .tool-result-text {
+          font-size: 13px;
+          color: var(--text-color);
+        }
+
+        .tool-result-text-content {
+          white-space: pre-wrap;
+          line-height: 1.6;
+        }
+
+        .tool-result-image-wrapper {
+          display: flex;
+          flex-direction: column;
+          gap: 6px;
+        }
+
+        .tool-result-image {
+          max-width: 100%;
+          border-radius: 6px;
+          border: 1px solid var(--border-color);
+          background: var(--bg-color);
+        }
+
+        .tool-result-image-caption {
+          font-size: 12px;
+          color: var(--sub-text-color);
+        }
+    }
+  }
+
+
+  .tool-header-content {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    width: 100%;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .tool-header-icon {
+    font-size: 16px;
+    color: var(--sub-text-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+  }
+
+  .tool-header-title {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--text-color);
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  .tool-header-primary {
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--text-color);
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  .tool-header-secondary {
+    font-size: 12px;
+    color: var(--sub-text-color);
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .tool-header-hint {
+    font-size: 11px;
+    font-weight: 400;
+    color: var(--sub-text-color);
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  .tool-header-chip {
+    padding: 1px 6px;
+    border: 1px solid var(--border-color);
+    border-radius: 999px;
+    font-size: 10px;
+    font-weight: 600;
+    color: var(--sub-text-color);
+    background: var(--bg-color);
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  .tool-header-mono {
+    font-family: var(--font-mono);
+  }
+
+  .tool-input-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px 12px;
+  }
+
+  .tool-input-item {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 12px;
+    color: var(--sub-text-color);
+  }
+
+  .tool-input-label {
+    font-weight: 500;
+  }
+
+  .tool-input-value {
+    font-family: var(--font-mono);
+    background: var(--bg-color-hover);
+    padding: 2px 4px;
+    border-radius: 4px;
+    color: var(--text-color);
+  }
+
+  .tool-placeholder {
+    padding: 0;
+    color: var(--sub-text-color);
+    font-size: 12px;
+    font-style: italic;
+  }
+
+  .tool-header-stack {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+    flex: 1;
+  }
+
+  .tool-header-row {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+  }
+
+  .tool-header-row-text {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .tool-header-tags {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex-shrink: 0;
+  }
+
+  .tool-icon-tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 1px 6px;
+    border: 1px solid var(--border-color);
+    border-radius: 999px;
+    background: var(--bg-color);
+    color: var(--sub-text-color);
+    font-size: 11px;
+    line-height: 1;
+  }
+
+  .tool-icon-tag__icon {
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .tool-icon-tag__text {
+    font-family: var(--font-mono);
+    font-size: 10px;
+    color: var(--text-color);
+  }
+
+  .tool-scroll {
+    max-height: 360px;
+    overflow-y: auto;
+
+    &::-webkit-scrollbar {
+      width: 4px;
+    }
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    &::-webkit-scrollbar-thumb {
+      background: var(--border-color);
+      border-radius: 4px;
+    }
+    &::-webkit-scrollbar-thumb:hover {
+      background: var(--sub-text-color);
+    }
+  }
+
+  .tool-code-wrapper {
+    background-color: transparent;
+    border: none;
+    border-radius: 0;
+    padding: 0;
+  }
+}

package/src/components/chat/{ToolGroup.tsx → tools/core/ToolGroup.tsx}

@@ -1,14 +1,12 @@
+import './ToolGroup.scss'
+
 import type { ChatMessage, ChatMessageContent } from '@vibe-forge/core'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { MessageFooter } from './MessageFooter'
-import './ToolGroup.scss'
+import { MessageFooter } from '../../Messages/MessageFooter'
 import { ToolRenderer } from './ToolRenderer'
 
-export function ToolGroup({
-  items,
-  footer
-}: {
+type ToolGroupProps = {
   items: {
     item: Extract<ChatMessageContent, { type: 'tool_use' }>
     resultItem?: Extract<ChatMessageContent, { type: 'tool_result' }>
@@ -19,7 +17,12 @@ export function ToolGroup({
     createdAt: number
     originalMessage: ChatMessage
   }
-}) {
+}
+
+function ToolGroupComponent({
+  items,
+  footer
+}: ToolGroupProps) {
   const { t } = useTranslation()
   const [expanded, setExpanded] = useState(false)
 
@@ -100,3 +103,19 @@ export function ToolGroup({
     </div>
   )
 }
+
+const areToolGroupPropsEqual = (prev: ToolGroupProps, next: ToolGroupProps) => {
+  if (prev.items.length !== next.items.length) return false
+  for (let i = 0; i < prev.items.length; i++) {
+    if (prev.items[i].item !== next.items[i].item) return false
+    if (prev.items[i].resultItem !== next.items[i].resultItem) return false
+  }
+  if (prev.footer == null && next.footer == null) return true
+  if (prev.footer == null || next.footer == null) return false
+  return prev.footer.originalMessage === next.footer.originalMessage
+    && prev.footer.createdAt === next.footer.createdAt
+    && prev.footer.model === next.footer.model
+    && prev.footer.usage === next.footer.usage
+}
+
+export const ToolGroup = React.memo(ToolGroupComponent, areToolGroupPropsEqual)