@crewhaus/hangar-ui 0.5.0

package/assets/js/views/memory.js

@@ -0,0 +1,228 @@
+/**
+ * Memory tab — the fabric, read-only, rendered from the server's actual
+ * view shapes: facts `{files:[{items,…}]}` (status folded server-side from
+ * tombstones), wiki `{index, articles: [slug]}`, continuity
+ * `{focus, goals, plans:[{file,text}]}`, dream `{specs:[{specName,state}]}`,
+ * and watchme `{state, observationsTail, judgmentsTail}`. Each area loads
+ * independently so one absent store never hides another ("absence is not
+ * an error").
+ */
+
+import { api } from "../api.js";
+import { clear, collapsible, dot, el, emptyState, jsonPre, mdBlocks, skeleton } from "../dom.js";
+import { hrefHarness } from "../router.js";
+import { fmtRelativeTime } from "../util.js";
+import { jobButton } from "./jobs.js";
+
+export async function renderMemory(root, ctx) {
+  if (ctx.route.wikiSlug !== undefined) {
+    await renderWikiArticle(root, ctx, ctx.route.wikiSlug);
+    return;
+  }
+  clear(root).appendChild(skeleton(8));
+  const [facts, wiki, continuity, dream, watchme] = await Promise.allSettled([
+    api.memory(ctx.id, "facts"),
+    api.memory(ctx.id, "wiki"),
+    api.memory(ctx.id, "state"),
+    api.memory(ctx.id, "dream"),
+    api.memory(ctx.id, "watchme"),
+  ]);
+  clear(root);
+  const grid = el("div", { class: "ov-grid" });
+  grid.appendChild(factsCard(value(facts)));
+  grid.appendChild(wikiCard(value(wiki), ctx));
+  grid.appendChild(continuityCard(value(continuity)));
+  grid.appendChild(dreamCard(value(dream), ctx, () => renderMemory(root, ctx)));
+  grid.appendChild(watchmeCard(value(watchme)));
+  root.appendChild(grid);
+}
+
+function value(res) {
+  return res.status === "fulfilled" ? res.value : null;
+}
+
+function card(title, children, wide = false) {
+  return el("section", { class: `card ov-card${wide ? " ov-wide" : ""}` }, [
+    el("h3", { class: "card-title", text: title }),
+    ...(Array.isArray(children) ? children : [children]),
+  ]);
+}
+
+function factsCard(data) {
+  // One entry per memories/<spec>.jsonl file; items carry a folded status.
+  const files = Array.isArray(data?.files) ? data.files : [];
+  const items = files.flatMap((f) =>
+    Array.isArray(f?.items)
+      ? f.items.map((i) => ({ ...i, specName: String(f.specName ?? "") }))
+      : [],
+  );
+  if (items.length === 0) {
+    return card("Facts", emptyState("No facts yet", "crewhaus remember"));
+  }
+  const live = items.filter((i) => i.status === "live");
+  const folded = items.filter((i) => i.status !== "live");
+  const factLi = (f) =>
+    el("li", { class: "fact" }, [
+      el("div", { text: String(f.text ?? "") }),
+      el("div", { class: "fact-meta" }, [
+        ...(Array.isArray(f.tags) ? f.tags : []).map((t) =>
+          el("span", { class: "chip", text: String(t) }),
+        ),
+        f.status !== "live"
+          ? el("span", { class: "chip chip-warn", text: String(f.status) })
+          : null,
+      ]),
+    ]);
+  const children = [el("ul", { class: "fact-list" }, live.map(factLi))];
+  if (folded.length > 0) {
+    children.push(
+      collapsible(
+        [
+          el("span", {
+            class: "muted",
+            text: `${folded.length} superseded/expired fact${folded.length === 1 ? "" : "s"} (tombstoned, never deleted)`,
+          }),
+        ],
+        [el("ul", { class: "fact-list folded" }, folded.map(factLi))],
+      ),
+    );
+  }
+  if (files.some((f) => f?.truncated === true)) {
+    children.push(
+      el("p", { class: "muted", text: "Long store — showing the first entries only." }),
+    );
+  }
+  return card("Facts", children, true);
+}
+
+function wikiCard(data, ctx) {
+  // Articles are slugs (the on-disk authority); titles come from the
+  // tolerant index.json cache when it has them.
+  const slugs = Array.isArray(data?.articles) ? data.articles.map(String) : [];
+  if (slugs.length === 0) {
+    return card("Wiki", emptyState("No wiki articles yet", "crewhaus wiki write"));
+  }
+  const index = data?.index && typeof data.index === "object" ? data.index : {};
+  return card(
+    "Wiki",
+    el(
+      "ul",
+      { class: "wiki-list" },
+      slugs.map((slug) => {
+        const meta = index[slug] && typeof index[slug] === "object" ? index[slug] : {};
+        return el("li", null, [
+          el("a", {
+            class: "name-link",
+            href: hrefHarness(ctx.id, "memory", "wiki", slug),
+            text: typeof meta.title === "string" && meta.title !== "" ? meta.title : slug,
+          }),
+          ...(Array.isArray(meta.tags) ? meta.tags : []).map((t) =>
+            el("span", { class: "chip", text: String(t) }),
+          ),
+        ]);
+      }),
+    ),
+  );
+}
+
+async function renderWikiArticle(root, ctx, slug) {
+  clear(root).appendChild(skeleton(6));
+  const data = await api.wikiArticle(ctx.id, slug);
+  clear(root);
+  root.appendChild(
+    el("div", { class: "crumb-line" }, [
+      el("a", { href: hrefHarness(ctx.id, "memory"), text: "← memory" }),
+      el("span", { class: "mono muted", text: slug }),
+    ]),
+  );
+  if (data === null) {
+    root.appendChild(emptyState("Nothing here yet — no article with that slug"));
+    return;
+  }
+  root.appendChild(
+    el("article", { class: "card wiki-article" }, [
+      el("h2", { text: slug }),
+      data.truncated === true
+        ? el("p", { class: "muted", text: "Long article — showing the first part only." })
+        : null,
+      mdBlocks(String(data.body ?? "")),
+    ]),
+  );
+}
+
+function continuityCard(data) {
+  const focus = typeof data?.focus === "string" ? data.focus : "";
+  const goals = typeof data?.goals === "string" ? data.goals : "";
+  const plans = Array.isArray(data?.plans) ? data.plans : [];
+  if (focus === "" && goals === "" && plans.length === 0) {
+    return card("Continuity", emptyState("No continuity state yet", "crewhaus /focus (or /plan)"));
+  }
+  const children = [];
+  if (focus !== "") {
+    children.push(el("h4", { class: "sub-title", text: "Focus" }));
+    children.push(el("pre", { class: "prose-pre", text: focus }));
+  }
+  if (goals !== "") {
+    children.push(el("h4", { class: "sub-title", text: "Goals" }));
+    children.push(el("pre", { class: "prose-pre", text: goals }));
+  }
+  for (const plan of plans) {
+    children.push(
+      collapsible(
+        [el("span", { class: "mono", text: String(plan.file ?? "plan") })],
+        [el("pre", { class: "prose-pre", text: String(plan.text ?? "") })],
+      ),
+    );
+  }
+  return card("Continuity", children);
+}
+
+function dreamCard(data, ctx, reload) {
+  const specs = Array.isArray(data?.specs) ? data.specs : [];
+  // Dream is a read-only timer row in control.v1 — there is nothing to poke,
+  // so "Run now" goes through the job queue, exactly as the CLI would.
+  const runNow = jobButton("Run now", ctx.id, "dream-run", undefined, reload);
+  if (specs.length === 0) {
+    return card("Dream", [emptyState("No dream state yet", "crewhaus dream run"), runNow]);
+  }
+  const children = specs.map((s) => {
+    const state = s?.state && typeof s.state === "object" ? s.state : {};
+    const lastRunAt = typeof state.lastRunAt === "string" ? state.lastRunAt : null;
+    return collapsible(
+      [
+        el("span", { class: "mono", text: String(s.specName ?? "spec") }),
+        el("span", {
+          class: "muted",
+          text: lastRunAt ? ` last ran ${fmtRelativeTime(lastRunAt, Date.now())}` : "",
+        }),
+      ],
+      [jsonPre(state)],
+    );
+  });
+  children.push(runNow);
+  return card("Dream", children);
+}
+
+function watchmeCard(data) {
+  const state = data?.state && typeof data.state === "object" ? data.state : null;
+  if (state === null) {
+    return card("Watchme", emptyState("Not watching yet", "crewhaus watchme start"));
+  }
+  const watching = state.watching === true || state.active === true;
+  const observations = Array.isArray(data.observationsTail) ? data.observationsTail.length : 0;
+  const judgments = Array.isArray(data.judgmentsTail) ? data.judgmentsTail.length : 0;
+  return card("Watchme", [
+    el("div", { class: "kv" }, [
+      el("span", { class: "kv-k", text: "state" }),
+      el("span", { class: "kv-v" }, [dot(watching ? "ok" : "off", watching ? "watching" : "off")]),
+    ]),
+    el("div", { class: "kv" }, [
+      el("span", { class: "kv-k", text: "recent observations" }),
+      el("span", { class: "kv-v", text: String(observations) }),
+    ]),
+    el("div", { class: "kv" }, [
+      el("span", { class: "kv-k", text: "recent judgments" }),
+      el("span", { class: "kv-v", text: String(judgments) }),
+    ]),
+  ]);
+}

