@crewhaus/hangar-ui 0.5.0

package/assets/js/views/panes.js

@@ -0,0 +1,132 @@
+/**
+ * HM-179 — plugin panes, rendered.
+ *
+ * A pane is third-party markup, so it is never injected into this document.
+ * It goes into an `<iframe>` whose `sandbox` grants `allow-scripts` and
+ * NOTHING else: without `allow-same-origin` the frame has an opaque origin,
+ * so its script cannot reach this page's DOM, its sessionStorage (where the
+ * bearer token lives) or its history. The Content-Security-Policy the server
+ * computed from the plugin's own `net` allow-list rides along inside the
+ * document as a `<meta http-equiv>` line — fail-closed, so a plugin with no
+ * declared network permission gets `connect-src 'none'`.
+ *
+ * The frame is built with `srcdoc`, which is the ONE place in this console
+ * where a markup string reaches the DOM — and it is the one place where that
+ * is the safe option rather than the dangerous one: the string never becomes
+ * part of this document, only of a sandboxed one. Everything else on this
+ * screen is built with createElement like the rest of the app.
+ */
+
+import { api } from "../api.js";
+import { clear, dot, el, emptyState, skeleton } from "../dom.js";
+
+/**
+ * Assemble the sandboxed document: the plugin's own markup with the policy
+ * prepended. Pure, so the containment can be unit-tested — the assertions
+ * that matter are that the CSP is present and that the sandbox list never
+ * grows `allow-same-origin`.
+ */
+export function paneSrcdoc(doc) {
+  const csp = String(doc?.csp ?? "default-src 'none'");
+  const body = String(doc?.doc ?? "");
+  const meta = `<meta http-equiv="Content-Security-Policy" content="${csp.replace(/"/g, "&quot;")}">`;
+  return `<!doctype html><html><head><meta charset="utf-8">${meta}</head><body>${body}</body></html>`;
+}
+
+/** The sandbox token list for a pane frame. Never `allow-same-origin`. */
+export function paneSandbox(doc) {
+  const declared = String(doc?.sandbox ?? "allow-scripts");
+  const tokens = declared.split(/\s+/).filter((t) => t !== "" && t !== "allow-same-origin");
+  return tokens.length > 0 ? tokens.join(" ") : "allow-scripts";
+}
+
+export async function renderPanes(root, ctx) {
+  clear(root).appendChild(skeleton(4));
+  let payload = null;
+  try {
+    payload = await api.panes(ctx.id);
+  } catch (err) {
+    clear(root).appendChild(
+      el("div", { class: "card error-card" }, [
+        el("h2", { text: "Panes unavailable" }),
+        el("p", { class: "muted", text: err instanceof Error ? err.message : String(err) }),
+      ]),
+    );
+    return;
+  }
+  clear(root);
+  const panes = Array.isArray(payload?.panes) ? payload.panes : [];
+  const observers = Array.isArray(payload?.traceObservers) ? payload.traceObservers : [];
+
+  root.appendChild(
+    el("section", { class: "card" }, [
+      el("h3", { class: "card-title", text: "Trace observers" }),
+      observers.length === 0
+        ? emptyState(
+            "No plugin observes this harness's trace events",
+            "crewhaus plugins install <name>",
+          )
+        : el(
+            "div",
+            { class: "safety-strip" },
+            observers.map((name) => el("span", { class: "chip", text: String(name) })),
+          ),
+      el("p", {
+        class: "muted small",
+        text: "A plugin observes a harness only when its filesystem read permission covers that harness's directory — the same fail-closed evaluator the loader uses.",
+      }),
+    ]),
+  );
+
+  if (panes.length === 0) {
+    root.appendChild(
+      emptyState("No plugin pane applies to this harness", "crewhaus plugins install <name>"),
+    );
+  }
+  for (const pane of panes) {
+    root.appendChild(await paneCard(pane));
+  }
+}
+
+async function paneCard(pane) {
+  const card = el("section", { class: "card" }, [
+    el("div", { class: "rollup" }, [
+      el("h3", { class: "card-title", text: String(pane?.title ?? pane?.id ?? "pane") }),
+      el("span", { class: "chip", text: String(pane?.plugin ?? "") }),
+    ]),
+  ]);
+  let doc = null;
+  try {
+    doc = await api.pluginPane(String(pane?.plugin ?? ""), String(pane?.id ?? ""));
+  } catch (err) {
+    card.appendChild(
+      el("p", { class: "muted", text: err instanceof Error ? err.message : String(err) }),
+    );
+    return card;
+  }
+  if (doc === null) {
+    card.appendChild(emptyState("This pane's document is missing", "crewhaus plugins list"));
+    return card;
+  }
+  const frame = el("iframe", {
+    class: "pane-frame",
+    title: String(pane?.title ?? "plugin pane"),
+    sandbox: paneSandbox(doc),
+    referrerpolicy: "no-referrer",
+    loading: "lazy",
+  });
+  // `srcdoc` — see the module docblock: the string becomes the SANDBOXED
+  // document, never part of this one.
+  frame.setAttribute("srcdoc", paneSrcdoc(doc));
+  card.appendChild(frame);
+  card.appendChild(
+    el("div", { class: "muted small" }, [
+      dot("ok", "sandboxed (opaque origin)"),
+      el("code", { class: "mono", text: String(doc.csp ?? "") }),
+    ]),
+  );
+  if (doc.truncated === true) {
+    card.appendChild(dot("warn", "the pane document was capped — it is shown truncated"));
+  }
+  return card;
+}

