@crewhaus/hangar-ui 0.5.8 → 0.7.0

package/assets/hangar.css

@@ -786,6 +786,36 @@ table.fleet {
   font-size: 10.5px;
 }
 
+/* 0.6.0 — the Models tab's share meter and its chip row. A share is always
+   rendered NEXT TO its number, never instead of one: the bar is the shape of
+   the split, the figure is the claim. */
+.meter {
+  min-width: 72px;
+  height: 8px;
+  border-radius: 999px;
+  background: var(--panel-2);
+  border: 1px solid var(--rule-2);
+  overflow: hidden;
+}
+.meter-fill {
+  height: 100%;
+  background: var(--accent);
+  opacity: 0.85;
+}
+.chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2px;
+  margin-bottom: 8px;
+}
+.chips .chip {
+  cursor: pointer;
+  font-family: var(--mono);
+}
+tr.row-best td {
+  background: var(--accent-ghost);
+}
+
 /* preflight + folds */
 .fold {
   border: 1px solid var(--rule);

package/assets/js/app.js

@@ -52,6 +52,7 @@ import { renderInspect } from "./views/inspect.js";
 import { renderLibrary } from "./views/library.js";
 import { renderMemoryFabric } from "./views/memory-fabric.js";
 import { renderMemory } from "./views/memory.js";
+import { renderModels } from "./views/models.js";
 import { renderOverview } from "./views/overview.js";
 import { renderPanes } from "./views/panes.js";
 import { renderReview } from "./views/review.js";
@@ -79,6 +80,7 @@ const TAB_LABELS = {
   data: "Datasets",
   feedback: "Feedback",
   costs: "Costs",
+  models: "Models",
   creds: "Credentials",
   channels: "Channels",
   security: "Security",
@@ -441,6 +443,7 @@ async function renderHarnessPage(root, route) {
   } else if (route.tab === "data") await renderData(tabRoot, ctx);
   else if (route.tab === "feedback") await renderFeedback(tabRoot, ctx);
   else if (route.tab === "costs") await renderCosts(tabRoot, ctx);
+  else if (route.tab === "models") await renderModels(tabRoot, ctx);
   else if (route.tab === "creds") await renderCreds(tabRoot, ctx);
   else if (route.tab === "channels") await renderChannels(tabRoot, ctx);
   else if (route.tab === "security") await renderSecurity(tabRoot, ctx);

package/assets/js/dom.js

@@ -142,21 +142,64 @@ export function toast(message, kind = "error") {
   return node;
 }
 
-/** Click-to-copy button (clipboard API; silently no-ops when unavailable). */
-export function copyBtn(value, label = "copy") {
-  const btn = el("button", { class: "btn btn-ghost btn-copy", type: "button", text: label });
-  btn.addEventListener("click", async () => {
+/**
+ * Copy `text`, falling back to the old selection trick.
+ *
+ * `navigator.clipboard` is a secure-context API. `127.0.0.1` counts as
+ * secure, so on the loopback console it always works — and over
+ * `http://192.168.x.x`, which is what `crewhaus hangar --lan` serves, the
+ * whole object is `undefined` and every copy button in the console reads
+ * "copy failed". That is invisible until someone opens the console from a
+ * phone, which is exactly who cannot retype a harness directory by hand.
+ *
+ * The fallback is `document.execCommand("copy")` over a throwaway textarea:
+ * deprecated, still implemented everywhere, and not gated on a secure
+ * context. The textarea is positioned off-screen rather than hidden because
+ * a `display: none` element cannot hold a selection.
+ */
+async function writeClipboard(text) {
+  if (navigator.clipboard !== undefined) {
     try {
-      await navigator.clipboard.writeText(value);
-      btn.textContent = "copied";
-      btn.classList.add("ok");
-      setTimeout(() => {
-        btn.textContent = label;
-        btn.classList.remove("ok");
-      }, 1200);
+      await navigator.clipboard.writeText(text);
+      return true;
     } catch {
-      btn.textContent = "copy failed";
+      // Permission refused, or a non-secure context that still exposes the
+      // object. Fall through rather than giving up.
     }
+  }
+  const scratch = el("textarea");
+  scratch.value = text;
+  scratch.setAttribute("readonly", "readonly");
+  scratch.setAttribute("aria-hidden", "true");
+  // Off-screen rather than hidden: a `display: none` element cannot hold a
+  // selection, and `opacity: 0` alone would still scroll the page.
+  scratch.style.position = "fixed";
+  scratch.style.top = "-1000px";
+  scratch.style.opacity = "0";
+  document.body.appendChild(scratch);
+  try {
+    scratch.select();
+    scratch.setSelectionRange(0, text.length);
+    return document.execCommand("copy");
+  } catch {
+    return false;
+  } finally {
+    scratch.remove();
+  }
+}
+
+/** Click-to-copy button. Works on the loopback console and over a LAN
+ *  address alike — see {@link writeClipboard}. */
+export function copyBtn(value, label = "copy") {
+  const btn = el("button", { class: "btn btn-ghost btn-copy", type: "button", text: label });
+  btn.addEventListener("click", async () => {
+    const copied = await writeClipboard(value);
+    btn.textContent = copied ? "copied" : "copy failed";
+    if (copied) btn.classList.add("ok");
+    setTimeout(() => {
+      btn.textContent = label;
+      btn.classList.remove("ok");
+    }, 1200);
   });
   return btn;
 }

package/assets/js/router.js

@@ -52,6 +52,9 @@ export const HARNESS_TABS = [
   "data",
   "feedback",
   "costs",
+  // 0.6.0 (design §8.3): the models tab sits after Costs because it answers
+  // the question Costs raises — WHICH model, under which settings, spent it.
+  "models",
   "creds",
   "channels",
   "security",
@@ -73,6 +76,10 @@ export const HARNESS_TABS = [
  *  state that tab renders is a real answer and a shared URL must not 404. */
 export const M3_TABS = [
   "data",
+  // 0.6.0: `models` takes trailing segments generically too — a route
+  // timeline is `#/h/<id>/models/routes/<sess>`, and naming that sub-screen
+  // is the view's business, not the router's.
+  "models",
   "feedback",
   "creds",
   "channels",

package/assets/js/routes.js

@@ -783,7 +783,7 @@ export const ROUTES = {
   advisorReportRun: {
     method: "POST",
     path: "/api/h/:id/advisor/reports",
-    body: "AdvisorReportRun", // {kind: model-usage|costs|usefulness|optimization}
+    body: "AdvisorReportRun", // {kind: model-usage|costs|usefulness|optimization|routing|hybrid}
     group: "advisor",
   },
   advisorReport: {
@@ -803,6 +803,19 @@ export const ROUTES = {
   },
   advisorFleet: { method: "GET", path: "/api/advisor", group: "advisor" },
 
+  // ---- group "models": per-model settings, hybrid routing, the scoreboard -
+  // 0.6.0 (design §8.3). READ-ONLY, all four: the console renders the
+  // `models:` registry, the declared pool, per-role/per-profile spend, the
+  // learned arms and their leaderboard, and one run's route timeline — and
+  // it writes none of them. Hangar never touches an arm or a prior; the
+  // roster, the rules and the floor stay human-owned behind `propose`.
+  models: { method: "GET", path: "/api/h/:id/models", group: "models" },
+  // The route timeline for ONE session, read from the session JSONL (§8.1:
+  // Hangar reads the durable log, never the bus).
+  modelRoutes: { method: "GET", path: "/api/h/:id/models/routes/:sess", group: "models" },
+  modelArms: { method: "GET", path: "/api/h/:id/models/arms", group: "models" },
+  modelLeaderboard: { method: "GET", path: "/api/h/:id/models/leaderboard", group: "models" },
+
   // ---- group "runtime": the mcp-server + dev run classes -----------------
   // Both are PROCESSES: they get runfiles, ledger rows and ledger-claimed
   // ports, and their live output rides the ONE existing SSE feed
@@ -841,6 +854,7 @@ export const M3_GROUPS = [
   "inspect",
   "runtime",
   "advisor",
+  "models",
 ];
 
 /** Every route key belonging to `group`, in map order. The views render

package/assets/js/supervision.js

@@ -700,6 +700,15 @@ function shortJson(value, max = 120) {
   return text.length <= max ? text : `${text.slice(0, max - 1)}…`;
 }
 
+/** `model` first, then the optional facets, then the router's reason — joined with dots. */
+function routeDetail(e, parts) {
+  const head = parts
+    .filter((part) => part !== null && part !== undefined && part !== "")
+    .map(String);
+  const reason = typeof e.reason === "string" && e.reason !== "" ? e.reason : null;
+  return [...head, ...(reason ? [reason] : [])].join(" · ");
+}
+
 /**
  * One TraceEvent → its feed card. Known kinds get a written line; unknown
  * kinds still render (tolerant-reader contract) with a clipped payload
@@ -763,8 +772,68 @@ export function traceCard(event) {
         remediation: typeof e.remediation === "string" ? e.remediation : null,
       };
     case "model_route":
+      // 0.6.0 (design §8.3) — the event carries `model` (wire id) and
+      // `routeKey`, never `modelId`/`band`; the 0.5.x card read the latter
+      // and rendered an empty detail. Profile, policy and reason follow when
+      // present so a hybrid decision reads as a sentence.
+      return {
+        ...base,
+        title: `model route${e.stage ? ` · ${String(e.stage)}` : ""}`,
+        detail: routeDetail(e, [
+          e.model,
+          e.profile ? `profile=${String(e.profile)}` : null,
+          e.routeKey ? `band=${String(e.routeKey)}` : null,
+          e.policy
+            ? `policy=${String(e.policy)}${e.explored === true ? " (exploring)" : ""}`
+            : null,
+          e.ruleId ? `rule=${String(e.ruleId)}` : null,
+        ]),
+      };
     case "model_tier_route":
-      return { ...base, title: "model route", detail: String(e.modelId ?? e.band ?? "") };
+      return {
+        ...base,
+        title: "model tier",
+        detail: routeDetail(e, [
+          e.model,
+          e.tier ? `tier=${String(e.tier)}${e.escalated === true ? " (escalated)" : ""}` : null,
+        ]),
+      };
+    case "model_failover":
+      return {
+        ...base,
+        title: "model failover",
+        detail: `${String(e.from ?? "?")} → ${String(e.to ?? "?")}${
+          e.reason ? ` · ${String(e.reason)}` : ""
+        }`,
+      };
+    case "model_stage":
+      return {
+        ...base,
+        dot: e.outcome === "failed" ? "warn" : base.dot,
+        title: `stage ${String(e.stage ?? "?")} ${String(e.outcome ?? "")}`.trim(),
+        detail: [
+          e.model ? String(e.model) : null,
+          e.profile ? `profile=${String(e.profile)}` : null,
+          e.role ? `role=${String(e.role)}` : null,
+          e.strategy ? `strategy=${String(e.strategy)}` : null,
+          e.cause ? `cause=${String(e.cause)}` : null,
+        ]
+          .filter((part) => part !== null)
+          .join(" · "),
+      };
+    case "model_directive":
+      return {
+        ...base,
+        dot: e.accepted === false ? "warn" : base.dot,
+        title: `/model ${String(e.requested ?? "?")} ${e.accepted === false ? "refused" : "accepted"}`,
+        detail: [
+          e.resolved ? `→ ${String(e.resolved)}` : null,
+          e.source ? `source=${String(e.source)}` : null,
+          e.reason ? String(e.reason) : null,
+        ]
+          .filter((part) => part !== null)
+          .join(" · "),
+      };
     case "janitor_action":
       return { ...base, title: "janitor", detail: String(e.action ?? "") };
     default:

package/assets/js/views/channels.js

@@ -28,6 +28,51 @@ import { api } from "../api.js";
 import { clear, collapsible, dot, el, jsonPre, numberedCode, skeleton, toast } from "../dom.js";
 import { m3, m3Card, m3Empty } from "./creds.js";
 
+/**
+ * True when `hostname` names this machine — the browser-side half of the
+ * CLI's `isLoopbackHost`, deliberately re-implemented rather than imported:
+ * the console's JS is hand-written browser ES modules with no build step and
+ * no imports out of `assets/`.
+ *
+ * `location.hostname` hands IPv6 literals over WITHOUT their brackets, so
+ * `::1` arrives bare; both spellings are accepted. An empty hostname (a
+ * `file://` document) is NOT loopback — falling through to the honest note
+ * is the safe direction to be wrong in.
+ */
+export function isLoopbackHostname(hostname) {
+  const host = typeof hostname === "string" ? hostname.trim().toLowerCase() : "";
+  if (host === "") return false;
+  const bare = host.startsWith("[") && host.endsWith("]") ? host.slice(1, -1) : host;
+  if (bare === "localhost") return true;
+  if (bare === "::1" || bare === "0:0:0:0:0:0:0:1") return true;
+  // The whole of 127.0.0.0/8 — a daemon on 127.0.0.2 is every bit as local.
+  const octets = bare.split(".");
+  if (octets.length !== 4) return false;
+  if (!octets.every((o) => /^\d{1,3}$/.test(o) && Number(o) <= 255)) return false;
+  return octets[0] === "127";
+}
+
+/**
+ * Whether to OFFER the daemon's dashboard as a link, or just name it.
+ *
+ * The daemon's control-UI port is loopback by design — `service-setup`
+ * never tunnels it and it carries no auth — so the address the server sends
+ * is only usable by a browser sitting at that machine. Since
+ * `crewhaus hangar --lan` puts this console on a phone, "usable" is now a
+ * question with two answers, and only the browser can tell which: it knows
+ * the host it reached the console on.
+ *
+ * A link that quietly goes nowhere is worse than a line of text that says
+ * where the thing is, so a remote viewer gets the address and the reason
+ * instead of a dead anchor.
+ */
+export function dashboardReach(dashboardUrl, viewerHostname) {
+  if (typeof dashboardUrl !== "string" || dashboardUrl === "") return null;
+  return isLoopbackHostname(viewerHostname)
+    ? { reachable: true, url: dashboardUrl }
+    : { reachable: false, url: dashboardUrl };
+}
+
 export async function renderChannels(root, ctx) {
   clear(root).appendChild(skeleton(5));
   const [channelsAnswer, gatewayAnswer] = await Promise.all([
@@ -431,16 +476,28 @@ function gatewayCard(body) {
         : null,
     ]),
   ];
-  if (typeof body.dashboardUrl === "string") {
+  const reach = dashboardReach(body.dashboardUrl, window.location.hostname);
+  if (reach !== null) {
     nodes.push(
-      el("p", null, [
-        el("a", {
-          href: body.dashboardUrl,
-          target: "_blank",
-          rel: "noreferrer",
-          text: "open the daemon's own dashboard",
-        }),
-      ]),
+      el(
+        "p",
+        null,
+        reach.reachable
+          ? [
+              el("a", {
+                href: reach.url,
+                target: "_blank",
+                rel: "noreferrer",
+                text: "open the daemon's own dashboard",
+              }),
+            ]
+          : [
+              el("span", {
+                class: "muted",
+                text: `the daemon's own dashboard is at ${reach.url} — it binds loopback and is not tunnelled, so it opens only from the machine running the daemon, not from here`,
+              }),
+            ],
+      ),
     );
   }
   if (body.status !== null && body.status !== undefined) {

package/assets/js/views/models.js

@@ -0,0 +1,430 @@
+/**
+ * Models tab (0.6.0 design §8.3) — the answer to "which model served, with
+ * which settings, at what cost, and is the cheap lane winning?"
+ *
+ * Four panels, in the order an operator asks the questions:
+ *
+ *   1. **Registry** — the `models:` profiles this spec declares, and the
+ *      `model_pool` candidates that reference them (one card per pool: a
+ *      crew role or a workflow step declares one as readily as `agent:`).
+ *   2. **Per-profile spend** — the same cost fold the Costs tab reads, split
+ *      by `role` and by `profile` instead of by model. This is where a
+ *      judge, an escalation or a sub-agent's spend becomes visible: those
+ *      calls carry the attribution, and until 0.6.0 nothing rendered it.
+ *   3. **Leaderboard** — the learned arms ranked inside each routing band,
+ *      with the arm a `learned` policy would exploit starred.
+ *   4. **Route timeline** — one run's durable routing lines in order, so the
+ *      shape of a hybrid turn (draft → judge → escalate) can be read back.
+ *
+ * READ-ONLY. Nothing on this screen writes: the roster, the rules, the
+ * strategy membership and the conservative floor are human-owned and travel
+ * through `crewhaus propose`; the arms are the runtime's to write.
+ *
+ * The pure shaping functions are exported for unit tests; the renderers are
+ * thin DOM builders over them, in the M2 tradition.
+ */
+
+import { api } from "../api.js";
+import { clear, collapsible, el, emptyState, jsonPre, skeleton } from "../dom.js";
+import { fmtCount, fmtUsd, usdFromMicros } from "../util.js";
+
+/** A spend row's share of the total, in [0, 1]. Pure. */
+export function spendShare(usdMicros, totalUsdMicros) {
+  const total = typeof totalUsdMicros === "number" ? totalUsdMicros : 0;
+  const part = typeof usdMicros === "number" ? usdMicros : 0;
+  return total > 0 ? part / total : 0;
+}
+
+/**
+ * Payload → the per-profile spend rows the table renders, biggest first.
+ * The server already ranks them; this normalizes the shape and attaches the
+ * share so the bar and the number cannot disagree. Pure.
+ */
+export function profileSpendRows(payload) {
+  const spend =
+    payload && typeof payload.spend === "object" && payload.spend !== null ? payload.spend : {};
+  const total = typeof spend.totalUsdMicros === "number" ? spend.totalUsdMicros : 0;
+  const rows = Array.isArray(spend.byProfile) ? spend.byProfile : [];
+  return rows.map((row) => ({
+    profile: String(row?.profile ?? "(none)"),
+    calls: typeof row?.calls === "number" ? row.calls : 0,
+    usdMicros: typeof row?.usdMicros === "number" ? row.usdMicros : 0,
+    share: spendShare(row?.usdMicros, total),
+  }));
+}
+
+/**
+ * Payload → the declared pools, one row per host that declares one. Pure.
+ *
+ * `model_pool` is not an `agent:` field — a crew role, a workflow step, a
+ * graph node or a sub-agent declares one too — so the tab renders a card per
+ * pool. A manager one version behind serves only `pool`; that single view is
+ * used as the one row rather than claiming nothing is declared.
+ */
+export function declaredPools(payload) {
+  const rows = Array.isArray(payload?.pools) ? payload.pools : [];
+  const shaped = rows
+    .filter((row) => row && typeof row.pool === "object" && row.pool !== null)
+    .map((row) => ({ hostPath: String(row.hostPath ?? "model_pool"), pool: row.pool }));
+  if (shaped.length > 0) return shaped;
+  const single = payload?.pool;
+  return single && typeof single === "object" && single.declared === true
+    ? [{ hostPath: "model_pool", pool: single }]
+    : [];
+}
+
+/** The same shaping for the per-role split. Pure. */
+export function roleSpendRows(payload) {
+  const spend =
+    payload && typeof payload.spend === "object" && payload.spend !== null ? payload.spend : {};
+  const total = typeof spend.totalUsdMicros === "number" ? spend.totalUsdMicros : 0;
+  const rows = Array.isArray(spend.byRole) ? spend.byRole : [];
+  return rows.map((row) => ({
+    role: String(row?.role ?? "primary"),
+    calls: typeof row?.calls === "number" ? row.calls : 0,
+    usdMicros: typeof row?.usdMicros === "number" ? row.usdMicros : 0,
+    share: spendShare(row?.usdMicros, total),
+  }));
+}
+
+/**
+ * One timeline entry → the single line the gutter renders. Pure, and
+ * deliberately total: an unknown routing kind still renders its kind rather
+ * than vanishing, because a manager one version behind its harness must not
+ * silently drop events.
+ */
+export function timelineLine(entry) {
+  const kind = String(entry?.kind ?? "");
+  const p =
+    entry && typeof entry.payload === "object" && entry.payload !== null ? entry.payload : {};
+  const parts = [];
+  const push = (value) => {
+    if (value !== undefined && value !== null && String(value) !== "") parts.push(String(value));
+  };
+  switch (kind) {
+    case "model_route":
+      push(p.model);
+      if (p.profile) push(`profile=${p.profile}`);
+      if (p.band) push(`band=${p.band}`);
+      if (p.policy) push(`policy=${p.policy}${p.explored === true ? " (exploring)" : ""}`);
+      if (p.ruleId) push(`rule=${p.ruleId}`);
+      break;
+    case "model_tier_route":
+      push(p.model);
+      if (p.tier) push(`tier=${p.tier}${p.escalated === true ? " (escalated)" : ""}`);
+      break;
+    case "model_stage":
+      push(`${p.stage ?? "?"} · ${p.outcome ?? "?"}`);
+      if (p.strategy) push(`strategy=${p.strategy}`);
+      if (p.model) push(p.model);
+      if (p.profile) push(`profile=${p.profile}`);
+      if (p.cause) push(p.cause);
+      break;
+    case "model_directive":
+      push(`${p.requested ?? "?"} → ${p.resolved ?? "(refused)"}`);
+      push(p.accepted === true ? "accepted" : "refused");
+      if (p.reason) push(p.reason);
+      break;
+    case "model_failover":
+      push(`${p.from ?? "?"} → ${p.to ?? "?"}`);
+      if (p.reason) push(p.reason);
+      break;
+    case "judge_verdict":
+      push(p.verdict);
+      if (typeof p.score === "number") push(`score=${p.score}`);
+      if (p.judgeModel) push(`judge=${p.judgeModel}`);
+      break;
+    default:
+      break;
+  }
+  return {
+    kind,
+    turn: typeof entry?.turnNumber === "number" ? entry.turnNumber : null,
+    detail: parts.join(" · "),
+  };
+}
+
+function shareBar(share) {
+  const pct = Math.max(0, Math.min(1, share)) * 100;
+  return el("div", { class: "meter" }, [
+    el("div", { class: "meter-fill", style: `width:${pct.toFixed(1)}%` }),
+  ]);
+}
+
+function table(headers, rows) {
+  return el("div", { class: "table-scroll" }, [
+    el("table", { class: "fleet" }, [
+      el(
+        "thead",
+        null,
+        el(
+          "tr",
+          null,
+          headers.map((h) => el("th", { text: h })),
+        ),
+      ),
+      el("tbody", null, rows),
+    ]),
+  ]);
+}
+
+function card(title, sub, body) {
+  return el("div", { class: "card" }, [
+    el("h3", { class: "card-title" }, [
+      el("span", { text: title }),
+      sub === null ? null : el("span", { class: "muted card-sub", text: sub }),
+    ]),
+    ...(Array.isArray(body) ? body : [body]),
+  ]);
+}
+
+/** The whole tab. `ctx` is `{ id, … }`, the same shape every tab receives. */
+export async function renderModels(root, ctx) {
+  clear(root).appendChild(skeleton(8));
+  const data = await api.models({ id: ctx.id });
+  clear(root);
+  const body = data && typeof data.body === "object" && data.body !== null ? data.body : data;
+  if (!body || typeof body !== "object") {
+    root.appendChild(emptyState("No model data", "crewhaus models list"));
+    return;
+  }
+
+  const registry = Array.isArray(body.registry) ? body.registry : [];
+  const pools = declaredPools(body);
+  const arms = Array.isArray(body.arms) ? body.arms : [];
+  const leaderboard = Array.isArray(body.leaderboard) ? body.leaderboard : [];
+  const sessions = Array.isArray(body.sessions) ? body.sessions : [];
+  const profiles = profileSpendRows(body);
+  const roles = roleSpendRows(body);
+
+  if (typeof body.note === "string" && body.note !== "") {
+    root.appendChild(el("p", { class: "muted", text: body.note }));
+  }
+
+  // ---- 1. the registry + the pool ----------------------------------------
+  root.appendChild(
+    card(
+      "Registry",
+      registry.length === 0 ? "no models: block declared" : `${registry.length} profile(s)`,
+      registry.length === 0
+        ? el("p", {
+            class: "muted",
+            text: "declare models: to give a profile its own settings, tools and permissions once, then reference it as $name at any model slot.",
+          })
+        : table(
+            ["Profile", "Model", "Settings"],
+            registry.map((row) =>
+              el("tr", null, [
+                el("td", { class: "mono", text: String(row?.name ?? "?") }),
+                el("td", { class: "mono", text: String(row?.model ?? "—") }),
+                el("td", {
+                  class: "muted",
+                  text: (Array.isArray(row?.settings) ? row.settings : [])
+                    .filter((s) => s?.key !== "model")
+                    .map((s) => `${s.key}=${s.value}`)
+                    .join(" · "),
+                }),
+              ]),
+            ),
+          ),
+    ),
+  );
+
+  if (pools.length === 0) {
+    root.appendChild(
+      card(
+        "Routing pool",
+        "not declared",
+        el("p", {
+          class: "muted",
+          text: "no model_pool anywhere in the spec — every turn is served by the one declared model.",
+        }),
+      ),
+    );
+  } else {
+    for (const { hostPath, pool: p } of pools) {
+      root.appendChild(
+        card(
+          `Routing pool · ${hostPath}`,
+          `policy ${p.policy ?? "static"}${p.scope ? ` · scope ${p.scope}` : ""}`,
+          table(
+            ["Candidate", "Profile", "Tags", "Enabled"],
+            (Array.isArray(p.candidates) ? p.candidates : []).map((c) =>
+              el("tr", null, [
+                el("td", { class: "mono", text: String(c?.model ?? "—") }),
+                el("td", { class: "mono", text: String(c?.profile ?? "—") }),
+                el("td", {
+                  class: "muted",
+                  text: (Array.isArray(c?.tags) ? c.tags : []).join(", "),
+                }),
+                el("td", { text: c?.enabled === false ? "no" : "yes" }),
+              ]),
+            ),
+          ),
+        ),
+      );
+    }
+  }
+
+  // ---- 2. per-role and per-profile spend ---------------------------------
+  const spendBody = [];
+  if (roles.length > 0) {
+    spendBody.push(
+      table(
+        ["Role", "Calls", "Cost", "Share"],
+        roles.map((r) =>
+          el("tr", null, [
+            el("td", { text: r.role }),
+            el("td", { class: "num", text: fmtCount(r.calls) }),
+            el("td", { class: "num", text: fmtUsd(usdFromMicros(r.usdMicros)) }),
+            el("td", null, shareBar(r.share)),
+          ]),
+        ),
+      ),
+    );
+  }
+  if (profiles.length > 0) {
+    spendBody.push(
+      table(
+        ["Profile", "Calls", "Cost", "Share"],
+        profiles.map((p) =>
+          el("tr", null, [
+            el("td", { class: "mono", text: p.profile }),
+            el("td", { class: "num", text: fmtCount(p.calls) }),
+            el("td", { class: "num", text: fmtUsd(usdFromMicros(p.usdMicros)) }),
+            el("td", null, shareBar(p.share)),
+          ]),
+        ),
+      ),
+    );
+  }
+  if (spendBody.length === 0) {
+    spendBody.push(
+      el("p", { class: "muted", text: "no priced model calls recorded for this harness yet." }),
+    );
+  } else if (typeof body.spend?.rollups === "number" && body.spend.rollups > 0) {
+    spendBody.push(
+      el("p", {
+        class: "muted",
+        text: `${body.spend.rollups} nested-run roll-up line(s) were skipped — a sub-agent's spend is counted from the child's own session log, which is folded here too.`,
+      }),
+    );
+  }
+  root.appendChild(
+    card("Spend by role and profile", fmtUsd(usdFromMicros(body.spend?.totalUsdMicros)), spendBody),
+  );
+
+  // ---- 3. the leaderboard -------------------------------------------------
+  root.appendChild(
+    card(
+      "Leaderboard",
+      arms.length === 0 ? "no arms recorded" : `${arms.length} arm(s)`,
+      leaderboard.length === 0
+        ? el("p", {
+            class: "muted",
+            text: "a pooled run folds one observation per turn into its band's arm; nothing has been observed yet.",
+          })
+        : table(
+            ["Band", "Model", "n", "Reward", "Quality", "Latency", "Cost/call"],
+            leaderboard.map((row) =>
+              el("tr", { class: row?.best === true ? "row-best" : null }, [
+                el("td", {
+                  class: "mono",
+                  text: `${row?.band ?? "?"}${row?.shadow === true ? " (shadow)" : ""}`,
+                }),
+                el("td", {
+                  class: "mono",
+                  text: `${row?.model ?? "?"}${row?.best === true ? " ★" : ""}`,
+                }),
+                el("td", { class: "num", text: fmtCount(row?.n) }),
+                el("td", { class: "num", text: Number(row?.meanReward ?? 0).toFixed(3) }),
+                el("td", {
+                  class: "num",
+                  text: row?.qualityCount > 0 ? Number(row.meanQuality).toFixed(3) : "—",
+                }),
+                el("td", {
+                  class: "num",
+                  text: `${Math.round(Number(row?.meanLatencyMs ?? 0))}ms`,
+                }),
+                el("td", {
+                  class: "num",
+                  text: row?.meanCostUsd > 0 ? `$${Number(row.meanCostUsd).toFixed(5)}` : "—",
+                }),
+              ]),
+            ),
+          ),
+    ),
+  );
+
+  // ---- 4. the route timeline ---------------------------------------------
+  const timelineRoot = el("div");
+  root.appendChild(
+    card(
+      "Route timeline",
+      sessions.length === 0
+        ? "no session recorded a routing decision"
+        : `${sessions.length} session(s)`,
+      sessions.length === 0
+        ? el("p", {
+            class: "muted",
+            text: "only runs whose spec declares a pool, tiers or a hybrid strategy persist routing lines.",
+          })
+        : [
+            el(
+              "div",
+              { class: "chips" },
+              sessions.slice(0, 12).map((s) => {
+                const btn = el("button", {
+                  class: "chip",
+                  text: `${s.id} (${s.routingLines})`,
+                });
+                btn.addEventListener("click", () => {
+                  void loadTimeline(timelineRoot, ctx.id, String(s.id));
+                });
+                return btn;
+              }),
+            ),
+            timelineRoot,
+          ],
+    ),
+  );
+  const first = sessions[0];
+  if (first !== undefined) await loadTimeline(timelineRoot, ctx.id, String(first.id));
+
+  if (body.freeze) {
+    root.appendChild(
+      collapsible(
+        [el("span", { text: "Routing is FROZEN — the learned policy is pinned" })],
+        [jsonPre(body.freeze)],
+      ),
+    );
+  }
+}
+
+/** Load and render one session's timeline into `host`. */
+async function loadTimeline(host, id, sessionId) {
+  clear(host).appendChild(skeleton(3));
+  const data = await api.modelRoutes({ id, sess: sessionId });
+  const body = data && typeof data.body === "object" && data.body !== null ? data.body : data;
+  clear(host);
+  const entries = Array.isArray(body?.entries) ? body.entries : [];
+  if (entries.length === 0) {
+    host.appendChild(
+      el("p", { class: "muted", text: String(body?.note ?? "no routing lines in this session.") }),
+    );
+    return;
+  }
+  host.appendChild(
+    table(
+      ["Turn", "Kind", "Detail"],
+      entries.map((entry) => {
+        const line = timelineLine(entry);
+        return el("tr", null, [
+          el("td", { class: "num", text: line.turn === null ? "—" : String(line.turn) }),
+          el("td", { class: "mono", text: line.kind }),
+          el("td", { class: "muted", text: line.detail }),
+        ]);
+      }),
+    ),
+  );
+}

package/dist/index.js

@@ -55,6 +55,7 @@ import jobsViewJs from "../assets/js/views/jobs.js" with { type: "text" };
 import libraryViewJs from "../assets/js/views/library.js" with { type: "text" };
 import memoryFabricViewJs from "../assets/js/views/memory-fabric.js" with { type: "text" };
 import memoryViewJs from "../assets/js/views/memory.js" with { type: "text" };
+import modelsViewJs from "../assets/js/views/models.js" with { type: "text" };
 import onboardingViewJs from "../assets/js/views/onboarding.js" with { type: "text" };
 import overviewViewJs from "../assets/js/views/overview.js" with { type: "text" };
 import panesViewJs from "../assets/js/views/panes.js" with { type: "text" };
@@ -129,6 +130,7 @@ export const hangarAssets = {
     "/assets/js/views/library.js": asset(libraryViewJs, "library.js"),
     "/assets/js/views/memory-fabric.js": asset(memoryFabricViewJs, "memory-fabric.js"),
     "/assets/js/views/memory.js": asset(memoryViewJs, "memory.js"),
+    "/assets/js/views/models.js": asset(modelsViewJs, "models.js"),
     "/assets/js/views/onboarding.js": asset(onboardingViewJs, "onboarding.js"),
     "/assets/js/views/overview.js": asset(overviewViewJs, "overview.js"),
     "/assets/js/views/panes.js": asset(panesViewJs, "panes.js"),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewhaus/hangar-ui",
-  "version": "0.5.8",
+  "version": "0.7.0",
   "type": "module",
   "description": "The Hangar web console's static UI — zero-build, dependency-free browser ES modules embedded as text assets for the single-binary CLI to hand to the hangar server",
   "main": "dist/index.js",