@orbit-work/ui 0.1.2-preview.0 → 0.1.3

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

@@ -1,487 +0,0 @@
-"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",
-}