@lumea-labs/orchestrator 0.1.0

package/dist/plan-graph.js

@@ -0,0 +1,597 @@
+"use client";
+import "@xyflow/react/dist/style.css";
+import { useEffect, useMemo } from "react";
+import {
+  ReactFlow,
+  Background,
+  BackgroundVariant,
+  Controls,
+  Handle,
+  Position,
+  ReactFlowProvider,
+  useReactFlow
+} from "@xyflow/react";
+import {
+  CheckCircle2,
+  Circle,
+  Clock,
+  Flag,
+  FlagTriangleRight,
+  Hourglass,
+  Pause,
+  RotateCcw,
+  Scale,
+  ShieldCheck,
+  XCircle
+} from "lucide-react";
+import {
+  defaultPlanGraphLabels
+} from "./plan-types";
+const STATUS_COLOR = {
+  draft: "#999999",
+  pending: "#999999",
+  running: "#E2733D",
+  review: "#2B44FF",
+  done: "#1A7F52",
+  failed: "#E63946"
+};
+const STATUS_ICON = {
+  draft: Circle,
+  pending: Pause,
+  running: RotateCcw,
+  review: Scale,
+  done: CheckCircle2,
+  failed: XCircle
+};
+function parseDuration(iso) {
+  if (!iso) return "\u2014";
+  const m = iso.match(/^P(?:(\d+)D)?(?:T(?:(\d+)H)?(?:(\d+)M)?(?:(\d+)S)?)?$/);
+  if (!m) return iso;
+  const [, d, h, mi, s] = m;
+  const out = [];
+  if (d) out.push(`${d}d`);
+  if (h) out.push(`${h}h`);
+  if (mi) out.push(`${mi}m`);
+  if (s) out.push(`${s}s`);
+  return out.join(" ") || iso;
+}
+function joinClasses(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function HandlesTB() {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    Handle,
+    {
+      type: "target",
+      position: Position.Top,
+      className: "!h-2 !w-2 !border-p-line !bg-p-surface"
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Handle,
+    {
+      type: "source",
+      position: Position.Bottom,
+      className: "!h-2 !w-2 !border-p-line !bg-p-surface"
+    }
+  ));
+}
+function TaskNode({ data, selected }) {
+  const { plan, runtime, agent, labels, onOpen } = data;
+  const status = runtime?.status ?? "draft";
+  const color = STATUS_COLOR[status];
+  const Icon = STATUS_ICON[status];
+  const assigneeName = agent?.displayName ?? plan.assignTo ?? runtime?.agentName ?? "\u2014";
+  const canOpen = !!onOpen;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      onClick: () => {
+        if (!canOpen) return;
+        onOpen({ title: plan.title });
+      },
+      role: canOpen ? "button" : void 0,
+      tabIndex: canOpen ? 0 : -1,
+      className: joinClasses(
+        "group relative w-[240px] rounded-[4px] border bg-p-surface transition-all duration-150",
+        canOpen ? "cursor-pointer hover:border-p-ink-3" : "cursor-default",
+        selected ? "border-p-ink z-10" : "border-p-line"
+      ),
+      style: {
+        borderLeftWidth: selected ? 4 : 3,
+        borderLeftColor: color,
+        // Selected: thick double halo in the status hue, gentle scale-up
+        // so the node sits forward of its neighbours, status-tinted
+        // surface so the fill carries the meaning too.
+        boxShadow: selected ? `0 0 0 3px ${color}, 0 0 0 8px ${color}40, 0 22px 48px -18px rgba(15,15,15,0.38)` : "none",
+        transform: selected ? "scale(1.02)" : "scale(1)",
+        backgroundColor: selected ? `color-mix(in srgb, ${color} 5%, var(--surface))` : "var(--surface)"
+      }
+    },
+    /* @__PURE__ */ React.createElement(HandlesTB, null),
+    /* @__PURE__ */ React.createElement("div", { className: "absolute -top-2 left-3 bg-p-surface px-1 font-mono text-[9px] font-bold uppercase tracking-[0.16em] text-p-ink-3" }, labels.task),
+    /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-1.5 px-4 py-3" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1.5" }, /* @__PURE__ */ React.createElement(Icon, { className: "size-3 shrink-0", style: { color } }), /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        className: "font-mono text-[9px] font-bold uppercase tracking-[0.18em]",
+        style: { color }
+      },
+      labels.status[status]
+    ), runtime?.phase && runtime.phase !== "execution" && /* @__PURE__ */ React.createElement("span", { className: "ml-auto font-mono text-[9px] uppercase tracking-[0.14em] text-p-ink-3" }, "\xB7 ", runtime.phase)), /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "font-display text-[14.5px] font-bold leading-[1.15] tracking-[-0.01em] text-p-ink",
+        style: {
+          display: "-webkit-box",
+          WebkitLineClamp: 2,
+          WebkitBoxOrient: "vertical",
+          overflow: "hidden"
+        }
+      },
+      plan.title
+    ), /* @__PURE__ */ React.createElement("div", { className: "mt-0.5 flex items-center justify-between gap-2 font-mono text-[10px] uppercase tracking-[0.14em] text-p-ink-3" }, /* @__PURE__ */ React.createElement("span", { className: "truncate" }, assigneeName), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1.5 shrink-0" }, runtime?.sideEffects && /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        title: "side effects",
+        className: "inline-flex size-1.5 rounded-full bg-[#E63946]"
+      }
+    ), typeof runtime?.priority === "number" && runtime.priority !== 1 && /* @__PURE__ */ React.createElement("span", { className: "text-p-ink-2" }, runtime.priority, "\xD7"))))
+  );
+}
+function CheckpointNode({
+  data,
+  selected
+}) {
+  const { cp, labels, onOpen } = data;
+  const canOpen = !!onOpen;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      onClick: canOpen ? () => onOpen(cp.name) : void 0,
+      role: canOpen ? "button" : void 0,
+      tabIndex: canOpen ? 0 : -1,
+      className: joinClasses(
+        "group relative w-[200px] rounded-[4px] border bg-[#FDF8E8] px-4 py-3 transition-all duration-150",
+        canOpen ? "cursor-pointer" : "",
+        selected ? "border-[#D4A017] z-10" : "border-[#D4A017]/40"
+      ),
+      style: {
+        boxShadow: selected ? "0 0 0 3px #D4A017, 0 0 0 8px #D4A01740, 0 22px 48px -18px rgba(15,15,15,0.38)" : "none",
+        transform: selected ? "scale(1.02)" : "scale(1)"
+      }
+    },
+    /* @__PURE__ */ React.createElement(HandlesTB, null),
+    /* @__PURE__ */ React.createElement("div", { className: "absolute -top-2 left-3 bg-[#FDF8E8] px-1 font-mono text-[9px] font-bold uppercase tracking-[0.16em] text-[#8A6B0B]" }, labels.checkpoint),
+    /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1.5" }, /* @__PURE__ */ React.createElement(Hourglass, { className: "size-3 shrink-0 text-[#8A6B0B]" }), /* @__PURE__ */ React.createElement("span", { className: "truncate font-display text-[13.5px] font-bold leading-tight text-p-ink" }, cp.name)),
+    cp.message && /* @__PURE__ */ React.createElement(
+      "p",
+      {
+        className: "mt-1.5 text-[11.5px] leading-snug text-[#8A6B0B]",
+        style: {
+          display: "-webkit-box",
+          WebkitLineClamp: 2,
+          WebkitBoxOrient: "vertical",
+          overflow: "hidden"
+        }
+      },
+      cp.message
+    )
+  );
+}
+function GateNode({ data, selected }) {
+  const { gate, labels, onOpen } = data;
+  const canOpen = !!onOpen;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      onClick: canOpen ? () => onOpen(gate.name) : void 0,
+      role: canOpen ? "button" : void 0,
+      tabIndex: canOpen ? 0 : -1,
+      className: joinClasses(
+        "group relative w-[220px] rounded-[4px] border bg-p-accent-light px-4 py-3 transition-all duration-150",
+        canOpen ? "cursor-pointer" : "",
+        selected ? "border-p-accent z-10" : "border-p-accent/40"
+      ),
+      style: {
+        boxShadow: selected ? "0 0 0 3px var(--p-accent), 0 0 0 8px color-mix(in srgb, var(--p-accent) 28%, transparent), 0 22px 48px -18px rgba(15,15,15,0.38)" : "none",
+        transform: selected ? "scale(1.02)" : "scale(1)"
+      }
+    },
+    /* @__PURE__ */ React.createElement(HandlesTB, null),
+    /* @__PURE__ */ React.createElement("div", { className: "absolute -top-2 left-3 bg-p-accent-light px-1 font-mono text-[9px] font-bold uppercase tracking-[0.16em] text-p-accent" }, labels.qualityGate),
+    /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1.5" }, /* @__PURE__ */ React.createElement(ShieldCheck, { className: "size-3 shrink-0 text-p-accent" }), /* @__PURE__ */ React.createElement("span", { className: "truncate font-display text-[13.5px] font-bold leading-tight text-p-ink" }, gate.name)),
+    /* @__PURE__ */ React.createElement("div", { className: "mt-1.5 flex flex-wrap gap-1 font-mono text-[10px] uppercase tracking-[0.14em] text-p-accent" }, typeof gate.minScore === "number" && /* @__PURE__ */ React.createElement("span", null, labels.qualityMinScore, " ", gate.minScore), gate.requireAllPassed && /* @__PURE__ */ React.createElement("span", null, "\xB7 ", labels.qualityRequireAll))
+  );
+}
+function DelayNode({ data, selected }) {
+  const { delay, labels, onOpen } = data;
+  const canOpen = !!onOpen;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      onClick: canOpen ? () => onOpen(delay.name) : void 0,
+      role: canOpen ? "button" : void 0,
+      tabIndex: canOpen ? 0 : -1,
+      className: joinClasses(
+        "group relative w-[180px] rounded-[4px] border bg-[#F3EEFF] px-4 py-3 transition-all duration-150",
+        canOpen ? "cursor-pointer" : "",
+        selected ? "border-[#7B3FE4] z-10" : "border-[#7B3FE4]/40"
+      ),
+      style: {
+        boxShadow: selected ? "0 0 0 3px #7B3FE4, 0 0 0 8px #7B3FE440, 0 22px 48px -18px rgba(15,15,15,0.38)" : "none",
+        transform: selected ? "scale(1.02)" : "scale(1)"
+      }
+    },
+    /* @__PURE__ */ React.createElement(HandlesTB, null),
+    /* @__PURE__ */ React.createElement("div", { className: "absolute -top-2 left-3 bg-[#F3EEFF] px-1 font-mono text-[9px] font-bold uppercase tracking-[0.16em] text-[#7B3FE4]" }, labels.delay),
+    /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1.5" }, /* @__PURE__ */ React.createElement(Clock, { className: "size-3 shrink-0 text-[#7B3FE4]" }), /* @__PURE__ */ React.createElement("span", { className: "truncate font-display text-[13.5px] font-bold leading-tight text-p-ink" }, delay.name)),
+    /* @__PURE__ */ React.createElement("div", { className: "mt-1.5 font-mono text-[11px] font-bold uppercase tracking-[0.14em] text-[#7B3FE4]" }, parseDuration(delay.duration))
+  );
+}
+function SentinelNode({ data }) {
+  const { role, label } = data;
+  const isStart = role === "start";
+  const Icon = isStart ? FlagTriangleRight : Flag;
+  return /* @__PURE__ */ React.createElement("div", { className: "relative inline-flex items-center gap-1.5 rounded-full border-2 border-p-ink bg-p-surface px-3 py-1.5" }, isStart ? /* @__PURE__ */ React.createElement(
+    Handle,
+    {
+      type: "source",
+      position: Position.Bottom,
+      className: "!h-2 !w-2 !border-p-ink !bg-p-ink"
+    }
+  ) : /* @__PURE__ */ React.createElement(
+    Handle,
+    {
+      type: "target",
+      position: Position.Top,
+      className: "!h-2 !w-2 !border-p-ink !bg-p-ink"
+    }
+  ), /* @__PURE__ */ React.createElement(Icon, { className: "size-3 text-p-ink", "aria-hidden": true }), /* @__PURE__ */ React.createElement("span", { className: "font-mono text-[10px] font-bold uppercase tracking-[0.22em] text-p-ink" }, label));
+}
+const nodeTypes = {
+  taskNode: TaskNode,
+  checkpointNode: CheckpointNode,
+  gateNode: GateNode,
+  delayNode: DelayNode,
+  sentinelNode: SentinelNode
+};
+function layout(nodes, edges, opts) {
+  const preds = /* @__PURE__ */ new Map();
+  const succs = /* @__PURE__ */ new Map();
+  for (const n of nodes) {
+    preds.set(n.id, []);
+    succs.set(n.id, []);
+  }
+  for (const e of edges) {
+    if (preds.has(e.target)) preds.get(e.target).push(e.source);
+    if (succs.has(e.source)) succs.get(e.source).push(e.target);
+  }
+  const indeg = /* @__PURE__ */ new Map();
+  for (const n of nodes) indeg.set(n.id, preds.get(n.id).length);
+  const queue = [];
+  for (const n of nodes) if (indeg.get(n.id) === 0) queue.push(n.id);
+  const order = [];
+  const indegCopy = new Map(indeg);
+  while (queue.length) {
+    const id = queue.shift();
+    order.push(id);
+    for (const t of succs.get(id) || []) {
+      const v = (indegCopy.get(t) ?? 0) - 1;
+      indegCopy.set(t, v);
+      if (v === 0) queue.push(t);
+    }
+  }
+  for (const n of nodes) if (!order.includes(n.id)) order.push(n.id);
+  const layer = /* @__PURE__ */ new Map();
+  for (const id of order) {
+    const ps = preds.get(id) || [];
+    const l = ps.length === 0 ? 0 : Math.max(...ps.map((p) => (layer.get(p) ?? 0) + 1));
+    layer.set(id, l);
+  }
+  const nodeById = new Map(nodes.map((n) => [n.id, n]));
+  const SPECIAL_TYPES = /* @__PURE__ */ new Set(["checkpointNode", "gateNode", "delayNode"]);
+  const isSpecial = (id) => SPECIAL_TYPES.has(nodeById.get(id)?.type ?? "");
+  const bump = (id, target) => {
+    const current = layer.get(id) ?? 0;
+    if (current >= target) return;
+    layer.set(id, target);
+    for (const s of succs.get(id) || []) bump(s, target + 1);
+  };
+  const specialsAtLayer = /* @__PURE__ */ new Set();
+  for (const id of order) {
+    if (!isSpecial(id)) continue;
+    let l = layer.get(id) ?? 0;
+    while (specialsAtLayer.has(l)) l++;
+    if (l !== (layer.get(id) ?? 0)) bump(id, l);
+    specialsAtLayer.add(l);
+  }
+  const byLayer = /* @__PURE__ */ new Map();
+  for (const n of nodes) {
+    const l = layer.get(n.id) ?? 0;
+    if (!byLayer.has(l)) byLayer.set(l, []);
+    byLayer.get(l).push(n);
+  }
+  const rowHeight = /* @__PURE__ */ new Map();
+  for (const [l, list] of byLayer) {
+    rowHeight.set(l, Math.max(...list.map((n) => n.height)));
+  }
+  const sortedLayers = [...byLayer.keys()].sort((a, b) => a - b);
+  const yOf = /* @__PURE__ */ new Map();
+  let y = 0;
+  for (const l of sortedLayers) {
+    yOf.set(l, y);
+    y += (rowHeight.get(l) ?? 0) + opts.colGap;
+  }
+  const out = [];
+  for (const l of sortedLayers) {
+    const list = byLayer.get(l);
+    const totalW = list.reduce((acc, n) => acc + n.width, 0) + Math.max(0, list.length - 1) * opts.rowGap;
+    let x = -totalW / 2;
+    for (const n of list) {
+      const rh = rowHeight.get(l) ?? n.height;
+      const ny = (yOf.get(l) ?? 0) + (rh - n.height) / 2;
+      out.push({
+        id: n.id,
+        type: n.type,
+        position: { x, y: ny },
+        data: n.data,
+        width: n.width,
+        height: n.height
+      });
+      x += n.width + opts.rowGap;
+    }
+  }
+  const outEdges = edges.map((e, i) => ({
+    id: `e-${i}-${e.source}-${e.target}`,
+    source: e.source,
+    target: e.target,
+    type: "default",
+    animated: e.animated ?? false,
+    style: {
+      stroke: e.stroke ?? "var(--line)",
+      strokeWidth: 1.25,
+      strokeDasharray: e.dashed ? "4 4" : void 0
+    }
+  }));
+  return { nodes: out, edges: outEdges };
+}
+function useZoomToNode(targetId, enabled) {
+  const rf = useReactFlow();
+  useEffect(() => {
+    if (!enabled || !targetId) return;
+    const node = rf.getNode(targetId);
+    if (!node) return;
+    const w = node.width ?? 240;
+    const h = node.height ?? 110;
+    const cx = node.position.x + w / 2;
+    const cy = node.position.y + h / 2;
+    rf.setCenter(cx, cy, { zoom: 1.25, duration: 400 });
+  }, [targetId, enabled, rf]);
+}
+function PlanGraph(props) {
+  return /* @__PURE__ */ React.createElement(ReactFlowProvider, null, /* @__PURE__ */ React.createElement(PlanGraphInner, { ...props }));
+}
+function PlanGraphInner({
+  tasks,
+  runtimeByTitle,
+  checkpoints,
+  qualityGates,
+  delays,
+  agents,
+  onOpenTask,
+  onOpenCheckpoint,
+  onOpenGate,
+  onOpenDelay,
+  selectedNodeId,
+  zoomToSelected = false,
+  labels,
+  className
+}) {
+  const L = useMemo(
+    () => ({ ...defaultPlanGraphLabels, ...labels }),
+    [labels]
+  );
+  const cps = checkpoints ?? [];
+  const qgs = qualityGates ?? [];
+  const dls = delays ?? [];
+  const { flowNodes, flowEdges } = useMemo(() => {
+    const titleSet = /* @__PURE__ */ new Set();
+    for (const tk of tasks) titleSet.add(tk.title);
+    const resolveTaskId = (ref) => titleSet.has(ref) ? `task:${ref}` : null;
+    const internalNodes = [];
+    const internalEdges = [];
+    for (const tk of tasks) {
+      internalNodes.push({
+        id: `task:${tk.title}`,
+        type: "taskNode",
+        width: 240,
+        height: 110,
+        data: {
+          kind: "task",
+          plan: tk,
+          runtime: runtimeByTitle?.get(tk.title),
+          agent: agents?.find((a) => a.name === tk.assignTo),
+          labels: L,
+          onOpen: onOpenTask
+        }
+      });
+    }
+    const gatedPairs = /* @__PURE__ */ new Set();
+    const pairKey = (from, to) => `${from}\u2192${to}`;
+    const registerGate = (afterTasks, blocksTasks) => {
+      for (const a of afterTasks) for (const b of blocksTasks)
+        gatedPairs.add(pairKey(a, b));
+    };
+    for (const cp of cps) registerGate(cp.afterTasks, cp.blocksTasks);
+    for (const g of qgs) registerGate(g.afterTasks, g.blocksTasks);
+    for (const d of dls) registerGate(d.afterTasks, d.blocksTasks);
+    for (const tk of tasks) {
+      for (const dep of tk.dependsOn || []) {
+        if (gatedPairs.has(pairKey(dep, tk.title))) continue;
+        const src = resolveTaskId(dep);
+        if (!src) continue;
+        const status = runtimeByTitle?.get(tk.title)?.status;
+        internalEdges.push({
+          source: src,
+          target: `task:${tk.title}`,
+          stroke: status === "running" ? "var(--p-accent)" : status === "failed" ? "#E63946" : status === "done" ? "var(--green)" : "var(--line)",
+          animated: status === "running"
+        });
+      }
+    }
+    for (const cp of cps) {
+      const id = `cp:${cp.name}`;
+      internalNodes.push({
+        id,
+        type: "checkpointNode",
+        width: 200,
+        height: 94,
+        data: { kind: "checkpoint", cp, labels: L, onOpen: onOpenCheckpoint }
+      });
+      for (const a of cp.afterTasks) {
+        const src = resolveTaskId(a);
+        if (src) internalEdges.push({ source: src, target: id });
+      }
+      for (const b of cp.blocksTasks) {
+        const tgt = resolveTaskId(b);
+        if (tgt) internalEdges.push({ source: id, target: tgt, dashed: true });
+      }
+    }
+    for (const g of qgs) {
+      const id = `qg:${g.name}`;
+      internalNodes.push({
+        id,
+        type: "gateNode",
+        width: 220,
+        height: 92,
+        data: { kind: "gate", gate: g, labels: L, onOpen: onOpenGate }
+      });
+      for (const a of g.afterTasks) {
+        const src = resolveTaskId(a);
+        if (src) internalEdges.push({ source: src, target: id });
+      }
+      for (const b of g.blocksTasks) {
+        const tgt = resolveTaskId(b);
+        if (tgt) internalEdges.push({ source: id, target: tgt, dashed: true });
+      }
+    }
+    for (const d of dls) {
+      const id = `dl:${d.name}`;
+      internalNodes.push({
+        id,
+        type: "delayNode",
+        width: 180,
+        height: 86,
+        data: { kind: "delay", delay: d, labels: L, onOpen: onOpenDelay }
+      });
+      for (const a of d.afterTasks) {
+        const src = resolveTaskId(a);
+        if (src) internalEdges.push({ source: src, target: id });
+      }
+      for (const b of d.blocksTasks) {
+        const tgt = resolveTaskId(b);
+        if (tgt) internalEdges.push({ source: id, target: tgt, dashed: true });
+      }
+    }
+    const nodeIds = new Set(internalNodes.map((n) => n.id));
+    const hasIncoming = /* @__PURE__ */ new Set();
+    const hasOutgoing = /* @__PURE__ */ new Set();
+    for (const e of internalEdges) {
+      hasIncoming.add(e.target);
+      hasOutgoing.add(e.source);
+    }
+    const roots = [...nodeIds].filter((id) => !hasIncoming.has(id));
+    const leaves = [...nodeIds].filter((id) => !hasOutgoing.has(id));
+    if (internalNodes.length > 0) {
+      internalNodes.push({
+        id: "sentinel:start",
+        type: "sentinelNode",
+        width: 84,
+        height: 30,
+        data: { kind: "sentinel", role: "start", label: L.start }
+      });
+      internalNodes.push({
+        id: "sentinel:end",
+        type: "sentinelNode",
+        width: 84,
+        height: 30,
+        data: { kind: "sentinel", role: "end", label: L.end }
+      });
+      for (const r of roots)
+        internalEdges.push({ source: "sentinel:start", target: r });
+      for (const l of leaves)
+        internalEdges.push({ source: l, target: "sentinel:end" });
+    }
+    const { nodes, edges } = layout(internalNodes, internalEdges, {
+      colGap: 80,
+      rowGap: 20
+    });
+    return { flowNodes: nodes, flowEdges: edges };
+  }, [
+    tasks,
+    cps,
+    qgs,
+    dls,
+    runtimeByTitle,
+    agents,
+    onOpenTask,
+    onOpenCheckpoint,
+    onOpenGate,
+    onOpenDelay,
+    L
+  ]);
+  const renderedNodes = useMemo(() => {
+    if (selectedNodeId === void 0) return flowNodes;
+    return flowNodes.map(
+      (n) => n.id === selectedNodeId ? { ...n, selected: true } : n.selected ? { ...n, selected: false } : n
+    );
+  }, [flowNodes, selectedNodeId]);
+  useZoomToNode(selectedNodeId ?? null, zoomToSelected);
+  if (flowNodes.length === 0) {
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: joinClasses(
+          "flex flex-col items-center justify-center gap-4 border border-p-line bg-p-bg px-8 py-20 text-center",
+          className
+        )
+      },
+      /* @__PURE__ */ React.createElement("span", { className: "inline-flex size-12 items-center justify-center rounded-full border border-p-line bg-p-surface text-p-ink-3" }, /* @__PURE__ */ React.createElement(Flag, { className: "size-5" })),
+      /* @__PURE__ */ React.createElement("h3", { className: "max-w-[36ch] font-display text-[22px] italic leading-[1.15] tracking-tight text-p-ink" }, L.emptyTitle),
+      /* @__PURE__ */ React.createElement("p", { className: "max-w-[48ch] text-[13.5px] leading-relaxed text-p-ink-2" }, L.emptyBody)
+    );
+  }
+  return /* @__PURE__ */ React.createElement("div", { className: joinClasses("plan-graph relative bg-p-bg", className) }, /* @__PURE__ */ React.createElement(
+    ReactFlow,
+    {
+      nodes: renderedNodes,
+      edges: flowEdges,
+      nodeTypes,
+      fitView: true,
+      fitViewOptions: { padding: 0.2, maxZoom: 1 },
+      proOptions: { hideAttribution: true },
+      nodesDraggable: false,
+      nodesConnectable: false,
+      elementsSelectable: true,
+      style: { width: "100%", height: "100%" }
+    },
+    /* @__PURE__ */ React.createElement(
+      Background,
+      {
+        variant: BackgroundVariant.Dots,
+        gap: 28,
+        size: 1,
+        color: "var(--line)"
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      Controls,
+      {
+        showInteractive: false,
+        className: "!bg-p-surface !border !border-p-line !rounded-[4px] !shadow-none [&_button]:!bg-p-surface [&_button]:!border-p-line [&_button]:!text-p-ink-2 [&_button:hover]:!bg-p-warm [&_button:hover]:!text-p-ink"
+      }
+    )
+  ));
+}
+export {
+  PlanGraph
+};