package/assets/js/views/proc.js

@@ -0,0 +1,280 @@
+/**
+ * The process card and the Start / Stop / Restart / Drain action bar — the
+ * console's first real verbs.
+ *
+ * The whole screen is built around one idea: a refusal is information. A
+ * start that preflight blocks opens a modal listing every finding with its
+ * remediation (and offers "Start anyway" only when every finding is
+ * acknowledgeable); a spawn plan that cannot be built renders its remedy as
+ * a BUTTON; a bundle says whether its freshness verdict was hash-exact or a
+ * file-time approximation. Nothing here is a bare error toast.
+ */
+
+import { api } from "../api.js";
+import { clear, collapsible, dot, el, jsonPre, toast } from "../dom.js";
+import { hrefHarness } from "../router.js";
+import { procRow, procWriteOutcome, refusalModel } from "../supervision.js";
+import { actionTwin, cliTwin, gatedBtn, refusalModal, runAction } from "./control.js";
+
+/**
+ * Report what a Stop / Drain actually did, then reload.
+ *
+ * A 200 is not the same as a stop. The supervisor answers `not-adopted` when
+ * it held no pid while a live runfile existed — a daemon IS running, this
+ * manager just never adopted it, and nothing was signalled. Reloading
+ * silently there would paint the row from a snapshot that agrees the daemon
+ * is "stopped", which is precisely the lie this reports instead.
+ */
+function reportProcWrite(res, label, reload) {
+  const outcome = procWriteOutcome(res, label);
+  if (outcome.message !== null) toast(outcome.message, outcome.tone);
+  reload();
+}
+
+/**
+ * Start (or restart) a harness, routing the typed 409 to the refusal modal.
+ * `opts` carries `{ force, acknowledge }` on the second pass.
+ */
+export async function startProc(id, dir, opts, restart, reload) {
+  let res;
+  try {
+    res = restart ? await api.procRestart(id, opts) : await api.procStart(id, opts);
+  } catch (err) {
+    toast(`Start failed: ${err instanceof Error ? err.message : String(err)}`);
+    return;
+  }
+  if (res.ok) {
+    reload();
+    return;
+  }
+  if (res.status !== 409) {
+    toast(`Start failed: ${res.body?.message ?? `HTTP ${res.status}`}`);
+    return;
+  }
+  const model = refusalModel(res.body);
+  refusalModal(model, {
+    dir,
+    onForce: (acknowledge) => {
+      // `force` waves every FORCEABLE finding through; the id list keeps the
+      // audit trail honest about which ones an operator accepted.
+      startProc(id, dir, { force: true, acknowledge }, restart, reload);
+    },
+    onRemedy: async (kind) => {
+      try {
+        await api.submitJob(id, kind);
+        toast(`Queued ${kind} — watch it in the job queue`, "info");
+        reload();
+      } catch (err) {
+        toast(`Could not queue ${kind}: ${err instanceof Error ? err.message : String(err)}`);
+      }
+    },
+  });
+}
+
+/** Start / Stop / Restart / Drain, each disabled with its reason. */
+export function procActionBar(id, dir, row, reload) {
+  const bar = el("div", { class: "proc-actions" });
+  const twinHost = el("div", { class: "proc-twin" });
+  const showTwin = (action) => {
+    clear(twinHost).appendChild(actionTwin(action, { dir }) ?? el("span"));
+  };
+
+  const startBtn = gatedBtn(
+    "Start",
+    row.actions.start,
+    () => startProc(id, dir, {}, false, reload),
+    "btn btn-primary",
+  );
+  const stopBtn = gatedBtn("Stop", row.actions.stop, () => {
+    runAction(
+      stopBtn,
+      "Stop",
+      () => api.procStop(id),
+      (res) => reportProcWrite(res, "Stop", reload),
+    );
+  });
+  const restartBtn = gatedBtn("Restart", row.actions.restart, () =>
+    startProc(id, dir, {}, true, reload),
+  );
+  const drainBtn = gatedBtn("Drain", row.actions.drain, () => {
+    // A drain has three endings — drained, drained by SIGTERM because no
+    // control plane answered, and nothing-was-signalled — and only the first
+    // deserves silence.
+    runAction(
+      drainBtn,
+      "Drain",
+      () => api.procDrain(id),
+      (res) => reportProcWrite(res, "Drain", reload),
+    );
+  });
+
+  for (const [btn, action] of [
+    [startBtn, "start"],
+    [stopBtn, "stop"],
+    [restartBtn, "restart"],
+    [drainBtn, "drain"],
+  ]) {
+    btn.addEventListener("mouseenter", () => showTwin(action));
+    btn.addEventListener("focus", () => showTwin(action));
+    bar.appendChild(btn);
+  }
+  showTwin(row.state === "running" ? "stop" : "start");
+
+  // A plan that cannot be built has an obvious next step — offer it.
+  const planError = row.launch.error;
+  if (planError !== null && planError.action !== null) {
+    const remedy = el("button", {
+      class: "btn",
+      type: "button",
+      text: planError.action.label,
+      title: planError.action.hint,
+    });
+    if (planError.action.jobKind === null) {
+      remedy.disabled = true;
+    } else {
+      remedy.addEventListener("click", () => {
+        runAction(
+          remedy,
+          planError.action.label,
+          () => api.submitJob(id, planError.action.jobKind),
+          () => {
+            toast(`Queued ${planError.action.jobKind}`, "info");
+            reload();
+          },
+        );
+      });
+    }
+    bar.appendChild(remedy);
+  }
+
+  const reasons = el("div", { class: "proc-reasons" });
+  for (const [label, gate] of Object.entries(row.actions)) {
+    if (gate.enabled || !gate.reason) continue;
+    reasons.appendChild(el("div", { class: "muted gated-why", text: `${label}: ${gate.reason}` }));
+  }
+  return el("div", { class: "proc-bar" }, [bar, twinHost, reasons]);
+}
+
+/** The full process card: state, identity, restarts, last exit, launch plan. */
+export function procCard(payload, ctx, reload) {
+  const nowMs = Date.now();
+  const row = procRow(payload, nowMs);
+  const dir = ctx.dir ?? "";
+  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", el("span", null, [dot(row.pill.dot, row.pill.label)])),
+    row.pill.note !== "" ? kv("", el("span", { class: "muted", text: row.pill.note })) : null,
+    kv("pid", row.pid === null ? "—" : String(row.pid)),
+    kv("uptime", row.uptime),
+    kv("run", row.runId === null ? "—" : row.runId),
+    kv("run class", row.runClass || "—"),
+    kv(
+      "restarts",
+      el("span", null, [
+        el("span", { text: String(row.restartsInWindow) }),
+        row.restart !== null
+          ? el("span", { class: "chip chip-warn", text: row.restart.label })
+          : null,
+      ]),
+    ),
+    kv(
+      "control",
+      el("span", null, [
+        dot(row.control.dot, row.control.label),
+        row.control.reason !== null
+          ? el("div", { class: "muted reason", text: row.control.reason })
+          : null,
+      ]),
+    ),
+    kv(
+      "bundle",
+      el("span", null, [
+        dot(row.bundle.dot, row.bundle.label),
+        el("div", { class: "muted reason", text: row.bundle.precision }),
+        row.bundle.compiledWith !== null
+          ? el("div", { class: "muted reason", text: `compiled with ${row.bundle.compiledWith}` })
+          : null,
+      ]),
+    ),
+  ]);
+
+  const children = [facts, procActionBar(ctx.id, dir, row, reload)];
+
+  if (row.lastExit !== null) {
+    children.push(
+      el("div", { class: "exit-banner" }, [
+        dot(row.lastExit.dot, row.lastExit.title),
+        row.lastExit.classLabel !== null
+          ? el("span", { class: "chip chip-warn", text: row.lastExit.classLabel })
+          : null,
+        row.lastExit.exitCode !== null
+          ? el("span", { class: "chip", text: `exit ${row.lastExit.exitCode}` })
+          : null,
+        row.lastExit.fromLedger ? el("span", { class: "chip", text: "from the run ledger" }) : null,
+        row.lastExit.remediation !== null
+          ? el("div", { class: "muted reason", text: row.lastExit.remediation })
+          : null,
+      ]),
+    );
+  }
+  if (row.forensics !== null) {
+    const tail = Array.isArray(row.forensics.tail) ? row.forensics.tail : [];
+    children.push(
+      collapsible(
+        [el("span", { class: "muted", text: "forensics from the last failure" })],
+        [
+          row.forensics.lastRunFailed
+            ? jsonPre(row.forensics.lastRunFailed)
+            : el("pre", { class: "prose-pre", text: tail.join("\n") || "no captured tail" }),
+        ],
+      ),
+    );
+  }
+
+  // What Start would actually spawn — the plan preview, never the env (which
+  // carries the control token).
+  if (row.launch.cliTwin !== null) {
+    children.push(
+      collapsible(
+        [
+          el("span", { class: "muted", text: `launch: ${row.launch.mode ?? "?"}` }),
+          row.launch.canResume ? el("span", { class: "chip", text: "resumable" }) : null,
+          row.launch.detached ? el("span", { class: "chip", text: "detached" }) : null,
+        ],
+        [
+          cliTwin(row.launch.cliTwin),
+          row.launch.envFiles.length > 0
+            ? el("div", {
+                class: "muted reason",
+                text: `env chain: ${row.launch.envFiles.join(", ")}`,
+              })
+            : null,
+        ],
+      ),
+    );
+  } else if (row.launch.error !== null) {
+    children.push(el("p", { class: "muted", text: row.launch.error.message }));
+  }
+
+  children.push(
+    el("div", { class: "proc-links" }, [
+      el("a", { href: hrefHarness(ctx.id, "runs"), text: "run history →" }),
+      el("a", { href: hrefHarness(ctx.id, "schedulers"), text: "schedulers →" }),
+    ]),
+  );
+
+  return el("section", { class: "card ov-card ov-wide" }, [
+    el("h3", { class: "card-title" }, [
+      el("span", { text: "Process" }),
+      el("span", { class: "muted card-sub", text: row.target }),
+    ]),
+    ...children,
+  ]);
+}

