@vibe-forge/client 0.2.0-alpha.0

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

@@ -0,0 +1,96 @@
+.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;
+    border-right: none;
+    border-bottom: none;
+    border: none;
+  }
+}

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

@@ -0,0 +1,114 @@
+import React, { useMemo } from 'react'
+import './GrepTool.scss'
+import { useTranslation } from 'react-i18next'
+
+import { defineToolRender } from '../defineToolRender'
+import { CodeBlock } from '../../CodeBlock'
+import { ToolCallBox } from '../../ToolCallBox'
+import { safeJsonStringify } from '../../safeSerialize'
+import { FileList } from './components/FileList'
+
+export const GrepTool = defineToolRender(({ item, resultItem }) => {
+  const { t } = useTranslation()
+  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 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 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'>find_in_page</span>
+            <span className='command-name'>Grep</span>
+            <span className='pattern'>{pattern}</span>
+            {fileCount !== null && (
+              <span className='file-count'>({fileCount} matches)</span>
+            )}
+          </div>
+        }
+        content={
+          <div className='tool-content'>
+            {(path || fileGlob) && (
+              <div className='input-details-grid'>
+                {path && (
+                  <div className='input-detail-item'>
+                    <span className='label'>Path:</span>
+                    <span className='value'>{path}</span>
+                  </div>
+                )}
+                {fileGlob && (
+                  <div className='input-detail-item'>
+                    <span className='label'>Glob:</span>
+                    <span className='value'>{fileGlob}</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

@@ -0,0 +1,85 @@
+.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

@@ -0,0 +1,94 @@
+import React, { useMemo } from 'react'
+import './LsTool.scss'
+import { useTranslation } from 'react-i18next'
+
+import { defineToolRender } from '../defineToolRender'
+import { CodeBlock } from '../../CodeBlock'
+import { ToolCallBox } from '../../ToolCallBox'
+import { safeJsonStringify } from '../../safeSerialize'
+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 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'>folder_open</span>
+            <span className='command-name'>LS</span>
+            <span className='path'>{path}</span>
+            {fileCount !== null && (
+              <span className='file-count'>({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>
+            )}
+
+            {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

@@ -0,0 +1,57 @@
+.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

@@ -0,0 +1,87 @@
+import React from 'react'
+import './ReadTool.scss'
+import { useTranslation } from 'react-i18next'
+
+import { defineToolRender } from '../defineToolRender'
+import { CodeBlock } from '../../CodeBlock'
+import { ToolCallBox } from '../../ToolCallBox'
+import { safeJsonStringify } from '../../safeSerialize'
+
+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 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'>description</span>
+            <span className='command-name'>{t('chat.tools.read')}</span>
+            <span className='file-name'>{fileName}</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}
+                  />
+                </div>
+              )
+              : (
+                <div className='tool-placeholder'>
+                  {t('chat.tools.reading')}
+                </div>
+              )}
+          </div>
+        }
+      />
+    </div>
+  )
+})

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

@@ -0,0 +1,78 @@
+.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;
+    border-radius: 0;
+    transition: background-color .2s;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, .04);
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    &.completed {
+      opacity: .6;
+
+      .todo-text {
+        text-decoration: line-through;
+      }
+
+      .status-icon {
+        color: #10b981;
+      }
+    }
+
+    &.in_progress {
+      .status-icon {
+        color: #3b82f6;
+      }
+    }
+
+    &.pending {
+      .status-icon {
+        color: var(--sub-text-color);
+      }
+    }
+
+    .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

@@ -0,0 +1,60 @@
+import './TodoTool.scss'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { defineToolRender } from '../defineToolRender'
+import { ToolCallBox } from '../../ToolCallBox'
+
+interface TodoItem {
+  content: string
+  status: 'pending' | 'in_progress' | 'completed'
+  activeForm?: string
+}
+
+export const TodoTool = defineToolRender(({ item }) => {
+  const { t } = useTranslation()
+  const input = (item.input != null ? item.input : {}) as { todos?: TodoItem[] }
+  const todos = input.todos ?? []
+
+  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>
+        }
+        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>
+  )
+})