@vibe-forge/client 0.10.0 → 0.11.0

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

@@ -0,0 +1,192 @@
+import { safeJsonStringify } from '#~/utils/safe-serialize'
+
+export const TOOL_TOOLTIP_PROPS = {
+  arrow: false,
+  mouseEnterDelay: .2,
+  mouseLeaveDelay: .06
+} as const
+
+const PATH_TOOLTIP_MARKERS = ['apps', 'packages', 'src', 'scripts', '.ai', 'docs', 'tests', 'test', 'changelog']
+const WINDOWS_PATH_RE = /^[a-z]:[\\/]+/i
+const URL_RE = /^https?:\/\//i
+
+const TOOL_FIELD_ICON_MAP: Record<string, string> = {
+  activeForm: 'description',
+  addBlockedBy: 'link_off',
+  addBlocks: 'block',
+  allowedDomains: 'travel_explore',
+  allowedPrompts: 'chat',
+  answers: 'fact_check',
+  args: 'segment',
+  blockedDomains: 'domain_disabled',
+  cellId: 'tag',
+  cellType: 'grid_view',
+  command: 'terminal',
+  content: 'notes',
+  description: 'subject',
+  disableSandbox: 'shield',
+  details: 'info',
+  editMode: 'edit',
+  glob: 'data_object',
+  ignore: 'visibility_off',
+  limit: 'filter_alt',
+  maxTurns: 'repeat',
+  metadata: 'badge',
+  model: 'neurology',
+  mode: 'tune',
+  newSource: 'note_stack',
+  newString: 'edit_note',
+  oldString: 'history',
+  owner: 'person',
+  offset: 'format_indent_increase',
+  path: 'folder',
+  prompt: 'chat',
+  pushToRemote: 'upload',
+  questions: 'quiz',
+  remoteSession: 'devices',
+  remoteSessionUrl: 'link',
+  replaceAll: 'select_all',
+  resume: 'play_circle',
+  runInBackground: 'background_dot_large',
+  status: 'flag',
+  subagentType: 'hub',
+  subject: 'title',
+  timeout: 'timer',
+  todos: 'checklist'
+}
+
+const TOOL_FORMAT_ICON_MAP: Record<string, string> = {
+  code: 'code',
+  inline: 'label',
+  json: 'data_object',
+  list: 'format_list_bulleted',
+  questions: 'quiz',
+  text: 'article'
+}
+
+export const getToolSectionIcon = (section: 'call' | 'details' | 'result') => {
+  if (section === 'call') return 'tune'
+  if (section === 'result') return 'assignment_turned_in'
+  return 'info'
+}
+
+export const getToolFieldIcon = (labelKey: string, format: string) => {
+  const key = labelKey.split('.').pop() ?? labelKey
+  return TOOL_FIELD_ICON_MAP[key] ?? TOOL_FORMAT_ICON_MAP[format] ?? 'label'
+}
+
+export const getToolValueText = (value: unknown) => {
+  if (typeof value === 'string') {
+    return value
+  }
+
+  if (typeof value === 'number' || typeof value === 'boolean') {
+    return String(value)
+  }
+
+  return safeJsonStringify(value, 2)
+}
+
+export const getToolInlineValueText = (value: unknown) => (
+  getToolValueText(value).replace(/\s+/g, ' ').trim()
+)
+
+export const shouldUseMonospaceTarget = (value: string | undefined) => {
+  if (value == null || value === '') {
+    return false
+  }
+
+  return (
+    value.startsWith('/') ||
+    value.startsWith('./') ||
+    value.startsWith('../') ||
+    value.startsWith('http://') ||
+    value.startsWith('https://') ||
+    value.startsWith('#') ||
+    value.includes('/')
+  )
+}
+
+const normalizeToolPath = (value: string) => value.replace(/\\/g, '/')
+
+const looksLikeToolPath = (value: string) => {
+  if (URL_RE.test(value)) {
+    return false
+  }
+
+  const normalized = normalizeToolPath(value)
+  if (normalized.startsWith('/') || normalized.startsWith('./') || normalized.startsWith('../')) {
+    return true
+  }
+
+  if (WINDOWS_PATH_RE.test(value)) {
+    return true
+  }
+
+  if (!normalized.includes('/')) {
+    return false
+  }
+
+  return !normalized.includes(' ')
+}
+
+const getPathLabel = (value: string) => {
+  const normalized = normalizeToolPath(value)
+  const segments = normalized.split('/').filter(Boolean)
+  return segments.at(-1) ?? normalized
+}
+
+const getPathTooltip = (value: string) => {
+  const normalized = normalizeToolPath(value)
+  const segments = normalized.split('/').filter(Boolean)
+  const markerIndex = segments.findIndex(segment => PATH_TOOLTIP_MARKERS.includes(segment))
+
+  if (markerIndex >= 0) {
+    return segments.slice(markerIndex).join('/')
+  }
+
+  return normalized
+}
+
+export const getToolTargetPresentation = (value: string | undefined) => {
+  if (value == null || value.trim() === '') {
+    return {
+      text: undefined,
+      title: undefined,
+      monospace: false
+    }
+  }
+
+  const normalized = value.trim()
+
+  if (looksLikeToolPath(normalized)) {
+    return {
+      text: getPathLabel(normalized),
+      title: getPathTooltip(normalized),
+      monospace: true
+    }
+  }
+
+  if (URL_RE.test(normalized)) {
+    try {
+      const url = new URL(normalized)
+      return {
+        text: `${url.hostname}${url.pathname}${url.search}${url.hash}`,
+        title: normalized,
+        monospace: false
+      }
+    } catch {
+      return {
+        text: normalized,
+        title: normalized,
+        monospace: false
+      }
+    }
+  }
+
+  return {
+    text: normalized,
+    title: undefined,
+    monospace: shouldUseMonospaceTarget(normalized)
+  }
+}

