@crouton-kit/crouter 0.3.68 → 0.3.78

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/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;

package/dist/clients/attach/input-controller.js

@@ -52,7 +52,7 @@ const MAX_FRAME_BYTES = BROKER_READ_CAPS.maxLineBytes - 4 * 1024 * 1024;
  *  see slash-commands.ts's REMOTE_SAFE_BUILTIN_NAMES gate). */
 const DRIVE_FRAME_TYPES = new Set([
     'prompt', 'steer', 'follow_up', 'abort', 'bash',
-    'set_model', 'cycle_model', 'cycle_thinking', 'set_thinking_level', 'dequeue',
+    'set_model', 'cycle_model', 'cycle_ladder', 'cycle_thinking', 'set_thinking_level', 'dequeue',
     'set_auto_retry', 'set_auto_compaction', 'compact', 'new_session',
     'switch_session', 'fork', 'set_session_name', 'navigate_tree', 'reload',
     'export', 'clone', 'share', 'request_control', 'release_control', 'reload_auth',
@@ -64,6 +64,10 @@ export class InputController {
     hooks;
     /** The currently-rendered blocking dialog, if any (for supersede/dismiss). */
     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. */
+    dialogId;
     /** The currently-open native picker overlay, if any (for supersede/dismiss). */
     picker;
     /** Monotonic open counter — a slow read-op reply whose `seq` is no longer the
@@ -92,8 +96,11 @@ export class InputController {
     }
     /** 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) {
         if (req.method === 'notify') {
             const prefix = req.notifyType === 'error' ? 'Error: ' : req.notifyType === 'warning' ? 'Warning: ' : '';
@@ -102,12 +109,26 @@ export class InputController {
             return;
         }
         this.dialog?.dismiss();
+        this.dialogId = req.id;
         this.dialog = renderDialog(this.tui, req, (resp) => {
             this.dialog = undefined;
+            this.dialogId = undefined;
             this.hooks.onDialogResponse(resp);
         }, this.keybindings);
         this.tui.requestRender();
     }
+    /** 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) {
+        if (this.dialogId !== id)
+            return;
+        this.dialog?.dismiss();
+        this.dialog = undefined;
+        this.dialogId = undefined;
+        this.tui.requestRender();
+    }
     /** Feed the latest engine state so read-only commands (e.g. `/session`) report
      *  current values. Optional; the controller works without it. */
     setState(state) {
@@ -174,6 +195,7 @@ export class InputController {
             onGraph: this.hooks.onGraph,
             onQuit: this.hooks.onQuit,
             onCopy: this.hooks.onCopy,
+            onColor: this.hooks.onColor,
             openModelPicker: () => void this.openModelPicker(),
             openSessionPicker: () => void this.openSessionPicker(),
             openForkPicker: () => void this.openForkPicker(),
@@ -182,6 +204,7 @@ export class InputController {
             openScopedModelsPicker: () => void this.openScopedModelsPicker(),
             openLoginPicker: this.hooks.openLoginPicker ? () => this.hooks.openLoginPicker() : undefined,
             openLogoutPicker: this.hooks.openLogoutPicker ? () => this.hooks.openLogoutPicker() : undefined,
+            onExplicitModelSet: this.hooks.onExplicitModelSet,
         };
     }
     // -------------------------------------------------------------------------
@@ -299,10 +322,20 @@ export class InputController {
         this.tui.requestRender();
     }
     openModelPicker() {
-        return this.openPicker({ type: 'list_models' }, 'list_models', 'model', (data, close) => buildModelPicker(this.tui, data, this.send, close));
+        return this.openPicker({ type: 'list_models' }, 'list_models', 'model', (data, close) => buildModelPicker(this.tui, data, this.send, close, this.hooks.onExplicitModelSet));
     }
+    /** 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. */
     openSessionPicker() {
-        return this.openPicker({ type: 'list_sessions', scope: 'cwd' }, 'list_sessions', 'session', (data, close) => buildSessionPicker(this.tui, data, this.hooks.onRequest, this.keybindings, this.send, close));
+        const request = this.hooks.onRequest;
+        if (request === undefined) {
+            this.notify("The session picker isn't available in this viewer");
+            return Promise.resolve();
+        }
+        this.openSeq++; // supersede any in-flight fetch-first picker open
+        this.showPicker((controls) => buildSessionPicker(this.tui, this.state?.sessionFile, request, this.keybindings, this.send, controls.close));
+        return Promise.resolve();
     }
     openTreePicker() {
         return this.openPicker({ type: 'get_tree' }, 'get_tree', 'tree', (data, close) => buildTreePicker(this.tui, data, this.send, close));

package/dist/clients/attach/mermaid-render.js

@@ -18,7 +18,7 @@
 //
 // Scope (v1): only ```mermaid fences. The wider termrender directive vocabulary
 // is deliberately out of scope — see the base prompt's Diagrams note.
-import { isRendererReady, renderMarkdown } from '@crouton-kit/humanloop';
+import { ensureRenderer, isRendererReady, renderMarkdown } from '@crouton-kit/humanloop';
 /** A complete mermaid fence: ```mermaid (opening info string) ... closing ```.
  *  Line-anchored (m flag), non-greedy body (captured). An UNCLOSED fence (still
  *  streaming) does not match, so mid-stream text is left raw and only settles to
@@ -71,7 +71,10 @@ function stripBlankEdges(lines) {
  *  diagrams have no width control and overflow rather than truncate), which is
  *  stripped here, so an approximate pane width is fine. */
 export function transformMermaidFences(text, width) {
-    if (!textHasMermaid(text) || !isRendererReady())
+    if (!textHasMermaid(text))
+        return text;
+    ensureRenderer();
+    if (!isRendererReady())
         return text;
     return text.replace(MERMAID_FENCE, (whole, body) => {
         try {

package/dist/clients/attach/pickers.d.ts

@@ -1,5 +1,5 @@
 import { type Component, type KeybindingsManager, type TUI } from '@earendil-works/pi-tui';
-import type { ClientToBroker, GetSettingsData, GetTreeData, ListModelsData, ListScopedModelsData, ListSessionsData } from '../../core/runtime/broker-protocol.js';
+import type { ClientToBroker, GetSettingsData, GetTreeData, ListModelsData, ListScopedModelsData } from '../../core/runtime/broker-protocol.js';
 import type { ReadOpRequest } from './view-socket.js';
 /** A built picker overlay: the `component` to show, and the `focus` target the
  *  caller must `setFocus` (the component itself, or the inner list that owns
@@ -28,12 +28,13 @@ type Notify = (message: string) => void;
 /** `/model` (and ctrl+l) — the real model selector with search + scope toggle.
  *  Select → `set_model` with the resolved `provider/id` (the broker's
  *  `findModelSpec` requires that form). */
-export declare function buildModelPicker(tui: TUI, data: ListModelsData, send: Send, close: Close): Picker;
-/** `/resume` — the real session selector. Reconstructs from async loaders that
- *  fetch each scope on demand (cwd is pre-fetched so the current-session marker
- *  shows immediately; the `all` scope loads only on toggle). Select →
- *  `switch_session`. Rename/delete are out of scope (no command frame). */
-export declare function buildSessionPicker(tui: TUI, prefetchedCwd: ListSessionsData, request: Request, keybindings: KeybindingsManager, send: Send, close: Close): Picker;
+export declare function buildModelPicker(tui: TUI, data: ListModelsData, send: Send, close: Close, onSelect?: (model: string) => void): Picker;
+/** `/resume` — the real session selector. Opens INSTANTLY and reconstructs from
+ *  async loaders that fetch each scope on demand — the component's own Loading
+ *  header covers the scan (listing a large session dir takes seconds, so the
+ *  fetch must stay off the open path). Select → `switch_session`. Rename/delete
+ *  are out of scope (no command frame). */
+export declare function buildSessionPicker(tui: TUI, currentSessionFile: string | undefined, request: Request, keybindings: KeybindingsManager, send: Send, close: Close): Picker;
 /** `/tree` — the real tree navigator (pure data). Select → `navigate_tree`.
  *  Label-edit is out of scope (no command frame) → no `onLabelChange`. */
 export declare function buildTreePicker(tui: TUI, data: GetTreeData, send: Send, close: Close): Picker;

package/dist/clients/attach/pickers.js

@@ -51,7 +51,7 @@ function modelRegistryAdapter(all, available) {
 /** `/model` (and ctrl+l) — the real model selector with search + scope toggle.
  *  Select → `set_model` with the resolved `provider/id` (the broker's
  *  `findModelSpec` requires that form). */
-export function buildModelPicker(tui, data, send, close) {
+export function buildModelPicker(tui, data, send, close, onSelect) {
     const all = data.models;
     const availableSet = new Set(data.availableIds);
     const available = all.filter((m) => availableSet.has(`${m.provider}/${m.id}`));
@@ -60,29 +60,23 @@ export function buildModelPicker(tui, data, send, close) {
         : undefined;
     const component = new ModelSelectorComponent(tui, current, SettingsManager.inMemory(), modelRegistryAdapter(all, available), data.scopedModels, (model) => {
         send({ type: 'set_model', model: `${model.provider}/${model.id}` });
+        onSelect?.(`${model.provider}/${model.id}`);
         close();
     }, () => close());
     return { component, focus: component };
 }
-/** `/resume` — the real session selector. Reconstructs from async loaders that
- *  fetch each scope on demand (cwd is pre-fetched so the current-session marker
- *  shows immediately; the `all` scope loads only on toggle). Select →
- *  `switch_session`. Rename/delete are out of scope (no command frame). */
-export function buildSessionPicker(tui, prefetchedCwd, request, keybindings, send, close) {
+/** `/resume` — the real session selector. Opens INSTANTLY and reconstructs from
+ *  async loaders that fetch each scope on demand — the component's own Loading
+ *  header covers the scan (listing a large session dir takes seconds, so the
+ *  fetch must stay off the open path). Select → `switch_session`. Rename/delete
+ *  are out of scope (no command frame). */
+export function buildSessionPicker(tui, currentSessionFile, request, keybindings, send, close) {
     const revive = (d) => d.sessions.map((s) => ({ ...s, created: new Date(s.created), modified: new Date(s.modified) }));
-    let firstCwd = true;
-    const currentLoader = async () => {
-        if (firstCwd) {
-            firstCwd = false;
-            return revive(prefetchedCwd);
-        }
-        return revive((await request({ type: 'list_sessions', scope: 'cwd' })));
-    };
-    const allLoader = async () => revive((await request({ type: 'list_sessions', scope: 'all' })));
-    const component = new SessionSelectorComponent(currentLoader, allLoader, (path) => {
+    const loader = (scope) => async () => revive((await request({ type: 'list_sessions', scope })));
+    const component = new SessionSelectorComponent(loader('cwd'), loader('all'), (path) => {
         send({ type: 'switch_session', path });
         close();
-    }, () => close(), () => close(), () => tui.requestRender(), { showRenameHint: false, keybindings: keybindings }, prefetchedCwd.currentSessionFile);
+    }, () => close(), () => close(), () => tui.requestRender(), { showRenameHint: false, keybindings: keybindings }, currentSessionFile);
     return { component, focus: component };
 }
 /** `/tree` — the real tree navigator (pure data). Select → `navigate_tree`.
@@ -141,6 +135,8 @@ export function buildSettingsPicker(data, send, close, notify) {
         onClearOnShrinkChange: out,
         onShowTerminalProgressChange: out,
         onWarningsChange: out,
+        onShowCacheMissNoticesChange: out,
+        onOutputPadChange: out,
     };
     const component = new SettingsSelectorComponent(data.settings, callbacks);
     return { component, focus: component.getSettingsList() };

package/dist/clients/attach/slash-commands.d.ts

@@ -46,10 +46,19 @@ export interface SlashContext {
     openTreePicker?: () => void;
     openSettingsPicker?: () => void;
     openScopedModelsPicker?: () => void;
+    /** An EXPLICIT model choice was just issued via `/model <arg>` — mirrors
+     *  `InputControllerHooks.onExplicitModelSet` (the picker path fires it from
+     *  `buildModelPicker`). attach-cmd persists the choice as the node kind's
+     *  default once the broker confirms with `model_changed`. */
+    onExplicitModelSet?: (model: string) => void;
     /** Open the native /login provider selector. */
     openLoginPicker?: () => void;
     /** Open the native /logout provider selector. */
     openLogoutPicker?: () => void;
+    /** `/color` — recolor the editor's name chip (the "bubble" /rename names).
+     *  `null` clears back to the default chip. Wired by attach-cmd (it owns the
+     *  TitledEditor); absent → only the tmux pane outline is painted. */
+    onColor?: (color: string | null) => void;
 }
 /** Canvas slash-commands — implemented NATIVE in the viewer, the ONLY live host:
  *  the broker binds mode:'print', so broker pi-extensions never run their