package/dist/plan-node-detail.d.ts

@@ -0,0 +1,29 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { PlanTaskRuntime, Plan, PlanGraphLabels, PlanCheckpoint, PlanDelay, PlanQualityGate } from './plan-types.js';
+
+interface CommonProps {
+    /** When provided, used to overlay runtime status on the after/blocks
+     *  rows, so consumers see live progress alongside structure. */
+    runtimeByTitle?: Map<string, PlanTaskRuntime>;
+    plan?: Plan;
+    headerTrailing?: ReactNode;
+    actionsSlot?: ReactNode;
+    onOpenRelated?: (title: string) => void;
+    labels?: Partial<PlanGraphLabels>;
+    className?: string;
+}
+interface PlanCheckpointDetailProps extends CommonProps {
+    checkpoint: PlanCheckpoint;
+}
+interface PlanQualityGateDetailProps extends CommonProps {
+    gate: PlanQualityGate;
+}
+interface PlanDelayDetailProps extends CommonProps {
+    delay: PlanDelay;
+}
+declare function PlanCheckpointDetail({ checkpoint, runtimeByTitle, plan, headerTrailing, actionsSlot, onOpenRelated, labels, className, }: PlanCheckpointDetailProps): react.JSX.Element;
+declare function PlanQualityGateDetail({ gate, runtimeByTitle, plan, headerTrailing, actionsSlot, onOpenRelated, labels, className, }: PlanQualityGateDetailProps): react.JSX.Element;
+declare function PlanDelayDetail({ delay, runtimeByTitle, plan, headerTrailing, actionsSlot, onOpenRelated, labels, className, }: PlanDelayDetailProps): react.JSX.Element;
+
+export { PlanCheckpointDetail, type PlanCheckpointDetailProps, PlanDelayDetail, type PlanDelayDetailProps, PlanQualityGateDetail, type PlanQualityGateDetailProps };