@crewhaus/hangar-ui 0.5.0

package/assets/js/omnibox.js

@@ -0,0 +1,307 @@
+/**
+ * HM-189 — the ⌘K overlay.
+ *
+ * A text field, a ranked result list, and — kept visually and behaviourally
+ * separate — the ACTIONS the server proposed for the query. Navigation
+ * results are links: pressing Enter on one goes somewhere. Actions are not:
+ * an action needs a second, explicit confirm before the console calls the
+ * ordinary route, and the row shows the exact CLI command it will run first.
+ *
+ * That split is the point. An omnibox that can start a daemon on Enter is a
+ * loaded gun on the keyboard; one that can only ever propose, and shows its
+ * CLI twin while proposing, is a faster way to do the thing you were going
+ * to do anyway.
+ *
+ * The index itself lives server-side and is built lazily (nothing is
+ * indexed until the first query), so opening this overlay on a hundred-
+ * harness machine costs one request, not a scan.
+ */
+
+import { api } from "./api.js";
+import { clear, el, emptyState, toast } from "./dom.js";
+import { ROUTES } from "./routes.js";
+
+/** Debounce for keystroke → request. Short enough to feel live, long enough
+ *  that a fast typist issues one request per word, not per letter. */
+const DEBOUNCE_MS = 120;
+
+/** Kind → the short label shown in the row's leading chip. */
+const KIND_LABEL = {
+  harness: "harness",
+  group: "group",
+  tag: "tag",
+  session: "session",
+  wiki: "wiki",
+  fact: "facts",
+  dataset: "dataset",
+  grader: "grader",
+  "eval-run": "eval run",
+  incident: "incident",
+  approval: "approval",
+  action: "action",
+};
+
+/**
+ * Which api wrapper an action's `route` names. Actions only ever reference
+ * the process verbs, and this map is the allowlist that keeps it that way:
+ * a server proposing anything else finds no executor here and the row
+ * renders disabled with the reason.
+ */
+const ACTION_EXECUTORS = {
+  procStart: (id) => api.procStart(id),
+  procStop: (id) => api.procStop(id),
+  procRestart: (id) => api.procRestart(id),
+  procDrain: (id) => api.procDrain(id),
+};
+
+/**
+ * Mount the overlay. Returns `{ close }`; the caller (app.js) owns when it
+ * opens, because ⌘K ownership is decided by the `keys.js` reducer.
+ */
+export function openOmnibox(host, opts = {}) {
+  const onClose = opts.onClose ?? (() => {});
+  const backdrop = el("div", { class: "omni-backdrop", role: "presentation" });
+  const input = el("input", {
+    class: "omni-input",
+    type: "search",
+    placeholder: "Search harnesses, sessions, wiki, runs… or type “start <harness>”",
+    "aria-label": "search the fleet",
+    autocomplete: "off",
+    spellcheck: "false",
+  });
+  const listNode = el("div", { class: "omni-list", role: "listbox" });
+  const hint = el("div", { class: "omni-hint muted" }, [
+    el("span", { text: "Enter opens · actions ask first · Esc closes" }),
+  ]);
+  const panel = el(
+    "div",
+    { class: "omni-panel", role: "dialog", "aria-modal": "true", "aria-label": "omnibox" },
+    [input, listNode, hint],
+  );
+  backdrop.appendChild(panel);
+  host.appendChild(backdrop);
+
+  let rows = [];
+  let cursor = 0;
+  let seq = 0;
+  let timer = null;
+  let pendingConfirm = null;
+
+  const close = () => {
+    if (timer !== null) clearTimeout(timer);
+    backdrop.remove();
+    onClose();
+  };
+
+  backdrop.addEventListener("click", (event) => {
+    if (event.target === backdrop) close();
+  });
+
+  const draw = () => {
+    clear(listNode);
+    if (rows.length === 0) {
+      listNode.appendChild(
+        input.value.trim() === ""
+          ? el("div", { class: "empty" }, [
+              el("div", { class: "empty-msg", text: "Type to search the fleet" }),
+              el("div", {
+                class: "empty-verb muted",
+                text: "the index is built on demand — nothing is scanned until you ask",
+              }),
+            ])
+          : emptyState(`Nothing matches “${input.value.trim()}”`, "crewhaus harness list"),
+      );
+      return;
+    }
+    rows.forEach((row, i) => listNode.appendChild(rowNode(row, i)));
+  };
+
+  const rowNode = (row, index) => {
+    const selected = index === cursor;
+    const chip = el("span", { class: "omni-kind", text: KIND_LABEL[row.kind] ?? row.kind });
+    if (row.kind === "action") {
+      const confirming = pendingConfirm === row.id;
+      const node = el(
+        "div",
+        {
+          class: `omni-row omni-action${selected ? " selected" : ""}`,
+          role: "option",
+          "aria-selected": selected ? "true" : "false",
+        },
+        [
+          chip,
+          el("span", { class: "omni-title", text: row.title }),
+          el("code", { class: "omni-twin mono", text: row.cliTwin }),
+          confirming
+            ? el("span", { class: "omni-confirm" }, [
+                el("button", {
+                  class: "btn btn-danger",
+                  type: "button",
+                  text: "Run it",
+                  onClick: () => runAction(row),
+                }),
+                el("button", {
+                  class: "btn btn-ghost",
+                  type: "button",
+                  text: "Cancel",
+                  onClick: () => {
+                    pendingConfirm = null;
+                    draw();
+                  },
+                }),
+              ])
+            : el("button", {
+                class: "btn",
+                type: "button",
+                text: "Confirm…",
+                onClick: () => {
+                  pendingConfirm = row.id;
+                  draw();
+                },
+              }),
+        ],
+      );
+      return node;
+    }
+    return el(
+      "a",
+      {
+        class: `omni-row${selected ? " selected" : ""}`,
+        role: "option",
+        "aria-selected": selected ? "true" : "false",
+        href: row.href,
+        onClick: () => close(),
+      },
+      [
+        chip,
+        el("span", { class: "omni-title", text: row.title }),
+        el("span", { class: "omni-sub muted", text: row.subtitle }),
+      ],
+    );
+  };
+
+  const runAction = async (row) => {
+    const executor = ACTION_EXECUTORS[row.route];
+    if (executor === undefined) {
+      toast(`This build cannot run “${row.route}” from the omnibox`, "error");
+      return;
+    }
+    pendingConfirm = null;
+    try {
+      const res = await executor(row.params?.id);
+      // The process routes answer a typed refusal as a BODY; surface it.
+      if (res && res.ok === false) {
+        toast(String(res.body?.message ?? res.body?.reason ?? "refused"), "error");
+      } else {
+        toast(`${row.title} — sent`, "info");
+      }
+    } catch (err) {
+      toast(err instanceof Error ? err.message : String(err), "error");
+    }
+    close();
+  };
+
+  const search = async () => {
+    const query = input.value.trim();
+    const mine = ++seq;
+    if (query === "") {
+      rows = [];
+      draw();
+      return;
+    }
+    let payload = null;
+    try {
+      payload = await api.search(query);
+    } catch (err) {
+      if (mine !== seq) return;
+      rows = [];
+      clear(listNode).appendChild(
+        emptyState(
+          `Search failed: ${err instanceof Error ? err.message : String(err)}`,
+          "crewhaus harness list",
+        ),
+      );
+      return;
+    }
+    if (mine !== seq) return; // a newer keystroke already answered
+    rows = omniRows(payload);
+    cursor = 0;
+    pendingConfirm = null;
+    draw();
+  };
+
+  input.addEventListener("input", () => {
+    if (timer !== null) clearTimeout(timer);
+    timer = setTimeout(search, DEBOUNCE_MS);
+  });
+
+  input.addEventListener("keydown", (event) => {
+    if (event.key === "ArrowDown" || (event.key === "n" && event.ctrlKey)) {
+      event.preventDefault();
+      cursor = rows.length === 0 ? 0 : Math.min(cursor + 1, rows.length - 1);
+      draw();
+      return;
+    }
+    if (event.key === "ArrowUp" || (event.key === "p" && event.ctrlKey)) {
+      event.preventDefault();
+      cursor = Math.max(cursor - 1, 0);
+      draw();
+      return;
+    }
+    if (event.key === "Enter") {
+      const row = rows[cursor];
+      if (row === undefined) return;
+      event.preventDefault();
+      // Enter NEVER runs an action: it asks. Navigation rows go.
+      if (row.kind === "action") {
+        pendingConfirm = row.id;
+        draw();
+        return;
+      }
+      window.location.hash = row.href.startsWith("#") ? row.href.slice(1) : row.href;
+      close();
+    }
+  });
+
+  input.focus();
+  draw();
+  return { close };
+}
+
+/**
+ * The server payload → the overlay's row list: navigation entries first,
+ * then actions. Pure, and exported so the ordering and the shape can be
+ * tested without a DOM.
+ */
+export function omniRows(payload) {
+  const body = payload && typeof payload === "object" ? payload : {};
+  const entries = Array.isArray(body.entries) ? body.entries : [];
+  const actions = Array.isArray(body.actions) ? body.actions : [];
+  return [
+    ...entries.map((e) => ({
+      kind: typeof e.kind === "string" ? e.kind : "harness",
+      id: String(e.id ?? ""),
+      title: String(e.title ?? ""),
+      subtitle: String(e.subtitle ?? ""),
+      href: typeof e.href === "string" ? e.href : "#/",
+    })),
+    ...actions.map((a) => ({
+      kind: "action",
+      id: String(a.id ?? ""),
+      title: String(a.label ?? ""),
+      subtitle: "",
+      href: "#/",
+      route: String(a.route ?? ""),
+      params: a.params && typeof a.params === "object" ? a.params : {},
+      cliTwin: String(a.cliTwin ?? ""),
+      // Never trusted from the payload: an action is confirmed here, always.
+      confirm: true,
+    })),
+  ];
+}
+
+/** True when this build can execute the named action route. Exported so the
+ *  row can render disabled-with-reason rather than failing on click. */
+export function canRunAction(route) {
+  return Object.hasOwn(ACTION_EXECUTORS, String(route)) && Object.hasOwn(ROUTES, String(route));
+}

