@lumea-labs/orchestrator 0.1.0

package/dist/plan-detail.js

@@ -0,0 +1,385 @@
+"use client";
+import { useMemo, useState } from "react";
+import {
+  CheckCircle2,
+  ChevronDown,
+  ChevronRight,
+  Circle,
+  Pause,
+  RotateCcw,
+  Scale,
+  XCircle
+} from "lucide-react";
+import { PlanGraph } from "./plan-graph";
+import {
+  defaultPlanDetailLabels,
+  defaultPlanGraphLabels
+} from "./plan-types";
+const STATUS_ICON = {
+  draft: Circle,
+  pending: Pause,
+  running: RotateCcw,
+  review: Scale,
+  done: CheckCircle2,
+  failed: XCircle
+};
+const STATUS_TONE = {
+  draft: "text-p-ink-3",
+  pending: "text-p-ink-3",
+  running: "text-p-accent",
+  review: "text-[#2B44FF]",
+  done: "text-p-green",
+  failed: "text-[#E63946]"
+};
+function PlanDetailHeader({
+  plan,
+  runtimeByTitle,
+  briefSlot,
+  actionsSlot,
+  headerLeading,
+  headerTrailing,
+  labels,
+  className
+}) {
+  const L = useMemo(
+    () => ({ ...defaultPlanDetailLabels, ...labels }),
+    [labels]
+  );
+  const taskCount = plan.tasks.length;
+  const cpCount = plan.checkpoints?.length ?? 0;
+  const gateCount = plan.qualityGates?.length ?? 0;
+  const delayCount = plan.delays?.length ?? 0;
+  const counts = useMemo(() => statusCounts(plan, runtimeByTitle), [
+    plan,
+    runtimeByTitle
+  ]);
+  const hasRuntime = runtimeByTitle && runtimeByTitle.size > 0;
+  return /* @__PURE__ */ React.createElement(
+    "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
+  );
+}
+function PlanDetailMasthead({
+  plan,
+  runtimeByTitle,
+  briefSlot,
+  actionsSlot,
+  headerLeading,
+  headerTrailing,
+  labels,
+  className
+}) {
+  const L = useMemo(
+    () => ({ ...defaultPlanDetailLabels, ...labels }),
+    [labels]
+  );
+  const taskCount = plan.tasks.length;
+  const cpCount = plan.checkpoints?.length ?? 0;
+  const gateCount = plan.qualityGates?.length ?? 0;
+  const delayCount = plan.delays?.length ?? 0;
+  const counts = useMemo(() => statusCounts(plan, runtimeByTitle), [
+    plan,
+    runtimeByTitle
+  ]);
+  const hasRuntime = runtimeByTitle && runtimeByTitle.size > 0;
+  return /* @__PURE__ */ React.createElement(
+    "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
+  );
+}
+function PlanDetailGraph({
+  plan,
+  runtimeByTitle,
+  agents,
+  graphHeight = 720,
+  fillHeight = false,
+  onOpenTask,
+  onOpenCheckpoint,
+  onOpenGate,
+  onOpenDelay,
+  selectedNodeId,
+  zoomToSelected,
+  graphLabels,
+  className
+}) {
+  const GL = useMemo(
+    () => ({ ...defaultPlanGraphLabels, ...graphLabels }),
+    [graphLabels]
+  );
+  return /* @__PURE__ */ React.createElement(
+    "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"
+      }
+    )
+  );
+}
+function PlanDetailBreakdown({
+  plan,
+  runtimeByTitle,
+  agents,
+  defaultOpen = true,
+  alwaysOpen = false,
+  onOpenTask,
+  labels,
+  className
+}) {
+  const L = useMemo(
+    () => ({ ...defaultPlanDetailLabels, ...labels }),
+    [labels]
+  );
+  const [open, setOpen] = useState(defaultOpen);
+  const isOpen = alwaysOpen || open;
+  const agentByName = useMemo(() => {
+    const m = /* @__PURE__ */ new Map();
+    for (const a of agents ?? []) m.set(a.name, a);
+    return m;
+  }, [agents]);
+  return /* @__PURE__ */ React.createElement(
+    "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",
+          {
+            "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]
+        )
+      );
+    }))
+  );
+}
+function PlanDetail({
+  plan,
+  runtimeByTitle,
+  agents,
+  briefSlot,
+  actionsSlot,
+  headerTrailing,
+  hideBreakdown = false,
+  defaultBreakdownOpen = true,
+  graphHeight = 720,
+  onOpenTask,
+  labels,
+  graphLabels,
+  className
+}) {
+  return /* @__PURE__ */ React.createElement(
+    "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
+  );
+}
+function statusCounts(plan, runtimeByTitle) {
+  const c = {
+    draft: 0,
+    pending: 0,
+    running: 0,
+    review: 0,
+    done: 0,
+    failed: 0
+  };
+  for (const tk of plan.tasks) {
+    const s = runtimeByTitle?.get(tk.title)?.status ?? "draft";
+    c[s] += 1;
+  }
+  return c;
+}
+function StatusCountsStrip({
+  counts,
+  L,
+  dense
+}) {
+  const order = [
+    "running",
+    "review",
+    "done",
+    "failed",
+    "pending",
+    "draft"
+  ];
+  const visible = order.filter((s) => counts[s] > 0);
+  if (visible.length === 0) return null;
+  return /* @__PURE__ */ React.createElement(
+    "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])
+      );
+    })
+  );
+}
+function MetaCell({ label, accent }) {
+  return /* @__PURE__ */ React.createElement("div", { className: "bg-p-surface px-4 py-2.5" }, /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      className: [
+        "block font-mono text-[10px] font-bold uppercase tracking-[0.18em]",
+        accent ? "text-p-accent" : "text-p-ink-3"
+      ].join(" ")
+    },
+    label
+  ));
+}
+function InventoryItem({ label, accent }) {
+  return /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      className: [
+        "font-bold",
+        accent ? "text-p-accent" : "text-p-ink-2"
+      ].join(" ")
+    },
+    label
+  );
+}
+function Sep() {
+  return /* @__PURE__ */ React.createElement("span", { "aria-hidden": true, className: "text-p-line" }, "\xB7");
+}
+export {
+  PlanDetail,
+  PlanDetailBreakdown,
+  PlanDetailGraph,
+  PlanDetailHeader,
+  PlanDetailMasthead
+};

