@crouton-kit/crouter 0.3.70 → 0.3.79

package/dist/clients/attach/edit-diff-render.js

@@ -0,0 +1,263 @@
+// edit-diff-render.ts — Claude-Code-style diff rendering for the attach viewer.
+//
+// pi's builtin edit renderer (core/tools/edit.js → renderDiff) paints diff
+// lines with colored FOREGROUND text plus inverse-video on changed tokens.
+// This module re-skins that body the way Claude Code renders diffs: every
+// added line gets a full-width tinted green BACKGROUND, every removed line a
+// full-width tinted red background, with the changed span inside a 1↔1 line
+// modification emphasized in a brighter tint of the same color.
+//
+// We deliberately keep pi's builtin edit definition as the engine — it owns
+// the async preview computation (computeEditsDiff keyed off ctx.state) and
+// the header/status-bg lifecycle — and only swap the rendered diff body.
+// The raw diff string lives on the call component (`preview.diff`), so no
+// ANSI re-parsing of pi's output is ever needed.
+import { createEditToolDefinition } from '@earendil-works/pi-coding-agent';
+import { Container, Spacer, Text } from '@earendil-works/pi-tui';
+const FALLBACK_ADDED = { r: 181, g: 189, b: 104 }; // pi dark green
+const FALLBACK_REMOVED = { r: 204, g: 102, b: 102 }; // pi dark red
+const FALLBACK_CARD_BG = { r: 40, g: 50, b: 40 }; // pi dark toolSuccessBg
+/** Standard xterm-256 palette → rgb (cube + grayscale ramps; 16 base approximated). */
+function xterm256ToRgb(n) {
+    if (n < 16) {
+        const base = [
+            [0, 0, 0], [205, 0, 0], [0, 205, 0], [205, 205, 0],
+            [0, 0, 238], [205, 0, 205], [0, 205, 205], [229, 229, 229],
+            [127, 127, 127], [255, 0, 0], [0, 255, 0], [255, 255, 0],
+            [92, 92, 255], [255, 0, 255], [0, 255, 255], [255, 255, 255],
+        ];
+        const [r, g, b] = base[n] ?? [128, 128, 128];
+        return { r, g, b };
+    }
+    if (n < 232) {
+        const i = n - 16;
+        const steps = [0, 95, 135, 175, 215, 255];
+        return { r: steps[Math.floor(i / 36) % 6], g: steps[Math.floor(i / 6) % 6], b: steps[i % 6] };
+    }
+    const v = 8 + (n - 232) * 10;
+    return { r: v, g: v, b: v };
+}
+/** rgb → nearest xterm-256 cube/gray index (for non-truecolor terminals). */
+function rgbTo256(c) {
+    const toCube = (v) => (v < 48 ? 0 : v < 115 ? 1 : Math.min(5, Math.floor((v - 35) / 40)));
+    const steps = [0, 95, 135, 175, 215, 255];
+    const cr = toCube(c.r);
+    const cg = toCube(c.g);
+    const cb = toCube(c.b);
+    const cubeIdx = 16 + 36 * cr + 6 * cg + cb;
+    const cube = { r: steps[cr], g: steps[cg], b: steps[cb] };
+    const gray = Math.max(0, Math.min(23, Math.round((((c.r + c.g + c.b) / 3) - 8) / 10)));
+    const grayIdx = 232 + gray;
+    const grayRgb = xterm256ToRgb(grayIdx);
+    const dist = (a, b) => (a.r - b.r) ** 2 + (a.g - b.g) ** 2 + (a.b - b.b) ** 2;
+    return dist(c, cube) <= dist(c, grayRgb) ? cubeIdx : grayIdx;
+}
+/** Parse the rgb out of a theme SGR open code (`38/48;2;r;g;b` or `38/48;5;n`). */
+function parseAnsiRgb(ansi) {
+    const truecolor = ansi.match(/\x1b\[[34]8;2;(\d+);(\d+);(\d+)m/);
+    if (truecolor)
+        return { r: Number(truecolor[1]), g: Number(truecolor[2]), b: Number(truecolor[3]) };
+    const indexed = ansi.match(/\x1b\[[34]8;5;(\d+)m/);
+    if (indexed)
+        return xterm256ToRgb(Number(indexed[1]));
+    return undefined;
+}
+function mix(a, b, t) {
+    return {
+        r: Math.round(a.r * t + b.r * (1 - t)),
+        g: Math.round(a.g * t + b.g * (1 - t)),
+        b: Math.round(a.b * t + b.b * (1 - t)),
+    };
+}
+function bgOpen(c, mode) {
+    if (mode === 'truecolor')
+        return `\x1b[48;2;${c.r};${c.g};${c.b}m`;
+    return `\x1b[48;5;${rgbTo256(c)}m`;
+}
+function themeFgRgb(theme, name, fallback) {
+    try {
+        return parseAnsiRgb(theme.getFgAnsi(name)) ?? fallback;
+    }
+    catch {
+        return fallback;
+    }
+}
+function themeBgRgb(theme, name, fallback) {
+    try {
+        return parseAnsiRgb(theme.getBgAnsi(name)) ?? fallback;
+    }
+    catch {
+        return fallback;
+    }
+}
+// ---------------------------------------------------------------------------
+// Diff body rendering
+// ---------------------------------------------------------------------------
+/** pi's display-diff line format: "+123 content" / "-123 content" / " 123 content". */
+function parseDiffLine(line) {
+    const match = line.match(/^([+-\s])(\s*\d*)\s(.*)$/);
+    if (!match)
+        return null;
+    return { prefix: match[1], lineNum: match[2], content: match[3] };
+}
+function replaceTabs(text) {
+    return text.replace(/\t/g, '   ');
+}
+/** Common prefix/suffix char-span diff for a single-line 1↔1 modification. */
+function changedSpans(oldS, newS) {
+    const maxP = Math.min(oldS.length, newS.length);
+    let p = 0;
+    while (p < maxP && oldS[p] === newS[p])
+        p++;
+    let s = 0;
+    while (s < maxP - p && oldS[oldS.length - 1 - s] === newS[newS.length - 1 - s])
+        s++;
+    return { old: [p, oldS.length - s], new: [p, newS.length - s] };
+}
+/** Wrap the changed span in a brighter tint, restoring the line tint after. */
+function emphasize(content, span, emphOpen, lineOpen) {
+    const [start, end] = span;
+    if (end <= start)
+        return content;
+    return content.slice(0, start) + emphOpen + content.slice(start, end) + lineOpen + content.slice(end);
+}
+/**
+ * Build the Claude-Code-style diff body: one full-width background-tinted
+ * Text per added/removed line (continuation lines of a wrapped long line keep
+ * the tint, exactly like Claude Code), plain context lines in between.
+ *
+ * `restoreBg` is the SGR that must follow each tinted line so the host Box's
+ * own background resumes on its right padding column (a bare `\x1b[49m` would
+ * punch a default-bg notch into the card edge).
+ */
+function buildDiffBody(diffText, theme, restoreBg) {
+    const mode = theme.getColorMode();
+    const cardBg = themeBgRgb(theme, 'toolSuccessBg', FALLBACK_CARD_BG);
+    const addedFg = themeFgRgb(theme, 'toolDiffAdded', FALLBACK_ADDED);
+    const removedFg = themeFgRgb(theme, 'toolDiffRemoved', FALLBACK_REMOVED);
+    const addedLineBg = bgOpen(mix(addedFg, cardBg, 0.24), mode);
+    const addedEmphBg = bgOpen(mix(addedFg, cardBg, 0.48), mode);
+    const removedLineBg = bgOpen(mix(removedFg, cardBg, 0.24), mode);
+    const removedEmphBg = bgOpen(mix(removedFg, cardBg, 0.48), mode);
+    const container = new Container();
+    const pushLine = (styled, lineBg) => {
+        const bgFn = lineBg === undefined ? undefined : (padded) => lineBg + padded + restoreBg;
+        container.addChild(new Text(styled, 0, 0, bgFn));
+    };
+    const pushRemoved = (lineNum, content) => {
+        pushLine(`${theme.fg('toolDiffRemoved', `-${lineNum}`)} ${content}`, removedLineBg);
+    };
+    const pushAdded = (lineNum, content) => {
+        pushLine(`${theme.fg('toolDiffAdded', `+${lineNum}`)} ${content}`, addedLineBg);
+    };
+    const lines = diffText.split('\n');
+    let i = 0;
+    while (i < lines.length) {
+        const parsed = parseDiffLine(lines[i]);
+        if (!parsed) {
+            pushLine(theme.fg('toolDiffContext', lines[i]));
+            i++;
+            continue;
+        }
+        if (parsed.prefix === '-') {
+            const removed = [];
+            while (i < lines.length) {
+                const p = parseDiffLine(lines[i]);
+                if (!p || p.prefix !== '-')
+                    break;
+                removed.push({ lineNum: p.lineNum, content: replaceTabs(p.content) });
+                i++;
+            }
+            const added = [];
+            while (i < lines.length) {
+                const p = parseDiffLine(lines[i]);
+                if (!p || p.prefix !== '+')
+                    break;
+                added.push({ lineNum: p.lineNum, content: replaceTabs(p.content) });
+                i++;
+            }
+            // Single-line modification → emphasize the changed span in a brighter tint.
+            if (removed.length === 1 && added.length === 1) {
+                const spans = changedSpans(removed[0].content, added[0].content);
+                pushRemoved(removed[0].lineNum, emphasize(removed[0].content, spans.old, removedEmphBg, removedLineBg));
+                pushAdded(added[0].lineNum, emphasize(added[0].content, spans.new, addedEmphBg, addedLineBg));
+            }
+            else {
+                for (const line of removed)
+                    pushRemoved(line.lineNum, line.content);
+                for (const line of added)
+                    pushAdded(line.lineNum, line.content);
+            }
+        }
+        else if (parsed.prefix === '+') {
+            pushAdded(parsed.lineNum, replaceTabs(parsed.content));
+            i++;
+        }
+        else {
+            pushLine(theme.fg('toolDiffContext', ` ${parsed.lineNum} ${replaceTabs(parsed.content)}`));
+            i++;
+        }
+    }
+    return container;
+}
+// ---------------------------------------------------------------------------
+// Tool definition wrapper
+// ---------------------------------------------------------------------------
+/** Replace the pi-rendered diff body inside the edit call Box (children:
+ *  [header, Spacer, body]) with the full-background rendering. No-op when
+ *  there is no successful preview (header-only or error states keep pi's
+ *  rendering untouched). */
+function restyleEditCallBox(box, theme) {
+    const preview = box.preview;
+    if (!preview || 'error' in preview || box.children.length < 2)
+        return;
+    const header = box.children[0];
+    box.clear();
+    box.addChild(header);
+    box.addChild(new Spacer(1));
+    // With a successful preview the edit card bg is always toolSuccessBg
+    // (mirrors pi's getEditHeaderBg), so tinted lines restore to that color.
+    box.addChild(buildDiffBody(preview.diff, theme, theme.getBgAnsi('toolSuccessBg')));
+}
+/**
+ * Attach-viewer tool definition for `edit`: pi's builtin definition drives
+ * all state (preview computation, header, success/error bg), then the diff
+ * body is re-skinned Claude-Code-style after every render pass.
+ */
+export function createCrtrEditToolDefinition(cwd) {
+    const builtin = createEditToolDefinition(cwd);
+    return {
+        name: 'edit',
+        label: 'edit',
+        description: 'Render edit diffs with full-line backgrounds in the attach viewer.',
+        parameters: {},
+        renderShell: 'self',
+        renderCall(args, theme, context) {
+            const component = builtin.renderCall(args, theme, context);
+            const callBox = context.state.callComponent;
+            if (callBox)
+                restyleEditCallBox(callBox, theme);
+            return component;
+        },
+        renderResult(result, options, theme, context) {
+            const component = builtin.renderResult(result, options, theme, context);
+            const callBox = context.state.callComponent;
+            if (callBox) {
+                // builtin renderResult re-ran buildEditCallComponent (pi styling) —
+                // restyle the refreshed body.
+                restyleEditCallBox(callBox, theme);
+                return component;
+            }
+            // Fallback path (no call box state, e.g. a bare result replay): render
+            // the result diff standalone. No host Box here, so restore to default bg.
+            const resultDiff = result?.details?.diff;
+            if (!context.isError && typeof resultDiff === 'string') {
+                const container = new Container();
+                container.addChild(new Spacer(1));
+                container.addChild(buildDiffBody(resultDiff, theme, '\x1b[49m'));
+                return container;
+            }
+            return component;
+        },
+    };
+}

package/dist/clients/attach/graph-overlay.d.ts

@@ -1,4 +1,5 @@
 import { type Component, type TUI } from '@earendil-works/pi-tui';
+import { type BindingResolution, type BindingId } from '../../core/keybindings/index.js';
 import { type CanvasSource } from '../../core/canvas/source.js';
 import type { AttachPalette } from './config-load.js';
 export declare class GraphOverlay implements Component {
@@ -6,6 +7,7 @@ export declare class GraphOverlay implements Component {
     private readonly self;
     private readonly getAsks;
     private readonly palette;
+    private bindings;
     private readonly source;
     private handle;
     /** Manual fold OVERRIDES (h collapses → userCollapsed, l expands → userExpanded);
@@ -17,7 +19,7 @@ export declare class GraphOverlay implements Component {
     private cursorId;
     /** Viewport scroll offset (row index of the top visible tree row). */
     private scrollTop;
-    /** Transient y/n confirm gate (kill). */
+    /** Transient close confirmation gate. */
     private pendingConfirm;
     private snapshot;
     private snapshotSeq;
@@ -26,7 +28,15 @@ export declare class GraphOverlay implements Component {
      *  default and makes Enter/m/x no-op instead of shelling local focus/kill
      *  commands against a remote graph row. See the file header. */
     private readonly remote;
-    constructor(tui: TUI, self: string, getAsks: () => Record<string, number>, palette: AttachPalette, source?: CanvasSource);
+    constructor(tui: TUI, self: string, getAsks: () => Record<string, number>, palette: AttachPalette, bindings: BindingResolution<BindingId>, source?: CanvasSource);
+    setBindings(bindings: BindingResolution<BindingId>): void;
+    private matches;
+    private hint;
+    /** Compose footer hints in priority order, dropping WHOLE entries that would
+     *  overflow `budget` visible columns rather than letting the border mid-clip
+     *  the tail — so the prioritized head (dismiss + remapped local actions) stays
+     *  discoverable even in a narrow overlay. */
+    private fitHints;
     isOpen(): boolean;
     open(): void;
     close(): void;

package/dist/clients/attach/graph-overlay.js

@@ -1,4 +1,4 @@
-// graph-overlay.ts — the alt+g GRAPH navigator overlay for `crtr surface attach` (Unit Q).
+// graph-overlay.ts — the configurable GRAPH navigator overlay for `crtr surface attach`.
 //
 // Native reimplementation of canvas-nav.ts's GRAPH modal as a pi-tui OVERLAY
 // (the viewer has no pi extension host). `tui.showOverlay(this, …)` mounts this
@@ -6,12 +6,9 @@
 // CAPTURES keyboard focus (mirrors extension-dialogs.ts);
 // `OverlayHandle.hide()` tears it down and restores focus to the editor. While
 // shown, every key routes to handleInput() — a fold-aware NERDTree of the
-// active CanvasSource subscription graph with the canvas-nav keymap:
-//   j/k move · h/l fold/ascend-descend · g/G top/bottom · ↵ focus (swap into
-//   this pane) · m focus manager · x kill (y/n confirm) · esc close.
-// `e` is a tmux-menu prefixBind, not a GRAPH key, so it is swallowed (per
-// canvas-nav). Model/render uses the CanvasSource snapshot built for this
-// overlay; keys are decoded with pi-tui's canonical matchesKey (kitty/CSI-u aware).
+// active CanvasSource subscription graph. Actions and footer hints resolve from
+// the crouter binding catalog; input is decoded with pi-tui's canonical matcher
+// (kitty/CSI-u aware).
 //
 // Enter/m/x SHELL `crtr` out-of-process (node focus / node lifecycle close) — the viewer
 // itself never spawns pi or opens a session (the §0 one-writer invariant). It
@@ -30,6 +27,7 @@
 // graph structure + node metadata ONLY.
 import { execFile } from 'node:child_process';
 import { matchesKey, truncateToWidth } from '@earendil-works/pi-tui';
+import { formatBinding, matchesPiTuiInput, } from '../../core/keybindings/index.js';
 import { fullName } from '../../core/canvas/index.js';
 import { activeFaultForDisplay } from '../../core/canvas/render.js';
 import { readFault } from '../../core/runtime/fault.js';
@@ -43,18 +41,34 @@ import { beginFrame, navLabel, nodeGlyph, tokensCell, cycleBadge, askBadge, acti
 // clipped. margin keeps it off the screen edges.
 const HEIGHT_PCT = 0.72;
 const OVERLAY_OPTIONS = { anchor: 'center', width: '72%', minWidth: 48, maxHeight: '72%', margin: 1 };
-// Viewer-specific hint: nav-model's shared GRAPH_HINT advertises "e expand",
-// but that key is the tmux pane-expand prefix-bind canvas-nav installs in its
-// host pane — the attach overlay has no such bind and swallows `e`, so the key
-// would do nothing here. Drop it.
-const GRAPH_HINT = `${DIM}jk move · hl fold · ↵ focus · x kill · m mgr · esc${RESET}`;
-// REMOTE mode drops focus/kill/mgr — Enter/m/x no-op there (see the file header).
-const GRAPH_HINT_REMOTE = `${DIM}jk move · hl fold · esc${RESET}`;
+// The footer is width-budgeted (fitHints drops WHOLE trailing entries that
+// won't fit rather than mid-clipping the tail). List the keys a user most needs
+// to discover first — dismiss (the only way out) then the remapped local
+// actions — so they survive at the narrowest overlay width; routine navigation
+// trails and is the first to be dropped.
+const GRAPH_PRIMARY_LOCAL_HINTS = [
+    ['crtr.graph.dismiss', 'dismiss'],
+    ['crtr.graph.focus', 'focus'],
+    ['crtr.graph.close-subtree', 'close'],
+    ['crtr.graph.focus-manager', 'manager'],
+];
+const GRAPH_PRIMARY_REMOTE_HINTS = [
+    ['crtr.graph.dismiss', 'dismiss'],
+];
+const GRAPH_NAV_HINTS = [
+    ['crtr.graph.down', 'down'],
+    ['crtr.graph.up', 'up'],
+    ['crtr.graph.first', 'first'],
+    ['crtr.graph.last', 'last'],
+    ['crtr.graph.collapse-or-manager', 'fold/manager'],
+    ['crtr.graph.expand-or-child', 'expand/child'],
+];
 export class GraphOverlay {
     tui;
     self;
     getAsks;
     palette;
+    bindings;
     source;
     handle;
     /** Manual fold OVERRIDES (h collapses → userCollapsed, l expands → userExpanded);
@@ -66,7 +80,7 @@ export class GraphOverlay {
     cursorId;
     /** Viewport scroll offset (row index of the top visible tree row). */
     scrollTop = 0;
-    /** Transient y/n confirm gate (kill). */
+    /** Transient close confirmation gate. */
     pendingConfirm;
     snapshot;
     snapshotSeq = 0;
@@ -75,14 +89,43 @@ export class GraphOverlay {
      *  default and makes Enter/m/x no-op instead of shelling local focus/kill
      *  commands against a remote graph row. See the file header. */
     remote;
-    constructor(tui, self, getAsks, palette, source = localCanvasSource) {
+    constructor(tui, self, getAsks, palette, bindings, source = localCanvasSource) {
         this.tui = tui;
         this.self = self;
         this.getAsks = getAsks;
         this.palette = palette;
+        this.bindings = bindings;
         this.source = source;
         this.remote = source instanceof RemoteCanvasSource;
     }
+    setBindings(bindings) {
+        this.bindings = bindings;
+        if (this.handle !== undefined)
+            this.tui.requestRender();
+    }
+    matches(id, data) {
+        return matchesPiTuiInput(this.bindings, id, data, (input, gesture) => matchesKey(input, gesture));
+    }
+    hint(entries) {
+        return entries.flatMap(([id, label]) => this.bindings.gestures(id).length === 0 ? [] : [`${formatBinding(this.bindings, id)} ${label}`]);
+    }
+    /** Compose footer hints in priority order, dropping WHOLE entries that would
+     *  overflow `budget` visible columns rather than letting the border mid-clip
+     *  the tail — so the prioritized head (dismiss + remapped local actions) stays
+     *  discoverable even in a narrow overlay. */
+    fitHints(entries, budget) {
+        const SEP = 3; // visible width of ' · '
+        const out = [];
+        let used = 0;
+        for (const piece of this.hint(entries)) {
+            const add = (out.length === 0 ? 0 : SEP) + visibleWidth(piece);
+            if (used + add > budget)
+                break;
+            out.push(piece);
+            used += add;
+        }
+        return out.join(' · ');
+    }
     isOpen() {
         return this.handle !== undefined;
     }
@@ -341,8 +384,14 @@ export class GraphOverlay {
             ? `${BOLD}⌗ canvas graph${RESET} ${DIM}(${cursorIdx + 1}/${rows.length})${RESET}`
             : `${BOLD}⌗ canvas graph${RESET} ${DIM}(loading)${RESET}`;
         const hint = this.pendingConfirm !== undefined
-            ? `${YELLOW}${this.pendingConfirm.label} ${BOLD}y/n${RESET}`
-            : this.remote ? GRAPH_HINT_REMOTE : GRAPH_HINT;
+            ? `${YELLOW}${this.pendingConfirm.label} ${BOLD}${this.hint([
+                ['crtr.graph.confirm.accept', 'accept'],
+                ['crtr.graph.confirm.cancel', 'cancel'],
+            ]).join(' · ')}${RESET}`
+            : `${DIM}${this.fitHints([
+                ...(this.remote ? GRAPH_PRIMARY_REMOTE_HINTS : GRAPH_PRIMARY_LOCAL_HINTS),
+                ...GRAPH_NAV_HINTS,
+            ], Math.max(1, width - 5))}${RESET}`; // budget matches borderRow's span
         // Frame the panel: title in the top border, hint in the bottom border, tree
         // rows boxed with themed side bars (truncate/pad to the inner width so the
         // right edge stays flush and opaque).
@@ -385,18 +434,19 @@ export class GraphOverlay {
     dispatch(data) {
         // y/n confirm gate takes precedence over everything.
         if (this.pendingConfirm !== undefined) {
-            if (matchesKey(data, 'y')) {
+            if (this.matches('crtr.graph.confirm.accept', data)) {
                 const act = this.pendingConfirm.action;
                 this.pendingConfirm = undefined;
                 act();
             }
             else {
-                this.pendingConfirm = undefined; // any other key cancels
+                // Preserve GRAPH's modal fallback: any non-accept key cancels close.
+                this.pendingConfirm = undefined;
             }
             this.tui.requestRender();
             return;
         }
-        if (matchesKey(data, 'escape')) {
+        if (this.matches('crtr.graph.dismiss', data)) {
             this.close();
             return;
         }
@@ -427,29 +477,29 @@ export class GraphOverlay {
             }
             return idx;
         };
-        if (matchesKey(data, 'j')) {
+        if (this.matches('crtr.graph.down', data)) {
             idx = step(idx, 1);
             this.cursorId = rows[idx]?.id ?? this.cursorId;
             this.tui.requestRender();
             return;
         }
-        if (matchesKey(data, 'k')) {
+        if (this.matches('crtr.graph.up', data)) {
             idx = step(idx, -1);
             this.cursorId = rows[idx]?.id ?? this.cursorId;
             this.tui.requestRender();
             return;
         }
-        if (matchesKey(data, 'g')) {
+        if (this.matches('crtr.graph.first', data)) {
             this.cursorId = rows[edge(1)]?.id ?? this.cursorId;
             this.tui.requestRender();
             return;
         }
-        if (matchesKey(data, 'shift+g')) {
+        if (this.matches('crtr.graph.last', data)) {
             this.cursorId = rows[edge(-1)]?.id ?? this.cursorId;
             this.tui.requestRender();
             return;
         }
-        if (matchesKey(data, 'h')) {
+        if (this.matches('crtr.graph.collapse-or-manager', data)) {
             if (cur !== undefined && cur.hasKids && !cur.collapsed) {
                 this.userCollapsed.add(cur.id);
                 this.userExpanded.delete(cur.id);
@@ -463,7 +513,7 @@ export class GraphOverlay {
             }
             return;
         }
-        if (matchesKey(data, 'l')) {
+        if (this.matches('crtr.graph.expand-or-child', data)) {
             if (cur !== undefined && cur.collapsed && cur.hasKids) {
                 this.userExpanded.add(cur.id);
                 this.userCollapsed.delete(cur.id);
@@ -477,12 +527,12 @@ export class GraphOverlay {
             }
             return;
         }
-        // Enter/m/x drive local lifecycle/focus (`crtr node focus` / `crtr node
+        // Focus/manager/close actions drive local lifecycle/focus (`crtr node focus` / `crtr node
         // lifecycle close`) against `this.cursorId` — a REMOTE graph row's id has no
         // relationship to this machine's canvas.db (or, worse, collides with one
         // that does), so all three no-op in remote mode instead of shelling a local
-        // mutation command against a remote id. GRAPH_HINT_REMOTE drops their hints.
-        if (matchesKey(data, 'enter')) {
+        // mutation command against a remote id. Their hints are omitted remotely.
+        if (this.matches('crtr.graph.focus', data)) {
             if (this.remote)
                 return;
             if (this.cursorId !== undefined)
@@ -490,7 +540,7 @@ export class GraphOverlay {
             this.close();
             return;
         }
-        if (matchesKey(data, 'm')) {
+        if (this.matches('crtr.graph.focus-manager', data)) {
             if (this.remote)
                 return;
             const mgr = snapshot?.managerOf.get(this.self);
@@ -500,7 +550,7 @@ export class GraphOverlay {
             }
             return;
         }
-        if (matchesKey(data, 'x')) {
+        if (this.matches('crtr.graph.close-subtree', data)) {
             if (this.remote)
                 return;
             const target = this.cursorId ?? this.self;
@@ -510,7 +560,7 @@ export class GraphOverlay {
             this.tui.requestRender();
             return;
         }
-        // Modal: swallow everything else (incl. the `e` tmux-menu bind) so a stray
+        // Modal: swallow everything else so a stray
         // key never reaches the editor underneath.
     }
     // -------------------------------------------------------------------------

package/dist/clients/attach/input-controller.d.ts

@@ -30,6 +30,10 @@ export interface InputControllerHooks {
     /** OPTIONAL: copy the last assistant message to the clipboard — forwarded to
      *  the slash context so `/copy` works. Wired by attach-cmd (it owns ChatView). */
     onCopy?: () => void;
+    /** OPTIONAL: recolor the editor's name chip — forwarded to the slash context
+     *  so `/color` paints it (`null` clears). Wired by attach-cmd (it owns the
+     *  TitledEditor). */
+    onColor?: (color: string | null) => void;
     /** OPTIONAL: Ctrl+O / app.tools.expand — flip global tool-output expansion in
      *  the render layer (ChatView owns the components). Absent → the key no-ops. */
     onToggleToolsExpand?: () => void;
@@ -51,6 +55,13 @@ export interface InputControllerHooks {
     openLoginPicker?: () => void;
     /** OPTIONAL: open the native /logout provider picker (viewer-local auth flow). */
     openLogoutPicker?: () => void;
+    /** OPTIONAL: an EXPLICIT model choice was just issued (native /model picker
+     *  select, or `/model <arg>`) — fired alongside the `set_model` frame, with
+     *  the exact string requested. attach-cmd arms its persist-as-default write
+     *  on this and completes it when the broker's `model_changed` confirms the
+     *  switch (so a rejected spec never gets persisted). Absent → picks stay
+     *  session-only (e.g. a remote attach, which must not write local config). */
+    onExplicitModelSet?: (model: string) => void;
 }
 export declare class InputController {
     private readonly tui;
@@ -59,6 +70,10 @@ export declare class InputController {
     private readonly hooks;
     /** The currently-rendered blocking dialog, if any (for supersede/dismiss). */
     private dialog;
+    /** The request id of {@link dialog} — so a broker-driven `extension_ui_dismiss`
+     *  tears down ONLY the matching overlay (correlated dismissal), never an
+     *  unrelated one. */
+    private dialogId;
     /** The currently-open native picker overlay, if any (for supersede/dismiss). */
     private picker;
     /** Monotonic open counter — a slow read-op reply whose `seq` is no longer the
@@ -75,9 +90,17 @@ export declare class InputController {
     private emitCommand;
     /** Render extension UI requests from the broker. Blocking dialogs route their
      *  answer back to the broker; non-blocking notify requests become the viewer's
-     *  normal notice line. Supersedes any dialog already on screen (e.g. a re-route
-     *  on control handoff) by dismissing it first. */
+     *  normal notice line and NOTHING else — a notify must never tear down an
+     *  unrelated blocking dialog whose broker request is still pending. A dialog is
+     *  torn down only by (a) a NEW blocking dialog superseding it (control handoff
+     *  re-route), (b) its own answer, or (c) a correlated {@link dismissDialog}
+     *  from the broker (the request was aborted/timed out out-of-band). */
     attachDialog(req: RpcExtensionUIRequest): void;
+    /** Broker-driven correlated dismissal: the broker resolved this request itself
+     *  (its request was aborted out-of-band — e.g. a local OAuth loopback callback
+     *  won the race against this manual-paste dialog — or its timeout fired). Tear
+     *  down ONLY the overlay whose id matches; leave any other dialog untouched. */
+    dismissDialog(id: string): void;
     /** Feed the latest engine state so read-only commands (e.g. `/session`) report
      *  current values. Optional; the controller works without it. */
     setState(state: BrokerSnapshot['state']): void;
@@ -100,6 +123,9 @@ export declare class InputController {
      *  once we focus an inner child. A throwing builder is caught into a notice (m5). */
     private showPicker;
     private openModelPicker;
+    /** Unlike the other pickers, the session picker opens IMMEDIATELY — its
+     *  component owns async loaders (with a Loading header), so the multi-second
+     *  session-dir scan runs off the open path instead of blocking it. */
     private openSessionPicker;
     private openTreePicker;
     private openForkPicker;