@lumea-labs/orchestrator 0.1.0

package/dist/swarm-run-detail.js

@@ -0,0 +1,559 @@
+"use client";
+import {
+  useLayoutEffect,
+  useRef,
+  useState
+} from "react";
+import {
+  ChevronDown,
+  ExternalLink,
+  FileText,
+  Hash,
+  Image as ImageIcon,
+  RotateCcw,
+  Square,
+  StickyNote,
+  X
+} from "lucide-react";
+import {
+  defaultSwarmLabels
+} from "./types";
+import { elapsedSeconds } from "./lib/format";
+import { SwarmStatusPill } from "./swarm-status-pill";
+import { SwarmAgentBadge } from "./swarm-agent-badge";
+function SwarmRunDetail({
+  run,
+  now,
+  variant = "tabs",
+  renderAvatar,
+  renderToolCalls,
+  renderArtifacts,
+  renderEvaluation,
+  renderMarkdown,
+  hideTools = false,
+  onClose,
+  onCancel,
+  onRetry,
+  labels,
+  className
+}) {
+  const L = { ...defaultSwarmLabels, ...labels };
+  const clock = now ?? Date.now();
+  const elapsed = elapsedSeconds(run.startedAt, run.finishedAt, clock);
+  const isLive = run.status === "running" || run.status === "pending";
+  const showCancel = onCancel && isLive;
+  const showRetry = onRetry && (run.status === "failed" || run.status === "cancelled");
+  return /* @__PURE__ */ React.createElement(
+    "section",
+    {
+      className: [
+        "flex h-full min-h-0 flex-col overflow-hidden rounded-2xl border border-p-line bg-p-surface",
+        className || ""
+      ].join(" ")
+    },
+    /* @__PURE__ */ React.createElement("header", { className: "flex shrink-0 flex-wrap items-center gap-2 border-b border-p-line px-4 py-3" }, /* @__PURE__ */ React.createElement(SwarmAgentBadge, { agent: run.agent, avatar: renderAvatar?.(run.agent) }), /* @__PURE__ */ React.createElement("span", { className: "ml-auto inline-flex items-center gap-1" }, showCancel ? /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: () => onCancel(run.id),
+        className: "inline-flex items-center gap-1 rounded-md px-2 py-1 font-mono text-[10.5px] font-bold uppercase tracking-[0.16em] text-p-ink-3 transition-colors cursor-pointer hover:bg-p-warm hover:text-[#E63946]"
+      },
+      /* @__PURE__ */ React.createElement(Square, { className: "size-2.5" }),
+      L.cancel
+    ) : null, showRetry ? /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: () => onRetry(run.id),
+        className: "inline-flex items-center gap-1 rounded-md px-2 py-1 font-mono text-[10.5px] font-bold uppercase tracking-[0.16em] text-p-ink-3 transition-colors cursor-pointer hover:bg-p-warm hover:text-p-ink"
+      },
+      /* @__PURE__ */ React.createElement(RotateCcw, { className: "size-2.5" }),
+      L.retry
+    ) : null, onClose ? /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: onClose,
+        "aria-label": "Close",
+        title: "Close",
+        className: "grid size-7 place-items-center rounded-md text-p-ink-3 transition-colors cursor-pointer hover:bg-p-warm hover:text-p-ink"
+      },
+      /* @__PURE__ */ React.createElement(X, { className: "size-4" })
+    ) : null)),
+    /* @__PURE__ */ React.createElement(VitalSigns, { run, L, isLive, elapsed }),
+    /* @__PURE__ */ React.createElement("div", { className: "border-b border-p-line px-4 py-3" }, /* @__PURE__ */ React.createElement("div", { className: "font-mono text-[10px] font-bold uppercase tracking-[0.18em] text-p-ink-3" }, L.goal), /* @__PURE__ */ React.createElement("div", { className: "mt-1 font-body text-[14px] leading-snug text-p-ink" }, renderMarkdown ? renderMarkdown(run.goal) : /* @__PURE__ */ React.createElement("p", { className: "m-0" }, run.goal)), isLive && run.lastLog ? /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "mt-2 flex items-center gap-2 rounded-md border border-p-line bg-p-bg/60 px-2 py-1.5 font-mono text-[11px] italic text-p-ink-3",
+        "aria-live": "polite"
+      },
+      /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          "aria-hidden": true,
+          className: "size-1.5 shrink-0 animate-pulse rounded-full bg-p-accent"
+        }
+      ),
+      /* @__PURE__ */ React.createElement("span", { className: "truncate" }, run.lastLog)
+    ) : null),
+    variant === "tabs" ? /* @__PURE__ */ React.createElement(
+      TabsBody,
+      {
+        run,
+        L,
+        hideTools,
+        renderToolCalls,
+        renderArtifacts,
+        renderEvaluation,
+        renderMarkdown
+      }
+    ) : /* @__PURE__ */ React.createElement(
+      FlatBody,
+      {
+        run,
+        L,
+        hideTools,
+        renderToolCalls,
+        renderArtifacts,
+        renderEvaluation,
+        renderMarkdown
+      }
+    )
+  );
+}
+function TabsBody({
+  run,
+  L,
+  hideTools,
+  renderToolCalls,
+  renderArtifacts,
+  renderEvaluation,
+  renderMarkdown
+}) {
+  const hasEval = !!run.evaluation;
+  const isLive = run.status === "running" || run.status === "pending";
+  const [tab, setTab] = useState(
+    isLive && !hideTools ? "tools" : "output"
+  );
+  const artifactCount = run.artifacts?.length ?? 0;
+  const toolCount = run.toolCalls?.length ?? 0;
+  const safeTab = tab === "tools" && hideTools ? "output" : tab;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "flex shrink-0 items-center gap-1 border-b border-p-line px-2" }, /* @__PURE__ */ React.createElement(
+    Tab,
+    {
+      active: safeTab === "output",
+      onClick: () => setTab("output"),
+      label: run.error ? L.error : L.output
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Tab,
+    {
+      active: safeTab === "artifacts",
+      onClick: () => setTab("artifacts"),
+      label: "artifacts",
+      badge: artifactCount > 0 ? /* @__PURE__ */ React.createElement(CountBadge, { value: artifactCount }) : null
+    }
+  ), !hideTools ? /* @__PURE__ */ React.createElement(
+    Tab,
+    {
+      active: safeTab === "tools",
+      onClick: () => setTab("tools"),
+      label: L.tools,
+      badge: toolCount > 0 ? /* @__PURE__ */ React.createElement(CountBadge, { value: toolCount }) : null
+    }
+  ) : null, hasEval ? /* @__PURE__ */ React.createElement(
+    Tab,
+    {
+      active: safeTab === "eval",
+      onClick: () => setTab("eval"),
+      label: "eval",
+      badge: /* @__PURE__ */ React.createElement(
+        ScoreBadge,
+        {
+          score: run.evaluation.verdict.overall,
+          scale: run.evaluation.verdict.scale
+        }
+      )
+    }
+  ) : null), /* @__PURE__ */ React.createElement("div", { className: "min-h-0 flex-1 overflow-y-auto p-4" }, safeTab === "output" ? /* @__PURE__ */ React.createElement(OutputBlock, { run, L, renderMarkdown }) : null, safeTab === "artifacts" ? /* @__PURE__ */ React.createElement(ArtifactsBlock, { run, renderArtifacts }) : null, safeTab === "tools" && !hideTools ? /* @__PURE__ */ React.createElement(ToolsBlock, { run, renderToolCalls }) : null, safeTab === "eval" && run.evaluation ? /* @__PURE__ */ React.createElement(
+    EvalBlock,
+    {
+      evaluation: run.evaluation,
+      renderEvaluation
+    }
+  ) : null));
+}
+function FlatBody({
+  run,
+  L,
+  hideTools,
+  renderToolCalls,
+  renderArtifacts,
+  renderEvaluation,
+  renderMarkdown
+}) {
+  const toolCount = run.toolCalls?.length ?? 0;
+  const artifactCount = run.artifacts?.length ?? 0;
+  const hasEval = !!run.evaluation;
+  return /* @__PURE__ */ React.createElement("div", { className: "min-h-0 flex-1 overflow-y-auto" }, /* @__PURE__ */ React.createElement(FlatSection, { title: run.error ? L.error : L.output }, /* @__PURE__ */ React.createElement(OutputBlock, { run, L, renderMarkdown })), /* @__PURE__ */ React.createElement(
+    FlatSection,
+    {
+      title: "artifacts",
+      meta: artifactCount > 0 ? String(artifactCount) : void 0
+    },
+    /* @__PURE__ */ React.createElement(ArtifactsBlock, { run, renderArtifacts })
+  ), !hideTools ? /* @__PURE__ */ React.createElement(
+    FlatSection,
+    {
+      title: L.tools,
+      meta: toolCount > 0 ? String(toolCount) : void 0,
+      last: !hasEval
+    },
+    /* @__PURE__ */ React.createElement(ToolsBlock, { run, renderToolCalls })
+  ) : null, hasEval ? /* @__PURE__ */ React.createElement(FlatSection, { title: "evaluation", last: true }, /* @__PURE__ */ React.createElement(
+    EvalBlock,
+    {
+      evaluation: run.evaluation,
+      renderEvaluation
+    }
+  )) : null);
+}
+function FlatSection({
+  title,
+  meta,
+  last,
+  /** Max height of the body before "Show more" appears. Default 220px.
+   *  The body is clipped to this height with a soft fade gradient at
+   *  the bottom; clicking "Show more" expands. */
+  previewMaxHeight = 220,
+  children
+}) {
+  const [mode, setMode] = useState(
+    "preview"
+  );
+  const bodyRef = useRef(null);
+  const [overflows, setOverflows] = useState(false);
+  useLayoutEffect(() => {
+    if (mode === "collapsed" || !bodyRef.current) return;
+    setOverflows(bodyRef.current.scrollHeight > previewMaxHeight + 4);
+  }, [mode, previewMaxHeight, children]);
+  return /* @__PURE__ */ React.createElement(
+    "section",
+    {
+      className: [
+        "px-4 py-4",
+        last ? "" : "border-b border-p-line"
+      ].join(" ")
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "mb-2 flex items-center gap-2" }, /* @__PURE__ */ React.createElement("span", { className: "font-mono text-[10px] font-bold uppercase tracking-[0.22em] text-p-ink-3" }, title), meta ? /* @__PURE__ */ React.createElement("span", { className: "font-mono text-[10px] uppercase tracking-[0.18em] text-p-ink-3/70 tabular-nums" }, "\xB7 ", meta) : null, /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: () => setMode((m) => m === "collapsed" ? "preview" : "collapsed"),
+        "aria-label": mode === "collapsed" ? "Expand section" : "Collapse section",
+        "aria-expanded": mode !== "collapsed",
+        className: "ml-auto grid size-5 place-items-center rounded text-p-ink-3 transition-colors cursor-pointer hover:bg-p-warm hover:text-p-ink"
+      },
+      /* @__PURE__ */ React.createElement(
+        ChevronDown,
+        {
+          className: [
+            "size-3.5 transition-transform duration-150",
+            mode === "collapsed" ? "-rotate-90" : ""
+          ].join(" ")
+        }
+      )
+    )),
+    mode === "collapsed" ? null : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref: bodyRef,
+        className: "relative overflow-hidden",
+        style: {
+          maxHeight: mode === "preview" && overflows ? previewMaxHeight : void 0
+        }
+      },
+      children,
+      mode === "preview" && overflows ? /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          "aria-hidden": true,
+          className: "pointer-events-none absolute inset-x-0 bottom-0 h-12 bg-gradient-to-t from-p-surface to-transparent"
+        }
+      ) : null
+    ), overflows ? /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: () => setMode((m) => m === "preview" ? "expanded" : "preview"),
+        className: "mt-2 inline-flex items-center gap-1 rounded-md font-mono text-[10.5px] font-bold uppercase tracking-[0.16em] text-p-ink-3 transition-colors cursor-pointer hover:text-p-ink"
+      },
+      mode === "preview" ? "show more" : "show less",
+      /* @__PURE__ */ React.createElement(
+        ChevronDown,
+        {
+          className: [
+            "size-3 transition-transform duration-150",
+            mode === "expanded" ? "rotate-180" : ""
+          ].join(" ")
+        }
+      )
+    ) : null)
+  );
+}
+function VitalSigns({
+  run,
+  L,
+  isLive,
+  elapsed
+}) {
+  const attempts = (run.retries ?? 0) + 1;
+  const maxAttempts = typeof run.maxRetries === "number" ? run.maxRetries + 1 : void 0;
+  return /* @__PURE__ */ React.createElement("section", { className: "grid shrink-0 grid-cols-3 gap-px border-b border-p-line bg-p-line" }, /* @__PURE__ */ React.createElement(
+    Stat,
+    {
+      label: "duration",
+      value: /* @__PURE__ */ React.createElement("span", { className: "tabular-nums" }, isLive ? L.startedAgo(elapsed) : L.duration(elapsed))
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Stat,
+    {
+      label: "status",
+      value: /* @__PURE__ */ React.createElement(
+        SwarmStatusPill,
+        {
+          status: run.status,
+          label: L[run.status],
+          size: "sm"
+        }
+      )
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Stat,
+    {
+      label: "attempts",
+      value: /* @__PURE__ */ React.createElement("span", { className: "tabular-nums" }, attempts, typeof maxAttempts === "number" ? /* @__PURE__ */ React.createElement("span", { className: "text-p-ink-3" }, "/", maxAttempts) : null)
+    }
+  ));
+}
+function Stat({ label, value }) {
+  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-1 bg-p-surface px-4 py-3" }, /* @__PURE__ */ React.createElement("span", { className: "font-mono text-[9.5px] font-bold uppercase tracking-[0.22em] text-p-ink-3" }, label), /* @__PURE__ */ React.createElement("span", { className: "font-display text-[16px] font-bold leading-tight tracking-[-0.01em] text-p-ink" }, value));
+}
+function OutputBlock({
+  run,
+  L,
+  renderMarkdown
+}) {
+  if (run.error) {
+    return /* @__PURE__ */ React.createElement("pre", { className: "m-0 whitespace-pre-wrap break-words font-mono text-[12px] leading-relaxed text-[#E63946]" }, run.error);
+  }
+  if (!run.output) {
+    return /* @__PURE__ */ React.createElement("span", { className: "block px-1 py-2 font-mono text-[11px] uppercase tracking-[0.16em] text-p-ink-3" }, L.output, " \u2014 \u2014");
+  }
+  if (renderMarkdown) {
+    return /* @__PURE__ */ React.createElement("div", { className: "font-body text-[14px] leading-[1.65] text-p-ink-2" }, renderMarkdown(run.output));
+  }
+  return /* @__PURE__ */ React.createElement("pre", { className: "m-0 whitespace-pre-wrap break-words font-mono text-[12px] leading-relaxed text-p-ink-2" }, run.output);
+}
+function ArtifactsBlock({
+  run,
+  renderArtifacts
+}) {
+  const artifacts = run.artifacts ?? [];
+  if (renderArtifacts) return /* @__PURE__ */ React.createElement(React.Fragment, null, renderArtifacts(artifacts));
+  if (artifacts.length === 0) {
+    return /* @__PURE__ */ React.createElement("span", { className: "block px-1 py-2 font-mono text-[11px] uppercase tracking-[0.16em] text-p-ink-3" }, "no artifacts produced");
+  }
+  return /* @__PURE__ */ React.createElement(DefaultArtifactList, { artifacts });
+}
+function ToolsBlock({
+  run,
+  renderToolCalls
+}) {
+  if (renderToolCalls) return /* @__PURE__ */ React.createElement(React.Fragment, null, renderToolCalls(run.toolCalls ?? []));
+  return /* @__PURE__ */ React.createElement(DefaultToolCallList, { toolCalls: run.toolCalls ?? [] });
+}
+function EvalBlock({
+  evaluation,
+  renderEvaluation
+}) {
+  if (renderEvaluation) return /* @__PURE__ */ React.createElement(React.Fragment, null, renderEvaluation(evaluation));
+  return /* @__PURE__ */ React.createElement(DefaultEvalSummary, { evaluation });
+}
+function DefaultEvalSummary({
+  evaluation
+}) {
+  const { verdict, scores, evaluatedAt } = evaluation;
+  const scale = verdict.scale ?? scores[0]?.scale ?? { min: 1, max: 5 };
+  const tone = verdictTone(verdict.overall, scale);
+  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-4" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-baseline gap-3" }, /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      className: "font-display text-[40px] font-bold leading-none tracking-[-0.02em] tabular-nums",
+      style: { color: tone }
+    },
+    formatScore(verdict.overall)
+  ), /* @__PURE__ */ React.createElement("span", { className: "font-mono text-[10.5px] uppercase tracking-[0.18em] text-p-ink-3" }, "/", scale.max, " \xB7 evaluated", " ", new Date(evaluatedAt).toLocaleDateString(void 0, {
+    month: "short",
+    day: "numeric"
+  }), typeof verdict.passed === "boolean" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: "mx-1.5 text-p-line" }, "\xB7"), /* @__PURE__ */ React.createElement("span", { style: { color: verdict.passed ? "var(--green)" : "#E63946" } }, verdict.passed ? "passed" : "failed")) : null)), verdict.summary ? /* @__PURE__ */ React.createElement("p", { className: "font-body text-[13px] leading-[1.55] text-p-ink-2" }, verdict.summary) : null, /* @__PURE__ */ React.createElement("ul", { className: "flex flex-col gap-2" }, scores.map((s) => {
+    const sScale = s.scale ?? scale;
+    const pct = Math.max(
+      0,
+      Math.min(
+        100,
+        (s.value - sScale.min) / (sScale.max - sScale.min) * 100
+      )
+    );
+    const sTone = verdictTone(s.value, sScale);
+    return /* @__PURE__ */ React.createElement("li", { key: s.criterion, className: "flex flex-col gap-1" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-baseline justify-between gap-3 font-mono text-[10.5px] uppercase tracking-[0.16em]" }, /* @__PURE__ */ React.createElement("span", { className: "text-p-ink-2" }, s.criterion), /* @__PURE__ */ React.createElement("span", { className: "tabular-nums", style: { color: sTone } }, formatScore(s.value), /* @__PURE__ */ React.createElement("span", { className: "text-p-ink-3" }, "/", sScale.max))), /* @__PURE__ */ React.createElement("div", { className: "h-[3px] w-full overflow-hidden rounded-full bg-p-line" }, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "h-full rounded-full",
+        style: { width: `${pct}%`, background: sTone }
+      }
+    )));
+  })));
+}
+function formatScore(n) {
+  return n.toFixed(1).replace(/\.0$/, "");
+}
+function verdictTone(value, scale) {
+  const range = scale.max - scale.min;
+  if (range <= 0) return "var(--ink-2)";
+  const norm = (value - scale.min) / range;
+  if (norm >= 0.75) return "var(--green)";
+  if (norm >= 0.5) return "var(--p-accent)";
+  if (norm >= 0.25) return "#D4A017";
+  return "#E63946";
+}
+function Tab({
+  active,
+  onClick,
+  label,
+  badge
+}) {
+  return /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: [
+        "relative inline-flex items-center gap-1.5 px-3 py-2 font-mono text-[11px] font-bold uppercase tracking-[0.16em] transition-colors cursor-pointer",
+        active ? "text-p-ink" : "text-p-ink-3 hover:text-p-ink"
+      ].join(" ")
+    },
+    label,
+    badge,
+    active ? /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        "aria-hidden": true,
+        className: "absolute inset-x-2 -bottom-px h-[2px] rounded-t bg-p-accent"
+      }
+    ) : null
+  );
+}
+function CountBadge({ value }) {
+  return /* @__PURE__ */ React.createElement("span", { className: "inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-full border border-p-line bg-transparent px-1.5 font-mono text-[10px] font-bold tabular-nums text-p-ink-3" }, value);
+}
+function ScoreBadge({
+  score,
+  scale
+}) {
+  const sc = scale ?? { min: 1, max: 5 };
+  const range = sc.max - sc.min;
+  const norm = range > 0 ? (score - sc.min) / range : 0;
+  const palette = norm >= 0.75 ? { fg: "text-p-green", bg: "bg-p-green-light", ring: "border-p-green/30" } : norm >= 0.5 ? {
+    fg: "text-p-accent",
+    bg: "bg-p-accent-light",
+    ring: "border-p-accent/30"
+  } : norm >= 0.25 ? {
+    fg: "text-[#B45309]",
+    bg: "bg-[#FEF3C7]",
+    ring: "border-[#D4A017]/30"
+  } : {
+    fg: "text-[#E63946]",
+    bg: "bg-[#FEF2F2]",
+    ring: "border-[#E63946]/30"
+  };
+  return /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      className: [
+        "inline-flex h-[18px] items-center justify-center rounded-full border px-1.5 font-mono text-[10px] font-bold tabular-nums",
+        palette.fg,
+        palette.bg,
+        palette.ring
+      ].join(" ")
+    },
+    formatScore(score)
+  );
+}
+function DefaultToolCallList({ toolCalls }) {
+  if (toolCalls.length === 0) {
+    return /* @__PURE__ */ React.createElement("span", { className: "block px-1 py-2 font-mono text-[11px] uppercase tracking-[0.16em] text-p-ink-3" }, "no tool calls yet");
+  }
+  return /* @__PURE__ */ React.createElement("ul", { className: "flex flex-col gap-1.5" }, toolCalls.map((t) => /* @__PURE__ */ React.createElement(
+    "li",
+    {
+      key: t.id,
+      className: "flex items-center gap-2 rounded-md border border-p-line bg-p-bg px-2 py-1.5"
+    },
+    /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        "aria-hidden": true,
+        className: [
+          "size-1.5 shrink-0 rounded-full",
+          t.state === "calling" ? "bg-p-accent animate-pulse" : t.state === "completed" ? "bg-p-green" : "bg-[#E63946]"
+        ].join(" ")
+      }
+    ),
+    /* @__PURE__ */ React.createElement("span", { className: "font-mono text-[11.5px] font-semibold text-p-ink" }, t.name),
+    t.summary ? /* @__PURE__ */ React.createElement("span", { className: "truncate font-mono text-[11px] text-p-ink-3" }, t.summary) : null
+  )));
+}
+const ARTIFACT_ICON = {
+  file: FileText,
+  url: ExternalLink,
+  image: ImageIcon,
+  data: Hash,
+  note: StickyNote
+};
+function DefaultArtifactList({ artifacts }) {
+  return /* @__PURE__ */ React.createElement("ul", { className: "flex flex-col gap-1.5" }, artifacts.map((a) => {
+    const Icon = ARTIFACT_ICON[a.kind];
+    const interactive = !!a.url;
+    const Wrapper = interactive ? "a" : "div";
+    return /* @__PURE__ */ React.createElement("li", { key: a.id }, /* @__PURE__ */ React.createElement(
+      Wrapper,
+      {
+        ...interactive ? {
+          href: a.url,
+          target: "_blank",
+          rel: "noreferrer noopener"
+        } : {},
+        className: [
+          "flex items-center gap-2 rounded-md border border-p-line bg-p-surface px-2.5 py-1.5 no-underline transition-colors",
+          interactive ? "cursor-pointer hover:bg-p-warm/40" : ""
+        ].join(" ")
+      },
+      /* @__PURE__ */ React.createElement(Icon, { className: "size-3 shrink-0 text-p-ink-3", "aria-hidden": true }),
+      /* @__PURE__ */ React.createElement("span", { className: "min-w-0 flex-1 truncate font-display text-[12.5px] font-semibold text-p-ink" }, a.label),
+      a.path ? /* @__PURE__ */ React.createElement("code", { className: "hidden truncate font-mono text-[10.5px] text-p-ink-3 sm:inline" }, a.path) : null,
+      a.tags && a.tags.length > 0 ? /* @__PURE__ */ React.createElement("span", { className: "hidden flex-wrap gap-1 sm:inline-flex" }, a.tags.map((t) => /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          key: t,
+          className: "inline-flex items-center rounded border border-p-line bg-p-bg px-1 py-px font-mono text-[9.5px] uppercase tracking-[0.14em] text-p-ink-2"
+        },
+        t
+      ))) : null,
+      a.summary ? /* @__PURE__ */ React.createElement("span", { className: "hidden truncate font-mono text-[10.5px] text-p-ink-3 lg:inline" }, a.summary) : null
+    ));
+  }));
+}
+export {
+  SwarmRunDetail
+};

