@lumea-labs/orchestrator 0.1.0 → 0.1.1

package/dist/swarm-run-activity.js

@@ -1,4 +1,5 @@
 "use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import {
   AlertTriangle,
@@ -103,72 +104,88 @@ function SwarmRunActivityStream({
 }) {
   const [expanded, setExpanded] = useState(false);
   if (events.length === 0) {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       "div",
       {
         className: [
           "px-4 py-6 text-center font-mono text-[11px] uppercase tracking-[0.16em] text-p-ink-3",
           className || ""
-        ].join(" ")
-      },
-      emptyLabel
+        ].join(" "),
+        children: emptyLabel
+      }
     );
   }
   const peekable = events.length > peek;
   const visible = !peekable || expanded ? events : events.slice(events.length - peek);
   const hidden = events.length - visible.length;
-  return /* @__PURE__ */ React.createElement("div", { className: className || "" }, peekable && !expanded ? /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      type: "button",
-      onClick: () => setExpanded(true),
-      className: "mb-2 inline-flex w-full items-center justify-center gap-1 rounded-md border border-dashed border-p-line bg-p-bg/40 py-1.5 font-mono text-[10.5px] font-bold uppercase tracking-[0.16em] text-p-ink-3 transition-colors cursor-pointer hover:border-p-ink-3 hover:text-p-ink"
-    },
-    /* @__PURE__ */ React.createElement(ChevronUp, { className: "size-3" }),
-    "show ",
-    hidden,
-    " earlier event",
-    hidden === 1 ? "" : "s"
-  ) : null, /* @__PURE__ */ React.createElement("ol", { className: "flex flex-col divide-y divide-p-line/60" }, visible.map((ev) => {
-    const custom = renderEvent?.(ev);
-    if (custom !== void 0) {
-      return /* @__PURE__ */ React.createElement("li", { key: ev.id, className: "py-3" }, custom);
-    }
-    return /* @__PURE__ */ React.createElement(
-      "li",
+  return /* @__PURE__ */ jsxs("div", { className: className || "", children: [
+    peekable && !expanded ? /* @__PURE__ */ jsxs(
+      "button",
       {
-        key: ev.id,
-        className: "grid grid-cols-[80px_24px_minmax(0,1fr)] items-start gap-3 py-3"
-      },
-      /* @__PURE__ */ React.createElement(TimeGutter, { ts: ev.ts }),
-      /* @__PURE__ */ React.createElement(KindGlyph, { kind: ev.kind }),
-      /* @__PURE__ */ React.createElement(
-        EventBody,
+        type: "button",
+        onClick: () => setExpanded(true),
+        className: "mb-2 inline-flex w-full items-center justify-center gap-1 rounded-md border border-dashed border-p-line bg-p-bg/40 py-1.5 font-mono text-[10.5px] font-bold uppercase tracking-[0.16em] text-p-ink-3 transition-colors cursor-pointer hover:border-p-ink-3 hover:text-p-ink",
+        children: [
+          /* @__PURE__ */ jsx(ChevronUp, { className: "size-3" }),
+          "show ",
+          hidden,
+          " earlier event",
+          hidden === 1 ? "" : "s"
+        ]
+      }
+    ) : null,
+    /* @__PURE__ */ jsx("ol", { className: "flex flex-col divide-y divide-p-line/60", children: visible.map((ev) => {
+      const custom = renderEvent?.(ev);
+      if (custom !== void 0) {
+        return /* @__PURE__ */ jsx("li", { className: "py-3", children: custom }, ev.id);
+      }
+      return /* @__PURE__ */ jsxs(
+        "li",
         {
-          event: ev,
-          agents,
-          renderToolCall,
-          renderMarkdown
-        }
-      )
-    );
-  })), peekable && expanded ? /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      type: "button",
-      onClick: () => setExpanded(false),
-      className: "mt-2 inline-flex w-full items-center justify-center gap-1 rounded-md border border-dashed border-p-line bg-p-bg/40 py-1.5 font-mono text-[10.5px] font-bold uppercase tracking-[0.16em] text-p-ink-3 transition-colors cursor-pointer hover:border-p-ink-3 hover:text-p-ink"
-    },
-    /* @__PURE__ */ React.createElement(ChevronDown, { className: "size-3" }),
-    "show less"
-  ) : null);
+          className: "grid grid-cols-[80px_24px_minmax(0,1fr)] items-start gap-3 py-3",
+          children: [
+            /* @__PURE__ */ jsx(TimeGutter, { ts: ev.ts }),
+            /* @__PURE__ */ jsx(KindGlyph, { kind: ev.kind }),
+            /* @__PURE__ */ jsx(
+              EventBody,
+              {
+                event: ev,
+                agents,
+                renderToolCall,
+                renderMarkdown
+              }
+            )
+          ]
+        },
+        ev.id
+      );
+    }) }),
+    peekable && expanded ? /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setExpanded(false),
+        className: "mt-2 inline-flex w-full items-center justify-center gap-1 rounded-md border border-dashed border-p-line bg-p-bg/40 py-1.5 font-mono text-[10.5px] font-bold uppercase tracking-[0.16em] text-p-ink-3 transition-colors cursor-pointer hover:border-p-ink-3 hover:text-p-ink",
+        children: [
+          /* @__PURE__ */ jsx(ChevronDown, { className: "size-3" }),
+          "show less"
+        ]
+      }
+    ) : null
+  ] });
 }
 function TimeGutter({ ts }) {
   const t = new Date(ts);
   const hh = String(t.getHours()).padStart(2, "0");
   const mm = String(t.getMinutes()).padStart(2, "0");
   const ss = String(t.getSeconds()).padStart(2, "0");
-  return /* @__PURE__ */ React.createElement("span", { className: "pt-0.5 font-mono text-[10.5px] uppercase tracking-[0.16em] text-p-ink-3 tabular-nums" }, hh, ":", mm, ":", ss);
+  return /* @__PURE__ */ jsxs("span", { className: "pt-0.5 font-mono text-[10.5px] uppercase tracking-[0.16em] text-p-ink-3 tabular-nums", children: [
+    hh,
+    ":",
+    mm,
+    ":",
+    ss
+  ] });
 }
 const KIND_TONE = {
   phase: "text-[#2B44FF]",
@@ -185,16 +202,16 @@ const KIND_TONE = {
 };
 function KindGlyph({ kind }) {
   const Icon = kind === "phase" ? RotateCcw : kind === "thought" ? Quote : kind === "tool_call" ? Wrench : kind === "ask_user" ? MessageSquareMore : kind === "user_input" ? ArrowDown : kind === "output" ? ArrowUp : kind === "artifact" ? FileText : kind === "error" ? AlertTriangle : kind === "retry" ? RotateCcw : kind === "checkpoint" ? CheckCircle2 : Scale;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "span",
     {
       "aria-hidden": true,
       className: [
         "mt-1 grid size-5 place-items-center rounded-full border border-p-line bg-p-surface",
         KIND_TONE[kind]
-      ].join(" ")
-    },
-    /* @__PURE__ */ React.createElement(Icon, { className: "size-3" })
+      ].join(" "),
+      children: /* @__PURE__ */ jsx(Icon, { className: "size-3" })
+    }
   );
 }
 function EventBody({
@@ -204,31 +221,40 @@ function EventBody({
   renderMarkdown
 }) {
   const agent = event.agentName ? agents?.find((a) => a.name === event.agentName) : void 0;
-  return /* @__PURE__ */ React.createElement("div", { className: "min-w-0 flex flex-col gap-1.5" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-baseline gap-2" }, /* @__PURE__ */ React.createElement(
-    "span",
-    {
-      className: [
-        "font-mono text-[10px] font-bold uppercase tracking-[0.18em]",
-        KIND_TONE[event.kind]
-      ].join(" ")
-    },
-    event.kind.replace(/_/g, " ")
-  ), agent ? /* @__PURE__ */ React.createElement("span", { className: "inline-flex items-center gap-1 font-mono text-[10px] uppercase tracking-[0.14em] text-p-ink-3" }, /* @__PURE__ */ React.createElement(
-    "span",
-    {
-      "aria-hidden": true,
-      className: "grid size-3.5 shrink-0 place-items-center rounded-[3px] font-display text-[8.5px] font-bold text-white",
-      style: { background: agent.color || "#999" }
-    },
-    agent.glyph || (agent.displayName ?? agent.name).charAt(0).toUpperCase()
-  ), agent.displayName ?? agent.name) : null), /* @__PURE__ */ React.createElement(
-    EventContent,
-    {
-      event,
-      renderToolCall,
-      renderMarkdown
-    }
-  ));
+  return /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex flex-col gap-1.5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: [
+            "font-mono text-[10px] font-bold uppercase tracking-[0.18em]",
+            KIND_TONE[event.kind]
+          ].join(" "),
+          children: event.kind.replace(/_/g, " ")
+        }
+      ),
+      agent ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 font-mono text-[10px] uppercase tracking-[0.14em] text-p-ink-3", children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "grid size-3.5 shrink-0 place-items-center rounded-[3px] font-display text-[8.5px] font-bold text-white",
+            style: { background: agent.color || "#999" },
+            children: agent.glyph || (agent.displayName ?? agent.name).charAt(0).toUpperCase()
+          }
+        ),
+        agent.displayName ?? agent.name
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsx(
+      EventContent,
+      {
+        event,
+        renderToolCall,
+        renderMarkdown
+      }
+    )
+  ] });
 }
 function EventContent({
   event,
@@ -237,29 +263,56 @@ function EventContent({
 }) {
   switch (event.kind) {
     case "phase":
-      return /* @__PURE__ */ React.createElement("p", { className: "font-mono text-[11.5px] uppercase tracking-[0.14em] text-p-ink-2" }, "\u2192 ", event.phase);
+      return /* @__PURE__ */ jsxs("p", { className: "font-mono text-[11.5px] uppercase tracking-[0.14em] text-p-ink-2", children: [
+        "\u2192 ",
+        event.phase
+      ] });
     case "thought":
-      return /* @__PURE__ */ React.createElement("p", { className: "font-body text-[13px] italic leading-[1.55] text-p-ink-3" }, event.text);
+      return /* @__PURE__ */ jsx("p", { className: "font-body text-[13px] italic leading-[1.55] text-p-ink-3", children: event.text });
     case "tool_call":
-      if (renderToolCall) return /* @__PURE__ */ React.createElement(React.Fragment, null, renderToolCall(event.tool));
-      return /* @__PURE__ */ React.createElement("div", { className: "rounded-md border border-p-line bg-p-bg px-2.5 py-1.5" }, /* @__PURE__ */ React.createElement("code", { className: "font-mono text-[11.5px] font-semibold text-p-ink" }, event.tool.name), event.tool.summary ? /* @__PURE__ */ React.createElement("span", { className: "ml-2 truncate font-mono text-[11px] text-p-ink-3" }, event.tool.summary) : null);
+      if (renderToolCall) return /* @__PURE__ */ jsx(Fragment, { children: renderToolCall(event.tool) });
+      return /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-p-line bg-p-bg px-2.5 py-1.5", children: [
+        /* @__PURE__ */ jsx("code", { className: "font-mono text-[11.5px] font-semibold text-p-ink", children: event.tool.name }),
+        event.tool.summary ? /* @__PURE__ */ jsx("span", { className: "ml-2 truncate font-mono text-[11px] text-p-ink-3", children: event.tool.summary }) : null
+      ] });
     case "ask_user":
-      return /* @__PURE__ */ React.createElement("p", { className: "rounded-md border border-p-accent/40 bg-p-accent-light/40 px-3 py-2 font-body text-[13px] leading-[1.55] text-p-ink" }, event.question);
+      return /* @__PURE__ */ jsx("p", { className: "rounded-md border border-p-accent/40 bg-p-accent-light/40 px-3 py-2 font-body text-[13px] leading-[1.55] text-p-ink", children: event.question });
     case "user_input":
-      return renderMarkdown ? /* @__PURE__ */ React.createElement("div", null, renderMarkdown(event.text)) : /* @__PURE__ */ React.createElement("p", { className: "font-body text-[13px] leading-[1.55] text-p-ink" }, event.text);
+      return renderMarkdown ? /* @__PURE__ */ jsx("div", { children: renderMarkdown(event.text) }) : /* @__PURE__ */ jsx("p", { className: "font-body text-[13px] leading-[1.55] text-p-ink", children: event.text });
     case "output":
-      return renderMarkdown ? /* @__PURE__ */ React.createElement("div", null, renderMarkdown(event.text)) : /* @__PURE__ */ React.createElement("pre", { className: "m-0 whitespace-pre-wrap break-words font-body text-[13px] leading-[1.55] text-p-ink-2" }, event.text);
+      return renderMarkdown ? /* @__PURE__ */ jsx("div", { children: renderMarkdown(event.text) }) : /* @__PURE__ */ jsx("pre", { className: "m-0 whitespace-pre-wrap break-words font-body text-[13px] leading-[1.55] text-p-ink-2", children: event.text });
     case "artifact":
-      return /* @__PURE__ */ React.createElement(ArtifactRow, { artifact: event.artifact });
+      return /* @__PURE__ */ jsx(ArtifactRow, { artifact: event.artifact });
     case "error":
-      return /* @__PURE__ */ React.createElement("pre", { className: "m-0 whitespace-pre-wrap break-words font-mono text-[11.5px] leading-relaxed text-[#E63946]" }, event.message);
+      return /* @__PURE__ */ jsx("pre", { className: "m-0 whitespace-pre-wrap break-words font-mono text-[11.5px] leading-relaxed text-[#E63946]", children: event.message });
     case "retry":
-      return /* @__PURE__ */ React.createElement("p", { className: "font-mono text-[11.5px] uppercase tracking-[0.14em] text-p-ink-2" }, "attempt ", event.attempt, event.reason ? ` \xB7 ${event.reason}` : null);
+      return /* @__PURE__ */ jsxs("p", { className: "font-mono text-[11.5px] uppercase tracking-[0.14em] text-p-ink-2", children: [
+        "attempt ",
+        event.attempt,
+        event.reason ? ` \xB7 ${event.reason}` : null
+      ] });
     case "checkpoint":
-      return /* @__PURE__ */ React.createElement("div", { className: "font-mono text-[11.5px] uppercase tracking-[0.14em] text-p-ink-2" }, /* @__PURE__ */ React.createElement("span", { className: "font-bold" }, event.name), /* @__PURE__ */ React.createElement("span", { className: "ml-2 text-p-ink-3" }, "\xB7 ", event.verdict), event.message ? /* @__PURE__ */ React.createElement("p", { className: "mt-1 normal-case font-body text-[13px] tracking-normal text-p-ink-3" }, event.message) : null);
+      return /* @__PURE__ */ jsxs("div", { className: "font-mono text-[11.5px] uppercase tracking-[0.14em] text-p-ink-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "font-bold", children: event.name }),
+        /* @__PURE__ */ jsxs("span", { className: "ml-2 text-p-ink-3", children: [
+          "\xB7 ",
+          event.verdict
+        ] }),
+        event.message ? /* @__PURE__ */ jsx("p", { className: "mt-1 normal-case font-body text-[13px] tracking-normal text-p-ink-3", children: event.message }) : null
+      ] });
     case "score": {
       const scale = event.scale ?? { min: 1, max: 5 };
-      return /* @__PURE__ */ React.createElement("div", { className: "flex items-baseline gap-2 font-mono text-[11.5px] uppercase tracking-[0.14em]" }, /* @__PURE__ */ React.createElement("span", { className: "text-p-ink-2" }, event.criterion), /* @__PURE__ */ React.createElement("span", { className: "font-display text-[16px] font-bold tabular-nums text-p-ink" }, event.value, /* @__PURE__ */ React.createElement("span", { className: "text-p-ink-3" }, "/", scale.max)), event.reasoning ? /* @__PURE__ */ React.createElement("span", { className: "ml-2 normal-case tracking-normal text-p-ink-3" }, event.reasoning) : null);
+      return /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2 font-mono text-[11.5px] uppercase tracking-[0.14em]", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-p-ink-2", children: event.criterion }),
+        /* @__PURE__ */ jsxs("span", { className: "font-display text-[16px] font-bold tabular-nums text-p-ink", children: [
+          event.value,
+          /* @__PURE__ */ jsxs("span", { className: "text-p-ink-3", children: [
+            "/",
+            scale.max
+          ] })
+        ] }),
+        event.reasoning ? /* @__PURE__ */ jsx("span", { className: "ml-2 normal-case tracking-normal text-p-ink-3", children: event.reasoning }) : null
+      ] });
     }
   }
 }
