@vibe-forge/client 3.0.0-alpha.5 → 3.0.0-alpha.7

package/src/components/chat/tools/core/tool-summary.ts

@@ -1,206 +0,0 @@
-/* eslint-disable max-lines */
-
-import type { ChatMessageContent } from '@vibe-forge/core'
-
-import {
-  buildClaudeToolPresentation,
-  getClaudeToolBaseName,
-  isClaudeToolName
-} from '../adapter-claude/claude-tool-presentation'
-import { getClaudeToolSummaryText } from '../adapter-claude/claude-tool-summary'
-import { buildGenericToolPresentation } from './generic-tool-presentation'
-
-export type ToolUseItem = Extract<ChatMessageContent, { type: 'tool_use' }>
-type Translate = (key: string, options?: Record<string, unknown>) => string
-
-const HUMANIZED_SEGMENT_SEPARATOR = /[_:-]+/g
-const GENERIC_TOOL_NAMESPACE_PREFIXES = new Set(['adapter', 'agent', 'mcp', 'plugin', 'tool'])
-
-const humanizeToolSegment = (value: string) =>
-  value
-    .replace(HUMANIZED_SEGMENT_SEPARATOR, ' ')
-    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
-    .trim()
-
-const getToolNameSegments = (name: string) => (
-  name.includes('__') ? name.split('__').filter(Boolean) : name.split(':').filter(Boolean)
-)
-
-export const formatToolName = (name: string) => {
-  if (name.startsWith('mcp__ChromeDevtools__')) {
-    return name.replace('mcp__ChromeDevtools__', '')
-  }
-
-  const namespaceSegments = name.includes('__') ? name.split('__').filter(Boolean) : []
-  const lastSegment = namespaceSegments.length > 0
-    ? namespaceSegments[namespaceSegments.length - 1]
-    : name.split(':').pop() ?? name
-  return humanizeToolSegment(lastSegment)
-}
-
-export const getToolInputPreview = (input: unknown) => {
-  if (input == null || typeof input !== 'object' || Array.isArray(input)) {
-    return undefined
-  }
-
-  const record = input as Record<string, unknown>
-  const preferredKeys = [
-    'file_path',
-    'path',
-    'url',
-    'query',
-    'pattern',
-    'command',
-    'selector',
-    'taskId',
-    'subject',
-    'skill',
-    'title'
-  ]
-
-  for (const key of preferredKeys) {
-    const value = record[key]
-    if (typeof value === 'string' && value.trim() !== '') {
-      return value.trim().split('\n')[0]
-    }
-  }
-
-  for (const value of Object.values(record)) {
-    if (typeof value === 'string' && value.trim() !== '') {
-      return value.trim().split('\n')[0]
-    }
-  }
-
-  return undefined
-}
-
-export function getToolSummaryText(item: ToolUseItem, t: Translate) {
-  if (isClaudeToolName(item.name)) {
-    return getClaudeToolSummaryText(item.name, item.input, t)
-  }
-
-  const presentation = buildGenericToolPresentation(item.name, item.input)
-  const displayName = presentation.titleKey != null
-    ? t(presentation.titleKey, { defaultValue: presentation.fallbackTitle })
-    : presentation.fallbackTitle
-  const preview = presentation.primary ?? getToolInputPreview(item.input)
-  return preview != null && preview !== '' ? `${displayName} ${preview}` : displayName
-}
-
-export function getToolTitleText(item: ToolUseItem, t: Translate) {
-  if (isClaudeToolName(item.name)) {
-    const presentation = buildClaudeToolPresentation(item.name, item.input)
-    return t(presentation.titleKey, { defaultValue: presentation.fallbackTitle })
-  }
-
-  const presentation = buildGenericToolPresentation(item.name, item.input)
-  return presentation.titleKey != null
-    ? t(presentation.titleKey, { defaultValue: presentation.fallbackTitle })
-    : presentation.fallbackTitle
-}
-
-export function getToolPrimaryText(item: ToolUseItem) {
-  if (isClaudeToolName(item.name)) {
-    return buildClaudeToolPresentation(item.name, item.input).primary
-  }
-
-  return buildGenericToolPresentation(item.name, item.input).primary ?? getToolInputPreview(item.input)
-}
-
-const getToolNamespaceLabel = (name: string) => {
-  const namespaceSegments = getToolNameSegments(name)
-    .slice(0, -1)
-    .filter((segment, index) => !(index === 0 && GENERIC_TOOL_NAMESPACE_PREFIXES.has(segment.toLowerCase())))
-    .map(humanizeToolSegment)
-    .filter(Boolean)
-
-  return namespaceSegments.length > 0 ? namespaceSegments.join(' ') : undefined
-}
-
-const getToolQualifiedLabel = (name: string, fallbackLabel: string) => {
-  const namespaceLabel = getToolNamespaceLabel(name)
-  return namespaceLabel != null && namespaceLabel !== ''
-    ? `${namespaceLabel} ${fallbackLabel}`
-    : fallbackLabel
-}
-
-interface ToolGroupDescriptor {
-  key: string
-  label: string
-  qualifiedLabel: string
-}
-
-function getToolGroupDescriptor(item: ToolUseItem, t: Translate): ToolGroupDescriptor {
-  if (isClaudeToolName(item.name)) {
-    const baseName = getClaudeToolBaseName(item.name)
-    const presentation = buildClaudeToolPresentation(item.name, item.input)
-    const label = t(presentation.titleKey, { defaultValue: presentation.fallbackTitle })
-    return {
-      key: `claude:${baseName}`,
-      label,
-      qualifiedLabel: label
-    }
-  }
-
-  const presentation = buildGenericToolPresentation(item.name, item.input)
-  const label = presentation.titleKey != null
-    ? t(presentation.titleKey, { defaultValue: presentation.fallbackTitle })
-    : presentation.fallbackTitle
-  return {
-    key: item.name,
-    label,
-    qualifiedLabel: getToolQualifiedLabel(item.name, label)
-  }
-}
-
-export function getToolGroupSummaryText(
-  items: Array<{
-    item: ToolUseItem
-  }>,
-  t: Translate
-) {
-  const groupedTools = new Map<string, { label: string; qualifiedLabel: string; count: number }>()
-
-  for (const { item } of items) {
-    const descriptor = getToolGroupDescriptor(item, t)
-    const label = descriptor.label
-    if (label === '') continue
-
-    const current = groupedTools.get(descriptor.key)
-    if (current != null) {
-      current.count += 1
-      continue
-    }
-
-    groupedTools.set(descriptor.key, {
-      label,
-      qualifiedLabel: descriptor.qualifiedLabel,
-      count: 1
-    })
-  }
-
-  const groups = Array.from(groupedTools.values())
-  const labelCounts = groups.reduce((map, group) => {
-    map.set(group.label, (map.get(group.label) ?? 0) + 1)
-    return map
-  }, new Map<string, number>())
-
-  if (groups.length === 0) {
-    return t('chat.usedTools', { count: items.length })
-  }
-
-  const summaries = groups.map((group) => {
-    const name = (labelCounts.get(group.label) ?? 0) > 1 ? group.qualifiedLabel : group.label
-    return {
-      count: group.count,
-      text: t('chat.tools.groupSummaryCount', { name, count: group.count })
-    }
-  })
-
-  const visible = summaries.slice(0, 2).map(summary => summary.text)
-  const hiddenCallCount = summaries.slice(2).reduce((count, summary) => count + summary.count, 0)
-
-  return hiddenCallCount > 0
-    ? [...visible, t('chat.tools.groupSummaryMoreCount', { count: hiddenCallCount })].join(' · ')
-    : visible.join(' · ')
-}

