@north-light/crouter 0.3.173 → 0.3.175

package/dist/commands/sys/panels/keybindings-panel.js

@@ -0,0 +1,703 @@
+import { Input, matchesKey, truncateToWidth, visibleWidth, } from "@earendil-works/pi-tui";
+import { BINDING_CATALOG, formatBinding, formatGesture, isAttachPaneBinding, matchesPiTuiInput, persistUserKeybindings, KeybindingConcurrentEditError, KeybindingValidationError, } from "../../../core/keybindings/index.js";
+import { installTmuxBindings, occupiedTmuxRootGestures, } from "../../../core/runtime/tmux-chrome.js";
+import { SetupKeybindingsDraft } from "../setup-core.js";
+import { padAnsi, theme } from "./panel.js";
+/** Collapse explicitly-paired catalog definitions into one setup action row.
+ *  Pair membership and field roles come only from catalog metadata; neither
+ *  rendering nor installation guesses from binding ID names. */
+function buildSetupKeybindingRows() {
+    const byId = new Map(BINDING_CATALOG.map((definition) => [definition.id, definition]));
+    const consumed = new Set();
+    const rows = [];
+    for (const definition of BINDING_CATALOG) {
+        if (consumed.has(definition.id))
+            continue;
+        if (definition.pair === undefined) {
+            rows.push({
+                group: definition.group,
+                name: definition.name,
+                description: definition.description,
+                fields: [{ definition }],
+            });
+            consumed.add(definition.id);
+            continue;
+        }
+        const paired = byId.get(definition.pair.pairedId);
+        if (paired?.pair?.pairedId !== definition.id ||
+            paired.pair.field === definition.pair.field) {
+            throw new Error(`invalid keybinding pair metadata for ${definition.id}`);
+        }
+        const members = [definition, paired];
+        const menu = members.find((member) => member.pair?.field === "menu");
+        const second = members.find((member) => member.pair?.field !== "menu");
+        if (menu === undefined || second === undefined)
+            throw new Error(`incomplete keybinding pair for ${definition.id}`);
+        const secondLabel = second.pair?.field === "global" ? "Global" : "Direct";
+        rows.push({
+            group: menu.group,
+            name: menu.name,
+            description: menu.description,
+            fields: [
+                { label: "Menu", definition: menu },
+                {
+                    label: secondLabel,
+                    definition: second,
+                },
+            ],
+        });
+        consumed.add(menu.id);
+        consumed.add(second.id);
+    }
+    return rows;
+}
+const SETUP_KEYBINDING_ROWS = buildSetupKeybindingRows();
+export class KeybindingsPanel {
+    openingBindings;
+    terminalRows;
+    onChange;
+    keyInput = new Input();
+    keyDraft;
+    keyIndex = 0;
+    keyFieldIndex = 0;
+    keyScroll = 0;
+    keyFilter = "";
+    filteringKeys = false;
+    editingKey = null;
+    keyEditError;
+    keyDiagnostics = [];
+    keyConfirm = null;
+    keyNotice;
+    keyTmuxOccupancy;
+    _focused = false;
+    constructor(openingBindings, rawKeybindings, rawTmuxPassthrough, terminalRows, onChange) {
+        this.openingBindings = openingBindings;
+        this.terminalRows = terminalRows;
+        this.onChange = onChange;
+        this.keyDraft = new SetupKeybindingsDraft(rawKeybindings, rawTmuxPassthrough);
+        this.keyDiagnostics = this.keyDraft.resolution().diagnostics;
+    }
+    set focused(value) {
+        this._focused = value;
+        this.keyInput.focused = value && this.editingKey !== null;
+    }
+    get focused() {
+        return this._focused;
+    }
+    get dirty() {
+        return this.keyDraft.dirty;
+    }
+    badge() {
+        return String(SETUP_KEYBINDING_ROWS.length);
+    }
+    get takesPriorityInput() {
+        return (this.editingKey !== null || this.filteringKeys || this.keyConfirm !== null);
+    }
+    requestDiscard() {
+        if (this.keyDraft.dirty) {
+            this.keyConfirm = "discard";
+            this.invalidate();
+        }
+    }
+    invalidate() {
+        this.onChange();
+    }
+    matches(id, data) {
+        return matchesPiTuiInput(this.openingBindings, id, data, (input, gesture) => matchesKey(input, gesture));
+    }
+    label(id) {
+        return formatBinding(this.openingBindings, id);
+    }
+    filteredKeybindings() {
+        const resolution = this.keyDraft.resolution();
+        const needle = this.keyFilter.trim().toLowerCase();
+        if (needle === "")
+            return SETUP_KEYBINDING_ROWS;
+        return SETUP_KEYBINDING_ROWS.filter((row) => [
+            row.name,
+            row.group,
+            row.description,
+            ...row.fields.flatMap((field) => [
+                field.label ?? "",
+                field.definition.id,
+                field.definition.name,
+                field.definition.description,
+                formatBinding(resolution, field.definition.id),
+            ]),
+        ].some((value) => value.toLowerCase().includes(needle)));
+    }
+    selectedKeyRow() {
+        const rows = this.filteredKeybindings();
+        if (rows.length === 0)
+            return undefined;
+        this.keyIndex = Math.max(0, Math.min(this.keyIndex, rows.length - 1));
+        const row = rows[this.keyIndex];
+        this.keyFieldIndex = Math.max(0, Math.min(this.keyFieldIndex, row.fields.length - 1));
+        return row;
+    }
+    selectedKeybinding() {
+        return this.selectedKeyRow()?.fields[this.keyFieldIndex]?.definition;
+    }
+    tmuxPassthroughOffer() {
+        const definition = this.selectedKeybinding();
+        if (definition === undefined || !isAttachPaneBinding(definition))
+            return undefined;
+        const gestures = this.keyDraft.resolution().gestures(definition.id);
+        const expression = gestures.join("\u0000");
+        if (this.keyTmuxOccupancy?.id !== definition.id ||
+            this.keyTmuxOccupancy.expression !== expression) {
+            this.keyTmuxOccupancy = {
+                id: definition.id,
+                expression,
+                gestures: occupiedTmuxRootGestures(gestures),
+            };
+        }
+        const gesture = this.keyTmuxOccupancy.gestures[0];
+        return gesture === undefined ? undefined : { id: definition.id, gesture };
+    }
+    toggleTmuxPassthrough() {
+        const offer = this.tmuxPassthroughOffer();
+        if (offer === undefined)
+            return false;
+        this.keyDraft.toggleTmuxPassthrough(offer.id);
+        this.keyTmuxOccupancy = undefined;
+        this.keyNotice = undefined;
+        this.invalidate();
+        return true;
+    }
+    moveKey(delta) {
+        const rows = this.filteredKeybindings();
+        if (rows.length === 0)
+            return;
+        this.keyIndex = Math.max(0, Math.min(rows.length - 1, this.keyIndex + delta));
+        this.keyFieldIndex = Math.min(this.keyFieldIndex, rows[this.keyIndex].fields.length - 1);
+        const page = this.keyPageSize();
+        if (this.keyIndex < this.keyScroll)
+            this.keyScroll = this.keyIndex;
+        if (this.keyIndex >= this.keyScroll + page)
+            this.keyScroll = this.keyIndex - page + 1;
+        this.keyEditError = undefined;
+        this.invalidate();
+    }
+    moveKeyField(delta) {
+        const row = this.selectedKeyRow();
+        if (row === undefined)
+            return;
+        this.keyFieldIndex = Math.max(0, Math.min(row.fields.length - 1, this.keyFieldIndex + delta));
+        this.keyEditError = undefined;
+        this.invalidate();
+    }
+    // Max output lines the row region may emit before it starts clipping the
+    // confirm prompt / notice / footer. Budgets the fixed chrome around the list:
+    // header (3) + blank + tab header/count (2) + blank + footer (1) plus a small
+    // reserve for a diagnostic line and the notice/confirm block.
+    keyViewportLines() {
+        return Math.max(4, this.terminalRows() - 11);
+    }
+    // Rows moved per PageUp/PageDown and used for scroll clamping. Kept below the
+    // raw viewport so interleaved group-heading lines and the selected row's
+    // diagnostic line cannot push the selection off-screen.
+    keyPageSize() {
+        return Math.max(3, this.keyViewportLines() - 4);
+    }
+    beginKeyEdit() {
+        const row = this.selectedKeybinding();
+        if (!row)
+            return;
+        if (this.keyDraft.hasInvalidRoot()) {
+            this.keyNotice = `Saved keybindings root is invalid — ${this.label("crtr.setup.keybindings.reset-all")} (reset all) before editing.`;
+            this.invalidate();
+            return;
+        }
+        this.editingKey = row.id;
+        this.keyInput.setValue(this.keyDraft.expression(row.id));
+        // pi Input.setValue only clamps the cursor; seed it, then send ctrl+e
+        // (cursorLineEnd) so the cursor sits at end-of-value and the first keystroke
+        // appends after the seed instead of prepending before it.
+        this.keyInput.handleInput("\x05");
+        this.keyInput.focused = this.focused;
+        this.keyEditError = undefined;
+        this.invalidate();
+    }
+    commitKeyEdit() {
+        if (this.editingKey === null)
+            return;
+        const result = this.keyDraft.edit(this.editingKey, this.keyInput.getValue());
+        if (!result.ok) {
+            this.keyEditError =
+                result.diagnostics[0]?.message ?? "Invalid keybinding";
+            this.keyDiagnostics = result.diagnostics;
+            this.invalidate();
+            return;
+        }
+        this.editingKey = null;
+        this.keyInput.focused = false;
+        this.keyEditError = undefined;
+        this.keyDiagnostics = this.keyDraft.resolution().diagnostics;
+        this.keyNotice = undefined;
+        this.invalidate();
+    }
+    cancelKeyEdit() {
+        this.editingKey = null;
+        this.keyInput.focused = false;
+        this.keyEditError = undefined;
+        // Drop the rejected edit's collision diagnostics: the draft never took the
+        // offending value, so restore diagnostics from the committed draft state.
+        this.keyDiagnostics = this.keyDraft.resolution().diagnostics;
+        this.invalidate();
+    }
+    saveKeybindings() {
+        const resolution = this.keyDraft.resolution();
+        this.keyDiagnostics = resolution.diagnostics;
+        const errors = resolution.diagnostics.filter((diagnostic) => diagnostic.severity === "error");
+        if (errors.length > 0) {
+            this.keyNotice = errors[0].message;
+            this.invalidate();
+            return;
+        }
+        try {
+            const saved = persistUserKeybindings(this.keyDraft.overrides(), {
+                expectedKeybindings: this.keyDraft.expectedKeybindings(),
+                tmuxPassthrough: this.keyDraft.tmuxPassthrough(),
+                expectedTmuxPassthrough: this.keyDraft.expectedTmuxPassthrough(),
+            });
+            this.keyDraft.markSaved(saved.overrides, saved.tmuxPassthrough);
+            this.keyNotice =
+                "Saved. Reload attach and reopen active views to apply changes; refreshing tmux…";
+            // The config is already persisted; a tmux-refresh failure (installer throw)
+            // must land in the notice, never as an unhandled rejection that tears down
+            // the wizard mid-TUI right after a good save.
+            void this.refreshTmuxBindingsAfterSave().catch((error) => {
+                this.keyNotice = `Saved, but tmux refresh failed: ${error instanceof Error ? error.message : String(error)}`;
+                this.invalidate();
+            });
+        }
+        catch (error) {
+            if (error instanceof KeybindingConcurrentEditError) {
+                this.keyNotice =
+                    "Keybindings changed on disk. Reopen setup before saving.";
+            }
+            else if (error instanceof KeybindingValidationError) {
+                this.keyDiagnostics = error.diagnostics;
+                this.keyNotice = error.message;
+            }
+            else {
+                this.keyNotice = error instanceof Error ? error.message : String(error);
+            }
+        }
+        this.invalidate();
+    }
+    async refreshTmuxBindingsAfterSave() {
+        // Unit 2's frozen tmux-chrome seam: no-arg install re-reads the
+        // just-persisted user config and reconciles the crouter-owned bindings.
+        const result = installTmuxBindings();
+        const occupied = result.diagnostics.filter((diagnostic) => diagnostic.code === "occupied");
+        if (result.ok && occupied.length === 0) {
+            this.keyNotice =
+                "Saved and applied to tmux. Reload attach and reopen active views.";
+        }
+        else if (result.ok) {
+            this.keyNotice = `Saved; tmux kept occupied keys: ${occupied.map((diagnostic) => diagnostic.message).join("; ")}`;
+        }
+        else {
+            this.keyNotice = `Saved, but tmux refresh failed: ${result.diagnostics.find((diagnostic) => diagnostic.code === "tmux-error")?.message ?? "tmux unavailable"}`;
+        }
+        this.invalidate();
+    }
+    confirmKeyAction() {
+        if (this.keyConfirm === "reset-all") {
+            this.keyDraft.resetAll();
+            this.keyDiagnostics = [];
+            this.keyNotice =
+                "All rows reset to catalog defaults. Press save to write.";
+        }
+        else if (this.keyConfirm === "discard") {
+            this.keyDraft.discard();
+            this.keyDiagnostics = this.keyDraft.resolution().diagnostics;
+            this.keyNotice = "Unsaved keybinding changes discarded.";
+        }
+        this.keyConfirm = null;
+        this.invalidate();
+    }
+    handleKeybindingsInput(data) {
+        if (this.keyConfirm !== null) {
+            if (this.matches("crtr.setup.confirm.accept", data))
+                this.confirmKeyAction();
+            else if (this.matches("crtr.setup.confirm.back", data)) {
+                this.keyConfirm = null;
+                this.invalidate();
+            }
+            return;
+        }
+        if (this.editingKey !== null) {
+            // Honor the catalog rows for commit/cancel BEFORE the pi Input sees the
+            // keystroke, so a remap of `commit-edit`/`cancel-edit` takes effect.
+            if (this.matches("crtr.setup.keybindings.commit-edit", data)) {
+                this.commitKeyEdit();
+                return;
+            }
+            if (this.matches("crtr.setup.keybindings.cancel-edit", data)) {
+                this.cancelKeyEdit();
+                return;
+            }
+            if (this.matches("crtr.setup.keybindings.page-up", data)) {
+                this.moveKey(-this.keyPageSize());
+                return;
+            }
+            if (this.matches("crtr.setup.keybindings.page-down", data)) {
+                this.moveKey(this.keyPageSize());
+                return;
+            }
+            this.keyInput.handleInput(data);
+            this.invalidate();
+            return;
+        }
+        if (this.filteringKeys) {
+            if (this.matches("crtr.setup.keybindings.filter-clear", data)) {
+                this.keyFilter = "";
+                this.filteringKeys = false;
+                this.keyIndex = 0;
+                this.keyScroll = 0;
+            }
+            else if (this.matches("crtr.setup.keybindings.edit", data)) {
+                // Enter commits the filter: leave filter-entry but KEEP keyFilter so the
+                // narrowed list can be navigated and its rows edited.
+                this.filteringKeys = false;
+            }
+            else if (this.matches("crtr.setup.keybindings.filter-delete", data)) {
+                this.keyFilter = this.keyFilter.slice(0, -1);
+                this.keyIndex = 0;
+                this.keyScroll = 0;
+            }
+            else if (data.length === 1 && data.charCodeAt(0) >= 32) {
+                this.keyFilter += data;
+                this.keyIndex = 0;
+                this.keyScroll = 0;
+            }
+            this.invalidate();
+            return;
+        }
+        if (this.matches("crtr.setup.keybindings.filter", data)) {
+            this.filteringKeys = true;
+        }
+        else if (this.matches("crtr.setup.list-down", data)) {
+            this.moveKey(1);
+            return;
+        }
+        else if (this.matches("crtr.setup.list-up", data)) {
+            this.moveKey(-1);
+            return;
+        }
+        else if (this.matches("crtr.setup.cell-previous", data)) {
+            this.moveKeyField(-1);
+            return;
+        }
+        else if (this.matches("crtr.setup.cell-next", data)) {
+            this.moveKeyField(1);
+            return;
+        }
+        else if (this.matches("crtr.setup.keybindings.page-up", data)) {
+            this.moveKey(-this.keyPageSize());
+            return;
+        }
+        else if (this.matches("crtr.setup.keybindings.page-down", data)) {
+            this.moveKey(this.keyPageSize());
+            return;
+        }
+        else if (this.matches("crtr.setup.toggle", data)) {
+            if (this.toggleTmuxPassthrough())
+                return;
+        }
+        else if (this.matches("crtr.setup.keybindings.edit", data)) {
+            this.beginKeyEdit();
+            return;
+        }
+        else if (this.matches("crtr.setup.keybindings.unbind", data)) {
+            const row = this.selectedKeybinding();
+            if (row) {
+                const result = this.keyDraft.unbind(row.id);
+                this.keyDiagnostics = result.ok
+                    ? this.keyDraft.resolution().diagnostics
+                    : result.diagnostics;
+                this.keyEditError = result.ok
+                    ? undefined
+                    : result.diagnostics[0]?.message;
+            }
+        }
+        else if (this.matches("crtr.setup.keybindings.reset-row", data)) {
+            const row = this.selectedKeybinding();
+            if (row)
+                this.keyDraft.resetRow(row.id);
+            this.keyDiagnostics = this.keyDraft.resolution().diagnostics;
+        }
+        else if (this.matches("crtr.setup.keybindings.reset-all", data)) {
+            this.keyConfirm = "reset-all";
+        }
+        else if (this.matches("crtr.setup.keybindings.save", data)) {
+            this.saveKeybindings();
+            return;
+        }
+        else if (this.matches("crtr.setup.keybindings.discard", data)) {
+            // A committed (kept) filter is cleared first, before discard is considered.
+            if (this.keyFilter !== "") {
+                this.keyFilter = "";
+                this.keyIndex = 0;
+                this.keyScroll = 0;
+                this.keyNotice = undefined;
+            }
+            else if (this.keyDraft.dirty)
+                this.keyConfirm = "discard";
+            else
+                this.keyNotice = "No unsaved keybinding changes.";
+        }
+        else {
+            return;
+        }
+        this.invalidate();
+    }
+    keyRowMessage(rows, index) {
+        const row = rows[index];
+        const selected = index === this.keyIndex;
+        const editing = row.fields.find((field) => field.definition.id === this.editingKey);
+        if (!selected && editing === undefined)
+            return undefined;
+        if (editing !== undefined && this.keyEditError)
+            return { label: editing.label, message: this.keyEditError };
+        const diagnostic = this.keyDiagnostics.find((entry) => row.fields.some((field) => entry.bindingId === field.definition.id ||
+            entry.relatedBindingIds?.includes(field.definition.id)));
+        if (diagnostic === undefined)
+            return undefined;
+        const responsible = row.fields.find((field) => diagnostic.bindingId === field.definition.id ||
+            diagnostic.relatedBindingIds?.includes(field.definition.id));
+        return { label: responsible?.label, message: diagnostic.message };
+    }
+    /** Number of lines needed to keep the active paired field legible. A narrow
+     *  row stacks the action and field instead of sacrificing the action name,
+     *  selected-field identity, or value to fixed columns. */
+    keyRowBodyLineCount(row, index, resolution, width) {
+        const editingFieldIndex = row.fields.findIndex((field) => field.definition.id === this.editingKey);
+        const active = editingFieldIndex >= 0 || index === this.keyIndex;
+        if (!active || row.fields.length < 2)
+            return 1;
+        const fieldIndex = editingFieldIndex >= 0
+            ? editingFieldIndex
+            : Math.min(this.keyFieldIndex, row.fields.length - 1);
+        const field = row.fields[fieldIndex];
+        const value = editingFieldIndex >= 0
+            ? `> ${this.keyInput.getValue()}`
+            : formatBinding(resolution, field.definition.id);
+        const bracketedLabel = `[${field.label}]`;
+        const inlineWidth = 3 +
+            visibleWidth(row.name) +
+            1 +
+            visibleWidth(bracketedLabel) +
+            1 +
+            visibleWidth(value);
+        if (inlineWidth <= width)
+            return 1;
+        const compactFieldWidth = visibleWidth(field.label ?? "") + 1 + visibleWidth(value);
+        return compactFieldWidth <= width ? 2 : 3;
+    }
+    // Output lines the visible rows [start..end] cost, counting group headings,
+    // responsive row bodies, and diagnostics. Used to clamp the scroll so the
+    // anchor row always renders.
+    keyLineCost(rows, start, end, resolution, width) {
+        let lines = 0;
+        let previousGroup;
+        for (let index = start; index <= end; index += 1) {
+            const row = rows[index];
+            lines +=
+                (row.group !== previousGroup ? 1 : 0) +
+                    this.keyRowBodyLineCount(row, index, resolution, width) +
+                    (this.keyRowMessage(rows, index) ? 1 : 0) +
+                    (index === this.keyIndex && this.tmuxPassthroughOffer() !== undefined
+                        ? 1
+                        : 0);
+            previousGroup = row.group;
+        }
+        return lines;
+    }
+    renderKeybindings(width) {
+        const out = [];
+        const rows = this.filteredKeybindings();
+        const resolution = this.keyDraft.resolution();
+        const viewport = this.keyViewportLines();
+        const pageSize = this.keyPageSize();
+        const maxScroll = Math.max(0, rows.length - pageSize);
+        this.keyScroll = Math.max(0, Math.min(this.keyScroll, maxScroll));
+        if (this.keyIndex < this.keyScroll)
+            this.keyScroll = this.keyIndex;
+        if (this.keyIndex >= this.keyScroll + pageSize)
+            this.keyScroll = Math.max(0, this.keyIndex - pageSize + 1);
+        // Anchor that must stay on screen: the row being edited (so the editor never
+        // vanishes while paging moves the selection — m3), else the selection itself.
+        // Injected group-heading and diagnostic lines can make a pageSize-row window
+        // exceed the raw viewport, so instead of a fixed reserve, clamp the scroll
+        // dynamically until the anchor is guaranteed to render within `viewport`.
+        const editIndex = this.editingKey !== null
+            ? rows.findIndex((row) => row.fields.some((field) => field.definition.id === this.editingKey))
+            : -1;
+        const anchor = editIndex >= 0 ? editIndex : this.keyIndex;
+        if (anchor >= 0) {
+            if (anchor < this.keyScroll)
+                this.keyScroll = anchor;
+            while (this.keyScroll < anchor &&
+                this.keyLineCost(rows, this.keyScroll, anchor, resolution, width) >
+                    viewport) {
+                this.keyScroll += 1;
+            }
+        }
+        const dirty = this.keyDraft.dirty
+            ? theme.fg("warning", "unsaved")
+            : theme.fg("success", "saved");
+        out.push(truncateToWidth(`${theme.fg("accent", theme.bold("Keybindings"))}${theme.fg("dim", "  crouter-owned only · ")}${dirty}`, width));
+        out.push(truncateToWidth(theme.fg("dim", this.keyFilter === ""
+            ? `${rows.length} actions`
+            : `${rows.length} matches for “${this.keyFilter}”${this.filteringKeys ? "" : ` · ${this.label("crtr.setup.keybindings.discard")} clears filter`}`), width));
+        if (resolution.diagnostics.some((diagnostic) => diagnostic.code === "invalid-keybindings")) {
+            out.push(truncateToWidth(theme.fg("warning", theme.bold(`Saved keybindings root is invalid — ${this.label("crtr.setup.keybindings.reset-all")} (reset all) to clear it before editing.`)), width));
+        }
+        if (rows.length === 0) {
+            out.push("");
+            out.push(truncateToWidth(theme.fg("warning", "No matching keybindings."), width));
+            return out;
+        }
+        const nameWidth = Math.max(10, Math.min(26, Math.floor(width * 0.28)));
+        let emitted = 0;
+        let previousGroup;
+        for (let index = this.keyScroll; index < rows.length; index += 1) {
+            const row = rows[index];
+            const selected = index === this.keyIndex;
+            const editingFieldIndex = row.fields.findIndex((field) => field.definition.id === this.editingKey);
+            const activeFieldIndex = editingFieldIndex >= 0
+                ? editingFieldIndex
+                : selected
+                    ? Math.min(this.keyFieldIndex, row.fields.length - 1)
+                    : 0;
+            const message = this.keyRowMessage(rows, index);
+            const tmuxOffer = selected ? this.tmuxPassthroughOffer() : undefined;
+            const bodyLines = this.keyRowBodyLineCount(row, index, resolution, width);
+            // Budget output lines (heading + responsive row + optional diagnostic) so
+            // the list never clips the confirm prompt / notice / footer below it.
+            const cost = (row.group !== previousGroup ? 1 : 0) +
+                bodyLines +
+                (message ? 1 : 0) +
+                (tmuxOffer ? 1 : 0);
+            if (emitted > 0 && emitted + cost > viewport)
+                break;
+            if (row.group !== previousGroup) {
+                out.push(truncateToWidth(theme.fg("accent", row.group), width));
+                previousGroup = row.group;
+            }
+            const marker = selected ? theme.fg("accent", "▶") : " ";
+            const sourceMark = row.fields.some((field) => resolution.get(field.definition.id).source === "user")
+                ? theme.fg("warning", "•")
+                : " ";
+            if (bodyLines > 1) {
+                const field = row.fields[activeFieldIndex];
+                const editing = field.definition.id === this.editingKey;
+                const plainValue = editing
+                    ? `> ${this.keyInput.getValue()}`
+                    : formatBinding(resolution, field.definition.id);
+                const bracketedLabel = `[${field.label}]`;
+                const compactLabel = field.label ?? "";
+                out.push(truncateToWidth(`${marker}${sourceMark} ${selected ? theme.fg("accent", row.name) : row.name}`, width));
+                if (bodyLines === 2) {
+                    const useBracketed = visibleWidth(bracketedLabel) + 1 + visibleWidth(plainValue) <=
+                        width;
+                    const plainLabel = useBracketed ? bracketedLabel : compactLabel;
+                    const label = theme.fg("accent", theme.bold(plainLabel));
+                    const indent = " ".repeat(Math.max(0, Math.min(3, width - visibleWidth(plainLabel) - 1 - visibleWidth(plainValue))));
+                    const valueWidth = Math.max(1, width - visibleWidth(indent) - visibleWidth(label) - 1);
+                    const value = editing
+                        ? (this.keyInput.render(valueWidth)[0] ?? "")
+                        : plainValue;
+                    out.push(truncateToWidth(`${indent}${label} ${value}`, width));
+                }
+                else {
+                    const label = theme.fg("accent", theme.bold(bracketedLabel));
+                    const labelIndent = " ".repeat(Math.max(0, Math.min(3, width - visibleWidth(label))));
+                    const value = editing
+                        ? (this.keyInput.render(width)[0] ?? "")
+                        : plainValue;
+                    out.push(truncateToWidth(`${labelIndent}${label}`, width));
+                    out.push(truncateToWidth(value, width));
+                }
+            }
+            else {
+                const name = padAnsi(selected ? theme.fg("accent", row.name) : row.name, nameWidth);
+                const available = Math.max(1, width - 4 - nameWidth);
+                const showAllFields = row.fields.length === 1 || available >= 28;
+                const visibleFields = showAllFields
+                    ? row.fields
+                    : [row.fields[activeFieldIndex]];
+                const fieldAreaWidth = row.fields.length > 1
+                    ? Math.min(61, available)
+                    : Math.min(34, available);
+                const gapWidth = Math.max(0, visibleFields.length - 1);
+                const fieldWidth = Math.max(1, Math.floor((fieldAreaWidth - gapWidth) / visibleFields.length));
+                const renderedFields = visibleFields.map((field) => {
+                    const fieldIndex = row.fields.indexOf(field);
+                    const editing = field.definition.id === this.editingKey;
+                    const active = editing || (selected && fieldIndex === activeFieldIndex);
+                    const label = field.label === undefined
+                        ? ""
+                        : active
+                            ? theme.fg("accent", theme.bold(`[${field.label}]`))
+                            : theme.fg("dim", `${field.label}:`);
+                    const labelWidth = visibleWidth(label);
+                    const valueWidth = Math.max(1, fieldWidth - labelWidth - (label === "" ? 0 : 1));
+                    // Render the edit field whenever THIS underlying definition is being
+                    // edited, even if paging moved row selection elsewhere.
+                    const value = editing
+                        ? (this.keyInput.render(valueWidth)[0] ?? "")
+                        : formatBinding(resolution, field.definition.id);
+                    const content = label === "" ? value : `${label} ${value}`;
+                    return padAnsi(truncateToWidth(content, fieldWidth), fieldWidth);
+                });
+                const fieldsText = renderedFields.join(" ");
+                const descriptionWidth = available - visibleWidth(fieldsText) - 1;
+                const description = descriptionWidth >= 16
+                    ? ` ${theme.fg("dim", truncateToWidth(row.description, descriptionWidth))}`
+                    : "";
+                out.push(truncateToWidth(`${marker}${sourceMark} ${name} ${fieldsText}${description}`, width));
+            }
+            if (tmuxOffer) {
+                const checked = this.keyDraft.usesTmuxPassthrough(tmuxOffer.id)
+                    ? theme.fg("success", "[x]")
+                    : theme.fg("dim", "[ ]");
+                out.push(truncateToWidth(`   ${checked} ${theme.fg("accent", `Use tmux's ${formatGesture(tmuxOffer.gesture)} here`)}`, width));
+            }
+            if (message) {
+                const fieldPrefix = message.label === undefined ? "" : `${message.label}: `;
+                out.push(truncateToWidth(theme.fg("warning", `   ${fieldPrefix}${message.message}`), width));
+            }
+            emitted += cost;
+        }
+        if (this.keyConfirm !== null) {
+            out.push("");
+            out.push(truncateToWidth(theme.fg("warning", theme.bold(this.keyConfirm === "reset-all"
+                ? "Reset every keybinding to its catalog default?"
+                : "Discard every unsaved keybinding change?")), width));
+        }
+        if (this.keyNotice)
+            out.push(truncateToWidth(theme.fg("muted", this.keyNotice), width));
+        return out;
+    }
+    handleInput(data) {
+        this.handleKeybindingsInput(data);
+        return true;
+    }
+    render(width, _height) {
+        return this.renderKeybindings(width);
+    }
+    footerHint() {
+        if (this.keyConfirm !== null)
+            return `${this.label("crtr.setup.confirm.accept")} confirm · ${this.label("crtr.setup.confirm.back")} go back`;
+        if (this.editingKey !== null)
+            return `type gestures separated by commas · ${this.label("crtr.setup.keybindings.commit-edit")} commit · ${this.label("crtr.setup.keybindings.cancel-edit")} cancel · ${this.label("crtr.setup.keybindings.page-up")}/${this.label("crtr.setup.keybindings.page-down")} scroll`;
+        if (this.filteringKeys)
+            return `filter: ${this.keyFilter || "type to search"} · ${this.label("crtr.setup.keybindings.edit")} keep · ${this.label("crtr.setup.keybindings.filter-delete")} delete · ${this.label("crtr.setup.keybindings.filter-clear")} clear`;
+        return `${this.label("crtr.setup.list-down")}/${this.label("crtr.setup.list-up")} move · ${this.label("crtr.setup.cell-previous")}/${this.label("crtr.setup.cell-next")} field · ${this.label("crtr.setup.keybindings.edit")} edit · ${this.tmuxPassthroughOffer() === undefined ? "" : `${this.label("crtr.setup.toggle")} tmux · `}${this.label("crtr.setup.keybindings.unbind")} disable · ${this.label("crtr.setup.keybindings.reset-row")} reset · ${this.label("crtr.setup.keybindings.reset-all")} reset all · ${this.label("crtr.setup.keybindings.filter")} filter · ${this.label("crtr.setup.keybindings.save")} save · ${this.label("crtr.setup.keybindings.discard")} ${this.keyFilter !== "" ? "clear filter" : "discard"}`;
+    }
+}