@@ -269,18 +322,20 @@ function ArtifactRow({
   const Icon = artifact.kind === "url" ? ExternalLink : artifact.kind === "image" ? ImageIcon : artifact.kind === "data" ? Hash : artifact.kind === "note" ? StickyNote : FileText;
   const interactive = !!artifact.url;
   const Wrapper = interactive ? "a" : "div";
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     Wrapper,
     {
       ...interactive ? { href: artifact.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",
         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" }, artifact.label),
-    artifact.path ? /* @__PURE__ */ React.createElement("code", { className: "hidden truncate font-mono text-[10.5px] text-p-ink-3 sm:inline" }, artifact.path) : null
+      ].join(" "),
+      children: [
+        /* @__PURE__ */ jsx(Icon, { className: "size-3 shrink-0 text-p-ink-3", "aria-hidden": true }),
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate font-display text-[12.5px] font-semibold text-p-ink", children: artifact.label }),
+        artifact.path ? /* @__PURE__ */ jsx("code", { className: "hidden truncate font-mono text-[10.5px] text-p-ink-3 sm:inline", children: artifact.path }) : null
+      ]
+    }
   );
 }
 export {

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

@@ -1,4 +1,4 @@
-import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
 import { SwarmRun, SwarmLabels } from './types.js';
 
@@ -17,6 +17,6 @@ interface SwarmRunCardProps {
     labels?: Partial<SwarmLabels>;
     className?: string;
 }
-declare function SwarmRunCard({ run, now, renderAvatar, bodySlot, onCancel, onRetry, onOpen, labels, className, }: SwarmRunCardProps): react.JSX.Element;
+declare function SwarmRunCard({ run, now, renderAvatar, bodySlot, onCancel, onRetry, onOpen, labels, className, }: SwarmRunCardProps): react_jsx_runtime.JSX.Element;
 
 export { SwarmRunCard, type SwarmRunCardProps };

package/dist/swarm-run-card.js

@@ -1,4 +1,5 @@
 "use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { RotateCcw, Square } from "lucide-react";
 import { defaultSwarmLabels } from "./types";
 import { elapsedSeconds } from "./lib/format";
@@ -21,7 +22,7 @@ function SwarmRunCard({
   const isLive = run.status === "running" || run.status === "pending";
   const showCancel = onCancel && (run.status === "running" || run.status === "pending");
   const showRetry = onRetry && (run.status === "failed" || run.status === "cancelled");
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "article",
     {
       className: [
@@ -30,60 +31,80 @@ function SwarmRunCard({
         onOpen ? "cursor-pointer hover:shadow-[0_8px_24px_-16px_rgba(0,0,0,0.18)]" : "",
         className || ""
       ].join(" "),
-      onClick: onOpen ? () => onOpen(run.id) : void 0
-    },
-    /* @__PURE__ */ React.createElement("header", { className: "flex items-start gap-2" }, /* @__PURE__ */ React.createElement(
-      SwarmAgentBadge,
-      {
-        agent: run.agent,
-        avatar: renderAvatar?.(run.agent),
-        size: "md",
-        showName: true
-      }
-    ), /* @__PURE__ */ React.createElement("span", { className: "ml-auto" }), /* @__PURE__ */ React.createElement(
-      SwarmStatusPill,
-      {
-        status: run.status,
-        label: L[run.status],
-        size: "sm"
-      }
-    )),
-    /* @__PURE__ */ React.createElement("p", { className: "line-clamp-2 font-body text-[13px] leading-snug text-p-ink-2" }, run.title),
-    run.progress !== void 0 && isLive ? /* @__PURE__ */ React.createElement("div", { className: "h-1 w-full overflow-hidden rounded-full bg-p-warm" }, /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: "h-full rounded-full bg-p-accent transition-[width] duration-500 ease-out",
-        style: { width: `${Math.max(0, Math.min(100, run.progress * 100))}%` }
-      }
-    )) : null,
-    run.lastLog ? /* @__PURE__ */ React.createElement("div", { className: "rounded-md bg-p-bg px-2 py-1 font-mono text-[11px] leading-snug text-p-ink-3 truncate" }, run.lastLog) : null,
-    run.error ? /* @__PURE__ */ React.createElement("div", { className: "rounded-md border border-[#E63946]/30 bg-[#FEF2F2] px-2 py-1 font-mono text-[11px] leading-snug text-[#E63946]" }, run.error) : null,
-    bodySlot,
-    /* @__PURE__ */ React.createElement("footer", { className: "mt-1 flex items-center gap-2 font-mono text-[10px] uppercase tracking-[0.14em] text-p-ink-3" }, /* @__PURE__ */ React.createElement("span", { className: "tabular-nums" }, run.startedAt ? isLive ? L.startedAgo(elapsed) : L.duration(elapsed) : "\u2014"), run.background ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: "text-p-line" }, "\xB7"), /* @__PURE__ */ React.createElement("span", null, L.backgroundGroup)) : null, /* @__PURE__ */ React.createElement("span", { className: "ml-auto inline-flex items-center gap-1.5" }, showCancel ? /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: (e) => {
-          e.stopPropagation();
-          onCancel(run.id);
-        },
-        className: "inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 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: (e) => {
-          e.stopPropagation();
-          onRetry(run.id);
-        },
-        className: "inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 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))
+      onClick: onOpen ? () => onOpen(run.id) : void 0,
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "flex items-start gap-2", children: [
+          /* @__PURE__ */ jsx(
+            SwarmAgentBadge,
+            {
+              agent: run.agent,
+              avatar: renderAvatar?.(run.agent),
+              size: "md",
+              showName: true
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "ml-auto" }),
+          /* @__PURE__ */ jsx(
+            SwarmStatusPill,
+            {
+              status: run.status,
+              label: L[run.status],
+              size: "sm"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "line-clamp-2 font-body text-[13px] leading-snug text-p-ink-2", children: run.title }),
+        run.progress !== void 0 && isLive ? /* @__PURE__ */ jsx("div", { className: "h-1 w-full overflow-hidden rounded-full bg-p-warm", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "h-full rounded-full bg-p-accent transition-[width] duration-500 ease-out",
+            style: { width: `${Math.max(0, Math.min(100, run.progress * 100))}%` }
+          }
+        ) }) : null,
+        run.lastLog ? /* @__PURE__ */ jsx("div", { className: "rounded-md bg-p-bg px-2 py-1 font-mono text-[11px] leading-snug text-p-ink-3 truncate", children: run.lastLog }) : null,
+        run.error ? /* @__PURE__ */ jsx("div", { className: "rounded-md border border-[#E63946]/30 bg-[#FEF2F2] px-2 py-1 font-mono text-[11px] leading-snug text-[#E63946]", children: run.error }) : null,
+        bodySlot,
+        /* @__PURE__ */ jsxs("footer", { className: "mt-1 flex items-center gap-2 font-mono text-[10px] uppercase tracking-[0.14em] text-p-ink-3", children: [
+          /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: run.startedAt ? isLive ? L.startedAgo(elapsed) : L.duration(elapsed) : "\u2014" }),
+          run.background ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "text-p-line", children: "\xB7" }),
+            /* @__PURE__ */ jsx("span", { children: L.backgroundGroup })
+          ] }) : null,
+          /* @__PURE__ */ jsxs("span", { className: "ml-auto inline-flex items-center gap-1.5", children: [
+            showCancel ? /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onCancel(run.id);
+                },
+                className: "inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-p-ink-3 transition-colors cursor-pointer hover:bg-p-warm hover:text-[#E63946]",
+                children: [
+                  /* @__PURE__ */ jsx(Square, { className: "size-2.5" }),
+                  L.cancel
+                ]
+              }
+            ) : null,
+            showRetry ? /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onRetry(run.id);
+                },
+                className: "inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-p-ink-3 transition-colors cursor-pointer hover:bg-p-warm hover:text-p-ink",
+                children: [
+                  /* @__PURE__ */ jsx(RotateCcw, { className: "size-2.5" }),
+                  L.retry
+                ]
+              }
+            ) : null
+          ] })
+        ] })
+      ]
+    }
   );
 }
 export {

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

@@ -1,4 +1,4 @@
-import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
 import { SwarmRun, SwarmToolCall, SwarmArtifact, SwarmEvaluation, SwarmLabels } from './types.js';
 
@@ -40,6 +40,6 @@ interface SwarmRunDetailProps {
     labels?: Partial<SwarmLabels>;
     className?: string;
 }
-declare function SwarmRunDetail({ run, now, variant, renderAvatar, renderToolCalls, renderArtifacts, renderEvaluation, renderMarkdown, hideTools, onClose, onCancel, onRetry, labels, className, }: SwarmRunDetailProps): react.JSX.Element;
+declare function SwarmRunDetail({ run, now, variant, renderAvatar, renderToolCalls, renderArtifacts, renderEvaluation, renderMarkdown, hideTools, onClose, onCancel, onRetry, labels, className, }: SwarmRunDetailProps): react_jsx_runtime.JSX.Element;
 
 export { SwarmRunDetail, type SwarmRunDetailProps, type SwarmRunDetailVariant };