@lumea-labs/orchestrator 0.1.0 → 0.1.1

package/dist/index.d.ts

@@ -18,4 +18,5 @@ export { BuildSwarmRunActivityOptions, SwarmRunActivityStream, SwarmRunActivityS
 export { SwarmRunActivityStreamSkeleton, SwarmRunActivityStreamSkeletonProps, SwarmRunDetailSkeleton, SwarmRunDetailSkeletonProps } from './swarm-skeletons.js';
 export { SwarmTimeline, SwarmTimelineProps } from './swarm-timeline.js';
 export { PlanOnlyTaskShape, RenderLinkArgs, RenderLinkFn, TaskWorkspaceSidebar, TaskWorkspaceSidebarLabels, TaskWorkspaceSidebarProps, defaultTaskWorkspaceSidebarLabels } from './task-workspace-sidebar.js';
+import 'react/jsx-runtime';
 import 'react';

package/dist/orchestrator-document.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, SwarmCounts, SwarmStartInput, SwarmCapabilities, SwarmLabels, SwarmAdapter } from './types.js';
 
@@ -32,6 +32,6 @@ interface SwarmProviderProps {
     autoLoad?: boolean;
     children: ReactNode;
 }
-declare function SwarmProvider({ adapter, labels, autoLoad, children, }: SwarmProviderProps): react.JSX.Element;
+declare function SwarmProvider({ adapter, labels, autoLoad, children, }: SwarmProviderProps): react_jsx_runtime.JSX.Element;
 
 export { type SwarmContextValue, SwarmProvider, type SwarmProviderProps, useSwarm };

package/dist/orchestrator-document.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx } from "react/jsx-runtime";
 import {
   createContext,
   use,
@@ -114,7 +115,7 @@ function SwarmProvider({
     }),
     [runs, counts, isLoading, now, refresh, start, cancel, retry, cancelAll, retryFailed, capabilities, merged]
   );
