@vibe-forge/client 0.10.1 → 0.11.1

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

@@ -5,6 +5,22 @@
   overflow: hidden;
   background-color: var(--bg-color);
 
+  &.tool-group--compact {
+    border: none;
+    border-radius: 0;
+    background: transparent;
+
+    .tool-call-box {
+      background: transparent;
+    }
+
+    .tool-call-header,
+    .tool-result-header,
+    .tool-call-body {
+      background: transparent;
+    }
+  }
+
   .tool-call-box {
     border: none;
     margin: 0;
@@ -31,7 +47,7 @@
     background-color: var(--tag-bg);
     transition: text-shadow .4s ease;
 
-    &.collapsed {
+    &.is-static {
       cursor: default;
     }
 
@@ -47,16 +63,62 @@
       text-shadow: 0 0 .5px currentColor;
     }
 
+    &.is-static:hover {
+      text-shadow: none;
+    }
+
     .material-symbols-rounded {
       font-size: 16px;
       color: var(--sub-text-color);
 
       &.expand-icon {
         font-size: 14px;
+        transition: transform .22s ease, opacity .18s ease;
+        transform-origin: center;
+
+        &.is-expanded {
+          transform: rotate(180deg);
+        }
       }
     }
   }
 
+  .tool-call-box--inline {
+    .tool-call-header {
+      height: auto;
+      min-height: 24px;
+      padding: 2px 0;
+      background: transparent;
+      border-bottom: none;
+      align-items: center;
+    }
+
+    &.expanded {
+      .tool-call-header {
+        border-bottom: none;
+      }
+    }
+
+    .tool-call-header-main {
+      align-items: center;
+    }
+
+    .expand-icon {
+      margin-top: 0;
+      opacity: .72;
+    }
+
+    .tool-call-body-shell {
+      padding-left: 0;
+    }
+
+    .tool-call-body {
+      padding: 0 0 4px;
+      background: transparent;
+      border-top: none;
+    }
+  }
+
   .tool-result-header {
     padding: 6px 10px;
     height: 32px;
@@ -113,10 +175,40 @@
     }
   }
 
+  .tool-call-body-shell {
+    display: grid;
+    grid-template-rows: 0fr;
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    overflow: hidden;
+    transition:
+      grid-template-rows .22s ease,
+      padding-left .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,
+        padding-left .22s ease,
+        opacity .18s ease;
+    }
+  }
+
+  .tool-call-box--inline .tool-call-body-shell.expanded {
+    padding-left: 18px;
+    padding-top: 6px;
+  }
+
   .tool-call-body {
+    min-height: 0;
     padding: 0;
     overflow: hidden;
-    transition: all .2s ease-in-out;
     background-color: var(--bg-color);
 
     .tool-call-box.result & {
@@ -126,47 +218,65 @@
 
     .tool-content {
       padding: 0;
+    }
 
-      // Override code block wrapper styles
-      .code-block-wrapper {
-        border: none;
-        border-radius: 0;
-      }
+    .code-block-wrapper {
+      border: none;
+      border-radius: 0;
+    }
 
-      .tool-result-structured {
-        display: flex;
-        flex-direction: column;
-        gap: 12px;
-        padding: 12px;
-      }
+    .tool-result-structured {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      padding: 2px 0;
+    }
 
-      .tool-result-text {
-        font-size: 13px;
-        color: var(--text-color);
-      }
+    .tool-result-text {
+      font-size: 13px;
+      color: var(--text-color);
+    }
 
-      .tool-result-text-content {
-        white-space: pre-wrap;
-        line-height: 1.6;
-      }
+    .tool-result-text-content {
+      white-space: pre-wrap;
+      line-height: 1.6;
+    }
 
-      .tool-result-image-wrapper {
-        display: flex;
-        flex-direction: column;
-        gap: 6px;
-      }
+    .tool-result-image-wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
 
-      .tool-result-image {
-        max-width: 100%;
-        border-radius: 6px;
-        border: 1px solid var(--border-color);
-        background: var(--bg-color);
-      }
+    .tool-result-image {
+      max-width: 100%;
+      border-radius: 6px;
+      border: 1px solid var(--border-color);
+      background: var(--bg-color);
+    }
 
-      .tool-result-image-caption {
-        font-size: 12px;
-        color: var(--sub-text-color);
-      }
+    .tool-result-image-caption {
+      font-size: 12px;
+      color: var(--sub-text-color);
+    }
+
+    .tool-result-list {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      padding: 2px 0;
+    }
+
+    .tool-result-list-item {
+      padding: 4px 0 4px 10px;
+      border: none;
+      border-left: 1px solid var(--border-color);
+      border-radius: 0;
+      background: transparent;
+      color: var(--text-color);
+      font-family: var(--font-mono);
+      font-size: 12px;
+      overflow-wrap: anywhere;
     }
   }
 
@@ -352,4 +462,220 @@
     border-radius: 0;
     padding: 0;
   }