package/assets/js/views/onboarding.js

@@ -0,0 +1,253 @@
+/**
+ * HM-12 — first boot.
+ *
+ * An empty Library looks broken and teaches nothing, so the Library hands
+ * over to this screen when there is nothing registered and no scan root
+ * configured. Two paths out, both showing the command they run:
+ *
+ *   - point the manager at a directory and scan it;
+ *   - install a demo starter out of a local demos checkout.
+ *
+ * Demo mode is honest about needing that checkout. With none configured the
+ * card says so and names the repo, the environment variable and the CLI verb
+ * — which teaches more than a spinner that ends in a network error would.
+ */
+
+import { api } from "../api.js";
+import { clear, copyBtn, dot, el, emptyState, skeleton, toast } from "../dom.js";
+
+/** One "here is the command" line — the CLI-twin discipline, on a screen an
+ *  operator sees before they have run anything. */
+function twin(command) {
+  return el("div", { class: "twin" }, [
+    el("code", { class: "mono", text: command }),
+    copyBtn(command),
+  ]);
+}
+
+export async function renderOnboarding(root, opts = {}) {
+  const reload = opts.reload ?? (() => {});
+  clear(root).appendChild(skeleton(5));
+  let view = null;
+  try {
+    view = await api.onboarding();
+  } catch (err) {
+    clear(root).appendChild(
+      el("div", { class: "card error-card" }, [
+        el("h2", { text: "Could not read the first-boot state" }),
+        el("p", { class: "muted", text: err instanceof Error ? err.message : String(err) }),
+      ]),
+    );
+    return;
+  }
+  clear(root);
+  const twins = view?.cliTwins && typeof view.cliTwins === "object" ? view.cliTwins : {};
+  root.appendChild(
+    el("div", { class: "card" }, [
+      el("h2", { text: "Welcome to Hangar" }),
+      el("p", {
+        class: "muted",
+        text: "Hangar manages the harnesses on this machine. Point it at a directory, or install a demo — either way it registers what it finds and nothing else.",
+      }),
+    ]),
+  );
+  root.appendChild(scanRootCard(view, twins, reload));
+  root.appendChild(demoCard(view, twins, reload));
+  root.appendChild(manualCard(twins, reload));
+}
+
+function scanRootCard(view, twins, reload) {
+  const suggestions = Array.isArray(view?.suggestions) ? view.suggestions : [];
+  const card = el("section", { class: "card" }, [
+    el("h3", { class: "card-title", text: "1 · Where do your harnesses live?" }),
+    el("p", {
+      class: "muted",
+      text: "A scan root is walked for crewhaus.yaml files. Adding one registers what it finds; it never writes inside a harness.",
+    }),
+  ]);
+  if (suggestions.length === 0) {
+    card.appendChild(emptyState("No suggestions on this machine", twins.addScanRoot));
+  } else {
+    card.appendChild(
+      el(
+        "ul",
+        { class: "check-list" },
+        suggestions.map((s) =>
+          el("li", { class: "suggest-row" }, [
+            dot(s?.exists ? "ok" : "unknown", s?.exists ? "exists" : "not created yet"),
+            el("code", { class: "mono", text: String(s?.dir ?? "") }),
+            el("span", { class: "muted", text: String(s?.why ?? "") }),
+            el("button", {
+              class: "btn",
+              type: "button",
+              text: "Add + scan",
+              onClick: async (event) => {
+                const button = event.currentTarget;
+                button.disabled = true;
+                try {
+                  await api.addScanRoot(String(s?.dir ?? ""));
+                  const result = await api.scan();
+                  toast(
+                    `Scanned: ${result?.discovered ?? 0} harness(es) found, ${result?.added ?? 0} newly registered`,
+                    "info",
+                  );
+                  reload();
+                } catch (err) {
+                  button.disabled = false;
+                  toast(err instanceof Error ? err.message : String(err), "error");
+                }
+              },
+            }),
+          ]),
+        ),
+      ),
+    );
+  }
+  const field = el("input", {
+    class: "input mono grow",
+    type: "text",
+    placeholder: "/an/absolute/path",
+    "aria-label": "scan root path",
+  });
+  card.appendChild(
+    el("div", { class: "add-form" }, [
+      field,
+      el("button", {
+        class: "btn",
+        type: "button",
+        text: "Add this root",
+        onClick: async () => {
+          const dir = field.value.trim();
+          if (dir === "") return;
+          try {
+            await api.addScanRoot(dir);
+            await api.scan();
+            reload();
+          } catch (err) {
+            toast(err instanceof Error ? err.message : String(err), "error");
+          }
+        },
+      }),
+    ]),
+  );
+  // `harness scan --root <dir>` is the real twin for this card's two
+  // buttons: the CLI remembers the root it was handed before it walks it,
+  // which is exactly "add + scan". There is no `harness scan-root` verb.
+  card.appendChild(twin(twins.addScanRoot ?? "crewhaus harness scan --root <dir>"));
+  card.appendChild(twin(twins.scan ?? "crewhaus harness scan"));
+  return card;
+}
+
+function demoCard(view, twins, reload) {
+  const demo = view?.demo && typeof view.demo === "object" ? view.demo : {};
+  const card = el("section", { class: "card" }, [
+    el("h3", { class: "card-title", text: "2 · Or start from a demo" }),
+  ]);
+  if (demo.available !== true) {
+    card.appendChild(
+      el("div", { class: "empty" }, [
+        dot("unknown", "demo mode is unavailable"),
+        el("div", { class: "empty-msg", text: String(demo.reason ?? "no demos checkout found") }),
+        el("div", { class: "empty-verb muted", text: String(demo.remedy ?? "") }),
+      ]),
+    );
+    card.appendChild(twin("git clone https://github.com/crewhaus/demos"));
+    card.appendChild(twin("crewhaus init <dir>"));
+    return card;
+  }
+  const starters = Array.isArray(demo.starters) ? demo.starters : [];
+  const select = el(
+    "select",
+    { class: "input", "aria-label": "starter" },
+    starters.map((name) => el("option", { value: name, text: name })),
+  );
+  const dest = el("input", {
+    class: "input mono grow",
+    type: "text",
+    placeholder: "/an/absolute/path/for/the/demo",
+    "aria-label": "install directory",
+  });
+  card.appendChild(
+    el("p", {
+      class: "muted",
+      text: `Copies one starter out of ${String(demo.source ?? "the demos checkout")} into a new directory and registers it. Nothing is downloaded, and an existing directory is never written over.`,
+    }),
+  );
+  card.appendChild(
+    el("div", { class: "add-form" }, [
+      select,
+      dest,
+      el("button", {
+        class: "btn btn-primary",
+        type: "button",
+        text: "Install demo",
+        onClick: async (event) => {
+          const button = event.currentTarget;
+          const dir = dest.value.trim();
+          if (dir === "") {
+            toast("Give an absolute path for the demo", "error");
+            return;
+          }
+          button.disabled = true;
+          const res = await api.demoInstall(select.value, dir);
+          button.disabled = false;
+          if (res.ok !== true) {
+            toast(
+              `${String(res.body?.message ?? "refused")} — ${String(res.body?.remedy ?? "")}`,
+              "error",
+            );
+            return;
+          }
+          toast(`Installed ${select.value} into ${dir}`, "info");
+          reload();
+        },
+      }),
+    ]),
+  );
+  card.appendChild(twin(twins.demo ?? "cp -R <demos>/starters/<starter> <dir>"));
+  return card;
+}
+
+function manualCard(twins, reload) {
+  const field = el("input", {
+    class: "input mono grow",
+    type: "text",
+    placeholder: "/path/to/an/existing/harness",
+    "aria-label": "harness directory",
+  });
+  return el("section", { class: "card" }, [
+    el("h3", { class: "card-title", text: "3 · Already have one? Register it directly" }),
+    el("div", { class: "add-form" }, [
+      field,
+      el("button", {
+        class: "btn",
+        type: "button",
+        text: "Register",
+        onClick: async () => {
+          const dir = field.value.trim();
+          if (dir === "") return;
+          try {
+            await api.addHarness(dir);
+            reload();
+          } catch (err) {
+            toast(err instanceof Error ? err.message : String(err), "error");
+          }
+        },
+      }),
+    ]),
+    twin(twins.addHarness ?? "crewhaus harness add <dir>"),
+  ]);
+}
+
+/**
+ * Should the Library hand over to onboarding? Pure, so the rule is testable:
+ * only when there is genuinely nothing — no registered harness AND no scan
+ * root. A machine with a root configured but nothing found is NOT first
+ * boot; it is an empty scan, and the Library's own empty state (which names
+ * the scan verb) is the honest answer there.
+ */
+export function shouldOnboard(view, harnessCount) {
+  if (harnessCount > 0) return false;
+  if (!view || typeof view !== "object") return false;
+  return view.firstBoot === true;
+}