-  return /* @__PURE__ */ React.createElement(Ctx, { value }, children);
+  return /* @__PURE__ */ jsx(Ctx, { value, children });
 }
 export {
   SwarmProvider,

package/dist/plan-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 { PlanGraphTaskRef } from './plan-graph.js';
 import { Plan, PlanTaskRuntime, PlanDetailLabels, PlanGraphLabels } from './plan-types.js';
@@ -19,7 +19,7 @@ interface PlanDetailHeaderProps {
     labels?: Partial<PlanDetailLabels>;
     className?: string;
 }
-declare function PlanDetailHeader({ plan, runtimeByTitle, briefSlot, actionsSlot, headerLeading, headerTrailing, labels, className, }: PlanDetailHeaderProps): react.JSX.Element;
+declare function PlanDetailHeader({ plan, runtimeByTitle, briefSlot, actionsSlot, headerLeading, headerTrailing, labels, className, }: PlanDetailHeaderProps): react_jsx_runtime.JSX.Element;
 interface PlanDetailMastheadProps {
     plan: Plan;
     runtimeByTitle?: Map<string, PlanTaskRuntime>;
@@ -32,7 +32,7 @@ interface PlanDetailMastheadProps {
     labels?: Partial<PlanDetailLabels>;
     className?: string;
 }
-declare function PlanDetailMasthead({ plan, runtimeByTitle, briefSlot, actionsSlot, headerLeading, headerTrailing, labels, className, }: PlanDetailMastheadProps): react.JSX.Element;
+declare function PlanDetailMasthead({ plan, runtimeByTitle, briefSlot, actionsSlot, headerLeading, headerTrailing, labels, className, }: PlanDetailMastheadProps): react_jsx_runtime.JSX.Element;
 interface PlanDetailGraphProps {
     plan: Plan;
     runtimeByTitle?: Map<string, PlanTaskRuntime>;
@@ -62,7 +62,7 @@ interface PlanDetailGraphProps {
     graphLabels?: Partial<PlanGraphLabels>;
     className?: string;
 }
-declare function PlanDetailGraph({ plan, runtimeByTitle, agents, graphHeight, fillHeight, onOpenTask, onOpenCheckpoint, onOpenGate, onOpenDelay, selectedNodeId, zoomToSelected, graphLabels, className, }: PlanDetailGraphProps): react.JSX.Element;
+declare function PlanDetailGraph({ plan, runtimeByTitle, agents, graphHeight, fillHeight, onOpenTask, onOpenCheckpoint, onOpenGate, onOpenDelay, selectedNodeId, zoomToSelected, graphLabels, className, }: PlanDetailGraphProps): react_jsx_runtime.JSX.Element;
 interface PlanDetailBreakdownProps {
     plan: Plan;
     runtimeByTitle?: Map<string, PlanTaskRuntime>;
@@ -74,7 +74,7 @@ interface PlanDetailBreakdownProps {
     labels?: Partial<PlanDetailLabels>;
     className?: string;
 }
-declare function PlanDetailBreakdown({ plan, runtimeByTitle, agents, defaultOpen, alwaysOpen, onOpenTask, labels, className, }: PlanDetailBreakdownProps): react.JSX.Element;
+declare function PlanDetailBreakdown({ plan, runtimeByTitle, agents, defaultOpen, alwaysOpen, onOpenTask, labels, className, }: PlanDetailBreakdownProps): react_jsx_runtime.JSX.Element;
 interface PlanDetailProps {
     plan: Plan;
     /** Runtime status overlay, keyed by task title. */
@@ -97,6 +97,6 @@ interface PlanDetailProps {
     graphLabels?: Partial<PlanGraphLabels>;
     className?: string;
 }
-declare function PlanDetail({ plan, runtimeByTitle, agents, briefSlot, actionsSlot, headerTrailing, hideBreakdown, defaultBreakdownOpen, graphHeight, onOpenTask, labels, graphLabels, className, }: PlanDetailProps): react.JSX.Element;
+declare function PlanDetail({ plan, runtimeByTitle, agents, briefSlot, actionsSlot, headerTrailing, hideBreakdown, defaultBreakdownOpen, graphHeight, onOpenTask, labels, graphLabels, className, }: PlanDetailProps): react_jsx_runtime.JSX.Element;
 
 export { PlanDetail, PlanDetailBreakdown, type PlanDetailBreakdownProps, PlanDetailGraph, type PlanDetailGraphProps, PlanDetailHeader, type PlanDetailHeaderProps, PlanDetailMasthead, type PlanDetailMastheadProps, type PlanDetailProps };

package/dist/plan-detail.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
 import {
   CheckCircle2,
@@ -54,18 +55,33 @@ function PlanDetailHeader({
     runtimeByTitle
   ]);
   const hasRuntime = runtimeByTitle && runtimeByTitle.size > 0;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "header",
     {
       className: [
         "flex flex-col border-b border-p-line",
         className || ""
-      ].join(" ")
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1 px-5 py-3" }, headerLeading, /* @__PURE__ */ React.createElement("span", { className: "font-mono text-[10px] font-bold uppercase tracking-[0.24em] text-p-ink-3" }, L.kicker), /* @__PURE__ */ React.createElement("h2", { className: "font-display text-[22px] font-bold leading-tight tracking-[-0.02em] text-p-ink" }, plan.name ?? "\u2014"), /* @__PURE__ */ React.createElement("span", { className: "ml-auto inline-flex items-center gap-2" }, headerTrailing, actionsSlot)),
-    /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-2 gap-px border-t border-p-line bg-p-line sm:grid-cols-4" }, /* @__PURE__ */ React.createElement(MetaCell, { label: L.taskCountLabel(taskCount), accent: true }), /* @__PURE__ */ React.createElement(MetaCell, { label: L.checkpointCountLabel(cpCount) }), /* @__PURE__ */ React.createElement(MetaCell, { label: L.gateCountLabel(gateCount) }), /* @__PURE__ */ React.createElement(MetaCell, { label: L.delayCountLabel(delayCount) })),
-    hasRuntime ? /* @__PURE__ */ React.createElement(StatusCountsStrip, { counts, L }) : null,
-    briefSlot ? /* @__PURE__ */ React.createElement("div", { className: "border-t border-p-line px-5 py-4 font-body text-[14px] leading-[1.55] text-p-ink-2" }, briefSlot) : null
+      ].join(" "),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1 px-5 py-3", children: [
+          headerLeading,
+          /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] font-bold uppercase tracking-[0.24em] text-p-ink-3", children: L.kicker }),
+          /* @__PURE__ */ jsx("h2", { className: "font-display text-[22px] font-bold leading-tight tracking-[-0.02em] text-p-ink", children: plan.name ?? "\u2014" }),
+          /* @__PURE__ */ jsxs("span", { className: "ml-auto inline-flex items-center gap-2", children: [
+            headerTrailing,
+            actionsSlot
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-px border-t border-p-line bg-p-line sm:grid-cols-4", children: [
+          /* @__PURE__ */ jsx(MetaCell, { label: L.taskCountLabel(taskCount), accent: true }),
+          /* @__PURE__ */ jsx(MetaCell, { label: L.checkpointCountLabel(cpCount) }),
+          /* @__PURE__ */ jsx(MetaCell, { label: L.gateCountLabel(gateCount) }),
+          /* @__PURE__ */ jsx(MetaCell, { label: L.delayCountLabel(delayCount) })
+        ] }),
+        hasRuntime ? /* @__PURE__ */ jsx(StatusCountsStrip, { counts, L }) : null,
+        briefSlot ? /* @__PURE__ */ jsx("div", { className: "border-t border-p-line px-5 py-4 font-body text-[14px] leading-[1.55] text-p-ink-2", children: briefSlot }) : null
+      ]
+    }
   );
 }
 function PlanDetailMasthead({
@@ -91,18 +107,38 @@ function PlanDetailMasthead({
     runtimeByTitle
   ]);
   const hasRuntime = runtimeByTitle && runtimeByTitle.size > 0;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "header",
     {
       className: [
         "flex flex-col gap-5 border-b border-p-line px-7 py-7",
         className || ""
-      ].join(" ")
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "flex items-start gap-4" }, headerLeading ? /* @__PURE__ */ React.createElement("div", { className: "shrink-0 pt-1" }, headerLeading) : null, /* @__PURE__ */ React.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ React.createElement("span", { className: "font-mono text-[10px] font-bold uppercase tracking-[0.24em] text-p-ink-3" }, L.kicker), /* @__PURE__ */ React.createElement("h2", { className: "mt-2 font-display text-[34px] font-bold leading-[1.04] tracking-[-0.025em] text-p-ink" }, plan.name ?? "\u2014")), headerTrailing || actionsSlot ? /* @__PURE__ */ React.createElement("div", { className: "shrink-0 flex flex-col items-end gap-2" }, headerTrailing, actionsSlot) : null),
-    briefSlot ? /* @__PURE__ */ React.createElement("div", { className: "max-w-[64ch] font-body text-[14.5px] leading-[1.65] text-p-ink-2" }, briefSlot) : null,
-    /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap items-baseline gap-x-4 gap-y-1.5 font-mono text-[10.5px] uppercase tracking-[0.22em]" }, /* @__PURE__ */ React.createElement(InventoryItem, { label: L.taskCountLabel(taskCount), accent: true }), /* @__PURE__ */ React.createElement(Sep, null), /* @__PURE__ */ React.createElement(InventoryItem, { label: L.checkpointCountLabel(cpCount) }), /* @__PURE__ */ React.createElement(Sep, null), /* @__PURE__ */ React.createElement(InventoryItem, { label: L.gateCountLabel(gateCount) }), /* @__PURE__ */ React.createElement(Sep, null), /* @__PURE__ */ React.createElement(InventoryItem, { label: L.delayCountLabel(delayCount) })),
-    hasRuntime ? /* @__PURE__ */ React.createElement(StatusCountsStrip, { counts, L, dense: true }) : null
+      ].join(" "),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-4", children: [
+          headerLeading ? /* @__PURE__ */ jsx("div", { className: "shrink-0 pt-1", children: headerLeading }) : null,
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] font-bold uppercase tracking-[0.24em] text-p-ink-3", children: L.kicker }),
+            /* @__PURE__ */ jsx("h2", { className: "mt-2 font-display text-[34px] font-bold leading-[1.04] tracking-[-0.025em] text-p-ink", children: plan.name ?? "\u2014" })
+          ] }),
+          headerTrailing || actionsSlot ? /* @__PURE__ */ jsxs("div", { className: "shrink-0 flex flex-col items-end gap-2", children: [
+            headerTrailing,
+            actionsSlot
+          ] }) : null
+        ] }),
+        briefSlot ? /* @__PURE__ */ jsx("div", { className: "max-w-[64ch] font-body text-[14.5px] leading-[1.65] text-p-ink-2", children: briefSlot }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline gap-x-4 gap-y-1.5 font-mono text-[10.5px] uppercase tracking-[0.22em]", children: [
+          /* @__PURE__ */ jsx(InventoryItem, { label: L.taskCountLabel(taskCount), accent: true }),
+          /* @__PURE__ */ jsx(Sep, {}),
+          /* @__PURE__ */ jsx(InventoryItem, { label: L.checkpointCountLabel(cpCount) }),
+          /* @__PURE__ */ jsx(Sep, {}),
+          /* @__PURE__ */ jsx(InventoryItem, { label: L.gateCountLabel(gateCount) }),
+          /* @__PURE__ */ jsx(Sep, {}),
+          /* @__PURE__ */ jsx(InventoryItem, { label: L.delayCountLabel(delayCount) })
+        ] }),
+        hasRuntime ? /* @__PURE__ */ jsx(StatusCountsStrip, { counts, L, dense: true }) : null
+      ]
+    }
   );
 }
 function PlanDetailGraph({
@@ -124,31 +160,31 @@ function PlanDetailGraph({
     () => ({ ...defaultPlanGraphLabels, ...graphLabels }),
     [graphLabels]
   );
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       className: [fillHeight ? "min-h-0 flex-1" : "", className || ""].join(" ").trim(),
-      style: fillHeight ? void 0 : { height: graphHeight }
-    },
-    /* @__PURE__ */ React.createElement(
-      PlanGraph,
-      {
-        tasks: plan.tasks,
-        runtimeByTitle,
-        checkpoints: plan.checkpoints,
-        qualityGates: plan.qualityGates,
-        delays: plan.delays,
-        agents,
-        onOpenTask,
-        onOpenCheckpoint,
-        onOpenGate,
-        onOpenDelay,
-        selectedNodeId,
-        zoomToSelected,
-        labels: GL,
-        className: "h-full"
-      }
-    )
+      style: fillHeight ? void 0 : { height: graphHeight },
+      children: /* @__PURE__ */ jsx(
+        PlanGraph,
+        {
+          tasks: plan.tasks,
+          runtimeByTitle,
+          checkpoints: plan.checkpoints,
+          qualityGates: plan.qualityGates,
+          delays: plan.delays,
+          agents,
+          onOpenTask,
+          onOpenCheckpoint,
+          onOpenGate,
+          onOpenDelay,
+          selectedNodeId,
+          zoomToSelected,
+          labels: GL,
+          className: "h-full"
+        }
+      )
+    }
   );
 }
 function PlanDetailBreakdown({
@@ -172,68 +208,86 @@ function PlanDetailBreakdown({
     for (const a of agents ?? []) m.set(a.name, a);
     return m;
   }, [agents]);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "section",
     {
       className: [
         "flex flex-col gap-2 border-t border-p-line px-5 py-4",
         className || ""
-      ].join(" ")
-    },
-    alwaysOpen ? /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React.createElement("span", { className: "font-mono text-[10px] font-bold uppercase tracking-[0.22em] text-p-ink-3" }, L.breakdown), /* @__PURE__ */ React.createElement("span", { className: "font-mono text-[10px] tabular-nums text-p-ink-3" }, String(plan.tasks.length).padStart(2, "0")), /* @__PURE__ */ React.createElement("span", { className: "h-px flex-1 bg-p-line" })) : /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: () => setOpen((v) => !v),
-        "aria-expanded": open,
-        className: "group flex items-center gap-3 rounded-md border-none bg-transparent p-0 text-left cursor-pointer"
-      },
-      /* @__PURE__ */ React.createElement("span", { className: "grid size-5 shrink-0 place-items-center rounded text-p-ink-3 transition-colors group-hover:bg-p-warm group-hover:text-p-ink" }, open ? /* @__PURE__ */ React.createElement(ChevronDown, { className: "size-3.5" }) : /* @__PURE__ */ React.createElement(ChevronRight, { className: "size-3.5" })),
-      /* @__PURE__ */ React.createElement("span", { className: "font-mono text-[10px] font-bold uppercase tracking-[0.22em] text-p-ink-3 group-hover:text-p-ink" }, L.breakdown),
-      /* @__PURE__ */ React.createElement("span", { className: "font-mono text-[10px] tabular-nums text-p-ink-3" }, String(plan.tasks.length).padStart(2, "0")),
-      /* @__PURE__ */ React.createElement("span", { className: "h-px flex-1 bg-p-line" })
-    ),
-    !isOpen ? null : plan.tasks.length === 0 ? /* @__PURE__ */ React.createElement("p", { className: "px-1 py-2 font-mono text-[11px] uppercase tracking-[0.16em] text-p-ink-3" }, L.noTasks) : /* @__PURE__ */ React.createElement("ol", { className: "flex flex-col divide-y divide-p-line/60" }, plan.tasks.map((tk, i) => {
-      const rt = runtimeByTitle?.get(tk.title);
-      const status = rt?.status ?? "draft";
-      const Icon = STATUS_ICON[status];
-      const tone = STATUS_TONE[status];
-      const agentName = rt?.agentName ?? tk.assignTo ?? void 0;
-      const agentRef = agentName ? agentByName.get(agentName) : void 0;
-      return /* @__PURE__ */ React.createElement(
-        "li",
-        {
-          key: tk.title,
-          className: [
-            "grid grid-cols-[24px_minmax(0,1fr)_auto_88px] items-center gap-3 py-2",
-            onOpenTask ? "cursor-pointer transition-colors hover:bg-p-warm/40" : ""
-          ].join(" "),
-          onClick: onOpenTask ? () => onOpenTask({ title: tk.title }) : void 0
-        },
-        /* @__PURE__ */ React.createElement("span", { className: "font-mono text-[10px] font-bold uppercase tracking-[0.14em] text-p-ink-3 tabular-nums" }, String(i + 1).padStart(2, "0")),
-        /* @__PURE__ */ React.createElement("div", { className: "min-w-0 flex flex-col leading-tight" }, /* @__PURE__ */ React.createElement("span", { className: "truncate font-display text-[13.5px] font-bold text-p-ink" }, tk.title), tk.description ? /* @__PURE__ */ React.createElement("span", { className: "truncate font-body text-[11.5px] text-p-ink-3" }, tk.description) : null),
-        /* @__PURE__ */ React.createElement("span", { className: "inline-flex shrink-0 items-center gap-1.5 font-mono text-[10.5px] uppercase tracking-[0.14em] text-p-ink-2" }, agentRef ? /* @__PURE__ */ React.createElement(
-          "span",
+      ].join(" "),
+      children: [
+        alwaysOpen ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] font-bold uppercase tracking-[0.22em] text-p-ink-3", children: L.breakdown }),
+          /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] tabular-nums text-p-ink-3", children: String(plan.tasks.length).padStart(2, "0") }),
+          /* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-p-line" })
+        ] }) : /* @__PURE__ */ jsxs(
+          "button",
           {
-            "aria-hidden": true,
-            className: "grid size-4 shrink-0 place-items-center rounded font-display text-[9px] font-bold text-white",
-            style: { background: agentRef.color || "#999" }
-          },
-          agentRef.glyph || (agentRef.displayName ?? agentRef.name).charAt(0).toUpperCase()
-        ) : null, /* @__PURE__ */ React.createElement("span", { className: "truncate" }, agentName ?? "\u2014")),
-        /* @__PURE__ */ React.createElement(
-          "span",
-          {
-            className: [
-              "inline-flex shrink-0 items-center justify-end gap-1.5 font-mono text-[10.5px] font-bold uppercase tracking-[0.14em]",
-              tone
-            ].join(" ")
-          },
-          /* @__PURE__ */ React.createElement(Icon, { className: "size-3" }),
-          L.status[status]
-        )
-      );
-    }))
+            type: "button",
+            onClick: () => setOpen((v) => !v),
+            "aria-expanded": open,
+            className: "group flex items-center gap-3 rounded-md border-none bg-transparent p-0 text-left cursor-pointer",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "grid size-5 shrink-0 place-items-center rounded text-p-ink-3 transition-colors group-hover:bg-p-warm group-hover:text-p-ink", children: open ? /* @__PURE__ */ jsx(ChevronDown, { className: "size-3.5" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "size-3.5" }) }),
+              /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] font-bold uppercase tracking-[0.22em] text-p-ink-3 group-hover:text-p-ink", children: L.breakdown }),
+              /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] tabular-nums text-p-ink-3", children: String(plan.tasks.length).padStart(2, "0") }),
+              /* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-p-line" })
+            ]
+          }
+        ),
+        !isOpen ? null : plan.tasks.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-1 py-2 font-mono text-[11px] uppercase tracking-[0.16em] text-p-ink-3", children: L.noTasks }) : /* @__PURE__ */ jsx("ol", { className: "flex flex-col divide-y divide-p-line/60", children: plan.tasks.map((tk, i) => {
+          const rt = runtimeByTitle?.get(tk.title);
+          const status = rt?.status ?? "draft";
+          const Icon = STATUS_ICON[status];
+          const tone = STATUS_TONE[status];
+          const agentName = rt?.agentName ?? tk.assignTo ?? void 0;
+          const agentRef = agentName ? agentByName.get(agentName) : void 0;
+          return /* @__PURE__ */ jsxs(
+            "li",
+            {
+              className: [
+                "grid grid-cols-[24px_minmax(0,1fr)_auto_88px] items-center gap-3 py-2",
+                onOpenTask ? "cursor-pointer transition-colors hover:bg-p-warm/40" : ""
+              ].join(" "),
+              onClick: onOpenTask ? () => onOpenTask({ title: tk.title }) : void 0,
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] font-bold uppercase tracking-[0.14em] text-p-ink-3 tabular-nums", children: String(i + 1).padStart(2, "0") }),
+                /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex flex-col leading-tight", children: [
+                  /* @__PURE__ */ jsx("span", { className: "truncate font-display text-[13.5px] font-bold text-p-ink", children: tk.title }),
+                  tk.description ? /* @__PURE__ */ jsx("span", { className: "truncate font-body text-[11.5px] text-p-ink-3", children: tk.description }) : null
+                ] }),
+                /* @__PURE__ */ jsxs("span", { className: "inline-flex shrink-0 items-center gap-1.5 font-mono text-[10.5px] uppercase tracking-[0.14em] text-p-ink-2", children: [
+                  agentRef ? /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      "aria-hidden": true,
+                      className: "grid size-4 shrink-0 place-items-center rounded font-display text-[9px] font-bold text-white",
+                      style: { background: agentRef.color || "#999" },
+                      children: agentRef.glyph || (agentRef.displayName ?? agentRef.name).charAt(0).toUpperCase()
+                    }
+                  ) : null,
+                  /* @__PURE__ */ jsx("span", { className: "truncate", children: agentName ?? "\u2014" })
+                ] }),
+                /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    className: [
+                      "inline-flex shrink-0 items-center justify-end gap-1.5 font-mono text-[10.5px] font-bold uppercase tracking-[0.14em]",
+                      tone
+                    ].join(" "),
+                    children: [
+                      /* @__PURE__ */ jsx(Icon, { className: "size-3" }),
+                      L.status[status]
+                    ]
+                  }
+                )
+              ]
+            },
+            tk.title
+          );
+        }) })
+      ]
+    }
   );
 }
 function PlanDetail({
@@ -251,47 +305,49 @@ function PlanDetail({
   graphLabels,
   className
 }) {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "article",
     {
       className: [
         "flex flex-col overflow-hidden rounded-2xl border border-p-line bg-p-surface",
         className || ""
-      ].join(" ")
-    },
-    /* @__PURE__ */ React.createElement(
-      PlanDetailHeader,
-      {
-        plan,
-        runtimeByTitle,
-        briefSlot,
-        actionsSlot,
-        headerTrailing,
-        labels
-      }
-    ),
-    /* @__PURE__ */ React.createElement(
-      PlanDetailGraph,
-      {
-        plan,
-        runtimeByTitle,
-        agents,
-        graphHeight,
-        onOpenTask,
-        graphLabels
-      }
-    ),
-    !hideBreakdown ? /* @__PURE__ */ React.createElement(
-      PlanDetailBreakdown,
-      {
-        plan,
-        runtimeByTitle,
-        agents,
-        defaultOpen: defaultBreakdownOpen,
-        onOpenTask,
-        labels
-      }
-    ) : null
+      ].join(" "),
+      children: [
+        /* @__PURE__ */ jsx(
+          PlanDetailHeader,
+          {
+            plan,
+            runtimeByTitle,
+            briefSlot,
+            actionsSlot,
+            headerTrailing,
+            labels
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          PlanDetailGraph,
+          {
+            plan,
+            runtimeByTitle,
+            agents,
+            graphHeight,
+            onOpenTask,
+            graphLabels
+          }
+        ),
+        !hideBreakdown ? /* @__PURE__ */ jsx(
+          PlanDetailBreakdown,
+          {
+            plan,
+            runtimeByTitle,
+            agents,
+            defaultOpen: defaultBreakdownOpen,
+            onOpenTask,
+            labels
+          }
+        ) : null
+      ]
+    }
   );
 }
 function statusCounts(plan, runtimeByTitle) {
@@ -324,57 +380,59 @@ function StatusCountsStrip({
   ];
   const visible = order.filter((s) => counts[s] > 0);
   if (visible.length === 0) return null;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       className: [
         "flex flex-wrap items-center gap-3 font-mono text-[10.5px] uppercase tracking-[0.16em] text-p-ink-3",
         dense ? "" : "border-t border-p-line px-5 py-2.5"
-      ].join(" ")
-    },
-    visible.map((s) => {
-      const Icon = STATUS_ICON[s];
-      return /* @__PURE__ */ React.createElement(
-        "span",
-        {
-          key: s,
-          className: ["inline-flex items-center gap-1.5", STATUS_TONE[s]].join(
-            " "
-          )
-        },
-        /* @__PURE__ */ React.createElement(Icon, { className: "size-3" }),
-        /* @__PURE__ */ React.createElement("span", { className: "font-display text-[14px] font-bold tabular-nums leading-none text-p-ink" }, counts[s]),
-        /* @__PURE__ */ React.createElement("span", null, L.status[s])
-      );
-    })
+      ].join(" "),
+      children: visible.map((s) => {
+        const Icon = STATUS_ICON[s];
+        return /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: ["inline-flex items-center gap-1.5", STATUS_TONE[s]].join(
+              " "
+            ),
+            children: [
+              /* @__PURE__ */ jsx(Icon, { className: "size-3" }),
+              /* @__PURE__ */ jsx("span", { className: "font-display text-[14px] font-bold tabular-nums leading-none text-p-ink", children: counts[s] }),
+              /* @__PURE__ */ jsx("span", { children: L.status[s] })
+            ]
+          },
+          s
+        );
+      })
+    }
   );
 }
 function MetaCell({ label, accent }) {
-  return /* @__PURE__ */ React.createElement("div", { className: "bg-p-surface px-4 py-2.5" }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx("div", { className: "bg-p-surface px-4 py-2.5", children: /* @__PURE__ */ jsx(
     "span",
     {
       className: [
         "block font-mono text-[10px] font-bold uppercase tracking-[0.18em]",
         accent ? "text-p-accent" : "text-p-ink-3"
-      ].join(" ")
-    },
-    label
-  ));
+      ].join(" "),
+      children: label
+    }
+  ) });
 }
 function InventoryItem({ label, accent }) {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "span",
     {
       className: [
         "font-bold",
         accent ? "text-p-accent" : "text-p-ink-2"
-      ].join(" ")
-    },
-    label
+      ].join(" "),
+      children: label
+    }
   );
 }
 function Sep() {
-  return /* @__PURE__ */ React.createElement("span", { "aria-hidden": true, className: "text-p-line" }, "\xB7");
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "text-p-line", children: "\xB7" });
 }
 export {
   PlanDetail,

package/dist/plan-graph.d.ts

@@ -1,4 +1,4 @@
-import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import { PlanTask, PlanTaskRuntime, PlanCheckpoint, PlanQualityGate, PlanDelay, PlanGraphLabels } from './plan-types.js';
 import { SwarmAgentRef } from './types.js';
 
@@ -34,6 +34,6 @@ interface PlanGraphProps {
     labels?: Partial<PlanGraphLabels>;
     className?: string;
 }
-declare function PlanGraph(props: PlanGraphProps): react.JSX.Element;
+declare function PlanGraph(props: PlanGraphProps): react_jsx_runtime.JSX.Element;
 
 export { PlanGraph, type PlanGraphProps, type PlanGraphTaskRef };