package/src/components/chat/tools/defineToolRender.ts

@@ -1,28 +0,0 @@
-import type { ChatMessageContent } from '@vibe-forge/core'
-import type React from 'react'
-
-export interface ToolRenderProps {
-  item: Extract<ChatMessageContent, { type: 'tool_use' }>
-  resultItem?: Extract<ChatMessageContent, { type: 'tool_result' }>
-}
-
-export type ToolRenderComponent = React.ComponentType<ToolRenderProps>
-
-export function defineToolRender<T extends ToolRenderComponent>(render: T) {
-  return render
-}
-
-export function defineToolRenders(
-  renders: Record<string, ToolRenderComponent>,
-  options?: { namespace?: string }
-) {
-  const namespace = options?.namespace
-  const entries = Object.entries(renders).flatMap(([name, renderer]) => {
-    const current: Array<[string, ToolRenderComponent]> = [[name, renderer]]
-    if (namespace) {
-      current.push([`${namespace}${name}`, renderer])
-    }
-    return current
-  })
-  return Object.fromEntries(entries) as Record<string, ToolRenderComponent>
-}

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

@@ -1,11 +0,0 @@
-.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

@@ -1,81 +0,0 @@
-import './ChromeDevtoolsTool.scss'
-import { Tooltip } from 'antd'
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-
-import { CodeBlock } from '#~/components/CodeBlock'
-import { safeJsonStringify } from '#~/utils/safe-serialize'
-import { ToolCallBox } from '../core/ToolCallBox'
-import { ToolResultContent } from '../core/ToolResultContent'
-import { ToolSummaryHeader } from '../core/ToolSummaryHeader'
-import { hasMeaningfulToolValue } from '../core/tool-content-presence'
-import { TOOL_TOOLTIP_PROPS, getToolSectionIcon, getToolTargetPresentation } from '../core/tool-display'
-import { getToolPrimaryText, getToolTitleText } from '../core/tool-summary'
-import { defineToolRender } from '../defineToolRender'
-
-export const ChromeDevtoolsTool = defineToolRender(({ item, resultItem }) => {
-  const { t } = useTranslation()
-  const input = item.input != null ? item.input : {}
-  const hasCallDetails = hasMeaningfulToolValue(input)
-  const hasResultDetails = resultItem != null && hasMeaningfulToolValue(resultItem.content)
-  const hasDetails = hasCallDetails || hasResultDetails
-  const titleText = getToolTitleText(item, t)
-  const targetPresentation = getToolTargetPresentation(getToolPrimaryText(item))
-  const errorMeta = resultItem?.is_error === true
-    ? (
-      <span className='tool-status tool-status--error'>
-        <span className='material-symbols-rounded'>error</span>
-      </span>
-    )
-    : undefined
-
-  return (
-    <div className='tool-group tool-group--compact chrome-devtools-tool'>
-      <ToolCallBox
-        variant='inline'
-        defaultExpanded={false}
-        collapsible={hasDetails}
-        header={({ isExpanded, isCollapsible }) => (
-          <ToolSummaryHeader
-            icon={<i className='devicon-chrome-plain colored' />}
-            title={titleText}
-            target={targetPresentation.text}
-            targetTitle={targetPresentation.title}
-            targetMonospace={targetPresentation.monospace}
-            expanded={isExpanded}
-            collapsible={isCollapsible}
-            meta={errorMeta}
-            metaTitle={errorMeta == null ? undefined : t('chat.result')}
-          />
-        )}
-        content={hasDetails
-          ? (
-            <div className='tool-detail-sections'>
-              {hasCallDetails && (
-                <div className='tool-detail-section'>
-                  <div className='tool-detail-section__header'>
-                    <Tooltip title={t('chat.tools.call')} {...TOOL_TOOLTIP_PROPS}>
-                      <span className='tool-detail-section__icon material-symbols-rounded'>
-                        {getToolSectionIcon('call')}
-                      </span>
-                    </Tooltip>
-                  </div>
-                  <CodeBlock
-                    code={safeJsonStringify(input, 2)}
-                    lang='json'
-                    hideHeader={true}
-                  />
-                </div>
-              )}
-              {hasResultDetails && resultItem != null && (
-                <div className='tool-detail-section'>
-                  <ToolResultContent content={resultItem.content} />
-                </div>
-              )}
-            </div>
-          )
-          : null}
-      />
-    </div>
-  )
-})

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