package/assets/js/router.js

@@ -0,0 +1,280 @@
+/**
+ * Hash router. `parseRoute` is pure (unit-tested under bun); `startRouter`
+ * is the only function that touches `window`, so importing this module
+ * outside a browser is safe.
+ *
+ * Route map (every screen deep-linkable):
+ *   #/                                  → Library
+ *   #/runs                              → Runs & daemons (fleet supervision)
+ *   #/approvals                         → the approvals inbox
+ *   #/review                            → the review queue
+ *   #/activity                          → the activity digest
+ *   #/h/<id>                            → harness detail, Overview tab
+ *   #/h/<id>/spec                       → Spec
+ *   #/h/<id>/runs                       → this harness's run ledger
+ *   #/h/<id>/runs/<runId>               → one run's console (live SSE feed)
+ *   #/h/<id>/schedulers                 → the four-lane timeline
+ *   #/h/<id>/sessions                   → Sessions list
+ *   #/h/<id>/sessions/<sess>            → one transcript
+ *   #/h/<id>/evals                      → eval run history
+ *   #/h/<id>/evals/<runId>              → one run
+ *   #/h/<id>/evals/<runId>/<sampleId>   → one sample
+ *   #/h/<id>/memory                     → memory fabric
+ *   #/h/<id>/memory/wiki/<slug>         → wiki article reader
+ *   #/h/<id>/costs                      → costs
+ *   #/h/<id>/deploy                     → deployment records
+ *
+ * M3 adds the detail tabs and two more fleet screens:
+ *   #/health                            → the fleet health board (M4)
+ *   #/settings                          → notification rules, read-only, plugins (M4)
+ *   #/h/<id>/panes                      → sandboxed plugin panes (M4)
+ *   #/credentials                       → the fleet credential matrix
+ *   #/thredz                            → the global Thredz explorer
+ *   #/feedback                          → the fleet feedback rollup
+ *   #/h/<id>/{data,feedback,creds,channels,security,thredz,inspect,dev}
+ * Each M3 tab accepts trailing segments, captured verbatim as `rest` — the
+ * sub-screens inside them (a dataset, a store, a Thredz article) are the
+ * area implementer's to name, and the router should not have to be edited
+ * again for each one.
+ */
+
+export const HARNESS_TABS = [
+  "overview",
+  "spec",
+  "runs",
+  "schedulers",
+  "sessions",
+  "evals",
+  "memory",
+  "data",
+  "feedback",
+  "costs",
+  "creds",
+  "channels",
+  "security",
+  "thredz",
+  "deploy",
+  "inspect",
+  "dev",
+  // M4 (HM-179): the sandboxed plugin panes this harness shows. Always on
+  // the strip — a harness with no applicable pane renders the honest empty
+  // state naming the install verb, which is more useful than a tab that
+  // appears only once a plugin exists.
+  "panes",
+];
+
+/** The M3 tabs, whose trailing segments are captured generically as `rest`.
+ *  Shape gating (which tabs a given target shows) is applied where the tab
+ *  strip is drawn, through {@link tabAvailability} below — never here: a deep
+ *  link to an off-matrix tab must still RESOLVE, because the honest empty
+ *  state that tab renders is a real answer and a shared URL must not 404. */
+export const M3_TABS = [
+  "data",
+  "feedback",
+  "creds",
+  "channels",
+  "security",
+  "thredz",
+  "inspect",
+  "dev",
+];
+
+/** The global (fleet-wide) screens, in nav order. `#/` is the Library. */
+export const GLOBAL_VIEWS = [
+  "runs",
+  "approvals",
+  "review",
+  "activity",
+  "credentials",
+  "feedback",
+  "thredz",
+  // M4: the fleet health board (HM-11) and Settings (HM-198's console half:
+  // notification rules, read-only mode, the plugin inventory).
+  "health",
+  "settings",
+];
+
+/**
+ * The compile targets, in the order the plan's shape × panel matrix lists
+ * them. This is the strict union `@crewhaus/spec` validates against; a
+ * target that is NOT in this list is unknown to this build, and an unknown
+ * shape is gated at nothing — hiding a panel from a shape the console has
+ * never heard of would be a guess wearing the clothes of a rule.
+ */
+export const SHAPE_TARGETS = [
+  "cli",
+  "workflow",
+  "channel",
+  "graph",
+  "managed",
+  "pipeline",
+  "crew",
+  "research",
+  "batch",
+  "voice",
+  "browser",
+  "eval",
+  "onchain",
+  "onchain-game",
+];
+
+/**
+ * The shape × panel matrix, as data.
+ *
+ * Every target gets the universal set — Overview, Spec, Runs, Sessions,
+ * Evals, Datasets, Costs, Credentials, Security, Deployments, Inspect and
+ * Dev & MCP — because each of those reads something every harness has (a
+ * directory, a spec, a session store, a ledger). The five tabs below are
+ * per-shape ADDITIONS, and the rule for each is the same one the spec
+ * schema already enforces: **a tab is on the matrix for a target when that
+ * target's schema admits at least one of the blocks the tab configures.**
+ *
+ * That rule is deliberately narrower than "the store might hold something":
+ * a tab whose subject the target cannot declare has nothing to configure
+ * and nothing to wire, so linking to it buys the operator a screen whose
+ * only content is the sentence "not applicable". It is also deliberately
+ * NOT a hard gate — `parseRoute` still resolves the deep link and the
+ * screen still answers, so nothing an operator saved is unreachable.
+ */
+export const SHAPE_GATED_TABS = {
+  channels: {
+    // `channels:`, `routing:` and `gateway:` are channel-only in the union.
+    shapes: ["channel"],
+    why: "a channels: block (with its routing and gateway) is only valid in a channel spec",
+  },
+  schedulers: {
+    // heartbeat: channel · schedule: channel/managed/batch · memory.dream:
+    // every shape with a memory block · janitor: the daemon shapes.
+    shapes: ["cli", "channel", "managed", "crew", "research", "batch", "voice"],
+    why: "no lane can arm here — this target's schema admits no heartbeat:, schedule: or memory.dream: block, and its bundle runs no janitor",
+  },
+  memory: {
+    // memory:/knowledge:/learning:/watchme:, or continuity: on its own.
+    shapes: [
+      "cli",
+      "workflow",
+      "channel",
+      "managed",
+      "crew",
+      "research",
+      "batch",
+      "voice",
+      "browser",
+    ],
+    why: "this target's schema admits neither a memory: nor a continuity: block, so there is no fabric to read",
+  },
+  feedback: {
+    shapes: ["cli", "channel", "managed"],
+    why: "this target's schema admits no feedback: block, so the ratings loop — reactions, distill sinks, advice — is not wired here",
+  },
+  thredz: {
+    shapes: ["cli", "channel", "managed", "crew", "research"],
+    why: "this target's schema admits no thredz: block, so there is no workspace for the manager to proxy",
+  },
+};
+
+/**
+ * Which tabs this target shows, in strip order.
+ *
+ * Returns one row per {@link HARNESS_TABS} entry: `{ tab, on, reason }`.
+ * `on:false` rows carry the sentence the strip renders instead of a link —
+ * a disabled tab that says why is information; a live link into an empty
+ * screen is a maze.
+ */
+export function tabAvailability(target) {
+  const shape = typeof target === "string" ? target : "";
+  const known = SHAPE_TARGETS.includes(shape);
+  return HARNESS_TABS.map((tab) => {
+    const gate = Object.hasOwn(SHAPE_GATED_TABS, tab) ? SHAPE_GATED_TABS[tab] : null;
+    if (gate === null || !known || gate.shapes.includes(shape)) {
+      return { tab, on: true, reason: null };
+    }
+    return { tab, on: false, reason: `${gate.why} — this harness's target is ${shape}` };
+  });
+}
+
+function safeDecode(part) {
+  try {
+    return decodeURIComponent(part);
+  } catch {
+    return part;
+  }
+}
+
+/** Parse a location.hash string into a route object. Never throws. */
+export function parseRoute(hash) {
+  const raw = typeof hash === "string" ? hash : "";
+  const h = raw.startsWith("#") ? raw.slice(1) : raw;
+  if (h === "" || h === "/") return { view: "library" };
+  const parts = h
+    .split("/")
+    .filter((p) => p !== "")
+    .map(safeDecode);
+  // Fleet-wide screens live at the root, harness screens under /h/<id>.
+  if (parts[0] !== "h") {
+    if (parts.length === 1 && GLOBAL_VIEWS.includes(parts[0])) return { view: parts[0] };
+    return { view: "notfound", hash: raw };
+  }
+  if (parts.length < 2) return { view: "notfound", hash: raw };
+  const id = parts[1];
+  const tab = parts[2] ?? "overview";
+  const rest = parts.slice(3);
+  switch (tab) {
+    case "overview":
+    case "spec":
+    case "costs":
+    case "schedulers":
+    case "deploy":
+    case "panes":
+      return { view: "harness", id, tab };
+    case "sessions":
+      return rest[0] !== undefined
+        ? { view: "harness", id, tab, sessionId: rest[0] }
+        : { view: "harness", id, tab };
+    case "runs":
+      return rest[0] !== undefined
+        ? { view: "harness", id, tab, runId: rest[0] }
+        : { view: "harness", id, tab };
+    case "evals": {
+      const route = { view: "harness", id, tab };
+      if (rest[0] !== undefined) route.runId = rest[0];
+      if (rest[1] !== undefined) route.sampleId = rest[1];
+      return route;
+    }
+    case "memory":
+      return rest[0] === "wiki" && rest[1] !== undefined
+        ? { view: "harness", id, tab, wikiSlug: rest[1] }
+        : { view: "harness", id, tab };
+    default:
+      // The M3 tabs take their trailing segments generically, so adding a
+      // sub-screen inside one is a view change, not a router change.
+      if (M3_TABS.includes(tab)) {
+        return rest.length > 0 ? { view: "harness", id, tab, rest } : { view: "harness", id, tab };
+      }
+      return { view: "notfound", hash: raw };
+  }
+}
+
+/** Build a deep link for a harness tab (+ optional trailing segments). */
+export function hrefHarness(id, tab = "overview", ...rest) {
+  const segs = [`#/h/${encodeURIComponent(id)}`];
+  if (tab !== "overview" || rest.length > 0) segs.push(tab);
+  for (const part of rest) segs.push(encodeURIComponent(String(part)));
+  return segs.join("/");
+}
+
+/** The Library link. */
+export function hrefLibrary() {
+  return "#/";
+}
+
+/** A fleet-wide screen's link (`#/runs`, `#/approvals`, …). */
+export function hrefGlobal(view) {
+  return `#/${view}`;
+}
+
+/** Wire hashchange → handler and fire once for the current hash. */
+export function startRouter(onChange) {
+  window.addEventListener("hashchange", () => onChange(parseRoute(window.location.hash)));
+  onChange(parseRoute(window.location.hash));
+}