package/assets/js/views/review.js

@@ -0,0 +1,164 @@
+/**
+ * The review queue — `.crewhaus/review/queue.jsonl` folded across the fleet,
+ * with the same triage ergonomics as the approvals inbox (j/k, one-key
+ * verdicts, `.` row menu, `?` bindings).
+ *
+ * THE VERDICTS DIFFER BY ITEM. An item that points at a session TURN can be
+ * ADJUDICATED — up/down take the same path `crewhaus rate --adjudicate`
+ * takes, settling the disagreement at its source so the next distill does
+ * not re-open it. An item with no turn (an eval abstention, a quarantine
+ * pointer) can only record pass/fail on the item itself, so the thumbs are
+ * not offered there: the server would 409, and a button that always fails is
+ * worse than one that is not there.
+ */
+
+import { api } from "../api.js";
+import { clear, dot, el, emptyState, jsonPre, skeleton, toast } from "../dom.js";
+import { hrefHarness } from "../router.js";
+import { REVIEW_KEYS, reviewRow } from "../supervision.js";
+import { actionTwin } from "./control.js";
+import { mountTriage } from "./inbox.js";
+
+export async function renderReview(root) {
+  clear(root).appendChild(skeleton(6));
+  await draw(root, false);
+}
+
+async function draw(host, showResolved) {
+  let payload;
+  try {
+    payload = await api.review(showResolved);
+  } catch (err) {
+    clear(host).appendChild(
+      el("div", { class: "card error-card" }, [
+        el("p", { class: "muted", text: err instanceof Error ? err.message : String(err) }),
+      ]),
+    );
+    return;
+  }
+  clear(host);
+  const nowMs = Date.now();
+  const rows = (payload && Array.isArray(payload.items) ? payload.items : []).map((r) =>
+    reviewRow(r, nowMs),
+  );
+  const open = payload && typeof payload.open === "number" ? payload.open : 0;
+  const reload = () => draw(host, showResolved);
+
+  host.appendChild(
+    el("div", { class: "toolbar" }, [
+      el("span", { class: "rollup", text: `${open} open · ${rows.length} shown` }),
+      el("span", { class: "spacer" }),
+      el("button", {
+        class: `btn btn-ghost${showResolved ? " active" : ""}`,
+        type: "button",
+        text: showResolved ? "Showing resolved too" : "Show resolved",
+        onClick: () => draw(host, !showResolved),
+      }),
+    ]),
+  );
+  if (rows.length === 0) {
+    host.appendChild(
+      emptyState(
+        showResolved ? "No review items on this fleet" : "Nothing waiting for review",
+        "crewhaus review list",
+      ),
+    );
+    return;
+  }
+  mountTriage(host, rows, {
+    keys: REVIEW_KEYS,
+    reload,
+    render: reviewCard,
+    perform: adjudicate,
+  });
+}
+
+async function adjudicate(row, verdict, reload) {
+  if (!row.verdicts.includes(verdict)) {
+    toast(`${verdict} does not apply here — ${row.verdictNote}`, "info");
+    return;
+  }
+  let result;
+  try {
+    result = await api.adjudicateReview(row.harnessId, row.id, verdict);
+  } catch (err) {
+    toast(`Verdict failed: ${err instanceof Error ? err.message : String(err)}`);
+    return;
+  }
+  toast(
+    result && result.adjudicated === true
+      ? `Adjudicated the rated turn (${verdict})`
+      : `Recorded ${verdict} on the item`,
+    "info",
+  );
+  reload();
+}
+
+function reviewCard(row, index, state, redraw, reload) {
+  const selected = state.index === index;
+  const verdictBtn = (verdict) => {
+    const btn = el("button", {
+      class: `btn${verdict === "up" || verdict === "pass" ? " btn-primary" : ""}`,
+      type: "button",
+      text: verdict,
+      title: row.open ? `record ${verdict}` : `already ${row.status}`,
+    });
+    if (!row.open) btn.disabled = true;
+    else btn.addEventListener("click", () => adjudicate(row, verdict, reload));
+    return btn;
+  };
+  return el(
+    "section",
+    {
+      class: `card inbox-card${selected ? " selected" : ""}`,
+      "aria-current": selected ? "true" : null,
+      onClick: () => {
+        if (!selected) redraw({ ...state, index });
+      },
+    },
+    [
+      el("div", { class: "inbox-head" }, [
+        dot(row.dot, row.status),
+        el("span", { class: "chip", text: row.kind }),
+        el("a", { class: "name-link", href: hrefHarness(row.harnessId), text: row.specName }),
+        row.adjudicable
+          ? el("span", { class: "chip chip-group", text: "adjudicable" })
+          : el("span", { class: "chip", text: "item verdict only" }),
+        el("span", { class: "muted", text: row.age }),
+      ]),
+      row.context !== "" ? el("pre", { class: "prose-pre", text: row.context }) : null,
+      row.sessionId !== null
+        ? el("div", { class: "muted reason" }, [
+            el("span", { text: "turn " }),
+            el("span", { class: "mono", text: String(row.turn ?? "?") }),
+            el("span", { text: " of " }),
+            el("a", {
+              class: "mono",
+              href: hrefHarness(row.harnessId, "sessions", row.sessionId),
+              text: row.sessionId,
+            }),
+          ])
+        : null,
+      el("div", { class: "muted reason", text: row.verdictNote }),
+      el("div", { class: "inbox-actions" }, row.verdicts.map(verdictBtn)),
+      el("div", { class: "inbox-twins" }, [
+        row.adjudicable
+          ? actionTwin("adjudicate", {
+              sessionId: row.sessionId,
+              turn: row.turn ?? 0,
+              verdict: "up",
+            })
+          : null,
+        actionTwin("review", { id: row.id }),
+      ]),
+      Object.keys(row.sourceRef).length > 0
+        ? el("details", { class: "fold" }, [
+            el("summary", { class: "fold-summary" }, [
+              el("span", { class: "muted", text: "source reference" }),
+            ]),
+            el("div", { class: "fold-body" }, [jsonPre(row.sourceRef)]),
+          ])
+        : null,
+    ],
+  );
+}