@tsplc/debug 0.0.0-stage → 0.2.17

package/src/ui/jobs.ts

@@ -0,0 +1,249 @@
+import type { JobState, RequestTrace } from "../api.ts";
+import { type View, empty, h, pathLink, recordSourceLink, sourceLink } from "./dom.ts";
+import { formatDuration } from "./format.ts";
+import type { Store } from "./store.ts";
+
+type JobFilter = "all" | "busy" | "failed";
+
+/** Failed while idle since its last unhandled failure: a later start that ended well clears it. */
+const failed = (job: JobState) =>
+  job.busy === false &&
+  job.failure !== undefined &&
+  (job.startedAt === undefined || job.failure.at >= job.startedAt);
+
+const jobStatus = (job: JobState) => {
+  if (job.cancelling) return "cancelling";
+  if (job.busy) return "busy";
+  if (job.busy === null) return "unknown";
+  if (failed(job)) return "failed";
+  return "idle";
+};
+
+export const isActive = (job: JobState) => job.busy === true || failed(job);
+
+const failureName = (store: Store, failure: NonNullable<JobState["failure"]>) =>
+  failure.name ?? store.manifest.errors[String(failure.code)] ?? `error ${failure.code}`;
+
+/**
+ * A traced request's job, as a link: the user's job that awaits a compiler-made service job, which
+ * is the one whose id the request carries, or that job itself.
+ */
+export const requestJobLink = (store: Store, id: number, sequence: number | undefined) => {
+  const { jobs } = store.manifest;
+  const job =
+    jobs.find((job) => !job.generated && job.requests.some((call) => call.job === id)) ??
+    jobs.find((job) => job.id === id);
+  return h(
+    "a",
+    { href: `#/jobs?id=${job?.id ?? id}` },
+    job ? `${job.name}${job.instance ? ` · ${job.instance}` : ""}` : `job ${id}`,
+    ` #${sequence ?? "?"}`,
+  );
+};
+
+export const requestStatus = (trace: RequestTrace) =>
+  h(
+    "span",
+    { class: `st st-${trace.status}` },
+    trace.status,
+    trace.httpStatus === undefined ? "" : ` ${trace.httpStatus}`,
+  );
+
+/** One job: what it is, where it is waiting and what it asked the backend. */
+export const jobRow = (store: Store, job: JobState, highlighted = false) => {
+  const definition = store.manifest.jobs.find((candidate) => candidate.id === job.id);
+  const status = jobStatus(job);
+  const trace = job.request?.trace;
+  const quality = store.connected ? job.quality : "stale";
+  return h(
+    "tr",
+    { class: highlighted ? "highlight" : undefined, id: `job-${job.id}` },
+    h(
+      "td",
+      {},
+      h("b", { class: "mono" }, definition?.name ?? `job ${job.id}`),
+      definition ? h("div", {}, sourceLink(store, definition.declaration)) : "",
+    ),
+    h(
+      "td",
+      {},
+      definition?.instance ? pathLink(definition.instance) : h("span", { class: "dim" }, "—"),
+    ),
+    h(
+      "td",
+      {},
+      h(
+        "span",
+        {
+          class: `st st-${status}`,
+          title:
+            status === "unknown" ? "Not read: shown jobs are read through the login" : undefined,
+        },
+        status,
+      ),
+      quality === "good" || job.busy === null
+        ? ""
+        : h("span", { class: `meta s-${quality}` }, ` ${quality}`),
+    ),
+    h(
+      "td",
+      { class: "await" },
+      job.unread
+        ? h("span", { class: "dim" }, "details not read (too many busy jobs)")
+        : job.current
+          ? h(
+              "span",
+              {},
+              h("span", { class: "tag" }, job.current.kind),
+              " ",
+              h("code", {}, job.current.text),
+              " ",
+              sourceLink(store, job.current.range),
+            )
+          : h("span", { class: "dim" }, "—"),
+    ),
+    h(
+      "td",
+      { class: "mono num" },
+      job.elapsedMs === undefined ? "—" : formatDuration(job.elapsedMs),
+    ),
+    h(
+      "td",
+      { class: "err" },
+      job.failure
+        ? h(
+            "span",
+            { title: `Unhandled at ${job.failure.at}` },
+            failureName(store, job.failure),
+            " ",
+            recordSourceLink(store, job.failure.source),
+          )
+        : "",
+    ),
+    h(
+      "td",
+      { class: "nowrap" },
+      job.request
+        ? h(
+            "span",
+            {},
+            h(
+              "a",
+              { href: `#/requests?seq=${trace?.seq ?? ""}`, class: "mono" },
+              `${job.request.service} #${job.request.sequence}`,
+            ),
+            " ",
+            trace ? requestStatus(trace) : h("span", { class: "dim" }, "no trace"),
+            trace?.durationMs === undefined
+              ? ""
+              : h("span", { class: "mono dim" }, ` ${formatDuration(trace.durationMs)}`),
+          )
+        : h("span", { class: "dim" }, "—"),
+    ),
+  );
+};
+
+export const jobTable = (rows: HTMLElement[]) =>
+  h(
+    "table",
+    { class: "grid jobs" },
+    h(
+      "thead",
+      {},
+      h(
+        "tr",
+        {},
+        ...["Function", "Instance", "State", "Waiting on", "Elapsed", "Error", "Request"].map(
+          (label) => h("th", {}, label),
+        ),
+      ),
+    ),
+    h("tbody", {}, ...rows),
+  );
+
+const FILTERS: JobFilter[] = ["all", "busy", "failed"];
+const filters: Record<JobFilter, { label: string; keep: (job: JobState) => boolean }> = {
+  all: { label: "All", keep: () => true },
+  busy: { label: "Busy", keep: (job) => job.busy === true },
+  failed: { label: "Failed", keep: failed },
+};
+
+export const jobsView = (store: Store, params: URLSearchParams): View => {
+  let filter = FILTERS.find((key) => key === params.get("filter")) ?? "all";
+  const highlighted = Number(params.get("id") ?? Number.NaN);
+  // Compiler-made jobs, such as each service call's own, are hidden unless asked for or linked to.
+  const generated = new Set(
+    store.manifest.jobs.filter((job) => job.generated).map((job) => job.id),
+  );
+  const generatedToggle = h("input", { type: "checkbox", checked: generated.has(highlighted) });
+  const shown = (job: { id: number }) => generatedToggle.checked || !generated.has(job.id);
+  const bar = h("div", { class: "tabs" });
+  const body = h("div");
+  const render = () => {
+    bar.replaceChildren(
+      ...FILTERS.map((key) =>
+        h(
+          "button",
+          {
+            class: `tab${key === filter ? " on" : ""}`,
+            onclick: () => {
+              filter = key;
+              history.replaceState(null, "", `#/jobs?filter=${key}`);
+              render();
+            },
+          },
+          filters[key].label,
+          h(
+            "span",
+            { class: "n" },
+            String(
+              [...store.jobs.values()].filter((job) => shown(job) && filters[key].keep(job)).length,
+            ),
+          ),
+        ),
+      ),
+      h("label", { class: "check" }, generatedToggle, "show generated"),
+    );
+    const jobs = [...store.jobs.values()]
+      .filter((job) => shown(job) && filters[filter].keep(job))
+      .sort((a, b) => Number(isActive(b)) - Number(isActive(a)) || a.id - b.id);
+    body.replaceChildren(
+      jobs.length
+        ? jobTable(jobs.map((job) => jobRow(store, job, job.id === highlighted)))
+        : empty("No jobs match."),
+    );
+  };
+  const showJobs = () =>
+    store.show({
+      jobs: store.manifest.jobs.filter(shown).map(({ id }) => id),
+    });
+  generatedToggle.addEventListener("change", () => {
+    showJobs();
+    render();
+  });
+  render();
+  showJobs();
+  return {
+    element: h(
+      "div",
+      { class: "page" },
+      h("h1", {}, "Jobs"),
+      h(
+        "p",
+        { class: "hint" },
+        "Busy and idle come from the trace when it is on; otherwise each listed job's busy flag is read through the login, and the details of busy ones. Failures are the program's unhandled exceptions.",
+      ),
+      bar,
+      body,
+    ),
+    update(topics) {
+      if (
+        topics.has("jobs") ||
+        topics.has("stream") ||
+        topics.has("session") ||
+        topics.has("timeline")
+      )
+        render();
+    },
+  };
+};

