@jmcombs/pi-steward 0.0.0

package/ui/main.ts

@@ -0,0 +1,678 @@
+/**
+ * Bootstrap for the Steward dashboard.
+ *
+ * This module is the only place in the browser that touches the network or the
+ * clock: it polls `/api/snapshot`, holds the log stream open, dispatches
+ * actions at the reducer, and hands the resulting view model to the components.
+ * Nothing here derives a displayed value — that all lives in `core/select.ts`.
+ */
+
+import {
+  CONTEXT_LOST_QUERY,
+  consoleAnnouncement,
+  driftAnnouncement,
+  foldAnnouncement,
+  selectDashboard,
+  selectLogExportSummary,
+  selectLogText,
+  truncationAnnouncement,
+} from "../core/select.js";
+import type { FamilyFilter, LevelFilter, Theme, UiAction, UiState } from "../core/state.js";
+import { initialUiState, reduce } from "../core/state.js";
+import type { TemperaturePreference, TemperatureUnit } from "../core/temperature.js";
+import {
+  parseTemperaturePreference,
+  resolveTemperatureUnit,
+  temperatureUnitForLocales,
+} from "../core/temperature.js";
+import type {
+  LogLine,
+  LogStreamStatus,
+  ModelAction,
+  ServiceAction,
+  Snapshot,
+} from "../core/types.js";
+import { createLogConsole } from "./components/console.js";
+import { createHostBlock } from "./components/gauges.js";
+import { createMetricsBand } from "./components/metrics.js";
+import { createModelsBlock } from "./components/models.js";
+import { createServiceBlock } from "./components/service.js";
+import { createSlotsStrip } from "./components/slots.js";
+import { createSparkline } from "./components/sparkline.js";
+import { createToolbar } from "./components/toolbar.js";
+
+/** Matches the server's metrics cadence. */
+const SNAPSHOT_INTERVAL_MS = 1600;
+
+/** The uptime readouts tick between polls. */
+const CLOCK_INTERVAL_MS = 1000;
+
+/** How long the Copy button acknowledges for. */
+const COPY_FEEDBACK_MS = 1400;
+
+/** Backoff before re-opening a dropped log stream. */
+const RECONNECT_DELAY_MS = 2000;
+
+/**
+ * How long typing settles before the search result is announced. Announcing per
+ * keystroke would machine-gun the polite region; announcing the RESULT COUNT
+ * once the operator stops is the useful half of it.
+ */
+const QUERY_ANNOUNCE_MS = 500;
+
+const THEME_KEY = "steward.theme";
+
+const TEMPERATURE_KEY = "steward.temperature";
+
+const rail = document.getElementById("steward-rail");
+const main = document.getElementById("steward-main");
+const status = document.getElementById("steward-status");
+if (rail === null || main === null) throw new Error("Steward: the page shell is missing.");
+
+const storedTemperature = readTemperaturePreference();
+let ui: UiState = initialUiState(
+  readTheme(),
+  applyTemperature(storedTemperature),
+  storedTemperature,
+);
+let snapshot: Snapshot | null = null;
+let snapshotAt = 0;
+let copyTimer = 0;
+let queryTimer = 0;
+/** The drift notice already announced, so the poll cannot repeat it. */
+let announcedDrift: string | null = null;
+/** The console state already announced, so the render clock cannot repeat it. */
+let announcedConsole: string | null = null;
+/** Set once the truncation banner has been announced, so it is said once. */
+let announcedTruncation = false;
+
+// ---------------------------------------------------------------------------
+// Theme
+// ---------------------------------------------------------------------------
+
+/** The stored mode, defaulting to `system` when unset or unrecognized. */
+function readTheme(): Theme {
+  try {
+    const stored = localStorage.getItem(THEME_KEY);
+    if (stored === "dark" || stored === "light" || stored === "system") return stored;
+  } catch {
+    // Storage refused (private mode): fall through to the default.
+  }
+  return "system";
+}
+
+/** True when the OS currently asks for a dark palette. */
+function prefersDark(): boolean {
+  try {
+    return globalThis.matchMedia?.("(prefers-color-scheme: dark)").matches ?? false;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Applies a mode by resolving it to the light/dark palette. `system` follows the
+ * OS; the CSS contract is unchanged — `data-theme="dark"` present means dark, its
+ * absence means light — so `system` simply computes which to set. The persisted
+ * value is the *mode*, not the resolved palette, so `system` survives a reload.
+ */
+function applyTheme(theme: Theme): void {
+  const dark = theme === "dark" || (theme === "system" && prefersDark());
+  if (dark) document.documentElement.setAttribute("data-theme", "dark");
+  else document.documentElement.removeAttribute("data-theme");
+  try {
+    localStorage.setItem(THEME_KEY, theme);
+  } catch {
+    // Storage is optional; the choice simply will not survive a reload.
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Temperature unit
+// ---------------------------------------------------------------------------
+
+/**
+ * The locales this browser reports, most specific intent first.
+ *
+ * `Intl.DateTimeFormat` is asked first because it answers with the locale the
+ * runtime actually RESOLVED — the one it is already formatting dates and numbers
+ * with — while `navigator.language`/`languages` is the request list. In practice
+ * they agree; when they do not, the resolved one is what the rest of the page
+ * looks like. Every read is guarded: a browser that refuses any of them
+ * contributes nothing to the list rather than taking the page down.
+ */
+function browserLocales(): (string | null | undefined)[] {
+  const locales: (string | null | undefined)[] = [];
+  try {
+    locales.push(Intl.DateTimeFormat().resolvedOptions().locale);
+  } catch {
+    // No usable Intl data; the navigator list below may still name a region.
+  }
+  try {
+    const nav = globalThis.navigator as Navigator | undefined;
+    if (nav !== undefined) {
+      locales.push(nav.language);
+      for (const locale of nav.languages ?? []) locales.push(locale);
+    }
+  } catch {
+    // Same reasoning: an absent or hostile navigator is not an error here.
+  }
+  return locales;
+}
+
+/**
+ * The unit this browser's region implies. Celsius whenever nothing names a
+ * region — the honest answer for a browser that did not say where it is, and
+ * the right one for the overwhelming majority of regions that do.
+ */
+function detectTemperatureUnit(): TemperatureUnit {
+  return temperatureUnitForLocales(browserLocales());
+}
+
+/** The stored preference, defaulting to `auto` when unset or unrecognized. */
+function readTemperaturePreference(): TemperaturePreference {
+  try {
+    return parseTemperaturePreference(localStorage.getItem(TEMPERATURE_KEY));
+  } catch {
+    // Storage refused (private mode): fall through to the default.
+    return "auto";
+  }
+}
+
+/**
+ * Applies a preference and returns the unit to label with — `auto` resolved
+ * against the detected browser region, an explicit choice taken as given.
+ *
+ * The *preference* is what persists, not the resolved unit, so an operator on
+ * `auto` who travels or changes their OS region follows it rather than being
+ * pinned to whatever their first visit detected. That is the same split
+ * {@link applyTheme} makes between the `system` mode and the palette it resolves
+ * to. The HOST block's unit control calls this with the preference it cycled
+ * to; the bootstrap calls it once with the stored one.
+ */
+function applyTemperature(preference: TemperaturePreference): TemperatureUnit {
+  try {
+    localStorage.setItem(TEMPERATURE_KEY, preference);
+  } catch {
+    // Storage is optional; the choice simply will not survive a reload.
+  }
+  return resolveTemperatureUnit(preference, detectTemperatureUnit());
+}
+
+function announce(message: string): void {
+  if (status !== null) status.textContent = message;
+}
+
+// ---------------------------------------------------------------------------
+// Components
+// ---------------------------------------------------------------------------
+
+const serviceBlock = createServiceBlock({
+  onToggleTheme: () => {
+    dispatch({ type: "theme/toggle" });
+    applyTheme(ui.theme);
+    announce(`Theme set to ${ui.theme}.`);
+  },
+  onService: (action) => {
+    void runService(action);
+  },
+  onConfirmService: (action) => {
+    dispatch({ type: "service/confirm", action });
+  },
+  onCancelService: () => {
+    if (ui.confirmService === null) return;
+    announce("Cancelled.");
+    dispatch({ type: "service/confirm", action: null });
+  },
+  onDismissDrift: (key) => {
+    dispatch({ type: "drift/dismiss", key });
+    announce("Drift notice dismissed. It returns while the mismatch is still there.");
+  },
+});
+
+const hostBlock = createHostBlock({
+  onCycleTemperature: (next) => {
+    // `applyTemperature` persists the PREFERENCE and hands back the unit it
+    // resolves to; both halves ride one action so no repaint can land with the
+    // control's label and the gauges' unit disagreeing.
+    const unit = applyTemperature(next);
+    dispatch({ type: "temperature/unit", preference: next, unit });
+    // Said once, on the press. The control's own value cannot change without
+    // one, so the poll has nothing to repeat.
+    announce(
+      next === "auto"
+        ? `Temperature unit: automatic — ${unit === "celsius" ? "°C" : "°F"} from your region.`
+        : `Temperature unit: always ${next === "celsius" ? "°C" : "°F"}.`,
+    );
+  },
+});
+
+/**
+ * `88 of 340 lines` for the polite region — the result of a filter change, not
+ * the change itself. An operator who cannot see the console needs to know what
+ * the control did, and the count is the whole of what it did.
+ */
+function filterResult(): string {
+  if (snapshot === null) return "";
+  const counts = selectDashboard(snapshot, ui, snapshot.now).logCounts;
+  const hidden = counts.hiddenProxy > 0 ? ` ${counts.hiddenProxy} proxied lines are hidden.` : "";
+  return `${counts.matched} of ${counts.buffered} lines.${hidden}`;
+}
+
+/**
+ * The clause a filter announcement carries when it also closed a trace.
+ *
+ * The reducer clears the trace on every `filter/*` action, so a handler cannot
+ * forget it — but the OPERATOR still has to be told, in the same sentence as
+ * the thing they actually asked for. Read before the dispatch, since afterwards
+ * the trace is already gone.
+ */
+function traceClosedPrefix(): string {
+  return ui.trace === null ? "" : "Trace closed. ";
+}
+
+const modelsBlock = createModelsBlock({
+  onFilterModel: (modelId) => {
+    const closed = traceClosedPrefix();
+    dispatch({ type: "filter/model-toggle", modelId });
+    announce(
+      ui.filterModel === null
+        ? `${closed}Log showing all models — ${filterResult()}`
+        : `${closed}Log scoped to ${ui.filterModel} — ${filterResult()}`,
+    );
+  },
+  onShowAllLogs: () => {
+    const closed = traceClosedPrefix();
+    dispatch({ type: "filter/model", modelId: null });
+    announce(`${closed}Log showing all models — ${filterResult()}`);
+  },
+  onModelAction: (modelId, action) => {
+    void runModel(modelId, action);
+  },
+});
+
+const sparkline = createSparkline();
+const metricsBand = createMetricsBand(sparkline.el);
+
+const toolbar = createToolbar({
+  onLevel: (level: LevelFilter) => {
+    const closed = traceClosedPrefix();
+    dispatch({ type: "filter/level", level });
+    announce(`${closed}Level filter: ${level === "all" ? "any level" : level} — ${filterResult()}`);
+  },
+  onFamily: (family: FamilyFilter) => {
+    const closed = traceClosedPrefix();
+    dispatch({ type: "filter/family", family });
+    announce(`${closed}Kind filter: ${family === "any" ? "any kind" : family} — ${filterResult()}`);
+  },
+  onQuery: (query) => {
+    const closed = traceClosedPrefix();
+    dispatch({ type: "filter/query", query });
+    window.clearTimeout(queryTimer);
+    queryTimer = window.setTimeout(() => {
+      const trimmed = ui.query.trim();
+      announce(
+        trimmed === ""
+          ? `${closed}Search cleared — ${filterResult()}`
+          : `${closed}Search "${trimmed}": ${filterResult()}`,
+      );
+    }, QUERY_ANNOUNCE_MS);
+  },
+  onToggleProxy: () => {
+    const closed = traceClosedPrefix();
+    dispatch({ type: "filter/proxy-toggle" });
+    if (snapshot === null) return;
+    const counts = selectDashboard(snapshot, ui, snapshot.now).logCounts;
+    announce(
+      ui.showProxy
+        ? `${closed}Proxied requests shown. ${counts.matched} of ${counts.buffered} lines.`
+        : `${closed}Proxied requests hidden. ${counts.matched} of ${counts.buffered} lines. Most were Steward's own status polls.`,
+    );
+  },
+  onTogglePause: () => {
+    dispatch({ type: "logs/pause-toggle" });
+    announce(ui.paused ? "Log paused." : "Log resumed.");
+  },
+  onCopy: () => {
+    void copyLog();
+  },
+  onDownload: downloadLog,
+});
+
+const logConsole = createLogConsole({
+  onFold: (seq, forced, count) => {
+    dispatch({ type: "logs/fold-toggle", seq });
+    // Read back off the NEW state. Announced once — the lines themselves are
+    // never announced, not even for a user-initiated expansion: the console is
+    // not a live region and that rule does not bend for 31 argument lines.
+    announce(foldAnnouncement(count, forced, ui.expandedArgs[seq] === true));
+  },
+  onTrace: (port, task, anchorSeq) => {
+    dispatch({ type: "logs/trace", trace: { port, task, anchorSeq } });
+    if (snapshot === null) return;
+    const counts = selectDashboard(snapshot, ui, snapshot.now).logCounts;
+    announce(
+      `Tracing task ${task} on port ${port} — ${counts.traced} lines. Filters do not apply inside a trace.`,
+    );
+  },
+  onExitTrace: () => {
+    if (ui.trace === null) return;
+    dispatch({ type: "logs/trace", trace: null });
+    announce(`Trace closed. ${filterResult()}`);
+  },
+  onAction: (kind) => {
+    if (kind === "exit-trace") {
+      if (ui.trace === null) return;
+      dispatch({ type: "logs/trace", trace: null });
+      announce(`Trace closed. ${filterResult()}`);
+      return;
+    }
+    if (kind === "query-truncated") {
+      // A search, not a fourth filter axis: the box visibly fills with the
+      // literal the message carries, and the operator can edit or clear it.
+      const closed = traceClosedPrefix();
+      dispatch({ type: "filter/query", query: CONTEXT_LOST_QUERY });
+      announce(`${closed}Search "${CONTEXT_LOST_QUERY}": ${filterResult()}`);
+      return;
+    }
+    if (kind === "show-all-models") {
+      const closed = traceClosedPrefix();
+      dispatch({ type: "filter/model", modelId: null });
+      announce(`${closed}Log showing all models — ${filterResult()}`);
+      return;
+    }
+    const closed = traceClosedPrefix();
+    dispatch({ type: "filter/model", modelId: null });
+    dispatch({ type: "filter/level", level: "all" });
+    dispatch({ type: "filter/family", family: "any" });
+    dispatch({ type: "filter/query", query: "" });
+    announce(`${closed}Filters cleared — ${filterResult()}`);
+  },
+});
+const slotsStrip = createSlotsStrip();
+
+rail.append(serviceBlock.el, hostBlock.el, modelsBlock.el);
+main.append(metricsBand.el, toolbar.el, logConsole.el, slotsStrip.el);
+
+// ---------------------------------------------------------------------------
+// Render
+// ---------------------------------------------------------------------------
+
+function dispatch(action: UiAction): void {
+  const next = reduce(ui, action);
+  if (next === ui) return;
+  ui = next;
+  render();
+}
+
+function render(): void {
+  if (snapshot === null) return;
+  // The snapshot carries the server's clock, so the uptime readouts tick
+  // against it rather than against a browser clock that may be minutes off.
+  const now = snapshot.now + (Date.now() - snapshotAt);
+  const vm = selectDashboard(snapshot, ui, now);
+
+  // Drift is announced when it is NEW, never on every poll: the same mismatch
+  // is still there 1.6 s later, and repeating it would make the status region
+  // unusable. `driftAnnouncement` owns that decision (and the watermark reset
+  // that lets a mismatch which comes back be announced again).
+  const drift = driftAnnouncement(vm.service.drift, announcedDrift);
+  announcedDrift = drift.key;
+  if (drift.message !== null) announce(drift.message);
+
+  // The console's own state — no source, file gone, reconnecting, stopped,
+  // quiet — speaks through the same polite region and by the same rule: once
+  // per transition, never per poll and never per line.
+  const spoken = consoleAnnouncement(vm.console, ui.logSourcePath, announcedConsole);
+  announcedConsole = spoken.key;
+  if (spoken.message !== null) announce(spoken.message);
+
+  // Losing lines is worth saying once, when it first happens — and in the same
+  // two forms the banner uses, so it can never read "showing the latest 300 of
+  // 300". A source restart clears the flag and re-arms the announcement,
+  // because the next drop is a new thing that happened.
+  if (!vm.logCounts.bufferDropped) announcedTruncation = false;
+  else if (!announcedTruncation) {
+    announcedTruncation = true;
+    announce(truncationAnnouncement(vm.logCounts));
+  }
+
+  serviceBlock.update(vm.service);
+  hostBlock.update({ gauges: vm.gauges, temperature: vm.temperature });
+  modelsBlock.update({ models: vm.models, allLogsPill: vm.allLogsPill });
+  metricsBand.update(vm.kpis);
+  sparkline.update(vm.spark);
+  toolbar.update(vm.toolbar);
+  logConsole.update(vm.console);
+  slotsStrip.update(vm.slots);
+}
+
+function currentLogText(): string {
+  if (snapshot === null) return "";
+  return selectLogText(selectDashboard(snapshot, ui, snapshot.now));
+}
+
+// ---------------------------------------------------------------------------
+// Data
+// ---------------------------------------------------------------------------
+
+async function refresh(): Promise<void> {
+  try {
+    const response = await fetch("/api/snapshot", { cache: "no-store" });
+    if (!response.ok) {
+      announce(`Steward server returned ${response.status}.`);
+      return;
+    }
+    snapshot = (await response.json()) as Snapshot;
+    snapshotAt = Date.now();
+    // The reducer, not this module, decides when a load/unload is done: it
+    // clears a model's pending flag once this fresh snapshot shows the status
+    // it was waiting for. The POST returned while the model was still
+    // `loading`, so only the poll can confirm the transition.
+    dispatch({ type: "models/observed", models: snapshot.models });
+    render();
+  } catch {
+    announce("Lost contact with the Steward server.");
+  }
+}
+
+let inbox: LogLine[] = [];
+let flushHandle = 0;
+
+/**
+ * The stream replays its backlog one event at a time on connect. Coalescing a
+ * frame's worth of lines turns that into a single reducer pass and a single
+ * paint instead of two hundred.
+ */
+function enqueue(line: LogLine): void {
+  inbox.push(line);
+  if (flushHandle !== 0) return;
+  flushHandle = requestAnimationFrame(() => {
+    flushHandle = 0;
+    const lines = inbox;
+    inbox = [];
+    dispatch({ type: "logs/append", lines });
+  });
+}
+
+function connectLogs(): void {
+  const source = new EventSource("/api/logs/stream");
+  source.addEventListener("open", () => {
+    dispatch({ type: "logs/stream-status", status: "live" });
+  });
+  source.addEventListener("message", (event) => {
+    if (!(event instanceof MessageEvent)) return;
+    try {
+      enqueue(JSON.parse(String(event.data)) as LogLine);
+    } catch {
+      // A malformed frame is not worth tearing the stream down for.
+    }
+  });
+  // The health of the log SOURCE is a different question from the health of
+  // this connection: the server can be streaming perfectly and have no file to
+  // read, or be watching a path that macOS deleted out from under it. It rides
+  // its own named event so an old client's `message` handler never sees it.
+  source.addEventListener("source", (event) => {
+    if (!(event instanceof MessageEvent)) return;
+    try {
+      const status = JSON.parse(String(event.data)) as LogStreamStatus;
+      dispatch({
+        type: "logs/source-status",
+        source: status.source,
+        path: status.path,
+        detail: status.detail,
+      });
+    } catch {
+      // Same reasoning as a malformed line: not worth a teardown.
+    }
+  });
+  source.addEventListener("error", () => {
+    // EventSource retries on its own, but only while the connection is merely
+    // interrupted. A closed stream (server restart) needs a fresh one.
+    dispatch({ type: "logs/stream-status", status: "reconnecting" });
+    if (source.readyState !== EventSource.CLOSED) return;
+    window.setTimeout(connectLogs, RECONNECT_DELAY_MS);
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Actions
+// ---------------------------------------------------------------------------
+
+/** What a POST did, plus the server's reason when it did not. */
+interface PostOutcome {
+  ok: boolean;
+  /** The command's own words, for the inline notice. `null` when unavailable. */
+  detail: string | null;
+}
+
+/**
+ * The server answers a refused action with a JSON `{ error }` naming what
+ * actually happened (`launchctl: permission denied`). That detail is the whole
+ * point of the notice, so it is read off the body rather than reduced to a
+ * status code.
+ */
+async function readError(response: Response): Promise<string | null> {
+  try {
+    const body: unknown = await response.json();
+    if (typeof body === "object" && body !== null && "error" in body) {
+      const error = (body as { error?: unknown }).error;
+      if (typeof error === "string" && error.trim() !== "") return error;
+    }
+  } catch {
+    // Not JSON, or no body at all: fall back to the status line.
+  }
+  return `the Steward server returned ${response.status}`;
+}
+
+async function post(path: string): Promise<PostOutcome> {
+  try {
+    const response = await fetch(path, { method: "POST", cache: "no-store" });
+    if (response.ok) return { ok: true, detail: null };
+    return { ok: false, detail: await readError(response) };
+  } catch {
+    return { ok: false, detail: "the Steward server could not be reached" };
+  }
+}
+
+/**
+ * Runs a service action. The POST returning is not the outcome — a command can
+ * exit 0 and leave the service exactly as it was (a `KeepAlive` job relaunches
+ * itself after a stop) — so the refresh that follows is what tells the operator
+ * what happened, and the button stays pending until that snapshot lands. A
+ * refused command leaves an honest notice instead of a silent no-op.
+ */
+async function runService(action: ServiceAction): Promise<void> {
+  if (ui.pendingService !== null) return;
+  dispatch({ type: "service/confirm", action: null });
+  dispatch({ type: "service/failure", failure: null });
+  dispatch({ type: "service/pending", action });
+  announce(`Running ${action} on the llama.cpp service.`);
+
+  const outcome = await post(`/api/service/${action}`);
+  if (outcome.ok) {
+    announce(`${action} sent; confirming with the next poll.`);
+  } else {
+    dispatch({ type: "service/failure", failure: { action, detail: outcome.detail } });
+    announce(`Could not ${action} the service: ${outcome.detail ?? "no reason given"}.`);
+  }
+
+  // The poll is the source of truth either way — including after a failure,
+  // where the service may still have moved.
+  await refresh();
+  dispatch({ type: "service/pending", action: null });
+}
+
+/**
+ * Load/unload is slow and asynchronous — the POST returns in tens of
+ * milliseconds while the model is still spawning — so the button is not cleared
+ * here. It is marked pending, and it stays pending until a polled snapshot
+ * shows the model reached its target status (the reducer clears it from
+ * `models/observed`). Only a rejected POST clears the flag directly, so a
+ * request that never took does not spin forever.
+ */
+async function runModel(modelId: string, action: ModelAction): Promise<void> {
+  if (ui.pendingModels[modelId] !== undefined) return;
+  dispatch({ type: "model/pending", modelId, action });
+  announce(`${action === "load" ? "Loading" : "Unloading"} ${modelId}.`);
+  const { ok } = await post(`/api/models/${encodeURIComponent(modelId)}/${action}`);
+  if (!ok) {
+    announce(`Could not ${action} ${modelId}.`);
+    dispatch({ type: "model/pending", modelId, action: null });
+    return;
+  }
+  await refresh();
+}
+
+/** What was exported, said honestly — it is not what is on screen. */
+function exportSummary(): string {
+  if (snapshot === null) return "";
+  return selectLogExportSummary(selectDashboard(snapshot, ui, snapshot.now).logCounts);
+}
+
+async function copyLog(): Promise<void> {
+  const text = currentLogText();
+  const summary = exportSummary();
+  try {
+    await navigator.clipboard.writeText(text);
+    announce(`Copied ${summary}`);
+  } catch {
+    announce("The browser refused clipboard access.");
+    return;
+  }
+  dispatch({ type: "copy/flag", copied: true });
+  window.clearTimeout(copyTimer);
+  copyTimer = window.setTimeout(() => {
+    dispatch({ type: "copy/flag", copied: false });
+  }, COPY_FEEDBACK_MS);
+}
+
+function downloadLog(): void {
+  const summary = exportSummary();
+  const url = URL.createObjectURL(new Blob([currentLogText()], { type: "text/plain" }));
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = "llama-server.log";
+  anchor.click();
+  announce(`Downloading llama-server.log — ${summary}`);
+  window.setTimeout(() => {
+    URL.revokeObjectURL(url);
+  }, 2000);
+}
+
+// ---------------------------------------------------------------------------
+// Start
+// ---------------------------------------------------------------------------
+
+applyTheme(ui.theme);
+// While in System mode, a live OS light/dark switch must repaint the palette.
+// The mode itself does not change, so only the resolved attribute is re-applied.
+globalThis.matchMedia?.("(prefers-color-scheme: dark)").addEventListener("change", () => {
+  if (ui.theme === "system") applyTheme(ui.theme);
+});
+void refresh();
+connectLogs();
+window.setInterval(() => {
+  void refresh();
+}, SNAPSHOT_INTERVAL_MS);
+window.setInterval(render, CLOCK_INTERVAL_MS);