@lumea-labs/orchestrator 0.1.0

package/dist/plan-node-detail.js

@@ -0,0 +1,346 @@
+"use client";
+import { useMemo } from "react";
+import {
+  ArrowRight,
+  CheckCircle2,
+  Circle,
+  Clock,
+  Hourglass,
+  Pause,
+  RotateCcw,
+  Scale,
+  ShieldCheck,
+  XCircle
+} from "lucide-react";
+import {
+  defaultPlanGraphLabels
+} from "./plan-types";
+function PlanCheckpointDetail({
+  checkpoint,
+  runtimeByTitle,
+  plan,
+  headerTrailing,
+  actionsSlot,
+  onOpenRelated,
+  labels,
+  className
+}) {
+  const L = useMergedLabels(labels);
+  const after = checkpoint.afterTasks ?? [];
+  const blocks = checkpoint.blocksTasks ?? [];
+  return /* @__PURE__ */ React.createElement(
+    Frame,
+    {
+      tone: CHECKPOINT_TONE,
+      kind: L.checkpoint,
+      icon: /* @__PURE__ */ React.createElement(Hourglass, { className: "size-3.5", "aria-hidden": true }),
+      name: checkpoint.name,
+      headerTrailing,
+      actionsSlot,
+      className
+    },
+    checkpoint.message ? /* @__PURE__ */ React.createElement(Section, null, /* @__PURE__ */ React.createElement(Kicker, null, "review prompt"), /* @__PURE__ */ React.createElement("p", { className: "mt-1 font-body text-[13px] leading-[1.55] text-p-ink-2" }, checkpoint.message)) : null,
+    /* @__PURE__ */ React.createElement(MetaGrid, null, /* @__PURE__ */ React.createElement(Cell, { label: "kind" }, /* @__PURE__ */ React.createElement(ChipText, { tone: CHECKPOINT_TONE }, L.checkpoint)), /* @__PURE__ */ React.createElement(Cell, { label: "gates" }, /* @__PURE__ */ React.createElement("span", { className: "font-mono text-[10.5px] uppercase tracking-[0.14em] text-p-ink" }, "human review"))),
+    /* @__PURE__ */ React.createElement(
+      RelatedSections,
+      {
+        after,
+        blocks,
+        runtimeByTitle,
+        plan,
+        onOpenRelated,
+        L
+      }
+    )
+  );
+}
+function PlanQualityGateDetail({
+  gate,
+  runtimeByTitle,
+  plan,
+  headerTrailing,
+  actionsSlot,
+  onOpenRelated,
+  labels,
+  className
+}) {
+  const L = useMergedLabels(labels);
+  const after = gate.afterTasks ?? [];
+  const blocks = gate.blocksTasks ?? [];
+  return /* @__PURE__ */ React.createElement(
+    Frame,
+    {
+      tone: GATE_TONE,
+      kind: L.qualityGate,
+      icon: /* @__PURE__ */ React.createElement(ShieldCheck, { className: "size-3.5", "aria-hidden": true }),
+      name: gate.name,
+      headerTrailing,
+      actionsSlot,
+      className
+    },
+    gate.condition ? /* @__PURE__ */ React.createElement(Section, null, /* @__PURE__ */ React.createElement(Kicker, null, "condition"), /* @__PURE__ */ React.createElement("p", { className: "mt-1 font-body text-[13px] leading-[1.55] text-p-ink-2" }, gate.condition)) : null,
+    /* @__PURE__ */ React.createElement(MetaGrid, null, /* @__PURE__ */ React.createElement(Cell, { label: L.qualityMinScore }, typeof gate.minScore === "number" ? /* @__PURE__ */ React.createElement("span", { className: "font-display text-[16px] font-bold tabular-nums text-p-ink" }, gate.minScore, /* @__PURE__ */ React.createElement("span", { className: "ml-0.5 font-mono text-[10px] font-bold uppercase tracking-[0.14em] text-p-ink-3" }, "/10")) : /* @__PURE__ */ React.createElement(Dash, null)), /* @__PURE__ */ React.createElement(Cell, { label: L.qualityRequireAll }, /* @__PURE__ */ React.createElement("span", { className: "font-mono text-[10.5px] font-bold uppercase tracking-[0.14em] text-p-ink" }, gate.requireAllPassed ? "yes" : "no"))),
+    /* @__PURE__ */ React.createElement(
+      RelatedSections,
+      {
+        after,
+        blocks,
+        runtimeByTitle,
+        plan,
+        onOpenRelated,
+        L
+      }
+    )
+  );
+}
+function PlanDelayDetail({
+  delay,
+  runtimeByTitle,
+  plan,
+  headerTrailing,
+  actionsSlot,
+  onOpenRelated,
+  labels,
+  className
+}) {
+  const L = useMergedLabels(labels);
+  const after = delay.afterTasks ?? [];
+  const blocks = delay.blocksTasks ?? [];
+  const human = useMemo(() => parseIsoDuration(delay.duration), [delay.duration]);
+  return /* @__PURE__ */ React.createElement(
+    Frame,
+    {
+      tone: DELAY_TONE,
+      kind: L.delay,
+      icon: /* @__PURE__ */ React.createElement(Clock, { className: "size-3.5", "aria-hidden": true }),
+      name: delay.name,
+      headerTrailing,
+      actionsSlot,
+      className
+    },
+    delay.message ? /* @__PURE__ */ React.createElement(Section, null, /* @__PURE__ */ React.createElement(Kicker, null, "note"), /* @__PURE__ */ React.createElement("p", { className: "mt-1 font-body text-[13px] leading-[1.55] text-p-ink-2" }, delay.message)) : null,
+    /* @__PURE__ */ React.createElement(MetaGrid, null, /* @__PURE__ */ React.createElement(Cell, { label: "duration" }, /* @__PURE__ */ React.createElement("span", { className: "font-display text-[18px] font-bold tabular-nums text-p-ink" }, human)), /* @__PURE__ */ React.createElement(Cell, { label: "iso" }, /* @__PURE__ */ React.createElement("code", { className: "font-mono text-[11px] tracking-[0.04em] text-p-ink-2" }, delay.duration))),
+    /* @__PURE__ */ React.createElement(
+      RelatedSections,
+      {
+        after,
+        blocks,
+        runtimeByTitle,
+        plan,
+        onOpenRelated,
+        L
+      }
+    )
+  );
+}
+const CHECKPOINT_TONE = {
+  bg: "#FDF8E8",
+  fg: "#8A6B0B",
+  border: "#D4A017",
+  chipBg: "#FDF8E8",
+  chipFg: "#8A6B0B"
+};
+const GATE_TONE = {
+  bg: "var(--accent-light)",
+  fg: "var(--p-accent)",
+  border: "var(--p-accent)",
+  chipBg: "var(--accent-light)",
+  chipFg: "var(--p-accent)"
+};
+const DELAY_TONE = {
+  bg: "#F3EEFF",
+  fg: "#7B3FE4",
+  border: "#7B3FE4",
+  chipBg: "#F3EEFF",
+  chipFg: "#7B3FE4"
+};
+function Frame({
+  tone,
+  kind,
+  icon,
+  name,
+  children,
+  headerTrailing,
+  actionsSlot,
+  className
+}) {
+  return /* @__PURE__ */ React.createElement(
+    "article",
+    {
+      className: [
+        "flex h-full min-h-0 flex-col overflow-hidden bg-p-surface",
+        className || ""
+      ].join(" ")
+    },
+    /* @__PURE__ */ React.createElement(
+      "header",
+      {
+        className: "flex shrink-0 items-start gap-3 border-b border-p-line px-5 py-4",
+        style: { background: tone.bg }
+      },
+      /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          "aria-hidden": true,
+          className: "mt-0.5 grid size-7 shrink-0 place-items-center rounded-full bg-p-surface ring-1",
+          style: { color: tone.fg, boxShadow: `inset 0 0 0 1px ${tone.border}` }
+        },
+        icon
+      ),
+      /* @__PURE__ */ React.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: "font-mono text-[10px] font-bold uppercase tracking-[0.22em]",
+          style: { color: tone.fg }
+        },
+        kind
+      ), /* @__PURE__ */ React.createElement("h3", { className: "mt-1 font-display text-[18px] font-bold leading-tight tracking-[-0.01em] text-p-ink" }, name)),
+      headerTrailing
+    ),
+    /* @__PURE__ */ React.createElement("div", { className: "flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-5 py-4" }, children),
+    actionsSlot ? /* @__PURE__ */ React.createElement("footer", { className: "flex shrink-0 items-center justify-end gap-2 border-t border-p-line bg-p-bg/50 px-5 py-3" }, actionsSlot) : null
+  );
+}
+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 useMergedLabels(labels) {
+  return useMemo(
+    () => ({ ...defaultPlanGraphLabels, ...labels }),
+    [labels]
+  );
+}
+function Section({ children }) {
+  return /* @__PURE__ */ React.createElement("section", null, children);
+}
+function MetaGrid({ children }) {
+  return /* @__PURE__ */ React.createElement("section", { className: "grid grid-cols-2 gap-px overflow-hidden rounded-md border border-p-line bg-p-line text-[11px]" }, children);
+}
+function Cell({ label, children }) {
+  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-1 bg-p-surface px-3 py-2" }, /* @__PURE__ */ React.createElement("span", { className: "font-mono text-[9.5px] font-bold uppercase tracking-[0.18em] text-p-ink-3" }, label), /* @__PURE__ */ React.createElement("span", { className: "min-h-[18px]" }, children));
+}
+function Kicker({
+  children,
+  icon
+}) {
+  return /* @__PURE__ */ React.createElement("span", { className: "inline-flex items-center gap-1.5 font-mono text-[10px] font-bold uppercase tracking-[0.22em] text-p-ink-3" }, icon, children);
+}
+function Dash() {
+  return /* @__PURE__ */ React.createElement("span", { className: "font-mono text-[10.5px] uppercase tracking-[0.14em] text-p-ink-3" }, "\u2014");
+}
+function ChipText({
+  tone,
+  children
+}) {
+  return /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      className: "inline-flex items-center rounded-sm px-1.5 py-0.5 font-mono text-[10px] font-bold uppercase tracking-[0.16em]",
+      style: { background: tone.chipBg, color: tone.chipFg }
+    },
+    children
+  );
+}
+function RelatedSections({
+  after,
+  blocks,
+  runtimeByTitle,
+  plan,
+  onOpenRelated,
+  L
+}) {
+  const knownTitles = useMemo(() => {
+    if (!plan) return null;
+    return new Set(plan.tasks.map((t) => t.title));
+  }, [plan]);
+  const filterValid = (titles) => knownTitles ? titles.filter((t) => knownTitles.has(t)) : titles;
+  const safeAfter = filterValid(after);
+  const safeBlocks = filterValid(blocks);
+  if (safeAfter.length === 0 && safeBlocks.length === 0) {
+    return /* @__PURE__ */ React.createElement("section", { className: "flex flex-col items-center gap-2 rounded-md border border-dashed border-p-line bg-p-bg p-6 text-center" }, /* @__PURE__ */ React.createElement("span", { className: "font-mono text-[10.5px] uppercase tracking-[0.16em] text-p-ink-3" }, "standalone \u2014 not gating any task"));
+  }
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, safeAfter.length > 0 ? /* @__PURE__ */ React.createElement("section", null, /* @__PURE__ */ React.createElement(Kicker, { icon: /* @__PURE__ */ React.createElement(ArrowRight, { className: "size-2.5 rotate-180" }) }, "after"), /* @__PURE__ */ React.createElement("ol", { className: "mt-1 flex flex-col gap-0.5" }, safeAfter.map((title) => /* @__PURE__ */ React.createElement(
+    RelatedRow,
+    {
+      key: title,
+      title,
+      runtime: runtimeByTitle?.get(title),
+      onOpen: onOpenRelated,
+      L
+    }
+  )))) : null, safeBlocks.length > 0 ? /* @__PURE__ */ React.createElement("section", null, /* @__PURE__ */ React.createElement(Kicker, { icon: /* @__PURE__ */ React.createElement(ArrowRight, { className: "size-2.5" }) }, "blocks"), /* @__PURE__ */ React.createElement("ol", { className: "mt-1 flex flex-col gap-0.5" }, safeBlocks.map((title) => /* @__PURE__ */ React.createElement(
+    RelatedRow,
+    {
+      key: title,
+      title,
+      runtime: runtimeByTitle?.get(title),
+      onOpen: onOpenRelated,
+      L
+    }
+  )))) : null);
+}
+function RelatedRow({
+  title,
+  runtime,
+  onOpen,
+  L
+}) {
+  const status = runtime?.status ?? "draft";
+  const Icon = STATUS_ICON[status];
+  const tone = STATUS_TONE[status];
+  const interactive = !!onOpen;
+  const Wrapper = interactive ? "button" : "div";
+  return /* @__PURE__ */ React.createElement(
+    Wrapper,
+    {
+      type: interactive ? "button" : void 0,
+      onClick: interactive ? () => onOpen(title) : void 0,
+      className: [
+        "group flex items-center gap-2 rounded-md border border-p-line bg-p-surface px-2.5 py-1.5 text-left transition-colors",
+        interactive ? "cursor-pointer hover:border-p-ink-3 hover:bg-p-warm/40" : ""
+      ].join(" ")
+    },
+    /* @__PURE__ */ React.createElement(Icon, { className: ["size-3 shrink-0", tone].join(" "), "aria-hidden": true }),
+    /* @__PURE__ */ React.createElement("span", { className: "min-w-0 flex-1 truncate font-display text-[12.5px] font-semibold text-p-ink" }, title),
+    /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        className: [
+          "shrink-0 font-mono text-[9.5px] font-bold uppercase tracking-[0.16em]",
+          tone
+        ].join(" ")
+      },
+      L.status[status]
+    )
+  );
+}
+function parseIsoDuration(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;
+}
+export {
+  PlanCheckpointDetail,
+  PlanDelayDetail,
+  PlanQualityGateDetail
+};

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

