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

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

@@ -1,22 +1,15 @@
 import './BashTool.scss'
-import React from 'react'
+import type { ToolInputs } from '@vibe-forge/core'
+import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import ReactMarkdown from 'react-markdown'
-import remarkGfm from 'remark-gfm'
-
+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'
 
 export const BashTool = defineToolRender(({ item, resultItem }) => {
   const { t } = useTranslation()
-  const input = (item.input != null ? item.input : {}) as {
-    command?: string
-    reason?: string
-    thought?: string
-    description?: string
-  }
+  const input = (item.input != null ? item.input : {}) as Partial<ToolInputs['adapter:claude-code:Bash']>
   const command = input.command ?? ''
   const reason = (input.description != null && input.description !== '')
     ? input.description
@@ -25,58 +18,99 @@ export const BashTool = defineToolRender(({ item, resultItem }) => {
     : (input.thought != null && input.thought !== '')
     ? input.thought
     : ''
+  const timeout = input.timeout
+  const runInBackground = input.run_in_background
+  const dangerouslyDisableSandbox = input.dangerouslyDisableSandbox
+  const reasonLine = reason.replaceAll('\n', ' ').replace(/\s+/g, ' ').trim()
+  const commandLine = command.split('\n')[0] ?? ''
+  const hasMoreCommand = command.trim() !== commandLine.trim()
+  const showCommandExpand = hasMoreCommand || commandLine.length > 80
+  const [showCommandDetail, setShowCommandDetail] = useState(false)
 
   return (
     <div className='tool-group bash-tool'>
       <ToolCallBox
-        collapsible={false}
+        defaultExpanded={true}
+        type={resultItem != null ? 'result' : 'call'}
+        isError={resultItem?.is_error ?? false}
         header={
-          <div className='bash-header'>
-            <span className='material-symbols-rounded status-icon'>terminal</span>
-            <span className='bash-title'>{t('chat.tools.bash')}</span>
+          <div className='bash-tool__header'>
+            <span className='material-symbols-rounded bash-tool__icon'>terminal</span>
+            <div className='bash-tool__header-main'>
+              <div className='bash-tool__reason-row'>
+                <span className='bash-tool__reason-text tool-header-hint'>
+                  {reasonLine !== '' ? reasonLine : commandLine}
+                </span>
+              </div>
+              {reasonLine !== '' && (
+                <div className='bash-tool__command-row'>
+                  <span
+                    className={`bash-tool__command-text tool-header-mono${
+                      showCommandExpand ? ' bash-tool__command-text--clickable' : ''
+                    }`}
+                    title={showCommandExpand ? t('chat.tools.viewCommand') : undefined}
+                    onClick={(e) => {
+                      if (!showCommandExpand) return
+                      e.stopPropagation()
+                      setShowCommandDetail(prev => !prev)
+                    }}
+                  >
+                    {commandLine}
+                    {hasMoreCommand ? ' …' : ''}
+                  </span>
+                </div>
+              )}
+            </div>
+            <div className='bash-tool__header-tags'>
+              {typeof timeout === 'number' && Number.isFinite(timeout) && (
+                <span
+                  className='tool-icon-tag'
+                  title={`${t('chat.tools.timeout')}: ${timeout}ms`}
+                >
+                  <span className='material-symbols-rounded tool-icon-tag__icon'>timer</span>
+                  <span className='tool-icon-tag__text'>
+                    {timeout % 1000 === 0 ? `${timeout / 1000}s` : `${timeout}ms`}
+                  </span>
+                </span>
+              )}
+              {runInBackground === true && (
+                <span className='tool-icon-tag' title={t('chat.tools.runInBackground')}>
+                  <span className='material-symbols-rounded tool-icon-tag__icon'>schedule</span>
+                </span>
+              )}
+              {dangerouslyDisableSandbox === true && (
+                <span className='tool-icon-tag' title={t('chat.tools.dangerouslyDisableSandbox')}>
+                  <span className='material-symbols-rounded tool-icon-tag__icon'>shield_lock</span>
+                </span>
+              )}
+            </div>
           </div>
         }
         content={
           <div className='tool-content'>
-            {(reason != null && reason !== '') && (
-              <div className='tool-reason markdown-body'>
-                <ReactMarkdown remarkPlugins={[remarkGfm]}>{reason}</ReactMarkdown>
+            {showCommandDetail && (
+              <div className='bash-tool__command-detail'>
+                <div className='tool-code-wrapper'>
+                  <CodeBlock code={command} lang='shell' hideHeader={true} />
+                </div>
               </div>
             )}
-            <div className='bash-content-scroll'>
-              <div className='bash-code-wrapper'>
-                <CodeBlock code={command} lang='shell' />
+            <div className='tool-scroll'>
+              <div className='tool-code-wrapper'>
+                {resultItem
+                  ? (typeof resultItem.content === 'string'
+                    ? <CodeBlock code={resultItem.content} lang='text' hideHeader={true} />
+                    : <CodeBlock code={safeJsonStringify(resultItem.content, 2)} lang='json' hideHeader={true} />)
+                  : (
+                    <div className='tool-placeholder'>
+                      {t('chat.result')}
+                    </div>
+                  )}
               </div>
             </div>
           </div>
         }
       />
-
-      {resultItem != null && (
-        <ToolCallBox
-          type='result'
-          isError={resultItem.is_error}
-          header={
-            <div className='result-header'>
-              <span className='material-symbols-rounded status-icon'>
-                {resultItem.is_error === true ? 'error' : 'check_circle'}
-              </span>
-              <span className='result-title'>{t('chat.result')}</span>
-            </div>
-          }
-          content={
-            <div className='tool-content'>
-              <div className='bash-content-scroll'>
-                <div className='bash-code-wrapper'>
-                  {typeof resultItem.content === 'string'
-                    ? <CodeBlock code={resultItem.content} lang='text' />
-                    : <CodeBlock code={safeJsonStringify(resultItem.content, 2)} lang='json' />}
-                </div>
-              </div>
-            </div>
-          }
-        />
-      )}
     </div>
   )
 })

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

@@ -1,83 +1,4 @@
 .glob-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 {
-    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;
-    }
-
-    .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/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>
             )}