@crewhaus/hangar-ui 0.5.0

package/assets/js/views/runtime.js

@@ -0,0 +1,450 @@
+/**
+ * Dev & MCP — the two remaining supervised run classes: the `serve --mcp` /
+ * `expose:` projection, and the `crewhaus dev` watch-recompile-relaunch
+ * loop.
+ *
+ * Both are PROCESSES, not panels: they go through the manager's own process
+ * layer and get a row in the harness's run ledger, so the next manager boot
+ * still sees them in history. Their live output is the EXISTING run console —
+ * these screens hand off a `runId` to `#/h/<id>/runs/<runId>` rather than
+ * opening a second stream.
+ *
+ * The reason dev mode is driven from here at all: `crewhaus dev` normally
+ * compiles into a temp directory and runs with that as the cwd, so sessions,
+ * memory and feedback land somewhere that disappears. The manager owns the
+ * spawn and sets the cwd to the harness dir, which keeps state in the
+ * harness's own `.crewhaus/` across every recompile. The card says which
+ * state roots are actually anchored rather than claiming a blanket fix.
+ *
+ * THREE PROJECTION ANSWERS, NEVER CONFLATED. A `cli` shape projects through a
+ * separate `crewhaus serve --mcp` process the manager can start; a
+ * channel/managed daemon self-exposes from its own compiled bundle, so the
+ * honest control there is the daemon's Start, not a second one; every other
+ * shape does not project at all. A Start button on the second or third case
+ * would be a dead button, so it is not offered — the reason is.
+ */
+
+import { api } from "../api.js";
+import { asOf, clear, collapsible, dot, el, emptyState, skeleton, toast } from "../dom.js";
+import { hrefHarness } from "../router.js";
+import { fmtRelativeTime } from "../util.js";
+import { cliTwin, gatedBtn, runAction } from "./control.js";
+
+export async function renderRuntime(root, ctx) {
+  clear(root).appendChild(skeleton(6));
+  const [mcp, dev] = await Promise.all([api.mcpServers({ id: ctx.id }), api.dev({ id: ctx.id })]);
+  clear(root);
+  const reload = () => renderRuntime(root, ctx);
+  root.appendChild(mcpCard(ctx, mcp, reload));
+  root.appendChild(devCard(ctx, dev, reload));
+}
+
+function errorCard(title, res) {
+  const message =
+    typeof res?.body?.error === "string" ? res.body.error : `HTTP ${res ? res.status : "?"}`;
+  return el("section", { class: "card error-card" }, [
+    el("h3", { class: "card-title" }, [dot("bad", title)]),
+    el("p", { class: "muted", text: message }),
+  ]);
+}
+
+/** A write whose REFUSAL is a payload: `{ok:false, code, reason}`. Reporting
+ *  it is the whole point — a refusal is information, not an error toast. */
+function reportWrite(res, label, reload) {
+  if (!res) return;
+  if (!res.ok) {
+    toast(`${label} failed: ${res.body?.error ?? `HTTP ${res.status}`}`);
+    return;
+  }
+  const body = res.body ?? {};
+  if (body.ok === false) {
+    toast(String(body.reason ?? `${label} was refused`));
+  } else if (body.started === true) {
+    toast(`${label}: started — watch it in the run console`, "info");
+  } else if (body.stopped === false) {
+    // "Nothing was signalled" must never read as "stopped".
+    toast(String(body.message ?? `${label} signalled nothing`));
+  } else if (body.stopped === true) {
+    toast(String(body.message ?? `${label}: stopped`), "info");
+  }
+  void reload();
+}
+
+/** The runs table both cards share; each row links into the ONE run feed. */
+function runsTable(ctx, runs) {
+  const nowMs = Date.now();
+  const tbody = el("tbody");
+  for (const run of runs) {
+    const runId = typeof run.runId === "string" ? run.runId : null;
+    tbody.appendChild(
+      el("tr", null, [
+        el("td", null, [
+          runId === null
+            ? el("span", { class: "mono muted", text: String(run.jobId ?? "—") })
+            : el("a", {
+                class: "mono",
+                href: hrefHarness(ctx.id, "runs", runId),
+                text: runId,
+              }),
+        ]),
+        el("td", null, [stateDot(String(run.state ?? "unknown"))]),
+        el("td", { class: "mono", text: (run.argv ?? []).join(" ") }),
+        el("td", {
+          text:
+            typeof run.startedAt === "string"
+              ? fmtRelativeTime(run.startedAt, nowMs)
+              : `queued ${fmtRelativeTime(String(run.enqueuedAt ?? ""), nowMs)}`,
+        }),
+        el("td", {
+          class: "num",
+          text: typeof run.exitCode === "number" ? String(run.exitCode) : "—",
+        }),
+        el("td", { class: "muted", text: typeof run.error === "string" ? run.error : "" }),
+      ]),
+    );
+  }
+  return el("div", { class: "table-scroll" }, [
+    el("table", { class: "fleet" }, [
+      el(
+        "thead",
+        null,
+        el(
+          "tr",
+          null,
+          ["Run", "State", "Command", "When", "Exit", "Note"].map((h) => el("th", { text: h })),
+        ),
+      ),
+      tbody,
+    ]),
+  ]);
+}
+
+/** Traffic light + text, always paired. */
+function stateDot(state) {
+  if (state === "running") return dot("ok", "running");
+  if (state === "pending") return dot("warn", "queued");
+  if (state === "done") return dot("ok", "done");
+  if (state === "failed") return dot("bad", "failed");
+  if (state === "interrupted") return dot("warn", "interrupted (manager restarted)");
+  if (state === "cancelled") return dot("off", "cancelled");
+  return dot("unknown", state);
+}
+
+// ---------------------------------------------------------------------------
+// The MCP projection
+// ---------------------------------------------------------------------------
+
+function mcpCard(ctx, res, reload) {
+  if (!res.ok) return errorCard("The MCP projection could not be read", res);
+  const view = res.body ?? {};
+  const projection = String(view.projection ?? "none");
+  const running = view.running === true;
+  const health = view.health && typeof view.health === "object" ? view.health : {};
+  const supervision =
+    view.supervision && typeof view.supervision === "object" ? view.supervision : {};
+
+  const kv = (k, v) =>
+    el("div", { class: "kv" }, [
+      el("span", { class: "kv-k", text: k }),
+      typeof v === "string"
+        ? el("span", { class: "kv-v", text: v })
+        : el("span", { class: "kv-v" }, [v]),
+    ]);
+
+  const facts = el("div", { class: "proc-facts" }, [
+    kv("shape", String(view.target ?? "—")),
+    kv(
+      "projection",
+      projection === "serve"
+        ? dot("ok", "a separate `serve --mcp` process")
+        : projection === "self"
+          ? dot("unknown", "the daemon exposes itself")
+          : dot("off", "this shape does not project"),
+    ),
+    kv("state", running ? dot("ok", "running") : dot("off", "not running")),
+    kv("transport", String(view.transport ?? "—")),
+    kv("port", typeof view.port === "number" ? String(view.port) : "—"),
+    kv(
+      "listening",
+      health.checked === true
+        ? el("span", null, [
+            health.listening === true
+              ? dot("ok", "something is bound on loopback")
+              : dot("bad", "nothing is bound on that port"),
+            typeof health.at === "string" ? asOf(health.at) : null,
+          ])
+        : dot("unknown", "not probed"),
+    ),
+  ]);
+  if (typeof health.note === "string") {
+    facts.appendChild(el("p", { class: "muted reason", text: health.note }));
+  }
+
+  const actions = el("div", { class: "proc-actions" });
+  const startGate =
+    projection === "serve"
+      ? { enabled: !running, reason: running ? "a projection is already running" : null }
+      : { enabled: false, reason: String(view.projectionNote ?? "this shape does not project") };
+  const transportPick = el("select", { class: "search", "aria-label": "transport" });
+  for (const option of ["stdio", "http"]) {
+    const node = el("option", { value: option, text: option === "http" ? "HTTP + SSE" : "stdio" });
+    if (String(view.transport ?? "stdio") === option) node.selected = true;
+    transportPick.appendChild(node);
+  }
+  const startBtn = gatedBtn(
+    "Start projection",
+    startGate,
+    () => {
+      runAction(
+        startBtn,
+        "Start projection",
+        () => api.mcpServerStart({ id: ctx.id }, { transport: transportPick.value }),
+        (r) => reportWrite(r, "Start projection", reload),
+      );
+    },
+    "btn btn-primary",
+  );
+  const stopGate = {
+    enabled: running || supervision.stoppable === true,
+    reason: supervision.reason ?? "nothing to stop",
+  };
+  const stopBtn = gatedBtn("Stop", stopGate, () => {
+    runAction(
+      stopBtn,
+      "Stop",
+      () => api.mcpServerStop({ id: ctx.id }, {}),
+      (r) => reportWrite(r, "Stop", reload),
+    );
+  });
+  actions.appendChild(transportPick);
+  actions.appendChild(startBtn);
+  actions.appendChild(stopBtn);
+
+  const reasons = el("div", { class: "proc-reasons" });
+  if (!startGate.enabled && startGate.reason) {
+    reasons.appendChild(
+      el("div", { class: "muted gated-why", text: `start: ${startGate.reason}` }),
+    );
+  }
+  if (supervision.stoppable !== true && typeof supervision.reason === "string") {
+    reasons.appendChild(
+      el("div", { class: "muted gated-why", text: `stop: ${supervision.reason}` }),
+    );
+  }
+
+  const runs = Array.isArray(view.runs) ? view.runs : [];
+  const card = el("section", { class: "card ov-wide" }, [
+    el("h3", { class: "card-title" }, [
+      el("span", { text: "MCP projection" }),
+      running ? dot("ok", "running") : dot("off", "idle"),
+    ]),
+    el("p", { class: "muted", text: String(view.projectionNote ?? "") }),
+    facts,
+    el("div", { class: "proc-bar" }, [actions, reasons]),
+    cliTwin(
+      typeof view.cliTwin === "string" ? view.cliTwin : "",
+      "no crewhaus.yaml at the harness root — there is no command to run",
+    ),
+  ]);
+
+  if (runs.length === 0) {
+    card.appendChild(
+      emptyState(
+        typeof view.note === "string" && view.note !== ""
+          ? view.note
+          : "This harness has never projected an MCP server",
+        typeof view.verb === "string" ? view.verb : null,
+      ),
+    );
+  } else {
+    card.appendChild(runsTable(ctx, runs));
+  }
+  const ledger = Array.isArray(view.ledger) ? view.ledger : [];
+  if (ledger.length > 0) {
+    card.appendChild(
+      collapsible(
+        [el("span", { class: "muted", text: `run-ledger rows — ${ledger.length}` })],
+        [
+          el(
+            "div",
+            { class: "check-list" },
+            ledger.map((row) =>
+              el("div", { class: "check" }, [
+                el("span", { class: "mono", text: String(row.runId ?? "") }),
+                el("span", { class: "muted", text: (row.argv ?? []).join(" ") }),
+              ]),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+  return card;
+}
+
+// ---------------------------------------------------------------------------
+// Dev mode
+// ---------------------------------------------------------------------------
+
+function devCard(ctx, res, reload) {
+  if (!res.ok) return errorCard("Dev mode could not be read", res);
+  const view = res.body ?? {};
+  const running = view.running === true;
+  const blocked = view.blocked === true;
+  const supervision =
+    view.supervision && typeof view.supervision === "object" ? view.supervision : {};
+  const lastCompile =
+    view.lastCompile && typeof view.lastCompile === "object" ? view.lastCompile : null;
+  const roots = Array.isArray(view.stateRoots) ? view.stateRoots : [];
+
+  const kv = (k, v) =>
+    el("div", { class: "kv" }, [
+      el("span", { class: "kv-k", text: k }),
+      typeof v === "string"
+        ? el("span", { class: "kv-v", text: v })
+        : el("span", { class: "kv-v" }, [v]),
+    ]);
+
+  const facts = el("div", { class: "proc-facts" }, [
+    kv(
+      "state",
+      running ? dot("ok", `running (${String(view.mode ?? "watch")})`) : dot("off", "not running"),
+    ),
+    kv(
+      "run",
+      typeof view.runId === "string"
+        ? el("a", {
+            class: "mono",
+            href: hrefHarness(ctx.id, "runs", view.runId),
+            text: view.runId,
+          })
+        : "—",
+    ),
+    kv("watching", (Array.isArray(view.watching) ? view.watching : []).join(", ") || "—"),
+    kv("cwd", String(view.cwd ?? "—")),
+    kv(
+      "last compile",
+      lastCompile === null
+        ? dot("unknown", "nothing compiled here yet")
+        : el("span", null, [
+            lastCompile.state === "done"
+              ? dot("ok", "clean")
+              : lastCompile.state === "failed"
+                ? dot("bad", `failed (exit ${lastCompile.exitCode ?? "?"})`)
+                : dot("warn", String(lastCompile.state ?? "unknown")),
+            typeof lastCompile.at === "string" ? asOf(lastCompile.at) : null,
+          ]),
+    ),
+  ]);
+  facts.appendChild(el("p", { class: "muted reason", text: String(view.cwdNote ?? "") }));
+
+  // Which parts of the state tree the manager has actually anchored — the
+  // honest version of "dev's temp-cwd trap is fixed".
+  const rootList = el("div", { class: "check-list" });
+  for (const root of roots) {
+    rootList.appendChild(
+      el("div", { class: "check" }, [
+        root.anchored === true
+          ? dot("ok", `${String(root.name)} → ${String(root.value)}`)
+          : dot("unknown", `${String(root.name)} — not pinned (follows the child's cwd)`),
+      ]),
+    );
+  }
+
+  const checkOnly = el("input", { type: "checkbox", id: "dev-check-only" });
+  const startGate = {
+    enabled: !running && !blocked && typeof view.verb === "string",
+    reason: blocked
+      ? String(view.blockedReason ?? "a supervised daemon is running")
+      : running
+        ? "a dev loop is already running"
+        : typeof view.verb === "string"
+          ? null
+          : String(view.note ?? "there is nothing to watch"),
+  };
+  const startBtn = gatedBtn(
+    "Start dev loop",
+    startGate,
+    () => {
+      runAction(
+        startBtn,
+        "Start dev loop",
+        () => api.devStart({ id: ctx.id }, { checkOnly: checkOnly.checked }),
+        (r) => reportWrite(r, "Start dev loop", reload),
+      );
+    },
+    "btn btn-primary",
+  );
+  const stopGate = {
+    enabled: running || supervision.stoppable === true,
+    reason: supervision.reason ?? "nothing to stop",
+  };
+  const stopBtn = gatedBtn("Stop", stopGate, () => {
+    runAction(
+      stopBtn,
+      "Stop",
+      () => api.devStop({ id: ctx.id }, {}),
+      (r) => reportWrite(r, "Stop", reload),
+    );
+  });
+
+  const reasons = el("div", { class: "proc-reasons" });
+  if (!startGate.enabled && startGate.reason) {
+    reasons.appendChild(
+      el("div", { class: "muted gated-why", text: `start: ${startGate.reason}` }),
+    );
+  }
+  if (supervision.stoppable !== true && typeof supervision.reason === "string") {
+    reasons.appendChild(
+      el("div", { class: "muted gated-why", text: `stop: ${supervision.reason}` }),
+    );
+  }
+
+  const runs = Array.isArray(view.runs) ? view.runs : [];
+  const card = el("section", { class: "card ov-wide" }, [
+    el("h3", { class: "card-title" }, [
+      el("span", { text: "Dev mode" }),
+      running ? dot("ok", `watching (${String(view.mode ?? "watch")})`) : dot("off", "idle"),
+    ]),
+    facts,
+    collapsible(
+      [el("span", { class: "muted", text: "state roots the manager anchored" })],
+      [rootList],
+    ),
+    el("div", { class: "proc-bar" }, [
+      el("div", { class: "proc-actions" }, [
+        el("label", { class: "muted", for: "dev-check-only" }, [
+          checkOnly,
+          el("span", { text: " validate only (compile --check --watch)" }),
+        ]),
+        startBtn,
+        stopBtn,
+      ]),
+      reasons,
+    ]),
+    cliTwin(
+      typeof view.cliTwin === "string" ? view.cliTwin : "",
+      "no crewhaus.yaml at the harness root — there is no command to run",
+    ),
+  ]);
+
+  if (runs.length === 0) {
+    card.appendChild(
+      emptyState(
+        typeof view.note === "string" && view.note !== ""
+          ? view.note
+          : "No dev loop has run for this harness",
+        typeof view.verb === "string" ? view.verb : null,
+      ),
+    );
+  } else {
+    card.appendChild(runsTable(ctx, runs));
+  }
+  card.appendChild(
+    el("div", { class: "proc-links" }, [
+      el("a", { href: hrefHarness(ctx.id, "runs"), text: "run history →" }),
+      el("a", { href: hrefHarness(ctx.id, "overview"), text: "process card →" }),
+    ]),
+  );
+  return card;
+}

package/assets/js/views/schedulers.js

@@ -0,0 +1,133 @@
+/**
+ * Schedulers — the four-lane timeline (heartbeat, schedule, dream, janitor).
+ *
+ * THE ASYMMETRY IS THE SCREEN. A daemon's schedulers are in-process timers,
+ * so the CADENCE is declared in the spec and knowable offline, while the
+ * PHASE — last fired, next due — is knowable only inside the process that
+ * armed the timer. That is why `crewhaus.control.v1` exists, and why a lane
+ * with no reachable control plane says "cadence only" and names the reason
+ * instead of leaving a blank that reads as a gap.
+ *
+ * Two lanes can be poked (control.v1 arms them); dream and janitor are
+ * read-only rows that say why. Wake distinguishes `tick_in_flight` (a tick
+ * is running — retry) from `draining` (this daemon is going away).
+ */
+
+import { api } from "../api.js";
+import { clear, collapsible, dot, el, emptyState, jsonPre, skeleton } from "../dom.js";
+import { laneModels } from "../supervision.js";
+import { controlBtn } from "./control.js";
+import { jobButton } from "./jobs.js";
+
+export async function renderSchedulers(root, ctx) {
+  clear(root).appendChild(skeleton(5));
+  const view = await api.schedulers(ctx.id);
+  clear(root);
+  if (view === null) {
+    root.appendChild(emptyState("Nothing scheduled here yet", "crewhaus daemon start"));
+    return;
+  }
+  const reload = () => renderSchedulers(root, ctx);
+  const nowMs = Date.now();
+  const lanes = laneModels(view, nowMs);
+  const dir = ctx.dir ?? "";
+
+  root.appendChild(
+    el("div", { class: "rollup" }, [
+      view.controlReachable === true
+        ? dot("ok", "control.v1 answered — phase columns are live")
+        : dot("off", "no control plane — cadence only"),
+      view.controlReachable !== true && typeof view.controlReason === "string"
+        ? el("span", { class: "muted", text: view.controlReason })
+        : null,
+      view.draining === true ? el("span", { class: "chip chip-warn", text: "draining" }) : null,
+    ]),
+  );
+
+  if (lanes.length === 0) {
+    root.appendChild(emptyState("This spec declares no scheduler lanes", "crewhaus compile"));
+    return;
+  }
+
+  const grid = el("div", { class: "lanes" });
+  // The fleet-level reason is already on the line above; repeating it in all
+  // four lanes buries the per-lane facts under one sentence said four times.
+  const headerReason = typeof view.controlReason === "string" ? view.controlReason : null;
+  for (const lane of lanes) grid.appendChild(laneCard(lane, headerReason, ctx, dir, reload));
+  root.appendChild(grid);
+
+  if (view.counters && typeof view.counters === "object") {
+    root.appendChild(
+      collapsible(
+        [el("span", { class: "muted", text: "control.v1 counters" })],
+        [jsonPre(view.counters)],
+      ),
+    );
+  }
+}
+
+function laneCard(lane, headerReason, ctx, dir, reload) {
+  const phase = el("div", { class: "lane-phase" }, [
+    el("div", { class: "kv" }, [
+      el("span", { class: "kv-k", text: "cadence" }),
+      el("span", { class: "kv-v" }, [
+        el("span", { text: lane.cadence ?? "—" }),
+        el("span", { class: "chip", text: `from ${lane.cadenceSource}` }),
+      ]),
+    ]),
+    el("div", { class: "kv" }, [
+      el("span", { class: "kv-k", text: "last fired" }),
+      el("span", { class: "kv-v" }, [
+        el("span", { text: lane.lastFiredLabel }),
+        lane.lastOutcome !== null ? el("span", { class: "chip", text: lane.lastOutcome }) : null,
+      ]),
+    ]),
+    el("div", { class: "kv" }, [
+      el("span", { class: "kv-k", text: "next due" }),
+      el("span", { class: "kv-v" }, [
+        el("span", { text: lane.nextDueLabel }),
+        // Honest about WHY the phase is missing — never an implied gap. The
+        // fleet-level reason is on the header line, so only a LANE-specific
+        // one repeats here.
+        lane.phaseNote !== null && lane.phaseNote !== headerReason
+          ? el("div", { class: "muted reason", text: lane.phaseNote })
+          : null,
+      ]),
+    ]),
+  ]);
+
+  const actions = el("div", { class: "lane-actions" });
+  if (lane.lane === "heartbeat" || lane.lane === "schedule") {
+    actions.appendChild(
+      controlBtn(
+        "Wake",
+        { enabled: lane.pokeable, reason: lane.pokeReason },
+        () => api.controlWake(ctx.id, lane.lane, "poked from the Hangar console"),
+        { action: "wake", dir, lane: lane.lane },
+      ),
+    );
+  } else if (lane.lane === "dream") {
+    // Dream is a read-only timer row in control.v1 — the honest "run now" is
+    // the job queue, not a poke.
+    actions.appendChild(jobButton("Run now", ctx.id, "dream-run", undefined, reload));
+    if (lane.pokeReason !== null) {
+      actions.appendChild(el("div", { class: "muted gated-why", text: lane.pokeReason }));
+    }
+  } else if (lane.pokeReason !== null) {
+    actions.appendChild(el("div", { class: "muted gated-why", text: lane.pokeReason }));
+  }
+
+  const detailNode =
+    lane.detail !== null && typeof lane.detail === "object"
+      ? collapsible([el("span", { class: "muted", text: "lane detail" })], [jsonPre(lane.detail)])
+      : null;
+
+  return el("section", { class: `card lane-card${lane.armed ? "" : " lane-off"}` }, [
+    el("h3", { class: "card-title" }, [el("span", { text: lane.lane }), dot(lane.dot, lane.label)]),
+    lane.armed
+      ? phase
+      : el("p", { class: "muted", text: "the spec declares no such block — absent, not broken" }),
+    lane.armed ? actions : null,
+    lane.armed ? detailNode : null,
+  ]);
+}