package/src/components/chat/tools/core/tool-result-content-utils.ts

@@ -0,0 +1,171 @@
+import { toSerializable } from '#~/utils/safe-serialize'
+
+interface StructuredTextBlock {
+  type: 'text'
+  text: string
+  format: 'text' | 'markdown'
+}
+
+interface StructuredImageBlock {
+  type: 'image'
+  src: string
+  alt?: string
+  title?: string
+  width?: number
+  height?: number
+}
+
+export type StructuredBlock = StructuredTextBlock | StructuredImageBlock
+
+const parseStructuredInput = (value: unknown) => {
+  if (typeof value !== 'string') {
+    return value
+  }
+
+  const trimmed = value.trim()
+  if (
+    (trimmed.startsWith('{') && trimmed.endsWith('}')) ||
+    (trimmed.startsWith('[') && trimmed.endsWith(']'))
+  ) {
+    try {
+      return JSON.parse(trimmed)
+    } catch {
+      return value
+    }
+  }
+
+  return value
+}
+
+const resolveImageSource = (value: Record<string, unknown>) => {
+  const directUrl = typeof value.url === 'string'
+    ? value.url
+    : typeof value.src === 'string'
+    ? value.src
+    : typeof value.image_url === 'string'
+    ? value.image_url
+    : typeof value.imageUrl === 'string'
+    ? value.imageUrl
+    : typeof value.dataUrl === 'string'
+    ? value.dataUrl
+    : null
+  if (directUrl != null) {
+    return directUrl
+  }
+
+  const source = value.source != null && typeof value.source === 'object'
+    ? value.source as Record<string, unknown>
+    : null
+  const data = typeof value.data === 'string'
+    ? value.data
+    : typeof value.base64 === 'string'
+    ? value.base64
+    : source != null && typeof source.data === 'string'
+    ? source.data
+    : null
+  if (data == null || data === '') {
+    return null
+  }
+
+  const mimeType = typeof value.mimeType === 'string'
+    ? value.mimeType
+    : typeof value.mime_type === 'string'
+    ? value.mime_type
+    : source != null && typeof source.media_type === 'string'
+    ? source.media_type
+    : source != null && typeof source.mimeType === 'string'
+    ? source.mimeType
+    : source != null && typeof source.mime_type === 'string'
+    ? source.mime_type
+    : 'image/png'
+
+  return `data:${mimeType};base64,${data}`
+}
+
+const parseBlock = (value: unknown): StructuredBlock | null => {
+  if (value == null || typeof value !== 'object') {
+    return null
+  }
+
+  const obj = value as Record<string, unknown>
+  const rawType = typeof obj.type === 'string' ? obj.type.toLowerCase() : ''
+  if (rawType === 'text' || rawType === 'markdown' || rawType === 'md') {
+    const text = typeof obj.text === 'string'
+      ? obj.text
+      : typeof obj.content === 'string'
+      ? obj.content
+      : null
+    if (text == null) {
+      return null
+    }
+
+    const rawFormat = typeof obj.format === 'string' ? obj.format.toLowerCase() : 'markdown'
+    return {
+      type: 'text',
+      text,
+      format: rawType === 'text' && (rawFormat === 'text' || rawFormat === 'plain') ? 'text' : 'markdown'
+    }
+  }
+
+  if (rawType !== 'image') {
+    return null
+  }
+
+  const src = resolveImageSource(obj)
+  if (src == null) {
+    return null
+  }
+
+  return {
+    type: 'image',
+    src,
+    alt: typeof obj.alt === 'string' ? obj.alt : undefined,
+    title: typeof obj.title === 'string' ? obj.title : undefined,
+    width: typeof obj.width === 'number' ? obj.width : undefined,
+    height: typeof obj.height === 'number' ? obj.height : undefined
+  }
+}
+
+export const getStructuredBlocks = (value: unknown): StructuredBlock[] | null => {
+  const parsed = parseStructuredInput(toSerializable(value))
+  if (Array.isArray(parsed)) {
+    const blocks = parsed.map(parseBlock)
+    return blocks.every(Boolean) ? blocks as StructuredBlock[] : null
+  }
+
+  if (parsed != null && typeof parsed === 'object') {
+    const container = parsed as Record<string, unknown>
+    const content = container.content ?? container.items ?? container.blocks
+    if (Array.isArray(content)) {
+      const blocks = content.map(parseBlock)
+      return blocks.every(Boolean) ? blocks as StructuredBlock[] : null
+    }
+  }
+
+  const single = parseBlock(parsed)
+  return single != null ? [single] : null
+}
+
+export const getStringList = (value: unknown): string[] | null => {
+  const parsed = parseStructuredInput(toSerializable(value))
+  if (!Array.isArray(parsed) || !parsed.every(item => ['string', 'number', 'boolean'].includes(typeof item))) {
+    return null
+  }
+
+  return parsed.map(item => String(item))
+}
+
+export const looksLikeMarkdown = (value: string) => {
+  const trimmed = value.trim()
+  if (trimmed === '') {
+    return false
+  }
+
+  return (
+    trimmed.startsWith('```') ||
+    /^(?:#{1,6}\s|[-*+]\s|>\s|\d+\.\s)/m.test(trimmed) ||
+    /\[[^\]]+\]\([^)]+\)/.test(trimmed) ||
+    /!\[[^\]]*\]\([^)]+\)/.test(trimmed) ||
+    /\|.+\|/.test(trimmed)
+  )
+}

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

