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

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

@@ -0,0 +1,356 @@
+.tool-group {
+  margin: 0;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  overflow: hidden;
+  background-color: var(--bg-color);
+
+  .tool-call-box {
+    border: none;
+    margin: 0;
+    border-radius: 0;
+
+    &.result {
+      background-color: transparent;
+    }
+  }
+
+  .tool-call-header {
+    padding: 6px 10px;
+    height: 32px;
+    box-sizing: border-box;
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--text-color);
+    background-color: var(--tag-bg);
+    transition: text-shadow .4s ease;
+
+    &.collapsed {
+      cursor: default;
+    }
+
+    .tool-call-header-main {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      flex: 1;
+      min-width: 0;
+    }
+
+    &:hover {
+      text-shadow: 0 0 .5px currentColor;
+    }
+
+    .material-symbols-rounded {
+      font-size: 16px;
+      color: var(--sub-text-color);
+
+      &.expand-icon {
+        font-size: 14px;
+      }
+    }
+  }
+
+  .tool-result-header {
+    padding: 6px 10px;
+    height: 32px;
+    box-sizing: border-box;
+    cursor: pointer;
+    user-select: none;
+    border-top: 1px solid var(--border-color);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--success-color);
+    background-color: var(--tag-bg);
+
+    &.error {
+      color: var(--danger-color);
+      .material-symbols-rounded {
+        color: var(--danger-color);
+      }
+    }
+
+    &:hover {
+      opacity: .8;
+    }
+
+    .material-symbols-rounded {
+      font-size: 16px;
+      color: var(--success-color);
+    }
+  }
+
+  .tool-call-box:first-child {
+    .tool-result-header {
+      border-top: none;
+    }
+  }
+
+  .tool-call-box.expanded {
+    .tool-call-header {
+      border-bottom: 1px solid var(--border-color);
+    }
+    .tool-result-header {
+      border-bottom: none;
+    }
+  }
+
+  .tool-call-box.collapsed {
+    .tool-call-header {
+      border-bottom: none;
+    }
+    .tool-result-header {
+      border-bottom: none;
+    }
+  }
+
+  .tool-call-body {
+    padding: 0;
+    overflow: hidden;
+    transition: all .2s ease-in-out;
+    background-color: var(--bg-color);
+
+    .tool-call-box.result & {
+      background-color: var(--bg-color);
+      border-top: 1px dashed var(--border-color);
+    }
+
+    .tool-content {
+      padding: 0;
+
+      // Override code block wrapper styles
+      .code-block-wrapper {
+        border: none;
+        border-radius: 0;
+      }
+
+        .tool-result-structured {
+          display: flex;
+          flex-direction: column;
+          gap: 12px;
+          padding: 12px;
+        }
+
+        .tool-result-text {
+          font-size: 13px;
+          color: var(--text-color);
+        }
+
+        .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 {
+          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-header-content {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    width: 100%;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .tool-header-icon {
+    font-size: 16px;
+    color: var(--sub-text-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+  }
+
+  .tool-header-title {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--text-color);
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  .tool-header-primary {
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--text-color);
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  .tool-header-secondary {
+    font-size: 12px;
+    color: var(--sub-text-color);
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .tool-header-hint {
+    font-size: 11px;
+    font-weight: 400;
+    color: var(--sub-text-color);
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  .tool-header-chip {
+    padding: 1px 6px;
+    border: 1px solid var(--border-color);
+    border-radius: 999px;
+    font-size: 10px;
+    font-weight: 600;
+    color: var(--sub-text-color);
+    background: var(--bg-color);
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  .tool-header-mono {
+    font-family: var(--font-mono);
+  }
+
+  .tool-input-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px 12px;
+  }
+
+  .tool-input-item {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 12px;
+    color: var(--sub-text-color);
+  }
+
+  .tool-input-label {
+    font-weight: 500;
+  }
+
+  .tool-input-value {
+    font-family: var(--font-mono);
+    background: var(--bg-color-hover);
+    padding: 2px 4px;
+    border-radius: 4px;
+    color: var(--text-color);
+  }
+
+  .tool-placeholder {
+    padding: 0;
+    color: var(--sub-text-color);
+    font-size: 12px;
+    font-style: italic;
+  }
+
+  .tool-header-stack {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+    flex: 1;
+  }
+
+  .tool-header-row {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+  }
+
+  .tool-header-row-text {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .tool-header-tags {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex-shrink: 0;
+  }
+
+  .tool-icon-tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 1px 6px;
+    border: 1px solid var(--border-color);
+    border-radius: 999px;
+    background: var(--bg-color);
+    color: var(--sub-text-color);
+    font-size: 11px;
+    line-height: 1;
+  }
+
+  .tool-icon-tag__icon {
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .tool-icon-tag__text {
+    font-family: var(--font-mono);
+    font-size: 10px;
+    color: var(--text-color);
+  }
+
+  .tool-scroll {
+    max-height: 360px;
+    overflow-y: auto;
+
+    &::-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);
+    }
+  }
+
+  .tool-code-wrapper {
+    background-color: transparent;
+    border: none;
+    border-radius: 0;
+    padding: 0;
+  }
+}

package/src/components/chat/{ToolGroup.tsx → tools/core/ToolGroup.tsx}

@@ -1,14 +1,12 @@
+import './ToolGroup.scss'
+
 import type { ChatMessage, ChatMessageContent } from '@vibe-forge/core'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { MessageFooter } from './MessageFooter'
-import './ToolGroup.scss'
+import { MessageFooter } from '../../Messages/MessageFooter'
 import { ToolRenderer } from './ToolRenderer'
 
-export function ToolGroup({
-  items,
-  footer
-}: {
+type ToolGroupProps = {
   items: {
     item: Extract<ChatMessageContent, { type: 'tool_use' }>
     resultItem?: Extract<ChatMessageContent, { type: 'tool_result' }>
@@ -19,7 +17,12 @@ export function ToolGroup({
     createdAt: number
     originalMessage: ChatMessage
   }
-}) {
+}
+
+function ToolGroupComponent({
+  items,
+  footer
+}: ToolGroupProps) {
   const { t } = useTranslation()
   const [expanded, setExpanded] = useState(false)
 
@@ -100,3 +103,19 @@ export function ToolGroup({
     </div>
   )
 }
+
+const areToolGroupPropsEqual = (prev: ToolGroupProps, next: ToolGroupProps) => {
+  if (prev.items.length !== next.items.length) return false
+  for (let i = 0; i < prev.items.length; i++) {
+    if (prev.items[i].item !== next.items[i].item) return false
+    if (prev.items[i].resultItem !== next.items[i].resultItem) return false
+  }
+  if (prev.footer == null && next.footer == null) return true
+  if (prev.footer == null || next.footer == null) return false
+  return prev.footer.originalMessage === next.footer.originalMessage
+    && prev.footer.createdAt === next.footer.createdAt
+    && prev.footer.model === next.footer.model
+    && prev.footer.usage === next.footer.usage
+}
+
+export const ToolGroup = React.memo(ToolGroupComponent, areToolGroupPropsEqual)

package/src/components/chat/{ToolRenderer.tsx → tools/core/ToolRenderer.tsx}

@@ -2,9 +2,10 @@ import React from 'react'
 
 import type { ChatMessageContent } from '@vibe-forge/core'
 
-import { DefaultTool } from './tools/DefaultTool'
-import { BashTool, adapterClaudeToolRenders } from './tools/adapter-claude'
-import { taskToolRenders } from './tools/task'
+import { DefaultTool } from '../DefaultTool'
+import { BashTool, adapterClaudeToolRenders } from '../adapter-claude'
+import { chromeDevtoolsToolRenders } from '../plugin-chrome-devtools'
+import { taskToolRenders } from '../task'
 
 const TOOL_RENDERERS: Record<
   string,
@@ -14,7 +15,8 @@ const TOOL_RENDERERS: Record<
   }>
 > = {
   ...taskToolRenders,
-  ...adapterClaudeToolRenders
+  ...adapterClaudeToolRenders,
+  ...chromeDevtoolsToolRenders
 }
 
 export function ToolRenderer({

package/src/components/chat/tools/plugin-chrome-devtools/ChromeDevtoolsTool.scss

@@ -0,0 +1,11 @@
+.chrome-devtools-tool {
+  &__icon {
+    color: unset;
+  }
+
+  .tool-content {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+}

package/src/components/chat/tools/plugin-chrome-devtools/ChromeDevtoolsTool.tsx

@@ -0,0 +1,75 @@
+import './ChromeDevtoolsTool.scss'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { CodeBlock } from '#~/components/CodeBlock'
+import { ToolCallBox } from '../core/ToolCallBox'
+import { safeJsonStringify } from '#~/utils/safe-serialize'
+import { defineToolRender } from '../defineToolRender'
+
+const formatToolName = (name: string) => {
+  if (name.startsWith('mcp__ChromeDevtools__')) {
+    return name.replace('mcp__ChromeDevtools__', '')
+  }
+  return name
+}
+
+export const ChromeDevtoolsTool = defineToolRender(({ item, resultItem }) => {
+  const { t } = useTranslation()
+  const displayName = formatToolName(item.name)
+  const input = item.input != null ? item.input : {}
+
+  return (
+    <div className='tool-group chrome-devtools-tool'>
+      <ToolCallBox
+        defaultExpanded={true}
+        header={
+          <div className='tool-header-content'>
+            <i className='tool-header-icon chrome-devtools-tool__icon devicon-chrome-plain colored' />
+            <span className='tool-header-title'>{displayName}</span>
+            <span className='tool-header-hint'>{t('chat.tools.call')}</span>
+          </div>
+        }
+        content={
+          <div className='tool-content'>
+            <CodeBlock
+              code={safeJsonStringify(input, 2)}
+              lang='json'
+            />
+          </div>
+        }
+      />
+      {resultItem != null && (
+        <ToolCallBox
+          type='result'
+          isError={resultItem.is_error}
+          header={
+            <div className='tool-header-content'>
+              <span className='material-symbols-rounded tool-header-icon'>
+                {resultItem.is_error === true ? 'error' : 'check_circle'}
+              </span>
+              <span className='tool-header-title'>{t('chat.result')}</span>
+            </div>
+          }
+          content={
+            <div className='tool-content'>
+              {typeof resultItem.content === 'string'
+                ? (
+                  <CodeBlock
+                    code={resultItem.content}
+                    lang='text'
+                  />
+                )
+                : (
+                  <CodeBlock
+                    code={safeJsonStringify(resultItem.content, 2)}
+                    lang='json'
+                  />
+                )}
+            </div>
+          }
+        />
+      )}
+    </div>
+  )
+})

package/src/components/chat/tools/plugin-chrome-devtools/index.ts

@@ -0,0 +1,45 @@
+import type { ChromeDevtoolsToolName } from '@vibe-forge/plugin-chrome-devtools/schema'
+
+import type { ToolRenderComponent } from '../defineToolRender'
+import { defineToolRenders } from '../defineToolRender'
+import { ChromeDevtoolsTool } from './ChromeDevtoolsTool'
+
+const chromeDevtoolsToolNames: ChromeDevtoolsToolName[] = [
+  'mcp__ChromeDevtools__click',
+  'mcp__ChromeDevtools__close_page',
+  'mcp__ChromeDevtools__drag',
+  'mcp__ChromeDevtools__emulate',
+  'mcp__ChromeDevtools__evaluate_script',
+  'mcp__ChromeDevtools__fill',
+  'mcp__ChromeDevtools__fill_form',
+  'mcp__ChromeDevtools__get_console_message',
+  'mcp__ChromeDevtools__get_network_request',
+  'mcp__ChromeDevtools__handle_dialog',
+  'mcp__ChromeDevtools__hover',
+  'mcp__ChromeDevtools__list_console_messages',
+  'mcp__ChromeDevtools__list_network_requests',
+  'mcp__ChromeDevtools__list_pages',
+  'mcp__ChromeDevtools__navigate_page',
+  'mcp__ChromeDevtools__new_page',
+  'mcp__ChromeDevtools__performance_analyze_insight',
+  'mcp__ChromeDevtools__performance_start_trace',
+  'mcp__ChromeDevtools__performance_stop_trace',
+  'mcp__ChromeDevtools__press_key',
+  'mcp__ChromeDevtools__resize_page',
+  'mcp__ChromeDevtools__select_page',
+  'mcp__ChromeDevtools__take_memory_snapshot',
+  'mcp__ChromeDevtools__take_screenshot',
+  'mcp__ChromeDevtools__take_snapshot',
+  'mcp__ChromeDevtools__type_text',
+  'mcp__ChromeDevtools__upload_file',
+  'mcp__ChromeDevtools__wait_for'
+]
+
+const chromeDevtoolsToolEntries = chromeDevtoolsToolNames.reduce<Record<string, ToolRenderComponent>>((acc, name) => {
+  acc[name] = ChromeDevtoolsTool
+  return acc
+}, {})
+
+export const chromeDevtoolsToolRenders = defineToolRenders(chromeDevtoolsToolEntries)
+
+export { ChromeDevtoolsTool }

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

@@ -13,34 +13,9 @@
     );
   }
 
-  &__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;
+    margin: 0;
+    padding: 8px 10px;
     border: 1px dashed var(--border-color);
     border-radius: 8px;
     font-size: 12px;