@vibe-forge/client 0.3.0 → 0.4.0

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;

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

@@ -2,10 +2,11 @@ import './GetTaskInfoTool.scss'
 
 import React, { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
+import type { ToolInputs } from '@vibe-forge/core'
 
+import { ToolCallBox } from '../core/ToolCallBox'
 import { defineToolRender } from '../defineToolRender'
-import { ToolCallBox } from '../../ToolCallBox'
-import { TaskToolCard } from './components/TaskToolCard'
+import { TaskRow } from './components/TaskRow'
 
 interface TaskResult {
   taskId: string
@@ -22,7 +23,7 @@ interface TaskResult {
 export const GetTaskInfoTool = defineToolRender(({ item, resultItem }) => {
   const { t } = useTranslation()
 
-  const input = (item.input != null ? item.input : {}) as { taskId?: string }
+  const input = (item.input != null ? item.input : {}) as Partial<ToolInputs['GetTaskInfo']>
   const inputTaskId = input.taskId
 
   const taskResult = useMemo(() => {
@@ -34,18 +35,23 @@ export const GetTaskInfoTool = defineToolRender(({ item, resultItem }) => {
     return parsed[0] ?? null
   }, [resultItem?.content])
 
-  const logs = taskResult?.logs ?? []
-  const metaChips = taskResult ? (() => {
-    const { exitCode, ...cardMeta } = taskResult
-    return [
-      cardMeta.adapter,
-      cardMeta.type === 'default' ? undefined : cardMeta.type,
-      cardMeta.name,
-      cardMeta.status,
-      exitCode != null ? t('chat.tools.taskExitCode', { code: exitCode }) : undefined,
-      cardMeta.background === false ? t('chat.tools.startTasksForeground') : cardMeta.background === true ? t('chat.tools.startTasksBackground') : undefined
-    ]
-  })() : []
+  const metaChips = taskResult
+    ? (() => {
+      const { exitCode, ...cardMeta } = taskResult
+      return [
+        cardMeta.adapter,
+        cardMeta.type === 'default' ? undefined : cardMeta.type,
+        cardMeta.name,
+        cardMeta.status,
+        exitCode != null ? t('chat.tools.taskExitCode', { code: exitCode }) : undefined,
+        cardMeta.background === false
+          ? t('chat.tools.startTasksForeground')
+          : cardMeta.background === true
+          ? t('chat.tools.startTasksBackground')
+          : undefined
+      ]
+    })()
+    : []
   const titleFallback = t('chat.tools.task')
 
   return (
@@ -53,33 +59,37 @@ export const GetTaskInfoTool = defineToolRender(({ item, resultItem }) => {
       <ToolCallBox
         defaultExpanded={true}
         header={
-          <div className='get-task-info-tool__header'>
-            <span className='material-symbols-rounded get-task-info-tool__icon'>info</span>
-            <span className='get-task-info-tool__title'>{t('chat.tools.getTaskInfo')}</span>
-            <span className='get-task-info-tool__count'>{taskResult ? 1 : 0}</span>
+          <div className='tool-header-content'>
+            <span className='material-symbols-rounded tool-header-icon'>info</span>
+            <span className='tool-header-title'>{t('chat.tools.getTaskInfo')}</span>
+            <span className='tool-header-chip'>{taskResult ? 1 : 0}</span>
           </div>
         }
         content={
           <div className='tool-content'>
-            {taskResult ? (
-              (() => {
-                const { taskId, exitCode, ...cardProps } = taskResult
-                return (
-                  <TaskToolCard
-                    {...cardProps}
-                    logs={logs}
-                    sessionId={taskId || inputTaskId}
-                    titleFallback={titleFallback}
-                    metaChips={metaChips}
-                    showExecutionIcon={false}
-                  />
-                )
-              })()
-            ) : (
-              <div className='get-task-info-tool__empty'>
-                {t('chat.tools.startTasksEmpty')}
-              </div>
-            )}
+            {taskResult
+              ? (
+                (() => {
+                  const { taskId, exitCode, ...cardProps } = taskResult
+                  return (
+                    <TaskRow
+                      description={cardProps.description}
+                      status={cardProps.status}
+                      background={cardProps.background}
+                      sessionId={taskId || inputTaskId}
+                      logs={cardProps.logs}
+                      titleFallback={titleFallback}
+                      metaChips={metaChips}
+                      showExecutionIcon={false}
+                    />
+                  )
+                })()
+              )
+              : (
+                <div className='get-task-info-tool__empty'>
+                  {t('chat.tools.startTasksEmpty')}
+                </div>
+              )}
           </div>
         }
       />

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

@@ -13,40 +13,15 @@
     );
   }
 
-  &__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%);
-  }
-
   &__list {
-    padding: 10px 12px;
+    padding: 0;
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: 0;
   }
 
   &__empty {
-    padding: 10px 12px;
+    padding: 8px 10px;
     border: 1px dashed var(--border-color);
     border-radius: 8px;
     font-size: 12px;

package/src/components/chat/tools/task/ListTasksTool.tsx

@@ -3,9 +3,9 @@ import './ListTasksTool.scss'
 import React, { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { ToolCallBox } from '../../ToolCallBox'
+import { ToolCallBox } from '../core/ToolCallBox'
 import { defineToolRender } from '../defineToolRender'
-import { TaskToolCard } from './components/TaskToolCard'
+import { TaskRow } from './components/TaskRow'
 
 interface TaskResult {
   taskId: string
@@ -35,10 +35,10 @@ export const ListTasksTool = defineToolRender(({ resultItem }) => {
       <ToolCallBox
         defaultExpanded={true}
         header={
-          <div className='list-tasks-tool__header'>
-            <span className='material-symbols-rounded list-tasks-tool__icon'>list_alt</span>
-            <span className='list-tasks-tool__title'>{t('chat.tools.listTasks')}</span>
-            <span className='list-tasks-tool__count'>{taskResults.length}</span>
+          <div className='tool-header-content'>
+            <span className='material-symbols-rounded tool-header-icon'>list_alt</span>
+            <span className='tool-header-title'>{t('chat.tools.listTasks')}</span>
+            <span className='tool-header-chip'>{taskResults.length}</span>
           </div>
         }
         content={
@@ -59,10 +59,13 @@ export const ListTasksTool = defineToolRender(({ resultItem }) => {
                     : undefined
                 ]
                 return (
-                  <TaskToolCard
+                  <TaskRow
                     key={taskId}
-                    {...cardProps}
+                    description={cardProps.description}
+                    status={cardProps.status}
+                    background={cardProps.background}
                     sessionId={taskId}
+                    logs={cardProps.logs}
                     titleFallback={t('chat.tools.task')}
                     metaChips={metaChips}
                     showExecutionIcon={false}

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

@@ -13,40 +13,15 @@
     );
   }
 
-  &__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%);
-  }
-
   &__list {
-    padding: 10px 12px;
+    padding: 0;
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: 0;
   }
 
   &__empty {
-    padding: 10px 12px;
+    padding: 8px 10px;
     border: 1px dashed var(--border-color);
     border-radius: 8px;
     font-size: 12px;

package/src/components/chat/tools/task/StartTasksTool.tsx

@@ -2,18 +2,13 @@ import './StartTasksTool.scss'
 
 import React, { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
+import type { ToolInputs } from '@vibe-forge/core'
 
-import { ToolCallBox } from '../../ToolCallBox'
+import { ToolCallBox } from '../core/ToolCallBox'
 import { defineToolRender } from '../defineToolRender'
-import { TaskToolCard } from './components/TaskToolCard'
+import { TaskRow } from './components/TaskRow'
 
-interface StartTask {
-  description?: string
-  type?: 'default' | 'spec' | 'entity'
-  name?: string
-  adapter?: string
-  background?: boolean
-}
+type StartTask = ToolInputs['StartTasks']['tasks'][number]
 
 interface TaskResult {
   taskId: string
@@ -30,7 +25,7 @@ interface TaskResult {
 export const StartTasksTool = defineToolRender(({ item, resultItem }) => {
   const { t } = useTranslation()
 
-  const input = (item.input != null ? item.input : {}) as { tasks?: StartTask[] }
+  const input = (item.input != null ? item.input : {}) as Partial<ToolInputs['StartTasks']>
   const tasks = Array.isArray(input.tasks) ? input.tasks : []
 
   const parsedResult = useMemo(() => {
@@ -50,10 +45,10 @@ export const StartTasksTool = defineToolRender(({ item, resultItem }) => {
       <ToolCallBox
         defaultExpanded={true}
         header={
-          <div className='start-tasks-tool__header'>
-            <span className='material-symbols-rounded start-tasks-tool__icon'>playlist_add</span>
-            <span className='start-tasks-tool__title'>{t('chat.tools.startTasks')}</span>
-            <span className='start-tasks-tool__count'>{tasks.length}</span>
+          <div className='tool-header-content'>
+            <span className='material-symbols-rounded tool-header-icon'>playlist_add</span>
+            <span className='tool-header-title'>{t('chat.tools.startTasks')}</span>
+            <span className='tool-header-chip'>{tasks.length}</span>
           </div>
         }
         content={
@@ -62,7 +57,6 @@ export const StartTasksTool = defineToolRender(({ item, resultItem }) => {
               {tasks.map((task, idx) => {
                 const { description, type, name, adapter, background } = task
                 const { status, taskId, logs = [] } = taskResults?.[idx] ?? {}
-                const cardProps = { description, status, logs, adapter, type, name, background }
                 const metaChips = [
                   adapter,
                   type === 'default' ? undefined : type,
@@ -70,10 +64,13 @@ export const StartTasksTool = defineToolRender(({ item, resultItem }) => {
                 ]
 
                 return (
-                  <TaskToolCard
+                  <TaskRow
                     key={idx}
-                    {...cardProps}
+                    description={description}
+                    status={status}
+                    background={background}
                     sessionId={taskId}
+                    logs={logs}
                     titleFallback={t('chat.tools.startTasks')}
                     metaChips={metaChips}
                     showExecutionIcon={true}

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

@@ -0,0 +1,105 @@
+.task-row {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 6px;
+  min-width: 0;
+  padding: 6px 8px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.task-row:last-child {
+  border-bottom: none;
+}
+
+.task-row__header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.task-row__left {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+.task-row__status-icon {
+  font-size: 16px;
+  color: var(--sub-text-color);
+}
+
+.task-row__status-icon.running {
+  color: var(--primary-color);
+}
+
+.task-row__status-icon.completed {
+  color: var(--success-color);
+}
+
+.task-row__status-icon.failed {
+  color: var(--danger-color);
+}
+
+.task-row__execution-icon {
+  font-size: 16px;
+  color: var(--sub-text-color);
+}
+
+.task-row__execution-icon--foreground {
+  color: var(--primary-color);
+}
+
+.task-row__execution-icon--background {
+  color: var(--sub-text-color);
+}
+
+.task-row__title {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  color: var(--text-color);
+}
+
+.task-row__session-link {
+  border: none;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  font-size: 11px;
+  color: var(--primary-color);
+  font-family: var(--font-mono);
+  flex-shrink: 0;
+}
+
+.task-row__session-link:hover {
+  text-shadow: 0 0 .5px currentColor;
+}
+
+.task-row__meta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+.task-row__meta-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;
+}
+
+.task-row__logs {
+  width: 100%;
+}