@vibe-forge/client 0.10.1 → 0.11.1

package/src/components/chat/tools/core/ToolDiffViewer.tsx

@@ -0,0 +1,180 @@
+import './ToolDiffViewer.scss'
+
+import { DiffEditor, loader } from '@monaco-editor/react'
+import { Tooltip } from 'antd'
+import type { editor as MonacoEditorNamespace } from 'monaco-editor'
+import * as monacoApi from 'monaco-editor'
+import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
+import React, { useEffect, useMemo, useState } from 'react'
+
+import { TOOL_TOOLTIP_PROPS } from './tool-display'
+
+const DIFF_LINE_HEIGHT = 18
+const MIN_DIFF_HEIGHT = 96
+const MAX_DIFF_HEIGHT = 360
+
+const monacoRuntime = globalThis as typeof globalThis & {
+  MonacoEnvironment?: {
+    getWorker: () => Worker
+  }
+}
+
+if (monacoRuntime.MonacoEnvironment == null) {
+  monacoRuntime.MonacoEnvironment = {
+    getWorker: () => new EditorWorker()
+  }
+}
+
+loader.config({ monaco: monacoApi })
+
+const getThemeName = () => (document.documentElement.classList.contains('dark') ? 'vs-dark' : 'vs')
+
+const getEditorHeight = (original: string, modified: string) => {
+  const lineCount = Math.max(
+    original === '' ? 1 : original.split('\n').length,
+    modified === '' ? 1 : modified.split('\n').length
+  )
+
+  return Math.min(MAX_DIFF_HEIGHT, Math.max(MIN_DIFF_HEIGHT, lineCount * DIFF_LINE_HEIGHT + 28))
+}
+
+const getModeIcon = (mode: 'split' | 'inline') => (
+  <span className='material-symbols-rounded'>
+    {mode === 'split' ? 'splitscreen_right' : 'view_agenda'}
+  </span>
+)
+
+export interface ToolDiffMetaItem {
+  icon?: string
+  label: string
+  value?: string
+  tone?: 'default' | 'success' | 'muted'
+}
+
+function useMonacoTheme() {
+  const [themeName, setThemeName] = useState(getThemeName)
+
+  useEffect(() => {
+    const observer = new MutationObserver(() => {
+      setThemeName(getThemeName())
+    })
+
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class']
+    })
+
+    return () => {
+      observer.disconnect()
+    }
+  }, [])
+
+  return themeName
+}
+
+export function ToolDiffViewer({
+  original,
+  modified,
+  language,
+  metaItems = [],
+  splitLabel,
+  inlineLabel
+}: {
+  original: string
+  modified: string
+  language?: string
+  metaItems?: ToolDiffMetaItem[]
+  splitLabel: string
+  inlineLabel: string
+}) {
+  const [viewMode, setViewMode] = useState<'split' | 'inline'>('split')
+  const themeName = useMonacoTheme()
+  const height = useMemo(() => getEditorHeight(original, modified), [modified, original])
+
+  return (
+    <div className='tool-diff-viewer'>
+      <div className='tool-diff-viewer__toolbar'>
+        <div className='tool-diff-viewer__legend'>
+          {metaItems.map(item => (
+            <span
+              key={`${item.label}-${item.value ?? ''}`}
+              className={`tool-diff-viewer__meta-item ${
+                item.tone != null ? `tool-diff-viewer__meta-item--${item.tone}` : ''
+              }`}
+            >
+              {item.icon != null && item.icon !== '' && (
+                <span className='material-symbols-rounded'>{item.icon}</span>
+              )}
+              <span className='tool-diff-viewer__meta-label'>{item.label}</span>
+              {item.value != null && item.value !== '' && (
+                <span className='tool-diff-viewer__meta-value'>{item.value}</span>
+              )}
+            </span>
+          ))}
+          {language != null && language !== '' && (
+            <span className='tool-diff-viewer__lang'>{language}</span>
+          )}
+        </div>
+
+        <div className='tool-diff-viewer__mode-switch' role='tablist' aria-label='Diff view mode'>
+          {(['split', 'inline'] as const).map(mode => {
+            const label = mode === 'split' ? splitLabel : inlineLabel
+            return (
+              <Tooltip key={mode} title={label} {...TOOL_TOOLTIP_PROPS}>
+                <button
+                  type='button'
+                  className={`tool-diff-viewer__mode-button ${viewMode === mode ? 'is-active' : ''}`}
+                  aria-label={label}
+                  aria-pressed={viewMode === mode}
+                  onClick={() => setViewMode(mode)}
+                >
+                  {getModeIcon(mode)}
+                </button>
+              </Tooltip>
+            )
+          })}
+        </div>
+      </div>
+
+      <div
+        className='tool-diff-viewer__editor'
+        style={{ height: `${height}px` }}
+        aria-label='tool diff viewer'
+      >
+        <DiffEditor
+          original={original}
+          modified={modified}
+          originalLanguage={language ?? 'text'}
+          modifiedLanguage={language ?? 'text'}
+          theme={themeName}
+          loading={null}
+          options={{
+            automaticLayout: true,
+            contextmenu: false,
+            diffCodeLens: false,
+            fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+            fontSize: 12,
+            glyphMargin: false,
+            hideUnchangedRegions: { enabled: false },
+            lineDecorationsWidth: 8,
+            lineHeight: DIFF_LINE_HEIGHT,
+            minimap: { enabled: false },
+            originalEditable: false,
+            overviewRulerBorder: false,
+            readOnly: true,
+            renderIndicators: true,
+            renderMarginRevertIcon: false,
+            renderOverviewRuler: false,
+            renderSideBySide: viewMode === 'split',
+            scrollBeyondLastLine: false,
+            scrollbar: {
+              alwaysConsumeMouseWheel: false,
+              useShadows: false
+            },
+            wordWrap: 'on'
+          } satisfies MonacoEditorNamespace.IDiffEditorConstructionOptions}
+        />
+      </div>
+    </div>
+  )
+}

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

