@allbluecn/web-app 0.23.3 → 0.23.5

package/src/components/desktop-agent/__tests__/agent-workspace-card.test.tsx

@@ -0,0 +1,189 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+
+// 本地文件助手 · 授权目录卡（桌面本地优先 P3-B5）：真实 QueryClient + 可控 fake
+// bridge——listWorkspaces 走 queryOptions 工厂；pickDirectory 成功 → invalidate
+// 重取清单 + 选中新目录；取消（null）不动；removeWorkspace 成功 → invalidate；
+// 旧壳（无三方法）降级提示；agent 终态不可用（presence absent）同样降级；门控
+// 探测/重试中（pending）按加载态；IPC 失败 toast。
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { TooltipProvider } from '@/components/ui/tooltip'
+import { m } from '@/paraglide/messages.js'
+
+const state = vi.hoisted(() => ({
+  bridge: null as unknown,
+  toastError: vi.fn(),
+  presence: 'present' as 'pending' | 'present' | 'absent',
+}))
+
+vi.mock('@/lib/desktop-bridge-types', () => ({
+  getDesktopBridge: () => state.bridge,
+}))
+// 门控判定（agentPort 装配）在 availability 侧的用例见 use-desktop-agent-presence.test.tsx；
+// 本文件固定 presence 值，专注卡片自身的降级/交互。
+vi.mock('@/lib/desktop-agent/use-desktop-agent-presence', () => ({
+  useDesktopAgentPresence: () => state.presence,
+}))
+vi.mock('@/components/ui/toast', () => ({
+  toast: { error: state.toastError, success: vi.fn() },
+}))
+
+import { AgentWorkspaceCard } from '../agent-workspace-card'
+
+function makeBridge(initial: string[]) {
+  let workspaces = [...initial]
+  return {
+    listWorkspaces: vi.fn(async () => [...workspaces]),
+    pickDirectory: vi.fn(async (): Promise<string | null> => null),
+    removeWorkspace: vi.fn(async (path: string) => {
+      workspaces = workspaces.filter((w) => w !== path)
+    }),
+    /** 测试辅助：模拟 main 侧 pickDirectory 写入清单 */
+    authorize(path: string) {
+      workspaces = [...workspaces, path]
+    },
+  }
+}
+
+function renderCard(props: { selected?: string | null; onSelect?: (p: string) => void; disabled?: boolean } = {}) {
+  const client = new QueryClient({ defaultOptions: { queries: { retry: false } } })
+  const onSelect = props.onSelect ?? vi.fn()
+  const { container } = render(
+    <QueryClientProvider client={client}>
+      <TooltipProvider>
+        <AgentWorkspaceCard selected={props.selected ?? null} onSelect={onSelect} disabled={props.disabled} />
+      </TooltipProvider>
+    </QueryClientProvider>,
+  )
+  return { onSelect, container }
+}
+
+beforeEach(() => {
+  state.toastError.mockReset()
+})
+
+afterEach(() => {
+  cleanup()
+  state.bridge = null
+  state.presence = 'present'
+})
+
+describe('AgentWorkspaceCard', () => {
+  it('渲染授权清单：目录名 + 完整路径，当前目录单选选中', async () => {
+    state.bridge = makeBridge(['/Users/x/proj-a', '/Users/x/proj-b'])
+    renderCard({ selected: '/Users/x/proj-b' })
+    expect(await screen.findByText('proj-a')).toBeInTheDocument()
+    expect(screen.getByText('/Users/x/proj-a')).toBeInTheDocument()
+    expect(screen.getByText('proj-b')).toBeInTheDocument()
+    const radios = screen.getAllByRole('radio')
+    expect(radios).toHaveLength(2)
+    expect(radios[1]).toHaveAttribute('aria-checked', 'true')
+    expect(radios[0]).toHaveAttribute('aria-checked', 'false')
+  })
+
+  it('点选其他目录 → onSelect(该路径)', async () => {
+    state.bridge = makeBridge(['/Users/x/proj-a', '/Users/x/proj-b'])
+    const { onSelect } = renderCard({ selected: '/Users/x/proj-a' })
+    await screen.findByText('proj-b')
+    fireEvent.click(screen.getAllByRole('radio')[1]!)
+    await waitFor(() => expect(onSelect).toHaveBeenCalledWith('/Users/x/proj-b'))
+  })
+
+  it('添加目录：pickDirectory 成功 → 清单重取（invalidate）且选中新目录', async () => {
+    const bridge = makeBridge(['/Users/x/proj-a'])
+    bridge.pickDirectory.mockImplementation(async () => {
+      bridge.authorize('/Users/x/new-proj')
+      return '/Users/x/new-proj'
+    })
+    state.bridge = bridge
+    const { onSelect } = renderCard({ selected: '/Users/x/proj-a' })
+    await screen.findByText('proj-a')
+    expect(bridge.listWorkspaces).toHaveBeenCalledTimes(1)
+    fireEvent.click(screen.getByRole('button', { name: m.agent_desktop_workspaceAdd() }))
+    expect(await screen.findByText('new-proj')).toBeInTheDocument()
+    expect(bridge.pickDirectory).toHaveBeenCalledTimes(1)
+    expect(bridge.listWorkspaces).toHaveBeenCalledTimes(2)
+    expect(onSelect).toHaveBeenCalledWith('/Users/x/new-proj')
+  })
+
+  it('取消目录对话框（pickDirectory → null）：不重取、不改选', async () => {
+    const bridge = makeBridge(['/Users/x/proj-a'])
+    state.bridge = bridge
+    const { onSelect } = renderCard({ selected: '/Users/x/proj-a' })
+    await screen.findByText('proj-a')
+    fireEvent.click(screen.getByRole('button', { name: m.agent_desktop_workspaceAdd() }))
+    await waitFor(() => expect(bridge.pickDirectory).toHaveBeenCalledTimes(1))
+    await waitFor(() =>
+      expect(screen.getByRole('button', { name: m.agent_desktop_workspaceAdd() })).not.toBeDisabled(),
+    )
+    expect(bridge.listWorkspaces).toHaveBeenCalledTimes(1)
+    expect(onSelect).not.toHaveBeenCalled()
+  })
+
+  it('撤销授权：removeWorkspace(路径) → 清单重取后该目录消失', async () => {
+    const bridge = makeBridge(['/Users/x/proj-a', '/Users/x/proj-b'])
+    state.bridge = bridge
+    renderCard({ selected: '/Users/x/proj-a' })
+    await screen.findByText('proj-b')
+    fireEvent.click(screen.getAllByRole('button', { name: m.agent_desktop_workspaceRemove() })[1]!)
+    await waitFor(() => expect(screen.queryByText('proj-b')).not.toBeInTheDocument())
+    expect(bridge.removeWorkspace).toHaveBeenCalledWith('/Users/x/proj-b')
+    expect(screen.getByText('proj-a')).toBeInTheDocument()
+  })
+
+  it('空清单：空态提示（引导先添加目录）', async () => {
+    state.bridge = makeBridge([])
+    renderCard()
+    expect(await screen.findByText(m.agent_desktop_workspaceEmpty())).toBeInTheDocument()
+    expect(screen.queryAllByRole('radio')).toHaveLength(0)
+  })
+
+  it('旧壳（无 pickDirectory/listWorkspaces/removeWorkspace）：升级提示，无添加按钮', () => {
+    state.bridge = { appInfo: vi.fn() }
+    renderCard()
+    expect(screen.getByText(m.agent_desktop_workspaceUnsupported())).toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: m.agent_desktop_workspaceAdd() })).toBeNull()
+  })
+
+  it('agent 终态不可用（presence absent）：即使三方法齐备也降级为升级提示，且不发起清单查询', () => {
+    state.presence = 'absent'
+    const bridge = makeBridge(['/Users/x/proj-a'])
+    state.bridge = bridge
+    renderCard()
+    expect(screen.getByText(m.agent_desktop_workspaceUnsupported())).toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: m.agent_desktop_workspaceAdd() })).toBeNull()
+    expect(bridge.listWorkspaces).not.toHaveBeenCalled()
+  })
+
+  it('门控探测 / 冷启动重试中（presence pending）：按加载态渲染，不提前报升级、不查清单', () => {
+    state.presence = 'pending'
+    const bridge = makeBridge(['/Users/x/proj-a'])
+    state.bridge = bridge
+    const { container } = renderCard()
+    expect(screen.queryByText(m.agent_desktop_workspaceUnsupported())).toBeNull()
+    expect(container.querySelectorAll('[data-slot="skeleton"]').length).toBeGreaterThan(0)
+    expect(bridge.listWorkspaces).not.toHaveBeenCalled()
+  })
+
+  it('添加失败（IPC 抛错）→ toast 错误提示', async () => {
+    const bridge = makeBridge(['/Users/x/proj-a'])
+    bridge.pickDirectory.mockRejectedValue(new Error('dialog failed'))
+    state.bridge = bridge
+    renderCard({ selected: '/Users/x/proj-a' })
+    await screen.findByText('proj-a')
+    fireEvent.click(screen.getByRole('button', { name: m.agent_desktop_workspaceAdd() }))
+    await waitFor(() => expect(state.toastError).toHaveBeenCalledWith(m.agent_desktop_workspaceAddFailed()))
+  })
+
+  it('运行中锁定（disabled）：单选与撤销不可操作', async () => {
+    state.bridge = makeBridge(['/Users/x/proj-a', '/Users/x/proj-b'])
+    renderCard({ selected: '/Users/x/proj-a', disabled: true })
+    await screen.findByText('proj-b')
+    for (const btn of screen.getAllByRole('button', { name: m.agent_desktop_workspaceRemove() })) {
+      expect(btn).toBeDisabled()
+    }
+  })
+})