@@ -0,0 +1,76 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { PlanTask, Plan, PlanTaskRuntime, PlanGraphLabels } from './plan-types.js';
+import { SwarmAgentRef } from './types.js';
+
+type PlanTaskDetailVariant = "panel" | "page";
+/**
+ * Async confirm slot — consumer wires this to `<ConfirmDialog>` (or
+ * `window.confirm` in dev). Returns `true` to proceed, `false` to abort.
+ */
+type PlanTaskConfirmFn = (opts: {
+    title: string;
+    message?: string;
+    confirmLabel: string;
+    cancelLabel?: string;
+    destructive?: boolean;
+}) => Promise<boolean>;
+interface PlanTaskActionConfig {
+    /** Fired after the user passes the confirm gate (or immediately when
+     *  no confirm slot is wired). */
+    onConfirm: () => void;
+    /** Override the default confirm copy/strength. Pass `false` to skip
+     *  the confirm gate entirely for this action. */
+    confirm?: false | {
+        title?: string;
+        message?: string;
+        confirmLabel?: string;
+        destructive?: boolean;
+    };
+    /** Disable the button while another action is in flight. */
+    disabled?: boolean;
+}
+interface PlanTaskActions {
+    /** Start a fresh run for this task. Default copy: non-destructive. */
+    run?: PlanTaskActionConfig;
+    /** Re-run the task after success or failure. Non-destructive. */
+    retry?: PlanTaskActionConfig;
+    /** Re-evaluate outcomes (judge / quality gates). Non-destructive. */
+    reassess?: PlanTaskActionConfig;
+    /** Stop a running task. Default copy: DESTRUCTIVE. */
+    abort?: PlanTaskActionConfig;
+}
+interface PlanTaskDetailProps {
+    task: PlanTask;
+    /** When provided, used to resolve `dependsOn` titles and the
+     *  reverse "blocks" list. */
+    plan?: Plan;
+    runtimeByTitle?: Map<string, PlanTaskRuntime>;
+    agents?: SwarmAgentRef[];
+    /** `"panel"` (default) — compact side-pane shape used in drawers and
+     *  graph overlays. `"page"` — editorial full-page shape with pills
+     *  row, big title and inline action dock. */
+    variant?: PlanTaskDetailVariant;
+    /** Trailing slot in the header (e.g. close button). */
+    headerTrailing?: ReactNode;
+    /** Footer slot — used by the panel variant for compact controls.
+     *  Ignored by the page variant, which renders `actions` inline. */
+    actionsSlot?: ReactNode;
+    /** Declarative action descriptors. Each enabled action is rendered
+     *  as a button; clicking gates through `confirm` (when supplied)
+     *  before invoking `onConfirm`. */
+    actions?: PlanTaskActions;
+    /** Async confirm gate. When omitted, actions fire immediately. */
+    confirm?: PlanTaskConfirmFn;
+    /** Click on a related task (dep or dependent) — passes the title. */
+    onOpenRelated?: (title: string) => void;
+    /** Render the task description as Markdown — wire `<MarkdownViewer/>`
+     *  from `@lumea-labs/markdown`. When omitted, description is plain
+     *  text. */
+    renderMarkdown?: (text: string) => ReactNode;
+    labels?: Partial<PlanGraphLabels>;
+    className?: string;
+}
+declare function PlanTaskDetail({ task, plan, runtimeByTitle, agents, variant, headerTrailing, actionsSlot, actions, confirm, onOpenRelated, renderMarkdown, labels, className, }: PlanTaskDetailProps): react.JSX.Element;
+
+export { type PlanTaskActionConfig, type PlanTaskActions, type PlanTaskConfirmFn, PlanTaskDetail, type PlanTaskDetailProps, type PlanTaskDetailVariant };