@@ -1,45 +0,0 @@
-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

@@ -1,25 +0,0 @@
-.tool-group.get-task-info-tool {
-  border-color: color-mix(
-    in srgb,
-    var(--border-color) 55%,
-    var(--primary-color) 45%
-  );
-
-  & .tool-call-header {
-    background: linear-gradient(
-      90deg,
-      color-mix(in srgb, var(--tag-bg) 80%, var(--primary-color) 20%),
-      var(--tag-bg)
-    );
-  }
-
-  &__empty {
-    margin: 0;
-    padding: 8px 10px;
-    border: 1px dashed var(--border-color);
-    border-radius: 8px;
-    font-size: 12px;
-    color: var(--sub-text-color);
-    background: var(--bg-color);
-  }
-}

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

@@ -1,115 +0,0 @@
-import './GetTaskInfoTool.scss'
-
-import type { ToolInputs } from '@vibe-forge/core'
-import React, { useMemo } from 'react'
-import { useTranslation } from 'react-i18next'
-
-import { ToolCallBox } from '../core/ToolCallBox'
-import { ToolSummaryHeader } from '../core/ToolSummaryHeader'
-import { getToolTargetPresentation } from '../core/tool-display'
-import { defineToolRender } from '../defineToolRender'
-import { TaskRow } from './components/TaskRow'
-
-interface TaskResult {
-  taskId: string
-  status?: 'running' | 'completed' | 'failed'
-  exitCode?: number | null
-  description?: string
-  type?: 'default' | 'spec' | 'entity'
-  name?: string | null
-  adapter?: string | null
-  background?: boolean
-  logs?: string[] | null
-}
-
-export const GetTaskInfoTool = defineToolRender(({ item, resultItem }) => {
-  const { t } = useTranslation()
-
-  const input = (item.input != null ? item.input : {}) as Partial<ToolInputs['GetTaskInfo']>
-  const inputTaskId = input.taskId
-
-  const taskResult = useMemo(() => {
-    if (!resultItem?.content) {
-      return null
-    }
-    const text = resultItem.content[0].text.trim()
-    const parsed = JSON.parse(text) as TaskResult[]
-    return parsed[0] ?? null
-  }, [resultItem?.content])
-
-  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')
-  const taskIdPresentation = getToolTargetPresentation(taskResult?.taskId ?? inputTaskId)
-  const errorMeta = resultItem?.is_error === true
-    ? (
-      <span className='tool-status tool-status--error'>
-        <span className='material-symbols-rounded'>error</span>
-      </span>
-    )
-    : undefined
-
-  return (
-    <div className='tool-group tool-group--compact get-task-info-tool'>
-      <ToolCallBox
-        variant='inline'
-        defaultExpanded={false}
-        header={({ isExpanded, isCollapsible }) => (
-          <ToolSummaryHeader
-            icon={<span className='material-symbols-rounded'>info</span>}
-            title={t('chat.tools.getTaskInfo')}
-            target={taskIdPresentation.text}
-            targetTitle={taskIdPresentation.title}
-            targetMonospace={taskIdPresentation.monospace}
-            expanded={isExpanded}
-            collapsible={isCollapsible}
-            meta={errorMeta}
-            metaTitle={errorMeta == null ? undefined : t('chat.result')}
-          />
-        )}
-        content={
-          <div className='tool-content'>
-            {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>
-        }
-      />
-    </div>
-  )
-})

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

@@ -1,31 +0,0 @@
-.list-tasks-tool {
-  border-color: color-mix(
-    in srgb,
-    var(--border-color) 55%,
-    var(--primary-color) 45%
-  );
-
-  & .tool-call-header {
-    background: linear-gradient(
-      90deg,
-      color-mix(in srgb, var(--tag-bg) 80%, var(--primary-color) 20%),
-      var(--tag-bg)
-    );
-  }
-
-  &__list {
-    padding: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 0;
-  }
-
-  &__empty {
-    padding: 8px 10px;
-    border: 1px dashed var(--border-color);
-    border-radius: 8px;
-    font-size: 12px;
-    color: var(--sub-text-color);
-    background: var(--bg-color);
-  }
-}

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

@@ -1,99 +0,0 @@
-import './ListTasksTool.scss'
-
-import React, { useMemo } from 'react'
-import { useTranslation } from 'react-i18next'
-
-import { ToolCallBox } from '../core/ToolCallBox'
-import { ToolSummaryHeader } from '../core/ToolSummaryHeader'
-import { defineToolRender } from '../defineToolRender'
-import { TaskRow } from './components/TaskRow'
-
-interface TaskResult {
-  taskId: string
-  status?: 'running' | 'completed' | 'failed'
-  exitCode?: number | null
-  description?: string
-  type?: 'default' | 'spec' | 'entity'
-  name?: string | null
-  adapter?: string | null
-  background?: boolean
-  logs?: string[] | null
-}
-
-export const ListTasksTool = defineToolRender(({ resultItem }) => {
-  const { t } = useTranslation()
-
-  const taskResults = useMemo(() => {
-    if (!resultItem?.content) {
-      return []
-    }
-    const text = resultItem.content[0].text.trim()
-    return JSON.parse(text) as TaskResult[]
-  }, [resultItem?.content])
-  const errorMeta = resultItem?.is_error === true
-    ? (
-      <span className='tool-status tool-status--error'>
-        <span className='material-symbols-rounded'>error</span>
-      </span>
-    )
-    : undefined
-
-  return (
-    <div className='tool-group tool-group--compact list-tasks-tool'>
-      <ToolCallBox
-        variant='inline'
-        defaultExpanded={false}
-        header={({ isExpanded, isCollapsible }) => (
-          <ToolSummaryHeader
-            icon={<span className='material-symbols-rounded'>list_alt</span>}
-            title={t('chat.tools.listTasks')}
-            target={t('chat.tools.taskCount', { count: taskResults.length })}
-            expanded={isExpanded}
-            collapsible={isCollapsible}
-            meta={errorMeta}
-            metaTitle={errorMeta == null ? undefined : t('chat.result')}
-          />
-        )}
-        content={
-          <div className='tool-content'>
-            <div className='list-tasks-tool__list'>
-              {taskResults.map((task) => {
-                const { taskId, exitCode, ...cardProps } = task
-                const metaChips = [
-                  cardProps.adapter,
-                  cardProps.type === 'default' ? undefined : cardProps.type,
-                  cardProps.name,
-                  cardProps.status,
-                  exitCode != null ? t('chat.tools.taskExitCode', { code: exitCode }) : undefined,
-                  cardProps.background === false
-                    ? t('chat.tools.startTasksForeground')
-                    : cardProps.background === true
-                    ? t('chat.tools.startTasksBackground')
-                    : undefined
-                ]
-                return (
-                  <TaskRow
-                    key={taskId}
-                    description={cardProps.description}
-                    status={cardProps.status}
-                    background={cardProps.background}
-                    sessionId={taskId}
-                    logs={cardProps.logs}
-                    titleFallback={t('chat.tools.task')}
-                    metaChips={metaChips}
-                    showExecutionIcon={false}
-                  />
-                )
-              })}
-              {taskResults.length === 0 && (
-                <div className='list-tasks-tool__empty'>
-                  {t('chat.tools.listTasksEmpty')}
-                </div>
-              )}
-            </div>
-          </div>
-        }
-      />
-    </div>
-  )
-})

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

@@ -1,31 +0,0 @@
-.start-tasks-tool {
-  border-color: color-mix(
-    in srgb,
-    var(--border-color) 55%,
-    var(--primary-color) 45%
-  );
-
-  & .tool-call-header {
-    background: linear-gradient(
-      90deg,
-      color-mix(in srgb, var(--tag-bg) 80%, var(--primary-color) 20%),
-      var(--tag-bg)
-    );
-  }
-
-  &__list {
-    padding: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 0;
-  }
-
-  &__empty {
-    padding: 8px 10px;
-    border: 1px dashed var(--border-color);
-    border-radius: 8px;
-    font-size: 12px;
-    color: var(--sub-text-color);
-    background: var(--bg-color);
-  }
-}