package/src/components/desktop-agent/agent-chat.tsx

@@ -0,0 +1,221 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+
+// 本地文件助手 · 对话区（桌面本地优先 P3-B5）：useChat 直连 Pro desktop 域
+// AgentService 的 `POST /prompt`（AG-UI SSE）。
+// - connection：lib/desktop-agent/connection 包装——每次 connect 懒取 appInfo 的
+//   agentPort/agentToken（backend 重启换端口/令牌后下一问即用新值），引用稳定。
+// - threadId：mount 级稳定值（useChat 1.0 起必填，变化即重建 ChatClient）。B4 端点
+//   每次 POST 新建 pi 会话，threadId 仅作 run 归属回显——一期不保留多轮上下文，
+//   输入区常驻提示告知。
+// - cwd：经 forwardedProps 进 RunAgentInput.forwardedProps（端点 extractCwd 取值位，
+//   服务端再按 workspaces.json 复核授权）；父级以 key={cwd} 让每个目录一份会话。
+// - 消息：user 气泡 / assistant Markdown + 工具调用折叠卡（同 toolCallId 的
+//   tool-result 已由 processor 挂到 tool-call part.output，不重复渲染）；pi 对
+//   user / toolResult 消息也发 message_start/end，processor 会建空 assistant 消息，
+//   渲染层跳过（B3B4 报告疑虑 3）。
+// - 输入：Enter 发送 / Shift+Enter 换行 / 输入法组合中的 Enter 不发送。
+// - 中止：运行中发送按钮换成「中止」+ 应用热键 agent-abort（Mod+.，T23 声明即绑定，
+//   仅运行中 enabled）。
+import { useEffect, useMemo, useRef, useState, type KeyboardEvent, type UIEvent } from 'react'
+import { useChat } from '@tanstack/ai-react'
+import type { UIMessage } from '@tanstack/ai-client'
+import { useAppHotkeys, useHotkey } from '@tanstack/react-hotkeys'
+import { ArrowUp, CircleAlert, FolderSearch, Loader2, MessageSquareText, Square } from 'lucide-react'
+import { AgentToolCard, type AgentToolResultPart } from '@/components/desktop-agent/agent-tool-card'
+import { MarkdownContent } from '@/components/harness/ai-message/components/markdown-content'
+import { ShortcutBadge } from '@/components/hotkeys/shortcut-badge'
+import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from '@/components/ui/empty'
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupTextarea,
+} from '@/components/ui/input-group'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+import { createDesktopAgentConnection } from '@/lib/desktop-agent/connection'
+import { describeDesktopAgentError } from '@/lib/desktop-agent/errors'
+import { formatAppHotkeyForBadge } from '@/lib/hotkeys/registry'
+import { m } from '@/paraglide/messages.js'
+
+/** 距底部小于该值视为「贴底」：新内容到达时自动滚到底；用户上翻阅读时不打断 */
+const STICK_TO_BOTTOM_PX = 80
+
+/** 有可见内容：user 有正文；assistant 有非空正文或工具调用（空消息对跳过） */
+function hasVisibleContent(message: UIMessage): boolean {
+  return message.parts.some((part) =>
+    part.type === 'text' ? part.content.trim() !== '' : part.type === 'tool-call',
+  )
+}
+
+function AgentMessage({ message }: { message: UIMessage }) {
+  if (message.role === 'user') {
+    const text = message.parts.map((part) => (part.type === 'text' ? part.content : '')).join('')
+    return (
+      <div className="flex justify-end" data-testid="agent-message" data-role="user">
+        <div className="max-w-xl rounded-2xl rounded-br-sm bg-primary px-3.5 py-2 text-sm whitespace-pre-wrap text-primary-foreground">
+          {text}
+        </div>
+      </div>
+    )
+  }
+  const results = new Map<string, AgentToolResultPart>()
+  for (const part of message.parts) {
+    if (part.type === 'tool-result') results.set(part.toolCallId, part)
+  }
+  return (
+    <div className="flex flex-col gap-2 text-sm" data-testid="agent-message" data-role="assistant">
+      {message.parts.map((part, index) => {
+        if (part.type === 'text') {
+          // parts 流式只追加不重排，index key 稳定
+          return part.content.trim() === '' ? null : (
+            <MarkdownContent key={index} content={part.content} skipCodeHighlighting />
+          )
+        }
+        if (part.type === 'tool-call') {
+          return <AgentToolCard key={part.id || index} part={part} result={results.get(part.id)} />
+        }
+        return null
+      })}
+    </div>
+  )
+}
+
+export interface AgentChatProps {
+  /** 当前工作目录（授权清单选中项）；null = 尚未授权/选择，输入禁用 */
+  cwd: string | null
+  /** 运行态变化通知父级（运行中锁定目录切换）；须传稳定引用（如 setState） */
+  onRunningChange?: (running: boolean) => void
+}
+
+export function AgentChat({ cwd, onRunningChange }: AgentChatProps) {
+  const [connection] = useState(() => createDesktopAgentConnection())
+  const [threadId] = useState(() => crypto.randomUUID())
+  const forwardedProps = useMemo(() => ({ cwd: cwd ?? '' }), [cwd])
+  const { messages, sendMessage, stop, isLoading, error } = useChat({ connection, threadId, forwardedProps })
+
+  const [input, setInput] = useState('')
+  const scrollRef = useRef<HTMLDivElement>(null)
+  const stickToBottomRef = useRef(true)
+
+  // 声明即绑定：agent-abort 单一来源 lib/hotkeys/registry.ts
+  const hk = useAppHotkeys()
+  useHotkey(hk['agent-abort'], () => stop(), { enabled: isLoading })
+
+  useEffect(() => {
+    onRunningChange?.(isLoading)
+  }, [isLoading, onRunningChange])
+  // 运行中被卸载（离开页面）：解除父级锁定
+  useEffect(() => () => onRunningChange?.(false), [onRunningChange])
+
+  const visible = useMemo(() => messages.filter(hasVisibleContent), [messages])
+
+  useEffect(() => {
+    const el = scrollRef.current
+    if (el && stickToBottomRef.current) el.scrollTop = el.scrollHeight
+  }, [visible, isLoading])
+
+  const onScroll = (event: UIEvent<HTMLDivElement>) => {
+    const el = event.currentTarget
+    stickToBottomRef.current = el.scrollHeight - el.scrollTop - el.clientHeight < STICK_TO_BOTTOM_PX
+  }
+
+  const canSend = cwd !== null && input.trim() !== '' && !isLoading
+
+  const submit = () => {
+    if (!canSend) return
+    const text = input.trim()
+    setInput('')
+    stickToBottomRef.current = true
+    // 失败由 useChat error 态渲染（describeDesktopAgentError），这里只吞 unhandledrejection
+    Promise.resolve(sendMessage(text)).catch(() => {})
+  }
+
+  const onKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (event.key !== 'Enter' || event.shiftKey || event.nativeEvent.isComposing) return
+    event.preventDefault()
+    submit()
+  }
+
+  return (
+    <section className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl border bg-card">
+      <div className="flex items-center gap-2 border-b px-4 py-2.5 text-xs text-muted-foreground">
+        <FolderSearch className="size-3.5 shrink-0" />
+        <span className="min-w-0 truncate" data-testid="agent-chat-cwd">
+          {cwd ? m.agent_desktop_chatCwd({ path: cwd }) : m.agent_desktop_chatNoWorkspace()}
+        </span>
+      </div>
+
+      <div ref={scrollRef} onScroll={onScroll} className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 py-4">
+        {visible.length === 0 && !isLoading ? (
+          <Empty className="h-full">
+            <EmptyHeader>
+              <EmptyMedia variant="icon">
+                <MessageSquareText />
+              </EmptyMedia>
+              <EmptyTitle>{m.agent_desktop_chatEmptyTitle()}</EmptyTitle>
+              <EmptyDescription>{m.agent_desktop_chatEmptyHint()}</EmptyDescription>
+            </EmptyHeader>
+          </Empty>
+        ) : (
+          <div className="mx-auto flex w-full max-w-3xl flex-col gap-5">
+            {visible.map((message) => (
+              <AgentMessage key={message.id} message={message} />
+            ))}
+            {isLoading && (
+              <div className="flex items-center gap-2 text-sm text-muted-foreground" data-testid="agent-chat-thinking">
+                <Loader2 className="size-4 animate-spin" />
+                {m.agent_desktop_chatThinking()}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {error && (
+        <div
+          role="alert"
+          className="mx-4 mb-2 flex items-start gap-2 rounded-lg border border-destructive/40 bg-destructive/5 px-3 py-2 text-xs text-destructive"
+        >
+          <CircleAlert className="mt-0.5 size-3.5 shrink-0" />
+          <span className="min-w-0 wrap-break-word">{describeDesktopAgentError(error)}</span>
+        </div>
+      )}
+
+      <div className="border-t p-3">
+        <InputGroup>
+          <InputGroupTextarea
+            value={input}
+            onChange={(event) => setInput(event.target.value)}
+            onKeyDown={onKeyDown}
+            disabled={cwd === null}
+            placeholder={cwd ? m.agent_desktop_chatPlaceholder() : m.agent_desktop_chatNoWorkspace()}
+            className="max-h-40"
+          />
+          <InputGroupAddon align="block-end">
+            <span className="min-w-0 truncate text-xs font-normal">{m.agent_desktop_chatIndependentHint()}</span>
+            {isLoading ? (
+              <Tooltip>
+                <TooltipTrigger
+                  render={<InputGroupButton variant="outline" size="sm" className="ml-auto" onClick={() => stop()} />}
+                >
+                  <Square className="fill-current" />
+                  {m.agent_desktop_chatStop()}
+                </TooltipTrigger>
+                <TooltipContent>
+                  <ShortcutBadge keys={formatAppHotkeyForBadge(hk['agent-abort'].hotkey)} />
+                </TooltipContent>
+              </Tooltip>
+            ) : (
+              <InputGroupButton variant="default" size="sm" className="ml-auto" disabled={!canSend} onClick={submit}>
+                <ArrowUp />
+                {m.agent_desktop_chatSend()}
+              </InputGroupButton>
+            )}
+          </InputGroupAddon>
+        </InputGroup>
+      </div>
+    </section>
+  )
+}

package/src/components/desktop-agent/agent-tool-card.tsx

@@ -0,0 +1,185 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+
+// 本地文件助手 · 工具调用折叠卡（桌面本地优先 P3-B5）：pi 只读四件套的每次调用
+// 渲染为一张默认折叠的卡——头部「工具 + 目标 + 计数」，展开后列出文件名（ls /
+// find）、命中行（grep：文件:行号 + 行内容）或文件内容（read）。风格对齐 hextaui
+// AI 分组 / 站内 components/ai/tool-cards（rounded-lg border bg-muted/40 text-xs +
+// 折叠头），折叠用 shadcn Collapsible（Base UI）。解析逻辑在 lib/desktop-agent/tool-result。
+import { useState } from 'react'
+import type { UIMessage } from '@tanstack/ai-client'
+import {
+  ChevronRight,
+  FileSearch,
+  FileText,
+  Folder,
+  FolderTree,
+  Loader2,
+  Search,
+  Wrench,
+  type LucideIcon,
+} from 'lucide-react'
+import { Badge } from '@/components/ui/badge'
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
+import {
+  extractAgentToolText,
+  parseAgentToolArgs,
+  summarizeAgentTool,
+  type AgentToolKind,
+  type AgentToolSummary,
+} from '@/lib/desktop-agent/tool-result'
+import { cn } from '@/lib/utils'
+import { m } from '@/paraglide/messages.js'
+
+type MessagePart = UIMessage['parts'][number]
+export type AgentToolCallPart = Extract<MessagePart, { type: 'tool-call' }>
+export type AgentToolResultPart = Extract<MessagePart, { type: 'tool-result' }>
+
+const KIND_ICON: Record<AgentToolKind, LucideIcon> = {
+  read: FileText,
+  grep: Search,
+  find: FileSearch,
+  ls: FolderTree,
+  other: Wrench,
+}
+
+// 文案在渲染时解析（paraglide 按当前 locale）；非导出函数保 Fast Refresh 纯组件边界
+function titleOf(summary: AgentToolSummary, toolName: string): string {
+  const target = summary.target ?? '…'
+  switch (summary.kind) {
+    case 'read':
+      return m.agent_desktop_toolRead({ target })
+    case 'grep':
+      return m.agent_desktop_toolGrep({ target })
+    case 'find':
+      return m.agent_desktop_toolFind({ target })
+    case 'ls':
+      return m.agent_desktop_toolLs({ target })
+    default:
+      return m.agent_desktop_toolOther({ name: toolName })
+  }
+}
+
+function countOf(summary: AgentToolSummary): string | null {
+  if (summary.empty) return summary.kind === 'ls' ? m.agent_desktop_toolEmptyDir() : m.agent_desktop_toolNoMatches()
+  if (summary.total === 0) return null
+  switch (summary.kind) {
+    case 'grep':
+      return m.agent_desktop_toolCountHits({ count: summary.total })
+    case 'ls':
+    case 'find':
+      return m.agent_desktop_toolCountFiles({ count: summary.total })
+    default:
+      return m.agent_desktop_toolCountLines({ count: summary.total })
+  }
+}
+
+function ToolEntries({ summary }: { summary: AgentToolSummary }) {
+  const hidden = summary.total - summary.entries.length
+  return (
+    <div className="flex flex-col gap-1.5">
+      {summary.kind === 'read' || summary.kind === 'other' ? (
+        <pre className="max-h-60 overflow-auto rounded bg-background p-2 font-mono whitespace-pre-wrap break-all text-foreground">
+          {summary.entries.map((entry) => (entry.kind === 'text' ? entry.text : '')).join('\n')}
+        </pre>
+      ) : (
+        <ul className="flex max-h-60 flex-col gap-0.5 overflow-auto font-mono">
+          {summary.entries.map((entry, index) =>
+            entry.kind === 'hit' ? (
+              <li key={index} className="flex min-w-0 gap-2 rounded px-1.5 py-0.5 hover:bg-background">
+                <span className="shrink-0 text-muted-foreground">{`${entry.path}:${entry.line}`}</span>
+                <span className="min-w-0 truncate">{entry.text}</span>
+              </li>
+            ) : entry.kind === 'file' ? (
+              <li key={index} className="flex min-w-0 items-center gap-1.5 rounded px-1.5 py-0.5 hover:bg-background">
+                {entry.path.endsWith('/') ? (
+                  <Folder className="size-3 shrink-0 text-muted-foreground" />
+                ) : (
+                  <FileText className="size-3 shrink-0 text-muted-foreground" />
+                )}
+                <span className="min-w-0 truncate">{entry.path}</span>
+              </li>
+            ) : null,
+          )}
+        </ul>
+      )}
+      {hidden > 0 && <p className="text-muted-foreground">{m.agent_desktop_toolMore({ count: hidden })}</p>}
+    </div>
+  )
+}
+
+export interface AgentToolCardProps {
+  part: AgentToolCallPart
+  /** 同 toolCallId 的 tool-result part（output 缺席时的内容回落 + 错误原文） */
+  result?: AgentToolResultPart
+}
+
+export function AgentToolCard({ part, result }: AgentToolCardProps) {
+  const [open, setOpen] = useState(false)
+  const isError = part.state === 'error' || result?.state === 'error'
+  const settled = isError || part.output !== undefined || (result !== undefined && result.state !== 'streaming')
+  const text = settled ? extractAgentToolText(part.output, result?.content) : null
+  const summary = summarizeAgentTool(part.name, parseAgentToolArgs(part), isError ? null : text)
+  const errorText = isError ? (result?.error ?? text) : null
+  const expandable = isError ? Boolean(errorText) : summary.entries.length > 0
+  const count = settled && !isError ? countOf(summary) : null
+  const Icon = KIND_ICON[summary.kind]
+  const expanded = open && expandable
+
+  return (
+    <Collapsible
+      open={expanded}
+      onOpenChange={setOpen}
+      disabled={!expandable}
+      data-tool={part.name}
+      className={cn(
+        'rounded-lg border text-xs',
+        isError ? 'border-destructive/40 bg-destructive/5' : 'border-border bg-muted/40',
+      )}
+    >
+      <CollapsibleTrigger
+        data-testid="agent-tool-card-trigger"
+        className="flex w-full items-center gap-2 px-2.5 py-2 text-left"
+      >
+        <ChevronRight
+          className={cn(
+            'size-3.5 shrink-0 text-muted-foreground transition-transform',
+            expanded && 'rotate-90',
+            !expandable && 'opacity-0',
+          )}
+        />
+        <Icon className="size-3.5 shrink-0 text-muted-foreground" />
+        <span className="min-w-0 flex-1 truncate font-medium">{titleOf(summary, part.name)}</span>
+        {!settled && (
+          <span className="flex shrink-0 items-center gap-1 text-muted-foreground">
+            <Loader2 className="size-3 animate-spin" />
+            {m.agent_desktop_toolRunning()}
+          </span>
+        )}
+        {isError && (
+          <Badge variant="destructive" className="shrink-0">
+            {m.agent_desktop_toolError()}
+          </Badge>
+        )}
+        {summary.truncated && (
+          <Badge variant="outline" className="shrink-0">
+            {m.agent_desktop_toolTruncated()}
+          </Badge>
+        )}
+        {count && <span className="shrink-0 text-muted-foreground">{count}</span>}
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <div className="border-t px-2.5 py-2">
+          {isError ? (
+            <pre className="max-h-60 overflow-auto font-mono whitespace-pre-wrap break-all text-destructive">
+              {errorText}
+            </pre>
+          ) : (
+            <ToolEntries summary={summary} />
+          )}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  )
+}