package/dist/swarm-run-list.d.ts

@@ -0,0 +1,22 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { SwarmRun, SwarmLabels } from './types.js';
+
+interface SwarmRunListProps {
+    runs: SwarmRun[];
+    now?: number;
+    /** Group background runs into a separate trailing section. */
+    groupBackground?: boolean;
+    /** Currently-selected run id — passes through to row `active` flag. */
+    activeId?: string | null;
+    renderAvatar?: (agent: SwarmRun["agent"]) => ReactNode;
+    onCancel?: (id: string) => void;
+    onRetry?: (id: string) => void;
+    onOpen?: (id: string) => void;
+    emptyState?: ReactNode;
+    labels?: Partial<SwarmLabels>;
+    className?: string;
+}
+declare function SwarmRunList({ runs, now, groupBackground, activeId, renderAvatar, onCancel, onRetry, onOpen, emptyState, labels, className, }: SwarmRunListProps): react.JSX.Element;
+
+export { SwarmRunList, type SwarmRunListProps };

package/dist/swarm-run-list.js

@@ -0,0 +1,75 @@
+"use client";
+import { useMemo } from "react";
+import {
+  defaultSwarmLabels
+} from "./types";
+import { SwarmRunRow } from "./swarm-run-row";
+function SwarmRunList({
+  runs,
+  now,
+  groupBackground = false,
+  activeId,
+  renderAvatar,
+  onCancel,
+  onRetry,
+  onOpen,
+  emptyState,
+  labels,
+  className
+}) {
+  const L = { ...defaultSwarmLabels, ...labels };
+  const { foreground, background } = useMemo(() => {
+    if (!groupBackground)
+      return { foreground: runs, background: [] };
+    const fg = [];
+    const bg = [];
+    for (const r of runs) (r.background ? bg : fg).push(r);
+    return { foreground: fg, background: bg };
+  }, [runs, groupBackground]);
+  if (runs.length === 0) {
+    return /* @__PURE__ */ React.createElement("div", { className: ["px-3 py-10 text-center", className || ""].join(" ") }, emptyState ?? /* @__PURE__ */ React.createElement("span", { className: "font-mono text-[11px] uppercase tracking-[0.16em] text-p-ink-3" }, L.noRuns));
+  }
+  const Section = ({
+    label,
+    list
+  }) => /* @__PURE__ */ React.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-baseline gap-2 border-b border-p-line bg-p-bg/50 px-3 py-1.5" }, /* @__PURE__ */ React.createElement("span", { className: "font-mono text-[10px] font-bold uppercase tracking-[0.22em] text-p-ink-3" }, label), /* @__PURE__ */ React.createElement("span", { className: "font-mono text-[10px] tabular-nums text-p-ink-3" }, String(list.length).padStart(2, "0"))), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col" }, list.map((r) => /* @__PURE__ */ React.createElement(
+    SwarmRunRow,
+    {
+      key: r.id,
+      run: r,
+      now,
+      renderAvatar,
+      onCancel,
+      onRetry,
+      onOpen,
+      active: activeId === r.id,
+      labels
+    }
+  ))));
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: [
+        "overflow-hidden rounded-xl border border-p-line bg-p-surface",
+        className || ""
+      ].join(" ")
+    },
+    groupBackground ? /* @__PURE__ */ React.createElement(React.Fragment, null, foreground.length > 0 ? /* @__PURE__ */ React.createElement(Section, { label: L.foregroundGroup, list: foreground }) : null, background.length > 0 ? /* @__PURE__ */ React.createElement(Section, { label: L.backgroundGroup, list: background }) : null) : /* @__PURE__ */ React.createElement("div", { className: "flex flex-col" }, runs.map((r) => /* @__PURE__ */ React.createElement(
+      SwarmRunRow,
+      {
+        key: r.id,
+        run: r,
+        now,
+        renderAvatar,
+        onCancel,
+        onRetry,
+        onOpen,
+        active: activeId === r.id,
+        labels
+      }
+    )))
+  );
+}
+export {
+  SwarmRunList
+};

package/dist/swarm-run-row.d.ts

@@ -0,0 +1,22 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { SwarmRun, SwarmLabels } from './types.js';
+
+interface SwarmRunRowProps {
+    run: SwarmRun;
+    /** Live clock — pass `state.now` from `useSwarm()` to make the
+     *  elapsed counter tick. */
+    now?: number;
+    renderAvatar?: (agent: SwarmRun["agent"]) => ReactNode;
+    onCancel?: (id: string) => void;
+    onRetry?: (id: string) => void;
+    onOpen?: (id: string) => void;
+    /** Highlight the row as currently selected (e.g. open in a detail
+     *  panel next to it). */
+    active?: boolean;
+    labels?: Partial<SwarmLabels>;
+    className?: string;
+}
+declare function SwarmRunRow({ run, now, renderAvatar, onCancel, onRetry, onOpen, active, labels, className, }: SwarmRunRowProps): react.JSX.Element;
+
+export { SwarmRunRow, type SwarmRunRowProps };