@lumea-labs/orchestrator 0.1.0

package/dist/swarm-timeline.js

@@ -0,0 +1,414 @@
+"use client";
+import { useMemo } from "react";
+import {
+  defaultSwarmLabels
+} from "./types";
+const STATUS_FILL = {
+  scheduled: "bg-[#7B3FE4]/40",
+  pending: "bg-p-warm",
+  running: "bg-p-accent",
+  review: "bg-[#2B44FF]",
+  done: "bg-p-green",
+  failed: "bg-[#E63946]",
+  cancelled: "bg-p-ink-3/40"
+};
+const STATUS_DOT = {
+  scheduled: "bg-[#7B3FE4]",
+  pending: "bg-p-ink-3",
+  running: "bg-p-accent",
+  review: "bg-[#2B44FF]",
+  done: "bg-p-green",
+  failed: "bg-[#E63946]",
+  cancelled: "bg-p-ink-3/50"
+};
+function SwarmTimeline({
+  runs,
+  now,
+  renderAvatar,
+  onOpen,
+  rowHeight = 32,
+  labelWidth = 264,
+  labels,
+  className
+}) {
+  const L = { ...defaultSwarmLabels, ...labels };
+  const clock = now ?? Date.now();
+  const { rows, span, originMs, endMs, ticks, deps, nowPct, counts } = useMemo(() => {
+    const startedRuns = runs.filter((r) => r.startedAt);
+    if (startedRuns.length === 0) {
+      return {
+        rows: [],
+        span: 0,
+        originMs: 0,
+        endMs: 0,
+        ticks: [],
+        deps: [],
+        nowPct: 0,
+        counts: { running: 0, done: 0, failed: 0 }
+      };
+    }
+    const startedMsList = startedRuns.map((r) => new Date(r.startedAt).getTime());
+    const origin = Math.min(...startedMsList);
+    const lastEnd = Math.max(
+      clock,
+      ...startedRuns.map(
+        (r) => r.finishedAt ? new Date(r.finishedAt).getTime() : clock
+      )
+    );
+    const padded = origin + (lastEnd - origin) * 1.06;
+    const span2 = Math.max(1, padded - origin);
+    const sorted = [...startedRuns].sort((a, b) => {
+      const ai = new Date(a.startedAt).getTime();
+      const bi = new Date(b.startedAt).getTime();
+      return ai - bi;
+    });
+    const idIndex = /* @__PURE__ */ new Map();
+    const rows2 = sorted.map((run, index) => {
+      const startedMs = new Date(run.startedAt).getTime();
+      const endedMs = run.finishedAt ? new Date(run.finishedAt).getTime() : clock;
+      idIndex.set(run.id, index);
+      return {
+        run,
+        startedMs,
+        endedMs,
+        leftPct: (startedMs - origin) / span2 * 100,
+        widthPct: Math.max(0.4, (endedMs - startedMs) / span2 * 100),
+        index
+      };
+    });
+    const deps2 = [];
+    for (const row of rows2) {
+      const parentId = row.run.parentRunId;
+      if (!parentId) continue;
+      const parentIndex = idIndex.get(parentId);
+      if (parentIndex === void 0) continue;
+      const parent = rows2[parentIndex];
+      deps2.push({
+        fromIndex: parent.index,
+        toIndex: row.index,
+        fromPct: parent.leftPct + parent.widthPct,
+        toPct: row.leftPct
+      });
+    }
+    const spanSec = span2 / 1e3;
+    const stepSec = pickStep(spanSec);
+    const ticks2 = [];
+    for (let s = 0; s <= spanSec; s += stepSec) {
+      ticks2.push({
+        pct: s / spanSec * 100,
+        label: formatTick(s)
+      });
+    }
+    const nowPct2 = (clock - origin) / span2 * 100;
+    const counts2 = startedRuns.reduce(
+      (acc, r) => {
+        if (r.status === "running") acc.running += 1;
+        else if (r.status === "done") acc.done += 1;
+        else if (r.status === "failed") acc.failed += 1;
+        return acc;
+      },
+      { running: 0, done: 0, failed: 0 }
+    );
+    return {
+      rows: rows2,
+      span: span2,
+      originMs: origin,
+      endMs: padded,
+      ticks: ticks2,
+      deps: deps2,
+      nowPct: nowPct2,
+      counts: counts2
+    };
+  }, [runs, clock]);
+  if (rows.length === 0) {
+    return /* @__PURE__ */ React.createElement("div", { className: ["px-3 py-10 text-center", className || ""].join(" ") }, /* @__PURE__ */ React.createElement("span", { className: "font-mono text-[11px] uppercase tracking-[0.16em] text-p-ink-3" }, L.noRuns));
+  }
+  const totalLanesHeight = rows.length * rowHeight;
+  const headerH = 56;
+  const axisH = 26;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: [
+        "overflow-hidden rounded-2xl border border-p-line bg-p-surface",
+        className || ""
+      ].join(" ")
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "flex items-center justify-between gap-6 border-b border-p-line px-5",
+        style: { height: headerH }
+      },
+      /* @__PURE__ */ React.createElement("div", { className: "flex items-baseline gap-3" }, /* @__PURE__ */ React.createElement("span", { className: "font-mono text-[10px] font-bold uppercase tracking-[0.24em] text-p-ink-3" }, "mission control"), /* @__PURE__ */ React.createElement("span", { className: "font-display text-[20px] font-bold leading-none tracking-[-0.02em] text-p-ink tabular-nums" }, String(rows.length).padStart(2, "0")), /* @__PURE__ */ React.createElement("span", { className: "font-mono text-[10px] uppercase tracking-[0.2em] text-p-ink-3" }, "runs \xB7 ", L.duration(span / 1e3))),
+      /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-3 font-mono text-[10px] uppercase tracking-[0.16em] text-p-ink-3" }, /* @__PURE__ */ React.createElement(Tally, { tone: "accent", value: counts.running, label: "run", pulse: true }), /* @__PURE__ */ React.createElement(Tally, { tone: "green", value: counts.done, label: "done" }), /* @__PURE__ */ React.createElement(Tally, { tone: "red", value: counts.failed, label: "fail" }))
+    ),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "grid",
+        style: { gridTemplateColumns: `${labelWidth}px minmax(0,1fr)` }
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: "border-b border-r border-p-line bg-p-bg/60",
+          style: { height: axisH }
+        },
+        /* @__PURE__ */ React.createElement("span", { className: "ml-5 inline-flex h-full items-center font-mono text-[9.5px] uppercase tracking-[0.2em] text-p-ink-3" }, "agent \xB7 goal")
+      ),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: "relative border-b border-p-line bg-p-bg/60",
+          style: { height: axisH }
+        },
+        ticks.map((t, i) => /* @__PURE__ */ React.createElement(
+          "span",
+          {
+            key: i,
+            className: "absolute top-1/2 -translate-x-1/2 -translate-y-1/2 font-mono text-[9.5px] uppercase tracking-[0.2em] text-p-ink-3 tabular-nums",
+            style: { left: `${t.pct}%` }
+          },
+          t.label
+        )),
+        /* @__PURE__ */ React.createElement("span", { className: "absolute right-3 top-1/2 -translate-y-1/2 font-mono text-[9.5px] uppercase tracking-[0.16em] text-p-ink-3 tabular-nums" }, formatClock(endMs))
+      ),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: "flex flex-col border-r border-p-line",
+          style: { height: totalLanesHeight }
+        },
+        rows.map(({ run, index }) => /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            key: run.id,
+            role: onOpen ? "button" : void 0,
+            tabIndex: onOpen ? 0 : void 0,
+            onClick: onOpen ? () => onOpen(run.id) : void 0,
+            className: [
+              "group flex shrink-0 items-center gap-2.5 px-5",
+              onOpen ? "cursor-pointer transition-colors hover:bg-p-warm/50" : "",
+              index !== 0 ? "border-t border-p-line/60" : ""
+            ].join(" "),
+            style: { height: rowHeight }
+          },
+          /* @__PURE__ */ React.createElement(
+            "span",
+            {
+              "aria-hidden": true,
+              className: [
+                "size-1.5 shrink-0 rounded-full",
+                STATUS_DOT[run.status],
+                run.status === "running" ? "animate-pulse" : ""
+              ].join(" ")
+            }
+          ),
+          renderAvatar ? renderAvatar(run.agent) : /* @__PURE__ */ React.createElement(
+            "span",
+            {
+              "aria-hidden": true,
+              className: "grid size-[18px] shrink-0 place-items-center rounded font-display text-[10px] font-bold text-white",
+              style: { background: run.agent.color || "#999" }
+            },
+            run.agent.glyph || (run.agent.displayName || run.agent.name).charAt(0).toUpperCase()
+          ),
+          /* @__PURE__ */ React.createElement("span", { className: "w-[72px] shrink-0 truncate font-mono text-[10.5px] font-bold uppercase tracking-[0.14em] text-p-ink" }, run.agent.displayName || run.agent.name),
+          /* @__PURE__ */ React.createElement("span", { className: "min-w-0 flex-1 truncate font-display italic text-[12.5px] text-p-ink-2" }, run.title)
+        ))
+      ),
+      /* @__PURE__ */ React.createElement("div", { className: "relative", style: { height: totalLanesHeight } }, ticks.map((t, i) => /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          key: i,
+          "aria-hidden": true,
+          className: "pointer-events-none absolute inset-y-0 w-px bg-p-line/60",
+          style: { left: `${t.pct}%` }
+        }
+      )), rows.map(
+        ({ run, index }) => index === 0 ? null : /* @__PURE__ */ React.createElement(
+          "span",
+          {
+            key: `sep-${run.id}`,
+            "aria-hidden": true,
+            className: "pointer-events-none absolute inset-x-0 h-px bg-p-line/60",
+            style: { top: index * rowHeight }
+          }
+        )
+      ), nowPct > 0 && nowPct <= 100 ? /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          "aria-hidden": true,
+          className: "pointer-events-none absolute inset-y-0 w-[2px] -translate-x-1/2 bg-p-accent/15",
+          style: { left: `${nowPct}%` }
+        }
+      ) : null, /* @__PURE__ */ React.createElement(
+        "svg",
+        {
+          "aria-hidden": true,
+          className: "pointer-events-none absolute inset-0 h-full w-full overflow-visible"
+        },
+        /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement(
+          "marker",
+          {
+            id: "swarm-dep-arrow",
+            viewBox: "0 0 6 6",
+            refX: "5",
+            refY: "3",
+            markerWidth: "6",
+            markerHeight: "6",
+            orient: "auto-start-reverse"
+          },
+          /* @__PURE__ */ React.createElement("path", { d: "M 0 0 L 6 3 L 0 6 z", className: "fill-p-ink-3" })
+        )),
+        deps.map((d, i) => /* @__PURE__ */ React.createElement(DependencyPath, { key: i, dep: d, rowHeight }))
+      ), rows.map(({ run, leftPct, widthPct, index }) => {
+        const isLive = run.status === "running" || run.status === "pending";
+        const fillPct = run.progress !== void 0 ? Math.max(0, Math.min(1, run.progress)) * 100 : isLive ? 0 : 100;
+        const top = index * rowHeight + (rowHeight - 14) / 2;
+        return /* @__PURE__ */ React.createElement(
+          "button",
+          {
+            key: `bar-${run.id}`,
+            type: "button",
+            onClick: onOpen ? () => onOpen(run.id) : void 0,
+            className: [
+              "absolute overflow-hidden rounded-[3px] transition-[box-shadow,transform]",
+              onOpen ? "cursor-pointer hover:scale-y-110" : "cursor-default",
+              run.status === "running" ? "shadow-[0_0_18px_-4px_rgba(226,115,61,0.5)]" : ""
+            ].join(" "),
+            style: {
+              left: `${leftPct}%`,
+              width: `${widthPct}%`,
+              top,
+              height: 14,
+              minWidth: 4
+            },
+            title: `${run.agent.displayName || run.agent.name} \xB7 ${run.title}`
+          },
+          isLive ? /* @__PURE__ */ React.createElement(
+            "span",
+            {
+              "aria-hidden": true,
+              className: "absolute inset-0 bg-p-warm"
+            }
+          ) : /* @__PURE__ */ React.createElement(
+            "span",
+            {
+              "aria-hidden": true,
+              className: ["absolute inset-0", STATUS_FILL[run.status]].join(" ")
+            }
+          ),
+          isLive ? /* @__PURE__ */ React.createElement(
+            "span",
+            {
+              "aria-hidden": true,
+              className: "absolute inset-y-0 left-0 bg-p-accent transition-[width] duration-500 ease-out",
+              style: { width: `${fillPct}%` }
+            }
+          ) : null
+        );
+      }), nowPct > 0 && nowPct <= 100 ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          "aria-hidden": true,
+          className: "pointer-events-none absolute inset-y-0 w-px bg-p-accent",
+          style: { left: `${nowPct}%` }
+        }
+      ), /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          "aria-hidden": true,
+          className: "pointer-events-none absolute -top-3 -translate-x-1/2 rounded-full bg-p-accent px-1.5 py-[1px] font-mono text-[8.5px] font-bold uppercase tracking-[0.22em] text-white shadow-[0_2px_8px_rgba(226,115,61,0.45)]",
+          style: { left: `${nowPct}%` }
+        },
+        "now"
+      )) : null)
+    ),
+    /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between border-t border-p-line px-5 py-2 font-mono text-[9.5px] uppercase tracking-[0.18em] text-p-ink-3 tabular-nums" }, /* @__PURE__ */ React.createElement("span", null, "start \xB7 ", formatClock(originMs)), /* @__PURE__ */ React.createElement(Legend, null), /* @__PURE__ */ React.createElement("span", null, "end \xB7 ", formatClock(endMs)))
+  );
+}
+function Tally({
+  tone,
+  value,
+  label,
+  pulse
+}) {
+  const fg = tone === "accent" ? "text-p-accent" : tone === "green" ? "text-p-green" : "text-[#E63946]";
+  const dot = tone === "accent" ? "bg-p-accent" : tone === "green" ? "bg-p-green" : "bg-[#E63946]";
+  return /* @__PURE__ */ React.createElement("span", { className: "inline-flex items-center gap-1.5" }, /* @__PURE__ */ React.createElement("span", { className: "relative inline-flex size-2" }, pulse && value > 0 ? /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      "aria-hidden": true,
+      className: ["absolute inset-0 rounded-full opacity-60 animate-ping", dot].join(" ")
+    }
+  ) : null, /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      "aria-hidden": true,
+      className: ["relative inline-block size-2 rounded-full", dot].join(" ")
+    }
+  )), /* @__PURE__ */ React.createElement("span", { className: ["font-display text-[14px] font-bold tabular-nums leading-none", fg].join(" ") }, value), /* @__PURE__ */ React.createElement("span", null, label));
+}
+function Legend() {
+  const items = [
+    { key: "running", cls: "bg-p-accent", label: "running" },
+    { key: "done", cls: "bg-p-green", label: "done" },
+    { key: "failed", cls: "bg-[#E63946]", label: "failed" },
+    { key: "cancelled", cls: "bg-p-ink-3/40", label: "cancelled" }
+  ];
+  return /* @__PURE__ */ React.createElement("span", { className: "hidden items-center gap-3 md:inline-flex" }, items.map((it) => /* @__PURE__ */ React.createElement("span", { key: it.key, className: "inline-flex items-center gap-1.5" }, /* @__PURE__ */ React.createElement("span", { "aria-hidden": true, className: ["h-1.5 w-3 rounded-sm", it.cls].join(" ") }), /* @__PURE__ */ React.createElement("span", null, it.label))));
+}
+function DependencyPath({
+  dep,
+  rowHeight
+}) {
+  const fromY = dep.fromIndex * rowHeight + rowHeight / 2;
+  const toY = dep.toIndex * rowHeight + rowHeight / 2;
+  const horizontalGap = Math.max(2, Math.abs(dep.toPct - dep.fromPct) / 3);
+  const c1 = `${dep.fromPct + horizontalGap}% ${fromY}`;
+  const c2 = `${dep.toPct - horizontalGap}% ${toY}`;
+  const d = `M ${dep.fromPct}% ${fromY} C ${c1}, ${c2}, ${dep.toPct}% ${toY}`;
+  return /* @__PURE__ */ React.createElement("g", null, /* @__PURE__ */ React.createElement(
+    "path",
+    {
+      d,
+      fill: "none",
+      strokeWidth: "1.25",
+      className: "stroke-p-ink-3/70",
+      markerEnd: "url(#swarm-dep-arrow)"
+    }
+  ), /* @__PURE__ */ React.createElement(
+    "circle",
+    {
+      cx: `${dep.fromPct}%`,
+      cy: fromY,
+      r: "1.6",
+      className: "fill-p-ink-3"
+    }
+  ));
+}
+function pickStep(spanSec) {
+  if (spanSec <= 30) return 5;
+  if (spanSec <= 120) return 15;
+  if (spanSec <= 600) return 60;
+  if (spanSec <= 3600) return 300;
+  return 900;
+}
+function formatTick(seconds) {
+  if (seconds === 0) return "0";
+  if (seconds < 60) return `${Math.round(seconds)}s`;
+  if (seconds < 3600) return `${Math.round(seconds / 60)}m`;
+  return `${(seconds / 3600).toFixed(1)}h`;
+}
+function formatClock(ms) {
+  return new Date(ms).toLocaleTimeString(void 0, {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit"
+  });
+}
+export {
+  SwarmTimeline
+};

