@vibe-forge/client 0.2.0-alpha.0

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

@@ -0,0 +1,92 @@
+.write-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;
+      }
+    }
+  }
+
+  .write-result-status {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+
+    .status-icon {
+      font-size: 14px;
+    }
+
+    .status-text {
+      font-size: 12px;
+    }
+
+    &.error {
+      .status-icon, .status-text {
+        color: #ef4444;
+      }
+    }
+
+    &.success {
+      .status-icon {
+        color: #10b981;
+      }
+      .status-text {
+        color: #059669;
+      }
+    }
+  }
+
+  .tool-content {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .write-result-status {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+}

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

@@ -0,0 +1,86 @@
+import React from 'react'
+import './WriteTool.scss'
+import { useTranslation } from 'react-i18next'
+
+import { defineToolRender } from '../defineToolRender'
+import { CodeBlock } from '../../CodeBlock'
+import { ToolCallBox } from '../../ToolCallBox'
+
+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 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)
+
+  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>
+        }
+        content={
+          <div className='tool-content'>
+            <div className='bash-content-scroll'>
+              <div className='bash-code-wrapper'>
+                <CodeBlock
+                  code={content}
+                  lang={language}
+                  showLineNumbers={true}
+                />
+              </div>
+            </div>
+          </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/components/FileList.scss

@@ -0,0 +1,65 @@
+.file-list-container {
+  font-family: 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', 'Consolas', 'Courier New', monospace;
+  font-size: 12px;
+  line-height: 1.4;
+  border-radius: 6px;
+  background: var(--bg-color);
+  color: var(--text-color);
+}
+
+.file-list-item {
+  display: flex;
+  align-items: center;
+  padding: 2px 8px;
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background-color: var(--tag-bg);
+  }
+
+  &.is-dir {
+    font-weight: 500;
+  }
+}
+
+.file-icon {
+  font-size: 14px;
+  margin-right: 4px;
+  color: var(--sub-text-color);
+
+  &.folder {
+    color: var(--primary-color);
+  }
+
+  &.file {
+    color: var(--sub-text-color);
+  }
+}
+
+.toggle-icon {
+  font-size: 14px;
+  margin-right: 4px;
+  color: var(--sub-text-color);
+}
+
+.spacer {
+  width: 14px;
+  margin-right: 4px;
+}
+
+.file-path {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.file-list-empty {
+  padding: 8px 12px;
+  color: var(--sub-text-color);
+  font-size: 12px;
+  text-align: center;
+}

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

@@ -0,0 +1,185 @@
+import React, { useEffect, useMemo, useState } from 'react'
+import './FileList.scss'
+
+interface FileNode {
+  rawLine: string
+  name: string
+  path: string
+  depth: number
+  isDir: boolean
+}
+
+interface FileListProps {
+  content: string | string[]
+  removeRoot?: boolean
+  defaultCollapsed?: boolean
+}
+
+export function FileList({ content, removeRoot = false, defaultCollapsed = false }: FileListProps) {
+  const nodes = useMemo(() => {
+    let lines: string[] = []
+    if (Array.isArray(content)) {
+      lines = content
+    } else 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')
+      }
+    }
+
+    lines = lines.filter(line => line.trim() !== '')
+
+    let parsedNodes: FileNode[] = []
+
+    lines.forEach(line => {
+      const leadingSpaces = line.match(/^\s*/)?.[0].length || 0
+      const depth = Math.floor(leadingSpaces / 2)
+
+      let name = line.trim()
+      if (name.startsWith('- ')) {
+        name = name.substring(2)
+      }
+
+      const isDir = name.endsWith('/') || name.endsWith('\\')
+
+      parsedNodes.push({
+        rawLine: line,
+        name,
+        path: name,
+        depth,
+        isDir
+      })
+    })
+
+    if (removeRoot && parsedNodes.length > 1 && parsedNodes[0].isDir) {
+      if (parsedNodes[1].depth > parsedNodes[0].depth) {
+        const rootDepth = parsedNodes[0].depth
+        parsedNodes.shift()
+        const minDepth = Math.min(...parsedNodes.map(n => n.depth))
+        parsedNodes = parsedNodes.map(n => ({
+          ...n,
+          depth: n.depth - minDepth
+        }))
+      }
+    }
+
+    return parsedNodes
+  }, [content, removeRoot])
+
+  const [collapsedIndices, setCollapsedIndices] = useState<Set<number>>(new Set())
+
+  const hasDirectories = useMemo(() => {
+    return nodes.some(node => node.isDir)
+  }, [nodes])
+
+  useEffect(() => {
+    if (defaultCollapsed) {
+      const newSet = new Set<number>()
+      nodes.forEach((node, index) => {
+        if (node.isDir) {
+          newSet.add(index)
+        }
+      })
+      setCollapsedIndices(newSet)
+    } else {
+      setCollapsedIndices(new Set())
+    }
+  }, [nodes, defaultCollapsed])
+
+  const toggleCollapse = (index: number) => {
+    const newSet = new Set(collapsedIndices)
+    if (newSet.has(index)) {
+      newSet.delete(index)
+    } else {
+      newSet.add(index)
+    }
+    setCollapsedIndices(newSet)
+  }
+
+  if (nodes.length === 0) {
+    return <div className='file-list-empty'>No files found</div>
+  }
+
+  const getIcon = (node: FileNode) => {
+    if (node.isDir) {
+      return { name: 'folder', className: 'folder' }
+    }
+
+    const ext = node.name.split('.').pop()?.toLowerCase()
+    if (ext && ['ts', 'tsx', 'js', 'jsx', 'py', 'java', 'c', 'cpp', 'go', 'rs'].includes(ext)) {
+      return { name: 'code', className: 'file' }
+    }
+    if (ext && ['md', 'txt', 'json', 'yml', 'yaml', 'xml', 'html', 'css', 'scss'].includes(ext)) {
+      return { name: 'description', className: 'file' }
+    }
+    if (ext && ['png', 'jpg', 'jpeg', 'gif', 'svg', 'ico'].includes(ext)) {
+      return { name: 'image', className: 'file' }
+    }
+
+    return { name: 'draft', className: 'file' }
+  }
+
+  const renderNodes = () => {
+    const elements: React.ReactNode[] = []
+    let hideDepth: number | null = null
+
+    nodes.forEach((node, index) => {
+      if (hideDepth !== null) {
+        if (node.depth > hideDepth) {
+          return
+        } else {
+          hideDepth = null
+        }
+      }
+
+      const icon = getIcon(node)
+      const isCollapsed = collapsedIndices.has(index)
+
+      if (isCollapsed) {
+        hideDepth = node.depth
+      }
+
+      elements.push(
+        <div
+          key={index}
+          className={`file-list-item ${node.isDir ? 'is-dir' : ''}`}
+          style={{ paddingLeft: `${node.depth * 20 + 12}px` }}
+          onClick={() => node.isDir && toggleCollapse(index)}
+        >
+          {hasDirectories && (
+            <>
+              {node.isDir && (
+                <span className='material-symbols-rounded toggle-icon'>
+                  {isCollapsed ? 'arrow_right' : 'arrow_drop_down'}
+                </span>
+              )}
+              {!node.isDir && <span className='spacer' />}
+            </>
+          )}
+
+          <span className={`material-symbols-rounded file-icon ${icon.className}`}>
+            {icon.name}
+          </span>
+          <span className='file-path'>{node.name}</span>
+        </div>
+      )
+    })
+    return elements
+  }
+
+  return (
+    <div className='file-list-container'>
+      {renderNodes()}
+    </div>
+  )
+}

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

