@jmcombs/pi-steward 0.0.0

package/core/select.ts

@@ -0,0 +1,2923 @@
+/**
+ * The one place a `Snapshot` plus the operator's `UiState` becomes something
+ * renderable.
+ *
+ * Every string, color, percentage and enabled/disabled decision on screen is
+ * derived here, which is what lets the `ui/` modules stay a dumb translation of
+ * view models into elements. Colors come out as CSS custom-property references
+ * because the design assigns them per model and per threshold — the stylesheet
+ * cannot know which. Keep this module free of Node and DOM APIs.
+ */
+
+import type { ConsentDrift, LaunchDrift } from "./drift.js";
+import {
+  barPercent,
+  contextHeadroomColor,
+  formatClock,
+  formatClockSeconds,
+  formatContextField,
+  formatCount,
+  formatFlashField,
+  formatGpuLayersField,
+  formatKvCacheField,
+  formatLines,
+  formatLogText,
+  formatMemory,
+  formatPercent,
+  formatQuantField,
+  formatSizeField,
+  formatTemperature,
+  formatTokenCount,
+  formatTps,
+  formatTypeField,
+  formatUptime,
+  NA,
+  temperatureBarPercent,
+  temperatureColor,
+} from "./format.js";
+import { modelColor } from "./model-color.js";
+import type { FamilyFilter, LevelFilter, TraceRef, UiState } from "./state.js";
+import { LOG_BUFFER_LIMIT, visibleBuffer } from "./state.js";
+import type { TemperaturePreference, TemperatureUnit } from "./temperature.js";
+import type {
+  ConfigEntry,
+  LogFamily,
+  LogKind,
+  LogLevel,
+  LogLine,
+  ModelAction,
+  ModelInfo,
+  ServiceAction,
+  SlotInfo,
+  SlotState,
+  Snapshot,
+} from "./types.js";
+import { THROUGHPUT_HISTORY_SIZE, THROUGHPUT_SAMPLE_SECONDS } from "./types.js";
+
+// A model's color is a stable hash of its id (embedders get a reserved hue);
+// re-exported here because it is part of this module's view-model surface.
+export { modelColor } from "./model-color.js";
+
+/**
+ * How many filtered lines reach the DOM.
+ *
+ * Set to the signal buffer's own size on purpose: with proxied requests hidden
+ * — the default — the matched set can never exceed it, so the cap does not bite
+ * and the console never posts a truncation banner while holding the whole
+ * buffer. It bites exactly when proxy lines are shown, which is the one time
+ * truncation is honest and expected.
+ */
+export const LOG_RENDER_LIMIT = 500;
+
+/**
+ * How long a console with lines in it must go without a new matching line
+ * before it reports itself quiet.
+ *
+ * A guess, and knowingly so — nothing measured argues for 60 s over 30 s or
+ * 120 s. It only decides when a footer appears under content that is already
+ * fully readable, so being wrong costs an operator nothing.
+ */
+export const QUIET_AFTER_MS = 60_000;
+
+/** Throughput tile: the bar reads full at this many tokens per second. */
+const THROUGHPUT_FULL_SCALE = 120;
+
+const LEVEL_COLORS: Record<LogLevel, string> = {
+  DEBUG: "var(--text-muted)",
+  INFO: "var(--info)",
+  WARN: "var(--warning)",
+  ERROR: "var(--error)",
+};
+
+const LEVEL_FILTERS: LevelFilter[] = ["all", "INFO", "WARN", "ERROR"];
+
+/**
+ * The record-type chips. Four families and a reset, not the research's six:
+ * proxied requests are already a toggle whose default is additive suppression
+ * (which no member of a single-select set can express), and the launch-args
+ * block is already a fold that collapses 31 rows to 1 without leaving the
+ * scrollback.
+ */
+const FAMILY_FILTERS: FamilyFilter[] = ["any", "requests", "models", "startup", "other"];
+
+/**
+ * The literal the context-lost banner puts in the search box.
+ *
+ * A search, deliberately, and not a fourth filter axis: the token is in the
+ * message text, the box visibly fills with it, the operator can edit or clear
+ * it, and the existing count grammar reports the result honestly. It also
+ * degrades perfectly — if llama.cpp renames the token, nothing matches, the
+ * count is 0 and the banner never appears.
+ */
+export const CONTEXT_LOST_QUERY = "truncated = 1";
+
+/**
+ * How far apart two members of one trace may sit before they are two different
+ * requests that happen to share an id.
+ *
+ * The measured maximum gap INSIDE a real request is 7 buffer lines (p99 = 5),
+ * so 16 leaves better than a 2× margin over anything a genuine request has ever
+ * produced while still catching a child that died and respawned on the same
+ * ephemeral port a few seconds later — a reuse observed 20 lines apart, which a
+ * wider threshold swallows whole and reports as one request.
+ *
+ * It errs toward splitting, and that is the right direction: a split trace
+ * announces itself in the banner and shows the run that was clicked, while a
+ * merged one silently presents two operators' requests as one.
+ */
+const TRACE_SPLIT_GAP = 16;
+
+/** Shown wherever a reading the source could not supply would otherwise print. */
+const NO_READING = "—";
+
+function tint(color: string, percent: number): string {
+  return `color-mix(in srgb, ${color} ${percent}%, transparent)`;
+}
+
+/**
+ * A KPI tile's value. The mock rounds its counters; a live source reports
+ * whatever `llama-server` gave it, which can be fractional or missing, and
+ * neither `61.837` nor `NaN` is something an operator can read at a glance.
+ */
+function countLabel(value: number): string {
+  return Number.isFinite(value) ? String(Math.round(value)) : NO_READING;
+}
+
+/** A memory gauge's label, or a dash when either figure is not a reading. */
+function memoryLabel(usedGB: number, totalGB: number, decimals: number): string {
+  return Number.isFinite(usedGB) && Number.isFinite(totalGB)
+    ? formatMemory(usedGB, totalGB, decimals)
+    : NO_READING;
+}
+
+/** One button in the SERVICE block's control row. */
+export interface ServiceControlVm {
+  action: ServiceAction;
+  /** `Restart`, or the optimistic verb (`Restarting…`) while it is in flight. */
+  label: string;
+  /** True while this is the action awaiting its POST. */
+  busy: boolean;
+  disabled: boolean;
+  /**
+   * Why the button is inert (`The service is already started.`), or `""` when
+   * it is not. Rendered as its title and folded into the accessible name, so
+   * the reason is never left to the greyed-out fill alone.
+   */
+  disabledReason: string;
+  /** True for the disruptive actions: the click opens the confirm strip. */
+  confirms: boolean;
+  /** Danger-toned (stop, restart). Never the only signal — the verb says it. */
+  danger: boolean;
+  /** `Restart the llama.cpp service` — the label alone is ambiguous out of context. */
+  ariaLabel: string;
+}
+
+/** The inline confirm strip for a disruptive action. */
+export interface ServiceConfirmVm {
+  action: ServiceAction;
+  /** `Restart unloads gpt-oss-20b and drops in-flight requests.` */
+  consequence: string;
+  /** The affirmative verb, e.g. `Restart`. */
+  confirmLabel: string;
+  confirmAriaLabel: string;
+  cancelLabel: string;
+}
+
+/**
+ * The drift notice — the one surface both drift producers write to.
+ *
+ * It exists only when something is actually wrong. A compliant machine renders
+ * NOTHING here: no "all good" badge, no reassurance. That is the point of the
+ * whole check — the dashboard's silence has to mean something, so it may never
+ * be spent on a machine Steward could not verify (a `unknown` launch check is
+ * silent too, and the operator is told nothing rather than told it is fine).
+ */
+export interface DriftNoticeVm {
+  /**
+   * Identity of this exact mismatch. A dismissal is bound to it, so dismissing
+   * "`--metrics` removed" cannot also hide "`--slots` removed" arriving later:
+   * the key changes and the notice comes back.
+   */
+  key: string;
+  title: string;
+  /** One line per thing that no longer matches; never empty. */
+  messages: string[];
+  /** What to do about it, in words, naming the command that does it. */
+  fix: string;
+  dismissLabel: string;
+  /** Says out loud that dismissing does not make the mismatch go away. */
+  dismissAriaLabel: string;
+  /** The notice region's accessible name. */
+  ariaLabel: string;
+  /** The whole notice as one sentence, for the polite status region. */
+  announcement: string;
+}
+
+/** The affordance shown in place of controls when none are configured. */
+export interface ServiceSetupVm {
+  label: string;
+  /** Names the skill that configures control — the only way to get buttons. */
+  detail: string;
+  command: string;
+}
+
+export interface ServiceControlsVm {
+  /** One per consented action, in start/stop/restart order. Empty = unconfigured. */
+  buttons: ServiceControlVm[];
+  /** The single setup affordance, present only when {@link buttons} is empty. */
+  setup: ServiceSetupVm | null;
+  /** The open confirm strip, or `null`. */
+  confirm: ServiceConfirmVm | null;
+  /** `Restart failed — launchctl: permission denied`, or `null`. */
+  notice: string | null;
+  /** True while any action is in flight: the whole row disables and reads busy. */
+  pending: boolean;
+}
+
+/**
+ * What the status chip reports.
+ *
+ * Three values, and each one gets its own SHAPE in the stylesheet — filled disc,
+ * ring, dotted ring — so the state survives a monochrome screen, a colour-blind
+ * reader and a printout. Hue is the third signal here, never the only one.
+ *
+ * `unknown` is deliberately neutral rather than red: a machine Steward has not
+ * been pointed at yet is the expected first state, not a failure.
+ */
+export type ServiceState = "up" | "down" | "unknown";
+
+/**
+ * The chip's word and dot colour per state, stated once.
+ *
+ * The colour reaches the DOT and stops there. The word is painted by the
+ * stylesheet with a text token, because `--success` (2.75:1) and `--error`
+ * (4.47:1) on the rail's panel ground both miss AA at the chip's 11.5px — and a
+ * state word that cannot be read is not a readout.
+ */
+export const SERVICE_STATE_PRESENTATION: Record<ServiceState, { label: string; dotColor: string }> =
+  {
+    up: { label: "started", dotColor: "var(--success)" },
+    down: { label: "stopped", dotColor: "var(--error)" },
+    unknown: { label: "not connected", dotColor: "var(--text-muted)" },
+  };
+
+export interface ServiceVm {
+  /** Drives both the chip's word and its dot SHAPE. See {@link ServiceState}. */
+  state: ServiceState;
+  /** `started` / `stopped` / `not connected` — the chip's word, and the signal. */
+  statusLabel: string;
+  /**
+   * The dot's colour, and only the dot's. The word's colour is fixed in the
+   * stylesheet so it clears AA in both themes; see
+   * {@link SERVICE_STATE_PRESENTATION}.
+   */
+  statusDotColor: string;
+  /** The theme control's current-state glyph: `◐` system, `☀` light, `☾` dark. */
+  themeGlyph: string;
+  themeLabel: string;
+  /** The start/stop/restart row, its confirm strip, and any failure notice. */
+  controls: ServiceControlsVm;
+  /**
+   * The config-drift notice, or `null` when there is nothing to report (or the
+   * operator dismissed this exact one). It lives in this block because this is
+   * where the router facts `steward.json` claims are rendered — the notice says
+   * those facts have stopped being true.
+   */
+  drift: DriftNoticeVm | null;
+  /**
+   * The router facts (role, binary, listen, …) folded in from what was the
+   * separate CONFIG block. They render below the status as this block's third
+   * zone, sourced from `/props` so the listen address and build have one home.
+   */
+  config: ConfigEntry[];
+}
+
+export interface GaugeVm {
+  key: string;
+  label: string;
+  value: string;
+  percent: number;
+  color: string;
+  /**
+   * How the bar's track is drawn, so an empty bar cannot be mistaken for a real
+   * reading. `solid` is a genuine figure (INCLUDING a real 0%); `hatched` means
+   * "no reading" — the value dashed to `—` because a memory figure was `null`
+   * or `NaN`; `dashed` is reserved for a future "last-seen" state and is not
+   * produced yet. The value token (`—`) is the primary signal; the track
+   * reinforces it, and is never color-only.
+   */
+  track: "solid" | "hatched" | "dashed";
+  /**
+   * True for the rows built from a temperature reading — the only rows a unit
+   * choice relabels.
+   *
+   * It is a flag rather than a naming convention on {@link key} because the
+   * unit control renders only when at least one of these rows exists, and a
+   * control that provably changes nothing on screen is a label that is not
+   * true. Set by `tempGauge` and by nothing else, so the question "is there
+   * anything here to relabel?" cannot drift from the row set that answers it.
+   */
+  temperature: boolean;
+}
+
+/**
+ * The temperature-unit control in the HOST block's head.
+ *
+ * A text button rather than the theme control's cycling glyph: this control's
+ * resolved value IS a two-character string, so the label can simply be it. It
+ * carries no `aria-live` — it is a control, not a status, and its own value
+ * cannot change without a press.
+ */
+export interface TemperatureControlVm {
+  /** `auto` · `°C` · `°F` — the PREFERENCE, not the resolved unit. */
+  label: string;
+  /** States the mode, what it resolves to, and what pressing it does. */
+  ariaLabel: string;
+  /** Same sentence as {@link ariaLabel}: a pointer operator gets it on hover. */
+  title: string;
+  /** The preference a press moves to. */
+  next: TemperaturePreference;
+}
+
+/**
+ * One labeled cell of a model card's body grid: `Quant: 4-bit (Q4_0)`. The label
+ * set and order are identical on every card; only the values change. `na` is set
+ * when the value is the {@link NA} token, so the UI can dim an unconfirmed field
+ * without re-parsing the string.
+ */
+export interface ModelFieldVm {
+  label: string;
+  value: string;
+  na: boolean;
+}
+
+export interface ModelCardVm {
+  id: string;
+  short: string;
+  /**
+   * The card body: the same seven labeled fields on every card, in a fixed order
+   * (`Type` last), each carrying its value or the `n/a` token when the fact is
+   * not confirmed. Only `Type` is ever confirmed while unloaded.
+   */
+  fields: ModelFieldVm[];
+  color: string;
+  selected: boolean;
+  cardBackground: string;
+  cardBorder: string;
+  buttonAction: ModelAction;
+  buttonLabel: string;
+  buttonBackground: string;
+  buttonColor: string;
+  buttonBorder: string;
+  pending: boolean;
+}
+
+export interface PillVm {
+  label: string;
+  active: boolean;
+  background: string;
+  color: string;
+  borderColor: string;
+}
+
+export interface KpiVm {
+  key: string;
+  label: string;
+  value: string;
+  unit: string;
+  sub: string;
+  color: string;
+  percent: number;
+}
+
+export interface SparkBarVm {
+  height: number;
+  color: string;
+}
+
+export interface SparkVm {
+  bars: SparkBarVm[];
+  /** `avg 61 · peak 98 tok/s` */
+  summary: string;
+  /** Height of the dashed average rule, in percent of the plot area. */
+  averageLine: number;
+  /**
+   * The left end of the axis — how far back the oldest bar reaches, e.g.
+   * `−134 s`.
+   *
+   * Measured, not nominal. Samples close on the browser's snapshot clock, so a
+   * ~3 s cadence sampled every 1.6 s closes at ~3.2 s and a full 42-bar strip
+   * spans about 134 seconds. A fixed `−2 min` printed under it would be off by
+   * a measured 12%, on the one label whose whole job is to say which slice of
+   * time the operator is looking at.
+   */
+  axisStart: string;
+}
+
+export interface LevelChipVm extends PillVm {
+  level: LevelFilter;
+  /**
+   * How many lines this chip would show — every OTHER filter applied and this
+   * one lifted. So the number is a promise, and an empty ERROR chip is visibly
+   * empty BEFORE it is pressed rather than after.
+   *
+   * A zero is never styled as reassurance: llama-server logs nothing at all for
+   * a rejected request and reports a failed model load at INFO, so `ERROR 0` is
+   * a fact about the file, not a health check.
+   */
+  count: number;
+  countLabel: string;
+  /** `WARN — 2 lines`, so the count is not left to a bare numeral. */
+  ariaLabel: string;
+}
+
+/** How a row's model column is attributed. */
+export type LineScope = "model" | "router" | "unknown";
+
+/** The collapsed launch-argument block, rendered as one expandable row. */
+export interface FoldVm {
+  /** `seq` of the run's first line — the toggle key and the fold's identity. */
+  seq: number;
+  /** Lines in the run actually held, which is what the label counts. */
+  count: number;
+  /** Open right now, whether the operator asked or a query hit forced it. */
+  expanded: boolean;
+  /** The operator's own setting — what the fold returns to once a query clears. */
+  sticky: boolean;
+  /** The run reaches the front of the window, so older members may be gone. */
+  truncated: boolean;
+  /** Hits inside the fold for the active query; 0 when there is no query. */
+  matches: number;
+  /** True when a query hit forced it open, overriding the collapsed state. */
+  forced: boolean;
+  /** `▸ 31 launch arguments`, plus the truncation and match clauses. */
+  label: string;
+  /** The glyph is silence to a screen reader, so the name says the verb. */
+  ariaLabel: string;
+}
+
+/**
+ * The task cell — a control, not a readout. `null` on an unframed line, on a
+ * line whose port Steward never saw, and on `get_availabl` (task `-1`: no task
+ * is attached yet, and inventing one would be the first mis-attribution in a
+ * console built to avoid exactly that).
+ */
+export interface TaskCellVm {
+  port: number;
+  task: number;
+  /** Stable identity for focus restoration across a repaint. */
+  key: string;
+  /** `▸81259` collapsed, `▾81259` while this task is being traced. */
+  label: string;
+  /**
+   * Says what a task id IS, which the numeral cannot: llama-server's own handle
+   * for the request, sparse, reused across children and not a request number.
+   */
+  ariaLabel: string;
+  /** True while this row's task is the one being traced. */
+  active: boolean;
+}
+
+/**
+ * A trailing annotation on a row's message.
+ *
+ * Trailing, not leading: a leading badge shifts the message's left edge per row
+ * and breaks the column rhythm that makes a log scannable. Severity is carried
+ * in FORM — a glyph and a tinted ground with the text at full contrast — never
+ * by an amber that is 2.16:1 on the light theme's console ground.
+ */
+export interface LogBadgeVm {
+  key: "context-lost" | "cache" | "slot";
+  label: string;
+  title: string;
+  tone: "warn" | "neutral";
+}
+
+export interface LogRowVm {
+  /**
+   * Row identity for the incremental patcher. A fold row and the first line of
+   * its run share a `seq`, so `seq` alone cannot key the DOM: toggling a fold
+   * would patch a `<button>`'s text into a `<div>` and leave the wrong element
+   * on screen.
+   */
+  key: string;
+  seq: number;
+  time: string;
+  level: LogLevel;
+  model: string;
+  modelColor: string;
+  /** Why the model cell reads what it does, or `""` for a plain model name. */
+  modelTitle: string;
+  scope: LineScope;
+  kind: LogKind;
+  /** The trace entry point, or `null` when this row has no task to trace. */
+  task: TaskCellVm | null;
+  /**
+   * The pipe frame this row's task cell stands in for, or `""`. Carried so an
+   * export can write the file's own line back; never painted.
+   */
+  frameRaw: string;
+  message: string;
+  /** Absent enrichments render NOTHING — not an empty box, not a dash. */
+  badges: LogBadgeVm[];
+  /** True while this row is part of the open trace. */
+  traced: boolean;
+  /** True for a line rendered inside an expanded fold. */
+  folded: boolean;
+  /** Non-null only on the fold row itself. */
+  fold: FoldVm | null;
+}
+
+/** The toolbar's proxied-request toggle. */
+export interface ProxyToggleVm {
+  /** `▸ 1,203 proxied` / `▸ proxied` / `▾ proxied shown`. */
+  label: string;
+  /** Tracks SHOWN, so pressed means the extra lines are in. */
+  pressed: boolean;
+  /** Says what the chip has no room for: why these are hidden by default. */
+  ariaLabel: string;
+  title: string;
+}
+
+/** One record-type chip. The same component as a level chip, a different axis. */
+export interface FamilyChipVm extends PillVm {
+  family: FamilyFilter;
+  /** What pressing it yields — every OTHER filter applied and this axis lifted. */
+  count: number;
+  countLabel: string;
+  ariaLabel: string;
+}
+
+export interface ToolbarVm {
+  activeModelLabel: string;
+  activeModelBackground: string;
+  activeModelColor: string;
+  familyChips: FamilyChipVm[];
+  levelChips: LevelChipVm[];
+  proxyToggle: ProxyToggleVm;
+  query: string;
+  lineCountLabel: string;
+  paused: boolean;
+  pauseLabel: string;
+  pauseBackground: string;
+  pauseColor: string;
+  pauseBorder: string;
+  copyLabel: string;
+}
+
+/** Everything the console and toolbar count, in one place. */
+export interface LogCountsVm {
+  /** Lines in the painted window — never more than {@link LOG_RENDER_LIMIT}. */
+  rendered: number;
+  /** Lines passing the whole filter stack, before the render cap. */
+  matched: number;
+  /** Lines in the buffer the console is reading (frozen while paused). */
+  buffered: number;
+  /**
+   * Lines excluded ONLY by the proxy toggle — already past the model scope, the
+   * level chip and the query. That makes the number a promise: this many more
+   * rows appear if the toggle is pressed.
+   */
+  hiddenProxy: number;
+  /** Proxy lines currently shown, for the toggle's pressed-state name. */
+  proxyShown: number;
+  /** Router-wide lines an active model scope suppressed. */
+  hiddenRouter: number;
+  /** Matching lines that live inside an args fold, expanded or not. */
+  folded: number;
+  /** The buffer has evicted at least one signal line this session. */
+  bufferDropped: boolean;
+  /** The render cap bit: {@link matched} exceeds {@link LOG_RENDER_LIMIT}. */
+  renderCapped: boolean;
+  /** Per-chip counts, each with the other filters applied and its own lifted. */
+  levels: Record<LevelFilter, number>;
+  /** The same promise on the second axis. */
+  families: Record<FamilyFilter, number>;
+  /**
+   * Matched lines carrying a pipe frame. Drives the task column's existence —
+   * over the MATCHED SET, not the painted window, so it flips at most once per
+   * session instead of on every scroll.
+   */
+  framed: number;
+  /**
+   * Buffered lines that said `truncated = 1`. Counted over the buffer, not the
+   * matched set, because the banner it drives says "of the N buffered" and the
+   * two numbers have to be about the same population.
+   */
+  contextLost: number;
+  /** Lines in the open trace, or 0 when nothing is being traced. */
+  traced: number;
+}
+
+/**
+ * Which single truth the console is telling, first match wins. The order is
+ * load-bearing: `empty-filtered` precedes `cold` so a filter that excludes
+ * everything cannot masquerade as a cold start, and `paused` precedes `quiet`
+ * because a frozen buffer necessarily goes stale and calling that "quiet" would
+ * be a lie about the router.
+ */
+export type ConsoleState =
+  | "no-source"
+  | "file-missing"
+  | "reconnecting"
+  | "stopped"
+  | "paused"
+  // A trace outranks `empty-filtered` — it ignores the filters, so a filter
+  // that matches nothing says nothing about what a trace is showing — but not
+  // the four source-health states, which are facts about the source itself.
+  | "tracing"
+  | "empty-filtered"
+  | "cold"
+  | "quiet"
+  | "streaming";
+
+export type ConsoleTone = "info" | "warn" | "muted" | "trace";
+
+/** What a notice or banner offers to do about itself. */
+export interface ConsoleActionVm {
+  label: string;
+  kind: "clear-filters" | "show-all-models" | "exit-trace" | "query-truncated";
+  ariaLabel: string;
+}
+
+/** The full-height notice that takes the place of rows (or sits above them). */
+export interface ConsoleNoticeVm {
+  state: ConsoleState;
+  /** Decoration. Never load-bearing — the title carries the meaning. */
+  glyph: string;
+  title: string;
+  detail: string;
+  tone: ConsoleTone;
+  action: ConsoleActionVm | null;
+}
+
+/** A strip that coexists with rows, at the top or the bottom of the console. */
+export interface ConsoleBannerVm {
+  key: string;
+  placement: "top" | "bottom";
+  tone: ConsoleTone;
+  text: string;
+  /** Extra sentences under the strip, or `""` when the strip says it all. */
+  detail: string;
+  action: ConsoleActionVm | null;
+}
+
+/** The open trace, as its banner renders it. */
+export interface TraceVm {
+  port: number;
+  task: number;
+  /**
+   * The model, from the port map. `""` when the port is unmapped — never
+   * invented, and never read off the neighbouring `proxy_reques` line, which is
+   * the only line that names a model and carries no task id.
+   */
+  modelLabel: string;
+  count: number;
+  /** `▾ tracing task 81259 · port 53691 · gpt-oss-20b · 9 lines`, plus guards. */
+  title: string;
+  /** The sentences that answer "what IS a task id", said where it matters. */
+  detail: string;
+  backLabel: string;
+  backAriaLabel: string;
+  /** The earliest member sits at the front of a buffer that has dropped lines. */
+  partial: boolean;
+  /** The port was reused and another request shares this id; only one is shown. */
+  splitRuns: boolean;
+}
+
+export interface ConsoleVm {
+  state: ConsoleState;
+  lines: LogRowVm[];
+  notice: ConsoleNoticeVm | null;
+  banners: ConsoleBannerVm[];
+  paused: boolean;
+  /** The open trace, or `null`. */
+  trace: TraceVm | null;
+  /**
+   * Whether the row grid carries a task column at all. False collapses it —
+   * an idle router showing eleven banner lines gets the original four-column
+   * grid back, not 64px of dead space.
+   */
+  showTaskColumn: boolean;
+  /** Lines that arrived behind a frozen buffer, so Pause can say what it costs. */
+  frozenBehind: number;
+  /** The visually-hidden heading inside the region. */
+  heading: string;
+}
+
+export interface SlotDotVm {
+  id: number;
+  /**
+   * `unknown` where the lane's occupancy was never established — a child that
+   * has only just spawned, or a stream Steward lost track of. It is not a
+   * synonym for idle and must never be rendered as one.
+   */
+  state: SlotState;
+  /**
+   * Context fill, 0–100, for a mini bar: `promptTokens / ctxTotal`. `null` when
+   * either half is unmeasured, so nothing draws an empty bar for a lane whose
+   * fill nobody reported.
+   */
+  headroomPct: number | null;
+  /** `27 / 40k ctx · 5 decoded`, `40k ctx · idle`, or `40k ctx · state unknown`. */
+  detail: string;
+}
+
+export interface SlotGroupVm {
+  modelId: string;
+  /** The model's short name. */
+  modelLabel: string;
+  modelColor: string;
+  /** Slots in this group that are processing. */
+  busy: number;
+  /** Slots in this group whose occupancy could not be established. */
+  unknown: number;
+  /** Slots in this group. */
+  total: number;
+  /** `2/4 busy`, plus ` · 1 unknown` when a lane could not be spoken for. */
+  summary: string;
+  /** `63 t/s` while the model is generating; `""` when idle or the rate is unknown. */
+  rateLabel: string;
+  /**
+   * The busiest lane's context fill, 0–100 — the group's overflow signal — or
+   * `null` when no lane reported one.
+   */
+  peakPct: number | null;
+  /**
+   * `61%`, the peak as a label, or `""` when there is no peak to show. Shown
+   * only on a busy chip; the number is never color-only.
+   */
+  peakLabel: string;
+  /** Threshold color for {@link peakLabel}: tertiary, then warning, then error. */
+  peakColor: string;
+  slots: SlotDotVm[];
+}
+
+export interface SlotsVm {
+  /** One group per loaded model, in models order. */
+  groups: SlotGroupVm[];
+  /** True when no model is loaded (no groups). */
+  empty: boolean;
+  emptyLabel: string;
+  /** `3 of 8 busy · peak 92% ctx`; the peak clause is dropped when nothing is busy. */
+  totalSummary: string;
+}
+
+export interface DashboardVm {
+  service: ServiceVm;
+  gauges: GaugeVm[];
+  /**
+   * The HOST block's unit control, or `null` when no gauge in {@link gauges} is
+   * a temperature row. See {@link TemperatureControlVm}.
+   */
+  temperature: TemperatureControlVm | null;
+  models: ModelCardVm[];
+  allLogsPill: PillVm;
+  kpis: KpiVm[];
+  spark: SparkVm;
+  toolbar: ToolbarVm;
+  console: ConsoleVm;
+  logCounts: LogCountsVm;
+  /**
+   * Every matching buffered line, folds expanded, with no render cap — what
+   * Copy and Download write out. Deliberately NOT the painted rows: those stop
+   * at {@link LOG_RENDER_LIMIT} and hide the launch arguments behind a fold,
+   * which is the single most likely thing an operator is copying.
+   */
+  exportLines: LogRowVm[];
+  slots: SlotsVm;
+}
+
+/** The button verb for each action, and its in-flight form. */
+const SERVICE_LABELS: Record<ServiceAction, string> = {
+  start: "Start",
+  stop: "Stop",
+  restart: "Restart",
+};
+const SERVICE_BUSY_LABELS: Record<ServiceAction, string> = {
+  start: "Starting…",
+  stop: "Stopping…",
+  restart: "Restarting…",
+};
+
+/** The order the control row renders, whatever order the source listed them in. */
+const SERVICE_ACTION_ORDER: readonly ServiceAction[] = ["start", "stop", "restart"];
+
+/** `a`, `a and b`, `a, b and c` — never a bare comma list. */
+function joinNames(names: string[]): string {
+  if (names.length <= 1) return names[0] ?? "";
+  return `${names.slice(0, -1).join(", ")} and ${names[names.length - 1]}`;
+}
+
+/**
+ * What a disruptive action will actually cost, naming the real models that are
+ * loaded right now. Vague warnings get clicked through; "Restart unloads
+ * gpt-oss-20b and drops in-flight requests" does not. With nothing loaded there
+ * is no model to name and the strip says so rather than inventing a stake.
+ */
+function serviceConsequence(action: ServiceAction, snapshot: Snapshot): string {
+  const verb = SERVICE_LABELS[action];
+  const loaded = snapshot.models
+    .filter((model) => model.status === "active" || model.status === "resident")
+    .map((model) => model.short);
+
+  if (loaded.length === 0) {
+    return `${verb} drops any in-flight requests. No model is loaded right now.`;
+  }
+  // The comma before "and drops" keeps the two clauses apart once the model
+  // list itself contains an "and".
+  const separator = loaded.length > 1 ? "," : "";
+  return `${verb} unloads ${joinNames(loaded)}${separator} and drops in-flight requests.`;
+}
+
+/**
+ * The SERVICE control row.
+ *
+ * Which actions exist is config, not a guess: the snapshot carries exactly the
+ * actions `steward.json` declares a consented command for. None configured is
+ * its own state — one setup affordance naming `/steward_initialize`, never
+ * three dead buttons that would 400 if pressed. An action that cannot apply
+ * right now (starting a started service) disables WITH a reason, so the
+ * greyed-out fill is never the only thing carrying it.
+ */
+function selectServiceControls(snapshot: Snapshot, ui: UiState): ServiceControlsVm {
+  const running = snapshot.service.running;
+  const pending = ui.pendingService !== null;
+  const available = SERVICE_ACTION_ORDER.filter((action) =>
+    snapshot.service.controls.includes(action),
+  );
+
+  const buttons: ServiceControlVm[] = available.map((action) => {
+    const busy = ui.pendingService === action;
+    // Restart stays live while stopped — it is the one command a machine that
+    // only consented to `restart` has, and launchd/systemd both start from it.
+    const reason =
+      running && action === "start"
+        ? "The service is already started."
+        : !running && action === "stop"
+          ? "The service is already stopped."
+          : "";
+    const label = busy ? SERVICE_BUSY_LABELS[action] : SERVICE_LABELS[action];
+    return {
+      action,
+      label,
+      busy,
+      disabled: pending || reason !== "",
+      disabledReason: reason,
+      confirms: action !== "start",
+      danger: action !== "start",
+      ariaLabel:
+        reason === ""
+          ? `${label} the llama.cpp service`
+          : `${label} the llama.cpp service. ${reason}`,
+    };
+  });
+
+  // The strip stands only while its own button would still act. Anything that
+  // disables that button — a poll showing the service already stopped, an
+  // action going out, the config dropping the command — closes the strip too,
+  // so it can never sit there stating a consequence that has become false
+  // ("unloads gpt-oss-20b" after the service died on its own) over an Accept
+  // that would still POST.
+  const opener = buttons.find((button) => button.action === ui.confirmService);
+  const confirming = opener !== undefined && !opener.disabled ? opener.action : null;
+
+  const failure = ui.serviceFailure;
+  return {
+    buttons,
+    setup:
+      buttons.length > 0
+        ? null
+        : {
+            label: "Service control is not set up.",
+            detail:
+              "Steward runs only the start, stop and restart commands this machine has declared and you have approved.",
+            command: "/steward_initialize",
+          },
+    confirm:
+      confirming === null
+        ? null
+        : {
+            action: confirming,
+            consequence: serviceConsequence(confirming, snapshot),
+            confirmLabel: SERVICE_LABELS[confirming],
+            confirmAriaLabel: `Confirm: ${SERVICE_LABELS[confirming].toLowerCase()} the llama.cpp service`,
+            cancelLabel: "Cancel",
+          },
+    // The command's own words, not a paraphrase: "permission denied" tells the
+    // operator what to fix, where "something went wrong" tells them nothing.
+    notice:
+      failure === null
+        ? null
+        : failure.detail === null || failure.detail === ""
+          ? `${SERVICE_LABELS[failure.action]} failed.`
+          : `${SERVICE_LABELS[failure.action]} failed — ${failure.detail}`,
+    pending,
+  };
+}
+
+/** How many flag groups a notice names before it summarises the rest. */
+const DRIFT_LIST_LIMIT = 3;
+
+/** The Pi command that re-detects this machine and rewrites `steward.json`. */
+const SETUP_COMMAND = "/steward_initialize";
+
+/** Human-readable action names for the consent-drift sentence. */
+const CONTROL_NAMES: Record<ServiceAction, string> = {
+  start: "start",
+  stop: "stop",
+  restart: "restart",
+};
+
+/** `--metrics and --slots`, or `--a, --b, --c and 4 more` past the limit. */
+function driftList(groups: readonly string[]): string {
+  if (groups.length <= DRIFT_LIST_LIMIT) return joinNames([...groups]);
+  const head = groups.slice(0, DRIFT_LIST_LIMIT).join(", ");
+  return `${head} and ${groups.length - DRIFT_LIST_LIMIT} more`;
+}
+
+/**
+ * The launch-argv half of the notice: one line naming exactly what changed.
+ * Only a `drifted` verdict speaks. `clean` says nothing (a compliant machine is
+ * not nagged), and `unknown` says nothing either — Steward could not check, so
+ * it has nothing to report and does not pretend otherwise.
+ */
+function launchDriftMessages(launch: LaunchDrift): string[] {
+  if (launch.status !== "drifted") return [];
+  const messages: string[] = [];
+  const changes: string[] = [];
+  if (launch.removed.length > 0) changes.push(`${driftList(launch.removed)} removed`);
+  if (launch.added.length > 0) changes.push(`${driftList(launch.added)} added`);
+  if (changes.length > 0) {
+    messages.push(`Launch flags changed since setup: ${changes.join(", ")}.`);
+  }
+  if (launch.program !== null) {
+    // Spelled out rather than arrowed: an arrow glyph is silence to a screen
+    // reader, and this line is the whole content of the alert.
+    messages.push(
+      `The server binary changed since setup: it was ${launch.program.recorded}, and is now ${launch.program.observed}.`,
+    );
+  }
+  return messages;
+}
+
+/**
+ * The consent half: a command `steward.json` declares that the operator has not
+ * approved. Steward refusing to run it is the gate working as designed — but an
+ * inert panel with no explanation looks exactly like one that was never set up,
+ * so the reason is said out loud.
+ */
+function consentDriftMessages(consent: ConsentDrift): string[] {
+  const messages: string[] = [];
+  if (consent.hostCollector) {
+    messages.push(
+      "The host-metrics collector is declared but not approved, so no host readings are being collected.",
+    );
+  }
+  if (consent.controls.length > 0) {
+    const names = consent.controls.map((action) => CONTROL_NAMES[action]);
+    messages.push(
+      names.length === 1
+        ? `The ${names[0]} command is declared but not approved, so it is not offered.`
+        : `The ${joinNames(names)} commands are declared but not approved, so they are not offered.`,
+    );
+  }
+  return messages;
+}
+
+/**
+ * The drift notice, or `null` when there is nothing honest to say.
+ *
+ * Dismissal is bound to {@link DriftNoticeVm.key} and lives in memory only: the
+ * notice returns on the next reload, and immediately if what drifted changes.
+ * A mismatch that is still there must never be hidden by a click the operator
+ * made ten minutes ago — the whole feature is a promise that silence means
+ * compliance.
+ */
+function selectDrift(snapshot: Snapshot, ui: UiState): DriftNoticeVm | null {
+  const { launch, consent } = snapshot.drift;
+  const messages = [...launchDriftMessages(launch), ...consentDriftMessages(consent)];
+  if (messages.length === 0) return null;
+
+  const key = [
+    launch.status === "drifted"
+      ? `launch:-${launch.removed.join("\u0000")}:+${launch.added.join("\u0000")}:${
+          launch.program === null ? "" : launch.program.observed
+        }`
+      : "",
+    consent.hostCollector ? "collector" : "",
+    consent.controls.length > 0 ? `controls:${consent.controls.join(",")}` : "",
+  ].join("|");
+  if (ui.dismissedDrift === key) return null;
+
+  const fix = `Re-run ${SETUP_COMMAND} to re-detect this machine.`;
+  return {
+    key,
+    title: "Configuration drift",
+    messages,
+    fix,
+    dismissLabel: "Dismiss",
+    dismissAriaLabel:
+      "Dismiss the configuration drift notice. It returns while the mismatch is still there.",
+    ariaLabel: "Configuration drift",
+    announcement: `Configuration drift. ${messages.join(" ")} ${fix}`,
+  };
+}
+
+/** What the polite status region should say about drift, and the new watermark. */
+export interface DriftAnnouncement {
+  /** The sentence to announce, or `null` when nothing has changed. */
+  message: string | null;
+  /** The key to remember, so the same notice is not announced twice. */
+  key: string | null;
+}
+
+/**
+ * Decides whether a drift notice is worth announcing.
+ *
+ * The snapshot poll runs every 1.6 s and drift persists across all of them, so
+ * announcing per repaint would turn a screen reader into a metronome. The notice
+ * is announced when it is NEW — a different mismatch, or the first one after a
+ * clean stretch — and stays silent otherwise. Losing the notice resets the
+ * watermark, so a mismatch that returns is announced again.
+ */
+export function driftAnnouncement(
+  notice: DriftNoticeVm | null,
+  lastKey: string | null,
+): DriftAnnouncement {
+  if (notice === null) return { message: null, key: null };
+  if (notice.key === lastKey) return { message: null, key: lastKey };
+  return { message: notice.announcement, key: notice.key };
+}
+
+function selectService(snapshot: Snapshot, ui: UiState): ServiceVm {
+  const { service } = snapshot;
+  // Two of the three states are reachable from a reachability probe. `unknown`
+  // belongs to a machine that was never pointed at a server at all, which is a
+  // fact the snapshot does not carry yet; the chip renders it correctly the day
+  // it does.
+  const state: ServiceState = service.running ? "up" : "down";
+  const presentation = SERVICE_STATE_PRESENTATION[state];
+  // The glyph reports the current mode, not the destination — with three states
+  // "next" is ambiguous — and the label names both so the change is announced.
+  const themeGlyph = ui.theme === "system" ? "◐" : ui.theme === "light" ? "☀" : "☾";
+  const themeLabel =
+    ui.theme === "system"
+      ? "Theme: System (matches your OS). Switch to light."
+      : ui.theme === "light"
+        ? "Theme: Light. Switch to dark."
+        : "Theme: Dark. Switch to system.";
+
+  return {
+    state,
+    statusLabel: presentation.label,
+    statusDotColor: presentation.dotColor,
+    themeGlyph,
+    themeLabel,
+    controls: selectServiceControls(snapshot, ui),
+    drift: selectDrift(snapshot, ui),
+    config: snapshot.config,
+  };
+}
+
+/**
+ * A memory gauge (VRAM, RAM, or Unified). `solid` when both figures are real,
+ * else the value dashes and the track hatches — an empty bar for a reading the
+ * host could not supply, told apart from a genuine 0%.
+ */
+function memoryGauge(
+  key: string,
+  label: string,
+  usedGB: number,
+  totalGB: number,
+  decimals: number,
+  color: string,
+): GaugeVm {
+  const read = Number.isFinite(usedGB) && Number.isFinite(totalGB);
+  return {
+    key,
+    label,
+    value: memoryLabel(usedGB, totalGB, decimals),
+    percent: barPercent(totalGB === 0 ? 0 : usedGB / totalGB),
+    color,
+    track: read ? "solid" : "hatched",
+    temperature: false,
+  };
+}
+
+/**
+ * A utilisation gauge (GPU, CPU). A real 0% is a reading and stays `solid`; only
+ * a non-finite figure the source could not supply hatches.
+ */
+function utilGauge(key: string, label: string, util: number, color: string): GaugeVm {
+  return {
+    key,
+    label,
+    value: formatPercent(util),
+    percent: barPercent(util),
+    color,
+    track: Number.isFinite(util) ? "solid" : "hatched",
+    temperature: false,
+  };
+}
+
+/**
+ * A temperature gauge. Only ever built from a finite reading, so always solid.
+ *
+ * The unit reaches the LABEL and nothing else: the bar's position and the
+ * threshold color are computed from the Celsius reading whichever unit is on
+ * screen, so switching units moves the text and moves nothing else.
+ */
+function tempGauge(key: string, label: string, celsius: number, unit: TemperatureUnit): GaugeVm {
+  return {
+    key,
+    label,
+    value: formatTemperature(celsius, unit),
+    percent: temperatureBarPercent(celsius),
+    color: temperatureColor(celsius),
+    track: "solid",
+    temperature: true,
+  };
+}
+
+/**
+ * The HOST block's gauge set, laid out for the machine's memory topology. A
+ * `discrete` box shows the VRAM+RAM pair; a `unified` one (Apple Silicon) shares
+ * one pool and cannot read a VRAM total — so it shows a single Unified RAM gauge
+ * and NEVER an invented VRAM ceiling. Both share the GPU/CPU util and temperature
+ * rows.
+ *
+ * The temperature rows are labelled in `ui.temperatureUnit` — the operator's
+ * browser region, resolved before it got here. It is a labelling choice only;
+ * nothing about which gauges exist, or where their bars sit, depends on it.
+ */
+function selectGauges(snapshot: Snapshot, ui: UiState): GaugeVm[] {
+  const m = snapshot.metrics;
+  const gauges: GaugeVm[] =
+    snapshot.memoryTopology === "unified"
+      ? // Unified memory takes the place of the VRAM+RAM pair; there is no
+        // separate VRAM figure to show, so no VRAM gauge is built at all.
+        [
+          memoryGauge(
+            "unified-memory",
+            "Unified RAM",
+            m.ramUsedGB,
+            m.ramTotalGB,
+            1,
+            "var(--latte-teal)",
+          ),
+        ]
+      : [memoryGauge("vram", "VRAM", m.vramUsedGB, m.vramTotalGB, 1, "var(--latte-teal)")];
+
+  gauges.push(utilGauge("gpu", "GPU", m.gpuUtil, "var(--latte-mauve)"));
+
+  // Temperatures come from host sensors, not llama.cpp. Where the platform
+  // cannot supply them the design drops the row rather than plotting a zero,
+  // and a reading that is not a number is no more of a reading than `null`.
+  if (m.gpuTempC !== null && Number.isFinite(m.gpuTempC)) {
+    gauges.push(tempGauge("gpu-temp", "GPU temp", m.gpuTempC, ui.temperatureUnit));
+  }
+
+  // Discrete machines carry a separate RAM gauge after the temps; unified
+  // machines already accounted for RAM in the single Unified RAM gauge.
+  if (snapshot.memoryTopology === "discrete") {
+    gauges.push(memoryGauge("ram", "RAM", m.ramUsedGB, m.ramTotalGB, 0, "var(--accent)"));
+  }
+
+  gauges.push(utilGauge("cpu", "CPU", m.cpuUtil, "var(--latte-peach)"));
+
+  if (m.cpuTempC !== null && Number.isFinite(m.cpuTempC)) {
+    gauges.push(tempGauge("cpu-temp", "CPU temp", m.cpuTempC, ui.temperatureUnit));
+  }
+  return gauges;
+}
+
+/** The unit each preference resolves a press to, in a fixed three-stop cycle. */
+const TEMPERATURE_NEXT: Record<TemperaturePreference, TemperaturePreference> = {
+  auto: "celsius",
+  celsius: "fahrenheit",
+  fahrenheit: "auto",
+};
+
+/** The two-character token an operator reads a temperature in. */
+function unitSymbol(unit: TemperatureUnit): string {
+  return unit === "celsius" ? "°C" : "°F";
+}
+
+/**
+ * The HOST block's temperature-unit control, or `null` when this machine
+ * reports no temperature at all.
+ *
+ * Absent rather than disabled: `selectGauges` drops a temperature row when the
+ * sensor is missing, so on such a machine the control would provably change
+ * nothing on screen — and a row of dead controls reads as broken while an
+ * absent one reads as "there is nothing here", which is the truth.
+ *
+ * The label is the PREFERENCE (`auto`, not `°C auto`): the resolved unit is
+ * literally visible on the gauge one line below, so the four characters are
+ * spent saying the thing the gauges cannot.
+ */
+function selectTemperatureControl(
+  gauges: readonly GaugeVm[],
+  ui: UiState,
+): TemperatureControlVm | null {
+  if (!gauges.some((gauge) => gauge.temperature)) return null;
+  const preference = ui.temperaturePreference;
+  const next = TEMPERATURE_NEXT[preference];
+  const sentence =
+    preference === "auto"
+      ? `Temperature unit: automatic — ${unitSymbol(ui.temperatureUnit)} from your browser region. Switch to always °C.`
+      : preference === "celsius"
+        ? "Temperature unit: always °C. Switch to always °F."
+        : "Temperature unit: always °F. Switch to automatic.";
+  return {
+    label: preference === "auto" ? "auto" : unitSymbol(preference),
+    ariaLabel: sentence,
+    title: sentence,
+    next,
+  };
+}
+
+function selectModels(snapshot: Snapshot, ui: UiState): ModelCardVm[] {
+  return snapshot.models.map((model) => {
+    const color = modelColor(model.id, model.embedding);
+    const selected = ui.filterModel === model.id;
+    const loaded = model.status !== "unloaded";
+    const pendingAction = ui.pendingModels[model.id];
+    // The card shows the loading state whenever the model is mid-transition,
+    // whether this operator started it (a local pending flag) or the polled
+    // status arrived already `loading`/`downloading` (someone else did).
+    const statusPending = model.status === "loading" || model.status === "downloading";
+
+    // A model's facts — quant, size, context, tuning — are only known for
+    // certain once it is loaded and reporting them; before that they are
+    // inference (a filename) or intent (launch args), not confirmed, so every
+    // field but `Type` reads `n/a` and every unloaded card reads the same. The
+    // type is confirmed even unloaded (the router reports the modalities), so it
+    // always carries a real value.
+    const confirmed = model.status === "active" || model.status === "resident";
+
+    // The card body: a fixed label set in a fixed order (`Type` last). `na`
+    // rides along so the view can dim a field without re-reading its string.
+    const fields: ModelFieldVm[] = [
+      { label: "Quant", value: formatQuantField(model.quant, confirmed) },
+      { label: "Size", value: formatSizeField(model.sizeGB, confirmed) },
+      { label: "Context", value: formatContextField(model.ctx, confirmed) },
+      { label: "GPU Layers", value: formatGpuLayersField(model.gpuLayers, confirmed) },
+      { label: "Flash", value: formatFlashField(model.flashAttn, confirmed) },
+      { label: "KV Cache", value: formatKvCacheField(model.kvCache, confirmed) },
+      { label: "Type", value: formatTypeField(model.embedding) },
+    ].map((f) => ({ ...f, na: f.value === NA }));
+
+    return {
+      id: model.id,
+      short: model.short,
+      fields,
+      color,
+      selected,
+      cardBackground: selected ? tint(color, 10) : "var(--surface-page)",
+      cardBorder: selected ? tint(color, 50) : "var(--border)",
+      buttonAction: loaded ? "unload" : "load",
+      // The button is the only place a transition is announced (the header says
+      // nothing now). It distinguishes a download — which pulls weights over the
+      // network and can run minutes — from a load into VRAM, since the wait is so
+      // different; an operator-started action shows its optimistic verb first.
+      buttonLabel:
+        pendingAction === "unload"
+          ? "Unloading…"
+          : model.status === "downloading"
+            ? "Downloading…"
+            : pendingAction === "load" || statusPending
+              ? "Loading…"
+              : loaded
+                ? "Unload"
+                : "Load",
+      buttonBackground: loaded ? "var(--surface-page)" : "var(--accent)",
+      buttonColor: loaded ? "var(--error)" : "var(--accent-fg)",
+      buttonBorder: loaded ? tint("var(--error)", 40) : "var(--accent)",
+      pending: pendingAction !== undefined || statusPending,
+    };
+  });
+}
+
+function selectKpis(snapshot: Snapshot, now: number): KpiVm[] {
+  const { service } = snapshot;
+  const running = service.running;
+  const uptime = service.startedAt === null ? "—" : formatUptime(now - service.startedAt);
+  // Port lives in the `address` fact now (the Steward block); the tile owns
+  // uptime and pid, so it does not repeat the port.
+  const pid = service.pid === null ? "no process" : `pid ${service.pid}`;
+
+  // The requests tile reports live counts (in flight, queued) — llama.cpp has
+  // no request-rate metric. The bar fills as the slots fill.
+  //
+  // Either figure can be genuinely unavailable, and each for its own reason. In
+  // flight is `null` when a slot's occupancy is unknown, so the true count can
+  // only be bounded below. Queued has no log line behind it at all, so a Steward
+  // reading occupancy from the log — which is every Steward with a log source —
+  // simply cannot know it. Both print a dash and neither prints a `0`, because
+  // "none" and "we cannot tell" are the two answers an operator most needs to
+  // tell apart on this tile.
+  const inFlight = running ? snapshot.requestsInFlight : 0;
+  const queued = running ? snapshot.requestsQueued : 0;
+  const slotTotal = snapshot.slots.length;
+  const requestsFill =
+    inFlight === null ? 0 : slotTotal > 0 ? inFlight / slotTotal : inFlight > 0 ? 1 : 0;
+  const throughput = running ? snapshot.throughputTps : 0;
+  // The window is what the tile is allowed to CLAIM. A source that measured one
+  // says how long it was, and the tile names it; a source that only sampled a
+  // rate gauge reports none, and the tile says nothing about a span it does not
+  // have. A stopped server is not measuring anything either way.
+  const throughputWindow = running ? snapshot.throughputWindowSeconds : null;
+
+  return [
+    {
+      key: "service",
+      label: "service",
+      value: running ? uptime : "stopped",
+      unit: running ? "uptime" : "",
+      sub: running ? pid : "no process",
+      color: running ? "var(--success)" : "var(--error)",
+      percent: running ? 100 : 0,
+    },
+    {
+      key: "requests",
+      label: "requests",
+      value: inFlight === null ? NO_READING : String(inFlight),
+      unit: "in flight",
+      sub: queued === null ? "queued n/a" : `${queued} queued`,
+      color: "var(--accent)",
+      percent: barPercent(requestsFill),
+    },
+    {
+      key: "throughput",
+      label: "throughput",
+      // A dash here means no window has been measured — nothing has closed yet,
+      // or the log stream broke and the span cannot be vouched for. That is a
+      // different thing from `0`, which is a window that elapsed with nothing
+      // generated in it, so the two must not share a glyph.
+      value: throughput === null ? NO_READING : countLabel(throughput),
+      unit: "tok/s",
+      // Generation, never prefill — and over the span the figure actually
+      // covers, because "tok/s" beside a live tile reads as "right now" unless
+      // the tile says otherwise. It is the same span the strip below plots.
+      sub:
+        throughputWindow === null
+          ? "generation, all slots"
+          : `generation, last ${Math.round(throughputWindow)} s`,
+      color: "var(--latte-mauve)",
+      percent: barPercent((throughput ?? 0) / THROUGHPUT_FULL_SCALE),
+    },
+  ];
+}
+
+function selectSpark(snapshot: Snapshot): SparkVm {
+  const samples = snapshot.throughputHistory;
+  // Bars are plotted against the window's own peak, not a fixed ceiling, so a
+  // quiet two minutes still shows shape instead of a flat line at the bottom.
+  const peak = samples.reduce((hi, v) => Math.max(hi, v), 1);
+  const average =
+    samples.length === 0 ? 0 : samples.reduce((total, v) => total + v, 0) / samples.length;
+  const newest = samples.length - 1;
+
+  // A source that measured its window says how far back the bars reach. One that
+  // only sampled a rate gauge measured none, so the axis falls back to the span
+  // the strip is built to hold — the only claim available there.
+  const window = snapshot.throughputWindowSeconds;
+  const nominal = THROUGHPUT_HISTORY_SIZE * THROUGHPUT_SAMPLE_SECONDS;
+
+  return {
+    bars: samples.map((value, index) => ({
+      height: barPercent(value / peak),
+      color: index === newest ? "var(--accent)" : tint("var(--accent)", 38),
+    })),
+    summary: `avg ${Math.round(average)} · peak ${Math.round(peak)} tok/s`,
+    averageLine: barPercent(average / peak),
+    axisStart: `−${Math.round(window ?? nominal)} s`,
+  };
+}
+
+/**
+ * Who wrote a line, from the operator's point of view.
+ *
+ * A missing `origin` means the source predates the field, and every measured
+ * unattributed line was router-wide — so an unattributed line defaults to
+ * `router`, and the dash is reserved for a source that positively says a CHILD
+ * wrote it and Steward still could not name the model. Those are two different
+ * facts and the console must not spend one glyph on both.
+ */
+function lineScope(line: LogLine): LineScope {
+  if (line.modelId !== null) return "model";
+  return line.origin === "child" ? "unknown" : "router";
+}
+
+const ROUTER_TITLE = "router-wide — this line is not about any one model";
+const UNKNOWN_TITLE =
+  "model unknown — this line came from a child process on a port Steward has not mapped yet";
+
+/**
+ * One line after the model scope, with every filter axis staged as a boolean.
+ *
+ * Staging them rather than applying them in sequence is what makes two axes of
+ * honest chip counts possible: one walk over the grouped set can lift any one
+ * axis and leave the rest applied, which is exactly what a chip's number
+ * promises.
+ */
+interface StagedLine {
+  line: LogLine;
+  scope: LineScope;
+  kind: LogKind;
+  family: LogFamily;
+  /** True when the active query matches, or when there is no query. */
+  hit: boolean;
+  /** False only for a proxy line while the toggle is off. */
+  shown: boolean;
+  /** Passes the level chip as it is set right now. */
+  levelPass: boolean;
+  /** Passes the record-type chip as it is set right now. */
+  familyPass: boolean;
+  /** `seq` of the args run this belongs to, or `null` for a standalone line. */
+  runId: number | null;
+}
+
+/** A line that survived the whole filter stack, with its fold membership. */
+interface KeptLine {
+  line: LogLine;
+  scope: LineScope;
+  kind: LogKind;
+  /** `seq` of the args run this belongs to, or `null` for a standalone line. */
+  runId: number | null;
+  hit: boolean;
+  /** True while this row belongs to the open trace. */
+  traced: boolean;
+}
+
+/** The text a query is matched against: the file's line, frame included. */
+function lineText(line: LogLine): string {
+  return `${line.frame?.raw ?? ""}${line.message}`;
+}
+
+/** The trace key, composed at the call site rather than stored on the record. */
+export function taskKey(port: number, task: number): string {
+  return `${port}:${task}`;
+}
+
+/** Everything one pass over the buffer produces. */
+interface LogSelection {
+  rows: LogRowVm[];
+  /** The open trace's membership and guards, or `null`. */
+  trace: TraceSelection | null;
+  exportLines: LogRowVm[];
+  counts: LogCountsVm;
+  /** Arrival stamp of the newest matching line, or `null` when none match. */
+  newestMatchedAt: number | null;
+  /**
+   * Arrival stamp of the newest line in the BUFFER, matching or not. The gap
+   * between this and {@link newestMatchedAt} is how the console knows the
+   * difference between a router that has gone silent and a filter that is
+   * hiding everything the router is currently saying.
+   */
+  newestBufferedAt: number | null;
+}
+
+interface RowContext {
+  shorts: Map<string, ModelInfo>;
+  /** The model the console is scoped to, or `null`. */
+  scoped: string | null;
+  /** The open trace, so a row can say whether its task is the one being traced. */
+  trace: TraceRef | null;
+}
+
+/**
+ * The trace entry point for a row, or `null`.
+ *
+ * `null` for an unframed line, for a line whose port Steward never saw (half
+ * the trace key is missing, and a trace on the other half would be a
+ * mis-attribution), and for `get_availabl`, which is `task -1` in 217/217
+ * measured cases because no task is attached yet. That last one joins its trace
+ * by adjacency instead, and the banner says so.
+ */
+function taskCell(line: LogLine, trace: TraceRef | null): TaskCellVm | null {
+  const frame = line.frame;
+  const port = line.port;
+  if (frame === undefined || port === undefined || frame.task < 0) return null;
+  const active = trace !== null && trace.port === port && trace.task === frame.task;
+  return {
+    port,
+    task: frame.task,
+    key: taskKey(port, frame.task),
+    // `▸` already means "press to reveal more" in this console and `▾` means
+    // "showing"; the task cell reuses the args fold's vocabulary exactly.
+    label: `${active ? "▾" : "▸"}${frame.task}`,
+    ariaLabel: `Trace task ${frame.task} on port ${port}. This is llama-server's own handle for the request, not a request number.`,
+    active,
+  };
+}
+
+/**
+ * A row's trailing annotations. Every one is a nullable enrichment: an absent
+ * reading renders nothing at all, so a llama.cpp that renames a payload costs
+ * one missing badge and never a row.
+ */
+function logBadges(line: LogLine, model: ModelInfo | undefined): LogBadgeVm[] {
+  const badges: LogBadgeVm[] = [];
+  // Only ever for `= 1`. A `truncated: no` badge on 217 of 217 rows is the
+  // definition of crying wolf: it trains the eye to skip the exact pixel where
+  // the real thing will appear.
+  if (line.contextLost === true) {
+    badges.push({
+      key: "context-lost",
+      label: "▲ context lost",
+      title:
+        "A context shift discarded the front of this conversation before the reply was written.",
+      tone: "warn",
+    });
+  }
+  // The one extraction that TRANSLATES rather than repeats: an operator knows
+  // what "cache 47%" means and does not know what `sim_best = 0.473` means.
+  if (line.cacheHit !== undefined && Number.isFinite(line.cacheHit)) {
+    const percent = Math.round(line.cacheHit * 100);
+    badges.push({
+      key: "cache",
+      label: `cache ${percent}%`,
+      title: `${percent}% of this prompt was already in the slot's KV cache, so only the rest had to be prefilled.`,
+      tone: "neutral",
+    });
+  }
+  // Revealed by the model's own `--parallel`, which the snapshot already
+  // carries — an authoritative rule rather than one inferred from the values
+  // seen so far. On a one-slot server every slot id is 0 and a column of zeros
+  // teaches an operator that the column is meaningless.
+  const parallel = model?.parallel ?? null;
+  if (line.frame !== undefined && parallel !== null && parallel > 1) {
+    badges.push({
+      key: "slot",
+      label: `slot ${line.frame.slot}`,
+      title: `Decode slot ${line.frame.slot} of this model's ${parallel}.`,
+      tone: "neutral",
+    });
+  }
+  return badges;
+}
+
+function logRow(
+  ctx: RowContext,
+  entry: KeptLine,
+  key: string,
+  message: string,
+  folded: boolean,
+  fold: FoldVm | null,
+): LogRowVm {
+  const { line, scope, kind } = entry;
+  const model = line.modelId === null ? undefined : ctx.shorts.get(line.modelId);
+  return {
+    key,
+    seq: line.seq,
+    time: formatClock(line.ts),
+    level: line.level,
+    // The word is the signal. A screen reader reads "router", which is the
+    // truth, where it would read an em dash as nothing at all.
+    model:
+      scope === "router"
+        ? "router"
+        : scope === "unknown"
+          ? NO_READING
+          : (model?.short ?? line.modelId ?? NO_READING),
+    // Once the console is scoped to one model the color carries no information,
+    // so the column recedes to plain muted text.
+    modelColor:
+      scope === "unknown"
+        ? "var(--text-subtle)"
+        : scope !== "model" || ctx.scoped !== null || model === undefined
+          ? "var(--text-muted)"
+          : modelColor(model.id, model.embedding),
+    modelTitle: scope === "router" ? ROUTER_TITLE : scope === "unknown" ? UNKNOWN_TITLE : "",
+    scope,
+    kind,
+    // A fold row stands for a whole args run, which is unframed and carries no
+    // enrichment of its own; both come back empty on their own merits.
+    task: taskCell(line, ctx.trace),
+    frameRaw: line.frame?.raw ?? "",
+    badges: fold === null ? logBadges(line, model) : [],
+    traced: entry.traced,
+    message,
+    folded,
+    fold,
+  };
+}
+
+function foldLabel(
+  expanded: boolean,
+  count: number,
+  truncated: boolean,
+  matches: number,
+  query: string,
+): string {
+  const noun = `launch argument${count === 1 ? "" : "s"}`;
+  // "dropped", never "trimmed" and never "rotated": launchd appends across
+  // router restarts, so nothing here ever rotates.
+  const cut = truncated ? " (older lines dropped)" : "";
+  const hits = matches > 0 ? ` · ${formatCount(matches)} match "${query}"` : "";
+  return `${expanded ? "▾" : "▸"} ${formatCount(count)} ${noun}${cut}${hits}`;
+}
+
+/**
+ * Marks the contiguous launch-argument runs, in place.
+ *
+ * Membership is decided BEFORE the query, the level chip and the record-type
+ * chip, on purpose: 31 argument lines are one artifact — the exact launch
+ * command — and a search for `ctx-size` that returned 2 of them and hid the
+ * other 29 would answer a question nobody asked.
+ *
+ * The scan walks the SHOWN lines only, so a suppressed proxy line interleaved
+ * with a spawn cannot split one launch command into two folds.
+ */
+function groupRuns(staged: readonly StagedLine[]): void {
+  let runId: number | null = null;
+  let inRun = false;
+  for (const entry of staged) {
+    if (!entry.shown) continue;
+    if (entry.kind !== "args") {
+      inRun = false;
+      runId = null;
+      continue;
+    }
+    if (!inRun) runId = entry.line.seq;
+    entry.runId = runId;
+    inRun = true;
+  }
+}
+
+/**
+ * The membership of one trace, and the two things that can be wrong with it.
+ *
+ * Both guards are surfaced rather than silently handled: a partial trace and a
+ * reused port are things the operator has to know, and a console that quietly
+ * showed half a request would be worse than one that says it is showing half.
+ */
+export interface TraceSelection {
+  members: LogLine[];
+  /** The earliest member is the oldest line held, and the buffer HAS evicted. */
+  partial: boolean;
+  /** The id belongs to more than one run on this port; only one is shown. */
+  splitRuns: boolean;
+  /** The model the port maps to, or `null` when Steward never mapped it. */
+  modelId: string | null;
+  /** True when the first member joined by adjacency rather than by task id. */
+  adjacent: boolean;
+}
+
+/**
+ * Every line one llama-server task wrote, in file order.
+ *
+ * Keyed on `(port, task)`. The opening `get_availabl` line carries `task -1` —
+ * no task is attached when the slot is chosen — so it joins by ADJACENCY, and
+ * only when the line immediately before the earliest member is on the same
+ * port, framed, and carries `-1`. Anything else and the trace simply starts at
+ * `launch_slot_`: the rule breaks by omitting a line, which is the safe
+ * direction for a console built to avoid mis-attribution.
+ *
+ * Deliberately NOT joined: the `proxy_reques` line. It is the only line that
+ * names the model and it carries no task id, so joining it would be adjacency
+ * at 1.25 lines/second of Steward's own polling. The model comes from the port
+ * map instead, or the banner names no model at all.
+ */
+export function selectTrace(
+  buffer: readonly LogLine[],
+  trace: TraceRef,
+  /** The buffer has evicted a signal line this session — see {@link TraceSelection.partial}. */
+  bufferDropped: boolean,
+): TraceSelection {
+  const matches: number[] = [];
+  buffer.forEach((line, index) => {
+    if (line.port === trace.port && line.frame?.task === trace.task) matches.push(index);
+  });
+
+  // An id can belong to two different requests: ports are ephemeral, and a
+  // child that died and respawned on the same one starts its task counter at 0
+  // again. Members more than a request's width apart are therefore two runs,
+  // and merging them would present one operator's request as another's — the
+  // exact mis-attribution this console is built to avoid. `anchorSeq` says
+  // which one was actually clicked, so only that run is shown.
+  const runs: number[][] = [];
+  for (const index of matches) {
+    const current = runs.at(-1);
+    const previous = current?.at(-1);
+    if (current === undefined || previous === undefined || index - previous > TRACE_SPLIT_GAP) {
+      runs.push([index]);
+    } else {
+      current.push(index);
+    }
+  }
+
+  // The run holding the row that opened the trace. If that row has since been
+  // evicted there is nothing to disambiguate with, so the newest run wins —
+  // still one request, never a merge of two.
+  const chosen =
+    runs.find((run) => run.some((index) => buffer[index]?.seq === trace.anchorSeq)) ??
+    runs.at(-1) ??
+    [];
+  const indices = [...chosen];
+
+  const first = indices[0];
+  let adjacent = false;
+  if (first !== undefined && first > 0) {
+    const before = buffer[first - 1];
+    if (before !== undefined && before.port === trace.port && before.frame?.task === -1) {
+      indices.unshift(first - 1);
+      adjacent = true;
+    }
+  }
+
+  const members = indices
+    .map((index) => buffer[index])
+    .filter((line): line is LogLine => line !== undefined);
+
+  return {
+    members,
+    // Only true when lines were ACTUALLY evicted. A trace that simply starts at
+    // the front of a buffer nothing has fallen out of is complete, and saying
+    // otherwise would be a warning about a loss that never happened.
+    partial: indices[0] === 0 && bufferDropped,
+    splitRuns: runs.length > 1,
+    // Read off the traced lines themselves, never off "some line that used this
+    // port once": a child that respawned on a reused port would otherwise have
+    // the banner name the model that USED to be there.
+    modelId: members.find((line) => line.modelId !== null)?.modelId ?? null,
+    adjacent,
+  };
+}
+
+/**
+ * The whole log pipeline for one repaint: stage every axis, group the
+ * launch-argument runs, count honestly, and cap what reaches the DOM.
+ *
+ * Two filter axes mean the counts cannot be a sequence of narrowing passes.
+ * Each is staged as a boolean on the line, the runs are grouped once, and a
+ * single walk lifts one axis at a time — so `levels[WARN]` is what pressing
+ * WARN yields with the record-type chip still applied, `families[models]` is
+ * what pressing `models` yields with the level chip still applied, and
+ * `hiddenProxy` is what the toggle would reveal with both applied. Every one of
+ * those numbers is literally true under every combination of the others.
+ */
+function selectLog(snapshot: Snapshot, ui: UiState): LogSelection {
+  const ctx: RowContext = {
+    shorts: new Map(snapshot.models.map((m) => [m.id, m])),
+    scoped: ui.filterModel,
+    trace: ui.trace,
+  };
+  const rawQuery = ui.query.trim();
+  const query = rawQuery.toLowerCase();
+  const buffer = visibleBuffer(ui);
+
+  let hiddenRouter = 0;
+  let contextLost = 0;
+  const staged: StagedLine[] = [];
+
+  for (const line of buffer) {
+    // Counted over the whole buffer, matching or not: the banner it drives says
+    // "of the N buffered", and both halves of that sentence have to be about
+    // the same population.
+    if (line.contextLost === true) contextLost += 1;
+    const scope = lineScope(line);
+    if (ui.filterModel !== null && line.modelId !== ui.filterModel) {
+      // Scoping to one model silently removes the boot banner, the preset
+      // catalogue and the launch arguments, because none of them belong to a
+      // model. Count them so the console can say so instead.
+      if (scope === "router") hiddenRouter += 1;
+      continue;
+    }
+    const kind = line.kind ?? "event";
+    const family = line.family ?? "other";
+    staged.push({
+      line,
+      scope,
+      kind,
+      family,
+      // Matched against the file's own line, frame included: the task id is
+      // visible on the row, so it has to be findable in the box.
+      hit: query === "" || lineText(line).toLowerCase().includes(query),
+      shown: kind !== "proxy" || ui.showProxy,
+      levelPass: ui.filterLevel === "all" || line.level === ui.filterLevel,
+      familyPass: ui.filterFamily === "any" || family === ui.filterFamily,
+      runId: null,
+    });
+  }
+
+  groupRuns(staged);
+
+  // A run is one artifact, so a hit anywhere in it counts for all of it.
+  const runHit = new Map<number, boolean>();
+  for (const entry of staged) {
+    if (entry.runId === null) continue;
+    runHit.set(entry.runId, (runHit.get(entry.runId) ?? false) || entry.hit);
+  }
+  for (const entry of staged) {
+    if (entry.runId !== null) entry.hit = query === "" || (runHit.get(entry.runId) ?? false);
+  }
+
+  const levels: Record<LevelFilter, number> = { all: 0, DEBUG: 0, INFO: 0, WARN: 0, ERROR: 0 };
+  const families: Record<FamilyFilter, number> = {
+    any: 0,
+    requests: 0,
+    models: 0,
+    startup: 0,
+    other: 0,
+  };
+  const kept: KeptLine[] = [];
+  let hiddenProxy = 0;
+  let proxyShown = 0;
+  let folded = 0;
+  let framed = 0;
+
+  for (const entry of staged) {
+    if (!entry.hit) continue;
+    if (!entry.shown) {
+      // Dropped ONLY for being proxy traffic — already past the model scope,
+      // the query, the level chip and the record-type chip. That is what makes
+      // the toggle's number a promise rather than an upper bound.
+      if (entry.levelPass && entry.familyPass) hiddenProxy += 1;
+      continue;
+    }
+    if (entry.familyPass) {
+      levels.all += 1;
+      levels[entry.line.level] += 1;
+    }
+    if (entry.levelPass) {
+      families.any += 1;
+      families[entry.family] += 1;
+    }
+    if (!entry.levelPass || !entry.familyPass) continue;
+    kept.push({
+      line: entry.line,
+      scope: entry.scope,
+      kind: entry.kind,
+      runId: entry.runId,
+      hit: true,
+      traced: false,
+    });
+    if (entry.kind === "proxy") proxyShown += 1;
+    if (entry.runId !== null) folded += 1;
+    if (entry.line.frame !== undefined) framed += 1;
+  }
+
+  const matched = kept.length;
+  const renderCapped = matched > LOG_RENDER_LIMIT;
+  const cutAt = renderCapped ? matched - LOG_RENDER_LIMIT : 0;
+  const painted = renderCapped ? kept.slice(cutAt) : kept;
+  /** The oldest line the buffer still holds — the boundary an eviction cut at. */
+  const oldestHeld = buffer[0]?.seq;
+
+  const rows: LogRowVm[] = [];
+  for (let i = 0; i < painted.length; ) {
+    const entry = painted[i];
+    if (entry === undefined) {
+      i += 1;
+      continue;
+    }
+    if (entry.runId === null) {
+      rows.push(logRow(ctx, entry, String(entry.line.seq), entry.line.message, false, null));
+      i += 1;
+      continue;
+    }
+
+    let end = i;
+    while (end < painted.length && painted[end]?.runId === entry.runId) end += 1;
+    const run = painted.slice(i, end);
+    const matches =
+      query === ""
+        ? 0
+        : run.filter((member) => lineText(member.line).toLowerCase().includes(query)).length;
+    // A hit inside a collapsed fold opens it and says why, without touching
+    // what the operator set: clearing the query puts the fold back.
+    const forced = matches > 0;
+    const sticky = ui.expandedArgs[entry.runId] === true;
+    const expanded = sticky || forced;
+    // Truncation is a fact about THIS run, not about the buffer. Only the front
+    // of the window can have lost members, and only two things can have taken
+    // them: the render slice cutting into the middle of the run, or the buffer
+    // evicting the members that came before its oldest held line. Anything
+    // looser puts "(older lines dropped)" on a complete 31-of-31 launch
+    // command, which is the exact false claim this label exists to make.
+    const cutByRender = i === 0 && cutAt > 0 && kept[cutAt - 1]?.runId === entry.runId;
+    const cutByBuffer =
+      i === 0 && ui.bufferDropped && oldestHeld !== undefined && entry.line.seq === oldestHeld;
+    const truncated = cutByRender || cutByBuffer;
+    const count = run.length;
+    const noun = `launch argument${count === 1 ? "" : "s"}`;
+    const fold: FoldVm = {
+      seq: entry.runId,
+      count,
+      expanded,
+      sticky,
+      truncated,
+      matches,
+      forced,
+      label: foldLabel(expanded, count, truncated, matches, rawQuery),
+      // No model is named: an args line is router-wide and carries no model id,
+      // and reading one out of the neighbouring spawn line would be an invented
+      // attribution — the one thing the model column exists to avoid.
+      //
+      // A fold a query holds open cannot be named "Hide …": pressing it would
+      // change nothing visible, only what happens once the query clears. So it
+      // says what the press actually does.
+      ariaLabel: !forced
+        ? `${expanded ? "Hide" : "Show"} the ${formatCount(count)} ${noun}`
+        : sticky
+          ? `${formatCount(count)} ${noun}, open because the search matches inside them. Collapse them once the search is cleared.`
+          : `${formatCount(count)} ${noun}, open because the search matches inside them. Keep them open once the search is cleared.`,
+    };
+    rows.push(logRow(ctx, entry, `fold:${entry.runId}`, fold.label, false, fold));
+    if (expanded) {
+      for (const member of run) {
+        rows.push(logRow(ctx, member, String(member.line.seq), member.line.message, true, null));
+      }
+    }
+    i = end;
+  }
+
+  // The trace branch, taken AFTER the counts and BEFORE the rows are handed
+  // out: membership ignores every filter, but the chips keep reporting the
+  // filtered buffer so they stay live and honest while a trace is open. That is
+  // what lets every control stay enabled — pressing one exits the trace and
+  // applies itself, and its number was already true.
+  let trace: TraceSelection | null = null;
+  if (ui.trace !== null) {
+    trace = selectTrace(buffer, ui.trace, ui.bufferDropped);
+    rows.length = 0;
+    for (const line of trace.members.slice(-LOG_RENDER_LIMIT)) {
+      rows.push(
+        logRow(
+          ctx,
+          {
+            line,
+            scope: lineScope(line),
+            kind: line.kind ?? "event",
+            runId: null,
+            hit: true,
+            traced: true,
+          },
+          String(line.seq),
+          line.message,
+          false,
+          null,
+        ),
+      );
+    }
+  }
+
+  return {
+    rows,
+    trace,
+    exportLines: kept.map((entry) =>
+      logRow(ctx, entry, String(entry.line.seq), entry.line.message, false, null),
+    ),
+    counts: {
+      rendered: painted.length,
+      matched,
+      buffered: buffer.length,
+      hiddenProxy,
+      proxyShown,
+      hiddenRouter,
+      folded,
+      bufferDropped: ui.bufferDropped,
+      renderCapped,
+      levels,
+      families,
+      framed,
+      contextLost,
+      traced: trace === null ? 0 : trace.members.length,
+    },
+    newestMatchedAt: kept.at(-1)?.line.ts ?? null,
+    newestBufferedAt: buffer.at(-1)?.ts ?? null,
+  };
+}
+
+/** The filters an operator has actually set, in the order the toolbar shows them. */
+function activeFilters(ui: UiState, shorts: Map<string, ModelInfo>): string[] {
+  const clauses: string[] = [];
+  if (ui.filterModel !== null) clauses.push(shorts.get(ui.filterModel)?.short ?? ui.filterModel);
+  if (ui.filterFamily !== "any") clauses.push(ui.filterFamily);
+  if (ui.filterLevel !== "all") clauses.push(ui.filterLevel);
+  const query = ui.query.trim();
+  if (query !== "") clauses.push(`"${query}"`);
+  return clauses;
+}
+
+const CLEAR_FILTERS: ConsoleActionVm = {
+  label: "Clear filters",
+  kind: "clear-filters",
+  ariaLabel: "Clear the model, record type, level and search filters",
+};
+
+const SHOW_ALL_MODELS: ConsoleActionVm = {
+  label: "show all",
+  kind: "show-all-models",
+  ariaLabel: "Show every model's lines, including the router-wide ones",
+};
+
+const EXIT_TRACE: ConsoleActionVm = {
+  label: "back",
+  kind: "exit-trace",
+  ariaLabel: "Close the trace and go back to the filtered log",
+};
+
+const SHOW_CONTEXT_LOST: ConsoleActionVm = {
+  label: "show them",
+  kind: "query-truncated",
+  // Named as the search it is, so nobody expects a fourth filter chip to appear.
+  ariaLabel: `Search the log for ${CONTEXT_LOST_QUERY}`,
+};
+
+/**
+ * The strip that makes `truncated = 1` findable.
+ *
+ * The level is NOT rewritten to make it findable — llama-server says INFO and
+ * the console says INFO, because an operator who has learned that the ERROR
+ * chip means "llama-server said E" must be able to keep believing that. So the
+ * badge alone would be findable only by scrolling, and this is the strip that
+ * fixes it.
+ *
+ * It appears only when the count is above zero. There is no "0 requests lost
+ * context" state: that would be a health affirmation about a signal the console
+ * can only see a 500-line window of, which is why the copy says "buffered"
+ * rather than implying a total.
+ */
+export function truncatedBanner(counts: LogCountsVm): ConsoleBannerVm | null {
+  if (counts.contextLost <= 0) return null;
+  // "lines", because lines are what is counted. `buffered` is a LINE count, and
+  // a 500-line window is roughly 20 requests — so "500 buffered requests" would
+  // be false by a factor of 25, in the one strip whose whole job is to be
+  // trusted. The noun also has to agree with the number it sits against, which
+  // is the denominator.
+  const noun = counts.buffered === 1 ? "line" : "lines";
+  return {
+    key: "context-lost",
+    placement: "top",
+    tone: "warn",
+    text: `▲ ${formatCount(counts.contextLost)} of the ${formatCount(
+      counts.buffered,
+    )} buffered ${noun} said the reply lost context`,
+    detail: "A context shift discarded the front of the conversation before the reply was written.",
+    action: SHOW_CONTEXT_LOST,
+  };
+}
+
+/** The open trace, as its banner reads it. */
+function selectTraceVm(
+  trace: TraceRef,
+  selection: TraceSelection,
+  shorts: Map<string, ModelInfo>,
+): TraceVm {
+  const modelLabel =
+    selection.modelId === null ? "" : (shorts.get(selection.modelId)?.short ?? selection.modelId);
+  const model = modelLabel === "" ? "" : ` · ${modelLabel}`;
+  // Both guards are said out loud rather than handled quietly. The rows are the
+  // same either way; what changes is whether the operator knows.
+  const partial = selection.partial ? " · earliest lines dropped from the buffer" : "";
+  // Two requests share this id because the port was reused. Only the one that
+  // was clicked is shown — merging them would be a mis-attribution — and the
+  // banner says so rather than letting a short trace look like the whole story.
+  const split = selection.splitRuns
+    ? ` · another request on port ${trace.port} shares this id — showing only the one you opened`
+    : "";
+  // "in file order" closes off sorting; there is no header a reader could take
+  // for a sort control, and task ids are not monotonic anyway (a deferred task
+  // is allocated its id at enqueue and logs later with a lower one).
+  const adjacency = selection.adjacent
+    ? " The first line has no task id of its own — it is attached by position."
+    : "";
+  return {
+    port: trace.port,
+    task: trace.task,
+    modelLabel,
+    count: selection.members.length,
+    title: `▾ tracing task ${trace.task} · port ${trace.port}${model} · ${formatLines(
+      selection.members.length,
+    )}${partial}${split}`,
+    detail:
+      "Every line llama-server wrote for this request, in file order. Filters do not apply inside a trace. Task ids are llama-server's internal handles: sparse, reused across children, and not in order." +
+      adjacency,
+    backLabel: EXIT_TRACE.label,
+    backAriaLabel: EXIT_TRACE.ariaLabel,
+    partial: selection.partial,
+    splitRuns: selection.splitRuns,
+  };
+}
+
+/** Paths macOS's `tmp_cleaner` unlinks after three untouched days. */
+const TMP_PREFIXES = ["/tmp/", "/private/tmp/"];
+
+/**
+ * The file-unlinked copy. Warn-toned and never called an error: nothing failed,
+ * the tailer holds its offset, and it re-opens the file the moment it returns.
+ * The path is named verbatim — that is what makes this diagnosable, and it is
+ * how the operator confirms Steward is watching what they think it is.
+ */
+function fileMissingCopy(path: string | null): { title: string; detail: string } {
+  const named = path === null ? "The log file Steward was watching" : path;
+  const temporary = path !== null && TMP_PREFIXES.some((prefix) => path.startsWith(prefix));
+  const why = temporary
+    ? " macOS clears /tmp files that have gone untouched for three days, so a router that was stopped that long has no log left."
+    : "";
+  const fix = temporary ? " Fix it for good: point llama-server's log somewhere outside /tmp." : "";
+  return {
+    title: "The log file is gone",
+    detail: `${named} no longer exists.${why} Steward is still watching that path and picks the log back up the moment llama-server writes to it again.${fix}`,
+  };
+}
+
+function consoleState(
+  snapshot: Snapshot,
+  ui: UiState,
+  counts: LogCountsVm,
+  newestMatchedAt: number | null,
+  now: number,
+): ConsoleState {
+  if (ui.logSource === "unavailable") return "no-source";
+  if (ui.logSource === "missing") return "file-missing";
+  if (ui.logStream === "reconnecting") return "reconnecting";
+  if (!snapshot.service.running) return "stopped";
+  if (ui.paused) return "paused";
+  // Above `empty-filtered`: a trace ignores the filters, so a filter stack that
+  // matches nothing says nothing about what the trace is showing.
+  if (ui.trace !== null) return "tracing";
+  if (counts.matched === 0 && counts.buffered > 0) return "empty-filtered";
+  if (counts.buffered === 0) return "cold";
+  // `LogLine.ts` is Steward's ARRIVAL stamp, so the newest matching row's stamp
+  // already is "when the last visible line arrived". No extra bookkeeping.
+  if (newestMatchedAt !== null && now - newestMatchedAt > QUIET_AFTER_MS) return "quiet";
+  return "streaming";
+}
+
+/**
+ * The empty-filtered notice.
+ *
+ * The ERROR chip gets its own words. An empty ERROR console is the single
+ * easiest place in this dashboard to imply "all clear", and it would be false:
+ * llama-server writes nothing at all for a rejected request and reports a
+ * failed model load at INFO.
+ */
+function emptyFilteredNotice(ui: UiState, counts: LogCountsVm, clauses: string[]): ConsoleNoticeVm {
+  const buffered = formatLines(counts.buffered);
+  const proxyClause =
+    counts.hiddenProxy > 0
+      ? ` ${formatCount(counts.hiddenProxy)} proxied lines are hidden by the toolbar toggle.`
+      : "";
+
+  if (ui.filterLevel === "ERROR") {
+    const others = clauses.filter((clause) => clause !== "ERROR");
+    return {
+      state: "empty-filtered",
+      glyph: "",
+      title:
+        others.length === 0
+          ? `No ERROR lines among the ${formatCount(counts.buffered)} buffered.`
+          : `No ERROR lines match ${others.join(" + ")}.`,
+      detail:
+        `This is not a health check: llama-server logs nothing at all for rejected requests, and reports a failed model load at INFO. A clean console is not a clean server.` +
+        (others.length === 0 ? "" : ` ${buffered} are buffered.`) +
+        proxyClause,
+      tone: "muted",
+      action: CLEAR_FILTERS,
+    };
+  }
+
+  return {
+    state: "empty-filtered",
+    glyph: "",
+    title:
+      clauses.length === 0 ? "No lines are showing." : `No lines match ${clauses.join(" + ")}.`,
+    detail: `${buffered} are buffered.${proxyClause}`,
+    tone: "muted",
+    action: clauses.length === 0 ? null : CLEAR_FILTERS,
+  };
+}
+
+/**
+ * The console's notices and strips.
+ *
+ * Exactly one state wins, but notices and strips are not the same thing: a
+ * state that has real lines under it gets a strip and keeps the lines (those
+ * eleven banner lines are what the operator opened the console to read), and
+ * only a state with nothing readable takes the whole panel. The truncation and
+ * scope strips are orthogonal to all of it and stack on top.
+ */
+function selectConsole(
+  snapshot: Snapshot,
+  ui: UiState,
+  selection: LogSelection,
+  now: number,
+  shorts: Map<string, ModelInfo>,
+): ConsoleVm {
+  const counts = selection.counts;
+  const state = consoleState(snapshot, ui, counts, selection.newestMatchedAt, now);
+  const banners: ConsoleBannerVm[] = [];
+  let notice: ConsoleNoticeVm | null = null;
+  const proxyClause =
+    counts.hiddenProxy > 0 ? ` · ${formatCount(counts.hiddenProxy)} proxied lines hidden` : "";
+  const frozenBehind =
+    ui.paused && ui.frozen !== null ? Math.max(0, ui.log.length - ui.frozen.length) : 0;
+  const trace =
+    ui.trace === null || selection.trace === null
+      ? null
+      : selectTraceVm(ui.trace, selection.trace, shorts);
+
+  if (trace !== null) {
+    banners.push({
+      key: "trace",
+      placement: "top",
+      tone: "trace",
+      text: trace.title,
+      detail: trace.detail,
+      action: EXIT_TRACE,
+    });
+  }
+
+  if (state === "reconnecting") {
+    banners.push({
+      key: "reconnecting",
+      placement: "top",
+      tone: "muted",
+      text: "◌ Reconnecting to the log stream…",
+      detail: "The lines below are the last Steward read; nothing has been cleared.",
+      action: null,
+    });
+  }
+
+  if (state === "paused") {
+    banners.push({
+      key: "paused",
+      placement: "top",
+      tone: "warn",
+      text:
+        frozenBehind > 0
+          ? `⏸ Paused · buffer frozen · ${formatLines(frozenBehind)} arrived behind it`
+          : "⏸ Paused · buffer frozen",
+      detail: "",
+      action: null,
+    });
+  }
+
+  // Everything below describes the FILTERED view, and filters do not apply
+  // inside a trace — so while one is open these strips would be claims about a
+  // console nobody is looking at.
+  const contextLostStrip = trace === null ? truncatedBanner(counts) : null;
+  if (contextLostStrip !== null) banners.push(contextLostStrip);
+
+  if (trace === null && (counts.renderCapped || counts.bufferDropped)) {
+    const shown = `showing the latest ${formatCount(counts.rendered)} of ${formatCount(
+      counts.matched,
+    )} matching`;
+    const dropped = `older lines dropped from the ${LOG_BUFFER_LIMIT}-line buffer`;
+    banners.push({
+      key: "truncation",
+      placement: "top",
+      tone: "muted",
+      text:
+        counts.renderCapped && counts.bufferDropped
+          ? `${shown} · ${dropped}`
+          : counts.renderCapped
+            ? `${shown} lines`
+            : `${LOG_BUFFER_LIMIT}-line buffer · older lines dropped`,
+      detail: "",
+      action: null,
+    });
+  }
+
+  if (trace === null && ui.filterModel !== null && counts.hiddenRouter > 0) {
+    const label = shorts.get(ui.filterModel)?.short ?? ui.filterModel;
+    banners.push({
+      key: "scope",
+      placement: "top",
+      tone: "muted",
+      text: `scoped to ${label} · ${formatCount(counts.hiddenRouter)} router-wide lines hidden`,
+      detail: "",
+      action: SHOW_ALL_MODELS,
+    });
+  }
+
+  switch (state) {
+    case "no-source":
+      // `unavailable` covers two different failures and they need opposite
+      // copy. With NO path, nothing was ever wired up and the lines on screen
+      // are the fallback's simulation. With a path, a real log was found and
+      // could not be read (a permission or I/O problem) — the lines are the
+      // server's, and telling that operator they are looking at a simulation
+      // would be exactly the false claim this console exists to prevent.
+      notice =
+        ui.logSourcePath === null
+          ? {
+              state,
+              glyph: "⚠",
+              title: "No log source connected",
+              detail:
+                "Steward is running but has not been pointed at a llama-server log. Ask your agent to wire up log streaming — this console fills on its own once it is." +
+                (counts.buffered > 0
+                  ? " The lines below are Steward's built-in simulation, not this machine's log."
+                  : ""),
+              tone: "warn",
+              action: null,
+            }
+          : {
+              state,
+              glyph: "⚠",
+              title: "The log file cannot be read",
+              detail:
+                // The server's own words, not a paraphrase: "(EACCES)" tells
+                // the operator what to fix where "something went wrong" does not.
+                `${ui.logSourceDetail ?? `${ui.logSourcePath} could not be read`}. Steward keeps trying, and picks the log back up as soon as it can read it.` +
+                (counts.buffered > 0
+                  ? " The lines below are what it read before that stopped working."
+                  : ""),
+              tone: "warn",
+              action: null,
+            };
+      break;
+    case "file-missing": {
+      const copy = fileMissingCopy(ui.logSourcePath);
+      if (counts.buffered === 0) {
+        notice = {
+          state,
+          glyph: "⚠",
+          title: copy.title,
+          detail: copy.detail,
+          tone: "warn",
+          action: null,
+        };
+      } else {
+        banners.push({
+          key: "file-missing",
+          placement: "bottom",
+          tone: "warn",
+          text: `⚠ ${copy.title}`,
+          detail: copy.detail,
+          action: null,
+        });
+      }
+      break;
+    }
+    case "stopped": {
+      const newest = ui.log.at(-1)?.ts ?? null;
+      if (counts.buffered === 0) {
+        notice = {
+          state,
+          glyph: "⏹",
+          title: "The service is stopped",
+          detail:
+            "llama-server is not running, so nothing is being written. This console fills again as soon as it is started.",
+          tone: "muted",
+          action: null,
+        };
+      } else {
+        banners.push({
+          key: "stopped",
+          placement: "bottom",
+          tone: "muted",
+          text: `⏹ Service stopped · log is idle${
+            newest === null ? "" : ` · last line ${formatClockSeconds(newest)}`
+          }`,
+          detail: "",
+          action: null,
+        });
+      }
+      break;
+    }
+    case "empty-filtered":
+      notice = emptyFilteredNotice(ui, counts, activeFilters(ui, shorts));
+      break;
+    case "cold":
+      notice = {
+        state,
+        glyph: "◷",
+        title: "Waiting for the first line",
+        detail:
+          "Connected to the log. A running router writes its startup banner immediately, so this should fill within a second. If this notice stays, Steward is watching the wrong file.",
+        tone: "muted",
+        action: null,
+      };
+      break;
+    case "quiet": {
+      // "Quiet" is a claim about the ROUTER, and the console can only make it
+      // about what it is showing. Anything the operator's own filters are
+      // holding back gets said out loud, or the word claims a silence that is
+      // not happening — the proxy toggle is only the commonest case of this,
+      // not the only one.
+      const arriving =
+        selection.newestBufferedAt !== null &&
+        counts.matched < counts.buffered &&
+        now - selection.newestBufferedAt <= QUIET_AFTER_MS;
+      const filtering =
+        ui.filterModel !== null || ui.filterLevel !== "all" || ui.query.trim() !== "";
+      const filteredClause =
+        arriving && filtering ? " · lines are still arriving that the filter hides" : "";
+      banners.push({
+        key: "quiet",
+        placement: "bottom",
+        tone: "muted",
+        text: `▪ quiet · ${formatLines(counts.matched)} · nothing new since ${formatClockSeconds(
+          selection.newestMatchedAt ?? 0,
+        )}${proxyClause}${filteredClause}`,
+        detail: "",
+        action: null,
+      });
+      break;
+    }
+    default:
+      break;
+  }
+
+  return {
+    state,
+    lines: selection.rows,
+    notice,
+    banners,
+    paused: ui.paused,
+    trace,
+    // A trace is nothing but framed rows, so the column always exists inside
+    // one. Outside, it is keyed on the whole matched set rather than the
+    // painted window, so it flips at most once per session and never on scroll.
+    showTaskColumn: trace !== null || counts.framed > 0,
+    frozenBehind,
+    // The stamp is Steward's arrival time, not llama-server's own elapsed
+    // counter, and nothing on screen says so to a screen reader otherwise.
+    heading: "Server log — times are local arrival time",
+  };
+}
+
+/** What the polite status region should say about the console, and the watermark. */
+export interface ConsoleAnnouncement {
+  message: string | null;
+  key: string | null;
+}
+
+/**
+ * Announces a console STATE change, once.
+ *
+ * The snapshot poll runs every 1.6 s and the render clock every second, so a
+ * message that is not gated on a transition would turn the status region into a
+ * metronome. Individual lines are never announced — not even errors: a burst of
+ * them would be as hostile as announcing INFO, and the console is a
+ * read-on-demand scrollback by design.
+ */
+export function consoleAnnouncement(
+  console: ConsoleVm,
+  path: string | null,
+  lastKey: string | null,
+): ConsoleAnnouncement {
+  const key = console.state === "file-missing" ? `file-missing:${path ?? ""}` : console.state;
+  if (key === lastKey) return { message: null, key: lastKey };
+
+  const healthy = console.state === "streaming" || console.state === "cold";
+  const message =
+    console.state === "no-source"
+      ? "No log source connected."
+      : console.state === "file-missing"
+        ? `The log file ${path ?? "Steward was watching"} is gone. Steward is still watching for it.`
+        : console.state === "reconnecting"
+          ? "Log stream lost. Reconnecting…"
+          : console.state === "stopped"
+            ? "Service stopped; log is idle."
+            : console.state === "quiet"
+              ? "Log quiet — no new lines for a minute."
+              : // Pause, filters and folds are announced by the handlers that
+                // caused them, so this channel stays silent for those.
+                healthy && lastKey === "reconnecting"
+                ? "Log stream connected."
+                : null;
+  return { message, key };
+}
+
+/** The honest count clause: what is shown, out of what, and what is held back. */
+function lineCountLabel(ui: UiState, counts: LogCountsVm): string {
+  // Inside a trace the count is about the trace, not the filter stack — the
+  // filters are not applying, so reporting them would be a lie by omission.
+  if (ui.trace !== null) {
+    return `tracing task ${ui.trace.task} · ${formatLines(counts.traced)}`;
+  }
+  // Proxy suppression alone is not "filtering" — the operator did not ask for
+  // it, so the count keeps its plain form and the suppression gets its own
+  // clause rather than silently shrinking the numerator.
+  const filtering =
+    ui.filterModel !== null ||
+    ui.filterLevel !== "all" ||
+    ui.filterFamily !== "any" ||
+    ui.query.trim() !== "";
+  const head = counts.renderCapped
+    ? `showing ${formatCount(counts.rendered)} of ${formatCount(counts.matched)}`
+    : filtering
+      ? `${formatCount(counts.matched)} of ${formatCount(counts.buffered)}`
+      : formatLines(counts.matched);
+  const tail = counts.hiddenProxy > 0 ? ` · ${formatCount(counts.hiddenProxy)} proxied hidden` : "";
+  return `${head}${tail}`;
+}
+
+/**
+ * The proxied-request toggle.
+ *
+ * The chip has room for the class, the count and the fact that it is
+ * reversible; it does not have room for WHY they are hidden, so that goes in
+ * the accessible name and the title — which is where an operator who wonders
+ * will look. `aria-pressed` tracks SHOWN.
+ */
+function selectProxyToggle(ui: UiState, counts: LogCountsVm): ProxyToggleVm {
+  if (ui.showProxy) {
+    const name = `Hide proxied request lines. ${formatCount(counts.proxyShown)} of the ${formatCount(
+      counts.matched,
+    )} lines shown are proxied requests, most of them Steward's own status polling.`;
+    return { label: "▾ proxied shown", pressed: true, ariaLabel: name, title: name };
+  }
+  const why =
+    "Hidden by default: Steward's own status polling produces about 1.3 of these per second per loaded model.";
+  const name =
+    counts.hiddenProxy > 0
+      ? `Show ${formatCount(counts.hiddenProxy)} proxied request lines. ${why}`
+      : `Show proxied request lines. None are hidden by the current filters. ${why}`;
+  return {
+    label: counts.hiddenProxy > 0 ? `▸ ${formatCount(counts.hiddenProxy)} proxied` : "▸ proxied",
+    pressed: false,
+    ariaLabel: name,
+    title: name,
+  };
+}
+
+// Both reset chips read `any`, under a group label that names the axis. Two
+// adjacent groups whose reset both read `all` and both show the same number at
+// rest look like one duplicated control; `any kind` / `any level` does not.
+const LEVEL_CHIP_NAMES: Record<LevelFilter, string> = {
+  all: "Any level",
+  DEBUG: "Debug",
+  INFO: "Info",
+  WARN: "Warnings",
+  ERROR: "Errors",
+};
+
+/**
+ * What each record-type chip is FOR, in the accessible name — including
+ * `other`'s, which is the one that says out loud that it is the drift alarm.
+ */
+const FAMILY_CHIP_NAMES: Record<FamilyFilter, string> = {
+  any: "Any kind",
+  requests: "Requests",
+  models: "Models",
+  startup: "Startup",
+  other:
+    "Other — lines Steward could not classify. A new llama-server message shape lands here and stays visible",
+};
+
+const FAMILY_CHIP_LABELS: Record<FamilyFilter, string> = {
+  any: "any",
+  requests: "requests",
+  models: "models",
+  startup: "startup",
+  other: "other",
+};
+
+function selectFamilyChips(ui: UiState, counts: LogCountsVm): FamilyChipVm[] {
+  return FAMILY_FILTERS.map((family) => {
+    const active = ui.filterFamily === family;
+    const count = counts.families[family];
+    return {
+      family,
+      label: FAMILY_CHIP_LABELS[family],
+      count,
+      countLabel: formatCount(count),
+      ariaLabel: `${FAMILY_CHIP_NAMES[family]} — ${formatLines(count)}`,
+      active,
+      background: active ? tint("var(--accent)", 18) : "var(--surface-page)",
+      // Same reasoning as the level chips: the hue stays in the tint and the
+      // border, where it decorates, and never carries the meaning.
+      color: active ? "var(--text-primary)" : "var(--text-secondary)",
+      borderColor: active ? tint("var(--accent)", 45) : "var(--border)",
+    };
+  });
+}
+
+function selectToolbar(
+  ui: UiState,
+  counts: LogCountsVm,
+  activeModel: ModelInfo | undefined,
+): ToolbarVm {
+  const activeColor =
+    activeModel === undefined ? "var(--accent)" : modelColor(activeModel.id, activeModel.embedding);
+
+  return {
+    activeModelLabel: activeModel?.short ?? ui.filterModel ?? "all models",
+    activeModelBackground: tint(activeColor, activeModel === undefined ? 16 : 18),
+    activeModelColor: activeColor,
+    familyChips: selectFamilyChips(ui, counts),
+    levelChips: LEVEL_FILTERS.map((level) => {
+      const color = level === "all" ? "var(--accent)" : LEVEL_COLORS[level];
+      const active = ui.filterLevel === level;
+      const count = counts.levels[level];
+      return {
+        level,
+        label: level === "all" ? "any" : level,
+        count,
+        countLabel: formatCount(count),
+        ariaLabel: `${LEVEL_CHIP_NAMES[level]} — ${formatLines(count)}`,
+        active,
+        background: active ? tint(color, 18) : "var(--surface-page)",
+        // The hue stays in the tint and the border, where it decorates and
+        // carries nothing. No level colour clears AA as an 11.5px label on the
+        // chip's own tinted ground in the light theme.
+        color: active ? "var(--text-primary)" : "var(--text-tertiary)",
+        borderColor: active ? tint(color, 45) : "var(--border)",
+      };
+    }),
+    proxyToggle: selectProxyToggle(ui, counts),
+    query: ui.query,
+    lineCountLabel: lineCountLabel(ui, counts),
+    paused: ui.paused,
+    pauseLabel: ui.paused ? "Resume" : "Pause",
+    pauseBackground: ui.paused ? tint("var(--warning)", 18) : "var(--surface-page)",
+    pauseColor: ui.paused ? "var(--warning)" : "var(--text-secondary)",
+    pauseBorder: ui.paused ? tint("var(--warning)", 45) : "var(--border)",
+    copyLabel: ui.copied ? "Copied" : "Copy",
+  };
+}
+
+/** One slot's dot view-model, honouring the service being down. */
+function selectSlotDot(slot: SlotInfo, running: boolean): SlotDotVm {
+  // A slot cannot be working if the service is stopped, whatever the last event
+  // said — a stopped server has nothing running in any lane, so a stopped
+  // service reads idle across the board.
+  const state: SlotState = running ? slot.state : "idle";
+  const ctx =
+    slot.ctxTotal === null ? `${NO_READING} ctx` : `${formatTokenCount(slot.ctxTotal)} ctx`;
+  // The context fill needs both halves measured. Missing either one leaves no
+  // percentage rather than a 0% bar, which would read as an empty lane.
+  const headroomPct =
+    slot.promptTokens === null || slot.ctxTotal === null || slot.ctxTotal <= 0
+      ? null
+      : barPercent(slot.promptTokens / slot.ctxTotal);
+  const held = slot.promptTokens === null ? NO_READING : String(slot.promptTokens);
+  const decoded = slot.decoded === null ? NO_READING : String(slot.decoded);
+  return {
+    id: slot.id,
+    state,
+    headroomPct,
+    detail:
+      state === "processing"
+        ? `${held} / ${ctx} · ${decoded} decoded`
+        : state === "idle"
+          ? `${ctx} · idle`
+          : `${ctx} · state unknown`,
+  };
+}
+
+function selectSlots(snapshot: Snapshot): SlotsVm {
+  const running = snapshot.service.running;
+  // Slots arrive flat but belong to one model each; bucket them by model so a
+  // group can be built per loaded model, in the order MODELS lists them.
+  const byModel = new Map<string, SlotInfo[]>();
+  for (const slot of snapshot.slots) {
+    const bucket = byModel.get(slot.modelId);
+    if (bucket === undefined) byModel.set(slot.modelId, [slot]);
+    else bucket.push(slot);
+  }
+
+  const groups: SlotGroupVm[] = [];
+  for (const model of snapshot.models) {
+    if (model.status !== "active" && model.status !== "resident") continue;
+    const modelSlots = byModel.get(model.id);
+    // A loaded model whose /slots read was dropped contributes no slots and so
+    // no group, rather than an empty one.
+    if (modelSlots === undefined || modelSlots.length === 0) continue;
+
+    const dots = modelSlots.map((slot) => selectSlotDot(slot, running));
+    const busy = dots.filter((dot) => dot.state === "processing").length;
+    // Lanes we cannot speak for are counted and said out loud. Folding them into
+    // the idle remainder would make `1/4 busy` look like a measurement when
+    // three of those four lanes were never established.
+    const unknown = dots.filter((dot) => dot.state === "unknown").length;
+    // The busiest lane is the overflow signal — one full lane matters even when
+    // the others are empty — so the group reduces to its max fill, not a mean.
+    // A group where no lane reported a fill has no peak, rather than a peak of 0.
+    const peakPct = dots.reduce<number | null>(
+      (hi, dot) => (dot.headroomPct === null ? hi : Math.max(hi ?? 0, dot.headroomPct)),
+      null,
+    );
+    // The rate belongs to a model that is actually generating; an idle model, or
+    // one whose child was launched without `--metrics`, has none to show.
+    const rateLabel =
+      model.status === "active" && model.tokensPerSecond !== null
+        ? formatTps(model.tokensPerSecond)
+        : "";
+    groups.push({
+      modelId: model.id,
+      modelLabel: model.short,
+      modelColor: modelColor(model.id, model.embedding),
+      busy,
+      unknown,
+      total: dots.length,
+      summary: `${busy}/${dots.length} busy${unknown > 0 ? ` · ${unknown} unknown` : ""}`,
+      rateLabel,
+      peakPct,
+      peakLabel: peakPct === null ? "" : `${peakPct}%`,
+      peakColor: contextHeadroomColor(peakPct ?? 0),
+      slots: dots,
+    });
+  }
+
+  const busyTotal = groups.reduce((sum, group) => sum + group.busy, 0);
+  const slotTotal = groups.reduce((sum, group) => sum + group.total, 0);
+  const unknownTotal = groups.reduce((sum, group) => sum + group.unknown, 0);
+  // Worst-case fill across the lanes that are actually working; an idle group
+  // holds no context, so it never sets the peak, and a working group that never
+  // reported a fill contributes none rather than dragging the peak down to 0.
+  const peak = groups.reduce<number | null>(
+    (hi, group) =>
+      group.busy > 0 && group.peakPct !== null ? Math.max(hi ?? 0, group.peakPct) : hi,
+    null,
+  );
+  const peakClause = busyTotal > 0 && peak !== null ? ` · peak ${peak}% ctx` : "";
+  const unknownClause = unknownTotal > 0 ? ` · ${unknownTotal} unknown` : "";
+  return {
+    groups,
+    empty: groups.length === 0,
+    emptyLabel: "no models loaded",
+    totalSummary: `${busyTotal} of ${slotTotal} busy${peakClause}${unknownClause}`,
+  };
+}
+
+/** Builds the whole dashboard view model for one repaint. */
+export function selectDashboard(snapshot: Snapshot, ui: UiState, now: number): DashboardVm {
+  const activeModel =
+    ui.filterModel === null ? undefined : snapshot.models.find((m) => m.id === ui.filterModel);
+  const selection = selectLog(snapshot, ui);
+  const shorts = new Map(snapshot.models.map((m) => [m.id, m]));
+  const allSelected = ui.filterModel === null;
+  // Built once: whether the unit control renders is a question about this exact
+  // gauge set, so the two must not be derived from two separate passes.
+  const gauges = selectGauges(snapshot, ui);
+
+  return {
+    service: selectService(snapshot, ui),
+    gauges,
+    temperature: selectTemperatureControl(gauges, ui),
+    models: selectModels(snapshot, ui),
+    allLogsPill: {
+      label: "all logs",
+      active: allSelected,
+      background: allSelected ? tint("var(--accent)", 16) : "var(--surface-page)",
+      color: allSelected ? "var(--accent)" : "var(--text-tertiary)",
+      borderColor: allSelected ? tint("var(--accent)", 45) : "var(--border)",
+    },
+    kpis: selectKpis(snapshot, now),
+    spark: selectSpark(snapshot),
+    toolbar: selectToolbar(ui, selection.counts, activeModel),
+    console: selectConsole(snapshot, ui, selection, now, shorts),
+    logCounts: selection.counts,
+    exportLines: selection.exportLines,
+    slots: selectSlots(snapshot),
+  };
+}
+
+/**
+ * The copy/download payload: every MATCHING BUFFERED line with the folds
+ * expanded, not the painted rows.
+ *
+ * The painted window stops at {@link LOG_RENDER_LIMIT} and shows the launch
+ * arguments as a single fold row, so exporting what is on screen would hand an
+ * operator diagnosing a bad launch a truncated dump with the launch command
+ * itself replaced by the words "31 launch arguments".
+ *
+ * Each row writes `frameRaw + message`, so the message half is byte-identical
+ * to the file's line — the frame the task column took out goes back in. That
+ * guarantee is what makes relocating the frame a relocation.
+ */
+export function selectLogText(vm: DashboardVm): string {
+  return formatLogText(vm.exportLines);
+}
+
+/**
+ * What was actually written out, said out loud. The folded and suppressed
+ * clauses are the point: an export that silently differs from the screen is
+ * the kind of quiet inaccuracy this console exists to avoid.
+ */
+export function selectLogExportSummary(counts: LogCountsVm): string {
+  const folded =
+    counts.folded > 0
+      ? `, including ${formatCount(counts.folded)} folded launch argument${
+          counts.folded === 1 ? "" : "s"
+        }`
+      : "";
+  const hidden =
+    counts.hiddenProxy > 0
+      ? ` ${formatCount(counts.hiddenProxy)} proxied line${
+          counts.hiddenProxy === 1 ? " was" : "s were"
+        } hidden.`
+      : "";
+  return `${formatLines(counts.matched)}${folded}.${hidden}`;
+}
+
+/**
+ * Where focus should land after a console repaint destroyed the control that
+ * had it.
+ *
+ * Three interactions remove their own control as a direct result of being
+ * activated — toggling a fold rebuilds the row list, "Clear filters" empties
+ * the notice, "show all" drops the scope banner — and a keyboard operator would
+ * otherwise be dropped at the top of the document, thousands of log lines from
+ * what they were doing. The DOM plumbing lives in `console.ts`; the DECISION
+ * lives here so it can be reasoned about and tested without a browser.
+ */
+export type FocusRestore =
+  | { target: "fold"; key: string }
+  | { target: "task"; key: string }
+  | { target: "back" }
+  | { target: "region" | "none" };
+
+export interface FocusRestoreInput {
+  /** Focus was inside the console when the repaint began. */
+  wasInside: boolean;
+  /** Focus was inside AND the browser has since moved it. */
+  moved: boolean;
+  /** This repaint opened a trace. */
+  enteringTrace: boolean;
+  /** This repaint closed one. */
+  leavingTrace: boolean;
+  /** The key of the fold row that had focus, or `null` for anything else. */
+  foldKey: string | null;
+  /** The key of the task cell that had focus, or `null` for anything else. */
+  taskKey: string | null;
+  /** The `(port, task)` key of the trace being left, or `null`. */
+  exitingTaskKey: string | null;
+  /** The row keys present after the repaint. */
+  keys: readonly string[];
+  /** The task-cell keys present after the repaint. */
+  taskKeys: readonly string[];
+}
+
+export function consoleFocusRestore(input: FocusRestoreInput): FocusRestore {
+  // Entering a trace replaces the whole row set, so the cell that was pressed
+  // is gone. Focus parks on `[ back ]` — the safe choice, and the same pattern
+  // the service block's confirm strip uses.
+  if (input.enteringTrace && input.wasInside) return { target: "back" };
+  // Leaving one puts the operator back on the task cell they came from, so the
+  // trace can be re-opened with one press. Only when focus was inside the
+  // console: a chip that closed the trace as a side effect keeps its own focus,
+  // which is why no control has to be disabled while tracing.
+  if (input.leavingTrace && input.wasInside) {
+    return input.exitingTaskKey !== null && input.taskKeys.includes(input.exitingTaskKey)
+      ? { target: "task", key: input.exitingTaskKey }
+      : { target: "region" };
+  }
+  if (!input.moved) return { target: "none" };
+  // The equivalent control first: a fold that was toggled still exists under
+  // the same key, and landing back on it is the only outcome that lets an
+  // operator press it twice.
+  if (input.foldKey !== null && input.keys.includes(input.foldKey)) {
+    return { target: "fold", key: input.foldKey };
+  }
+  if (input.taskKey !== null && input.taskKeys.includes(input.taskKey)) {
+    return { target: "task", key: input.taskKey };
+  }
+  return { target: "region" };
+}
+
+/**
+ * How many genuinely new lines are sitting below a console the operator has
+ * scrolled away from.
+ *
+ * Fold rows are excluded: a fold row shares its `seq` with the first line of
+ * its run, so counting rows rather than lines over-reports by one for every
+ * expanded fold on screen.
+ */
+export function countNewLines(rows: readonly LogRowVm[], sinceSeq: number): number {
+  return rows.reduce(
+    (total, row) => (row.fold === null && row.seq > sinceSeq ? total + 1 : total),
+    0,
+  );
+}
+
+/**
+ * What toggling an args fold did, for the polite region.
+ *
+ * While a query is holding the fold open the press changes nothing visible —
+ * only where the fold lands once the query clears — so the two directions must
+ * not share a sentence.
+ */
+export function foldAnnouncement(count: number, forced: boolean, sticky: boolean): string {
+  const noun = `launch argument${count === 1 ? "" : "s"}`;
+  if (forced) {
+    return `${formatCount(count)} ${noun} will stay ${
+      sticky ? "open" : "collapsed"
+    } when the search is cleared.`;
+  }
+  return `${formatCount(count)} ${noun} ${sticky ? "shown" : "hidden"}.`;
+}
+
+/**
+ * The one-off announcement for the buffer having evicted lines. It carries the
+ * same two forms the banner does, so it can never read "showing the latest 500
+ * of 500" on a console the render cap never touched.
+ */
+export function truncationAnnouncement(counts: LogCountsVm): string {
+  return counts.renderCapped
+    ? `Older lines dropped from the buffer; showing the latest ${formatCount(
+        counts.rendered,
+      )} of ${formatCount(counts.matched)}.`
+    : `Older lines dropped from the ${LOG_BUFFER_LIMIT}-line buffer.`;
+}