@azure-id/orc 2.0.2 → 2.1.0

package/bin/webui/js/panels/hookui.js

@@ -1,1691 +1,2196 @@
-"use strict";
-/* panels/hookui.js — orc ui client
-   The CLI Hook Interface: compose ORC's status line.
-
-   THE ONE DESIGN DECISION THIS PANEL IS BUILT AROUND: you are composing
-   something you cannot see while you compose it. The bar lives in a terminal at
-   the bottom of a different window. Every other ORC panel shows you STATE; this
-   one has to show you a RESULT — continuously, accurately, and in the forms it
-   can take. If the preview is not what the hook will print, this panel is worse
-   than editing JSON, because it is confidently wrong.
-
-   It is not, and that is structural rather than careful: `orc statusline
-   preview` renders through the SAME engine the hook does
-   (templates/hooks/orc-statusline-render.js), so the two cannot diverge.
-
-   THE PANEL DERIVES NOTHING. Not a component id, not a renderer name, not a
-   glyph set, not a ramp, not a colour token, not a separator, not a state word,
-   not the board's own rules. All of it arrives from `statusline components
-   --json`, and a test greps this file and both string tables for those
-   literals. (The Flow-stepper rule, on a fourth surface.)
-
-   v1.4.1 — THE BOARD IS THE ONLY PLACE ANYTHING IS APPLIED, AND EVERY WRITE'S
-   POSITION IS COMPUTED WHEN THAT WRITE RUNS. The list of parts used to carry
-   three `+ line N` buttons per row, so the act of building the bar lived a long
-   way from the bar — and each of those buttons computed a position from the
-   SAVED layout rather than from the layout being staged. Three staged adds all
-   landed on position 1, and the CLI read the second and third as EDITS of the
-   first: that is why adding three parts produced one. Structural edits are now
-   semantic ops against stable refs, replayed by `hkPlan` in order, and every
-   position is derived at the moment that op will execute. The list below the
-   board is a REFERENCE now: it says what each part shows, and it applies
-   nothing. */
-
-/* -------------------------------------------------------------- HOOK UI */
-
-// The preview widths the panel offers. Not a fact about the layout — a fact
-// about terminals people actually use — so it lives here rather than coming
-// from the CLI. They are COLUMN COUNTS: how many character cells wide the
-// terminal is. The card says so out loud, because three bare numbers over a
-// picture is a control nobody can guess the meaning of.
-const HK_WIDTHS = [80, 120, 160];
-let HK_WIDTH = 120;
-let HK_STATE = "healthy";
-// The reference list's search box and its open group, both surviving a
-// re-render so a paint does not close a list the user just opened.
-let HK_SEARCH = "";
-let HK_GROUP = null;
-// WHICH BOARD. The main status line, or the row Claude Code draws per subagent
-// in the agent panel. The panel does not know what boards exist — `components
-// --json` carries the list — it only remembers which one you are looking at, so
-// a re-render does not put you back on the other one.
-let HK_BOARD = "status";
-
-// THE STAGED OPS, in the order they were made. NOT a map of finished HTTP
-// bodies: a body carries a POSITION, and a position computed when the op was
-// staged is wrong the moment an earlier op shifts the line under it. These are
-// semantic ops against stable refs; `hkPlan` turns them into writes — and
-// recomputes every position — each time the board paints.
-let HK_OPS = [];
-// The chip being dragged. Transient: cleared on every drop and every paint.
-let HK_DRAG = null;
-
-// DRAG IS OFF ON A NARROW SCREEN, and off for real rather than merely restyled:
-// a 40-pixel drop gap on a phone is not a target, so the three buttons on every
-// chip are the path there. The query matches 06-responsive.css's own breakpoint
-// — a chip that still says `draggable` while its handle is hidden is a promise
-// the page cannot keep.
-function hkCanDrag() {
-  try {
-    return !window.matchMedia("(max-width: 600px)").matches;
-  } catch (_) {
-    return true;
-  }
-}
-
-// THE LAST FETCH, AND THE NODE IT IS PAINTED INTO (v1.4.2). Staging an edit
-// used to re-enter the router — which threw the panel away, refetched four
-// endpoints and rebuilt everything from a skeleton. Every click "refreshed the
-// page", and worse: because the picture came back looking different, a staged
-// change read as an applied one. Nothing is fetched now until Apply, the switch
-// or a preset; a staged op repaints from THIS cache.
-let HK_DATA = null;
-// The node this panel paints into. `section` owns the skeleton and the error
-// box; after the first load, everything goes through here.
-let HK_SLOT = null;
-// The open part editor, if there is one, so a staged edit updates the control
-// the user is looking at instead of leaving it showing the old value.
-let HK_MODAL = null;
-// The comparison drawer's open state and its answers, both surviving a repaint:
-// it costs one render per colour set and per symbol set, so it is fetched once
-// and only when somebody opens it.
-let HK_COMPARE = false;
-let HK_COMPARE_DATA = null;
-// Whether this panel has drawn once. The FIRST paint animates in; every one
-// after it is instant, because nothing arrived — the same cards are still there
-// with one value different.
-let HK_PAINTED = false;
-
-PANELS.hookui = function (host) {
-  head(host, t("hookui.title"), t("hookui.sub"));
-  HK_DATA = null;
-  HK_SLOT = null;
-  HK_MODAL = null;
-  HK_PAINTED = false;
-  section(host, hkLoad, (data) => {
-    HK_DATA = data;
-    // `stack` is what spaces the cards; `section` gives it to its own slot, and
-    // this node lives inside that slot, so it needs its own.
-    const slot = el("div", "stack");
-    HK_SLOT = slot;
-    hkPaint();
-    return slot;
-  });
-};
-
-function hkPreviewUrl() {
-  return "/api/statusline/preview?board=" + HK_BOARD + "&width=" + HK_WIDTH + "&state=" + HK_STATE;
-}
-
-function hkLoad() {
-  return Promise.all([
-    read("/api/statusline/show?board=" + HK_BOARD).then((r) => r.data),
-    read("/api/statusline/components?board=" + HK_BOARD).then((r) => r.data),
-    read("/api/statusline/presets?board=" + HK_BOARD).then((r) => r.data),
-    read(hkPreviewUrl()).then((r) => r.data),
-  ]).then(([show, cat, presets, prev]) => ({ show, cat, presets, prev }));
-}
-
-// THE ONLY PAINT. No fetch, no skeleton, no router. The scroll position is
-// kept by hand: a board you are halfway down must not jump to the top because
-// you moved one chip.
-function hkPaint() {
-  if (!HK_SLOT || !HK_DATA) return;
-  const y = window.scrollY;
-  // NO ENTRANCE ANIMATION ON A REPAINT. `.stack > *` fades and slides each
-  // child in on a 30ms stagger, and `.hk-chip` does the same per chip — which
-  // is right the first time the panel arrives and is exactly the "the screen
-  // blinked like it reloaded" the user reported, on every keystroke, with the
-  // network tab empty. `hk-quiet` switches those entrances off; the transitions
-  // (hover, the drop marker, the staged edge) are untouched, because they are
-  // about the pointer rather than about arriving.
-  if (HK_PAINTED) HK_SLOT.classList.add("hk-quiet");
-  HK_PAINTED = true;
-  const { show, cat, presets, prev } = HK_DATA;
-  HK_SLOT.replaceChildren();
-  if (!show || !cat) {
-    HK_SLOT.append(empty(t("hookui.noData")));
-    return;
-  }
-  // The effective board: what it WILL be once the staged ops run. Every count,
-  // every slot cap and every legality question downstream reads this and never
-  // `show.lines` directly.
-  const plan = hkPlan(show, cat);
-
-  const edits = editSet(() => bar.paint());
-  const bar = editBar(edits, {
-    onApply: async (b) => {
-      await applyActions(edits, b);
-      HK_OPS = [];
-      HK_COMPARE_DATA = null;
-      await hkReload();
-    },
-    onReset: () => confirmReset(),
-    onCancel: () => {
-      HK_OPS = [];
-      hkPaint();
-    },
-    resetLabel: t("hookui.resetLayout"),
-  });
-  // Filled AFTER the bar exists: `editSet`'s onChange paints it, and a paint
-  // before that binding is assigned throws.
-  for (const a of plan.actions) edits.action(a.key, a.route, a.body, a.label);
-
-  HK_SLOT.append(boardTabs(cat));
-  HK_SLOT.append(gateCard(show, cat));
-  // A caution renders ABOVE the preview, never inside a tab — a caution you
-  // have to hunt for is a caution nobody reads.
-  if (show.errors.length || show.warnings.length) HK_SLOT.append(cautionCard(show));
-  HK_SLOT.append(previewCard(prev, plan, cat));
-  HK_SLOT.append(boardCard(cat, plan));
-  HK_SLOT.append(referenceCard(cat));
-  HK_SLOT.append(presetsCard(presets, plan));
-  HK_SLOT.append(advancedCard(cat, plan));
-  HK_SLOT.append(bar);
-
-  // The open editor follows the staged state. A modal the page has stopped
-  // showing is not repainted — it is forgotten.
-  if (HK_MODAL) {
-    const host = document.getElementById("modal-host");
-    if (host && host.hidden) HK_MODAL = null;
-    else HK_MODAL.repaint(plan);
-  }
-  window.scrollTo(0, y);
-}
-
-// A REFETCH. Used where the disk actually moved: Apply, a preset, the reset,
-// the switch, a board change and a recompile. Never on a staged edit.
-async function hkReload() {
-  try {
-    HK_DATA = await hkLoad();
-  } catch (_) {
-    /* the last good data stays on screen — a failed poll is not a blank page */
-  }
-  hkPaint();
-}
-
-// The preview is the ONLY thing a width or fixture change moves, so it is the
-// only thing refetched. Four endpoints for a picture is three too many.
-async function hkPreviewReload() {
-  try {
-    const r = await read(hkPreviewUrl());
-    if (HK_DATA) HK_DATA.prev = r.data;
-  } catch (_) {}
-  hkPaint();
-}
-
-// EVERY write carries the board it is about. Forgetting it on one route would
-// edit the other board's layout, which is the one mistake here that is silent.
-function bd(body) {
-  return Object.assign({ board: HK_BOARD }, body);
-}
-
-/* ══ the staged plan ══════════════════════════════════════════════════════
-   Replays every staged op onto a working copy of the saved layout and returns
-   BOTH the effective board and the ordered writes that produce it. ONE
-   function, because a second idea of where a part will land is exactly the bug
-   this replaces: the board drew one arrangement and the writes produced
-   another, silently. */
-
-// Ops are staged by REF, never by position. A ref is either an item id the CLI
-// already gave us, or `new:<n>` for something staged in this session.
-function hkOp(op) {
-  // A second edit to the same field of the same part REPLACES the first — one
-  // decision typed twice is one decision, and the pending list has to read as a
-  // list of decisions rather than a list of keystrokes.
-  if (op.op === "set") HK_OPS = HK_OPS.filter((o) => !(o.op === "set" && o.ref === op.ref && o.field === op.field));
-  if (op.op === "sep") HK_OPS = HK_OPS.filter((o) => !(o.op === "sep" && o.line === op.line));
-  if (op.op === "doc") HK_OPS = HK_OPS.filter((o) => !(o.op === "doc" && o.field === op.field));
-  HK_OPS.push(op);
-  // A REPAINT, NEVER A REFETCH. Nothing has been written, so nothing on disk
-  // has moved — and re-entering the router here is what made every click look
-  // like a save.
-  hkPaint();
-}
-
-function hkPlan(show, cat) {
-  const structural = new Set((cat.components || []).filter((c) => c.structural).map((c) => c.id));
-  const lines = (show.lines || []).map((l) => ({
-    line: l.line,
-    separator: l.separator,
-    items: (l.items || []).map((it) => ({ ref: it.id, type: it.type, src: it, over: {}, isNew: false })),
-  }));
-  const actions = [];
-  const doc = { theme: show.theme, glyphs: show.glyphs };
-  const find = (ref) => {
-    for (const l of lines) {
-      const i = l.items.findIndex((x) => x.ref === ref);
-      if (i >= 0) return { l, i, it: l.items[i] };
-    }
-    return null;
-  };
-
-  HK_OPS.forEach((op, oi) => {
-    const key = "op" + (oi + 1);
-    if (op.op === "add") {
-      const l = lines[op.line - 1];
-      if (!l) return;
-      // THE POSITION IS COMPUTED HERE, not when the button was pressed. Three
-      // adds in a row get 1, 2 and 3 and append; three adds computed at stage
-      // time all got 1, and the CLI read 2 and 3 as EDITS of the first.
-      const pos = l.items.length + 1;
-      l.items.push({ ref: "new:" + oi, type: op.type, src: null, over: {}, isNew: true });
-      actions.push({ key, route: "/api/statusline/set", body: bd({ line: op.line, pos, type: op.type }), label: t("hookui.opAdd", { id: op.type, n: op.line }) });
-    } else if (op.op === "remove") {
-      const f = find(op.ref);
-      if (!f) return;
-      actions.push({ key, route: "/api/statusline/remove", body: bd({ at: f.l.line + ":" + (f.i + 1) }), label: t("hookui.opRemove", { id: f.it.type }) });
-      f.l.items.splice(f.i, 1);
-    } else if (op.op === "move") {
-      const f = find(op.ref);
-      if (!f) return;
-      const from = f.l.line + ":" + (f.i + 1);
-      f.l.items.splice(f.i, 1);
-      const dst = lines[op.toLine - 1];
-      if (!dst) return;
-      const at = Math.max(0, Math.min(op.toPos - 1, dst.items.length));
-      dst.items.splice(at, 0, f.it);
-      actions.push({ key, route: "/api/statusline/move", body: bd({ from, to: dst.line + ":" + (at + 1) }), label: t("hookui.opMove", { id: f.it.type, n: dst.line }) });
-    } else if (op.op === "clone") {
-      const f = find(op.ref);
-      if (!f) return;
-      actions.push({ key, route: "/api/statusline/clone", body: bd({ at: f.l.line + ":" + (f.i + 1) }), label: t("hookui.opClone", { id: f.it.type }) });
-      f.l.items.splice(f.i + 1, 0, { ref: "new:" + oi, type: f.it.type, src: f.it.src, over: Object.assign({}, f.it.over), isNew: true });
-    } else if (op.op === "set") {
-      const f = find(op.ref);
-      if (!f) return;
-      f.it.over[op.field] = op.value;
-      if (op.field === "type") f.it.type = op.value;
-      actions.push({ key, route: "/api/statusline/set", body: bd(Object.assign({ line: f.l.line, pos: f.i + 1 }, { [op.field]: op.value })), label: op.label });
-    } else if (op.op === "sep") {
-      const l = lines[op.line - 1];
-      if (!l) return;
-      l.separator = op.value;
-      actions.push({ key, route: "/api/statusline/line", body: bd({ line: op.line, separator: op.value }), label: op.label });
-    } else if (op.op === "doc") {
-      doc[op.field] = op.value;
-      actions.push({ key, route: "/api/statusline/doc", body: bd({ [op.field]: op.value }), label: op.label });
-    }
-  });
-
-  for (const l of lines) {
-    // A spacer is not a thing the line SAYS, so it does not eat one of the
-    // five. Which ids those are is the CLI's answer, carried per component.
-    l.counted = l.items.filter((x) => !structural.has(x.type)).length;
-    l.full = l.counted >= cat.max_per_line;
-  }
-  return { lines, actions, doc, dirty: HK_OPS.length > 0, max: cat.max_per_line };
-}
-
-// The dense-prefix rule, applied to ONE line of the EFFECTIVE board — never the
-// saved one, or a part staged onto line 1 would leave line 2 still refusing.
-// The reason travels with the answer, because a disabled zone with no reason is
-// a shrug.
-function lineLegal(plan, n) {
-  if (n === 1) return { ok: true };
-  const above = plan.lines[n - 2];
-  if (above && above.items.length > 0) return { ok: true };
-  return { ok: false, why: t("hookui.fillFirst", { n: n - 1 }) };
-}
-
-// Why a part cannot go on this line RIGHT NOW; a null answer means it can. Both
-// reasons are the user's to read BEFORE the click, never after it.
-function addBlocked(plan, n) {
-  const legal = lineLegal(plan, n);
-  if (!legal.ok) return legal.why;
-  const line = plan.lines[n - 1];
-  if (!line) return t("hookui.noSuchLine");
-  if (line.full) return t("hookui.lineFull", { n: n, max: plan.max });
-  return null;
-}
-
-/* ══ the board tabs ═══════════════════════════════════════════════════════ */
-// The two boards. Named by the CLI (`boards` in the catalogue), labelled by the
-// panel — the id is data and the label is prose, which is the split everywhere
-// else in this file too.
-//
-// The keys are SPELLED OUT rather than assembled from the id, for the same
-// reason the tier labels are: a key built from a fragment is invisible to the
-// coverage check that keeps the two string tables honest.
-const HK_BOARD_LABEL = { status: "hookui.boardStatus", subagent: "hookui.boardSubagent" };
-const HK_BOARD_SUB = { status: "hookui.boardStatusSub", subagent: "hookui.boardSubagentSub" };
-function boardTabs(cat) {
-  const c = card(null);
-  const row = el("div", "row-actions hk-boards");
-  for (const b of cat.boards || ["status"]) {
-    const btn = el("button", "btn btn-sm" + (HK_BOARD === b ? " btn-primary" : " btn-ghost"),
-      t(HK_BOARD_LABEL[b] || HK_BOARD_LABEL.status));
-    btn.type = "button";
-    btn.addEventListener("click", () => {
-      if (HK_BOARD === b) return;
-      // Switching boards with ops staged would send them to a board they were
-      // never about: every op carries a board, but the POSITIONS in them were
-      // computed against this one.
-      if (HK_OPS.length) return toast(t("hookui.applyFirst"), "bad");
-      HK_BOARD = b;
-      HK_SEARCH = "";
-      HK_COMPARE_DATA = null;
-      hkReload();
-    });
-    row.append(btn);
-  }
-  c.append(row);
-  c.append(el("div", "note", t(HK_BOARD_SUB[HK_BOARD] || HK_BOARD_SUB.status)));
-  return c;
-}
-
-/* ══ the gate ═════════════════════════════════════════════════════════════ */
-// INVERTED from the Extra panel's. There, nothing exists until you connect;
-// here the board is LIVE WHILE OFF, because you must be able to compose before
-// you arm. What is gated is the switch, not the work.
-function gateCard(show, cat) {
-  const c = card(t("hookui.gate"));
-  const row = el("div", "row-actions");
-  row.append(chip(show.enabled ? t("hookui.on") : t("hookui.off"), show.enabled ? "ok" : null));
-  if (show.saved) row.append(chip(t("hookui.saved"), null));
-  c.append(row);
-  c.append(el("div", "note", show.enabled ? t("hookui.gateOnNote") : t("hookui.gateOffNote")));
-
-  const b = el("button", "btn btn-sm" + (show.enabled ? " btn-ghost" : " btn-primary"),
-    show.enabled ? t("hookui.turnOff") : t("hookui.turnOn"));
-  b.type = "button";
-  // ENABLED WITH NOTHING SAVED IS NOT A STATE. The switch cannot reach `on`
-  // past a layout that does not validate, and the refusal names the violation
-  // rather than saying "invalid".
-  if (!show.enabled && !show.ok) {
-    b.disabled = true;
-    b.title = show.errors[0] || "";
-    c.append(el("div", "note note-warn", show.errors[0] || ""));
-  }
-  b.addEventListener("click", async () => {
-    // The KEY IS THE CLI'S. Naming it here would be a second idea of which
-    // switch belongs to which board.
-    const r = await post("/api/config/set", { key: cat.config_key, value: show.enabled ? "off" : "on" });
-    if (!r.ok) toast(t("hookui.switchFailed"), "bad", (r.output || "").trim());
-    hkReload();
-  });
-  const acts = el("div", "row-actions");
-  acts.append(b);
-  c.append(acts);
-  return c;
-}
-
-/* ══ cautions ═════════════════════════════════════════════════════════════ */
-// An error is a refusal; a warning is a fact the user then owns. They are drawn
-// differently and they are never merged into one count.
-function cautionCard(show) {
-  const c = card(t("hookui.cautions"));
-  for (const e of show.errors) {
-    const row = el("div", "hk-caution hk-caution-bad");
-    row.append(el("span", "hk-caution-mark", "✕"));
-    row.append(el("span", null, e));
-    c.append(row);
-  }
-  for (const w of show.warnings) {
-    const row = el("div", "hk-caution");
-    row.append(el("span", "hk-caution-mark", "⚠"));
-    row.append(el("span", null, w));
-    c.append(row);
-  }
-  return c;
-}
-
-/* == the preview ==========================================================
-   Pinned above the board and never scrolled away. `orc statusline preview
-   --json`'s output, rendered as DOM and never as HTML.
-
-   v1.4.2 - IT IS DRAWN AS A TERMINAL, because that is the claim it is making.
-   A status line in a bare grey box is a string; the same string inside a
-   window of the stated width, on a terminal ground, with a ruler that shows
-   where column 80 falls, is a picture of the thing. Nothing about the bytes
-   changed - the engine is still the hook's own - what changed is that the
-   reader can now believe it.
-
-   IT DRAWS THE SAVED LAYOUT, and while anything is staged it SAYS SO. The
-   preview renders through the hook's own engine, which reads the file - so a
-   preview of unsaved edits would need a second engine, which is the one thing
-   this design refuses. "These changes are not in the picture yet" is the honest
-   version, and it is also the answer to "I pressed Apply and nothing happened":
-   something did, and this is where it shows up.
-
-   THE HEIGHT IS THE OTHER HALF. Three strippings, four colour sets and seven
-   symbol sets is a wall of terminal, and it pushed the board - the thing the
-   user is actually working in - off the screen. All of it lives in ONE drawer
-   now, closed by default, and its rows are FETCHED ONLY WHEN IT IS OPENED:
-   eleven extra renders nobody asked to see is eleven subprocesses nobody asked
-   to pay for. */
-function previewCard(prev, plan, cat) {
-  const right = el("div", "row-actions");
-  for (const w of HK_WIDTHS) {
-    const b = el("button", "btn btn-xs" + (HK_WIDTH === w ? " btn-primary" : " btn-ghost"), tn(w, "hookui.cols"));
-    b.type = "button";
-    b.addEventListener("click", () => {
-      HK_WIDTH = w;
-      HK_COMPARE_DATA = null;
-      hkPreviewReload();
-    });
-    right.append(b);
-  }
-  const c = card(t("hookui.preview"), right);
-  c.append(el("div", "note", t("hookui.previewAbout")));
-  // THE STAGED BANNER IS AN INSTRUCTION, not a disclaimer. It says what is
-  // missing from the picture AND what to press to put it there.
-  if (plan.dirty) c.append(el("div", "note note-warn", tn(plan.actions.length, "hookui.previewStaleN")));
-  if (!prev || !prev.ok) {
-    c.append(el("div", "note", t("hookui.previewUnavailable")));
-    return c;
-  }
-
-  // The fixture picker. `--fixtures` must carry one of every state INCLUDING
-  // the ugly ones - you cannot design a degraded line on a healthy session.
-  c.append(el("div", "note", t("hookui.fixturesAbout")));
-  const states = el("div", "row-actions hk-fixtures");
-  for (const [k, label] of Object.entries(prev.fixtures || {})) {
-    const b = el("button", "btn btn-xs" + (HK_STATE === k ? " btn-primary" : " btn-ghost"), label);
-    b.type = "button";
-    b.addEventListener("click", () => {
-      HK_STATE = k;
-      HK_COMPARE_DATA = null;
-      hkPreviewReload();
-    });
-    states.append(b);
-  }
-  c.append(states);
-
-  c.append(termWindow(prev.text, {
-    title: tn(HK_WIDTH, "hookui.termTitle"),
-    // The colour set and the symbol set the picture was drawn with are the
-    // CLI's answer, carried on the preview itself. Naming them here would be a
-    // second idea of what is in force.
-    tags: [prev.theme, prev.glyphs].filter(Boolean),
-    ruler: true,
-  }));
-
-  // WHAT EACH LINE COSTS IN CELLS, under the window it belongs to. A number in
-  // a row of chips a long way from the picture is a number nobody reads.
-  const meta = el("div", "row-actions hk-widths");
-  (prev.static_width || []).forEach((w, i) => {
-    if (!w) return;
-    meta.append(chip(tn(i + 1, "hookui.lineN") + " " + tn(w, "hookui.cells"), null));
-  });
-  if (meta.childNodes.length) c.append(meta);
-
-  c.append(compareDrawer(prev, cat));
-  return c;
-}
-
-// A TERMINAL, drawn as one. The chrome is not decoration: the title bar states
-// the width the picture was rendered at, and the ruler shows where that width
-// falls - which is the whole question a status line asks.
-function termWindow(text, { title, tags, ruler, small }) {
-  const box = el("div", "hk-term" + (small ? " hk-term-sm" : ""));
-  const bar = el("div", "hk-term-bar");
-  const dots = el("div", "hk-term-dots");
-  for (let i = 0; i < 3; i++) dots.append(el("span", "hk-term-dot"));
-  bar.append(dots);
-  if (title) bar.append(el("span", "hk-term-title", title));
-  const tagRow = el("div", "hk-term-tags");
-  for (const g of tags || []) tagRow.append(el("span", "hk-term-tag", g));
-  bar.append(tagRow);
-  box.append(bar);
-
-  const screen = el("div", "hk-term-screen");
-  if (ruler) screen.append(rulerRow(HK_WIDTH));
-  screen.append(ansiBlock(text, "hk-preview hk-preview-flat"));
-  box.append(screen);
-  return box;
-}
-
-// The column ruler. Ten-cell ticks with the count at each, in the SAME
-// monospaced grid as the line under it - so "this is 44 cells" stops being a
-// number and becomes a place on the picture.
-function rulerRow(cols) {
-  const row = el("div", "hk-ruler");
-  let out = "";
-  for (let i = 0; i < cols; i++) {
-    if (i % 10 === 0) {
-      const n = String(i);
-      out += n;
-      i += n.length - 1;
-    } else out += i % 5 === 0 ? "+" : "\u00b7";
-  }
-  row.textContent = out.slice(0, cols);
-  return row;
-}
-
-/* == the comparison drawer ================================================
-   Three strippings, every colour set and every symbol set - the same layout,
-   the same fixture, the same width, through the same engine. A colour set
-   picked from its NAME is a guess; picked from its picture it is a decision.
-
-   It is CLOSED by default and its rows are fetched on the first open, because
-   each one is a real render. */
-function compareDrawer(prev, cat) {
-  const wrap = el("div", "hk-compare");
-  const head = el("button", "hk-compare-head");
-  head.type = "button";
-  head.setAttribute("aria-expanded", String(HK_COMPARE));
-  head.append(el("span", "tier-caret", "\u25b8"));
-  head.append(el("span", "hk-compare-title", t("hookui.compare")));
-  head.append(el("span", "note", t("hookui.compareAbout")));
-  // NOT named `body`: that name is reserved for a panel's own card container,
-  // which must carry `stack`. This is a drawer's contents and spaces itself.
-  const drawer = el("div", "hk-compare-body");
-  wrap.classList.toggle("hk-compare-open", HK_COMPARE);
-  head.addEventListener("click", () => {
-    HK_COMPARE = !HK_COMPARE;
-    wrap.classList.toggle("hk-compare-open", HK_COMPARE);
-    head.setAttribute("aria-expanded", String(HK_COMPARE));
-    if (HK_COMPARE && !HK_COMPARE_DATA) loadCompare(drawer, cat, prev);
-  });
-  wrap.append(head, drawer);
-  if (HK_COMPARE) {
-    if (HK_COMPARE_DATA) paintCompare(drawer, prev);
-    else loadCompare(drawer, cat, prev);
-  }
-  return wrap;
-}
-
-async function loadCompare(body, cat, prev) {
-  body.replaceChildren(skeleton(3));
-  const themes = Object.keys(cat.themes || {});
-  const glyphs = cat.glyph_sets || [];
-  const one = (extra) => read(hkPreviewUrl() + extra).then((r) => r.data).catch(() => null);
-  try {
-    const [themeRows, glyphRows] = await Promise.all([
-      Promise.all(themes.map((n) => one("&theme=" + encodeURIComponent(n)).then((d) => [n, d]))),
-      Promise.all(glyphs.map((n) => one("&glyphs=" + encodeURIComponent(n)).then((d) => [n, d]))),
-    ]);
-    HK_COMPARE_DATA = { themes: themeRows, glyphs: glyphRows };
-  } catch (_) {
-    HK_COMPARE_DATA = { themes: [], glyphs: [] };
-  }
-  paintCompare(body, prev);
-}
-
-function paintCompare(body, prev) {
-  body.replaceChildren();
-  // THE THREE STRIPPINGS FIRST. You cannot design an ASCII fallback you cannot
-  // see, and a design whose only distinction is colour becomes ambiguous the
-  // moment NO_COLOR is set.
-  body.append(el("div", "hk-compare-group", t("hookui.degrades")));
-  for (const [key, label] of [
-    ["no_color", t("hookui.degNoColor")],
-    ["ascii", t("hookui.degAscii")],
-    ["no_motion", t("hookui.degNoMotion")],
-  ]) {
-    body.append(compareRow(label, (prev.strippings || {})[key]));
-  }
-  const d = HK_COMPARE_DATA || { themes: [], glyphs: [] };
-  if (d.themes.length) {
-    body.append(el("div", "hk-compare-group", t("hookui.compareThemes")));
-    // The NAME is the CLI's word, printed verbatim - a translated colour set is
-    // a colour set that does not exist.
-    for (const [name, row] of d.themes) body.append(compareRow(name, row && row.ok ? row.text : null));
-  }
-  if (d.glyphs.length) {
-    body.append(el("div", "hk-compare-group", t("hookui.compareGlyphs")));
-    for (const [name, row] of d.glyphs) body.append(compareRow(name, row && row.ok ? row.text : null));
-  }
-}
-
-function compareRow(label, text) {
-  const row = el("div", "hk-compare-row");
-  row.append(el("div", "hk-compare-label", label));
-  if (text == null) row.append(el("div", "note", t("hookui.previewUnavailable")));
-  else row.append(termWindow(text, { title: label, tags: [], ruler: false, small: true }));
-  return row;
-}
-
-// ANSI → DOM. Never innerHTML: this string comes from the CLI, and the rule for
-// every other rendered artefact in this panel holds here too.
-function ansiBlock(text, cls) {
-  const pre = el("pre", cls);
-  for (const line of String(text || "").split("\n")) {
-    const row = el("div", "hk-line");
-    let style = null;
-    // A minimal SGR reader: colour, background and the emphasis attributes the
-    // compiler can emit. Anything it does not recognise is DROPPED rather than
-    // printed, because a stray escape in the middle of a preview is worse than
-    // a missing colour.
-    const re = /\[([0-9;]*)m/g;
-    let last = 0;
-    let m;
-    const push = (s) => {
-      if (!s) return;
-      const span = el("span", null, s);
-      // THROUGH CSSOM, NEVER A `style` ATTRIBUTE. This page is served under
-      // `style-src 'self'`, which blocks a parsed style attribute outright —
-      // so every colour this preview drew was thrown away by the browser and
-      // the whole thing rendered grey, with the reason only in a console
-      // nobody had open. Assigning the property is not a parse and is not
-      // blocked, and weakening the policy to `unsafe-inline` for a preview is
-      // not a trade worth making.
-      if (style) for (const k of Object.keys(style)) span.style[k] = style[k];
-      row.append(span);
-    };
-    while ((m = re.exec(line))) {
-      push(line.slice(last, m.index));
-      style = sgrStyle(m[1], style);
-      last = m.index + m[0].length;
-    }
-    push(line.slice(last));
-    if (!row.childNodes.length) row.append(document.createTextNode(" "));
-    pre.append(row);
-  }
-  return pre;
-}
-
-// The 16 ANSI slots, as the browser's own colours. These are NOT ORC's colour
-// tokens — they are what a terminal would paint, approximated, because the
-// panel cannot know the user's terminal palette and says so.
-const HK_ANSI = [
-  "#000000", "#cc0000", "#4e9a06", "#c4a000", "#3465a4", "#75507b", "#06989a", "#d3d7cf",
-];
-const HK_ANSI_BRIGHT = [
-  "#555753", "#ef2929", "#8ae234", "#fce94f", "#729fcf", "#ad7fa8", "#34e2e2", "#eeeeec",
-];
-
-// An OBJECT of CSS properties rather than a declaration string, because the
-// caller assigns them one at a time through CSSOM — see `push` above.
-function sgrStyle(codes, prev) {
-  const parts = String(codes || "0").split(";").filter((x) => x !== "");
-  if (!parts.length || parts[0] === "0") return null;
-  const out = Object.assign({}, prev || {});
-  for (let i = 0; i < parts.length; i++) {
-    const n = Number(parts[i]);
-    if (n === 1) out.fontWeight = "700";
-    else if (n === 2) out.opacity = ".6";
-    else if (n === 3) out.fontStyle = "italic";
-    else if (n === 4) out.textDecoration = "underline";
-    else if (n === 9) out.textDecoration = "line-through";
-    else if (n === 7) out.filter = "invert(1)";
-    else if (n >= 30 && n <= 37) out.color = HK_ANSI[n - 30];
-    else if (n >= 90 && n <= 97) out.color = HK_ANSI_BRIGHT[n - 90];
-    else if (n >= 40 && n <= 47) out.background = HK_ANSI[n - 40];
-    else if (n === 39) out.color = "inherit";
-    else if (n === 38 && parts[i + 1] === "2") {
-      out.color = "rgb(" + parts[i + 2] + "," + parts[i + 3] + "," + parts[i + 4] + ")";
-      i += 4;
-    } else if (n === 48 && parts[i + 1] === "2") {
-      out.background = "rgb(" + parts[i + 2] + "," + parts[i + 3] + "," + parts[i + 4] + ")";
-      i += 4;
-    }
-  }
-  return out;
-}
-
-/* ══ the board ════════════════════════════════════════════════════════════ */
-// THE ILLEGAL DROP IS MADE IMPOSSIBLE rather than allowed and then complained
-// about: an illegal zone renders disabled with its reason on the zone itself. A
-// user should never be able to do the wrong thing and then be told off for it.
-//
-// The CLI still validates. The board is a convenience; it is never the
-// guarantee.
-function boardCard(cat, plan) {
-  const c = card(t("hookui.board"));
-  c.append(el("div", "note", t("hookui.boardAbout")));
-  c.append(el("div", "note", cat.dense_prefix));
-
-  for (const line of plan.lines) {
-    const legal = lineLegal(plan, line.line);
-    const wrap = el("div", "hk-line-wrap" + (legal.ok ? "" : " hk-line-blocked"));
-
-    const h = el("div", "hk-line-head");
-    const title = el("div", "hk-line-title");
-    title.append(el("span", "hk-line-name", tn(line.line, "hookui.lineN")));
-    title.append(el("span", "hk-line-count" + (line.full ? " hk-full" : ""), tn(line.counted, "hookui.slotsUsed", { max: plan.max })));
-    h.append(title);
-    h.append(separatorPicker(cat, line));
-    wrap.append(h);
-
-    const zone = el("div", "hk-zone");
-    zone.setAttribute("role", "list");
-    for (const item of line.items) zone.append(chipEl(item, line, plan, cat));
-
-    if (!legal.ok) {
-      const blocked = el("div", "hk-blocked");
-      blocked.append(el("span", "hk-caution-mark", "✕"));
-      blocked.append(el("span", null, legal.why));
-      zone.append(blocked);
-    }
-    // THE ADD BUTTON ALWAYS RENDERS, and carries its own refusal. A control
-    // that vanishes when it cannot be used teaches nobody why — and the two
-    // refusals are DIFFERENT facts (nothing above it yet · this line is full),
-    // so they are two sentences and never one "invalid".
-    const b = el("button", "hk-add", t("hookui.add"));
-    b.type = "button";
-    if (!legal.ok) {
-      b.disabled = true;
-      b.title = legal.why;
-    } else if (line.full) {
-      b.disabled = true;
-      b.title = t("hookui.lineFull", { n: line.line, max: plan.max });
-    } else {
-      b.addEventListener("click", () => partPicker(cat, plan, line.line, null));
-    }
-    zone.append(b);
-    if (b.disabled && legal.ok) zone.append(el("div", "note note-warn hk-zone-why", b.title));
-    dropTarget(zone, line, plan);
-    wrap.append(zone);
-    c.append(wrap);
-  }
-  c.append(el("div", "note", t("hookui.dragHint")));
-  return c;
-}
-
-// THE SEPARATOR IS A DROPDOWN, and its options are the CLI's. A free-text box
-// asked a person to invent a rhythm and then to type a character that may not
-// be on their keyboard. A value the layout already carries that is NOT in the
-// set keeps its slot, leads the list and is disabled — the `fixed_executor`
-// rule: the state must be visible, never re-offerable.
-function separatorPicker(cat, line) {
-  const wrap = el("label", "hk-line-opts");
-  wrap.append(el("span", "note", t("hookui.separator")));
-  const sel = el("select", "hk-select");
-  const known = cat.separators || [];
-  if (!known.some((s) => s.value === line.separator)) {
-    const o = el("option", null, t("hookui.sepCustom", { s: JSON.stringify(line.separator) }));
-    o.value = line.separator;
-    o.disabled = true;
-    o.selected = true;
-    sel.append(o);
-  }
-  for (const s of known) {
-    // The NAME is the CLI's word; the sample is the literal string, shown
-    // between two marks so a run of spaces is visible at all.
-    const o = el("option", null, s.name + "   ‹" + s.value + "›");
-    o.value = s.value;
-    if (s.value === line.separator) o.selected = true;
-    sel.append(o);
-  }
-  sel.addEventListener("change", () => {
-    const hit = known.find((s) => s.value === sel.value);
-    hkOp({ op: "sep", line: line.line, value: sel.value, label: t("hookui.opSep", { n: line.line, s: hit ? hit.name : sel.value }) });
-  });
-  wrap.append(sel);
-  return wrap;
-}
-
-/* ══ a chip ═══════════════════════════════════════════════════════════════ */
-// A chip shows ITS OWN RENDERED OUTPUT, not its component id — that is what the
-// user is arranging — with the id and a one-line description under it, because
-// "what is this thing" is the first question anybody asks of a bar full of
-// symbols, and the answer used to live only in a tooltip.
-function chipEl(item, line, plan, cat) {
-  const comp = (cat.components || []).find((x) => x.id === item.type);
-  const wrap = el("div", "hk-chip" + (item.isNew ? " hk-chip-new" : ""));
-  wrap.setAttribute("role", "listitem");
-  wrap.setAttribute("tabindex", "0");
-  wrap.draggable = hkCanDrag();
-  wrap.title = comp && comp.summary ? comp.summary : item.type;
-
-  const face = el("div", "hk-chip-face");
-  face.append(el("span", "hk-grip", "∷"));
-  face.append(ansiBlock(chipSample(item, comp), "hk-preview hk-preview-chip"));
-  wrap.append(face);
-
-  wrap.append(el("div", "hk-chip-id", item.type));
-  if (comp && comp.summary) wrap.append(el("div", "hk-chip-desc", comp.summary));
-
-  // EDIT · MOVE · REMOVE, on the chip. Each opens a modal that says what it is
-  // about to do. The drag is the shortcut, never the mechanism: pointer drag is
-  // unusable for a real fraction of people, and it is switched off entirely
-  // below the width at which a drop gap stops being a target.
-  const acts = el("div", "hk-chip-acts");
-  const mk = (label, cls, fn) => {
-    const b = el("button", "hk-act " + cls, label);
-    b.type = "button";
-    b.addEventListener("click", fn);
-    acts.append(b);
-  };
-  mk(t("hookui.edit"), "hk-act-edit", () => editModal(item, line, comp, cat));
-  mk(t("hookui.move"), "hk-act-move", () => moveModal(item, line, plan));
-  mk(t("hookui.remove"), "hk-act-remove", () => removeModal(item, comp));
-  wrap.append(acts);
-
-  // Keyboard: the settled pattern, and every drag has an equivalent here. A
-  // board only reachable by mouse is a board a lot of people cannot use.
-  wrap.addEventListener("keydown", (ev) => {
-    const pos = line.items.indexOf(item) + 1;
-    if (ev.key === "Delete" || ev.key === "Backspace") {
-      ev.preventDefault();
-      removeModal(item, comp);
-    } else if (ev.key === "e" || ev.key === "E") {
-      ev.preventDefault();
-      editModal(item, line, comp, cat);
-    } else if (ev.key === "ArrowLeft" && pos > 1) {
-      ev.preventDefault();
-      moveTo(item, line.line, pos - 1);
-    } else if (ev.key === "ArrowRight" && pos < line.items.length) {
-      ev.preventDefault();
-      moveTo(item, line.line, pos + 1);
-    } else if (ev.key === "ArrowUp" || ev.key === "ArrowDown") {
-      const target = line.line + (ev.key === "ArrowUp" ? -1 : 1);
-      if (target < 1 || target > plan.lines.length) return;
-      ev.preventDefault();
-      const why = addBlocked(plan, target);
-      // A line that cannot take it is SKIPPED and the live region says why —
-      // never a silent no-op.
-      if (why) return announce(why);
-      moveTo(item, target, 1);
-    }
-  });
-
-  wrap.addEventListener("dragstart", (ev) => {
-    HK_DRAG = { ref: item.ref, from: line.line };
-    wrap.classList.add("hk-chip-dragging");
-    try {
-      ev.dataTransfer.effectAllowed = "move";
-      ev.dataTransfer.setData("text/plain", item.ref);
-    } catch (_) {}
-  });
-  wrap.addEventListener("dragend", () => {
-    HK_DRAG = null;
-    wrap.classList.remove("hk-chip-dragging");
-    for (const n of document.querySelectorAll(".hk-drop-before, .hk-drop-after"))
-      n.classList.remove("hk-drop-before", "hk-drop-after");
-  });
-  wrap.addEventListener("dragover", (ev) => {
-    if (!HK_DRAG || HK_DRAG.ref === item.ref) return;
-    ev.preventDefault();
-    const r = wrap.getBoundingClientRect();
-    const before = ev.clientX < r.left + r.width / 2;
-    wrap.classList.toggle("hk-drop-before", before);
-    wrap.classList.toggle("hk-drop-after", !before);
-  });
-  wrap.addEventListener("dragleave", () => wrap.classList.remove("hk-drop-before", "hk-drop-after"));
-  wrap.addEventListener("drop", (ev) => {
-    if (!HK_DRAG || HK_DRAG.ref === item.ref) return;
-    ev.preventDefault();
-    ev.stopPropagation();
-    const before = wrap.classList.contains("hk-drop-before");
-    const pos = line.items.indexOf(item) + 1;
-    dropOnto(line, plan, before ? pos : pos + 1);
-  });
-  return wrap;
-}
-
-// What this chip will look like in the bar. A part staged in this session has
-// no rendered sample from the CLI yet, so it borrows its component's default —
-// which is exactly what it will render as until somebody changes its shape.
-function chipSample(item, comp) {
-  if (!comp) return item.type;
-  const render = item.over.render || (item.src ? item.src.render : (comp.defaults && comp.defaults.render) || comp.renderers[0]);
-  const s = comp.previews ? comp.previews[render] : null;
-  return s || item.type;
-}
-
-// A zone is a drop target across its WHOLE area, so a drop past the last chip
-// appends instead of doing nothing.
-function dropTarget(zone, line, plan) {
-  zone.addEventListener("dragover", (ev) => {
-    if (!HK_DRAG) return;
-    if (HK_DRAG.from !== line.line && addBlocked(plan, line.line)) return;
-    ev.preventDefault();
-    zone.classList.add("hk-zone-hot");
-  });
-  zone.addEventListener("dragleave", () => zone.classList.remove("hk-zone-hot"));
-  zone.addEventListener("drop", (ev) => {
-    zone.classList.remove("hk-zone-hot");
-    if (!HK_DRAG) return;
-    ev.preventDefault();
-    dropOnto(line, plan, line.items.length + 1);
-  });
-}
-
-function dropOnto(line, plan, pos) {
-  if (!HK_DRAG) return;
-  const all = plan.lines.reduce((acc, l) => acc.concat(l.items), []);
-  const moving = all.find((x) => x.ref === HK_DRAG.ref);
-  const from = HK_DRAG.from;
-  HK_DRAG = null;
-  if (!moving) return;
-  // Reordering WITHIN a line never changes how many parts it holds, so the
-  // five-slot cap and the dense-prefix rule only apply to a move that crosses
-  // lines.
-  if (from !== line.line) {
-    const why = addBlocked(plan, line.line);
-    if (why) return toast(why, "bad");
-  }
-  moveTo(moving, line.line, pos);
-}
-
-function moveTo(item, toLine, toPos) {
-  hkOp({ op: "move", ref: item.ref, toLine, toPos });
-  announce(t("hookui.opMove", { id: item.type, n: toLine }));
-}
-
-// `aria-grabbed` is deprecated and is not used. State is announced through a
-// polite live region instead — VoiceOver does not reliably read a dynamically
-// updated description, so the live region is the mechanism, not a fallback.
-function announce(msg) {
-  let region = document.getElementById("hk-live");
-  if (!region) {
-    region = el("div", "sr-only");
-    region.id = "hk-live";
-    region.setAttribute("role", "status");
-    region.setAttribute("aria-live", "polite");
-    document.body.append(region);
-  }
-  region.textContent = msg;
-}
-
-/* ══ the part picker ══════════════════════════════════════════════════════ */
-// ONE MODAL, one search box, one click. It is the only place a part is ever
-// chosen — for a new slot and for swapping an existing one — so there is
-// exactly one answer to "how do I put something on the bar".
-//
-// `replace` names the chip whose part is being swapped; absent, this is an add.
-function partPicker(cat, plan, line, replace) {
-  HK_MODAL = null;
-  let q = "";
-  // NOT named `body`: that name is reserved for a panel's own card container,
-  // which must carry `stack`. This is a modal's contents and spaces itself.
-  const pane = el("div", "hk-picker");
-
-  const searchRow = el("div", "hk-picker-search");
-  const search = el("input", "hk-input hk-picker-input");
-  search.type = "search";
-  search.placeholder = t("hookui.searchPlaceholder");
-  const count = el("span", "note");
-  searchRow.append(search, count);
-  pane.append(searchRow);
-  pane.append(el("div", "note", replace ? t("hookui.pickerReplaceAbout") : tn(line, "hookui.pickerAbout")));
-
-  const list = el("div", "hk-picker-list");
-  pane.append(list);
-
-  const closer = () => close();
-  const paint = () => {
-    list.replaceChildren();
-    const rows = (cat.components || []).filter((c) => (q ? matches(c, q) : true));
-    count.textContent = tn(rows.length, "hookui.matches");
-    if (!rows.length) {
-      list.append(empty(t("hookui.noMatch")));
-      return;
-    }
-    for (const comp of rows) list.append(pickerRow(comp, line, replace, closer));
-  };
-  search.addEventListener("input", () => {
-    q = search.value.trim().toLowerCase();
-    paint();
-  });
-  paint();
-
-  const close = modal({
-    title: replace ? t("hookui.pickerReplaceTitle") : tn(line, "hookui.pickerTitle"),
-    body: pane,
-    actions: [{ label: t("common.cancel"), cls: "btn-ghost", onClick: (c) => c() }],
-  });
-  setTimeout(() => search.focus(), 40);
-}
-
-// A row says WHAT the part is, in a sentence, next to what it will look like.
-// A REFUSED part is drawn and is NOT clickable — never a disabled button, and
-// never absent: "we decided against this" and "we forgot" must not look the
-// same, which is why the row exists at all.
-function pickerRow(comp, line, replace, close) {
-  const refused = comp.cost === "refused";
-  const row = el(refused ? "div" : "button", "hk-pick-row" + (refused ? " hk-pick-row-off" : ""));
-  if (!refused) row.type = "button";
-
-  const top = el("div", "hk-pick-top");
-  top.append(el("span", "hk-prow-id", comp.id));
-  // The cost chip is the CLI's own word. A friendlier synonym would be a state
-  // that does not exist.
-  top.append(chip(comp.cost, refused ? "bad" : null));
-  row.append(top);
-  if (comp.summary) row.append(el("div", "hk-pick-desc", comp.summary));
-  const sample = comp.previews && comp.previews[(comp.defaults && comp.defaults.render) || comp.renderers[0]];
-  if (sample) row.append(ansiBlock(sample, "hk-preview hk-preview-chip"));
-  if (refused) {
-    row.append(el("div", "note note-warn", comp.refused_reason));
-    return row;
-  }
-  row.addEventListener("click", () => {
-    if (replace) hkOp({ op: "set", ref: replace.ref, field: "type", value: comp.id, label: t("hookui.opSwap", { id: comp.id }) });
-    else hkOp({ op: "add", line, type: comp.id });
-    close();
-  });
-  return row;
-}
-
-// Fuzzy plus INITIALISM: with a catalogue this size a substring search is not
-// enough — two letters should find a two-word name, which plain substring
-// matching does not.
-function matches(comp, q) {
-  const id = comp.id.toLowerCase();
-  if (id.includes(q)) return true;
-  if ((comp.summary || "").toLowerCase().includes(q)) return true;
-  if ((comp.label || "").toLowerCase().includes(q)) return true;
-  const initials = id.split("-").map((p) => p[0]).join("");
-  if (initials.startsWith(q)) return true;
-  let i = 0;
-  for (const ch of id) if (ch === q[i]) i++;
-  return i === q.length;
-}
-
-/* ══ move ═════════════════════════════════════════════════════════════════ */
-// A modal that says what it is about to do — and on a narrow screen it is the
-// ONLY way to move a chip, because drag is off below the width at which a drop
-// gap stops being a target.
-function moveModal(item, line, plan) {
-  HK_MODAL = null;
-  const body = el("div", "stack");
-  body.append(el("div", "note", t("hookui.moveAbout", { id: item.type })));
-
-  for (const target of plan.lines) {
-    const legal = lineLegal(plan, target.line);
-    const sameLine = target.line === line.line;
-    const box = el("div", "hk-move-line");
-    box.append(el("div", "hk-line-name", tn(target.line, "hookui.lineN")));
-    // A LINE THAT CANNOT TAKE IT SAYS SO ONCE. Six identical disabled slots is
-    // the same refusal printed six times, and the reason is about the LINE
-    // rather than about any one slot on it.
-    const blocked = sameLine ? null : addBlocked(plan, target.line);
-    if (blocked) {
-      box.append(el("div", "note note-warn", blocked));
-      body.append(box);
-      continue;
-    }
-    const slots = el("div", "hk-move-slots");
-    const n = Math.max(1, target.items.length + (sameLine ? 0 : 1));
-    for (let p = 1; p <= n; p++) {
-      const b = el("button", "btn btn-xs btn-ghost", tn(p, "hookui.slotN"));
-      b.type = "button";
-      if (sameLine && p === line.items.indexOf(item) + 1) {
-        b.disabled = true;
-        b.title = t("hookui.alreadyHere");
-      } else {
-        b.addEventListener("click", () => {
-          close();
-          moveTo(item, target.line, p);
-        });
-      }
-      slots.append(b);
-    }
-    box.append(slots);
-    body.append(box);
-  }
-
-  const close = modal({
-    title: t("hookui.moveTitle"),
-    body,
-    actions: [{ label: t("common.cancel"), cls: "btn-ghost", onClick: (c) => c() }],
-  });
-}
-
-/* ══ remove ═══════════════════════════════════════════════════════════════ */
-function removeModal(item, comp) {
-  HK_MODAL = null;
-  const body = el("div", "stack");
-  body.append(el("div", "note", t("hookui.removeAbout", { id: item.type })));
-  if (comp && comp.summary) body.append(el("div", "note", comp.summary));
-  modal({
-    title: t("hookui.removeTitle"),
-    body,
-    actions: [
-      { label: t("common.cancel"), cls: "btn-ghost", onClick: (c) => c() },
-      {
-        label: t("hookui.remove"),
-        cls: "btn-primary",
-        onClick: (c) => {
-          c();
-          hkOp({ op: "remove", ref: item.ref });
-        },
-      },
-    ],
-  });
-}
-
-/* ══ the part editor ══════════════════════════════════════════════════════ */
-// A MODAL, because the board is what the user is looking at, and a drawer that
-// opened inside a chip pushed the whole board down under the thing being
-// edited.
-//
-// NO FIELD NAMES, AND EVERY CONTROL CARRIES A SENTENCE. `min_width` and
-// `hide_when` are the JSON's words; this says "Least width" and explains what
-// it does. The JSON is for the diff, the editor is for the person — and the
-// ids, renderers and state words that DO appear are the CLI's own and are never
-// translated.
-function editModal(item0, line0, comp, cat) {
-  // NOT named `body`: that name is reserved for a panel's own card container,
-  // which must carry `stack`. This is a modal's contents and spaces itself.
-  const pane = el("div", "hk-editor");
-  if (!comp) {
-    pane.append(el("div", "note", t("hookui.unknownComponent")));
-    modal({ title: item0.type, body: pane, actions: [{ label: t("common.close"), cls: "btn-ghost", onClick: (c) => c() }] });
-    return;
-  }
-
-  // THE EDITOR FOLLOWS THE STAGED STATE (v1.4.2). It used to be built once and
-  // then left standing while the panel behind it was thrown away and rebuilt,
-  // so every control it showed was the value from BEFORE the change the user
-  // had just made: you picked a colour, the swatch did not move, and the only
-  // reasonable conclusion was that the editor did not work. The part is
-  // re-found by its stable ref on every repaint, so what is on screen is always
-  // the effective value.
-  let ref = item0.ref;
-  let item = item0;
-  let line = line0;
-
-  const paint = (plan) => {
-    if (plan) {
-      let found = null;
-      for (const l of plan.lines) {
-        const hit = l.items.find((x) => x.ref === ref);
-        if (hit) {
-          found = { l, hit };
-          break;
-        }
-      }
-      // The part is gone — a staged remove, or an Apply that took it away.
-      // Closing is the only honest answer; editing something that no longer
-      // exists is worse than losing the dialog.
-      if (!found) return close();
-      item = found.hit;
-      line = found.l;
-    }
-    // THE CARET SURVIVES THE REPAINT. The editor rebuilds on every keystroke
-    // now, and a text box that loses focus after one letter is not a text box.
-    // The path is positional because the controls are the same controls in the
-    // same order across a repaint; when they are not, focus is simply not
-    // restored, which is the right failure.
-    const keep = focusPath(pane);
-    pane.replaceChildren();
-    // Same rule inside the dialog: it rebuilds on every keystroke, and a
-    // shape gallery that fades in each time you type a letter is the blink
-    // again in a smaller box.
-    pane.classList.add("hk-quiet");
-    build();
-    restoreFocus(pane, keep);
-  };
-
-  // The value in force for one field: what is staged, else what the CLI
-  // resolved, else the fallback. `show --json` now carries EVERY field, so this
-  // can finally answer for all of them — before v1.4.2 it emitted twelve of
-  // twenty-four and a control for one of the other twelve always read blank.
-  const val = (field, dflt) =>
-    field in item.over
-      ? item.over[field]
-      : item.src && item.src[field] !== undefined && item.src[field] !== null
-      ? item.src[field]
-      : dflt;
-  // Whether the USER set this one, as opposed to inheriting it from the
-  // catalogue, the colour set or the file. A control that cannot tell those
-  // apart cannot say what it is about to change.
-  const mine = (field) => field in item.over || !!(item.src && item.src.authored && field in item.src.authored);
-  const stage = (field, value, label) => hkOp({ op: "set", ref, field, value, label });
-  // A field name, plus a mark when the value is the user's own.
-  const fieldName = (name, field) => (mine(field) ? name + " \u2022" : name);
-
-  // WHETHER THE CURRENT SHAPE USES THIS FIELD AT ALL. The CLI's answer, per
-  // renderer, carried on the renderer table — the panel does not know which
-  // shapes draw a label any more than it knows what a label is. Twenty-eight of
-  // the thirty-five renderers ignore `label` entirely, and before this the Name
-  // box was offered on every one of them: it took the text, the CLI wrote it to
-  // disk correctly, and nothing ever appeared on the bar.
-  //
-  // The control is DISABLED and keeps its slot with the reason on it, never
-  // hidden — "this shape cannot use it" and "we forgot to offer it" must not
-  // look the same, and a value already set has to stay visible.
-  const usesOf = (field) => {
-    const rend = cat.renderers[val("render", (comp.defaults && comp.defaults.render) || comp.renderers[0])];
-    if (!rend || !rend.uses) return true;
-    return rend.uses.includes(field);
-  };
-  // Wraps a control that this shape ignores: greyed, inert, and carrying the
-  // sentence that says which shapes DO use it.
-  const gated = (field, node, shapes) => {
-    if (usesOf(field)) return node;
-    const box = el("div", "hk-inert");
-    for (const b of node.querySelectorAll ? node.querySelectorAll("button, input, select") : []) b.disabled = true;
-    if (node.tagName === "INPUT" || node.tagName === "SELECT") node.disabled = true;
-    box.append(node);
-    box.append(el("div", "note note-warn", shapes
-      ? t("hookui.shapeIgnoresLabel", { shapes: shapes.join(", ") })
-      : t("hookui.shapeIgnores")));
-    return box;
-  };
-
-  function build() {
-    const live = el("div", "hk-editor-live");
-    // WHAT THIS IS, EXACTLY. `previews` is a per-renderer sample the CLI drew
-    // from its own fixture, so it shows the SHAPE this part will take - never
-    // the words or the numbers this component will carry at run time. Claiming
-    // otherwise would make the one picture in this dialog a lie.
-    live.append(el("div", "note", t("hookui.editorLive")));
-    live.append(termWindow(chipSample(item, comp), { title: comp.id, tags: [], ruler: false, small: true }));
-    pane.append(live);
-    if (comp.summary) pane.append(el("div", "note", comp.summary));
-    pane.append(el("div", "note", t("hookui.editorStaged")));
-
-    // Swapping the part itself, from inside the editor: "this slot, but a
-    // different thing" is a real edit and it should not need a remove and an add.
-    const swap = el("button", "btn btn-xs btn-ghost hk-swap", t("hookui.swap"));
-    swap.type = "button";
-    swap.addEventListener("click", () => {
-      close();
-      partPicker(cat, HK_NO_LINES, 0, item);
-    });
-    pane.append(swap);
-
-    // THE SHAPE PICKER IS A GALLERY, NOT A DROPDOWN. Every renderer the component
-    // declares, drawn with this component's real current value. A dropdown
-    // containing a renderer's name tells nobody anything, and this is the
-    // difference between a feature people use and a settings form they close.
-    pane.append(sectionHead(t("hookui.shape"), t("hookui.shapeAbout")));
-    const gallery = el("div", "hk-gallery");
-    const curRender = val("render", (comp.defaults && comp.defaults.render) || comp.renderers[0]);
-    for (const r of comp.renderers) {
-      const b = el("button", "hk-sample" + (curRender === r ? " hk-sample-on" : ""));
-      b.type = "button";
-      b.title = r;
-      b.append(ansiBlock(comp.previews && comp.previews[r] ? comp.previews[r] : r, "hk-preview hk-preview-chip"));
-      b.append(el("span", "hk-sample-id", r));
-      // IT NO LONGER CLOSES. Closing was how the old editor hid the fact that
-      // it could not update itself; now the gallery marks the new shape and the
-      // sample above redraws, which is what a person expects a picker to do.
-      b.addEventListener("click", () => stage("render", r, t("hookui.shapeChange", { id: comp.id, r })));
-      gallery.append(b);
-    }
-    pane.append(gallery);
-    // AT THE CONTROL, at the moment the choice is made. Which shape you pick
-    // decides whether the Name box below is live at all, so the sentence
-    // belongs here rather than in a surprise further down the dialog.
-    pane.append(el("div", "note", t("hookui.shapeDecides", { shapes: (cat.label_renderers || []).join(", ") })));
-
-    pane.append(sectionHead(t("hookui.glyphs"), t("hookui.glyphsAbout")));
-    pane.append(pickRow(cat.glyph_sets, val("glyphs", null), (v) => stage("glyphs", v, t("hookui.glyphChange", { id: comp.id, v }))));
-
-    pane.append(sectionHead(t("hookui.words"), t("hookui.wordsAbout")));
-    const label = el("input", "hk-input");
-    label.type = "text";
-    const cur = val("label", "");
-    label.value = cur == null ? "" : String(cur);
-    label.placeholder = t("hookui.labelPlaceholder");
-    // BOTH EVENTS. `change` alone fires on blur, so a name typed and then
-    // followed by a click on Close raced the close and was sometimes never
-    // staged at all. `input` stages every keystroke; `hkOp` already collapses
-    // repeated edits of one field into one decision, so the pending list still
-    // reads as a list of decisions.
-    const push = () => stage("label", label.value, t("hookui.labelChange", { id: comp.id, v: label.value }));
-    label.addEventListener("change", push);
-    label.addEventListener("input", push);
-    pane.append(labelled(fieldName(t("hookui.label"), "label"), gated("label", label, cat.label_renderers), t("hookui.labelAbout")));
-    pane.append(labelled(fieldName(t("hookui.case"), "case"), gated("case", pickRow(cat.cases, val("case", null), (v) => stage("case", v, t("hookui.caseChange", { id: comp.id, v })))), t("hookui.caseAbout")));
-    pane.append(labelled(fieldName(t("hookui.before"), "prefix"), gated("prefix", textField(val("prefix", ""), (v) => stage("prefix", v, t("hookui.beforeChange", { id: comp.id, v })))), t("hookui.beforeAbout")));
-    pane.append(labelled(fieldName(t("hookui.after"), "suffix"), gated("suffix", textField(val("suffix", ""), (v) => stage("suffix", v, t("hookui.afterChange", { id: comp.id, v })))), t("hookui.afterAbout")));
-
-    pane.append(sectionHead(t("hookui.colour"), t("hookui.colourAbout")));
-    pane.append(labelled(fieldName(t("hookui.labelColour"), "label_color"), pickRow(cat.colors, val("label_color", null), (v) => stage("label_color", v, t("hookui.colourChange", { id: comp.id, v }))), t("hookui.labelColourAbout")));
-    pane.append(labelled(fieldName(t("hookui.valueColour"), "value_color"), pickRow(cat.colors, val("value_color", null), (v) => stage("value_color", v, t("hookui.colourChange", { id: comp.id, v }))), t("hookui.valueColourAbout")));
-    if (comp.bounded)
-      pane.append(labelled(fieldName(t("hookui.ramp"), "ramp"), pickRow(Object.keys(cat.ramps), val("ramp", null), (v) => stage("ramp", v, t("hookui.rampChange", { id: comp.id, v }))), t("hookui.rampAbout")));
-    // R3, AT THE CONTROL, at the moment the choice is made - never in a
-    // validation summary later.
-    if (comp.states) pane.append(el("div", "note note-warn", t("hookui.stateColourWarn", { s: comp.states.join(", ") })));
-
-    // "Weight", never "font size". A terminal owns its font, and a picker that
-    // did nothing would be worse than not offering one.
-    pane.append(labelled(fieldName(t("hookui.emphasis"), "emphasis"), pickRow((cat.emphasis || []).filter((e) => !(cat.refused_emphasis || []).includes(e)), (val("emphasis", []) || [])[0], (v) => stage("emphasis", v, t("hookui.emphasisChange", { id: comp.id, v }))), t("hookui.emphasisAbout")));
-    pane.append(el("div", "note", t("hookui.fontWhy")));
-
-    if (comp.bounded || (comp.defaults && comp.defaults.format)) {
-      pane.append(sectionHead(t("hookui.numbers"), t("hookui.numbersAbout")));
-      pane.append(labelled(fieldName(t("hookui.format"), "format"), gated("format", pickRow(cat.formats, val("format", null), (v) => stage("format", v, t("hookui.formatChange", { id: comp.id, v })))), t("hookui.formatAbout")));
-      pane.append(labelled(fieldName(t("hookui.compact"), "compact"), gated("compact", pickRow(cat.compact, val("compact", null), (v) => stage("compact", v, t("hookui.compactChange", { id: comp.id, v })))), t("hookui.compactAbout")));
-      // `min_width` is not cosmetic: a value that changes width shifts every part
-      // to its right on the keystroke it happens, and that jitter is the main
-      // reason people turn a status line off again.
-      pane.append(labelled(fieldName(t("hookui.minWidth"), "min_width"), gated("min_width", numField(val("min_width", null), 0, 8, (v) => stage("min_width", v, t("hookui.minWidthChange", { id: comp.id, v })))), t("hookui.minWidthWarn")));
-      pane.append(labelled(fieldName(t("hookui.precision"), "precision"), gated("precision", numField(val("precision", null), 0, 2, (v) => stage("precision", v, t("hookui.precisionChange", { id: comp.id, v })))), t("hookui.precisionAbout")));
-    }
-
-    const rend = cat.renderers[curRender];
-    if (rend && rend.width)
-      pane.append(labelled(fieldName(t("hookui.width"), "width"), numField(val("width", null), rend.width[0], rend.width[1], (v) => stage("width", v, t("hookui.widthChange", { id: comp.id, v }))), t("hookui.widthWhy")));
-
-    // A CHECKLIST, not an enum: "hide when zero" and "hide when there is no run"
-    // are independent facts and a user wants both at once.
-    pane.append(sectionHead(t("hookui.whenToShow"), t("hookui.whenToShowAbout")));
-    const checks = el("div", "hk-checks");
-    const active = new Set(val("hide_when", []) || []);
-    for (const h of cat.hide_when) {
-      if (h.id === "never") continue;
-      const lab = el("label", "hk-check");
-      const box = el("input");
-      box.type = "checkbox";
-      box.checked = active.has(h.id);
-      box.addEventListener("change", () => {
-        const next = new Set(active);
-        if (box.checked) next.add(h.id);
-        else next.delete(h.id);
-        const v = next.size ? [...next].join(",") : "never";
-        stage("hide_when", v, t("hookui.hideChange", { id: comp.id, v }));
-      });
-      lab.append(box, el("span", null, h.id), el("span", "note", h.says));
-      checks.append(lab);
-    }
-    pane.append(checks);
-
-    // RESPONSIVE WIDTH: the range of terminal widths in which this part is worth
-    // its cells. Strictly better than truncating the right of an overflowing
-    // line, because the USER chooses what survives a narrow terminal.
-    pane.append(sectionHead(t("hookui.narrow"), t("hookui.narrowAbout")));
-    pane.append(labelled(fieldName(t("hookui.minCols"), "min_cols"), numField(val("min_cols", null), 0, 200, (v) => stage("min_cols", v, t("hookui.minColsChange", { id: comp.id, v }))), t("hookui.minColsAbout")));
-    pane.append(labelled(fieldName(t("hookui.priority"), "priority"), numField(val("priority", null), 1, 5, (v) => stage("priority", v, t("hookui.priorityChange", { id: comp.id, v }))), t("hookui.priorityWhy")));
-  }
-
-  paint(null);
-
-  const close = modal({
-    title: comp.id,
-    body: pane,
-    actions: [
-      // WHERE EACH VALUE CAME FROM. It is how a user finds their own overrides
-      // again after a colour set change - `orc lane config`'s problem, at part
-      // scale. It reads the SAVED item, so it is offered only for one.
-      ...(item.src
-        ? [{
-            label: t("hookui.explain"),
-            cls: "btn-ghost",
-            onClick: async () => {
-              const r = await read("/api/statusline/explain?board=" + HK_BOARD + "&at=" + line.line + ":" + (line.items.indexOf(item) + 1));
-              if (!r.data || !r.data.ok) return toast(t("hookui.explainFailed"), "bad");
-              HK_MODAL = null;
-              modal({
-                title: comp.id,
-                body: kvList(r.data.resolved.map((x) => [x.field, x.source])),
-                actions: [{ label: t("common.close"), cls: "btn-ghost", onClick: (c) => c() }],
-              });
-            },
-          }]
-        : []),
-      {
-        label: t("common.close"),
-        cls: "btn-ghost",
-        onClick: (c) => {
-          HK_MODAL = null;
-          c();
-        },
-      },
-    ],
-  });
-  // Registered LAST, so a repaint that fires during construction cannot reach a
-  // half-built pane.
-  HK_MODAL = { repaint: paint };
-}
-
-// `partPicker` reads a board only to answer "can a part go on that line". A
-// SWAP changes nothing about where the part sits, so it is handed a board with
-// no lines and never asks.
-const HK_NO_LINES = { lines: [], max: 0 };
-
-// Where the caret is, as a path of child indexes from the editor's own root,
-// plus the selection inside the field. Not an id: a control here has no
-// identity of its own, and inventing one for every field would be a second
-// idea of what the editor holds.
-function focusPath(root) {
-  const a = document.activeElement;
-  if (!a || !root.contains(a)) return null;
-  const path = [];
-  let n = a;
-  while (n && n !== root) {
-    path.unshift([...n.parentNode.childNodes].indexOf(n));
-    n = n.parentNode;
-  }
-  const sel = "selectionStart" in a && a.selectionStart !== null ? [a.selectionStart, a.selectionEnd] : null;
-  return { path, sel };
-}
-
-function restoreFocus(root, keep) {
-  if (!keep) return;
-  let n = root;
-  for (const i of keep.path) {
-    n = n && n.childNodes[i];
-    if (!n) return;
-  }
-  if (!n.focus) return;
-  n.focus();
-  if (keep.sel && "setSelectionRange" in n) {
-    try {
-      n.setSelectionRange(keep.sel[0], keep.sel[1]);
-    } catch (_) {}
-  }
-}
-
-function sectionHead(name, about) {
-  const w = el("div", "hk-section-wrap");
-  w.append(el("div", "hk-section", name));
-  if (about) w.append(el("div", "note", about));
-  return w;
-}
-
-function numField(value, lo, hi, onSet) {
-  const i = el("input", "hk-input hk-num");
-  i.type = "number";
-  i.min = String(lo);
-  i.max = String(hi);
-  if (value !== null && value !== undefined) i.value = String(value);
-  i.addEventListener("change", () => onSet(i.value));
-  return i;
-}
-
-function textField(value, onSet) {
-  const i = el("input", "hk-input");
-  i.type = "text";
-  i.value = value == null ? "" : String(value);
-  i.addEventListener("change", () => onSet(i.value));
-  return i;
-}
-
-// A control, its name, and — because a noun on its own is not an explanation —
-// the sentence that says what it does. That sentence is most of this release:
-// a settings form whose labels are nouns is a form people close.
-function labelled(name, node, about) {
-  const row = el("div", "hk-field");
-  const left = el("div", "hk-field-left");
-  left.append(el("span", "hk-field-name", name));
-  if (about) left.append(el("span", "note", about));
-  row.append(left);
-  row.append(node);
-  return row;
-}
-
-// A row of options. The VALUES are the CLI's and are printed verbatim — a
-// translated renderer name is a renderer that does not exist.
-function pickRow(options, current, onPick) {
-  const row = el("div", "hk-picks");
-  for (const o of options || []) {
-    const b = el("button", "hk-pick" + (String(current) === String(o) ? " hk-pick-on" : ""), String(o));
-    b.type = "button";
-    b.addEventListener("click", () => onPick(o));
-    row.append(b);
-  }
-  return row;
-}
-
-/* ══ the reference list ═══════════════════════════════════════════════════ */
-// WHAT EACH PART SHOWS, and nothing else. It used to carry three `+ line N`
-// buttons per row, which put the act of building the bar a long way from the
-// bar — and computed a position against a layout that was no longer the one
-// being staged. Adding happens on the board now; this is a reference.
-function referenceCard(cat) {
-  const right = el("div", "row-actions");
-  const search = el("input", "hk-input hk-palette-search");
-  search.type = "search";
-  search.value = HK_SEARCH;
-  search.placeholder = t("hookui.searchPlaceholder");
-  right.append(search);
-
-  const c = card(t("hookui.reference"), right);
-  c.append(el("div", "note", t("hookui.referenceAbout")));
-  const body = el("div", "stack");
-  c.append(body);
-
-  function paint() {
-    body.replaceChildren();
-    const q = HK_SEARCH.trim().toLowerCase();
-    const hits = q ? (cat.components || []).filter((x) => matches(x, q)) : null;
-    if (hits) {
-      body.append(el("div", "note", tn(hits.length, "hookui.matches")));
-      for (const comp of hits) body.append(referenceRow(comp));
-      if (!hits.length) body.append(empty(t("hookui.noMatch")));
-      return;
-    }
-    for (const [g, name] of Object.entries(cat.groups)) {
-      const rows = (cat.components || []).filter((x) => x.group === g);
-      if (!rows.length) continue;
-      const inner = el("div");
-      for (const comp of rows) inner.append(referenceRow(comp));
-      body.append(collapsible({
-        title: name,
-        count: String(rows.length),
-        content: inner,
-        collapsed: HK_GROUP !== g,
-      }));
-    }
-  }
-  search.addEventListener("input", () => {
-    HK_SEARCH = search.value;
-    paint();
-  });
-  paint();
-  return c;
-}
-
-function referenceRow(comp) {
-  const row = el("div", "hk-prow");
-  const top = el("div", "hk-prow-head");
-  top.append(el("span", "hk-prow-id", comp.id));
-  top.append(chip(comp.cost, comp.cost === "refused" ? "bad" : null));
-  row.append(top);
-  if (comp.summary) row.append(el("div", "hk-prow-desc", comp.summary));
-  const sample = comp.previews && comp.previews[(comp.defaults && comp.defaults.render) || comp.renderers[0]];
-  if (sample) row.append(ansiBlock(sample, "hk-preview hk-preview-chip"));
-  // A REFUSED part keeps its slot and carries the measurement that refused it:
-  // "we decided against this" and "we forgot" must not look the same.
-  if (comp.cost === "refused") row.append(el("div", "note note-warn hk-prow-why", comp.refused_reason));
-  return row;
-}
-
-/* ══ presets ══════════════════════════════════════════════════════════════ */
-// Applying one REPLACES the layout, so it is always confirmed and the loss is
-// NAMED — the `orc diy init --force` rule.
-function presetsCard(presets, plan) {
-  const c = card(t("hookui.presets"));
-  c.append(el("div", "note", t("hookui.presetsAbout")));
-  if (!presets || !presets.presets) return c;
-  for (const p of presets.presets) {
-    const row = el("div", "hk-preset");
-    const h = el("div", "hk-preset-head");
-    h.append(el("span", "hk-prow-id", p.name));
-    if (p.active) h.append(chip(t("hookui.active"), "ok"));
-    row.append(h);
-    row.append(el("div", "note", p.summary));
-    if (p.preview) row.append(ansiBlock(p.preview, "hk-preview hk-preview-sm"));
-    // The ACTIVE row keeps its slot and drops its button.
-    if (!p.active) {
-      const b = el("button", "btn btn-xs btn-ghost", t("hookui.apply"));
-      b.type = "button";
-      // A preset is written STRAIGHT AWAY, so it cannot run while ops are
-      // staged: those ops carry positions computed against a layout the preset
-      // is about to replace.
-      if (plan.dirty) {
-        b.disabled = true;
-        b.title = t("hookui.applyFirst");
-      } else {
-        b.addEventListener("click", () => confirmApply(p.name));
-      }
-      row.append(b);
-    }
-    c.append(row);
-  }
-  return c;
-}
-
-function confirmApply(name) {
-  modal({
-    title: t("hookui.applyTitle", { name }),
-    body: el("div", "note", t("hookui.applyWarn")),
-    actions: [
-      { label: t("common.cancel"), cls: "btn-ghost", onClick: (c) => c() },
-      {
-        label: t("hookui.apply"),
-        cls: "btn-primary",
-        onClick: async (c) => {
-          c();
-          const r = await post("/api/statusline/apply", bd({ name }));
-          if (!r.ok) toast(t("hookui.applyFailed"), "bad", (r.output || "").trim());
-          HK_OPS = [];
-          HK_COMPARE_DATA = null;
-          hkReload();
-        },
-      },
-    ],
-  });
-}
-
-function confirmReset() {
-  modal({
-    title: t("hookui.resetTitle"),
-    body: el("div", "note", t("hookui.resetWarn")),
-    actions: [
-      { label: t("common.cancel"), cls: "btn-ghost", onClick: (c) => c() },
-      {
-        label: t("hookui.resetLayout"),
-        cls: "btn-primary",
-        onClick: async (c) => {
-          c();
-          await post("/api/statusline/reset", bd({}));
-          HK_OPS = [];
-          HK_COMPARE_DATA = null;
-          hkReload();
-        },
-      },
-    ],
-  });
-}
-
-/* ══ more ═════════════════════════════════════════════════════════════════ */
-// THE COLOUR SET IS A DOCUMENT SETTING, and it now goes to the command that
-// writes document settings. It used to be routed through `statusline line 1
-// --theme`, which set ONE line's override while the picker read the document's
-// value back — so the button never moved and only a third of the bar changed.
-// One command per scope, and the panel calls the one that matches the control.
-function advancedCard(cat, plan) {
-  const c = card(t("hookui.advanced"));
-
-  const themes = el("div", "hk-theme-list");
-  for (const name of Object.keys(cat.themes || {})) {
-    const b = el("button", "hk-theme" + (plan.doc.theme === name ? " hk-theme-on" : ""));
-    b.type = "button";
-    b.append(el("span", "hk-theme-name", name));
-    // WHY somebody would pick it — the CLI's sentence, not one written here.
-    const about = (cat.themes_about || {})[name];
-    if (about) b.append(el("span", "note", about));
-    b.addEventListener("click", () => hkOp({ op: "doc", field: "theme", value: name, label: t("hookui.themeChange", { v: name }) }));
-    themes.append(b);
-  }
-  c.append(labelled(t("hookui.theme"), themes, t("hookui.themeAbout")));
-  c.append(el("div", "note", t("hookui.themeOverride")));
-
-  c.append(labelled(t("hookui.glyphs"),
-    pickRow(cat.glyph_sets, plan.doc.glyphs, (v) => hkOp({ op: "doc", field: "glyphs", value: v, label: t("hookui.glyphsDocChange", { v }) })),
-    t("hookui.glyphsDocAbout")));
-
-  const re = el("button", "btn btn-sm btn-ghost", t("hookui.recompile"));
-  re.type = "button";
-  re.addEventListener("click", async () => {
-    const r = await post("/api/statusline/compile", bd({}));
-    toast(r.ok ? t("hookui.recompiled") : t("hookui.recompileFailed"), r.ok ? "ok" : "bad");
-    hkReload();
-  });
-  const acts = el("div", "row-actions");
-  acts.append(re);
-  c.append(acts);
-  c.append(el("div", "note", t("hookui.compileNote")));
-  return c;
-}
+"use strict";
+/* panels/hookui.js — orc ui client
+   The CLI Hook Interface: compose ORC's status line.
+
+   THE ONE DESIGN DECISION THIS PANEL IS BUILT AROUND: you are composing
+   something you cannot see while you compose it. The bar lives in a terminal at
+   the bottom of a different window. Every other ORC panel shows you STATE; this
+   one has to show you a RESULT — continuously, accurately, and in the forms it
+   can take. If the preview is not what the hook will print, this panel is worse
+   than editing JSON, because it is confidently wrong.
+
+   It is not, and that is structural rather than careful: `orc statusline
+   preview` renders through the SAME engine the hook does
+   (templates/hooks/orc-statusline-render.js), so the two cannot diverge.
+
+   THE PANEL DERIVES NOTHING. Not a component id, not a renderer name, not a
+   glyph set, not a ramp, not a colour token, not a separator, not a state word,
+   not the board's own rules. All of it arrives from `statusline components
+   --json`, and a test greps this file and both string tables for those
+   literals. (The Flow-stepper rule, on a fourth surface.)
+
+   v1.4.1 — THE BOARD IS THE ONLY PLACE ANYTHING IS APPLIED, AND EVERY WRITE'S
+   POSITION IS COMPUTED WHEN THAT WRITE RUNS. The list of parts used to carry
+   three `+ line N` buttons per row, so the act of building the bar lived a long
+   way from the bar — and each of those buttons computed a position from the
+   SAVED layout rather than from the layout being staged. Three staged adds all
+   landed on position 1, and the CLI read the second and third as EDITS of the
+   first: that is why adding three parts produced one. Structural edits are now
+   semantic ops against stable refs, replayed by `hkPlan` in order, and every
+   position is derived at the moment that op will execute. The list below the
+   board is a REFERENCE now: it says what each part shows, and it applies
+   nothing. */
+
+/* -------------------------------------------------------------- HOOK UI */
+
+// The preview widths the panel offers. Not a fact about the layout — a fact
+// about terminals people actually use — so it lives here rather than coming
+// from the CLI. They are COLUMN COUNTS: how many character cells wide the
+// terminal is. The card says so out loud, because three bare numbers over a
+// picture is a control nobody can guess the meaning of.
+const HK_WIDTHS = [80, 120, 160];
+let HK_WIDTH = 120;
+let HK_STATE = "healthy";
+// The reference list's search box and its open group, both surviving a
+// re-render so a paint does not close a list the user just opened.
+let HK_SEARCH = "";
+let HK_GROUP = null;
+// WHICH BOARD. The main status line, or the row Claude Code draws per subagent
+// in the agent panel. The panel does not know what boards exist — `components
+// --json` carries the list — it only remembers which one you are looking at, so
+// a re-render does not put you back on the other one.
+let HK_BOARD = "status";
+
+// THE STAGED OPS, in the order they were made. NOT a map of finished HTTP
+// bodies: a body carries a POSITION, and a position computed when the op was
+// staged is wrong the moment an earlier op shifts the line under it. These are
+// semantic ops against stable refs; `hkPlan` turns them into writes — and
+// recomputes every position — each time the board paints.
+let HK_OPS = [];
+// The chip being dragged. Transient: cleared on every drop and every paint.
+let HK_DRAG = null;
+
+// DRAG IS OFF ON A NARROW SCREEN, and off for real rather than merely restyled:
+// a 40-pixel drop gap on a phone is not a target, so the three buttons on every
+// chip are the path there. The query matches 06-responsive.css's own breakpoint
+// — a chip that still says `draggable` while its handle is hidden is a promise
+// the page cannot keep.
+function hkCanDrag() {
+  try {
+    return !window.matchMedia("(max-width: 600px)").matches;
+  } catch (_) {
+    return true;
+  }
+}
+
+// THE LAST FETCH, AND THE NODE IT IS PAINTED INTO (v1.4.2). Staging an edit
+// used to re-enter the router — which threw the panel away, refetched four
+// endpoints and rebuilt everything from a skeleton. Every click "refreshed the
+// page", and worse: because the picture came back looking different, a staged
+// change read as an applied one. Nothing is fetched now until Apply, the switch
+// or a preset; a staged op repaints from THIS cache.
+let HK_DATA = null;
+// The node this panel paints into. `section` owns the skeleton and the error
+// box; after the first load, everything goes through here.
+let HK_SLOT = null;
+// The open part editor, if there is one, so a staged edit updates the control
+// the user is looking at instead of leaving it showing the old value.
+let HK_MODAL = null;
+// The comparison drawer's open state and its answers, both surviving a repaint:
+// it costs one render per colour set and per symbol set, so it is fetched once
+// and only when somebody opens it.
+let HK_COMPARE = false;
+let HK_COMPARE_DATA = null;
+// Whether this panel has drawn once. The FIRST paint animates in; every one
+// after it is instant, because nothing arrived — the same cards are still there
+// with one value different.
+let HK_PAINTED = false;
+// v2.0.4 — THE STAGED PREVIEW. The staged writes, replayed by the server into a
+// throwaway copy of the layout and drawn by the hook's own engine, so the
+// picture shows the unsaved changes BEFORE Apply. `HK_STAGE_SEQ` drops a stale
+// answer: only the answer to the LAST request is ever painted.
+let HK_STAGED = null;
+let HK_STAGE_SEQ = 0;
+let HK_STAGE_TIMER = null;
+const HK_STAGE_WAIT_MS = 400;
+// The lines whose separator box is open ("Custom…" was picked), kept across a
+// repaint so the box does not close under the user.
+const HK_SEP_OPEN = new Set();
+// v2.0.4 — THE ANIMATED PREVIEW. When `show.animated` is set, the preview asks
+// the CLI for several frames and the card steps through them for at most 20
+// seconds after a paint, then rests on frame 0. One timer only: every paint
+// and every navigation stops it first. Never under prefers-reduced-motion.
+const HK_ANIM_FRAMES = 12;
+const HK_ANIM_FRAME_MS = 1000;
+const HK_ANIM_MAX_MS = 20000;
+let HK_ANIM_TIMER = null;
+
+PANELS.hookui = function (host) {
+  head(host, t("hookui.title"), t("hookui.sub"));
+  HK_DATA = null;
+  HK_SLOT = null;
+  HK_MODAL = null;
+  HK_PAINTED = false;
+  hkAnimStop();
+  hkStageClear();
+  section(host, hkLoad, (data) => {
+    HK_DATA = data;
+    // `stack` is what spaces the cards; `section` gives it to its own slot, and
+    // this node lives inside that slot, so it needs its own.
+    const slot = el("div", "stack");
+    HK_SLOT = slot;
+    hkPaint();
+    return slot;
+  });
+};
+
+function hkPreviewUrl(animated) {
+  const base = "/api/statusline/preview?board=" + HK_BOARD + "&width=" + HK_WIDTH + "&state=" + HK_STATE;
+  return animated ? base + "&frames=" + HK_ANIM_FRAMES + "&frame_ms=" + HK_ANIM_FRAME_MS : base;
+}
+
+// Whether the saved layout moves. The CLI says so in `show.animated`.
+function hkAnimated() {
+  return !!(HK_DATA && HK_DATA.show && HK_DATA.show.animated);
+}
+
+function hkReducedMotion() {
+  try {
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  } catch (_) {
+    return false;
+  }
+}
+
+function hkAnimStop() {
+  clearInterval(HK_ANIM_TIMER);
+  HK_ANIM_TIMER = null;
+}
+
+// Step the preview node through `frames`, then rest on frame 0. The node is
+// replaced through the same ansiBlock the still picture uses.
+function hkAnimStart(node, frames) {
+  hkAnimStop();
+  if (!node || !Array.isArray(frames) || frames.length < 2 || hkReducedMotion()) return;
+  const started = Date.now();
+  let i = 0;
+  let cur = node;
+  const cls = node.className;
+  HK_ANIM_TIMER = setInterval(() => {
+    const done = Date.now() - started >= HK_ANIM_MAX_MS;
+    if (!cur.isConnected) return hkAnimStop();
+    i = done ? 0 : (i + 1) % frames.length;
+    const next = ansiBlock(String(frames[i] || ""), cls);
+    cur.replaceWith(next);
+    cur = next;
+    if (done) hkAnimStop();
+  }, HK_ANIM_FRAME_MS);
+}
+
+function hkLoad() {
+  const animated = hkAnimated();
+  return Promise.all([
+    read("/api/statusline/show?board=" + HK_BOARD).then((r) => r.data),
+    read("/api/statusline/components?board=" + HK_BOARD).then((r) => r.data),
+    read("/api/statusline/presets?board=" + HK_BOARD).then((r) => r.data),
+    read(hkPreviewUrl(animated)).then((r) => r.data),
+  ]).then(async ([show, cat, presets, prev]) => {
+    // The layout became animated since the last load: ask again for frames.
+    if (show && show.animated && !animated) {
+      try {
+        prev = (await read(hkPreviewUrl(true))).data || prev;
+      } catch (_) {}
+    }
+    return { show, cat, presets, prev };
+  });
+}
+
+// THE ONLY PAINT. No fetch, no skeleton, no router. The scroll position is
+// kept by hand: a board you are halfway down must not jump to the top because
+// you moved one chip.
+function hkPaint() {
+  if (!HK_SLOT || !HK_DATA) return;
+  hkAnimStop();
+  const y = window.scrollY;
+  // NO ENTRANCE ANIMATION ON A REPAINT. `.stack > *` fades and slides each
+  // child in on a 30ms stagger, and `.hk-chip` does the same per chip — which
+  // is right the first time the panel arrives and is exactly the "the screen
+  // blinked like it reloaded" the user reported, on every keystroke, with the
+  // network tab empty. `hk-quiet` switches those entrances off; the transitions
+  // (hover, the drop marker, the staged edge) are untouched, because they are
+  // about the pointer rather than about arriving.
+  if (HK_PAINTED) HK_SLOT.classList.add("hk-quiet");
+  HK_PAINTED = true;
+  const { show, cat, presets, prev } = HK_DATA;
+  HK_SLOT.replaceChildren();
+  if (!show || !cat) {
+    HK_SLOT.append(empty(t("hookui.noData")));
+    return;
+  }
+  // The effective board: what it WILL be once the staged ops run. Every count,
+  // every slot cap and every legality question downstream reads this and never
+  // `show.lines` directly.
+  const plan = hkPlan(show, cat);
+
+  const edits = editSet(() => bar.paint());
+  const bar = editBar(edits, {
+    onApply: async (b) => {
+      // POSITIONAL writes: after one refusal the rest would hit the wrong part.
+      await applyActions(edits, b, { stopOnFail: true, stoppedText: (n) => t("hookui.notSent", { n }) });
+      HK_OPS = [];
+      hkStageClear();
+      HK_COMPARE_DATA = null;
+      await hkReload();
+    },
+    onReset: () => confirmReset(),
+    onCancel: () => {
+      HK_OPS = [];
+      hkStageClear();
+      hkPaint();
+    },
+    resetLabel: t("hookui.resetLayout"),
+  });
+  // Filled AFTER the bar exists: `editSet`'s onChange paints it, and a paint
+  // before that binding is assigned throws.
+  for (const a of plan.actions) edits.action(a.key, a.route, a.body, a.label);
+
+  HK_SLOT.append(boardTabs(cat));
+  HK_SLOT.append(gateCard(show, cat));
+  // A caution renders ABOVE the preview, never inside a tab — a caution you
+  // have to hunt for is a caution nobody reads.
+  if (show.errors.length || show.warnings.length) HK_SLOT.append(cautionCard(show));
+  HK_SLOT.append(previewCard(prev, plan, cat));
+  HK_SLOT.append(boardCard(cat, plan));
+  HK_SLOT.append(referenceCard(cat));
+  HK_SLOT.append(presetsCard(presets, plan));
+  HK_SLOT.append(advancedCard(cat, plan));
+  HK_SLOT.append(bar);
+
+  // The open editor follows the staged state. A modal the page has stopped
+  // showing is not repainted — it is forgotten.
+  if (HK_MODAL) {
+    const host = document.getElementById("modal-host");
+    if (host && host.hidden) HK_MODAL = null;
+    else HK_MODAL.repaint(plan);
+  }
+  window.scrollTo(0, y);
+}
+
+// A REFETCH. Used where the disk actually moved: Apply, a preset, the reset,
+// the switch, a board change and a recompile. Never on a staged edit.
+async function hkReload() {
+  try {
+    HK_DATA = await hkLoad();
+  } catch (_) {
+    /* the last good data stays on screen — a failed poll is not a blank page */
+  }
+  hkPaint();
+}
+
+// The preview is the ONLY thing a width or fixture change moves, so it is the
+// only thing refetched. Four endpoints for a picture is three too many.
+async function hkPreviewReload() {
+  try {
+    const r = await read(hkPreviewUrl(hkAnimated()));
+    if (HK_DATA) HK_DATA.prev = r.data;
+  } catch (_) {}
+  hkPaint();
+  // The staged picture was drawn at the old width or state; draw it again.
+  hkStageSchedule();
+}
+
+/* ══ the staged preview ═══════════════════════════════════════════════════
+   After a staged change, and after a short pause, the server replays the
+   staged writes into a TEMP copy of the layout and previews that copy. The
+   real project is never written. A burst of changes is ONE request, and an
+   answer that arrives after a newer request was sent is dropped. */
+function hkStageSchedule() {
+  clearTimeout(HK_STAGE_TIMER);
+  if (!HK_OPS.length || !HK_DATA) {
+    HK_STAGED = null;
+    return;
+  }
+  HK_STAGE_TIMER = setTimeout(hkStageSend, HK_STAGE_WAIT_MS);
+}
+
+async function hkStageSend() {
+  if (!HK_OPS.length || !HK_DATA) return;
+  const seq = ++HK_STAGE_SEQ;
+  const plan = hkPlan(HK_DATA.show, HK_DATA.cat);
+  let r = null;
+  try {
+    r = await post("/api/statusline/stage-preview", {
+      board: HK_BOARD,
+      width: HK_WIDTH,
+      state: HK_STATE,
+      ...(hkAnimated() ? { frames: HK_ANIM_FRAMES, frame_ms: HK_ANIM_FRAME_MS } : {}),
+      actions: plan.actions.map((a) => ({ route: a.route, body: a.body })),
+    });
+  } catch (e) {
+    r = { ok: false, failed: { index: -1, output: String((e && e.message) || "") } };
+  }
+  // A NEWER REQUEST WAS SENT, or the ops were cleared: this answer is stale.
+  if (seq !== HK_STAGE_SEQ || !HK_OPS.length) return;
+  if (r && r.ok && r.preview) HK_STAGED = { preview: r.preview, show: r.show || null };
+  else {
+    const f = (r && r.failed) || { index: -1, output: "" };
+    const hit = plan.actions[f.index];
+    HK_STAGED = { failed: { label: hit ? hit.label : "", output: String(f.output || "") } };
+  }
+  hkStagePaint();
+}
+
+// A value typed but not yet staged must not be wiped by the repaint this
+// answer triggers. The paint waits until that field loses focus.
+function hkStagePaint() {
+  const a = document.activeElement;
+  if (a && a.tagName === "INPUT" && a.dataset && "built" in a.dataset && a.value !== a.dataset.built) {
+    a.addEventListener("blur", () => hkPaint(), { once: true });
+    return;
+  }
+  hkPaint();
+}
+
+function hkStageClear() {
+  clearTimeout(HK_STAGE_TIMER);
+  HK_STAGE_SEQ++;
+  HK_STAGED = null;
+}
+
+// The staged `show` item at this chip's place, when the staged preview has
+// one. The replay ran the same ops in the same order, so the place matches.
+function stagedItem(item, line) {
+  if (!HK_STAGED || !HK_STAGED.show || !line) return null;
+  const l = (HK_STAGED.show.lines || []).find((x) => x.line === line.line);
+  const i = line.items.indexOf(item);
+  return l && i >= 0 && l.items ? l.items[i] || null : null;
+}
+
+// EVERY write carries the board it is about. Forgetting it on one route would
+// edit the other board's layout, which is the one mistake here that is silent.
+function bd(body) {
+  return Object.assign({ board: HK_BOARD }, body);
+}
+
+/* ══ the staged plan ══════════════════════════════════════════════════════
+   Replays every staged op onto a working copy of the saved layout and returns
+   BOTH the effective board and the ordered writes that produce it. ONE
+   function, because a second idea of where a part will land is exactly the bug
+   this replaces: the board drew one arrangement and the writes produced
+   another, silently. */
+
+// Ops are staged by REF, never by position. A ref is either an item id the CLI
+// already gave us, or `new:<n>` for something staged in this session.
+function hkOp(op) {
+  // A second edit to the same field of the same part REPLACES the first — one
+  // decision typed twice is one decision, and the pending list has to read as a
+  // list of decisions rather than a list of keystrokes.
+  if (op.op === "set") HK_OPS = HK_OPS.filter((o) => !(o.op === "set" && o.ref === op.ref && o.field === op.field));
+  if (op.op === "line") HK_OPS = HK_OPS.filter((o) => !(o.op === "line" && o.line === op.line && o.field === op.field));
+  if (op.op === "doc") HK_OPS = HK_OPS.filter((o) => !(o.op === "doc" && o.field === op.field));
+  HK_OPS.push(op);
+  // A REPAINT, NEVER A REFETCH. Nothing has been written, so nothing on disk
+  // has moved — and re-entering the router here is what made every click look
+  // like a save.
+  hkPaint();
+  hkStageSchedule();
+}
+
+function hkPlan(show, cat) {
+  const structural = new Set((cat.components || []).filter((c) => c.structural).map((c) => c.id));
+  const lines = (show.lines || []).map((l) => ({
+    line: l.line,
+    separator: l.separator,
+    align: l.align,
+    sep_color: l.sep_color,
+    prefix: l.prefix,
+    items: (l.items || []).map((it) => ({ ref: it.id, type: it.type, src: it, over: {}, isNew: false })),
+  }));
+  const actions = [];
+  const doc = { theme: show.theme, glyphs: show.glyphs };
+  const find = (ref) => {
+    for (const l of lines) {
+      const i = l.items.findIndex((x) => x.ref === ref);
+      if (i >= 0) return { l, i, it: l.items[i] };
+    }
+    return null;
+  };
+
+  HK_OPS.forEach((op, oi) => {
+    const key = "op" + (oi + 1);
+    if (op.op === "add") {
+      const l = lines[op.line - 1];
+      if (!l) return;
+      // THE POSITION IS COMPUTED HERE, not when the button was pressed. Three
+      // adds in a row get 1, 2 and 3 and append; three adds computed at stage
+      // time all got 1, and the CLI read 2 and 3 as EDITS of the first.
+      const pos = l.items.length + 1;
+      l.items.push({ ref: "new:" + oi, type: op.type, src: null, over: {}, isNew: true });
+      actions.push({ key, route: "/api/statusline/set", body: bd({ line: op.line, pos, type: op.type }), label: t("hookui.opAdd", { id: op.type, n: op.line }) });
+    } else if (op.op === "remove") {
+      const f = find(op.ref);
+      if (!f) return;
+      actions.push({ key, route: "/api/statusline/remove", body: bd({ at: f.l.line + ":" + (f.i + 1) }), label: t("hookui.opRemove", { id: f.it.type }) });
+      f.l.items.splice(f.i, 1);
+    } else if (op.op === "move") {
+      const f = find(op.ref);
+      if (!f) return;
+      const from = f.l.line + ":" + (f.i + 1);
+      f.l.items.splice(f.i, 1);
+      const dst = lines[op.toLine - 1];
+      if (!dst) return;
+      const at = Math.max(0, Math.min(op.toPos - 1, dst.items.length));
+      dst.items.splice(at, 0, f.it);
+      actions.push({ key, route: "/api/statusline/move", body: bd({ from, to: dst.line + ":" + (at + 1) }), label: t("hookui.opMove", { id: f.it.type, n: dst.line }) });
+    } else if (op.op === "clone") {
+      const f = find(op.ref);
+      if (!f) return;
+      actions.push({ key, route: "/api/statusline/clone", body: bd({ at: f.l.line + ":" + (f.i + 1) }), label: t("hookui.opClone", { id: f.it.type }) });
+      f.l.items.splice(f.i + 1, 0, { ref: "new:" + oi, type: f.it.type, src: f.it.src, over: Object.assign({}, f.it.over), isNew: true });
+    } else if (op.op === "set") {
+      const f = find(op.ref);
+      if (!f) return;
+      f.it.over[op.field] = op.value;
+      if (op.field === "type") f.it.type = op.value;
+      // A SETTING is one key of the `params` object; the route sends it as one
+      // `--param key=value`, so two settings are two ops and never collide.
+      const body = op.field.startsWith("param.")
+        ? { params: { [op.field.slice(6)]: op.value } }
+        : { [op.field]: op.value };
+      actions.push({ key, route: "/api/statusline/set", body: bd(Object.assign({ line: f.l.line, pos: f.i + 1 }, body)), label: op.label });
+    } else if (op.op === "line") {
+      // One LINE field (separator, its colour, align, prefix) per op.
+      const l = lines[op.line - 1];
+      if (!l) return;
+      l[op.field] = op.value;
+      actions.push({ key, route: "/api/statusline/line", body: bd({ line: op.line, [op.field]: op.value }), label: op.label });
+    } else if (op.op === "doc") {
+      doc[op.field] = op.value;
+      actions.push({ key, route: "/api/statusline/doc", body: bd({ [op.field]: op.value }), label: op.label });
+    }
+  });
+
+  for (const l of lines) {
+    // A spacer is not a thing the line SAYS, so it does not eat one of the
+    // five. Which ids those are is the CLI's answer, carried per component.
+    l.counted = l.items.filter((x) => !structural.has(x.type)).length;
+    l.full = l.counted >= cat.max_per_line;
+  }
+  return { lines, actions, doc, dirty: HK_OPS.length > 0, max: cat.max_per_line };
+}
+
+// The dense-prefix rule, applied to ONE line of the EFFECTIVE board — never the
+// saved one, or a part staged onto line 1 would leave line 2 still refusing.
+// The reason travels with the answer, because a disabled zone with no reason is
+// a shrug.
+function lineLegal(plan, n) {
+  if (n === 1) return { ok: true };
+  const above = plan.lines[n - 2];
+  if (above && above.items.length > 0) return { ok: true };
+  return { ok: false, why: t("hookui.fillFirst", { n: n - 1 }) };
+}
+
+// Why a part cannot go on this line RIGHT NOW; a null answer means it can. Both
+// reasons are the user's to read BEFORE the click, never after it.
+function addBlocked(plan, n) {
+  const legal = lineLegal(plan, n);
+  if (!legal.ok) return legal.why;
+  const line = plan.lines[n - 1];
+  if (!line) return t("hookui.noSuchLine");
+  if (line.full) return t("hookui.lineFull", { n: n, max: plan.max });
+  return null;
+}
+
+/* ══ the board tabs ═══════════════════════════════════════════════════════ */
+// The two boards. Named by the CLI (`boards` in the catalogue), labelled by the
+// panel — the id is data and the label is prose, which is the split everywhere
+// else in this file too.
+//
+// The keys are SPELLED OUT rather than assembled from the id, for the same
+// reason the tier labels are: a key built from a fragment is invisible to the
+// coverage check that keeps the two string tables honest.
+const HK_BOARD_LABEL = { status: "hookui.boardStatus", subagent: "hookui.boardSubagent" };
+const HK_BOARD_SUB = { status: "hookui.boardStatusSub", subagent: "hookui.boardSubagentSub" };
+function boardTabs(cat) {
+  const c = card(null);
+  const row = el("div", "row-actions hk-boards");
+  for (const b of cat.boards || ["status"]) {
+    const btn = el("button", "btn btn-sm" + (HK_BOARD === b ? " btn-primary" : " btn-ghost"),
+      t(HK_BOARD_LABEL[b] || HK_BOARD_LABEL.status));
+    btn.type = "button";
+    btn.addEventListener("click", () => {
+      if (HK_BOARD === b) return;
+      // Switching boards with ops staged would send them to a board they were
+      // never about: every op carries a board, but the POSITIONS in them were
+      // computed against this one.
+      if (HK_OPS.length) return toast(t("hookui.applyFirst"), "bad");
+      HK_BOARD = b;
+      hkStageClear();
+      HK_SEARCH = "";
+      HK_COMPARE_DATA = null;
+      hkReload();
+    });
+    row.append(btn);
+  }
+  c.append(row);
+  c.append(el("div", "note", t(HK_BOARD_SUB[HK_BOARD] || HK_BOARD_SUB.status)));
+  return c;
+}
+
+/* ══ the gate ═════════════════════════════════════════════════════════════ */
+// INVERTED from the Extra panel's. There, nothing exists until you connect;
+// here the board is LIVE WHILE OFF, because you must be able to compose before
+// you arm. What is gated is the switch, not the work.
+function gateCard(show, cat) {
+  const c = card(t("hookui.gate"));
+  const row = el("div", "row-actions");
+  row.append(chip(show.enabled ? t("hookui.on") : t("hookui.off"), show.enabled ? "ok" : null));
+  if (show.saved) row.append(chip(t("hookui.saved"), null));
+  // ON IS NOT "SHOWING". The installed hook can be a different ORC, or it
+  // fell back to the built-in lines; the CLI says which, and the fix.
+  const h = show.hook;
+  if (show.enabled && h && (!h.match || h.fallback)) {
+    row.append(chip(t("hookui.notInTerminal"), "bad"));
+    c.append(row);
+    let s = t("hookui.hookSkew", { version: h.version || "?", cli: h.cli_version || "?" });
+    if (h.fallback) s += " " + t("hookui.hookFallback", { finding: h.fallback.finding || "" });
+    c.append(el("div", "note note-warn", s));
+    if (h.fix) {
+      // Same row as the global-install banner: command, then Copy.
+      const fx = el("div", "banner-fix");
+      fx.append(el("code", "action-cmd", h.fix));
+      const cp = el("button", "btn btn-ghost btn-sm", t("common.copy"));
+      cp.type = "button";
+      cp.addEventListener("click", () => copy(h.fix, t("common.copied")));
+      fx.append(cp);
+      c.append(fx);
+    }
+  } else {
+    c.append(row);
+    c.append(el("div", "note", show.enabled ? t("hookui.gateOnNote") : t("hookui.gateOffNote")));
+  }
+
+  const b = el("button", "btn btn-sm" + (show.enabled ? " btn-ghost" : " btn-primary"),
+    show.enabled ? t("hookui.turnOff") : t("hookui.turnOn"));
+  b.type = "button";
+  // ENABLED WITH NOTHING SAVED IS NOT A STATE. The switch cannot reach `on`
+  // past a layout that does not validate, and the refusal names the violation
+  // rather than saying "invalid".
+  if (!show.enabled && !show.ok) {
+    b.disabled = true;
+    b.title = show.errors[0] || "";
+    c.append(el("div", "note note-warn", show.errors[0] || ""));
+  }
+  b.addEventListener("click", async () => {
+    // The KEY IS THE CLI'S. Naming it here would be a second idea of which
+    // switch belongs to which board.
+    const r = await post("/api/config/set", { key: cat.config_key, value: show.enabled ? "off" : "on" });
+    if (!r.ok) toast(t("hookui.switchFailed"), "bad", (r.output || "").trim());
+    hkReload();
+  });
+  const acts = el("div", "row-actions");
+  acts.append(b);
+  c.append(acts);
+  return c;
+}
+
+/* ══ cautions ═════════════════════════════════════════════════════════════ */
+// An error is a refusal; a warning is a fact the user then owns. They are drawn
+// differently and they are never merged into one count.
+function cautionCard(show) {
+  const c = card(t("hookui.cautions"));
+  for (const e of show.errors) {
+    const row = el("div", "hk-caution hk-caution-bad");
+    row.append(el("span", "hk-caution-mark", "✕"));
+    row.append(el("span", null, e));
+    c.append(row);
+  }
+  for (const w of show.warnings) {
+    const row = el("div", "hk-caution");
+    row.append(el("span", "hk-caution-mark", "⚠"));
+    row.append(el("span", null, w));
+    c.append(row);
+  }
+  return c;
+}
+
+/* == the preview ==========================================================
+   Pinned above the board and never scrolled away. `orc statusline preview
+   --json`'s output, rendered as DOM and never as HTML.
+
+   v1.4.2 - IT IS DRAWN AS A TERMINAL, because that is the claim it is making.
+   A status line in a bare grey box is a string; the same string inside a
+   window of the stated width, on a terminal ground, with a ruler that shows
+   where column 80 falls, is a picture of the thing. Nothing about the bytes
+   changed - the engine is still the hook's own - what changed is that the
+   reader can now believe it.
+
+   IT DRAWS THE SAVED LAYOUT, and while anything is staged it SAYS SO. The
+   preview renders through the hook's own engine, which reads the file - so a
+   preview of unsaved edits would need a second engine, which is the one thing
+   this design refuses. "These changes are not in the picture yet" is the honest
+   version, and it is also the answer to "I pressed Apply and nothing happened":
+   something did, and this is where it shows up.
+
+   THE HEIGHT IS THE OTHER HALF. Three strippings, four colour sets and seven
+   symbol sets is a wall of terminal, and it pushed the board - the thing the
+   user is actually working in - off the screen. All of it lives in ONE drawer
+   now, closed by default, and its rows are FETCHED ONLY WHEN IT IS OPENED:
+   eleven extra renders nobody asked to see is eleven subprocesses nobody asked
+   to pay for. */
+function previewCard(prev, plan, cat) {
+  const right = el("div", "row-actions");
+  for (const w of HK_WIDTHS) {
+    const b = el("button", "btn btn-xs" + (HK_WIDTH === w ? " btn-primary" : " btn-ghost"), tn(w, "hookui.cols"));
+    b.type = "button";
+    b.addEventListener("click", () => {
+      HK_WIDTH = w;
+      HK_COMPARE_DATA = null;
+      hkPreviewReload();
+    });
+    right.append(b);
+  }
+  const c = card(t("hookui.preview"), right);
+  c.append(el("div", "note", t("hookui.previewAbout")));
+  // v2.0.4 — THE PICTURE INCLUDES THE STAGED CHANGES once the server has
+  // replayed them into a temp copy, and it SAYS SO. A change the CLI refused is
+  // named here, with the CLI's own text, before anybody presses Apply.
+  const staged = plan.dirty && HK_STAGED && HK_STAGED.preview && HK_STAGED.preview.ok ? HK_STAGED.preview : null;
+  if (plan.dirty && HK_STAGED && HK_STAGED.failed) {
+    c.append(el("div", "note note-warn", t("hookui.stageFailed", { label: HK_STAGED.failed.label || "?" })));
+    if (HK_STAGED.failed.output) c.append(el("pre", "hk-stage-out", HK_STAGED.failed.output));
+  } else if (staged) {
+    c.append(el("div", "note hk-staged-tag", tn(plan.actions.length, "hookui.previewStagedN")));
+  } else if (plan.dirty) {
+    // THE STAGED BANNER IS AN INSTRUCTION, not a disclaimer. It says what is
+    // missing from the picture AND what to press to put it there.
+    c.append(el("div", "note note-warn", tn(plan.actions.length, "hookui.previewStaleN")));
+  }
+  if (!prev || !prev.ok) {
+    c.append(el("div", "note", t("hookui.previewUnavailable")));
+    return c;
+  }
+
+  // The fixture picker. `--fixtures` must carry one of every state INCLUDING
+  // the ugly ones - you cannot design a degraded line on a healthy session.
+  c.append(el("div", "note", t("hookui.fixturesAbout")));
+  const states = el("div", "row-actions hk-fixtures");
+  for (const [k, label] of Object.entries(prev.fixtures || {})) {
+    const b = el("button", "btn btn-xs" + (HK_STATE === k ? " btn-primary" : " btn-ghost"), label);
+    b.type = "button";
+    b.addEventListener("click", () => {
+      HK_STATE = k;
+      HK_COMPARE_DATA = null;
+      hkPreviewReload();
+    });
+    states.append(b);
+  }
+  c.append(states);
+
+  const shown = staged || prev;
+  const win = termWindow(shown.text, {
+    title: tn(HK_WIDTH, "hookui.termTitle"),
+    // The colour set and the symbol set the picture was drawn with are the
+    // CLI's answer, carried on the preview itself. Naming them here would be a
+    // second idea of what is in force.
+    tags: [shown.theme, shown.glyphs].filter(Boolean).concat(staged ? [t("hookui.stagedTag")] : []),
+    ruler: true,
+  });
+  c.append(win);
+  // v2.0.4 — the moving parts move here too, for a short while after a paint.
+  if (hkAnimated() && Array.isArray(shown.frames)) hkAnimStart(win.querySelector(".hk-preview"), shown.frames);
+
+  // WHAT EACH LINE COSTS IN CELLS, under the window it belongs to. A number in
+  // a row of chips a long way from the picture is a number nobody reads.
+  const meta = el("div", "row-actions hk-widths");
+  (shown.static_width || []).forEach((w, i) => {
+    if (!w) return;
+    meta.append(chip(tn(i + 1, "hookui.lineN") + " " + tn(w, "hookui.cells"), null));
+  });
+  if (meta.childNodes.length) c.append(meta);
+
+  c.append(compareDrawer(prev, cat));
+  return c;
+}
+
+// A TERMINAL, drawn as one. The chrome is not decoration: the title bar states
+// the width the picture was rendered at, and the ruler shows where that width
+// falls - which is the whole question a status line asks.
+function termWindow(text, { title, tags, ruler, small }) {
+  const box = el("div", "hk-term" + (small ? " hk-term-sm" : ""));
+  const bar = el("div", "hk-term-bar");
+  const dots = el("div", "hk-term-dots");
+  for (let i = 0; i < 3; i++) dots.append(el("span", "hk-term-dot"));
+  bar.append(dots);
+  if (title) bar.append(el("span", "hk-term-title", title));
+  const tagRow = el("div", "hk-term-tags");
+  for (const g of tags || []) tagRow.append(el("span", "hk-term-tag", g));
+  bar.append(tagRow);
+  box.append(bar);
+
+  const screen = el("div", "hk-term-screen");
+  if (ruler) screen.append(rulerRow(HK_WIDTH));
+  screen.append(ansiBlock(text, "hk-preview hk-preview-flat"));
+  box.append(screen);
+  return box;
+}
+
+// The column ruler. Ten-cell ticks with the count at each, in the SAME
+// monospaced grid as the line under it - so "this is 44 cells" stops being a
+// number and becomes a place on the picture.
+function rulerRow(cols) {
+  const row = el("div", "hk-ruler");
+  let out = "";
+  for (let i = 0; i < cols; i++) {
+    if (i % 10 === 0) {
+      const n = String(i);
+      out += n;
+      i += n.length - 1;
+    } else out += i % 5 === 0 ? "+" : "\u00b7";
+  }
+  row.textContent = out.slice(0, cols);
+  return row;
+}
+
+/* == the comparison drawer ================================================
+   Three strippings, every colour set and every symbol set - the same layout,
+   the same fixture, the same width, through the same engine. A colour set
+   picked from its NAME is a guess; picked from its picture it is a decision.
+
+   It is CLOSED by default and its rows are fetched on the first open, because
+   each one is a real render. */
+function compareDrawer(prev, cat) {
+  const wrap = el("div", "hk-compare");
+  const head = el("button", "hk-compare-head");
+  head.type = "button";
+  head.setAttribute("aria-expanded", String(HK_COMPARE));
+  head.append(el("span", "tier-caret", "\u25b8"));
+  head.append(el("span", "hk-compare-title", t("hookui.compare")));
+  head.append(el("span", "note", t("hookui.compareAbout")));
+  // NOT named `body`: that name is reserved for a panel's own card container,
+  // which must carry `stack`. This is a drawer's contents and spaces itself.
+  const drawer = el("div", "hk-compare-body");
+  wrap.classList.toggle("hk-compare-open", HK_COMPARE);
+  head.addEventListener("click", () => {
+    HK_COMPARE = !HK_COMPARE;
+    wrap.classList.toggle("hk-compare-open", HK_COMPARE);
+    head.setAttribute("aria-expanded", String(HK_COMPARE));
+    if (HK_COMPARE && !HK_COMPARE_DATA) loadCompare(drawer, cat, prev);
+  });
+  wrap.append(head, drawer);
+  if (HK_COMPARE) {
+    if (HK_COMPARE_DATA) paintCompare(drawer, prev);
+    else loadCompare(drawer, cat, prev);
+  }
+  return wrap;
+}
+
+async function loadCompare(body, cat, prev) {
+  body.replaceChildren(skeleton(3));
+  const themes = Object.keys(cat.themes || {});
+  const glyphs = cat.glyph_sets || [];
+  const one = (extra) => read(hkPreviewUrl() + extra).then((r) => r.data).catch(() => null);
+  try {
+    const [themeRows, glyphRows] = await Promise.all([
+      Promise.all(themes.map((n) => one("&theme=" + encodeURIComponent(n)).then((d) => [n, d]))),
+      Promise.all(glyphs.map((n) => one("&glyphs=" + encodeURIComponent(n)).then((d) => [n, d]))),
+    ]);
+    HK_COMPARE_DATA = { themes: themeRows, glyphs: glyphRows };
+  } catch (_) {
+    HK_COMPARE_DATA = { themes: [], glyphs: [] };
+  }
+  paintCompare(body, prev);
+}
+
+function paintCompare(body, prev) {
+  body.replaceChildren();
+  // THE THREE STRIPPINGS FIRST. You cannot design an ASCII fallback you cannot
+  // see, and a design whose only distinction is colour becomes ambiguous the
+  // moment NO_COLOR is set.
+  body.append(el("div", "hk-compare-group", t("hookui.degrades")));
+  for (const [key, label] of [
+    ["no_color", t("hookui.degNoColor")],
+    ["ascii", t("hookui.degAscii")],
+    ["no_motion", t("hookui.degNoMotion")],
+  ]) {
+    body.append(compareRow(label, (prev.strippings || {})[key]));
+  }
+  const d = HK_COMPARE_DATA || { themes: [], glyphs: [] };
+  if (d.themes.length) {
+    body.append(el("div", "hk-compare-group", t("hookui.compareThemes")));
+    // The NAME is the CLI's word, printed verbatim - a translated colour set is
+    // a colour set that does not exist.
+    for (const [name, row] of d.themes) body.append(compareRow(name, row && row.ok ? row.text : null));
+  }
+  if (d.glyphs.length) {
+    body.append(el("div", "hk-compare-group", t("hookui.compareGlyphs")));
+    for (const [name, row] of d.glyphs) body.append(compareRow(name, row && row.ok ? row.text : null));
+  }
+}
+
+function compareRow(label, text) {
+  const row = el("div", "hk-compare-row");
+  row.append(el("div", "hk-compare-label", label));
+  if (text == null) row.append(el("div", "note", t("hookui.previewUnavailable")));
+  else row.append(termWindow(text, { title: label, tags: [], ruler: false, small: true }));
+  return row;
+}
+
+// ANSI → DOM. Never innerHTML: this string comes from the CLI, and the rule for
+// every other rendered artefact in this panel holds here too.
+function ansiBlock(text, cls) {
+  const pre = el("pre", cls);
+  for (const line of String(text || "").split("\n")) {
+    const row = el("div", "hk-line");
+    let style = null;
+    // A minimal SGR reader: colour, background and the emphasis attributes the
+    // compiler can emit. Anything it does not recognise is DROPPED rather than
+    // printed, because a stray escape in the middle of a preview is worse than
+    // a missing colour.
+    const re = /\[([0-9;]*)m/g;
+    let last = 0;
+    let m;
+    const push = (s) => {
+      if (!s) return;
+      const span = el("span", null, s);
+      // THROUGH CSSOM, NEVER A `style` ATTRIBUTE. This page is served under
+      // `style-src 'self'`, which blocks a parsed style attribute outright —
+      // so every colour this preview drew was thrown away by the browser and
+      // the whole thing rendered grey, with the reason only in a console
+      // nobody had open. Assigning the property is not a parse and is not
+      // blocked, and weakening the policy to `unsafe-inline` for a preview is
+      // not a trade worth making.
+      if (style) for (const k of Object.keys(style)) span.style[k] = style[k];
+      row.append(span);
+    };
+    while ((m = re.exec(line))) {
+      push(line.slice(last, m.index));
+      style = sgrStyle(m[1], style);
+      last = m.index + m[0].length;
+    }
+    push(line.slice(last));
+    if (!row.childNodes.length) row.append(document.createTextNode(" "));
+    pre.append(row);
+  }
+  return pre;
+}
+
+// The 16 ANSI slots, as the browser's own colours. These are NOT ORC's colour
+// tokens — they are what a terminal would paint, approximated, because the
+// panel cannot know the user's terminal palette and says so.
+const HK_ANSI = [
+  "#000000", "#cc0000", "#4e9a06", "#c4a000", "#3465a4", "#75507b", "#06989a", "#d3d7cf",
+];
+const HK_ANSI_BRIGHT = [
+  "#555753", "#ef2929", "#8ae234", "#fce94f", "#729fcf", "#ad7fa8", "#34e2e2", "#eeeeec",
+];
+
+// An OBJECT of CSS properties rather than a declaration string, because the
+// caller assigns them one at a time through CSSOM — see `push` above.
+function sgrStyle(codes, prev) {
+  const parts = String(codes || "0").split(";").filter((x) => x !== "");
+  if (!parts.length || parts[0] === "0") return null;
+  const out = Object.assign({}, prev || {});
+  for (let i = 0; i < parts.length; i++) {
+    const n = Number(parts[i]);
+    if (n === 1) out.fontWeight = "700";
+    else if (n === 2) out.opacity = ".6";
+    else if (n === 3) out.fontStyle = "italic";
+    else if (n === 4) out.textDecoration = "underline";
+    else if (n === 9) out.textDecoration = "line-through";
+    else if (n === 7) out.filter = "invert(1)";
+    else if (n >= 30 && n <= 37) out.color = HK_ANSI[n - 30];
+    else if (n >= 90 && n <= 97) out.color = HK_ANSI_BRIGHT[n - 90];
+    else if (n >= 40 && n <= 47) out.background = HK_ANSI[n - 40];
+    else if (n === 39) out.color = "inherit";
+    else if (n === 38 && parts[i + 1] === "2") {
+      out.color = "rgb(" + parts[i + 2] + "," + parts[i + 3] + "," + parts[i + 4] + ")";
+      i += 4;
+    } else if (n === 48 && parts[i + 1] === "2") {
+      out.background = "rgb(" + parts[i + 2] + "," + parts[i + 3] + "," + parts[i + 4] + ")";
+      i += 4;
+    }
+  }
+  return out;
+}
+
+/* ══ the board ════════════════════════════════════════════════════════════ */
+// THE ILLEGAL DROP IS MADE IMPOSSIBLE rather than allowed and then complained
+// about: an illegal zone renders disabled with its reason on the zone itself. A
+// user should never be able to do the wrong thing and then be told off for it.
+//
+// The CLI still validates. The board is a convenience; it is never the
+// guarantee.
+function boardCard(cat, plan) {
+  const c = card(t("hookui.board"));
+  c.append(el("div", "note", t("hookui.boardAbout")));
+  c.append(el("div", "note", cat.dense_prefix));
+
+  for (const line of plan.lines) {
+    const legal = lineLegal(plan, line.line);
+    const wrap = el("div", "hk-line-wrap" + (legal.ok ? "" : " hk-line-blocked"));
+
+    const h = el("div", "hk-line-head");
+    const title = el("div", "hk-line-title");
+    title.append(el("span", "hk-line-name", tn(line.line, "hookui.lineN")));
+    title.append(el("span", "hk-line-count" + (line.full ? " hk-full" : ""), tn(line.counted, "hookui.slotsUsed", { max: plan.max })));
+    h.append(title);
+    h.append(separatorPicker(cat, line));
+    wrap.append(h);
+
+    const zone = el("div", "hk-zone");
+    zone.setAttribute("role", "list");
+    for (const item of line.items) zone.append(chipEl(item, line, plan, cat));
+
+    if (!legal.ok) {
+      const blocked = el("div", "hk-blocked");
+      blocked.append(el("span", "hk-caution-mark", "✕"));
+      blocked.append(el("span", null, legal.why));
+      zone.append(blocked);
+    }
+    // THE ADD BUTTON ALWAYS RENDERS, and carries its own refusal. A control
+    // that vanishes when it cannot be used teaches nobody why — and the two
+    // refusals are DIFFERENT facts (nothing above it yet · this line is full),
+    // so they are two sentences and never one "invalid".
+    const b = el("button", "hk-add", t("hookui.add"));
+    b.type = "button";
+    if (!legal.ok) {
+      b.disabled = true;
+      b.title = legal.why;
+    } else if (line.full) {
+      b.disabled = true;
+      b.title = t("hookui.lineFull", { n: line.line, max: plan.max });
+    } else {
+      b.addEventListener("click", () => partPicker(cat, plan, line.line, null));
+    }
+    zone.append(b);
+    if (b.disabled && legal.ok) zone.append(el("div", "note note-warn hk-zone-why", b.title));
+    dropTarget(zone, line, plan);
+    wrap.append(zone);
+    c.append(wrap);
+  }
+  c.append(el("div", "note", t("hookui.dragHint")));
+  return c;
+}
+
+// THE SEPARATOR IS A DROPDOWN, and its options are the CLI's. A free-text box
+// asked a person to invent a rhythm and then to type a character that may not
+// be on their keyboard — so the text box is the LAST entry, "Custom…", and it
+// opens only when asked for. A value the layout already carries that is not in
+// the set opens it, so the state stays visible.
+//
+// v2.0.4 — the line head also carries the separator's colour, the line's
+// alignment and its prefix. Every option list is the CLI's; each is one `line`
+// op, so two line fields never overwrite each other in the pending list.
+const HK_SEP_CUSTOM = "\u0000custom";
+function separatorPicker(cat, line) {
+  const box = el("div", "hk-line-opts-wrap");
+  const wrap = el("label", "hk-line-opts");
+  wrap.append(el("span", "note", t("hookui.separator")));
+  const sel = el("select", "hk-select");
+  const known = cat.separators || [];
+  const lineOp = (field, value, label) => hkOp({ op: "line", line: line.line, field, value, label });
+  const custom = HK_SEP_OPEN.has(line.line) || !known.some((s) => s.value === line.separator);
+  for (const s of known) {
+    // The NAME is the CLI's word; the sample is the literal string, shown
+    // between two marks so a run of spaces is visible at all.
+    const o = el("option", null, s.name + "   ‹" + s.value + "›");
+    o.value = s.value;
+    if (!custom && s.value === line.separator) o.selected = true;
+    sel.append(o);
+  }
+  const co = el("option", null, t("hookui.sepCustomPick"));
+  co.value = HK_SEP_CUSTOM;
+  if (custom) co.selected = true;
+  sel.append(co);
+  sel.addEventListener("change", () => {
+    if (sel.value === HK_SEP_CUSTOM) {
+      HK_SEP_OPEN.add(line.line);
+      return hkPaint();
+    }
+    HK_SEP_OPEN.delete(line.line);
+    const hit = known.find((s) => s.value === sel.value);
+    lineOp("separator", sel.value, t("hookui.opSep", { n: line.line, s: hit ? hit.name : sel.value }));
+  });
+  wrap.append(sel);
+  box.append(wrap);
+  if (custom) {
+    const txt = textField(line.separator, (v) => lineOp("separator", v, t("hookui.opSep", { n: line.line, s: JSON.stringify(v) })), true);
+    txt.classList.add("hk-short");
+    txt.setAttribute("aria-label", t("hookui.sepCustomBox"));
+    box.append(txt);
+  }
+
+  // The separator's colour: "shared" (the line's own), a named slot, or a hex
+  // value the layout already carries, which keeps its own entry.
+  const colour = el("label", "hk-line-opts");
+  colour.append(el("span", "note", t("hookui.sepColour")));
+  const cs = el("select", "hk-select");
+  const sharedOpt = el("option", null, t("hookui.shared"));
+  sharedOpt.value = "";
+  cs.append(sharedOpt);
+  const slots = (cat.colors || []).map(String);
+  if (line.sep_color && !slots.includes(String(line.sep_color))) slots.push(String(line.sep_color));
+  for (const c of slots) {
+    const o = el("option", null, c);
+    o.value = c;
+    if (String(line.sep_color) === c) o.selected = true;
+    cs.append(o);
+  }
+  cs.addEventListener("change", () => lineOp("sep_color", cs.value, t("hookui.opSepColour", { n: line.line, v: cs.value || t("hookui.shared") })));
+  colour.append(cs);
+  box.append(colour);
+
+  if ((cat.line_aligns || []).length) {
+    const al = el("div", "hk-line-opts");
+    al.append(el("span", "note", t("hookui.lineAlign")));
+    al.append(pickRow(cat.line_aligns, line.align || null,
+      (v) => lineOp("align", v, t("hookui.opLineAlign", { n: line.line, v: v || t("hookui.shared") })),
+      { label: t("hookui.shared"), value: "", on: !line.align }));
+    box.append(al);
+  }
+
+  const pre = el("label", "hk-line-opts");
+  pre.append(el("span", "note", t("hookui.linePrefix")));
+  const pt = textField(line.prefix, (v) => lineOp("prefix", v, t("hookui.opLinePrefix", { n: line.line, v })), true);
+  pt.classList.add("hk-short");
+  pre.append(pt);
+  box.append(pre);
+  return box;
+}
+
+/* ══ a chip ═══════════════════════════════════════════════════════════════ */
+// A chip shows ITS OWN RENDERED OUTPUT, not its component id — that is what the
+// user is arranging — with the id and a one-line description under it, because
+// "what is this thing" is the first question anybody asks of a bar full of
+// symbols, and the answer used to live only in a tooltip.
+function chipEl(item, line, plan, cat) {
+  const comp = (cat.components || []).find((x) => x.id === item.type);
+  const wrap = el("div", "hk-chip" + (item.isNew ? " hk-chip-new" : ""));
+  wrap.setAttribute("role", "listitem");
+  wrap.setAttribute("tabindex", "0");
+  wrap.draggable = hkCanDrag();
+  wrap.title = comp && comp.summary ? comp.summary : item.type;
+
+  const face = el("div", "hk-chip-face");
+  face.append(el("span", "hk-grip", "∷"));
+  face.append(ansiBlock(chipSample(item, comp, line), "hk-preview hk-preview-chip"));
+  wrap.append(face);
+
+  wrap.append(el("div", "hk-chip-id", item.type));
+  if (comp && comp.summary) wrap.append(el("div", "hk-chip-desc", comp.summary));
+
+  // EDIT · MOVE · REMOVE, on the chip. Each opens a modal that says what it is
+  // about to do. The drag is the shortcut, never the mechanism: pointer drag is
+  // unusable for a real fraction of people, and it is switched off entirely
+  // below the width at which a drop gap stops being a target.
+  const acts = el("div", "hk-chip-acts");
+  const mk = (label, cls, fn) => {
+    const b = el("button", "hk-act " + cls, label);
+    b.type = "button";
+    b.addEventListener("click", fn);
+    acts.append(b);
+  };
+  mk(t("hookui.edit"), "hk-act-edit", () => editModal(item, line, comp, cat));
+  mk(t("hookui.move"), "hk-act-move", () => moveModal(item, line, plan));
+  mk(t("hookui.remove"), "hk-act-remove", () => removeModal(item, comp));
+  wrap.append(acts);
+
+  // Keyboard: the settled pattern, and every drag has an equivalent here. A
+  // board only reachable by mouse is a board a lot of people cannot use.
+  wrap.addEventListener("keydown", (ev) => {
+    const pos = line.items.indexOf(item) + 1;
+    if (ev.key === "Delete" || ev.key === "Backspace") {
+      ev.preventDefault();
+      removeModal(item, comp);
+    } else if (ev.key === "e" || ev.key === "E") {
+      ev.preventDefault();
+      editModal(item, line, comp, cat);
+    } else if (ev.key === "ArrowLeft" && pos > 1) {
+      ev.preventDefault();
+      moveTo(item, line.line, pos - 1);
+    } else if (ev.key === "ArrowRight" && pos < line.items.length) {
+      ev.preventDefault();
+      moveTo(item, line.line, pos + 1);
+    } else if (ev.key === "ArrowUp" || ev.key === "ArrowDown") {
+      const target = line.line + (ev.key === "ArrowUp" ? -1 : 1);
+      if (target < 1 || target > plan.lines.length) return;
+      ev.preventDefault();
+      const why = addBlocked(plan, target);
+      // A line that cannot take it is SKIPPED and the live region says why —
+      // never a silent no-op.
+      if (why) return announce(why);
+      moveTo(item, target, 1);
+    }
+  });
+
+  wrap.addEventListener("dragstart", (ev) => {
+    HK_DRAG = { ref: item.ref, from: line.line };
+    wrap.classList.add("hk-chip-dragging");
+    try {
+      ev.dataTransfer.effectAllowed = "move";
+      ev.dataTransfer.setData("text/plain", item.ref);
+    } catch (_) {}
+  });
+  wrap.addEventListener("dragend", () => {
+    HK_DRAG = null;
+    wrap.classList.remove("hk-chip-dragging");
+    for (const n of document.querySelectorAll(".hk-drop-before, .hk-drop-after"))
+      n.classList.remove("hk-drop-before", "hk-drop-after");
+  });
+  wrap.addEventListener("dragover", (ev) => {
+    if (!HK_DRAG || HK_DRAG.ref === item.ref) return;
+    ev.preventDefault();
+    const r = wrap.getBoundingClientRect();
+    const before = ev.clientX < r.left + r.width / 2;
+    wrap.classList.toggle("hk-drop-before", before);
+    wrap.classList.toggle("hk-drop-after", !before);
+  });
+  wrap.addEventListener("dragleave", () => wrap.classList.remove("hk-drop-before", "hk-drop-after"));
+  wrap.addEventListener("drop", (ev) => {
+    if (!HK_DRAG || HK_DRAG.ref === item.ref) return;
+    ev.preventDefault();
+    ev.stopPropagation();
+    const before = wrap.classList.contains("hk-drop-before");
+    const pos = line.items.indexOf(item) + 1;
+    dropOnto(line, plan, before ? pos : pos + 1);
+  });
+  return wrap;
+}
+
+// What this chip will look like in the bar. A part staged in this session has
+// no rendered sample from the CLI yet, so it borrows its component's default —
+// which is exactly what it will render as until somebody changes its shape.
+function chipSample(item, comp, line) {
+  // v2.0.4 — the staged preview's own render of THIS place, when it has one:
+  // the real engine's answer beats the per-shape sample below.
+  const st = stagedItem(item, line);
+  if (st && st.sample) return st.sample;
+  // Nothing staged: the CLI's own render of THIS item with its saved design.
+  if (Object.keys(item.over).length === 0 && item.src && item.src.sample) return item.src.sample;
+  if (!comp) return item.type;
+  const render = item.over.render || (item.src ? item.src.render : (comp.defaults && comp.defaults.render) || comp.renderers[0]);
+  const s = comp.previews ? comp.previews[render] : null;
+  return s || item.type;
+}
+
+// A zone is a drop target across its WHOLE area, so a drop past the last chip
+// appends instead of doing nothing.
+function dropTarget(zone, line, plan) {
+  zone.addEventListener("dragover", (ev) => {
+    if (!HK_DRAG) return;
+    if (HK_DRAG.from !== line.line && addBlocked(plan, line.line)) return;
+    ev.preventDefault();
+    zone.classList.add("hk-zone-hot");
+  });
+  zone.addEventListener("dragleave", () => zone.classList.remove("hk-zone-hot"));
+  zone.addEventListener("drop", (ev) => {
+    zone.classList.remove("hk-zone-hot");
+    if (!HK_DRAG) return;
+    ev.preventDefault();
+    dropOnto(line, plan, line.items.length + 1);
+  });
+}
+
+function dropOnto(line, plan, pos) {
+  if (!HK_DRAG) return;
+  const all = plan.lines.reduce((acc, l) => acc.concat(l.items), []);
+  const moving = all.find((x) => x.ref === HK_DRAG.ref);
+  const from = HK_DRAG.from;
+  HK_DRAG = null;
+  if (!moving) return;
+  // Reordering WITHIN a line never changes how many parts it holds, so the
+  // five-slot cap and the dense-prefix rule only apply to a move that crosses
+  // lines.
+  if (from !== line.line) {
+    const why = addBlocked(plan, line.line);
+    if (why) return toast(why, "bad");
+  }
+  moveTo(moving, line.line, pos);
+}
+
+function moveTo(item, toLine, toPos) {
+  hkOp({ op: "move", ref: item.ref, toLine, toPos });
+  announce(t("hookui.opMove", { id: item.type, n: toLine }));
+}
+
+// `aria-grabbed` is deprecated and is not used. State is announced through a
+// polite live region instead — VoiceOver does not reliably read a dynamically
+// updated description, so the live region is the mechanism, not a fallback.
+function announce(msg) {
+  let region = document.getElementById("hk-live");
+  if (!region) {
+    region = el("div", "sr-only");
+    region.id = "hk-live";
+    region.setAttribute("role", "status");
+    region.setAttribute("aria-live", "polite");
+    document.body.append(region);
+  }
+  region.textContent = msg;
+}
+
+/* ══ the part picker ══════════════════════════════════════════════════════ */
+// ONE MODAL, one search box, one click. It is the only place a part is ever
+// chosen — for a new slot and for swapping an existing one — so there is
+// exactly one answer to "how do I put something on the bar".
+//
+// `replace` names the chip whose part is being swapped; absent, this is an add.
+function partPicker(cat, plan, line, replace) {
+  HK_MODAL = null;
+  let q = "";
+  // NOT named `body`: that name is reserved for a panel's own card container,
+  // which must carry `stack`. This is a modal's contents and spaces itself.
+  const pane = el("div", "hk-picker");
+
+  const searchRow = el("div", "hk-picker-search");
+  const search = el("input", "hk-input hk-picker-input");
+  search.type = "search";
+  search.placeholder = t("hookui.searchPlaceholder");
+  const count = el("span", "note");
+  searchRow.append(search, count);
+  pane.append(searchRow);
+  pane.append(el("div", "note", replace ? t("hookui.pickerReplaceAbout") : tn(line, "hookui.pickerAbout")));
+
+  const list = el("div", "hk-picker-list");
+  pane.append(list);
+
+  const closer = () => close();
+  const paint = () => {
+    list.replaceChildren();
+    const rows = (cat.components || []).filter((c) => (q ? matches(c, q) : true));
+    count.textContent = tn(rows.length, "hookui.matches");
+    if (!rows.length) {
+      list.append(empty(t("hookui.noMatch")));
+      return;
+    }
+    for (const comp of rows) list.append(pickerRow(comp, line, replace, closer));
+  };
+  search.addEventListener("input", () => {
+    q = search.value.trim().toLowerCase();
+    paint();
+  });
+  paint();
+
+  const close = modal({
+    title: replace ? t("hookui.pickerReplaceTitle") : tn(line, "hookui.pickerTitle"),
+    body: pane,
+    actions: [{ label: t("common.cancel"), cls: "btn-ghost", onClick: (c) => c() }],
+  });
+  setTimeout(() => search.focus(), 40);
+}
+
+// A row says WHAT the part is, in a sentence, next to what it will look like.
+// A REFUSED part is drawn and is NOT clickable — never a disabled button, and
+// never absent: "we decided against this" and "we forgot" must not look the
+// same, which is why the row exists at all.
+function pickerRow(comp, line, replace, close) {
+  const refused = comp.cost === "refused";
+  const row = el(refused ? "div" : "button", "hk-pick-row" + (refused ? " hk-pick-row-off" : ""));
+  if (!refused) row.type = "button";
+
+  const top = el("div", "hk-pick-top");
+  top.append(el("span", "hk-prow-id", comp.id));
+  // The cost chip is the CLI's own word. A friendlier synonym would be a state
+  // that does not exist.
+  top.append(chip(comp.cost, refused ? "bad" : null));
+  row.append(top);
+  if (comp.summary) row.append(el("div", "hk-pick-desc", comp.summary));
+  const sample = comp.previews && comp.previews[(comp.defaults && comp.defaults.render) || comp.renderers[0]];
+  if (sample) row.append(ansiBlock(sample, "hk-preview hk-preview-chip"));
+  if (refused) {
+    row.append(el("div", "note note-warn", comp.refused_reason));
+    return row;
+  }
+  row.addEventListener("click", () => {
+    if (replace) hkOp({ op: "set", ref: replace.ref, field: "type", value: comp.id, label: t("hookui.opSwap", { id: comp.id }) });
+    else hkOp({ op: "add", line, type: comp.id });
+    close();
+  });
+  return row;
+}
+
+// Fuzzy plus INITIALISM: with a catalogue this size a substring search is not
+// enough — two letters should find a two-word name, which plain substring
+// matching does not.
+function matches(comp, q) {
+  const id = comp.id.toLowerCase();
+  if (id.includes(q)) return true;
+  if ((comp.summary || "").toLowerCase().includes(q)) return true;
+  if ((comp.label || "").toLowerCase().includes(q)) return true;
+  const initials = id.split("-").map((p) => p[0]).join("");
+  if (initials.startsWith(q)) return true;
+  let i = 0;
+  for (const ch of id) if (ch === q[i]) i++;
+  return i === q.length;
+}
+
+/* ══ move ═════════════════════════════════════════════════════════════════ */
+// A modal that says what it is about to do — and on a narrow screen it is the
+// ONLY way to move a chip, because drag is off below the width at which a drop
+// gap stops being a target.
+function moveModal(item, line, plan) {
+  HK_MODAL = null;
+  const body = el("div", "stack");
+  body.append(el("div", "note", t("hookui.moveAbout", { id: item.type })));
+
+  for (const target of plan.lines) {
+    const legal = lineLegal(plan, target.line);
+    const sameLine = target.line === line.line;
+    const box = el("div", "hk-move-line");
+    box.append(el("div", "hk-line-name", tn(target.line, "hookui.lineN")));
+    // A LINE THAT CANNOT TAKE IT SAYS SO ONCE. Six identical disabled slots is
+    // the same refusal printed six times, and the reason is about the LINE
+    // rather than about any one slot on it.
+    const blocked = sameLine ? null : addBlocked(plan, target.line);
+    if (blocked) {
+      box.append(el("div", "note note-warn", blocked));
+      body.append(box);
+      continue;
+    }
+    const slots = el("div", "hk-move-slots");
+    const n = Math.max(1, target.items.length + (sameLine ? 0 : 1));
+    for (let p = 1; p <= n; p++) {
+      const b = el("button", "btn btn-xs btn-ghost", tn(p, "hookui.slotN"));
+      b.type = "button";
+      if (sameLine && p === line.items.indexOf(item) + 1) {
+        b.disabled = true;
+        b.title = t("hookui.alreadyHere");
+      } else {
+        b.addEventListener("click", () => {
+          close();
+          moveTo(item, target.line, p);
+        });
+      }
+      slots.append(b);
+    }
+    box.append(slots);
+    body.append(box);
+  }
+
+  const close = modal({
+    title: t("hookui.moveTitle"),
+    body,
+    actions: [{ label: t("common.cancel"), cls: "btn-ghost", onClick: (c) => c() }],
+  });
+}
+
+/* ══ remove ═══════════════════════════════════════════════════════════════ */
+function removeModal(item, comp) {
+  HK_MODAL = null;
+  const body = el("div", "stack");
+  body.append(el("div", "note", t("hookui.removeAbout", { id: item.type })));
+  if (comp && comp.summary) body.append(el("div", "note", comp.summary));
+  modal({
+    title: t("hookui.removeTitle"),
+    body,
+    actions: [
+      { label: t("common.cancel"), cls: "btn-ghost", onClick: (c) => c() },
+      {
+        label: t("hookui.remove"),
+        cls: "btn-primary",
+        onClick: (c) => {
+          c();
+          hkOp({ op: "remove", ref: item.ref });
+        },
+      },
+    ],
+  });
+}
+
+/* ══ the part editor ══════════════════════════════════════════════════════ */
+// A MODAL, because the board is what the user is looking at, and a drawer that
+// opened inside a chip pushed the whole board down under the thing being
+// edited.
+//
+// NO FIELD NAMES, AND EVERY CONTROL CARRIES A SENTENCE. `min_width` and
+// `hide_when` are the JSON's words; this says "Least width" and explains what
+// it does. The JSON is for the diff, the editor is for the person — and the
+// ids, renderers and state words that DO appear are the CLI's own and are never
+// translated.
+function editModal(item0, line0, comp, cat) {
+  // NOT named `body`: that name is reserved for a panel's own card container,
+  // which must carry `stack`. This is a modal's contents and spaces itself.
+  const pane = el("div", "hk-editor");
+  if (!comp) {
+    pane.append(el("div", "note", t("hookui.unknownComponent")));
+    modal({ title: item0.type, body: pane, actions: [{ label: t("common.close"), cls: "btn-ghost", onClick: (c) => c() }] });
+    return;
+  }
+
+  // THE EDITOR FOLLOWS THE STAGED STATE (v1.4.2). It used to be built once and
+  // then left standing while the panel behind it was thrown away and rebuilt,
+  // so every control it showed was the value from BEFORE the change the user
+  // had just made: you picked a colour, the swatch did not move, and the only
+  // reasonable conclusion was that the editor did not work. The part is
+  // re-found by its stable ref on every repaint, so what is on screen is always
+  // the effective value.
+  let ref = item0.ref;
+  let item = item0;
+  let line = line0;
+
+  const paint = (plan) => {
+    if (plan) {
+      let found = null;
+      for (const l of plan.lines) {
+        const hit = l.items.find((x) => x.ref === ref);
+        if (hit) {
+          found = { l, hit };
+          break;
+        }
+      }
+      // The part is gone — a staged remove, or an Apply that took it away.
+      // Closing is the only honest answer; editing something that no longer
+      // exists is worse than losing the dialog.
+      if (!found) return close();
+      item = found.hit;
+      line = found.l;
+    }
+    // THE CARET SURVIVES THE REPAINT. The editor rebuilds on every keystroke
+    // now, and a text box that loses focus after one letter is not a text box.
+    // The path is positional because the controls are the same controls in the
+    // same order across a repaint; when they are not, focus is simply not
+    // restored, which is the right failure.
+    const keep = focusPath(pane);
+    pane.replaceChildren();
+    // Same rule inside the dialog: it rebuilds on every keystroke, and a
+    // shape gallery that fades in each time you type a letter is the blink
+    // again in a smaller box.
+    pane.classList.add("hk-quiet");
+    build();
+    restoreFocus(pane, keep);
+  };
+
+  // The value in force for one field: what is staged, else what the CLI
+  // resolved, else the fallback. `show --json` now carries EVERY field, so this
+  // can finally answer for all of them — before v1.4.2 it emitted twelve of
+  // twenty-four and a control for one of the other twelve always read blank.
+  const val = (field, dflt) =>
+    field in item.over
+      ? item.over[field]
+      : item.src && item.src[field] !== undefined && item.src[field] !== null
+      ? item.src[field]
+      : dflt;
+  // Whether the USER set this one, as opposed to inheriting it from the
+  // catalogue, the colour set or the file. A control that cannot tell those
+  // apart cannot say what it is about to change.
+  const mine = (field) => field in item.over || !!(item.src && item.src.authored && field in item.src.authored);
+  // An emptied box, a "shared" pick: the write DELETES the key (inherit), so
+  // the pending list says that instead of "set to nothing".
+  const cleared = (v) => v === "" || v === null || v === cat.inherit_token;
+  const stage = (field, value, label) =>
+    hkOp({ op: "set", ref, field, value, label: cleared(value) ? t("hookui.clearChange", { id: comp.id, field }) : label });
+  // The leading "shared" option: on while the field is not the user's own.
+  const shared = (field, value) => ({ label: t("hookui.shared"), value, on: !mine(field) || cleared(val(field, null)) });
+  const own = (field) => (shared(field).on ? null : val(field, null));
+  // A field name, plus a mark when the value is the user's own.
+  const fieldName = (name, field) => (mine(field) ? name + " \u2022" : name);
+
+  // WHETHER THE CURRENT SHAPE USES THIS FIELD AT ALL. The CLI's answer, per
+  // renderer, carried on the renderer table — the panel does not know which
+  // shapes draw a label any more than it knows what a label is. Twenty-eight of
+  // the thirty-five renderers ignore `label` entirely, and before this the Name
+  // box was offered on every one of them: it took the text, the CLI wrote it to
+  // disk correctly, and nothing ever appeared on the bar.
+  //
+  // The control is DISABLED and keeps its slot with the reason on it, never
+  // hidden — "this shape cannot use it" and "we forgot to offer it" must not
+  // look the same, and a value already set has to stay visible.
+  const usesOf = (field) => {
+    const rend = cat.renderers[val("render", (comp.defaults && comp.defaults.render) || comp.renderers[0])];
+    if (!rend || !rend.uses) return true;
+    return rend.uses.includes(field);
+  };
+  // Wraps a control that this shape ignores: greyed, inert, and carrying the
+  // sentence that says which shapes DO use it.
+  const gated = (field, node, shapes) => {
+    if (usesOf(field)) return node;
+    const box = el("div", "hk-inert");
+    for (const b of node.querySelectorAll ? node.querySelectorAll("button, input, select") : []) b.disabled = true;
+    if (node.tagName === "INPUT" || node.tagName === "SELECT") node.disabled = true;
+    box.append(node);
+    box.append(el("div", "note note-warn", shapes
+      ? t("hookui.shapeIgnoresLabel", { shapes: shapes.join(", ") })
+      : t("hookui.shapeIgnores")));
+    return box;
+  };
+
+  // v2.0.4 — the small builders every new control goes through. Each option
+  // list is the CLI's (`cat.*`), each value is staged with `stage`, and a
+  // "shared" pick clears the key so the part inherits again.
+  const HEX = /^#[0-9a-fA-F]{6}$/;
+  const isHex = (v) => typeof v === "string" && HEX.test(v);
+  const change = (nameKey, v) => t("hookui.fieldChange", { id: comp.id, field: t(nameKey), v: String(v) });
+  const lim = (k) => (cat.limits || {})[k];
+  // A list the CLI stores as an array and the panel stages as "a,b".
+  const listOf = (v) => (Array.isArray(v) ? v.map(String) : v == null || v === "" ? [] : String(v).split(","));
+  // A map the CLI stores as an object and the panel stages as "k=v,k=v".
+  const mapOf = (v) => {
+    if (v && typeof v === "object" && !Array.isArray(v)) return Object.assign({}, v);
+    const out = {};
+    for (const pair of listOf(v)) {
+      const at = pair.indexOf("=");
+      if (at > 0) out[pair.slice(0, at)] = pair.slice(at + 1);
+    }
+    return out;
+  };
+  const mapText = (m) => Object.entries(m).filter(([, v]) => v !== "" && v != null).map(([k, v]) => k + "=" + v).join(",");
+  // One row of CLI options with the "shared" pick first.
+  const choice = (field, options, nameKey, aboutKey, gate, tips) => {
+    const node = pickRow(options, own(field), (v) => stage(field, v, change(nameKey, v)), shared(field, ""), tips);
+    return labelled(fieldName(t(nameKey), field), gate ? gated(field, node) : node, t(aboutKey));
+  };
+  const text = (field, nameKey, aboutKey, gate, cls) => {
+    const cur = val(field, "");
+    const node = textField(Array.isArray(cur) ? cur.join(",") : cur, (v) => stage(field, v, change(nameKey, v)));
+    if (cls) node.classList.add(cls);
+    return labelled(fieldName(t(nameKey), field), gate ? gated(field, node) : node, t(aboutKey));
+  };
+  const num = (field, lo, hi, nameKey, aboutKey, gate) => {
+    const node = numField(val(field, null), lo, hi, (v) => stage(field, v, change(nameKey, v)));
+    return labelled(fieldName(t(nameKey), field), gate ? gated(field, node) : node, t(aboutKey));
+  };
+  // EVERY COLOUR PICKER: "shared" first, then the named slots, then a hex
+  // entry — the browser's own colour picker AND a short box that takes
+  // `#rrggbb`. The hex string is what is staged; the CLI validates it.
+  const colourPick = (field, nameKey, aboutKey, gate) => {
+    const box = el("div", "hk-colour");
+    const cur = own(field);
+    box.append(pickRow(cat.colors, cur, (v) => stage(field, v, change(nameKey, v)), shared(field, cat.inherit_token)));
+    const hex = el("div", "hk-hex");
+    const pick = el("input", "hk-hex-pick");
+    pick.type = "color";
+    pick.value = isHex(cur) ? cur.toLowerCase() : "#000000";
+    pick.setAttribute("aria-label", t("hookui.hexPick"));
+    pick.addEventListener("change", () => stage(field, pick.value, change(nameKey, pick.value)));
+    const box2 = el("input", "hk-input hk-short");
+    box2.type = "text";
+    box2.placeholder = t("hookui.hexPlaceholder");
+    box2.value = isHex(cur) ? cur : "";
+    box2.dataset.built = box2.value;
+    box2.setAttribute("aria-label", t("hookui.hexBox"));
+    // Staged only once it IS a colour — "#22c" is a keystroke, not a value.
+    box2.addEventListener("input", () => {
+      const v = box2.value.trim();
+      if (isHex(v)) stage(field, v, change(nameKey, v));
+    });
+    hex.append(pick, box2);
+    box.append(hex);
+    return labelled(fieldName(t(nameKey), field), gate ? gated(field, box) : box, t(aboutKey));
+  };
+
+  function build() {
+    const live = el("div", "hk-editor-live");
+    // WHAT THIS IS, EXACTLY. `previews` is a per-renderer sample the CLI drew
+    // from its own fixture, so it shows the SHAPE this part will take - never
+    // the words or the numbers this component will carry at run time. Claiming
+    // otherwise would make the one picture in this dialog a lie.
+    live.append(el("div", "note", t("hookui.editorLive")));
+    live.append(termWindow(chipSample(item, comp, line), { title: comp.id, tags: [], ruler: false, small: true }));
+    pane.append(live);
+    if (comp.summary) pane.append(el("div", "note", comp.summary));
+    pane.append(el("div", "note", t("hookui.editorStaged")));
+
+    // Swapping the part itself, from inside the editor: "this slot, but a
+    // different thing" is a real edit and it should not need a remove and an add.
+    const swap = el("button", "btn btn-xs btn-ghost hk-swap", t("hookui.swap"));
+    swap.type = "button";
+    swap.addEventListener("click", () => {
+      close();
+      partPicker(cat, HK_NO_LINES, 0, item);
+    });
+    pane.append(swap);
+
+    // THE SHAPE PICKER IS A GALLERY, NOT A DROPDOWN. Every renderer the component
+    // declares, drawn with this component's real current value. A dropdown
+    // containing a renderer's name tells nobody anything, and this is the
+    // difference between a feature people use and a settings form they close.
+    pane.append(sectionHead(t("hookui.shape"), t("hookui.shapeAbout")));
+    const gallery = el("div", "hk-gallery");
+    const curRender = val("render", (comp.defaults && comp.defaults.render) || comp.renderers[0]);
+    for (const r of comp.renderers) {
+      const b = el("button", "hk-sample" + (curRender === r ? " hk-sample-on" : ""));
+      b.type = "button";
+      b.title = r;
+      b.append(ansiBlock(comp.previews && comp.previews[r] ? comp.previews[r] : r, "hk-preview hk-preview-chip"));
+      b.append(el("span", "hk-sample-id", r));
+      // IT NO LONGER CLOSES. Closing was how the old editor hid the fact that
+      // it could not update itself; now the gallery marks the new shape and the
+      // sample above redraws, which is what a person expects a picker to do.
+      b.addEventListener("click", () => stage("render", r, t("hookui.shapeChange", { id: comp.id, r })));
+      gallery.append(b);
+    }
+    pane.append(gallery);
+    // AT THE CONTROL, at the moment the choice is made. Which shape you pick
+    // decides whether the Name box below is live at all, so the sentence
+    // belongs here rather than in a surprise further down the dialog.
+    pane.append(el("div", "note", t("hookui.shapeDecides", { shapes: (cat.label_renderers || []).join(", ") })));
+
+    pane.append(sectionHead(t("hookui.glyphs"), t("hookui.glyphsAbout")));
+    pane.append(pickRow(cat.glyph_sets, val("glyphs", null), (v) => stage("glyphs", v, t("hookui.glyphChange", { id: comp.id, v }))));
+
+    pane.append(sectionHead(t("hookui.words"), t("hookui.wordsAbout")));
+    const label = el("input", "hk-input");
+    label.type = "text";
+    const cur = val("label", "");
+    label.value = cur == null ? "" : String(cur);
+    label.placeholder = t("hookui.labelPlaceholder");
+    // BOTH EVENTS. `change` alone fires on blur, so a name typed and then
+    // followed by a click on Close raced the close and was sometimes never
+    // staged at all. `input` stages every keystroke; `hkOp` already collapses
+    // repeated edits of one field into one decision, so the pending list still
+    // reads as a list of decisions.
+    const push = () => stage("label", label.value, t("hookui.labelChange", { id: comp.id, v: label.value }));
+    label.addEventListener("change", push);
+    label.addEventListener("input", push);
+    pane.append(labelled(fieldName(t("hookui.label"), "label"), gated("label", label, cat.label_renderers), t("hookui.labelAbout")));
+    pane.append(choice("label_pos", cat.label_positions, "hookui.labelPos", "hookui.labelPosAbout", true));
+    pane.append(choice("value_pos", cat.value_positions, "hookui.valuePos", "hookui.valuePosAbout", true));
+    // Each case button carries the CLI's own sample of what it does.
+    pane.append(labelled(fieldName(t("hookui.case"), "case"), gated("case", pickRow(cat.cases, val("case", null), (v) => stage("case", v, t("hookui.caseChange", { id: comp.id, v })), null, cat.case_samples)), t("hookui.caseAbout")));
+    pane.append(labelled(fieldName(t("hookui.before"), "prefix"), gated("prefix", textField(val("prefix", ""), (v) => stage("prefix", v, t("hookui.beforeChange", { id: comp.id, v })))), t("hookui.beforeAbout")));
+    pane.append(labelled(fieldName(t("hookui.after"), "suffix"), gated("suffix", textField(val("suffix", ""), (v) => stage("suffix", v, t("hookui.afterChange", { id: comp.id, v })))), t("hookui.afterAbout")));
+
+    // A CAPTION is a second row of text above or below the part. `{value}` and
+    // `{label}` are the CLI's tokens, listed from `caption_tokens`.
+    pane.append(sectionHead(t("hookui.caption"), t("hookui.captionAbout", { tokens: (cat.caption_tokens || []).join(" "), n: lim("caption") || "" })));
+    pane.append(text("caption", "hookui.captionText", "hookui.captionTextAbout", true));
+    pane.append(choice("caption_pos", cat.caption_positions, "hookui.captionPos", "hookui.captionPosAbout", true));
+    pane.append(choice("caption_align", cat.caption_aligns, "hookui.captionAlign", "hookui.captionAlignAbout", true));
+    pane.append(choice("caption_case", cat.cases, "hookui.captionCase", "hookui.captionCaseAbout", true, cat.case_samples));
+
+    pane.append(sectionHead(t("hookui.colour"), t("hookui.colourAbout")));
+    pane.append(colourPick("label_color", "hookui.labelColour", "hookui.labelColourAbout", false));
+    pane.append(colourPick("value_color", "hookui.valueColour", "hookui.valueColourAbout", false));
+    pane.append(colourPick("bg", "hookui.bgColour", "hookui.bgColourAbout", false));
+    pane.append(colourPick("caption_color", "hookui.captionColour", "hookui.captionColourAbout", true));
+    if (comp.bounded)
+      pane.append(labelled(fieldName(t("hookui.ramp"), "ramp"), pickRow(Object.keys(cat.ramps), val("ramp", null), (v) => stage("ramp", v, t("hookui.rampChange", { id: comp.id, v }))), t("hookui.rampAbout")));
+    // R3, AT THE CONTROL, at the moment the choice is made - never in a
+    // validation summary later.
+    if (comp.states) pane.append(el("div", "note note-warn", t("hookui.stateColourWarn", { s: comp.states.join(", ") })));
+
+    // "Weight", never "font size". A terminal owns its font, and a picker that
+    // did nothing would be worse than not offering one.
+    // v2.0.4 — the bar's own look, only when the current shape draws one.
+    const barFields = ["fill_color", "empty_color", "fill_char", "empty_char", "ramp_colors", "ramp_stops", "threshold"];
+    if (barFields.some((f) => usesOf(f))) {
+      pane.append(sectionHead(t("hookui.barLook"), t("hookui.barLookAbout")));
+      pane.append(colourPick("fill_color", "hookui.fillColour", "hookui.fillColourAbout", true));
+      pane.append(colourPick("empty_color", "hookui.emptyColour", "hookui.emptyColourAbout", true));
+      pane.append(text("fill_char", "hookui.fillChar", "hookui.charAbout", true, "hk-char"));
+      pane.append(text("empty_char", "hookui.emptyChar", "hookui.charAbout", true, "hk-char"));
+      const rc = lim("ramp_colors") || [];
+      pane.append(labelled(fieldName(t("hookui.rampColours"), "ramp_colors"), gated("ramp_colors", textField(listOf(val("ramp_colors", null)).join(","), (v) => stage("ramp_colors", v, change("hookui.rampColours", v)))), t("hookui.rampColoursAbout", { lo: rc[0] || "", hi: rc[1] || "" })));
+      pane.append(labelled(fieldName(t("hookui.rampStops"), "ramp_stops"), gated("ramp_stops", textField(listOf(val("ramp_stops", null)).join(","), (v) => stage("ramp_stops", v, change("hookui.rampStops", v)))), t("hookui.rampStopsAbout")));
+      pane.append(num("threshold", 0, 100, "hookui.threshold", "hookui.thresholdAbout", true));
+    }
+
+    // "Weight", never "font size". A terminal owns its font, and a picker that
+    // did nothing would be worse than not offering one. v2.0.4 — SEVERAL at
+    // once (bold AND underline): each button toggles one, and "shared" clears.
+    const weights = el("div", "hk-picks");
+    const on = new Set(shared("emphasis").on ? [] : listOf(val("emphasis", [])));
+    const lead = el("button", "hk-pick" + (on.size ? "" : " hk-pick-on"), t("hookui.shared"));
+    lead.type = "button";
+    lead.addEventListener("click", () => stage("emphasis", "", ""));
+    weights.append(lead);
+    for (const e of (cat.emphasis || []).filter((x) => !(cat.refused_emphasis || []).includes(x))) {
+      const b = el("button", "hk-pick" + (on.has(e) ? " hk-pick-on" : ""), String(e));
+      b.type = "button";
+      b.setAttribute("aria-pressed", String(on.has(e)));
+      b.addEventListener("click", () => {
+        const next = new Set(on);
+        if (next.has(e)) next.delete(e);
+        else next.add(e);
+        const v = [...next].join(",");
+        stage("emphasis", v, t("hookui.emphasisChange", { id: comp.id, v }));
+      });
+      weights.append(b);
+    }
+    pane.append(labelled(fieldName(t("hookui.emphasis"), "emphasis"), weights, t("hookui.emphasisAbout")));
+    pane.append(el("div", "note", t("hookui.fontWhy")));
+
+    // FRAME AND SPACING: the brackets around the part, the blank cells on each
+    // side, and how a padded value sits. Every range is the CLI's `limits`.
+    pane.append(sectionHead(t("hookui.frame"), t("hookui.frameAbout")));
+    const br = listOf(val("brackets", null));
+    const stageBr = (l, r) => stage("brackets", l === "" && r === "" ? "" : l + "," + r, change("hookui.brackets", l + " " + r));
+    let brR = null;
+    const brL = textField(br[0] || "", (v) => stageBr(v, brR.value));
+    brR = textField(br[1] || "", (v) => stageBr(brL.value, v));
+    brL.classList.add("hk-short");
+    brR.classList.add("hk-short");
+    brL.setAttribute("aria-label", t("hookui.bracketLeft"));
+    brR.setAttribute("aria-label", t("hookui.bracketRight"));
+    const brPair = el("div", "hk-pair");
+    brPair.append(brL, brR);
+    pane.append(labelled(fieldName(t("hookui.brackets"), "brackets"), gated("brackets", brPair), t("hookui.bracketsAbout", { n: lim("brackets") || "" })));
+    const pad = listOf(val("padding", null));
+    const padOf = (k, i) => (k in item.over ? item.over[k] : pad[i] !== undefined ? pad[i] : null);
+    const padPair = el("div", "hk-pair");
+    const padL = numField(padOf("pad_left", 0), 0, lim("padding"), (v) => stage("pad_left", v, change("hookui.padLeft", v)));
+    const padR = numField(padOf("pad_right", 1), 0, lim("padding"), (v) => stage("pad_right", v, change("hookui.padRight", v)));
+    padL.setAttribute("aria-label", t("hookui.padLeft"));
+    padR.setAttribute("aria-label", t("hookui.padRight"));
+    padPair.append(padL, padR);
+    pane.append(labelled(fieldName(t("hookui.padding"), "padding"), gated("padding", padPair), t("hookui.paddingAbout")));
+    pane.append(choice("align", cat.aligns, "hookui.align", "hookui.alignAbout", true));
+    pane.append(choice("sign", cat.signs, "hookui.sign", "hookui.signAbout", true));
+    pane.append(num("max_len", 0, lim("max_len"), "hookui.maxLen", "hookui.maxLenAbout", true));
+    pane.append(choice("unknown", cat.unknowns, "hookui.unknown", "hookui.unknownAbout", false));
+
+    // PER STATE: a colour and a glyph for each state the component declares.
+    // The state words are the CLI's own and are printed verbatim.
+    if (comp.states && comp.states.length) {
+      pane.append(sectionHead(t("hookui.states"), t("hookui.statesAbout")));
+      const cmap = mapOf(val("color_by_state", null));
+      const gmap = mapOf(val("glyph_by_state", null));
+      for (const st of comp.states) {
+        const row = el("div", "hk-state-row");
+        const sel = el("select", "hk-select");
+        const none = el("option", null, t("hookui.shared"));
+        none.value = "";
+        sel.append(none);
+        const slots = (cat.colors || []).map(String);
+        if (cmap[st] && !slots.includes(String(cmap[st]))) slots.push(String(cmap[st]));
+        for (const c of slots) {
+          const o = el("option", null, c);
+          o.value = c;
+          if (String(cmap[st] || "") === c) o.selected = true;
+          sel.append(o);
+        }
+        sel.setAttribute("aria-label", t("hookui.stateColour", { s: st }));
+        sel.addEventListener("change", () => stage("color_by_state", mapText(Object.assign({}, cmap, { [st]: sel.value })), t("hookui.stateChange", { id: comp.id, s: st, v: sel.value || t("hookui.shared") })));
+        const g = textField(gmap[st] || "", (v) => stage("glyph_by_state", mapText(Object.assign({}, gmap, { [st]: v })), t("hookui.stateChange", { id: comp.id, s: st, v })));
+        g.classList.add("hk-short", "hk-char");
+        g.setAttribute("aria-label", t("hookui.stateGlyph", { s: st }));
+        row.append(el("span", "hk-state-name", st), sel, gated("glyph_by_state", g));
+        pane.append(row);
+      }
+    }
+
+    // SETTINGS: the component's own parameters, as the CLI declares them — a
+    // fixed list is buttons, free text is a box. Each key is its own op.
+    const params = comp.params && typeof comp.params === "object" ? Object.entries(comp.params) : [];
+    if (params.length) {
+      pane.append(sectionHead(t("hookui.settings"), t("hookui.settingsAbout")));
+      for (const [key, spec] of params) {
+        const field = "param." + key;
+        const saved = item.src && item.src.params ? item.src.params[key] : undefined;
+        const cur = field in item.over ? item.over[field] : saved !== undefined && saved !== null ? saved : spec && spec.dflt;
+        const onSet = (v) => stage(field, v, t("hookui.paramChange", { id: comp.id, k: key, v: String(v) }));
+        const node = spec && spec.options ? pickRow(spec.options, cur, onSet) : textField(cur, onSet);
+        pane.append(labelled(key, node, spec && spec.options ? t("hookui.paramOptionsAbout") : t("hookui.paramFreeAbout", { n: lim("param_text") || "" })));
+      }
+    }
+
+    if (comp.bounded || (comp.defaults && comp.defaults.format)) {
+      pane.append(sectionHead(t("hookui.numbers"), t("hookui.numbersAbout")));
+      pane.append(labelled(fieldName(t("hookui.format"), "format"), gated("format", pickRow(cat.formats, val("format", null), (v) => stage("format", v, t("hookui.formatChange", { id: comp.id, v })))), t("hookui.formatAbout")));
+      pane.append(labelled(fieldName(t("hookui.compact"), "compact"), gated("compact", pickRow(cat.compact, val("compact", null), (v) => stage("compact", v, t("hookui.compactChange", { id: comp.id, v })))), t("hookui.compactAbout")));
+      // `min_width` is not cosmetic: a value that changes width shifts every part
+      // to its right on the keystroke it happens, and that jitter is the main
+      // reason people turn a status line off again.
+      pane.append(labelled(fieldName(t("hookui.minWidth"), "min_width"), gated("min_width", numField(val("min_width", null), 0, 8, (v) => stage("min_width", v, t("hookui.minWidthChange", { id: comp.id, v })))), t("hookui.minWidthWarn")));
+      pane.append(labelled(fieldName(t("hookui.precision"), "precision"), gated("precision", numField(val("precision", null), 0, 2, (v) => stage("precision", v, t("hookui.precisionChange", { id: comp.id, v })))), t("hookui.precisionAbout")));
+    }
+
+    const rend = cat.renderers[curRender];
+    if (rend && rend.width)
+      pane.append(labelled(fieldName(t("hookui.width"), "width"), numField(val("width", null), rend.width[0], rend.width[1], (v) => stage("width", v, t("hookui.widthChange", { id: comp.id, v }))), t("hookui.widthWhy")));
+
+    // A CHECKLIST, not an enum: "hide when zero" and "hide when there is no run"
+    // are independent facts and a user wants both at once.
+    pane.append(sectionHead(t("hookui.whenToShow"), t("hookui.whenToShowAbout")));
+    const checks = el("div", "hk-checks");
+    const active = new Set(val("hide_when", []) || []);
+    for (const h of cat.hide_when) {
+      if (h.id === "never") continue;
+      const lab = el("label", "hk-check");
+      const box = el("input");
+      box.type = "checkbox";
+      box.checked = active.has(h.id);
+      box.addEventListener("change", () => {
+        const next = new Set(active);
+        if (box.checked) next.add(h.id);
+        else next.delete(h.id);
+        const v = next.size ? [...next].join(",") : "never";
+        stage("hide_when", v, t("hookui.hideChange", { id: comp.id, v }));
+      });
+      lab.append(box, el("span", null, h.id), el("span", "note", h.says));
+      checks.append(lab);
+    }
+    pane.append(checks);
+
+    // RESPONSIVE WIDTH: the range of terminal widths in which this part is worth
+    // its cells. Strictly better than truncating the right of an overflowing
+    // line, because the USER chooses what survives a narrow terminal.
+    pane.append(sectionHead(t("hookui.narrow"), t("hookui.narrowAbout")));
+    pane.append(labelled(fieldName(t("hookui.minCols"), "min_cols"), numField(val("min_cols", null), 0, 200, (v) => stage("min_cols", v, t("hookui.minColsChange", { id: comp.id, v }))), t("hookui.minColsAbout")));
+    pane.append(labelled(fieldName(t("hookui.priority"), "priority"), numField(val("priority", null), 1, 5, (v) => stage("priority", v, t("hookui.priorityChange", { id: comp.id, v }))), t("hookui.priorityWhy")));
+  }
+
+  paint(null);
+
+  const close = modal({
+    title: comp.id,
+    body: pane,
+    actions: [
+      // WHERE EACH VALUE CAME FROM. It is how a user finds their own overrides
+      // again after a colour set change - `orc lane config`'s problem, at part
+      // scale. It reads the SAVED item, so it is offered only for one.
+      ...(item.src
+        ? [{
+            label: t("hookui.explain"),
+            cls: "btn-ghost",
+            onClick: async () => {
+              const r = await read("/api/statusline/explain?board=" + HK_BOARD + "&at=" + line.line + ":" + (line.items.indexOf(item) + 1));
+              if (!r.data || !r.data.ok) return toast(t("hookui.explainFailed"), "bad");
+              HK_MODAL = null;
+              modal({
+                title: comp.id,
+                body: kvList(r.data.resolved.map((x) => [x.field, x.source])),
+                actions: [{ label: t("common.close"), cls: "btn-ghost", onClick: (c) => c() }],
+              });
+            },
+          }]
+        : []),
+      {
+        label: t("common.close"),
+        cls: "btn-ghost",
+        onClick: (c) => {
+          HK_MODAL = null;
+          c();
+        },
+      },
+    ],
+  });
+  // Registered LAST, so a repaint that fires during construction cannot reach a
+  // half-built pane.
+  HK_MODAL = { repaint: paint };
+}
+
+// `partPicker` reads a board only to answer "can a part go on that line". A
+// SWAP changes nothing about where the part sits, so it is handed a board with
+// no lines and never asks.
+const HK_NO_LINES = { lines: [], max: 0 };
+
+// Where the caret is, as a path of child indexes from the editor's own root,
+// plus the selection inside the field. Not an id: a control here has no
+// identity of its own, and inventing one for every field would be a second
+// idea of what the editor holds.
+function focusPath(root) {
+  const a = document.activeElement;
+  if (!a || !root.contains(a)) return null;
+  const path = [];
+  let n = a;
+  while (n && n !== root) {
+    path.unshift([...n.parentNode.childNodes].indexOf(n));
+    n = n.parentNode;
+  }
+  const sel = "selectionStart" in a && a.selectionStart !== null ? [a.selectionStart, a.selectionEnd] : null;
+  return { path, sel };
+}
+
+function restoreFocus(root, keep) {
+  if (!keep) return;
+  let n = root;
+  for (const i of keep.path) {
+    n = n && n.childNodes[i];
+    if (!n) return;
+  }
+  if (!n.focus) return;
+  n.focus();
+  if (keep.sel && "setSelectionRange" in n) {
+    try {
+      n.setSelectionRange(keep.sel[0], keep.sel[1]);
+    } catch (_) {}
+  }
+}
+
+function sectionHead(name, about) {
+  const w = el("div", "hk-section-wrap");
+  w.append(el("div", "hk-section", name));
+  if (about) w.append(el("div", "note", about));
+  return w;
+}
+
+function numField(value, lo, hi, onSet) {
+  const i = el("input", "hk-input hk-num");
+  i.type = "number";
+  i.min = String(lo);
+  // No upper bound when the CLI sent none — the CLI still validates.
+  if (hi !== undefined && hi !== null) i.max = String(hi);
+  if (value !== null && value !== undefined) i.value = String(value);
+  // The value it was BUILT with: a staged-preview repaint waits while the box
+  // holds something different (see hkStagePaint).
+  i.dataset.built = i.value;
+  i.addEventListener("change", () => onSet(i.value));
+  return i;
+}
+
+// `blurOnly` is for a box on the BOARD, which repaints without putting the
+// caret back; a box in the editor stages per keystroke, as the Name box does.
+function textField(value, onSet, blurOnly) {
+  const i = el("input", "hk-input");
+  i.type = "text";
+  i.value = value == null ? "" : String(value);
+  i.dataset.built = i.value;
+  i.addEventListener("change", () => onSet(i.value));
+  if (!blurOnly) i.addEventListener("input", () => onSet(i.value));
+  return i;
+}
+
+// A control, its name, and — because a noun on its own is not an explanation —
+// the sentence that says what it does. That sentence is most of this release:
+// a settings form whose labels are nouns is a form people close.
+function labelled(name, node, about) {
+  const row = el("div", "hk-field");
+  const left = el("div", "hk-field-left");
+  left.append(el("span", "hk-field-name", name));
+  if (about) left.append(el("span", "note", about));
+  row.append(left);
+  row.append(node);
+  return row;
+}
+
+// A row of options. The VALUES are the CLI's and are printed verbatim — a
+// translated renderer name is a renderer that does not exist.
+// `lead` ({label, value, on}) is an optional first button that is not a CLI
+// value by name — the "shared" pick, whose value is the CLI's inherit token.
+// `tips` (optional) maps an option to a sample of what it does — the CLI's
+// `case_samples` — shown under the option and as its tooltip.
+function pickRow(options, current, onPick, lead, tips) {
+  const row = el("div", "hk-picks");
+  if (lead) {
+    const b = el("button", "hk-pick" + (lead.on ? " hk-pick-on" : ""), lead.label);
+    b.type = "button";
+    b.addEventListener("click", () => onPick(lead.value));
+    row.append(b);
+  }
+  for (const o of options || []) {
+    const b = el("button", "hk-pick" + (String(current) === String(o) ? " hk-pick-on" : ""), String(o));
+    b.type = "button";
+    if (tips && tips[o]) {
+      b.title = tips[o];
+      b.append(el("span", "hk-pick-tip", tips[o]));
+    }
+    b.addEventListener("click", () => onPick(o));
+    row.append(b);
+  }
+  return row;
+}
+
+/* ══ the reference list ═══════════════════════════════════════════════════ */
+// WHAT EACH PART SHOWS, and nothing else. It used to carry three `+ line N`
+// buttons per row, which put the act of building the bar a long way from the
+// bar — and computed a position against a layout that was no longer the one
+// being staged. Adding happens on the board now; this is a reference.
+function referenceCard(cat) {
+  const right = el("div", "row-actions");
+  const search = el("input", "hk-input hk-palette-search");
+  search.type = "search";
+  search.value = HK_SEARCH;
+  search.placeholder = t("hookui.searchPlaceholder");
+  right.append(search);
+
+  const c = card(t("hookui.reference"), right);
+  c.append(el("div", "note", t("hookui.referenceAbout")));
+  const body = el("div", "stack");
+  c.append(body);
+
+  function paint() {
+    body.replaceChildren();
+    const q = HK_SEARCH.trim().toLowerCase();
+    const hits = q ? (cat.components || []).filter((x) => matches(x, q)) : null;
+    if (hits) {
+      body.append(el("div", "note", tn(hits.length, "hookui.matches")));
+      for (const comp of hits) body.append(referenceRow(comp));
+      if (!hits.length) body.append(empty(t("hookui.noMatch")));
+      return;
+    }
+    for (const [g, name] of Object.entries(cat.groups)) {
+      const rows = (cat.components || []).filter((x) => x.group === g);
+      if (!rows.length) continue;
+      const inner = el("div");
+      for (const comp of rows) inner.append(referenceRow(comp));
+      body.append(collapsible({
+        title: name,
+        count: String(rows.length),
+        content: inner,
+        collapsed: HK_GROUP !== g,
+      }));
+    }
+  }
+  search.addEventListener("input", () => {
+    HK_SEARCH = search.value;
+    paint();
+  });
+  paint();
+  return c;
+}
+
+function referenceRow(comp) {
+  const row = el("div", "hk-prow");
+  const top = el("div", "hk-prow-head");
+  top.append(el("span", "hk-prow-id", comp.id));
+  top.append(chip(comp.cost, comp.cost === "refused" ? "bad" : null));
+  row.append(top);
+  if (comp.summary) row.append(el("div", "hk-prow-desc", comp.summary));
+  const sample = comp.previews && comp.previews[(comp.defaults && comp.defaults.render) || comp.renderers[0]];
+  if (sample) row.append(ansiBlock(sample, "hk-preview hk-preview-chip"));
+  // A REFUSED part keeps its slot and carries the measurement that refused it:
+  // "we decided against this" and "we forgot" must not look the same.
+  if (comp.cost === "refused") row.append(el("div", "note note-warn hk-prow-why", comp.refused_reason));
+  return row;
+}
+
+/* ══ presets ══════════════════════════════════════════════════════════════ */
+// Applying one REPLACES the layout, so it is always confirmed and the loss is
+// NAMED — the `orc diy init --force` rule.
+function presetsCard(presets, plan) {
+  const c = card(t("hookui.presets"));
+  c.append(el("div", "note", t("hookui.presetsAbout")));
+  if (!presets || !presets.presets) return c;
+  for (const p of presets.presets) {
+    const row = el("div", "hk-preset");
+    const h = el("div", "hk-preset-head");
+    h.append(el("span", "hk-prow-id", p.name));
+    if (p.active) h.append(chip(t("hookui.active"), "ok"));
+    row.append(h);
+    row.append(el("div", "note", p.summary));
+    if (p.preview) row.append(ansiBlock(p.preview, "hk-preview hk-preview-sm"));
+    // The ACTIVE row keeps its slot and drops its button.
+    if (!p.active) {
+      const b = el("button", "btn btn-xs btn-ghost", t("hookui.apply"));
+      b.type = "button";
+      // A preset is written STRAIGHT AWAY, so it cannot run while ops are
+      // staged: those ops carry positions computed against a layout the preset
+      // is about to replace.
+      if (plan.dirty) {
+        b.disabled = true;
+        b.title = t("hookui.applyFirst");
+      } else {
+        b.addEventListener("click", () => confirmApply(p.name));
+      }
+      row.append(b);
+    }
+    c.append(row);
+  }
+  return c;
+}
+
+function confirmApply(name) {
+  modal({
+    title: t("hookui.applyTitle", { name }),
+    body: el("div", "note", t("hookui.applyWarn")),
+    actions: [
+      { label: t("common.cancel"), cls: "btn-ghost", onClick: (c) => c() },
+      {
+        label: t("hookui.apply"),
+        cls: "btn-primary",
+        onClick: async (c) => {
+          c();
+          const r = await post("/api/statusline/apply", bd({ name }));
+          if (!r.ok) toast(t("hookui.applyFailed"), "bad", (r.output || "").trim());
+          HK_OPS = [];
+          hkStageClear();
+          HK_COMPARE_DATA = null;
+          hkReload();
+        },
+      },
+    ],
+  });
+}
+
+function confirmReset() {
+  modal({
+    title: t("hookui.resetTitle"),
+    body: el("div", "note", t("hookui.resetWarn")),
+    actions: [
+      { label: t("common.cancel"), cls: "btn-ghost", onClick: (c) => c() },
+      {
+        label: t("hookui.resetLayout"),
+        cls: "btn-primary",
+        onClick: async (c) => {
+          c();
+          await post("/api/statusline/reset", bd({}));
+          HK_OPS = [];
+          hkStageClear();
+          HK_COMPARE_DATA = null;
+          hkReload();
+        },
+      },
+    ],
+  });
+}
+
+/* ══ more ═════════════════════════════════════════════════════════════════ */
+// THE COLOUR SET IS A DOCUMENT SETTING, and it now goes to the command that
+// writes document settings. It used to be routed through `statusline line 1
+// --theme`, which set ONE line's override while the picker read the document's
+// value back — so the button never moved and only a third of the bar changed.
+// One command per scope, and the panel calls the one that matches the control.
+function advancedCard(cat, plan) {
+  const c = card(t("hookui.advanced"));
+
+  const themes = el("div", "hk-theme-list");
+  for (const name of Object.keys(cat.themes || {})) {
+    const b = el("button", "hk-theme" + (plan.doc.theme === name ? " hk-theme-on" : ""));
+    b.type = "button";
+    b.append(el("span", "hk-theme-name", name));
+    // WHY somebody would pick it — the CLI's sentence, not one written here.
+    const about = (cat.themes_about || {})[name];
+    if (about) b.append(el("span", "note", about));
+    b.addEventListener("click", () => hkOp({ op: "doc", field: "theme", value: name, label: t("hookui.themeChange", { v: name }) }));
+    themes.append(b);
+  }
+  c.append(labelled(t("hookui.theme"), themes, t("hookui.themeAbout")));
+  c.append(el("div", "note", t("hookui.themeOverride")));
+
+  c.append(labelled(t("hookui.glyphs"),
+    pickRow(cat.glyph_sets, plan.doc.glyphs, (v) => hkOp({ op: "doc", field: "glyphs", value: v, label: t("hookui.glyphsDocChange", { v }) })),
+    t("hookui.glyphsDocAbout")));
+
+  const re = el("button", "btn btn-sm btn-ghost", t("hookui.recompile"));
+  re.type = "button";
+  re.addEventListener("click", async () => {
+    const r = await post("/api/statusline/compile", bd({}));
+    toast(r.ok ? t("hookui.recompiled") : t("hookui.recompileFailed"), r.ok ? "ok" : "bad");
+    hkReload();
+  });
+  const acts = el("div", "row-actions");
+  acts.append(re);
+  c.append(acts);
+  c.append(el("div", "note", t("hookui.compileNote")));
+  c.append(animationBlock());
+  return c;
+}
+
+// v2.0.4 — THE REDRAW TIMER. A settings write, not a staged layout op: the
+// button writes straight away, says so, and reloads.
+function animationBlock() {
+  const show = (HK_DATA && HK_DATA.show) || {};
+  const cur = show.refresh_interval || null;
+  const box = el("div", "hk-anim");
+  box.append(el("div", "hk-anim-head", t("hookui.animTitle")));
+  box.append(el("div", "note", cur ? t("hookui.animNowN", { n: cur }) : t("hookui.animNowOff")));
+  const row = el("div", "row-actions");
+  // v2.1.0 (DE-22) — the sub-second values are SHOWN and DISABLED, with the
+  // floor sentence: Claude Code never starts a timer below 1 s (measured).
+  for (const v of [0.2, 0.5, 0.7]) {
+    const b = el("button", "btn btn-xs btn-ghost", t("hookui.animSec", { n: v }));
+    b.type = "button";
+    b.disabled = true;
+    b.title = t("hookui.animFloor");
+    b.setAttribute("aria-disabled", "true");
+    row.append(b);
+  }
+  for (const v of [null, 1, 2, 3, 5, 10]) {
+    const on = (cur || null) === v;
+    const b = el("button", "btn btn-xs" + (on ? " btn-primary" : " btn-ghost"), v ? t("hookui.animSec", { n: v }) : t("hookui.animOff"));
+    b.type = "button";
+    b.addEventListener("click", async () => {
+      const r = await post("/api/statusline/refresh", bd({ seconds: v ? String(v) : "off" }));
+      if (r.ok) toast(v ? t("hookui.animSetN", { n: v }) : t("hookui.animSetOff"), "ok");
+      else toast(t("hookui.animFailed"), "bad", (r.output || "").trim());
+      hkReload();
+    });
+    row.append(b);
+  }
+  box.append(row);
+  box.append(el("div", "note", t("hookui.animCost")));
+  if (!cur && (show.animated || show.needs_refresh))
+    box.append(el("div", "note note-warn", t("hookui.animNeeds")));
+  return box;
+}