@@ -0,0 +1,194 @@
+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'
+
+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.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 displayName = formatToolName(item.name)
+  const preview = 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 })
+  }
+
+  return formatToolName(item.name)
+}
+
+export function getToolPrimaryText(item: ToolUseItem) {
+  if (isClaudeToolName(item.name)) {
+    return buildClaudeToolPresentation(item.name, item.input).primary
+  }
+
+  return 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 label = formatToolName(item.name)
+  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/plugin-chrome-devtools/ChromeDevtoolsTool.tsx

@@ -1,75 +1,88 @@
 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'
 
-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 : {}
+  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 chrome-devtools-tool'>
+    <div className='tool-group tool-group--compact 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'
-                ? (
+        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={resultItem.content}
-                    lang='text'
-                  />
-                )
-                : (
-                  <CodeBlock
-                    code={safeJsonStringify(resultItem.content, 2)}
+                    code={safeJsonStringify(input, 2)}
                     lang='json'
+                    hideHeader={true}
                   />
-                )}
+                </div>
+              )}
+              {hasResultDetails && resultItem != null && (
+                <div className='tool-detail-section'>
+                  <div className='tool-detail-section__header'>
+                    <Tooltip title={t('chat.result')} {...TOOL_TOOLTIP_PROPS}>
+                      <span className='tool-detail-section__icon material-symbols-rounded'>
+                        {getToolSectionIcon('result')}
+                      </span>
+                    </Tooltip>
+                  </div>
+                  <ToolResultContent content={resultItem.content} />
+                </div>
+              )}
             </div>
-          }
-        />
-      )}
+          )
+          : null}
+      />
     </div>
   )
 })