package/dist/plan-graph.d.ts

@@ -0,0 +1,39 @@
+import * as react from 'react';
+import { PlanTask, PlanTaskRuntime, PlanCheckpoint, PlanQualityGate, PlanDelay, PlanGraphLabels } from './plan-types.js';
+import { SwarmAgentRef } from './types.js';
+
+interface PlanGraphTaskRef {
+    title: string;
+    /** Optional opaque runtime id passed back to the consumer when present. */
+    runtimeId?: string;
+}
+interface PlanGraphProps {
+    tasks: PlanTask[];
+    /** Runtime status overlay, keyed by task title. */
+    runtimeByTitle?: Map<string, PlanTaskRuntime>;
+    checkpoints?: PlanCheckpoint[];
+    qualityGates?: PlanQualityGate[];
+    delays?: PlanDelay[];
+    agents?: SwarmAgentRef[];
+    onOpenTask?: (ref: PlanGraphTaskRef) => void;
+    /** Open callbacks for non-task nodes — receive the node's `name`. */
+    onOpenCheckpoint?: (name: string) => void;
+    onOpenGate?: (name: string) => void;
+    onOpenDelay?: (name: string) => void;
+    /** Controlled-selection prop — the canonical node id to highlight:
+     *    - `task:<title>`  for tasks
+     *    - `cp:<name>`     for checkpoints
+     *    - `qg:<name>`     for quality gates
+     *    - `dl:<name>`     for delays
+     *  Pair with a toggle `onOpen*` handler to get "click again to
+     *  deselect" behaviour. */
+    selectedNodeId?: string | null;
+    /** When `true`, animate the viewport to centre + zoom on the
+     *  currently `selectedNodeId` node. Off by default. */
+    zoomToSelected?: boolean;
+    labels?: Partial<PlanGraphLabels>;
+    className?: string;
+}
+declare function PlanGraph(props: PlanGraphProps): react.JSX.Element;
+
+export { PlanGraph, type PlanGraphProps, type PlanGraphTaskRef };