@@ -0,0 +1,28 @@
+import { defineToolRenders } from '../defineToolRender'
+import { BashTool } from './BashTool'
+import { GlobTool } from './GlobTool'
+import { GrepTool } from './GrepTool'
+import { LsTool } from './LSTool'
+import { ReadTool } from './ReadTool'
+import { TodoTool } from './TodoTool'
+import { WriteTool } from './WriteTool'
+
+export const adapterClaudeToolRenders = defineToolRenders({
+  Bash: BashTool,
+  LS: LsTool,
+  Glob: GlobTool,
+  Grep: GrepTool,
+  Read: ReadTool,
+  Write: WriteTool,
+  TodoWrite: TodoTool
+})
+
+export {
+  BashTool,
+  GlobTool,
+  GrepTool,
+  LsTool,
+  ReadTool,
+  TodoTool,
+  WriteTool
+}

package/src/components/chat/tools/defineToolRender.ts

@@ -0,0 +1,28 @@
+import type { ChatMessageContent } from '@vibe-forge/core'
+import type React from 'react'
+
+export interface ToolRenderProps {
+  item: Extract<ChatMessageContent, { type: 'tool_use' }>
+  resultItem?: Extract<ChatMessageContent, { type: 'tool_result' }>
+}
+
+export type ToolRenderComponent = React.ComponentType<ToolRenderProps>
+
+export function defineToolRender<T extends ToolRenderComponent>(render: T) {
+  return render
+}
+
+export function defineToolRenders(
+  renders: Record<string, ToolRenderComponent>,
+  options?: { namespace?: string }
+) {
+  const namespace = options?.namespace
+  const entries = Object.entries(renders).flatMap(([name, renderer]) => {
+    const current: Array<[string, ToolRenderComponent]> = [[name, renderer]]
+    if (namespace) {
+      current.push([`${namespace}${name}`, renderer])
+    }
+    return current
+  })
+  return Object.fromEntries(entries) as Record<string, ToolRenderComponent>
+}

package/src/components/chat/tools/task/GetTaskInfoTool.scss