package/dist/task-workspace-sidebar.d.ts

@@ -0,0 +1,71 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { WorkspaceTask, WorkspaceMission, SwarmAgentRef } from './types.js';
+
+interface TaskWorkspaceSidebarLabels {
+    title: string;
+    searchPlaceholder: string;
+    collapseSidebar: string;
+    openKanban: string;
+    closeKanban: string;
+    loading: string;
+    noTasks: string;
+    orphanGroup: string;
+    draftBadge: string;
+    expand: string;
+    collapse: string;
+}
+declare const defaultTaskWorkspaceSidebarLabels: TaskWorkspaceSidebarLabels;
+interface PlanOnlyTaskShape {
+    title: string;
+    description?: string;
+    assignTo?: string;
+}
+interface RenderLinkArgs {
+    href: string;
+    className?: string;
+    children: ReactNode;
+    onClick?: () => void;
+    ariaLabel?: string;
+}
+type RenderLinkFn = (args: RenderLinkArgs) => ReactNode;
+interface TaskWorkspaceSidebarProps {
+    /** Runtime tasks — what the orchestrator has actually instantiated. */
+    tasks: WorkspaceTask[];
+    /** Missions — used to group runtime tasks and to surface plan-only
+     *  tasks from each mission's `data` blob. */
+    missions: WorkspaceMission[];
+    /** Agent refs for avatar rendering. */
+    agents?: SwarmAgentRef[];
+    /** Whether the data is still loading — controls empty/skeleton state. */
+    isLoading?: boolean;
+    /** Currently-active runtime task id (highlighted row). */
+    activeRuntimeId?: string;
+    /** Currently-active plan-only task — `{ missionId, title }`. */
+    activePlanRef?: {
+        missionId: string;
+        title: string;
+    };
+    /** Currently-active mission (highlighted group header). */
+    activeMissionId?: string;
+    /** Sidebar collapse state — typically driven by a parent shell. */
+    closed: boolean;
+    onCollapse: () => void;
+    /** Kanban toggle state — a sidebar header button flips this. */
+    kanbanView: boolean;
+    onToggleKanban: () => void;
+    /** Compute hrefs. The package doesn't decide URL conventions. */
+    runtimeTaskHref: (taskId: string) => string;
+    planTaskHref: (missionId: string, title: string) => string;
+    missionHref: (missionId: string) => string;
+    /** Render an anchor — wire to your router's `<Link>`. */
+    renderLink: RenderLinkFn;
+    /** Override the built-in mission-data parser. Default reads
+     *  `JSON.parse(data).tasks[]`. */
+    parsePlan?: (raw: string | undefined | null) => PlanOnlyTaskShape[];
+    labels?: Partial<TaskWorkspaceSidebarLabels>;
+    className?: string;
+}
+declare function TaskWorkspaceSidebar({ tasks, missions, agents, isLoading, activeRuntimeId, activePlanRef, activeMissionId, closed, onCollapse, kanbanView, onToggleKanban, runtimeTaskHref, planTaskHref, missionHref, renderLink, parsePlan, labels, className, }: TaskWorkspaceSidebarProps): react.JSX.Element;
+
+export { type PlanOnlyTaskShape, type RenderLinkArgs, type RenderLinkFn, TaskWorkspaceSidebar, type TaskWorkspaceSidebarLabels, type TaskWorkspaceSidebarProps, defaultTaskWorkspaceSidebarLabels };