@orbit-work/ui 0.1.0

package/src/components/domain/chat/ExecutionSummary/index.tsx

@@ -0,0 +1,487 @@
+"use client"
+
+import { type CSSProperties, type ReactNode, createContext, useContext, useId, useState } from "react"
+import { ChevDown, ChevRight } from "../../../composite/Icons"
+import { ArtifactTrail } from "../ArtifactCard"
+
+/** 展开体里的一条工具明细：名 / 参数 / 耗时 / 输出，四段全 mono 11px。 */
+export type ExecutionSummaryTool = {
+  /** 工具名，mono 11px/500 --ow-text */
+  name: string
+  /** 调用参数摘要，mono 11px --ow-text-3，单行省略 */
+  args?: string
+  /** 该条耗时读数，如 "0.9s"；mono 11px tabular-nums --ow-text-3。无数据留空，不伪造 */
+  elapsed?: string
+  /** 输出回显，mono 11px/1.6 --ow-text-2，pre-wrap 保留换行 */
+  out?: string
+  /**
+   * R2 · L3-3-1：这一条的结局。`"error"` 时行末出「失败」字＋`--ow-error`（R1 双编码，色只作
+   * 第二编码），头行读数也跟着改成「N 项中 M 项失败」——收口后失败那条不再与成功那条一模一样。
+   */
+  state?: "done" | "error"
+  /** 覆盖行末状态词（缺省：error→「失败」，done→无字，读数位仍走 elapsed） */
+  statusText?: string
+  /**
+   * R4（2026-09-04，Terry：工具调用展开后要看得到输入输出）——这一条的明细。任一给了，
+   * 行首行就成披露触发器（行尾 12px chevron），展开后按「输入 / 输出 / 产物」三段眉标排，
+   * 内容由宿主给（`<pre>` / Markdown / 产物卡），`ExecutionDetail` 负责眉标与井。
+   */
+  input?: ReactNode
+  output?: ReactNode
+  artifacts?: ReactNode
+  /** 明细非受控初始展开态 */
+  defaultDetailOpen?: boolean
+  /** 明细受控展开态 */
+  detailOpen?: boolean
+  onDetailOpenChange?: (open: boolean) => void
+}
+
+export type ExecutionSummaryProps = {
+  /** 动宾短语摘要，如「核对组件库现状」；--ow-fs-ui/500，单行省略。可给节点（如「已读取文件 ＋ text-3 的文件名」） */
+  label: ReactNode
+  /**
+   * 头行读数之后的状态词（R4，单工具卡用）：如「失败」；`tone="error"` 时着 `--ow-error`
+   * （R1 双编码：字先说，色第二）。段内多条失败的「N 项中 M 项失败」仍由 tools 自动算。
+   */
+  statusText?: string
+  tone?: "neutral" | "error"
+  /** 读数的 title（§7：≥10000 的行数缩写显示，全值由调用方经 title 保留） */
+  metaTitle?: string
+  /** 步数，与 duration 一起拼成「N 步 · 时长」 */
+  steps?: number
+  /** 本段总时长，如 "2m06s" */
+  duration?: string
+  /** 直接给读数原文；给了就不再由 steps/duration 拼。三者全缺＝读数位整段不渲染（不伪造数字） */
+  meta?: string
+  /** 工具明细；为空时不出 chevron、头行不可点 */
+  tools?: ExecutionSummaryTool[]
+  /**
+   * 自定义展开体——`tools` 缺席时的兜底面（`--ow-surface-2` 井底 ＋ padding `9px 12px` 的 gap 6 列）。
+   * A9-B3 归口用：宿主还在把工具块当元素传（`DesktopToolCallListView` 的 children），
+   * 以及 live 段要在体里排 `ToolCallRow` 时走这一路；`tools` 一给就以 mono 明细行为准。
+   */
+  children?: ReactNode
+  /** 非受控初始展开态 */
+  defaultOpen?: boolean
+  /** 受控展开态；给了就以它为准 */
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  className?: string
+}
+
+/**
+ * ExecutionSummary 执行摘要卡（照原型模板 template.dc.html:1219-1250 逐值）。
+ *
+ * 一段 agent loop 的收口记号：一行思考之后、返回正文之前的那张卡。
+ * - 壳＝`--ow-surface` ＋ 1px `--ow-border` ＋ `--ow-radius-lg`，`overflow:hidden`（贴地零影，§5）
+ * - 头行＝button：左首递减短迹（复用 ArtifactCard 的 `ArtifactTrail`，6/5/4/3px · 1/.68/.45/.25，
+ *   同一枚「Orbitwork 交付物」签名）＋动宾 label（`--ow-fs-ui`/500 单行省略）＋
+ *   mono 读数「N 步 · 时长」（`--ow-fs-mark-md` tabular-nums `--ow-text-2`）＋宽 14 居中的 ▸/▾
+ * - 展开体＝`border-top:1px --ow-border` ＋ `--ow-surface-2`（嵌套井，§5 三档表面）；
+ *   每条 padding `9px 12px 9px 30px`、内 gap 3；首行 baseline 对齐：name/args/elapsed，
+ *   次行 out 走 `white-space:pre-wrap`
+ * - R3 中性件：整卡不含荧黄。段内的状态极归正在跑的那条 `ToolCallRow`（原型 logic:3850 的记账）
+ * - 读数无数据时整段不渲染（`ToolBlock` 尚无耗时字段，见 A9 devDependency），不占位不补零
+ */
+/**
+ * 「我正坐在一张执行摘要卡的展开体里」——`children` 兜底体给子孙的上下文。
+ * `DesktopToolCallView` 据此把自己渲成一条 `ExecutionSummaryRow` 而不是又一张卡（R4：卡套卡退役）。
+ */
+export const ExecutionSummaryBodyContext = createContext(false)
+export function useInExecutionSummaryBody(): boolean {
+  return useContext(ExecutionSummaryBodyContext)
+}
+
+export type ExecutionDetailProps = {
+  input?: ReactNode
+  output?: ReactNode
+  artifacts?: ReactNode
+  /** 明细区右下角的附加动作（如「放大查看」），可选 */
+  trailing?: ReactNode
+  className?: string
+}
+
+/**
+ * ExecutionDetail 工具明细（R4）：「输入 / 输出 / 产物」三段，眉标走 §8 中文眉标档
+ * （12px/500/+0.08em/`--ow-eyebrow`），内容井＝`--ow-surface` ＋ 1px `--ow-border` ＋
+ * `--ow-radius-sm`（坐在 surface-2 的展开体上，井按 §5 三档回到纸面色），mono 12/1.55，
+ * 最高 220 内滚。宿主传进来的 `<pre>` / `.chat-code` / Markdown 都落进这口井（components.css）。
+ */
+export function ExecutionDetail({ input, output, artifacts, trailing, className = "" }: ExecutionDetailProps) {
+  return (
+    <div className={`ow-execution-detail ${className}`} data-slot="execution-detail" style={detailStyle}>
+      {input != null && (
+        <section data-ow-part="section">
+          <div data-ow-part="eyebrow" style={eyebrowStyle}>
+            输入
+          </div>
+          <div data-ow-part="well">{input}</div>
+        </section>
+      )}
+      {output != null && (
+        <section data-ow-part="section">
+          <div data-ow-part="eyebrow" style={eyebrowStyle}>
+            输出
+          </div>
+          <div data-ow-part="well">{output}</div>
+        </section>
+      )}
+      {artifacts != null && (
+        <section data-ow-part="section">
+          <div data-ow-part="eyebrow" style={eyebrowStyle}>
+            产物
+          </div>
+          <div data-ow-part="artifacts">{artifacts}</div>
+        </section>
+      )}
+      {trailing != null && (
+        <div data-ow-part="trailing" style={trailingStyle}>
+          {trailing}
+        </div>
+      )}
+    </div>
+  )
+}
+
+/**
+ * ExecutionSummaryRow 展开体里的一条工具明细（R4 抽出，供 `DesktopToolCallView` 在卡体里复用）。
+ * 首行 name / args / elapsed / 状态词 baseline 对齐，次行 `out` pre-wrap；有 input / output /
+ * artifacts 时首行成披露触发器（行尾 chevron），展开 `ExecutionDetail`。
+ */
+export function ExecutionSummaryRow({
+  tool,
+  className = "",
+}: {
+  tool: ExecutionSummaryTool
+  className?: string
+}) {
+  // 兜底体（宿主把 DesktopToolCallView 当元素传进来的那条路）自带 padding 12 ＋ gap 6，
+  // 行再带 30 的左内距就会比同体里的 ToolCallRow pill 缩进 30——两种行在同一体里要同一条起线。
+  const inCustomBody = useInExecutionSummaryBody()
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(Boolean(tool.defaultDetailOpen))
+  const open = tool.detailOpen ?? uncontrolledOpen
+  const detailId = useId()
+  const hasDetail = tool.input != null || tool.output != null || tool.artifacts != null
+  const toggleDetail = () => {
+    const next = !open
+    if (tool.detailOpen === undefined) setUncontrolledOpen(next)
+    tool.onDetailOpenChange?.(next)
+  }
+  // R1 双编码：失败先由文字说，色（--ow-error）只作第二编码
+  const statusWord = tool.statusText ?? (tool.state === "error" ? "失败" : undefined)
+  const head = (
+    <>
+      <span style={nameStyle}>{tool.name}</span>
+      <span style={argsStyle}>{tool.args}</span>
+      {tool.elapsed && <span style={elapsedStyle}>{tool.elapsed}</span>}
+      {statusWord && (
+        <span style={tool.state === "error" ? { ...elapsedStyle, color: "var(--ow-error)" } : elapsedStyle}>
+          {statusWord}
+        </span>
+      )}
+      {hasDetail && (
+        <span aria-hidden="true" data-ow-part="chevron" style={rowChevStyle}>
+          {open ? <ChevDown /> : <ChevRight />}
+        </span>
+      )}
+    </>
+  )
+  return (
+    <div
+      className={`ow-execution-summary__row ${className}`}
+      data-slot="execution-summary-row"
+      data-ow-state={[tool.state ?? "done", open ? "expanded" : null].filter(Boolean).join(" ")}
+      style={inCustomBody ? rowStyleInCustomBody : rowStyle}
+    >
+      {hasDetail ? (
+        <button
+          type="button"
+          className="ow-focus-ring"
+          data-ow-part="row-trigger"
+          style={{ ...rowHeadStyle, ...rowTriggerReset }}
+          onClick={toggleDetail}
+          aria-expanded={open}
+          aria-controls={open ? detailId : undefined}
+        >
+          {head}
+        </button>
+      ) : (
+        <div style={rowHeadStyle}>{head}</div>
+      )}
+      {tool.out && <div style={outStyle}>{tool.out}</div>}
+      {hasDetail && open && (
+        <div id={detailId}>
+          <ExecutionDetail input={tool.input} output={tool.output} artifacts={tool.artifacts} />
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function ExecutionSummary({
+  label,
+  statusText,
+  tone = "neutral",
+  metaTitle,
+  steps,
+  duration,
+  meta,
+  tools,
+  children,
+  defaultOpen = false,
+  open,
+  onOpenChange,
+  className = "",
+}: ExecutionSummaryProps) {
+  const [uncontrolled, setUncontrolled] = useState(defaultOpen)
+  const isControlled = open !== undefined
+  const expanded = isControlled ? open : uncontrolled
+  const bodyId = useId()
+  const list = tools ?? []
+  const hasCustomBody = list.length === 0 && children != null
+  const collapsible = list.length > 0 || hasCustomBody
+
+  // R2 · L3-3-1：段里有失败项时，头行读数补一句「N 项中 M 项失败」——
+  // 段头原来一律读 desktopToolListStatusLabel(kind,"completed")，失败被整段吞掉。
+  const failedCount = list.filter((tool) => tool.state === "error").length
+  const baseReadout = meta ?? formatExecutionMeta(steps, duration)
+  const failureReadout = failedCount > 0 ? formatExecutionFailure(list.length, failedCount) : undefined
+  const readout = [baseReadout, failureReadout, statusText].filter(Boolean).join(" · ") || undefined
+
+  const toggle = () => {
+    if (!collapsible) return
+    const next = !expanded
+    if (!isControlled) setUncontrolled(next)
+    onOpenChange?.(next)
+  }
+
+  const head = (
+    <>
+      <ArtifactTrail />
+      <span style={labelStyle}>{label}</span>
+      {readout && (
+        <span style={metaStyle} title={metaTitle}>
+          {baseReadout}
+          {baseReadout && failureReadout ? " · " : null}
+          {/* 失败计数只给这一段上 --ow-error：步数/时长仍是中性读数，色只标失败那一处 */}
+          {failureReadout && <span style={{ color: "var(--ow-error)" }}>{failureReadout}</span>}
+          {statusText && (
+            <>
+              {baseReadout || failureReadout ? " · " : null}
+              <span style={tone === "error" ? { color: "var(--ow-error)" } : undefined}>{statusText}</span>
+            </>
+          )}
+        </span>
+      )}
+      {collapsible && (
+        // R4：chevron 统一走图标集 ChevRight / ChevDown（原 ▸/▾ 文字字形），常显不靠 hover 显影——
+        // 转录里所有可展开的东西（思考行 / 摘要卡 / 明细行）同一枚 14px --ow-text-3 记号
+        <span aria-hidden="true" data-ow-part="chevron" style={chevStyle}>
+          {expanded ? <ChevDown /> : <ChevRight />}
+        </span>
+      )}
+    </>
+  )
+
+  return (
+    <div className={`ow-execution-summary ${className}`} data-slot="execution-summary" style={cardStyle}>
+      {collapsible ? (
+        <button
+          type="button"
+          className="ow-focus-ring hover:bg-[var(--ow-hover)] active:bg-[var(--ow-press)]"
+          style={headStyle}
+          onClick={toggle}
+          aria-expanded={expanded}
+          aria-controls={expanded ? bodyId : undefined}
+        >
+          {head}
+        </button>
+      ) : (
+        // 无明细＝无可展开面：不做死钮，落成静态头行（§6 交互态只属真的可交互件）
+        <div style={{ ...headStyle, cursor: "default" }}>{head}</div>
+      )}
+      {collapsible && expanded && (
+        <div id={bodyId} data-ow-part="body" style={hasCustomBody ? customBodyStyle : bodyStyle}>
+          {/* 兜底体里的子孙（宿主的 DesktopToolCallView）据此把自己渲成行而不是卡（R4） */}
+          {hasCustomBody && (
+            <ExecutionSummaryBodyContext.Provider value>{children}</ExecutionSummaryBodyContext.Provider>
+          )}
+          {list.map((tool, i) => (
+            <ExecutionSummaryRow key={`${tool.name}-${i}`} tool={tool} />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+/** 「N 项中 M 项失败」——收口段里有失败项时的读数（R2 · L3-3-1）。 */
+export function formatExecutionFailure(total: number, failed: number): string {
+  return `${total} 项中 ${failed} 项失败`
+}
+
+/** 「N 步 · 时长」——两者缺一给单段，全缺给 undefined（读数位不渲染）。 */
+export function formatExecutionMeta(steps?: number, duration?: string): string | undefined {
+  const parts: string[] = []
+  if (typeof steps === "number") parts.push(`${steps} 步`)
+  if (duration) parts.push(duration)
+  return parts.length ? parts.join(" · ") : undefined
+}
+
+const cardStyle: CSSProperties = {
+  display: "flex",
+  flexDirection: "column",
+  /* 转录容器（.turn--agent .body）是 align-items: flex-start 的 flex 列，参数摘要
+     white-space: nowrap 让卡的 min-content 极大——不设上限会被自动最小尺寸撑出
+     chat 内容区；maxWidth 兜住后由 label 的单行省略收尾（见 labelStyle）。 */
+  maxWidth: "100%",
+  border: "1px solid var(--ow-border)",
+  borderRadius: "var(--ow-radius-lg)",
+  background: "var(--ow-surface)",
+  overflow: "hidden",
+  fontFamily: "var(--ow-font-body)",
+}
+
+const headStyle: CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  gap: 10,
+  width: "100%",
+  padding: "10px 12px",
+  border: 0,
+  background: "transparent",
+  color: "var(--ow-text)",
+  font: "inherit",
+  textAlign: "left",
+  cursor: "pointer",
+}
+
+const labelStyle: CSSProperties = {
+  flex: "1 1 auto",
+  minWidth: 0,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+  fontSize: "var(--ow-fs-ui)",
+  fontWeight: 500,
+}
+
+const metaStyle: CSSProperties = {
+  flex: "0 0 auto",
+  fontFamily: "var(--ow-font-mono)",
+  fontSize: "var(--ow-fs-mark-md)",
+  fontVariantNumeric: "tabular-nums",
+  color: "var(--ow-text-2)",
+}
+
+const chevStyle: CSSProperties = {
+  flex: "0 0 auto",
+  width: 14,
+  height: 14,
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: "var(--ow-text-3)",
+}
+
+/** 明细行行尾的小 chevron：12px，与头行 14px 分档，读作「行内还有一层」 */
+const rowChevStyle: CSSProperties = {
+  flex: "0 0 auto",
+  alignSelf: "center",
+  width: 12,
+  height: 12,
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: "var(--ow-text-3)",
+}
+
+const rowTriggerReset: CSSProperties = {
+  width: "100%",
+  padding: 0,
+  border: 0,
+  background: "transparent",
+  color: "inherit",
+  font: "inherit",
+  textAlign: "left",
+  cursor: "pointer",
+  borderRadius: "var(--ow-radius-2xs)",
+}
+
+/** 明细区：三段眉标列，段间 8；井的样式在 components.css（`.ow-execution-detail [data-ow-part="well"]`） */
+const detailStyle: CSSProperties = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 8,
+  marginTop: 6,
+  position: "relative",
+}
+
+const eyebrowStyle: CSSProperties = {
+  margin: "0 0 4px",
+  font: "500 var(--ow-fs-eyebrow-cjk, 12px)/1 var(--ow-font-sans)",
+  letterSpacing: "var(--ow-ls-eyebrow-cjk, 0.08em)",
+  color: "var(--ow-eyebrow)",
+}
+
+const trailingStyle: CSSProperties = { display: "flex", justifyContent: "flex-end" }
+
+/* R5（2026-09-04，Terry）：展开体不再铺 --ow-surface-2（整块米色太突兀），回到白面；层次由
+   明细里的输入/输出井（--ow-well-bg ＋ 1px 边）承担。原型 1234 的 surface-2 体作废。 */
+const bodyStyle: CSSProperties = {
+  display: "flex",
+  flexDirection: "column",
+  borderTop: "1px solid var(--ow-border)",
+  background: "var(--ow-surface)",
+}
+
+/** 兜底展开体：同一张井底，只是内容由调用方给（gap 6 ＝原型 live 行列的行距，template.dc.html:1272）。 */
+const customBodyStyle: CSSProperties = {
+  ...bodyStyle,
+  gap: 6,
+  padding: "9px 12px",
+}
+
+const rowStyle: CSSProperties = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 3,
+  padding: "9px 12px 9px 30px",
+}
+
+/** 兜底体里的明细行：体已给 12 内距，行只留上下 9，与同体的 ToolCallRow 同一条起线 */
+const rowStyleInCustomBody: CSSProperties = { ...rowStyle, padding: "9px 0" }
+
+const rowHeadStyle: CSSProperties = { display: "flex", alignItems: "baseline", gap: 8 }
+
+const monoBase: CSSProperties = {
+  fontFamily: "var(--ow-font-mono)",
+  fontSize: "var(--ow-fs-mark-md)",
+}
+
+const nameStyle: CSSProperties = { ...monoBase, flex: "0 0 auto", fontWeight: 500, color: "var(--ow-text)" }
+
+const argsStyle: CSSProperties = {
+  ...monoBase,
+  flex: "1 1 auto",
+  minWidth: 0,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+  color: "var(--ow-text-3)",
+}
+
+const elapsedStyle: CSSProperties = {
+  ...monoBase,
+  flex: "0 0 auto",
+  fontVariantNumeric: "tabular-nums",
+  color: "var(--ow-text-3)",
+}
+
+const outStyle: CSSProperties = {
+  ...monoBase,
+  lineHeight: 1.6,
+  color: "var(--ow-text-2)",
+  whiteSpace: "pre-wrap",
+  wordBreak: "break-word",
+}