@@ -11,114 +11,97 @@
   .tool-group-wrapper {
     margin: 0;
 
-    &.single-item {
-      // No special style for single item
-    }
-
     &.card-style {
-      border: 1px solid var(--border-color);
-      border-radius: 8px;
-      background-color: var(--bg-color);
-      overflow: hidden;
-
       .tool-group-header {
         display: flex;
         align-items: center;
-        justify-content: space-between;
-        padding: 8px 12px;
-        background-color: var(--tag-bg, #f9fafb);
-        border-bottom: 1px solid transparent;
+        justify-content: flex-start;
+        gap: 4px;
+        padding: 1px 0;
+        background: transparent;
         cursor: pointer;
         user-select: none;
-        transition: background-color .2s, text-shadow .4s ease;
+        color: var(--sub-text-color);
+        transition: color .2s ease;
 
         .header-left {
-          display: flex;
-          align-items: center;
-          gap: 8px;
-          font-size: 13px;
+          min-width: 0;
+          flex: 0 1 auto;
+          font-size: 12px;
           font-weight: 500;
-          color: var(--text-color);
-
-          .material-symbols-rounded {
-            font-size: 18px;
-            color: var(--sub-text-color);
-          }
+          line-height: 1.45;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
         }
 
         .expand-icon {
-          font-size: 20px;
-          color: var(--sub-text-color);
+          font-size: 16px;
+          flex-shrink: 0;
+          transition: transform .22s ease, opacity .18s ease;
+          transform-origin: center;
+
+          &.is-expanded {
+            transform: rotate(90deg);
+          }
         }
 
         &:hover {
-          opacity: .8;
+          color: var(--text-color);
+        }
+      }
+
+      .tool-group-list-shell {
+        display: grid;
+        grid-template-rows: 0fr;
+        opacity: 0;
+        visibility: hidden;
+        pointer-events: none;
+        transition:
+          grid-template-rows .22s ease,
+          opacity .18s ease,
+          visibility 0s linear .22s;
+
+        &.expanded {
+          grid-template-rows: 1fr;
+          opacity: 1;
+          visibility: visible;
+          pointer-events: auto;
+          transition: grid-template-rows .22s ease, opacity .18s ease;
         }
       }
 
       .tool-group-list {
+        min-height: 0;
+        overflow: hidden;
         display: flex;
         flex-direction: column;
-        gap: 0;
-        padding: 0;
-        border-top: 1px solid var(--border-color);
-        background-color: var(--bg-color);
-      }
-
-      .tool-group-last-item {
-        background-color: var(--bg-color);
-      }
+        gap: 2px;
+        padding: 4px 0 0;
 
-      // Shared style reset for all tool groups inside the card
-      .tool-group-list, .tool-group-last-item {
         .tool-group {
           margin: 0;
           border: none;
           border-radius: 0;
-          background-color: transparent;
-          overflow: visible; // Allow timeline line to overflow
+          background: transparent;
+          overflow: visible;
 
           .tool-call-box {
             margin: 0;
             border: none;
             border-radius: 0;
+            background: transparent;
 
             .tool-call-header {
-              padding: 8px 12px;
-              background-color: transparent;
-
-              &:hover {
-                text-shadow: 0 0 .5px currentColor;
-              }
+              background: transparent;
             }
 
             .tool-call-body {
-              padding: 0;
-              background-color: transparent;
+              background: transparent;
             }
           }
         }
       }
-
-      // Timeline gap style
-      .tool-group-list .tool-group {
-        position: relative;
-        margin-bottom: 12px; // Increased gap between items
-        border-bottom: none; // Remove border as we use gap + line
-
-        &::after {
-          content: '';
-          position: absolute;
-          left: 19px;
-          bottom: -11px; // Adjusted for larger margin
-          height: 10px; // Increased length for larger gap
-          width: 2px;
-          background-color: var(--sub-text-color);
-          z-index: 99;
-          border-radius: 4px;
-          opacity: .5;
-        }
-      }
     }
   }
 
@@ -148,14 +131,9 @@
 }
 
 html.dark .tool-group-container .tool-group-wrapper.card-style {
-  background-color: #1f2937; // Darker bg for card
   .tool-group-header {
-    background-color: #374151;
     &:hover {
-      text-shadow: 0 0 .5px currentColor;
+      color: #e5e7eb;
     }
   }
-  .tool-group-list, .tool-group-last-item {
-    background-color: #1f2937;
-  }
 }