package/assets/js/views/overview.js

@@ -0,0 +1,196 @@
+/**
+ * Harness detail — Overview tab: the process card (M2's Start/Stop/Restart/
+ * Drain, with the preflight-refusal flow), health checklist, eval trend
+ * mini-line, memory-fabric mini-cards, cost mini-chart, and the expandable
+ * preflight report. Every absent payload renders as "nothing yet".
+ */
+
+import { api } from "../api.js";
+import { clear, collapsible, dot, el, emptyState, skeleton, svgEl } from "../dom.js";
+import {
+  barRects,
+  fmtCount,
+  fmtPct,
+  fmtUsd,
+  healthChecks,
+  sparklinePath,
+  usdFromMicros,
+} from "../util.js";
+import { procCard } from "./proc.js";
+
+export async function renderOverview(root, ctx) {
+  clear(root).appendChild(skeleton(5));
+  const [preflightRes, evalsRes, costsRes] = await Promise.allSettled([
+    api.preflight(ctx.id),
+    api.evals(ctx.id),
+    api.costs(ctx.id),
+  ]);
+  clear(root);
+  // The process picture came with the page load — render it without a
+  // second fetch, at the top, because it is the only card with verbs.
+  if (ctx.proc) root.appendChild(procCard(ctx.proc, ctx, ctx.reload ?? (() => {})));
+  const grid = el("div", { class: "ov-grid" });
+  grid.appendChild(healthCard(ctx.detail));
+  grid.appendChild(evalTrendCard(settled(evalsRes)));
+  grid.appendChild(memoryCard(ctx.detail));
+  grid.appendChild(costCard(settled(costsRes)));
+  root.appendChild(grid);
+  root.appendChild(preflightCard(settled(preflightRes)));
+}
+
+function settled(res) {
+  return res.status === "fulfilled" ? res.value : null;
+}
+
+function card(title, children) {
+  return el("section", { class: "card ov-card" }, [
+    el("h3", { class: "card-title", text: title }),
+    ...(Array.isArray(children) ? children : [children]),
+  ]);
+}
+
+function healthCard(detail) {
+  // The detail payload's `health` is the server's HarnessHealth record;
+  // `healthChecks` maps its fields into checklist rows.
+  const checks = healthChecks(detail?.health);
+  if (checks.length === 0) {
+    return card("Health", emptyState("No health data yet", "crewhaus doctor"));
+  }
+  return card(
+    "Health",
+    el(
+      "ul",
+      { class: "check-list" },
+      checks.map((c) =>
+        el("li", null, [
+          dot(c.state, c.label),
+          c.reason ? el("span", { class: "muted reason", text: c.reason }) : null,
+        ]),
+      ),
+    ),
+  );
+}
+
+function evalTrendCard(evals) {
+  const runs = Array.isArray(evals) ? evals : Array.isArray(evals?.runs) ? evals.runs : [];
+  if (runs.length === 0) {
+    return card("Eval trend", emptyState("No evals yet", "crewhaus eval"));
+  }
+  const chronological = [...runs].reverse();
+  const rates = chronological
+    .map((r) => (typeof r.passRate === "number" ? r.passRate : null))
+    .filter((v) => v !== null)
+    .slice(-12);
+  const latest = rates.length > 0 ? rates[rates.length - 1] : null;
+  const path = sparklinePath(rates, 220, 44);
+  const children = [
+    el("div", { class: "big-stat" }, [
+      el("span", { class: "stat-num", text: fmtPct(latest) }),
+      el("span", { class: "muted", text: ` latest pass rate · ${runs.length} runs` }),
+    ]),
+  ];
+  if (path !== "") {
+    children.push(
+      svgEl(
+        "svg",
+        { class: "spark", viewBox: "0 0 220 44", role: "img", "aria-label": "pass-rate trend" },
+        [svgEl("path", { d: path, fill: "none", "stroke-width": "2" })],
+      ),
+    );
+  }
+  return card("Eval trend", children);
+}
+
+function memoryCard(detail) {
+  // The detail payload carries small counts only: { facts, articles }.
+  const mem = detail?.memory && typeof detail.memory === "object" ? detail.memory : null;
+  if (mem === null) {
+    return card("Memory fabric", emptyState("No memory data yet", "crewhaus remember"));
+  }
+  const mini = (label, value) =>
+    el("div", { class: "mini" }, [
+      el("div", { class: "mini-num", text: value }),
+      el("div", { class: "mini-label", text: label }),
+    ]);
+  return card(
+    "Memory fabric",
+    el("div", { class: "mini-row" }, [
+      mini("live facts", fmtCount(mem.facts)),
+      mini("wiki articles", fmtCount(mem.articles)),
+    ]),
+  );
+}
+
+function costCard(payload) {
+  // `/api/h/:id/costs` returns { id, costs: { spend7dUsdMicros, days, … } }.
+  const costs = payload?.costs && typeof payload.costs === "object" ? payload.costs : null;
+  const days = Array.isArray(costs?.days) ? costs.days : [];
+  if (costs === null || (costs.calls === 0 && days.every((d) => d.usdMicros === 0))) {
+    return card(
+      "Spend (7d)",
+      emptyState("No cost data yet", "crewhaus run (cost tracking is on by default)"),
+    );
+  }
+  const values = days.map((d) => usdFromMicros(d.usdMicros) ?? 0);
+  const total = usdFromMicros(costs.spend7dUsdMicros);
+  const rects = barRects(values.slice(-7), 220, 44);
+  return card("Spend (7d)", [
+    el("div", { class: "big-stat" }, [el("span", { class: "stat-num", text: fmtUsd(total) })]),
+    svgEl(
+      "svg",
+      { class: "bars", viewBox: "0 0 220 44", role: "img", "aria-label": "daily spend bars" },
+      rects.map((r) => svgEl("rect", { x: r.x, y: r.y, width: r.w, height: r.h, rx: "1" })),
+    ),
+  ]);
+}
+
+const LEVEL_META = {
+  info: { mark: "✓", state: "ok" },
+  warn: { mark: "⚠", state: "warn" },
+  blocking: { mark: "✗", state: "bad" },
+};
+
+function preflightCard(payload) {
+  // The preflight route returns { report, envFiles }; tolerate a bare report.
+  const report = payload?.report && typeof payload.report === "object" ? payload.report : payload;
+  const items = Array.isArray(report?.items) ? report.items : [];
+  if (items.length === 0) {
+    return card("Preflight", emptyState("No preflight report yet", "crewhaus harness preflight"));
+  }
+  const warns = items.filter((i) => i.level === "warn").length;
+  const blocking = items.filter((i) => i.level === "blocking").length;
+  const summaryLine = `${items.length} checks · ${warns} warning${warns === 1 ? "" : "s"} · ${blocking} blocking`;
+  const list = el(
+    "div",
+    { class: "preflight-list" },
+    items.map((item) => {
+      const meta = LEVEL_META[item.level] ?? LEVEL_META.info;
+      return collapsible(
+        [
+          el("span", { class: `pf-mark pf-${meta.state}`, "aria-hidden": "true", text: meta.mark }),
+          el("span", { class: "pf-level", text: item.level ?? "info" }),
+          el("span", { class: "pf-area muted", text: item.area ?? "" }),
+          el("span", { class: "pf-msg", text: item.message ?? "" }),
+        ],
+        [
+          item.remediation
+            ? el("p", null, [el("strong", { text: "Fix: " }), item.remediation])
+            : el("p", { class: "muted", text: "No remediation recorded." }),
+          item.envVar ? el("p", { class: "mono muted", text: `env: ${item.envVar}` }) : null,
+        ],
+        item.level === "blocking",
+      );
+    }),
+  );
+  return el("section", { class: "card ov-card ov-wide" }, [
+    el("h3", { class: "card-title" }, [
+      el("span", { text: "Preflight" }),
+      el("span", { class: "muted card-sub", text: summaryLine }),
+      dot(
+        blocking > 0 ? "bad" : warns > 0 ? "warn" : "ok",
+        blocking > 0 ? "will not boot" : warns > 0 ? "degraded" : "ready",
+      ),
+    ]),
+    list,
+  ]);
+}