package/src/ui/main.ts

@@ -0,0 +1,74 @@
+import { getJson } from "./client.ts";
+import { type View, h } from "./dom.ts";
+import { hardwareView } from "./hardware.ts";
+import { ROUTES, type Route, header } from "./header.ts";
+import { jobsView } from "./jobs.ts";
+import { overviewView } from "./overview.ts";
+import { recentView } from "./recent.ts";
+import { requestsView } from "./requests.ts";
+import { Store } from "./store.ts";
+import { variablesView } from "./variables.ts";
+
+interface RouteMatch {
+  route: Route;
+  rest: string[];
+  params: URLSearchParams;
+}
+
+const parseHash = (): RouteMatch => {
+  const [path = "", query = ""] = location.hash.replace(/^#\/?/, "").split("?");
+  const [name, ...rest] = path.split("/");
+  return {
+    route: ROUTES.find((route) => route === name) ?? "overview",
+    rest: rest.map(decodeURIComponent),
+    params: new URLSearchParams(query),
+  };
+};
+
+const views: Record<Route, (store: Store, at: RouteMatch) => View> = {
+  overview: (store) => overviewView(store),
+  variables: (store, at) => variablesView(store, at.params),
+  hardware: (store, at) => hardwareView(store, at.rest[0]),
+  jobs: (store, at) => jobsView(store, at.params),
+  recent: (store) => recentView(store),
+  requests: (store, at) => requestsView(store, at.params),
+};
+
+const start = async () => {
+  const [manifest, session] = await Promise.all([getJson("manifest"), getJson("session")]);
+  let view: View | undefined;
+  const store = new Store(manifest, session, (topics) => {
+    top.update(topics);
+    view?.update(topics);
+  });
+  const top = header(store);
+  const main = h("main");
+  document.body.replaceChildren(top.element, main);
+
+  const show = () => {
+    const at = parseHash();
+    view?.dispose?.();
+    view = views[at.route](store, at);
+    top.setRoute(at.route);
+    main.replaceChildren(view.element);
+    main.scrollTop = 0;
+  };
+  addEventListener("hashchange", show);
+  show();
+};
+
+start().catch((error: unknown) =>
+  document.body.replaceChildren(
+    h(
+      "div",
+      { class: "fatal" },
+      h("h1", {}, "The debugger could not start"),
+      h("p", {}, error instanceof Error ? error.message : String(error)),
+      h(
+        "p",
+        { class: "dim" },
+        "Check that the debugger host is running and, under the agent, that the URL carries a valid ?token=.",
+      ),
+    ),
+  ),
+);

package/src/ui/overview.ts

@@ -0,0 +1,123 @@
+import { type Health, type View, deviceHealth, empty, h, healthBadge } from "./dom.ts";
+import { formatAge, formatClock, formatInterval } from "./format.ts";
+import { isActive, jobRow, jobTable } from "./jobs.ts";
+import { recentEntry } from "./recent.ts";
+import type { Store } from "./store.ts";
+
+const HEALTH_ORDER: Health[] = ["fault", "stale", "unknown", "ok"];
+const RECENT_EVENTS = 12;
+
+export const overviewView = (store: Store): View => {
+  const connection = h("section", { class: "panel" });
+  const devices = h("section", { class: "panel" });
+  const jobs = h("section", { class: "panel wide" });
+  const events = h("section", { class: "panel wide" });
+
+  const renderConnection = () => {
+    const { session } = store;
+    connection.replaceChildren(
+      h("h2", {}, "Connection"),
+      h(
+        "dl",
+        { class: "facts" },
+        h("dt", {}, "Values"),
+        h(
+          "dd",
+          {},
+          h("span", { class: `st st-${session.connection.state}` }, session.connection.state),
+          ` since ${formatClock(session.connection.since)} (${formatAge(store.ageOf(session.connection.since))})`,
+        ),
+        h("dt", {}, "Endpoint"),
+        h("dd", { class: "mono" }, session.connection.endpoint),
+        session.connection.error && h("dt", {}, "Error"),
+        session.connection.error && h("dd", { class: "err" }, session.connection.error),
+        h("dt", {}, "Debugger host"),
+        h("dd", {}, store.stream === "open" ? "streaming" : `${store.stream}…`),
+        h("dt", {}, "Reading"),
+        h(
+          "dd",
+          {},
+          `${session.reading.method}, every ${formatInterval(session.reading.intervalMs)}; values older than ${formatInterval(3 * session.reading.intervalMs)} are marked stale`,
+        ),
+      ),
+    );
+  };
+
+  const renderDevices = () => {
+    const healths = store.manifest.devices.map((device) => ({
+      device,
+      health: deviceHealth(store, device),
+    }));
+    const attention = healths.filter(({ health }) => health.health !== "ok");
+    devices.replaceChildren(
+      h("h2", {}, h("a", { href: "#/hardware" }, "Devices")),
+      h(
+        "div",
+        { class: "counts" },
+        ...HEALTH_ORDER.map((health) =>
+          h(
+            "div",
+            { class: `count-box h-${health}` },
+            h("b", {}, String(healths.filter((entry) => entry.health.health === health).length)),
+            h("span", {}, health),
+          ),
+        ),
+      ),
+      ...attention.map(({ device, health }) =>
+        h(
+          "div",
+          { class: "device-line" },
+          healthBadge(health),
+          " ",
+          h("a", { href: `#/hardware/${encodeURIComponent(device.id)}`, class: "mono" }, device.id),
+          h("span", { class: "dim" }, ` ${health.detail}`),
+        ),
+      ),
+    );
+  };
+
+  // The jobs this page reads: the program's own, as the Jobs page shows them by default.
+  const shown = new Set(store.manifest.jobs.filter((job) => !job.generated).map(({ id }) => id));
+  const renderJobs = () => {
+    const active = [...store.jobs.values()].filter((job) => shown.has(job.id) && isActive(job));
+    jobs.replaceChildren(
+      h("h2", {}, h("a", { href: "#/jobs" }, "Active jobs")),
+      h("p", { class: "hint" }, "Busy, or failed since they last started."),
+      active.length
+        ? jobTable(active.map((job) => jobRow(store, job)))
+        : empty("No job is busy or failed."),
+    );
+  };
+
+  const renderEvents = () => {
+    const recent = store.timeline
+      .filter((entry) => entry.kind === "app" || entry.kind === "trace")
+      .slice(-RECENT_EVENTS)
+      .reverse();
+    events.replaceChildren(
+      h("h2", {}, h("a", { href: "#/recent" }, "Recent events")),
+      ...(recent.length
+        ? recent.map((entry) => recentEntry(store, entry))
+        : [empty("The program has reported nothing recently.")]),
+    );
+  };
+
+  renderConnection();
+  renderDevices();
+  renderJobs();
+  renderEvents();
+  store.show({
+    health: store.manifest.devices.filter((device) => device.health).map(({ id }) => id),
+    jobs: [...shown],
+  });
+  return {
+    element: h("div", { class: "page overview" }, connection, devices, jobs, events),
+    update(topics) {
+      const live = topics.has("session") || topics.has("stream");
+      if (live || topics.has("clock")) renderConnection();
+      if (live || topics.has("devices")) renderDevices();
+      if (live || topics.has("jobs") || topics.has("timeline")) renderJobs();
+      if (topics.has("timeline")) renderEvents();
+    },
+  };
+};

package/src/ui/page.ts

@@ -0,0 +1,178 @@
+const css = `
+:root{color-scheme:dark;
+--bg:#0c0e11;--grid:rgba(255,255,255,.025);--panel:#13161b;--panel-2:#191d23;--line:#262b33;--line-soft:#1d2128;
+--fg:#d8dce2;--dim:#7c848f;--accent:#f2a33a;--link:#79c0ff;
+--live:#5ee0a0;--uncertain:#f3c64a;--bad:#ff6b6b;--stale:#8a919b;--unavailable:#5a616b;--constant:#b8a2ff;
+--hatch:rgba(138,145,155,.16);
+--mono:"JetBrains Mono","Cascadia Mono","IBM Plex Mono","SF Mono",Menlo,Consolas,monospace;
+--sans:"IBM Plex Sans","Segoe UI Variable Text","Segoe UI","Helvetica Neue",sans-serif}
+@media (prefers-color-scheme:light){:root{color-scheme:light;
+--bg:#f3f1ec;--grid:rgba(0,0,0,.035);--panel:#fffefb;--panel-2:#f6f4ef;--line:#d8d3c8;--line-soft:#e7e3da;
+--fg:#1b1e22;--dim:#6a6e75;--accent:#b5650a;--link:#0a5bb0;
+--live:#0d8048;--uncertain:#9a6400;--bad:#c42525;--stale:#767b83;--unavailable:#a1a6ad;--constant:#6447cc;
+--hatch:rgba(118,123,131,.16)}}
+*{box-sizing:border-box}
+html,body{height:100%}
+body{margin:0;font:13px/1.45 var(--sans);color:var(--fg);background:var(--bg);
+background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
+background-size:24px 24px;display:grid;grid-template-rows:auto minmax(0,1fr);font-variant-numeric:tabular-nums}
+a{color:var(--link);text-decoration:none}a:hover{text-decoration:underline}
+code,.mono,.path,.src{font-family:var(--mono);font-size:12px}
+.src,.nowrap,.grid td.num{white-space:nowrap}
+code{color:var(--fg);background:var(--panel-2);border:1px solid var(--line-soft);border-radius:3px;padding:0 4px}
+.dim,.hint,.empty{color:var(--dim)}.hint{margin:4px 0 12px}.empty{margin:8px 0;font-style:italic}
+.err{color:var(--bad)}.num{text-align:right}
+button,input{font:inherit;color:inherit}
+button{background:var(--panel-2);border:1px solid var(--line);border-radius:4px;padding:3px 10px;cursor:pointer}
+button:hover{border-color:var(--dim)}button.primary{background:var(--accent);border-color:var(--accent);color:#16110a;font-weight:600}
+button:disabled{opacity:.5;cursor:default}
+input{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:4px 8px}
+input:focus,button:focus-visible,.vlist:focus-visible{outline:1px solid var(--accent);outline-offset:1px}
+h1{font:600 18px var(--sans);margin:0 0 12px;letter-spacing:-.01em}
+h2{font:600 10.5px var(--sans);text-transform:uppercase;letter-spacing:.14em;color:var(--dim);margin:0 0 10px}
+h2 a{color:inherit}h3{font:600 12px var(--sans);margin:14px 0 6px}
+
+header{background:var(--panel);border-top:2px solid var(--accent);border-bottom:1px solid var(--line)}
+.bar{display:flex;align-items:stretch;gap:0;overflow-x:auto}
+.brand{display:flex;align-items:center;gap:6px;padding:8px 16px;border-right:1px solid var(--line);white-space:nowrap}
+.brand b{font:700 13px var(--mono);letter-spacing:.04em}.brand span{font:500 13px var(--mono);color:var(--accent)}
+.brand .ro{font:600 9.5px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line);border-radius:3px;padding:1px 5px;margin-left:6px}
+.readouts{display:flex;flex:1}
+.readout{display:flex;flex-direction:column;justify-content:center;padding:6px 14px;border-right:1px solid var(--line-soft);white-space:nowrap}
+.readout .label{font:600 9px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
+.readout .reading{font:12px var(--mono);display:flex;align-items:center;gap:8px}
+.build.match i{color:var(--live);font-style:normal}.build.mismatch{color:var(--bad)}.build.mismatch i{font-style:normal;font-weight:700}
+.task b{color:var(--fg);font-weight:600}
+.dot{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--unavailable)}
+.dot.c-connected{background:var(--live);box-shadow:0 0 6px var(--live)}.dot.c-lost,.dot.c-failed{background:var(--bad)}.dot.c-unavailable{background:var(--uncertain)}
+.dot.c-connecting{background:var(--uncertain);animation:pulse 1s infinite alternate}
+@keyframes pulse{to{opacity:.3}}
+nav{display:flex;gap:2px;padding:0 10px;border-top:1px solid var(--line-soft)}
+nav a{color:var(--dim);padding:7px 12px 6px;text-transform:capitalize;border-bottom:2px solid transparent;font-weight:500}
+nav a:hover{color:var(--fg);text-decoration:none}nav a.on{color:var(--fg);border-bottom-color:var(--accent)}
+.banner{padding:7px 16px;font-weight:600;display:flex;gap:12px;align-items:center}
+.banner.danger{background:var(--bad);color:#fff}
+.banner.warn{background:repeating-linear-gradient(135deg,var(--uncertain) 0 14px,color-mix(in srgb,var(--uncertain) 85%,#000) 14px 28px);color:#1b1404}
+.banner.error{background:var(--panel-2);color:var(--bad);border-top:1px solid var(--bad)}
+.banner button{margin-left:auto}
+
+main{overflow:auto;min-height:0}
+.page{padding:16px 18px 28px;animation:enter .18s ease-out}
+@keyframes enter{from{opacity:0;transform:translateY(3px)}}
+.panel{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:12px 14px}
+.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:10px}
+.check{display:inline-flex;gap:5px;align-items:center;color:var(--dim);cursor:pointer}.check input{margin:0}
+.sep{margin-left:8px}.count{color:var(--dim);font:12px var(--mono);margin-left:auto}
+.tabs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px;align-items:center}
+.tab{background:transparent}.tab.on{border-color:var(--accent);color:var(--fg)}
+.tab .n{color:var(--dim);margin-left:6px;font:11px var(--mono)}
+.tag{font:600 9.5px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line);border-radius:3px;padding:0 4px;margin:0 4px}
+dl{display:grid;grid-template-columns:max-content 1fr;gap:3px 14px;margin:0}dt{color:var(--dim)}dd{margin:0;min-width:0;overflow-wrap:anywhere}
+.facts{margin-bottom:14px}.readings dd{display:flex;gap:8px;align-items:baseline}
+.crumbs{color:var(--dim);margin-bottom:4px}
+
+table.grid{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:6px}
+.grid th{font:600 9.5px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);text-align:left;padding:7px 10px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel)}
+.grid td{padding:6px 10px;border-bottom:1px solid var(--line-soft);vertical-align:top}
+.grid tr:last-child td{border-bottom:0}.link-row{cursor:pointer}.link-row:hover td{background:var(--panel-2)}
+tr.highlight td{background:color-mix(in srgb,var(--accent) 12%,transparent)}
+
+.value{font:12.5px var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.meta{font:11px var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.meta::before{display:inline-block;width:1.4ch}
+.s-live{color:var(--live)}.meta.s-live::before{content:"●"}
+.s-uncertain{color:var(--uncertain)}.value.s-uncertain{text-decoration:underline dotted}.meta.s-uncertain::before{content:"◐"}
+.s-bad{color:var(--bad)}.value.s-bad{text-decoration:line-through}.meta.s-bad::before{content:"✕"}
+.s-stale{color:var(--stale)}.value.s-stale{background:repeating-linear-gradient(135deg,transparent 0 4px,var(--hatch) 4px 8px)}.meta.s-stale::before{content:"○"}
+.s-unavailable{color:var(--unavailable)}.meta.s-unavailable::before{content:"–"}
+.s-constant{color:var(--constant)}.value.s-constant{font-style:italic}.meta.s-constant::before{content:"◆"}
+.s-group{color:var(--dim)}
+
+.variables{height:100%;display:flex;flex-direction:column;padding-bottom:12px}
+.search{flex:1;min-width:280px;max-width:640px;font-family:var(--mono);font-size:12.5px;padding:6px 10px}
+.split{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:12px}
+.listwrap{display:flex;flex-direction:column;min-height:0;background:var(--panel);border:1px solid var(--line);border-radius:6px;overflow:hidden}
+.vlist{flex:1;overflow:auto;position:relative;outline:none}
+.vspacer{position:relative}.vwindow{position:absolute;left:0;right:0;top:0}
+.row{display:grid;grid-template-columns:minmax(220px,1fr) minmax(90px,15ch) 21ch 17ch 40px minmax(110px,19ch);gap:8px;align-items:center;height:26px;padding-right:10px;border-bottom:1px solid var(--line-soft);cursor:default}
+.row:hover{background:var(--panel-2)}.row.selected{background:color-mix(in srgb,var(--accent) 13%,transparent);box-shadow:inset 2px 0 0 var(--accent)}
+.row.head{font:600 9.5px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);border-bottom:1px solid var(--line);padding-left:10px}
+.row.generated .name{opacity:.7}
+.name{font:12.5px var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center}
+.name mark{background:color-mix(in srgb,var(--accent) 35%,transparent);color:inherit;border-radius:2px}
+.twisty{display:inline-grid;place-items:center;width:18px;height:18px;flex:none;padding:0;border:0;background:none;color:var(--dim);font-size:10px}
+.type{font:11.5px var(--mono);color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.row .src{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}
+.rec{padding:0;width:22px;height:18px;border:1px solid transparent;background:none;color:var(--line);font-size:11px}
+.rec:hover{color:var(--dim);border-color:var(--line)}.rec.on{color:var(--bad)}.rec.elsewhere{color:var(--dim)}
+.side{display:flex;flex-direction:column;gap:12px;overflow:auto;min-height:0}
+.detail-path{font-size:12.5px;overflow-wrap:anywhere;margin-bottom:8px;color:var(--fg)}
+.detail-value{display:flex;gap:12px;align-items:baseline;margin-bottom:10px;padding:8px 10px;background:var(--panel-2);border-radius:4px}
+.detail-value .value{font-size:20px}.detail .site{margin:3px 0}.detail button{margin-top:10px}
+.member{display:grid;grid-template-columns:minmax(0,1fr) auto auto 22px;gap:8px;align-items:center;padding:3px 0;border-bottom:1px solid var(--line-soft)}
+.member .path{font-size:11.5px}.remove{padding:0 5px;border:0;background:none;color:var(--dim)}
+.groups form input{width:110px;padding:2px 6px}
+
+.badge{display:inline-block;font:600 10.5px var(--mono);letter-spacing:.04em;padding:1px 7px;border-radius:3px;border:1px solid;text-transform:uppercase}
+.h-ok{color:var(--live);border-color:var(--live)}
+.h-fault{color:#fff;background:var(--bad);border-color:var(--bad)}
+.h-stale{color:var(--stale);border-color:var(--stale);background:repeating-linear-gradient(135deg,transparent 0 4px,var(--hatch) 4px 8px)}
+.h-unknown{color:var(--dim);border-color:var(--dim);border-style:dashed}
+.st{font:600 11px var(--mono);text-transform:lowercase}
+.st-busy,.st-pending,.st-connecting,.st-cancelling{color:var(--uncertain)}
+.st-failed,.st-error,.st-timeout,.st-lost{color:var(--bad)}.st-unavailable{color:var(--uncertain)}
+.st-done,.st-ok,.st-connected{color:var(--live)}.st-idle,.st-unknown{color:var(--dim)}
+.await code{white-space:pre-wrap}
+
+.overview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
+.overview .wide{grid-column:1/-1}
+.overview>*{animation:enter .25s ease-out backwards}.overview>:nth-child(2){animation-delay:.04s}.overview>:nth-child(3){animation-delay:.08s}.overview>:nth-child(4){animation-delay:.12s}
+.counts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}
+.count-box{border:1px solid;border-radius:5px;padding:6px 10px;display:flex;flex-direction:column}
+.count-box b{font:600 22px var(--mono)}.count-box span{font:600 9.5px var(--sans);letter-spacing:.14em;text-transform:uppercase}
+.count-box.h-fault{background:color-mix(in srgb,var(--bad) 12%,transparent);color:var(--bad)}
+.device-line{padding:3px 0}
+
+.assemblies{display:flex;flex-direction:column;gap:12px;margin-bottom:18px}
+.assembly h3{margin:0 0 10px}
+.bitgrid{display:grid;grid-template-columns:4ch repeat(8,52px) 4ch minmax(0,1fr);gap:3px;align-items:stretch}
+.bh{font:600 9.5px var(--mono);color:var(--dim);text-align:center;letter-spacing:.06em}.legend-head{text-align:left;padding-left:6px}
+.byte,.hex{font-size:11.5px;color:var(--dim);align-self:center}
+.bit{position:relative;height:34px;display:flex;flex-direction:column;align-items:center;justify-content:center;font:600 13px var(--mono);
+border:1px dashed var(--line);border-radius:3px;color:var(--unavailable)}
+.bit small{font:9px var(--mono);color:var(--dim);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px}
+.bit.mapped{border-style:solid;color:var(--dim);background:var(--panel-2)}
+.bit.on{color:var(--fg)}
+.bit.mapped.on{color:var(--live);background:color-mix(in srgb,var(--live) 16%,transparent);border-color:color-mix(in srgb,var(--live) 60%,transparent);box-shadow:0 0 8px color-mix(in srgb,var(--live) 25%,transparent)}
+.bit.none{color:var(--unavailable)}
+.q-stale .bit,.q-uncertain .bit,.q-bad .bit{background-image:repeating-linear-gradient(135deg,transparent 0 4px,var(--hatch) 4px 8px)}
+.q-stale .bit.on,.q-bad .bit.on{color:var(--stale);box-shadow:none;border-color:var(--line)}
+.legend{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;font-size:11.5px;padding-left:6px}
+.legend-item{display:inline-flex;gap:6px;align-items:baseline}.legend-item b{font:600 11px var(--mono)}
+.mapped-path{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
+
+.recent .entries{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:6px}
+.entry{display:grid;grid-template-columns:14ch 9ch minmax(0,1fr);gap:10px;padding:7px 12px;border-bottom:1px solid var(--line-soft)}
+.overview .entry{padding:6px 0}
+.when{color:var(--dim);font-size:11.5px}.approx{color:var(--uncertain);margin-left:4px;cursor:help}
+.source{font:600 9.5px var(--sans);letter-spacing:.12em;text-transform:uppercase;padding-top:2px}
+.src-plc{color:var(--accent)}.src-server{color:var(--link)}.src-agent{color:var(--constant)}.src-debugger{color:var(--dim)}
+.body>div{margin:1px 0}.val{font:600 12.5px var(--mono)}
+.chips{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-top:3px}
+.chip{display:inline-flex;align-items:baseline;gap:3px;font:11.5px var(--mono);border:1px solid var(--line);border-radius:10px;padding:0 8px;background:var(--panel-2)}
+.chip.unstable{border-style:dashed}
+.tag.lvl-info{color:var(--link);border-color:var(--link)}.tag.lvl-warn{color:var(--uncertain);border-color:var(--uncertain)}.tag.lvl-error{color:var(--bad);border-color:var(--bad)}
+.recent>button{margin-top:10px}
+
+.fatal{padding:40px;max-width:720px}.fatal h1{color:var(--bad)}
+@media (max-width:1100px){.split{grid-template-columns:minmax(0,1fr)}.side{max-height:40vh}.overview{grid-template-columns:minmax(0,1fr)}}
+`;
+
+/** The page shell; `./ui.js` builds everything from the API, so the same page works at `/` and under `/debug/`. */
+export const html = `<!doctype html>
+<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>tsPLC debug</title><link rel="icon" href="data:,">
+<script>if(!location.pathname.endsWith("/"))location.replace(location.pathname+"/"+location.search+location.hash)</script>
+<style>${css}</style></head>
+<body><p class="empty" style="padding:24px">Loading the debugger…</p>
+<script type="module" src="./ui.js"></script></body></html>`;