+
+  .tool-summary-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 6px;
+    width: 100%;
+    min-width: 0;
+  }
+
+  .tool-summary-header__lead {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .tool-summary-header__action {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    flex-shrink: 0;
+    min-width: 0;
+    color: var(--text-color);
+  }
+
+  .tool-summary-header__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 14px;
+    min-width: 14px;
+    color: var(--sub-text-color);
+
+    .material-symbols-rounded,
+    i {
+      font-size: 14px;
+      line-height: 1;
+    }
+  }
+
+  .tool-summary-header__title {
+    font-size: 12px;
+    line-height: 1.35;
+    font-weight: 500;
+    color: var(--sub-text-color);
+    white-space: nowrap;
+  }
+
+  .tool-summary-header__toggle {
+    font-size: 13px;
+    color: var(--sub-text-color);
+    transition: transform .22s ease, opacity .18s ease;
+    transform-origin: center;
+    opacity: .78;
+    flex-shrink: 0;
+
+    &.is-expanded {
+      transform: rotate(180deg);
+    }
+  }
+
+  .tool-summary-header__target {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 10px;
+    line-height: 1.4;
+    color: var(--sub-text-color);
+  }
+
+  .tool-summary-header__target--mono {
+    font-family: var(--font-mono);
+    font-size: 10px;
+  }
+
+  .tool-summary-header__meta {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    font-size: 11px;
+    line-height: 1;
+    color: var(--sub-text-color);
+  }
+
+  .tool-detail-sections {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .tool-detail-section {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    min-width: 0;
+  }
+
+  .tool-detail-section__header {
+    display: flex;
+    align-items: center;
+    min-height: 16px;
+  }
+
+  .tool-detail-section__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    font-size: 15px;
+    color: var(--sub-text-color);
+    cursor: help;
+  }
+
+  .tool-detail-section__text {
+    font-size: 12px;
+    line-height: 1.55;
+    color: var(--text-color);
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+
+  .tool-detail-list {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .tool-detail-list-item {
+    padding: 4px 0 4px 10px;
+    border: none;
+    border-left: 1px solid var(--border-color);
+    border-radius: 0;
+    background: transparent;
+    color: var(--text-color);
+    font-family: var(--font-mono);
+    font-size: 12px;
+    overflow-wrap: anywhere;
+  }
+
+  .tool-inline-token-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+  }
+
+  .tool-inline-token {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    max-width: min(100%, 320px);
+    min-width: 0;
+    padding: 2px 8px 2px 6px;
+    border: 1px solid var(--border-color);
+    border-radius: 999px;
+    background: transparent;
+    color: var(--text-color);
+    cursor: help;
+  }
+
+  .tool-inline-token__icon {
+    flex-shrink: 0;
+    font-size: 14px;
+    color: var(--sub-text-color);
+  }
+
+  .tool-inline-token__value {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-family: var(--font-mono);
+    font-size: 11px;
+    line-height: 1.4;
+  }
+
+  .tool-tooltip-content {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    max-width: min(420px, 70vw);
+  }
+
+  .tool-tooltip-content__title {
+    font-size: 11px;
+    font-weight: 600;
+    line-height: 1.35;
+  }
+
+  .tool-tooltip-content__value {
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+    font-family: var(--font-mono);
+    font-size: 11px;
+    line-height: 1.4;
+  }
+
+  .tool-status {
+    display: inline-flex;
+    align-items: center;
+
+    .material-symbols-rounded {
+      font-size: 16px;
+    }
+
+    &.tool-status--success {
+      color: var(--success-color);
+    }
+
+    &.tool-status--error {
+      color: var(--danger-color);
+    }
+  }
 }

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

@@ -1,6 +1,11 @@
 import './ToolCallBox.scss'
 import React, { useState } from 'react'
 
