@orbit-work/ui 0.1.0

package/src/components/domain/desktop/DesktopToolCallView/index.tsx

@@ -0,0 +1,388 @@
+"use client"
+
+import { type CSSProperties, type ReactNode, useState } from "react"
+import { Doc, Maximize } from "../../../composite/Icons"
+import { type ToolArtifactView, ToolDetailModalView } from "../../../domain/skills/ToolDetailModalView"
+import { Button } from "../../../primitives"
+import { ArtifactTrail } from "../../chat/ArtifactCard"
+import {
+  ExecutionDetail,
+  ExecutionSummary,
+  ExecutionSummaryRow,
+  type ExecutionSummaryTool,
+  useInExecutionSummaryBody,
+} from "../../chat/ExecutionSummary"
+import { ToolCallRow, type ToolCallRowState } from "../../chat/ToolCallRow"
+
+export type DesktopToolCallStatus = "running" | "error" | "completed"
+export type DesktopToolCallListKind = "tool" | "command" | "browser" | "read-file" | "write-file"
+export type DesktopToolCallPresentation = "card" | "inline"
+export type DesktopToolCallInlineStatusMode = "icon" | "command-progress" | "hidden"
+
+type ToolStatusWords = { running: string; completed: string; groupUnit: string }
+
+const TOOL_STATUS_WORDS: Record<DesktopToolCallListKind, ToolStatusWords> = {
+  command: { running: "正在运行", completed: "已运行", groupUnit: "项命令" },
+  browser: { running: "正在浏览", completed: "已浏览", groupUnit: "项网页" },
+  "read-file": { running: "正在读取", completed: "已读取", groupUnit: "项文件" },
+  "write-file": { running: "正在写入", completed: "已写入", groupUnit: "项文件" },
+  tool: { running: "正在执行", completed: "已完成", groupUnit: "项操作" },
+}
+
+export function desktopToolStatusLabel(
+  kind: DesktopToolCallListKind,
+  status: DesktopToolCallStatus,
+  fallbackLabel: string,
+): string {
+  if (status === "error") return fallbackLabel
+  const words = TOOL_STATUS_WORDS[kind]
+  if (kind !== "tool") return words[status]
+  if (status === "running") return `正在${fallbackLabel}`
+  const completedPrefixes: Array<[string, string]> = [
+    ["创建", "已创建"],
+    ["更新", "已更新"],
+    ["删除", "已删除"],
+    ["查询", "已查询"],
+    ["搜索", "已搜索"],
+    ["列出", "已列出"],
+    ["整理", "已整理"],
+    ["编辑", "已编辑"],
+    ["写入", "已写入"],
+    ["读取", "已读取"],
+    ["浏览", "已浏览"],
+    ["执行", "已执行"],
+    ["运行", "已运行"],
+  ]
+  const matched = completedPrefixes.find(([prefix]) => fallbackLabel.startsWith(prefix))
+  return matched ? `${matched[1]}${fallbackLabel.slice(matched[0].length)}` : `已完成 ${fallbackLabel}`
+}
+
+function desktopToolListStatusLabel(kind: DesktopToolCallListKind, running: boolean, label: ReactNode): ReactNode {
+  const fallbackLabel = typeof label === "string" ? label : "执行操作"
+  const statusLabel = desktopToolStatusLabel(kind, running ? "running" : "completed", fallbackLabel)
+  const count = typeof label === "string" ? label.match(/等 (\d+) 项操作$/)?.[1] : undefined
+  if (!count) return statusLabel
+  return `${TOOL_STATUS_WORDS[kind][running ? "running" : "completed"]}${count}${TOOL_STATUS_WORDS[kind].groupUnit}`
+}
+
+/** 一段里的一次工具调用（A9-B3 归口口径：数据进来，行由 ToolCallRow / ExecutionSummary 出）。 */
+export interface DesktopToolCallListItem {
+  /** 工具名，mono 11px */
+  name: string
+  /** 参数摘要，单行省略 */
+  args?: string
+  /** 耗时读数，如 "0.9s"；无数据留空，不伪造 */
+  elapsed?: string
+  /** 输出回显（只在收口后的 mono 明细里出，pre-wrap） */
+  out?: string
+  /** 缺省 done；有 running 项时整段按 live 排 */
+  state?: ToolCallRowState
+  /** 覆盖右端状态文案 */
+  statusText?: string
+}
+
+export interface DesktopToolCallListViewProps {
+  running?: boolean
+  label: ReactNode
+  /** 兼容口径：宿主还在把工具块当元素传时，元素落进展开体 */
+  children?: ReactNode
+  /** A9-B3 新口径：给数据，行由本件出（live 段排 ToolCallRow，收口后走 ExecutionSummary 的 mono 明细） */
+  tools?: DesktopToolCallListItem[]
+  /** 头行右侧 mono 读数（「N 步 · 时长」）。无数据整段不渲染，不补零 */
+  meta?: string
+  kind?: DesktopToolCallListKind
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+
+/**
+ * 相邻工具调用收成的「一段执行」（A9-B3：壳由 ChatThinking 换成 ExecutionSummary）。
+ *
+ * 原来这件借 `ChatThinking` 当披露容器，于是一段执行长得跟一行思考一模一样——
+ * 原型里这是两种东西：思考＝构型＋一句话（template.dc.html:1195-1215），
+ * 执行摘要＝短迹＋动宾 label＋mono 读数的卡（1219-1250）。
+ *
+ * 两档体（照原型 3847-3856 的记账）：
+ * - `running`＝这一段还在跑：体里排 `ToolCallRow`（1271-1284 的 live 行列，gap 6），
+ *   正在跑的那条点＝`--ow-beacon`＝全屏唯一的状态极，所以同段思考行的卫星必须同时退无彩
+ *   （`<Thinking variant="inline" toolRunning>`）；live 段默认展开（正在发生的事不藏），
+ *   但 chevron 仍真的能收——受控常开会让 chevron 变成按不动的死钮（§6 交互态只属真可交互件）。
+ * - 收口后：走 ExecutionSummary 自己的 mono 明细行（name / args / elapsed ＋ pre-wrap 输出）。
+ *
+ * R4（2026-09-04）：宿主仍把工具块当元素传的兼容口径没变，但体里的 `DesktopToolCallView`
+ * 不再是一张张 `.chat-tool` 卡——`ExecutionSummary` 的兜底体挂了 `ExecutionSummaryBodyContext`，
+ * 子孙据此把自己渲成一条明细行（收口）或一条 `ToolCallRow`（还在跑），框套框由此退役。
+ */
+export function DesktopToolCallListView({
+  running = false,
+  label,
+  children,
+  tools,
+  meta,
+  kind = "tool",
+  defaultOpen = false,
+  onOpenChange,
+}: DesktopToolCallListViewProps): React.ReactElement {
+  const statusLabel = desktopToolListStatusLabel(kind, running, label)
+  const items = tools ?? []
+  const live = running && items.length > 0
+
+  // live：行是 ToolCallRow，落在 ExecutionSummary 的兜底体里，默认展开（仍可收）
+  if (live) {
+    return (
+      <ExecutionSummary
+        label={typeof statusLabel === "string" ? statusLabel : "正在执行"}
+        meta={meta}
+        defaultOpen
+        onOpenChange={onOpenChange}
+      >
+        {items.map((item, index) => (
+          <ToolCallRow
+            key={`${item.name}-${index}`}
+            name={item.name}
+            args={item.args}
+            state={item.state ?? "running"}
+            elapsed={item.elapsed}
+            statusText={item.statusText}
+          />
+        ))}
+      </ExecutionSummary>
+    )
+  }
+
+  return (
+    <ExecutionSummary
+      label={typeof statusLabel === "string" ? statusLabel : "已完成"}
+      meta={meta}
+      tools={items.length > 0 ? items.map(toExecutionSummaryTool) : undefined}
+      defaultOpen={defaultOpen}
+      onOpenChange={onOpenChange}
+    >
+      {items.length === 0 ? children : undefined}
+    </ExecutionSummary>
+  )
+}
+
+function toExecutionSummaryTool(item: DesktopToolCallListItem): ExecutionSummaryTool {
+  // R2 · L3-3-1：state / statusText 原来在收口路径上被静默丢弃——一段里 bash 失败、跑完之后
+  // 整段仍读作「已运行 2 项命令」，失败那条与成功那条一模一样。两个字段一并透传。
+  return {
+    name: item.name,
+    args: item.args,
+    elapsed: item.elapsed,
+    out: item.out,
+    state: item.state === "error" ? "error" : "done",
+    statusText: item.statusText,
+  }
+}
+
+/** 工具行读数（DS2 §7：耗时/行数一律 mono＋tabular-nums），无值时整段不渲染。 */
+export function formatToolMetrics(durationMs?: number, lineCount?: number): string | null {
+  const parts: string[] = []
+  if (typeof durationMs === "number" && Number.isFinite(durationMs) && durationMs >= 0) {
+    parts.push(durationMs < 1000 ? `${Math.round(durationMs)}ms` : `${(durationMs / 1000).toFixed(1)}s`)
+  }
+  if (typeof lineCount === "number" && Number.isFinite(lineCount) && lineCount >= 0) {
+    // ≥10000 缩写（§7），title 由调用方保留全值
+    parts.push(lineCount >= 10000 ? `${(lineCount / 10000).toFixed(1)}万行` : `${lineCount} 行`)
+  }
+  return parts.length > 0 ? parts.join(" · ") : null
+}
+
+/** 读数的全值 title（§7：≥10000 行缩写显示，全值经 title 保留） */
+function metricsTitle(durationMs?: number, lineCount?: number): string | undefined {
+  const parts: string[] = []
+  if (typeof durationMs === "number" && Number.isFinite(durationMs)) parts.push(`耗时 ${Math.round(durationMs)}ms`)
+  if (typeof lineCount === "number" && Number.isFinite(lineCount)) parts.push(`${lineCount} 行`)
+  return parts.length > 0 ? parts.join(" · ") : undefined
+}
+
+export interface DesktopToolCallViewProps {
+  /**
+   * R4：卡头不再出前导图标——一段执行的左首记号统一是 `ExecutionSummary` 的递减短迹
+   * （`ArtifactTrail`）。本属性仍收下，只用于放大弹窗 `ToolDetailModalView` 的头行图标位。
+   */
+  icon: ReactNode
+  label: string
+  preview?: string | null
+  status: DesktopToolCallStatus
+  kind?: DesktopToolCallListKind
+  /** 执行耗时（毫秒）；渲染为头行 mono 读数 */
+  durationMs?: number
+  /** 输出行数；渲染为头行 mono 读数 */
+  lineCount?: number
+  /**
+   * R4：收口后（completed / error）两档同形——满栏执行摘要卡，`presentation` 成空转属性，
+   * 仅为宿主接线不破而保留。运行中一律是一条 `ToolCallRow`，也与本属性无关。
+   */
+  presentation?: DesktopToolCallPresentation
+  /** 运行中行尾状态词的开关：`"hidden"` 时不出字，其余（icon / command-progress）出「运行中」 */
+  inlineStatusMode?: DesktopToolCallInlineStatusMode
+  input?: ReactNode
+  output?: ReactNode
+  artifacts?: ToolArtifactView[]
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+
+/**
+ * Desktop 单次工具调用（R4 · 2026-09-04 裁决：转录里「一步」只有一套视觉语言）。
+ *
+ * 本件原来自持一张 `.chat-tool` 卡（`min(560px,86%)` ＋ 图标 ＋ hover 才显影的 chevron ＋
+ * 自己的 `pre` 代码井 ＋ 角上的放大钮），于是同一条转录里出现两种「一步」：
+ * 原型语言的执行摘要卡 / live 行（template.dc.html:1219-1250 与 1271-1284），
+ * 和这张桌面端自造的卡；被 `DesktopToolCallListView` 收进段里时还叠成框套框。
+ * 整件改为**只出原型语言**，三条分派：
+ *
+ * 1. `status === "running"` → 一条 `ToolCallRow`（1271-1284 的 live 行：贴地 pill ＋
+ *    行首状态点 ＋ mono 名/参/状态）。运行中不出披露面——正在跑的事没有「收起来的详情」。
+ * 2. 收口（completed / error）且**不在**某张摘要卡的展开体里 → 一张满栏 `ExecutionSummary`
+ *    （1219-1250）：左首递减短迹，label＝动宾词（13/500）＋ preview（`--ow-text-3` 常规体），
+ *    右端 mono 读数；失败时读数后缀「失败」＋`--ow-error`（R1 双编码，字先说色第二）。
+ *    有明细才给体：体＝`ExecutionDetail` 的「输入 / 输出 / 产物」三段眉标 ＋ 右下「放大查看」。
+ *    无明细则头行静态，不做按不动的死钮（§6）。原来的 560px 卡宽上限一并撤——
+ *    执行摘要是转录的骨节，与思考行/返回正文同一栏宽。
+ * 3. 收口且**在**展开体里（`useInExecutionSummaryBody()`，即宿主 `DesktopToolCallListView`
+ *    把工具块当 children 传的那条路）→ 渲成一条 `ExecutionSummaryRow`：无壳无边，
+ *    与 `tools` 数据口径出的行逐值同形；明细仍可就地展开（行尾 12px chevron）。
+ */
+export function DesktopToolCallView({
+  icon,
+  label,
+  preview,
+  status,
+  kind = "tool",
+  durationMs,
+  lineCount,
+  presentation: _presentation = "card",
+  inlineStatusMode = "icon",
+  input,
+  output,
+  artifacts = [],
+  defaultOpen = false,
+  onOpenChange,
+}: DesktopToolCallViewProps): React.ReactElement {
+  const [zoomed, setZoomed] = useState(false)
+  const inSummaryBody = useInExecutionSummaryBody()
+  const verbLabel = desktopToolStatusLabel(kind, status, label)
+  const hasDetails = input != null || output != null || artifacts.length > 0
+  // 运行态不出读数：这一步还没跑完，耗时/行数都还不是事实（§7 不补零不伪造）
+  const metrics = status === "running" ? null : formatToolMetrics(durationMs, lineCount)
+  const artifactsNode = artifacts.length > 0 ? <DesktopToolArtifacts artifacts={artifacts} /> : undefined
+
+  // ① 还在跑：live 行。状态极归行首那颗点（--ow-beacon），全屏唯一
+  if (status === "running") {
+    return (
+      <ToolCallRow
+        name={verbLabel}
+        args={preview ?? undefined}
+        state="running"
+        statusText={inlineStatusMode === "hidden" ? "" : "运行中"}
+      />
+    )
+  }
+
+  // ③ 收口 ＋ 已经坐在一张摘要卡的展开体里：渲成一条明细行，不再套一层卡
+  if (inSummaryBody) {
+    return (
+      <ExecutionSummaryRow
+        tool={{
+          name: verbLabel,
+          args: preview ?? undefined,
+          elapsed: metrics ?? undefined,
+          state: status === "error" ? "error" : "done",
+          input,
+          output,
+          artifacts: artifactsNode,
+          defaultDetailOpen: defaultOpen,
+          onDetailOpenChange: onOpenChange,
+        }}
+      />
+    )
+  }
+
+  // ② 收口 ＋ 独立成段：一张满栏执行摘要卡
+  const cardLabel = (
+    <>
+      {verbLabel}
+      {preview && <span style={previewStyle}>{preview}</span>}
+    </>
+  )
+  const body = hasDetails ? (
+    <ExecutionDetail
+      input={input}
+      output={output}
+      artifacts={artifactsNode}
+      trailing={
+        <Button variant="ghost" size="sm" icon={<Maximize />} onClick={() => setZoomed(true)} title="放大查看执行详情">
+          放大查看
+        </Button>
+      }
+    />
+  ) : undefined
+
+  return (
+    <>
+      <ExecutionSummary
+        label={cardLabel}
+        meta={metrics ?? undefined}
+        metaTitle={metrics ? metricsTitle(durationMs, lineCount) : undefined}
+        statusText={status === "error" ? "失败" : undefined}
+        tone={status === "error" ? "error" : "neutral"}
+        defaultOpen={defaultOpen}
+        onOpenChange={onOpenChange}
+      >
+        {body}
+      </ExecutionSummary>
+      {zoomed && (
+        <ToolDetailModalView
+          icon={icon}
+          label={label}
+          preview={preview}
+          status={status === "completed" ? "success" : status}
+          input={input}
+          output={output}
+          artifacts={artifacts}
+          onClose={() => setZoomed(false)}
+        />
+      )}
+    </>
+  )
+}
+
+/** 头行 label 里的参数摘要：动宾词之后接一段 `--ow-text-3` 常规体（词是主，参数是注）。 */
+const previewStyle: CSSProperties = { color: "var(--ow-text-3)", fontWeight: 400, marginLeft: 6 }
+
+function DesktopToolArtifacts({ artifacts }: { artifacts: ToolArtifactView[] }): React.ReactElement {
+  return (
+    <div className="tool-artifacts">
+      {artifacts.map((artifact) => (
+        <a
+          key={artifact.id}
+          className={`artifact artifact--${artifact.type}`}
+          href={artifact.url}
+          target="_blank"
+          rel="noreferrer"
+          title={artifact.name || artifact.ref}
+        >
+          {/* 递减短迹＝Orbitwork 交付物的统一签名（锁定件 chat/ArtifactCard 的 ArtifactTrail，
+              4 颗 6/5/4/3px、色 --ow-text-3、不占荧黄配额、无常驻动画）。 */}
+          <ArtifactTrail />
+          {artifact.type === "image" ? (
+            <img className="artifact__img" src={artifact.url} alt="" />
+          ) : (
+            <div className="artifact__img artifact__img--empty">
+              <Doc />
+            </div>
+          )}
+          <div className="artifact__cap">
+            <span className="gly">{artifact.type === "image" ? "IMG" : "VID"}</span>
+            <span className="nm">{artifact.name || artifact.ref}</span>
+            <span className="by">{artifact.mimeType}</span>
+            <span className="open">打开</span>
+          </div>
+        </a>
+      ))}
+    </div>
+  )
+}