@jmcombs/pi-steward 0.0.0

package/ui/components/models.ts

@@ -0,0 +1,296 @@
+/**
+ * The rail's MODELS block.
+ *
+ * A card is a filter control and a container for a second control at once, so
+ * it cannot be a `<button>` — it is a `role="button"` with the keyboard
+ * handling written out, and the Load/Unload button inside it keeps both the
+ * click and the key events it handles natively away from the card.
+ *
+ * The block header carries a single info legend for the whole list: a real
+ * button that toggles a definitions panel, one entry per card field label
+ * (`Quant`, `Context`, `KV Cache`, …), so the compact labeled grid can be read
+ * once and understood.
+ */
+
+import type { ModelCardVm, PillVm } from "../../core/select.js";
+import type { ModelAction } from "../../core/types.js";
+import type { View } from "../dom.js";
+import { el, setAttr, setText, setVar, syncRows } from "../dom.js";
+
+export interface ModelsVm {
+  models: ModelCardVm[];
+  allLogsPill: PillVm;
+}
+
+export interface ModelsHandlers {
+  onFilterModel: (modelId: string) => void;
+  onShowAllLogs: () => void;
+  onModelAction: (modelId: string, action: ModelAction) => void;
+}
+
+/** One labeled cell of the body grid: its value span, patched per repaint. */
+interface FieldCell {
+  root: HTMLElement;
+  label: HTMLElement;
+  value: HTMLElement;
+}
+
+interface ModelRow {
+  root: HTMLElement;
+  dot: HTMLElement;
+  name: HTMLElement;
+  /** The seven body cells, in the fixed order the view model lists them. */
+  cells: FieldCell[];
+  button: HTMLButtonElement;
+  vm: ModelCardVm | null;
+}
+
+/** Rows are recycled rather than keyed, so their ids only have to be unique. */
+let rowSeq = 0;
+
+/** How many labeled cells a card body always has, so the grid can be built once. */
+const FIELD_COUNT = 7;
+
+function createFieldCell(): FieldCell {
+  const label = el("span", { class: "model-card__label" });
+  const value = el("span", { class: "model-card__value" });
+  return {
+    root: el("div", { class: "model-card__field", children: [label, value] }),
+    label,
+    value,
+  };
+}
+
+function createRow(handlers: ModelsHandlers): ModelRow {
+  rowSeq += 1;
+  const prefix = `steward-model-${rowSeq}`;
+  const dot = el("span", { class: "model-card__dot" });
+  const name = el("span", { class: "model-card__name", attrs: { id: `${prefix}-name` } });
+  const cells = Array.from({ length: FIELD_COUNT }, createFieldCell);
+  // The body grid is named as one group: the label set is identical on every
+  // card, so a screen reader reading the whole grid's text (label + value, seven
+  // times) is exactly what distinguishes this card, and no per-field id juggling
+  // is needed as the values change.
+  const fields = el("div", {
+    class: "model-card__fields",
+    attrs: { id: `${prefix}-fields` },
+    children: cells.map((cell) => cell.root),
+  });
+
+  const row: ModelRow = {
+    root: el("div", { class: "model-card" }),
+    dot,
+    name,
+    cells,
+    button: el("button", { class: "btn btn--filled btn--sm", attrs: { type: "button" } }),
+    vm: null,
+  };
+
+  row.button.addEventListener("click", (event) => {
+    // Without this the card underneath would also take the click and toggle
+    // the log filter every time the operator loads a model.
+    event.stopPropagation();
+    if (row.vm !== null) handlers.onModelAction(row.vm.id, row.vm.buttonAction);
+  });
+
+  const filter = (): void => {
+    if (row.vm !== null) handlers.onFilterModel(row.vm.id);
+  };
+  row.root.addEventListener("click", filter);
+  row.root.addEventListener("keydown", (event) => {
+    if (!(event instanceof KeyboardEvent)) return;
+    // Enter and Space belong to the Load/Unload button while it holds focus:
+    // taking them here would preventDefault() its native activation and filter
+    // the log instead of loading the model.
+    if (event.target !== row.root) return;
+    // A held key repeats; a real button would still have fired exactly once.
+    if (event.repeat) return;
+    if (event.key !== "Enter" && event.key !== " ") return;
+    event.preventDefault();
+    filter();
+  });
+
+  setAttr(row.root, "role", "button");
+  setAttr(row.root, "tabindex", "0");
+  // The card is named from its own contents: the name and the body grid as a
+  // whole. The label set is fixed and identical on every card, so this is stamped
+  // once here rather than rebuilt each repaint.
+  setAttr(row.root, "aria-labelledby", `${prefix}-name ${prefix}-fields`);
+  // The Load/Unload button rides the header row with the name — the one row every
+  // card always has, and the only place a transition is announced — so it sits in
+  // the same place independent of the labeled grid below it.
+  row.root.append(
+    el("div", {
+      class: "model-card__top",
+      children: [el("div", { class: "model-card__title", children: [dot, name] }), row.button],
+    }),
+    fields,
+  );
+  return row;
+}
+
+/** The header info legend: one entry per card field, keyed by its exact label. */
+const LEGEND_TERMS: readonly { term: string; def: string }[] = [
+  {
+    term: "Quant",
+    def: "Weight quantization: how compressed the model's weights are. Fewer bits = smaller and faster, slightly less precise. 16-bit (F16) is uncompressed. Read from the loaded file; n/a until then.",
+  },
+  {
+    term: "Size",
+    def: "On-disk size, and roughly the VRAM it needs once loaded. Known only while loaded.",
+  },
+  {
+    term: "Context",
+    def: "Tokens each request slot gets: the loaded context window divided across the parallel slots (total ÷ slots). Known only while loaded.",
+  },
+  {
+    term: "GPU Layers",
+    def: "Transformer layers offloaded to the GPU (-ngl); more on the GPU is faster, 99 means all. This is the requested value — the effective count is never reported, so it reads n/a unless it was pinned at launch.",
+  },
+  {
+    term: "Flash",
+    def: "Flash Attention — an optimized attention kernel: faster, less memory. On / Off / Auto. Can stay Auto even loaded — the resolved value isn't reported back.",
+  },
+  {
+    term: "KV Cache",
+    def: "Precision of the runtime attention cache — the per-request memory that grows with context, separate from the weight size. 8-bit is compact; 16-bit is the default.",
+  },
+  {
+    term: "Type",
+    def: "Whether the model generates text (Generative) or produces embeddings (Embedder). Read from the router's modalities, so it's known even while unloaded.",
+  },
+];
+
+/** localStorage key for whether the legend is left open across a page session. */
+const LEGEND_STORAGE_KEY = "steward.legend";
+
+/** Reads the remembered legend state; storage may be unavailable or blocked. */
+function readLegendOpen(): boolean {
+  try {
+    return globalThis.localStorage?.getItem(LEGEND_STORAGE_KEY) === "1";
+  } catch {
+    return false;
+  }
+}
+
+/** Persists the legend state; a failure just means it is not remembered. */
+function writeLegendOpen(open: boolean): void {
+  try {
+    globalThis.localStorage?.setItem(LEGEND_STORAGE_KEY, open ? "1" : "0");
+  } catch {
+    // No storage (private mode, disabled): the in-memory state still holds.
+  }
+}
+
+export function createModelsBlock(handlers: ModelsHandlers): View<ModelsVm> {
+  const rows: ModelRow[] = [];
+  const list = el("div", { class: "model-list" });
+  const pill = el("button", {
+    class: "pill",
+    attrs: { type: "button" },
+    text: "all logs",
+    on: { click: handlers.onShowAllLogs },
+  });
+
+  const panelId = "steward-models-legend";
+  const panel = el("div", {
+    class: "legend-panel",
+    attrs: { id: panelId, role: "group", "aria-label": "Field definitions", hidden: true },
+    children: [
+      el("dl", {
+        class: "legend-list",
+        children: LEGEND_TERMS.flatMap(({ term, def }) => [
+          el("dt", { class: "legend-term", text: term }),
+          el("dd", { class: "legend-def", text: def }),
+        ]),
+      }),
+    ],
+  });
+
+  // A real button, not a hover affordance: it must be reachable and toggle-able
+  // from the keyboard and legible to a screen reader, which a tooltip is not.
+  let legendOpen = readLegendOpen();
+  const legendToggle = el("button", {
+    class: "legend-toggle",
+    text: "ⓘ",
+    attrs: {
+      type: "button",
+      "aria-label": "What these values mean",
+      "aria-controls": panelId,
+      // A string, not a boolean: `aria-expanded` is an enumerated ARIA value
+      // ("true"/"false"), not an HTML boolean attribute, and setAttr would drop a
+      // `false` entirely — leaving the state unspoken and the open-state style dead.
+      "aria-expanded": String(legendOpen),
+    },
+  });
+
+  const syncLegend = (): void => {
+    setAttr(legendToggle, "aria-expanded", String(legendOpen));
+    // `hidden` gives the panel zero height when collapsed, so it never pushes the
+    // cards down the rail until the operator asks for it.
+    setAttr(panel, "hidden", !legendOpen);
+  };
+  legendToggle.addEventListener("click", () => {
+    legendOpen = !legendOpen;
+    writeLegendOpen(legendOpen);
+    syncLegend();
+  });
+  syncLegend();
+
+  const root = el("section", {
+    class: "rail__block rail__block--models",
+    attrs: { "aria-labelledby": "steward-models-title" },
+    children: [
+      el("div", {
+        class: "block__head",
+        children: [
+          el("h2", { class: "eyebrow", text: "Models", attrs: { id: "steward-models-title" } }),
+          el("div", { class: "block__head-controls", children: [legendToggle, pill] }),
+        ],
+      }),
+      panel,
+      list,
+    ],
+  });
+
+  return {
+    el: root,
+    update(vm) {
+      setVar(pill, "bg", vm.allLogsPill.background);
+      setVar(pill, "fg", vm.allLogsPill.color);
+      setVar(pill, "bd", vm.allLogsPill.borderColor);
+      setAttr(pill, "aria-pressed", String(vm.allLogsPill.active));
+
+      syncRows(list, rows, vm.models.length, () => createRow(handlers));
+      vm.models.forEach((model, index) => {
+        const row = rows[index];
+        if (row === undefined) return;
+        row.vm = model;
+        setVar(row.root, "bg", model.cardBackground);
+        setVar(row.root, "bd", model.cardBorder);
+        setAttr(row.root, "aria-pressed", String(model.selected));
+        setAttr(row.root, "title", `Filter the log to ${model.short}`);
+        setVar(row.dot, "model-color", model.color);
+        setText(row.name, model.short);
+
+        // The label set and order are fixed, so cell i always renders field i;
+        // an `n/a` value carries `data-na="true"` so the stylesheet dims it while
+        // the label beside it stays at full strength.
+        model.fields.forEach((field, fieldIndex) => {
+          const cell = row.cells[fieldIndex];
+          if (cell === undefined) return;
+          setText(cell.label, `${field.label}:`);
+          setText(cell.value, field.value);
+          setAttr(cell.value, "data-na", String(field.na));
+        });
+
+        setText(row.button, model.buttonLabel);
+        setVar(row.button, "bg", model.buttonBackground);
+        setVar(row.button, "fg", model.buttonColor);
+        setVar(row.button, "bd", model.buttonBorder);
+        setAttr(row.button, "disabled", model.pending);
+        setAttr(row.button, "aria-label", `${model.buttonLabel} ${model.short}`);
+      });
+    },
+  };
+}