+type ToolCallBoxHeaderRender = (state: {
+  isExpanded: boolean
+  isCollapsible: boolean
+}) => React.ReactNode
+
 export function ToolCallBox({
   header,
   content,
@@ -8,23 +13,32 @@ export function ToolCallBox({
   type = 'call',
   defaultExpanded = false,
   collapsible = true,
+  variant = 'default',
   onDoubleClick
 }: {
-  header: React.ReactNode
-  content: React.ReactNode
+  header: React.ReactNode | ToolCallBoxHeaderRender
+  content?: React.ReactNode
   isError?: boolean
   type?: 'call' | 'result'
   defaultExpanded?: boolean
   collapsible?: boolean
+  variant?: 'default' | 'inline'
   onDoubleClick?: (e: React.MouseEvent) => void
 }) {
   const [expanded, setExpanded] = useState(defaultExpanded || !collapsible)
+  const hasBody = content != null && content !== false
+  const isCollapsible = collapsible && hasBody
 
-  const isExpanded = !collapsible || expanded
+  const isExpanded = hasBody && (!isCollapsible || expanded)
+  const headerContent = typeof header === 'function'
+    ? header({ isExpanded, isCollapsible })
+    : header
 
   return (
     <div
-      className={`tool-call-box ${type === 'result' ? 'result' : ''} ${isExpanded ? 'expanded' : 'collapsed'}`}
+      className={`tool-call-box tool-call-box--${variant} ${type === 'result' ? 'result' : ''} ${
+        isExpanded ? 'expanded' : 'collapsed'
+      }`}
       onDoubleClick={(e) => {
         if (onDoubleClick) {
           e.stopPropagation()
@@ -33,21 +47,29 @@ export function ToolCallBox({
       }}
     >
       <div
-        className={`tool-call-header ${type === 'result' && isError ? 'error' : ''}`}
-        onClick={() => collapsible && setExpanded(!expanded)}
+        className={`tool-call-header ${type === 'result' && isError ? 'error' : ''} ${
+          isCollapsible ? 'is-collapsible' : 'is-static'
+        }`}
+        aria-expanded={isCollapsible ? isExpanded : undefined}
+        onClick={() => isCollapsible && setExpanded(!expanded)}
       >
         <div className='tool-call-header-main'>
-          {header}
+          {headerContent}
         </div>
-        {collapsible && (
-          <span className='material-symbols-rounded expand-icon'>
-            {isExpanded ? 'expand_less' : 'expand_more'}
+        {isCollapsible && typeof header !== 'function' && (
+          <span className={`material-symbols-rounded expand-icon ${isExpanded ? 'is-expanded' : ''}`}>
+            expand_more
           </span>
         )}
       </div>
-      {isExpanded && (
-        <div className='tool-call-body'>
-          {content}
+      {hasBody && (
+        <div
+          className={`tool-call-body-shell ${isExpanded ? 'expanded' : 'collapsed'}`}
+          aria-hidden={!isExpanded}
+        >
+          <div className='tool-call-body'>
+            {content}
+          </div>
         </div>
       )}
     </div>

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

@@ -0,0 +1,138 @@
+.tool-diff-viewer {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+}
+
+.tool-diff-viewer__toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+}
+
+.tool-diff-viewer__legend {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  flex-wrap: wrap;
+}
+
+.tool-diff-viewer__lang {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 6px;
+  border: 1px solid var(--border-color);
+  border-radius: 999px;
+  color: var(--sub-text-color);
+  font-family: var(--font-mono);
+  font-size: 10px;
+  line-height: 1.5;
+  min-height: 20px;
+}
+
+.tool-diff-viewer__meta-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0 8px 0 6px;
+  border: 1px solid var(--border-color);
+  border-radius: 999px;
+  color: var(--sub-text-color);
+  font-size: 11px;
+  line-height: 1.5;
+  min-height: 20px;
+
+  .material-symbols-rounded {
+    font-size: 14px;
+  }
+}
+
+.tool-diff-viewer__meta-item--success {
+  color: var(--success-color);
+}
+
+.tool-diff-viewer__meta-item--muted {
+  opacity: .8;
+}
+
+.tool-diff-viewer__meta-label {
+  color: var(--sub-text-color);
+}
+
+.tool-diff-viewer__meta-value {
+  color: var(--text-color);
+  font-weight: 500;
+}
+
+.tool-diff-viewer__mode-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  flex-shrink: 0;
+}
+
+.tool-diff-viewer__mode-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--sub-text-color);
+  cursor: pointer;
+  transition:
+    border-color .18s ease,
+    color .18s ease,
+    background-color .18s ease;
+
+  &:hover {
+    border-color: var(--border-color);
+    color: var(--text-color);
+    background: var(--bg-color-hover);
+  }
+
+  &.is-active {
+    border-color: var(--border-color);
+    color: var(--text-color);
+    background: var(--tag-bg);
+  }
+
+  .material-symbols-rounded {
+    font-size: 15px;
+  }
+}
+
+.tool-diff-viewer__editor {
+  overflow: hidden;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  background: transparent;
+}
+
+.tool-diff-viewer__editor {
+  .monaco-diff-editor,
+  .monaco-editor,
+  .monaco-editor-background,
+  .monaco-editor .margin,
+  .monaco-editor .inputarea.ime-input {
+    background: transparent !important;
+  }
+
+  .monaco-diff-editor .editor.original,
+  .monaco-diff-editor .editor.modified {
+    background: transparent !important;
+  }
+
+  .monaco-diff-editor .diffOverview,
+  .monaco-diff-editor .diffOverviewRuler,
+  .monaco-editor .scroll-decoration,
+  .monaco-editor .minimap-shadow-visible {
+    box-shadow: none !important;
+  }
+}