@vibe-forge/client 0.3.0 → 0.4.0

package/src/components/chat/tools/DefaultTool.tsx

@@ -1,10 +1,172 @@
 import type { ChatMessageContent } from '@vibe-forge/core'
-import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { CodeBlock } from '../CodeBlock'
-import { MarkdownContent } from '../MarkdownContent'
-import { ToolCallBox } from '../ToolCallBox'
-import { safeJsonStringify } from '../safeSerialize'
+import { CodeBlock } from '#~/components/CodeBlock'
+import { MarkdownContent } from '#~/components/MarkdownContent'
+import { ToolCallBox } from './core/ToolCallBox'
+import { safeJsonStringify, toSerializable } from '#~/utils/safe-serialize'
+
+interface StructuredTextBlock {
+  type: 'text'
+  text: string
+  format: 'text' | 'markdown'
+}
+
+interface StructuredImageBlock {
+  type: 'image'
+  src: string
+  alt?: string
+  title?: string
+  width?: number
+  height?: number
+}
+
+type StructuredBlock = StructuredTextBlock | StructuredImageBlock
+
+function parseStructuredInput(value: unknown) {
+  if (typeof value !== 'string') {
+    return value
+  }
+  const trimmed = value.trim()
+  if (
+    (trimmed.startsWith('{') && trimmed.endsWith('}')) ||
+    (trimmed.startsWith('[') && trimmed.endsWith(']'))
+  ) {
+    try {
+      return JSON.parse(trimmed)
+    } catch {
+      return value
+    }
+  }
+  return value
+}
+
+function resolveImageSource(value: Record<string, unknown>) {
+  const directUrl = typeof value.url === 'string'
+    ? value.url
+    : typeof value.src === 'string'
+    ? value.src
+    : typeof value.image_url === 'string'
+    ? value.image_url
+    : typeof value.imageUrl === 'string'
+    ? value.imageUrl
+    : typeof value.dataUrl === 'string'
+    ? value.dataUrl
+    : null
+  if (directUrl) {
+    return directUrl
+  }
+  const source = value.source != null && typeof value.source === 'object'
+    ? (value.source as Record<string, unknown>)
+    : null
+  const data = typeof value.data === 'string'
+    ? value.data
+    : typeof value.base64 === 'string'
+    ? value.base64
+    : source != null && typeof source.data === 'string'
+    ? source.data
+    : null
+  if (!data) {
+    return null
+  }
+  const mimeType = typeof value.mimeType === 'string'
+    ? value.mimeType
+    : typeof value.mime_type === 'string'
+    ? value.mime_type
+    : source != null && typeof source.media_type === 'string'
+    ? source.media_type
+    : source != null && typeof source.mimeType === 'string'
+    ? source.mimeType
+    : source != null && typeof source.mime_type === 'string'
+    ? source.mime_type
+    : 'image/png'
+  return `data:${mimeType};base64,${data}`
+}
+
+function parseBlock(value: unknown): StructuredBlock | null {
+  if (value == null || typeof value !== 'object') {
+    return null
+  }
+  const obj = value as Record<string, unknown>
+  const rawType = typeof obj.type === 'string' ? obj.type.toLowerCase() : ''
+  if (rawType === 'text' || rawType === 'markdown' || rawType === 'md') {
+    const text = typeof obj.text === 'string'
+      ? obj.text
+      : typeof obj.content === 'string'
+      ? obj.content
+      : null
+    if (text == null) {
+      return null
+    }
+    const rawFormat = typeof obj.format === 'string' ? obj.format.toLowerCase() : 'markdown'
+    const format = rawType === 'text'
+      ? (rawFormat === 'text' || rawFormat === 'plain' ? 'text' : 'markdown')
+      : 'markdown'
+    return { type: 'text', text, format }
+  }
+  if (rawType === 'image') {
+    const src = resolveImageSource(obj)
+    if (!src) {
+      return null
+    }
+    const alt = typeof obj.alt === 'string' ? obj.alt : undefined
+    const title = typeof obj.title === 'string' ? obj.title : undefined
+    const width = typeof obj.width === 'number' ? obj.width : undefined
+    const height = typeof obj.height === 'number' ? obj.height : undefined
+    return { type: 'image', src, alt, title, width, height }
+  }
+  return null
+}
+
+function getStructuredBlocks(value: unknown): StructuredBlock[] | null {
+  const serializable = toSerializable(value)
+  const parsed = parseStructuredInput(serializable)
+  if (Array.isArray(parsed)) {
+    const blocks = parsed.map(parseBlock)
+    return blocks.every(Boolean) ? (blocks as StructuredBlock[]) : null
+  }
+  if (parsed != null && typeof parsed === 'object') {
+    const container = parsed as Record<string, unknown>
+    const content = container.content ?? container.items ?? container.blocks
+    if (Array.isArray(content)) {
+      const blocks = content.map(parseBlock)
+      return blocks.every(Boolean) ? (blocks as StructuredBlock[]) : null
+    }
+  }
+  const single = parseBlock(parsed)
+  return single ? [single] : null
+}
+
+function StructuredToolResult({ blocks }: { blocks: StructuredBlock[] }) {
+  return (
+    <div className='tool-result-structured'>
+      {blocks.map((block, index) => {
+        if (block.type === 'text') {
+          return (
+            <div className='tool-result-text' key={`text-${index}`}>
+              {block.format === 'markdown'
+                ? <MarkdownContent content={block.text} />
+                : <div className='tool-result-text-content'>{block.text}</div>}
+            </div>
+          )
+        }
+        return (
+          <div className='tool-result-image-wrapper' key={`image-${index}`}>
+            <img
+              className='tool-result-image'
+              src={block.src}
+              alt={block.alt ?? ''}
+              width={block.width}
+              height={block.height}
+            />
+            {block.title != null && block.title.length > 0 && (
+              <div className='tool-result-image-caption'>{block.title}</div>
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
 
 export function DefaultTool({
   item,
@@ -14,17 +176,16 @@ export function DefaultTool({
   resultItem?: Extract<ChatMessageContent, { type: 'tool_result' }>
 }) {
   const { t } = useTranslation()
+  const structuredBlocks = resultItem != null ? getStructuredBlocks(resultItem.content) : null
   return (
     <div className='tool-group'>
       <ToolCallBox
         header={
-          <>
-            <span className='material-symbols-rounded' style={{ fontSize: 16 }}>build</span>
-            <span>{item.name}</span>
-            <span style={{ color: 'var(--sub-text-color)', fontSize: 11, fontWeight: 400 }}>
-              {t('chat.tools.call')}
-            </span>
-          </>
+          <div className='tool-header-content'>
+            <span className='material-symbols-rounded tool-header-icon'>build</span>
+            <span className='tool-header-title'>{item.name}</span>
+            <span className='tool-header-hint'>{t('chat.tools.call')}</span>
+          </div>
         }
         content={
           <div className='tool-content'>
@@ -40,20 +201,22 @@ export function DefaultTool({
           type='result'
           isError={resultItem.is_error}
           header={
-            <>
-              <span className='material-symbols-rounded' style={{ fontSize: 16 }}>
+            <div className='tool-header-content'>
+              <span className='material-symbols-rounded tool-header-icon'>
                 {resultItem.is_error === true ? 'error' : 'check_circle'}
               </span>
-              <span>{t('chat.result')}</span>
-            </>
+              <span className='tool-header-title'>{t('chat.result')}</span>
+            </div>
           }
           content={
             <div className='tool-content'>
-              {typeof resultItem.content === 'string'
-                ? (resultItem.content.startsWith('```')
-                  ? <MarkdownContent content={resultItem.content} />
-                  : <CodeBlock code={resultItem.content} lang='text' />)
-                : <CodeBlock code={safeJsonStringify(resultItem.content, 2)} lang='json' />}
+              {structuredBlocks != null
+                ? <StructuredToolResult blocks={structuredBlocks} />
+                : (typeof resultItem.content === 'string'
+                  ? (resultItem.content.startsWith('```')
+                    ? <MarkdownContent content={resultItem.content} />
+                    : <CodeBlock code={resultItem.content} lang='text' />)
+                  : <CodeBlock code={safeJsonStringify(resultItem.content, 2)} lang='json' />)}
             </div>
           }
         />

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

@@ -1,71 +1,87 @@
 .tool-group.bash-tool {
-  .bash-header, .result-header {
+  .tool-call-header {
+    height: auto;
+    min-height: 32px;
+  }
+
+  .bash-tool__header {
+    width: 100%;
+    min-width: 0;
     display: flex;
     align-items: center;
-    gap: 6px;
+    gap: 8px;
+  }
 
-    .status-icon {
-      font-size: 16px;
-    }
+  .bash-tool__icon {
+    font-size: 16px;
+    color: var(--sub-text-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    align-self: center;
+  }
 
-    .bash-title, .result-title {
-      font-weight: 600;
-    }
+  .bash-tool__header-main {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
   }
 
-  .bash-command-preview {
-    font-family:
-      'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-    font-size: 11px;
-    color: var(--text-color);
+  .bash-tool__command-row {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+  }
+
+  .bash-tool__command-text {
+    flex: 1;
+    min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    flex: 1;
-  }
-
-  .tool-reason {
-    margin: 0 0 4px 0;
     font-size: 12px;
-    color: var(--sub-text-color);
-    line-height: 1.4;
+    color: var(--text-color);
+  }
 
-    &.markdown-body {
-      font-size: 12px;
-      color: inherit;
-      background-color: transparent;
-      padding: 0;
+  .bash-tool__command-text--clickable {
+    cursor: pointer;
+    color: var(--text-color);
 
-      p {
-        margin: 0 !important;
-        padding: 0 !important;
-      }
+    &:hover {
+      text-shadow: 0 0 .5px currentColor;
     }
   }
 
-  .bash-content-scroll {
-    max-height: 400px;
-    overflow-y: auto;
+  .bash-tool__reason-row {
+    display: flex;
+    min-width: 0;
+  }
 
-    .bash-code-wrapper {
-      background-color: transparent;
-      border: none;
-      border-radius: 0;
-      padding: 0;
-    }
+  .bash-tool__reason-text {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 
-    &::-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);
-    }
+  .bash-tool__header-tags {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex-shrink: 0;
+  }
+
+  .bash-tool__command-detail {
+    margin-bottom: 6px;
+  }
+
+  .tool-scroll {
+    max-height: 270px;
   }
 }

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;