package/ui/components/service.ts

@@ -0,0 +1,358 @@
+/**
+ * The rail's SERVICE block — the "Steward" box.
+ *
+ * Three stacked zones: the brand lockup, the control row, and the router facts
+ * folded in from what used to be a separate CONFIG block. The status readout —
+ * `started` / `stopped` / `not connected` — is a chip riding in the lockup row
+ * beside the wordmark, not a zone of its own: it is the one thing in the block
+ * that cannot be acted on, so it does not get the block's heaviest element.
+ *
+ * The chip is deliberately not a button: it reports state and nothing more, so
+ * it is a `role="status"` region that a screen reader announces when the state
+ * changes. Its state rides a SHAPE (`data-state` → filled disc, ring, dotted
+ * ring) as well as a hue, so it survives a monochrome screen.
+ *
+ * The control row holds only actions this machine actually has a consented
+ * command for; with none, one setup affordance takes its place. Stop and
+ * restart never fire from a single click — they open an inline confirm strip
+ * that names what will be unloaded, moves focus to Cancel, and closes on Esc.
+ * A command that failed leaves an alert here rather than nothing at all.
+ */
+
+import type { DriftNoticeVm, ServiceControlVm, ServiceVm } from "../../core/select.js";
+import type { ServiceAction } from "../../core/types.js";
+import type { View } from "../dom.js";
+import { el, setAttr, setText, setVar, svg, syncRows } from "../dom.js";
+
+export interface ServiceHandlers {
+  onToggleTheme: () => void;
+  /** Runs an action now: a non-disruptive one, or one already confirmed. */
+  onService: (action: ServiceAction) => void;
+  /** Asks for the confirm strip before a disruptive action. */
+  onConfirmService: (action: ServiceAction) => void;
+  /** Dismisses the confirm strip without acting. */
+  onCancelService: () => void;
+  /**
+   * Quiets the drift notice for this session. It is keyed by what drifted, so
+   * the notice returns on a reload and the moment the mismatch changes.
+   */
+  onDismissDrift: (key: string) => void;
+}
+
+/** One router fact: `listen   127.0.0.1:8080`. Patched per repaint. */
+interface FactRow {
+  root: HTMLElement;
+  key: HTMLElement;
+  value: HTMLElement;
+}
+
+function createFactRow(): FactRow {
+  const key = el("span", { class: "config-row__key" });
+  const value = el("span", { class: "config-row__value" });
+  return { root: el("div", { class: "config-row", children: [key, value] }), key, value };
+}
+
+/**
+ * One control button. The action and whether it needs confirming live on the
+ * record rather than in the closure, so a row can be reused across repaints
+ * when the available set changes without rebinding its listener.
+ */
+interface ControlRow {
+  root: HTMLButtonElement;
+  action: ServiceAction;
+  confirms: boolean;
+}
+
+/** The Steward mark: a serving dome over two trays, the lower one faded. */
+function mark(): SVGElement {
+  return svg(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 40 40",
+      fill: "none",
+      "aria-hidden": "true",
+      class: "lockup__mark",
+      focusable: "false",
+    },
+    [
+      svg("path", {
+        d: "M8 17C8 10.9 13.4 6 20 6s12 4.9 12 11",
+        stroke: "currentColor",
+        "stroke-width": "4",
+        "stroke-linecap": "round",
+      }),
+      svg("rect", { x: "4", y: "21", width: "32", height: "5", rx: "2.5", fill: "currentColor" }),
+      svg("rect", {
+        x: "4",
+        y: "29.6",
+        width: "32",
+        height: "5",
+        rx: "2.5",
+        fill: "currentColor",
+        opacity: "0.55",
+      }),
+    ],
+  );
+}
+
+export function createServiceBlock(handlers: ServiceHandlers): View<ServiceVm> {
+  const statusDot = el("span", { class: "service__status-dot", attrs: { "aria-hidden": "true" } });
+  const statusLabel = el("span", { class: "service__status-label" });
+  // Not a <button>: it reports state and nothing more, so it takes no hover and
+  // no click. `tabindex="-1"` keeps it out of the tab order while still letting
+  // the confirm flow park focus here when the button it came from went inert.
+  const status = el("div", {
+    class: "service__status",
+    attrs: { role: "status", "aria-live": "polite", tabindex: "-1" },
+    children: [statusDot, statusLabel],
+  });
+  const theme = el("button", {
+    class: "btn btn--icon",
+    attrs: { type: "button" },
+    on: { click: handlers.onToggleTheme },
+  });
+
+  const controls = el("div", {
+    class: "service__controls",
+    attrs: { role: "group", "aria-label": "Service control" },
+  });
+  const controlRows: ControlRow[] = [];
+  function createControlRow(): ControlRow {
+    const row: ControlRow = {
+      root: el("button", { class: "btn btn--sm service__control", attrs: { type: "button" } }),
+      action: "start",
+      confirms: false,
+    };
+    row.root.addEventListener("click", () => {
+      if (row.confirms) handlers.onConfirmService(row.action);
+      else handlers.onService(row.action);
+    });
+    return row;
+  }
+
+  // Not a button: the dashboard cannot run a Pi command, and a control that
+  // does nothing is worse than a sentence that says what to do.
+  const setupLabel = el("p", { class: "service__setup-label" });
+  const setupDetail = el("p", { class: "service__setup-detail" });
+  const setupCommand = el("code", { class: "service__setup-command" });
+  const setup = el("div", {
+    class: "service__setup",
+    attrs: { hidden: true },
+    children: [setupLabel, setupDetail, setupCommand],
+  });
+
+  const confirmText = el("p", { class: "service__confirm-text" });
+  const confirmCancel = el("button", {
+    class: "btn btn--sm",
+    attrs: { type: "button" },
+    on: { click: handlers.onCancelService },
+  });
+  const confirmAccept = el("button", {
+    class: "btn btn--sm service__control",
+    attrs: { type: "button", "data-tone": "danger" },
+  });
+  let confirmAction: ServiceAction | null = null;
+  confirmAccept.addEventListener("click", () => {
+    if (confirmAction !== null) handlers.onService(confirmAction);
+  });
+  const confirm = el("div", {
+    class: "service__confirm",
+    attrs: { role: "group", "aria-label": "Confirm service action", hidden: true },
+    children: [
+      confirmText,
+      el("div", { class: "service__confirm-row", children: [confirmCancel, confirmAccept] }),
+    ],
+  });
+  // Esc backs out from anywhere inside the strip — focus is on Cancel when it
+  // opens, so the escape hatch is one key away without a pointer.
+  confirm.addEventListener("keydown", (event) => {
+    if (event instanceof KeyboardEvent && event.key === "Escape") handlers.onCancelService();
+  });
+
+  // A failed command is an operator-relevant event, not a status update, so it
+  // announces assertively rather than waiting behind the polite region. It is
+  // focusable programmatically (never by Tab) so the confirm flow can hand
+  // focus to the outcome when the button that started it has gone inert.
+  const notice = el("p", {
+    class: "service__notice",
+    attrs: { role: "alert", hidden: true, tabindex: "-1" },
+  });
+
+  // The drift notice. It sits directly under the status readout — above the
+  // controls and the router facts it contradicts — because a machine that no
+  // longer matches `steward.json` is the first thing about this block that is
+  // not true. It carries no `aria-live` of its own: `main.ts` announces it once
+  // through the page's polite status region, and a second live region would
+  // repeat every line on every 1.6 s poll.
+  const driftTitle = el("p", { class: "service__drift-title" });
+  const driftDismiss = el("button", {
+    class: "btn btn--sm service__drift-dismiss",
+    attrs: { type: "button" },
+  });
+  const driftList = el("ul", { class: "service__drift-list" });
+  const driftRows: { root: HTMLElement }[] = [];
+  const driftFix = el("p", { class: "service__drift-fix" });
+  const drift = el("section", {
+    class: "service__drift",
+    attrs: { hidden: true },
+    children: [
+      el("div", {
+        class: "service__drift-head",
+        children: [
+          // The tone is carried by the word "drift", the icon, and the border —
+          // never by colour alone.
+          el("span", {
+            class: "service__drift-icon",
+            text: "!",
+            attrs: { "aria-hidden": "true" },
+          }),
+          driftTitle,
+          driftDismiss,
+        ],
+      }),
+      driftList,
+      driftFix,
+    ],
+  });
+  let driftKey: string | null = null;
+  driftDismiss.addEventListener("click", () => {
+    if (driftKey !== null) handlers.onDismissDrift(driftKey);
+  });
+
+  const facts = el("div", { class: "config-list service__facts" });
+  const rows: FactRow[] = [];
+
+  const root = el("section", {
+    class: "rail__block rail__block--service",
+    // The block has no eyebrow to point at, and the lockup is the page's h1
+    // rather than this region's heading.
+    attrs: { "aria-label": "Service" },
+    children: [
+      // The chip and the theme control ride the lockup's dead space rather than
+      // taking a 36px row of their own beneath it.
+      el("div", {
+        class: "lockup",
+        children: [mark(), el("h1", { class: "lockup__name", text: "Steward" }), status, theme],
+      }),
+      drift,
+      controls,
+      setup,
+      confirm,
+      notice,
+      facts,
+    ],
+  });
+
+  /** Patches the drift notice, or hides it when there is nothing to report. */
+  function updateDrift(vm: DriftNoticeVm | null): void {
+    driftKey = vm?.key ?? null;
+    // Dismissing hides the section the Dismiss button lives in, so read focus
+    // BEFORE hiding it: a keyboard operator who clicked Dismiss would otherwise
+    // be dropped at the top of the document. The status readout is the same
+    // anchor the confirm strip falls back to.
+    const focusWasInside = drift.contains(document.activeElement);
+    setAttr(drift, "hidden", vm === null);
+    if (vm === null) {
+      if (focusWasInside) status.focus();
+      return;
+    }
+    setAttr(drift, "aria-label", vm.ariaLabel);
+    setText(driftTitle, vm.title);
+    setText(driftDismiss, vm.dismissLabel);
+    setAttr(driftDismiss, "aria-label", vm.dismissAriaLabel);
+    syncRows(driftList, driftRows, vm.messages.length, () => ({
+      root: el("li", { class: "service__drift-item" }),
+    }));
+    vm.messages.forEach((message, index) => {
+      const row = driftRows[index];
+      if (row !== undefined) setText(row.root, message);
+    });
+    setText(driftFix, vm.fix);
+  }
+
+  return {
+    el: root,
+    update(vm) {
+      // The state carries in the dot's SHAPE (the stylesheet keys three forms
+      // off this attribute) and in the word. The hue only tints the dot: the
+      // word is painted with a text token so it clears AA in both themes.
+      setAttr(status, "data-state", vm.state);
+      setVar(statusDot, "fill", vm.statusDotColor);
+      setText(statusLabel, vm.statusLabel);
+      setAttr(status, "aria-label", `Service ${vm.statusLabel}`);
+
+      setText(theme, vm.themeGlyph);
+      setAttr(theme, "aria-label", vm.themeLabel);
+      setAttr(theme, "title", vm.themeLabel);
+
+      updateDrift(vm.drift);
+
+      const { controls: cvm } = vm;
+      setAttr(controls, "hidden", cvm.buttons.length === 0);
+      // The row is busy as a whole while a command is out: its buttons are
+      // disabled, and assistive tech is told why rather than finding them inert.
+      setAttr(controls, "aria-busy", cvm.pending ? "true" : "false");
+      syncRows(controls, controlRows, cvm.buttons.length, createControlRow);
+      cvm.buttons.forEach((button: ServiceControlVm, index) => {
+        const row = controlRows[index];
+        if (row === undefined) return;
+        row.action = button.action;
+        row.confirms = button.confirms;
+        setText(row.root, button.label);
+        setAttr(row.root, "disabled", button.disabled);
+        setAttr(row.root, "aria-label", button.ariaLabel);
+        setAttr(row.root, "title", button.disabledReason === "" ? false : button.disabledReason);
+        setAttr(row.root, "data-tone", button.danger ? "danger" : "neutral");
+      });
+
+      setAttr(setup, "hidden", cvm.setup === null);
+      if (cvm.setup !== null) {
+        setText(setupLabel, cvm.setup.label);
+        setText(setupDetail, cvm.setup.detail);
+        setText(setupCommand, cvm.setup.command);
+      }
+
+      const wasConfirming = confirmAction;
+      // Read before the strip is hidden: hiding an ancestor drops the focus.
+      const focusWasInStrip = confirm.contains(document.activeElement);
+      confirmAction = cvm.confirm?.action ?? null;
+      setAttr(confirm, "hidden", cvm.confirm === null);
+      if (cvm.confirm !== null) {
+        setText(confirmText, cvm.confirm.consequence);
+        setText(confirmCancel, cvm.confirm.cancelLabel);
+        setText(confirmAccept, cvm.confirm.confirmLabel);
+        setAttr(confirmAccept, "aria-label", cvm.confirm.confirmAriaLabel);
+        // Opening moves focus to the safe choice, so a keyboard operator lands
+        // on Cancel and has to travel to confirm — never the other way round.
+        if (wasConfirming === null) confirmCancel.focus();
+      }
+      // Closing is where focus is most easily lost: accepting disables every
+      // button while the command is out, so the opener is usually inert by the
+      // time we get here. Resolve it after the notice is patched, and land on
+      // the outcome — the alert if there is one, else the status readout —
+      // rather than dropping a keyboard operator at the top of the document.
+      const restoreFrom = cvm.confirm === null && wasConfirming !== null && focusWasInStrip;
+
+      setAttr(notice, "hidden", cvm.notice === null);
+      if (cvm.notice !== null) setText(notice, cvm.notice);
+
+      if (restoreFrom) {
+        const opener = controlRows.find((row) => row.action === wasConfirming);
+        if (opener !== undefined && !opener.root.disabled) opener.root.focus();
+        else if (cvm.notice !== null) notice.focus();
+        else status.focus();
+      }
+
+      syncRows(facts, rows, vm.config.length, createFactRow);
+      vm.config.forEach((entry, index) => {
+        const row = rows[index];
+        if (row === undefined) return;
+        // `label: value`, the same grammar the model-card fields use.
+        setText(row.key, `${entry.key}:`);
+        setText(row.value, entry.value);
+      });
+    },
+  };
+}