@@ -0,0 +1,50 @@
+.tool-group.get-task-info-tool {
+  border-color: color-mix(
+    in srgb,
+    var(--border-color) 55%,
+    var(--primary-color) 45%
+  );
+
+  & .tool-call-header {
+    background: linear-gradient(
+      90deg,
+      color-mix(in srgb, var(--tag-bg) 80%, var(--primary-color) 20%),
+      var(--tag-bg)
+    );
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  &__icon {
+    font-size: 16px;
+  }
+
+  &__title {
+    font-weight: 600;
+  }
+
+  &__count {
+    margin-left: 4px;
+    padding: 1px 6px;
+    border: 1px solid var(--border-color);
+    border-radius: 999px;
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--sub-text-color);
+    background: color-mix(in srgb, var(--bg-color) 70%, transparent 30%);
+  }
+
+  &__empty {
+    margin: 10px 12px;
+    padding: 10px 12px;
+    border: 1px dashed var(--border-color);
+    border-radius: 8px;
+    font-size: 12px;
+    color: var(--sub-text-color);
+    background: var(--bg-color);
+  }
+}

package/src/components/chat/tools/task/GetTaskInfoTool.tsx

@@ -0,0 +1,88 @@
+import './GetTaskInfoTool.scss'
+
+import React, { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { defineToolRender } from '../defineToolRender'
+import { ToolCallBox } from '../../ToolCallBox'
+import { TaskToolCard } from './components/TaskToolCard'
+
+interface TaskResult {
+  taskId: string
+  status?: 'running' | 'completed' | 'failed'
+  exitCode?: number | null
+  description?: string
+  type?: 'default' | 'spec' | 'entity'
+  name?: string | null
+  adapter?: string | null
+  background?: boolean
+  logs?: string[] | null
+}
+
+export const GetTaskInfoTool = defineToolRender(({ item, resultItem }) => {
+  const { t } = useTranslation()
+
+  const input = (item.input != null ? item.input : {}) as { taskId?: string }
+  const inputTaskId = input.taskId
+
+  const taskResult = useMemo(() => {
+    if (!resultItem?.content) {
+      return null
+    }
+    const text = resultItem.content[0].text.trim()
+    const parsed = JSON.parse(text) as TaskResult[]
+    return parsed[0] ?? null
+  }, [resultItem?.content])
+
+  const logs = taskResult?.logs ?? []
+  const metaChips = taskResult ? (() => {
+    const { exitCode, ...cardMeta } = taskResult
+    return [
+      cardMeta.adapter,
+      cardMeta.type === 'default' ? undefined : cardMeta.type,
+      cardMeta.name,
+      cardMeta.status,
+      exitCode != null ? t('chat.tools.taskExitCode', { code: exitCode }) : undefined,
+      cardMeta.background === false ? t('chat.tools.startTasksForeground') : cardMeta.background === true ? t('chat.tools.startTasksBackground') : undefined
+    ]
+  })() : []
+  const titleFallback = t('chat.tools.task')
+
+  return (
+    <div className='tool-group get-task-info-tool'>
+      <ToolCallBox
+        defaultExpanded={true}
+        header={
+          <div className='get-task-info-tool__header'>
+            <span className='material-symbols-rounded get-task-info-tool__icon'>info</span>
+            <span className='get-task-info-tool__title'>{t('chat.tools.getTaskInfo')}</span>
+            <span className='get-task-info-tool__count'>{taskResult ? 1 : 0}</span>
+          </div>
+        }
+        content={
+          <div className='tool-content'>
+            {taskResult ? (
+              (() => {
+                const { taskId, exitCode, ...cardProps } = taskResult
+                return (
+                  <TaskToolCard
+                    {...cardProps}
+                    logs={logs}
+                    sessionId={taskId || inputTaskId}
+                    titleFallback={titleFallback}
+                    metaChips={metaChips}
+                    showExecutionIcon={false}
+                  />
+                )
+              })()
+            ) : (
+              <div className='get-task-info-tool__empty'>
+                {t('chat.tools.startTasksEmpty')}
+              </div>
+            )}
+          </div>
+        }
+      />
+    </div>
+  )
+})

package/src/components/chat/tools/task/ListTasksTool.scss

@@ -0,0 +1,56 @@
+.list-tasks-tool {
+  border-color: color-mix(
+    in srgb,
+    var(--border-color) 55%,
+    var(--primary-color) 45%
+  );
+
+  & .tool-call-header {
+    background: linear-gradient(
+      90deg,
+      color-mix(in srgb, var(--tag-bg) 80%, var(--primary-color) 20%),
+      var(--tag-bg)
+    );
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  &__icon {
+    font-size: 16px;
+  }
+
+  &__title {
+    font-weight: 600;
+  }
+
+  &__count {
+    margin-left: 4px;
+    padding: 1px 6px;
+    border: 1px solid var(--border-color);
+    border-radius: 999px;
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--sub-text-color);
+    background: color-mix(in srgb, var(--bg-color) 70%, transparent 30%);
+  }
+
+  &__list {
+    padding: 10px 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  &__empty {
+    padding: 10px 12px;
+    border: 1px dashed var(--border-color);
+    border-radius: 8px;
+    font-size: 12px;
+    color: var(--sub-text-color);
+    background: var(--bg-color);
+  }
+}