package/src/components/chat/tools/core/ToolGroup.tsx

@@ -7,6 +7,7 @@ import { useSearchParams } from 'react-router-dom'
 import { MessageContextMenu } from '../../messages/MessageContextMenu'
 import { MessageFooter } from '../../messages/MessageFooter'
 import { ToolRenderer } from './ToolRenderer'
+import { getToolGroupSummaryText } from './tool-summary'
 
 interface ToolGroupProps {
   anchorId: string
@@ -38,15 +39,14 @@ function ToolGroupComponent({
   const isDebugMode = searchParams.get('debug') === 'true'
   const [expanded, setExpanded] = useState(false)
 
-  const lastItem = items[items.length - 1]
-  const otherItems = items.slice(0, -1)
+  if (items.length === 0) return null
+
+  const summaryText = getToolGroupSummaryText(items, t)
   const shouldForceExpand = targetToolUseId != null &&
     targetToolUseId !== '' &&
-    otherItems.some(item => item.item.id === targetToolUseId)
+    items.some(item => item.item.id === targetToolUseId)
   const isExpanded = expanded || shouldForceExpand
 
-  if (items.length === 0) return null
-
   // If only one item, just render it directly (wrapped in container for footer)
   if (items.length === 1) {
     return (
@@ -96,48 +96,33 @@ function ToolGroupComponent({
     >
       <div id={anchorId} className='tool-group-container'>
         <div className='tool-group-wrapper card-style'>
-        <div
-          className='tool-group-header'
-          onClick={() => setExpanded(!expanded)}
-        >
-          <div className='header-left'>
-            <span className='material-symbols-rounded'>dataset</span>
-            <span>{t('chat.usedTools', { count: items.length })}</span>
+          <div
+            className='tool-group-header'
+            aria-expanded={isExpanded}
+            onClick={() => setExpanded(!expanded)}
+          >
+            <div className='header-left'>
+              <span>{summaryText}</span>
+            </div>
+            <span className={`material-symbols-rounded expand-icon ${isExpanded ? 'is-expanded' : ''}`}>
+              chevron_right
+            </span>
           </div>
-          <span className='material-symbols-rounded expand-icon'>
-            {isExpanded ? 'expand_less' : 'expand_more'}
-          </span>
-        </div>
 
-        {isExpanded && (
-          <div className='tool-group-list'>
-            {otherItems.map((it, idx) => (
-              <div key={it.item.id || idx} data-tool-use-id={it.item.id}>
+          <div
+            className={`tool-group-list-shell ${isExpanded ? 'expanded' : 'collapsed'}`}
+            aria-hidden={!isExpanded}
+          >
+            <div className='tool-group-list'>
+              {items.map((it, idx) => (
                 <ToolRenderer
+                  key={it.item.id || idx}
                   item={it.item}
                   resultItem={it.resultItem}
                 />
-              </div>
-            ))}
-          </div>
-        )}
-
-          {
-            /* Always show the last item, but if expanded, it's just part of the list visually.
-              If collapsed, it appears "below" the header.
-              Actually, to make it look like "part of the list", we should just put it in the flow.
-
-              When collapsed: Header + Last Item
-              When expanded: Header + Other Items + Last Item
-          */
-          }
-          <div className='tool-group-last-item' data-tool-use-id={lastItem.item.id}>
-            <ToolRenderer
-              item={lastItem.item}
-              resultItem={lastItem.resultItem}
-            />
+              ))}
+            </div>
           </div>
-
         </div>
 
         {footer && isDebugMode && (

package/src/components/chat/tools/core/ToolRenderer.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import type { ChatMessageContent } from '@vibe-forge/core'
 
 import { DefaultTool } from '../DefaultTool'
-import { BashTool, adapterClaudeToolRenders } from '../adapter-claude'
+import { GenericClaudeTool, adapterClaudeToolRenders, isClaudeToolName } from '../adapter-claude'
 import { chromeDevtoolsToolRenders } from '../plugin-chrome-devtools'
 import { taskToolRenders } from '../task'
 
@@ -28,7 +28,7 @@ export function ToolRenderer({
 }) {
   const toolName = item.name
   const foundRenderer = TOOL_RENDERERS[toolName] ?? ToolRenderer.findRendererByInput(item)
-  const Renderer = foundRenderer ?? DefaultTool
+  const Renderer = foundRenderer ?? (isClaudeToolName(toolName) ? GenericClaudeTool : DefaultTool)
   return <Renderer item={item} resultItem={resultItem} />
 }
 
@@ -40,7 +40,7 @@ ToolRenderer.findRendererByInput = (item: Extract<ChatMessageContent, { type: 't
       'command' in input &&
       (('description' in input && input.description != null) || ('reason' in input && input.reason != null))
     ) {
-      return BashTool
+      return GenericClaudeTool
     }
   }
   return null

package/src/components/chat/tools/core/ToolResultContent.tsx

@@ -0,0 +1,66 @@
+import { CodeBlock } from '#~/components/CodeBlock'
+import { MarkdownContent } from '#~/components/MarkdownContent'
+import { safeJsonStringify } from '#~/utils/safe-serialize'
+
+import { getStringList, getStructuredBlocks, looksLikeMarkdown } from './tool-result-content-utils'
+
+export function ToolResultContent({
+  content,
+  preferMarkdown = false
+}: {
+  content: unknown
+  preferMarkdown?: boolean
+}) {
+  const structuredBlocks = getStructuredBlocks(content)
+  if (structuredBlocks != null) {
+    return (
+      <div className='tool-result-structured'>
+        {structuredBlocks.map((block, index) => (
+          block.type === 'text'
+            ? (
+              <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>
+            )
+            : (
+              <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 !== '' && (
+                  <div className='tool-result-image-caption'>{block.title}</div>
+                )}
+              </div>
+            )
+        ))}
+      </div>
+    )
+  }
+
+  const stringList = getStringList(content)
+  if (stringList != null) {
+    return (
+      <div className='tool-result-list'>
+        {stringList.map(item => (
+          <div className='tool-result-list-item' key={item}>{item}</div>
+        ))}
+      </div>
+    )
+  }
+
+  if (typeof content === 'string') {
+    if (content.startsWith('```') || (preferMarkdown && looksLikeMarkdown(content))) {
+      return <MarkdownContent content={content} />
+    }
+
+    return <CodeBlock code={content} lang='text' />
+  }
+
+  return <CodeBlock code={safeJsonStringify(content, 2)} lang='json' />
+}

package/src/components/chat/tools/core/ToolSummaryHeader.tsx

@@ -0,0 +1,67 @@
+import { Tooltip } from 'antd'
+import React from 'react'
+
+import { TOOL_TOOLTIP_PROPS } from './tool-display'
+
+export function ToolSummaryHeader({
+  icon,
+  title,
+  target,
+  targetTitle,
+  meta,
+  metaTitle,
+  expanded = false,
+  collapsible = false,
+  targetMonospace = false
+}: {
+  icon?: React.ReactNode
+  title: React.ReactNode
+  target?: React.ReactNode
+  targetTitle?: string
+  meta?: React.ReactNode
+  metaTitle?: string
+  expanded?: boolean
+  collapsible?: boolean
+  targetMonospace?: boolean
+}) {
+  const hasTarget = target != null && target !== ''
+  const targetNode = hasTarget
+    ? (
+      <span className={`tool-summary-header__target ${targetMonospace ? 'tool-summary-header__target--mono' : ''}`}>
+        {target}
+      </span>
+    )
+    : null
+
+  return (
+    <div className='tool-summary-header'>
+      <div className='tool-summary-header__lead'>
+        <span className='tool-summary-header__action'>
+          {icon != null && (
+            <span className='tool-summary-header__icon'>{icon}</span>
+          )}
+          <span className='tool-summary-header__title'>{title}</span>
+        </span>
+        {hasTarget && (
+          targetTitle != null && targetTitle !== ''
+            ? (
+              <Tooltip title={targetTitle} {...TOOL_TOOLTIP_PROPS}>
+                {targetNode}
+              </Tooltip>
+            )
+            : targetNode
+        )}
+        {collapsible && (
+          <span className={`material-symbols-rounded tool-summary-header__toggle ${expanded ? 'is-expanded' : ''}`}>
+            expand_more
+          </span>
+        )}
+      </div>
+      {meta != null && (
+        <span className='tool-summary-header__meta' title={metaTitle}>
+          {meta}
+        </span>
+      )}
+    </div>
+  )
+}