@crouton-kit/crouter 0.3.27 → 0.3.29

package/dist/clients/attach/attach-cmd.js

@@ -15,18 +15,44 @@
 // `crtr attach <node>` form is not expressible without a framework change. attach
 // is therefore a BRANCH wrapping a single leaf: `crtr attach to <node>`.
 import { randomUUID } from 'node:crypto';
-import { Container, ProcessTerminal, Text, TUI, matchesKey, } from '@earendil-works/pi-tui';
-import { CustomEditor, getSelectListTheme, } from '@earendil-works/pi-coding-agent';
+import { execFile } from 'node:child_process';
+import { CombinedAutocompleteProvider, Container, ProcessTerminal, Text, TUI, matchesKey, truncateToWidth, } from '@earendil-works/pi-tui';
+import { DynamicBorder, getSelectListTheme, } from '@earendil-works/pi-coding-agent';
 import { defineBranch, defineLeaf } from '../../core/command.js';
 import { InputError } from '../../core/io.js';
-import { getNode } from '../../core/canvas/index.js';
+import { getNode, getRow } from '../../core/canvas/index.js';
 // tmux driver verbs only through placement (the §5.1 model-over-driver seam) —
 // never `core/runtime/tmux.js` directly.
-import { setPaneOption, currentTmux } from '../../core/runtime/placement.js';
+import { setPaneOption, currentTmux, inTmux, installMenuBinding } from '../../core/runtime/placement.js';
+import { climbRoot, visibleWidth } from '../../core/canvas/nav-model.js';
 import { ChatView } from './chat-view.js';
 import { InputController } from './input-controller.js';
-import { applyTheme, createKeybindingsManager } from './config-load.js';
-import { BrokerUnavailableError, ViewSocketClient } from './view-socket.js';
+import { writeClipboardText } from './clipboard-text.js';
+import { buildCanvasPanelLines } from './canvas-panels.js';
+import { GraphOverlay } from './graph-overlay.js';
+import { slashCommandList } from './slash-commands.js';
+import { applyTheme, attachPalette, createKeybindingsManager, defaultAgentDir, mirrorKeybindingsToEditor, mirrorKittyProtocolToEditor, } from './config-load.js';
+import { buildLoginPicker, buildLogoutPicker } from './auth-pickers.js';
+import { TitledEditor, thinkingBorderColor, thinkingTitleStyle, defaultTitleStyle } from './titled-editor.js';
+import { fetchGitInfo } from './git-info.js';
+import { BrokerUnavailableError, ViewSocketClient, reconnectShouldGiveUp } from './view-socket.js';
+/** Async per-node ask-map fetch (NON-blocking — the viewer must never block its
+ *  input pump on a shell-out, unlike canvas-nav's execFileSync). Buckets a whole
+ *  sub-DAG's pending asks in one `crtr` process; on any error the callback is not
+ *  invoked, so the caller keeps its last good map. */
+function fetchAsksAsync(rootId, cb) {
+    execFile('crtr', ['canvas', 'attention', 'map', '--view', rootId, '--json'], { timeout: 2_500, maxBuffer: 4 * 1024 * 1024 }, (err, stdout) => {
+        if (err)
+            return;
+        try {
+            const parsed = JSON.parse(stdout.trim());
+            cb(parsed.counts ?? {});
+        }
+        catch {
+            /* malformed — keep last map */
+        }
+    });
+}
 /** Run the interactive attach session against `nodeId`. Resolves when the
  *  viewer detaches (ctrl+c/ctrl+d), the broker goes away, or a signal lands —
  *  always restoring the terminal first. */
@@ -100,49 +126,241 @@ async function runAttach(nodeId, observer) {
     // 1. Theme + keybindings FIRST — pi's components throw "Theme not initialized"
     //    otherwise (T5 contract). One KeybindingsManager feeds BOTH editor + input.
     applyTheme({ cwd: meta.cwd });
+    const pal = attachPalette();
     const km = createKeybindingsManager();
-    // 2. TUI + chat container + editor.
-    const tui = new TUI(new ProcessTerminal());
+    // pi-coding-agent's CustomEditor may resolve a SEPARATE pi-tui instance whose
+    // global keybindings we'd otherwise never set — mirror the manager onto it so
+    // the editor honors the user's bindings (e.g. alt+enter → newline). No-op on a
+    // deduped install. Awaited before tui.start so the editor never handles a key
+    // against stale defaults.
+    await mirrorKeybindingsToEditor(km);
+    // The front door installs the Alt+C menu binding before it ever loads a theme,
+    // so it lands unstyled. Now that this viewer process HAS themed (applyTheme
+    // above populated the live-theme global), re-install it so the menu picks up
+    // the distinct-surface background. Idempotent re-bind; tmux-only, best-effort.
+    if (inTmux()) {
+        try {
+            installMenuBinding();
+        }
+        catch { /* best-effort */ }
+    }
+    // 2. TUI + layout containers + editor. Top-to-bottom render order (set at
+    //    step 8): chat · rule · badge · managers (↑ subscriber) · editor (themed
+    //    border) · reports (↓ subscriptions) · status bar. A themed DynamicBorder
+    //    rule divides the scrolling chat from the fixed chrome below it. The badge
+    //    sits in the BOTTOM-anchored chrome
+    //    stack (directly above managers), NOT as the topmost child: pi-tui anchors
+    //    the viewport to the cursor at the bottom, so a topmost badge scrolls off
+    //    into scrollback the instant the chat exceeds one screen. The badge + the
+    //    two canvas panels reproduce the pi-extension chrome natively (Unit Q).
+    const procTerminal = new ProcessTerminal();
+    const tui = new TUI(procTerminal);
     const chatContainer = new Container();
+    const chrome = new Container(); // a themed rule dividing scrolling chat from the fixed chrome below
+    const managers = new Container();
+    const reports = new Container();
+    const queued = new Container(); // pending steering/follow-up messages, above the editor
+    const pickerPanel = new Container(); // native pickers (/model etc.), inline directly under the editor
     const footer = new Container();
-    const editorTheme = { borderColor: (s) => s, selectList: getSelectListTheme() };
-    const editor = new CustomEditor(tui, editorTheme, km, { paddingX: 1 });
+    chrome.addChild(new DynamicBorder(pal.border));
+    const editorTheme = { borderColor: pal.border, selectList: getSelectListTheme() };
+    // TitledEditor paints the session name into its top border (solid-background
+    // chip) and tracks a thinking-level border color, both set from live state below.
+    const editor = new TitledEditor(tui, editorTheme, km, { paddingX: 1 });
+    // Slash-command autocomplete: builtins + native canvas commands now; enriched
+    // with the broker's engine/extension/skill commands on the get_commands ack.
+    const setCommands = (commands) => {
+        editor.setAutocompleteProvider(new CombinedAutocompleteProvider(slashCommandList(commands), meta.cwd));
+    };
+    setCommands();
     // 3. Render layer (T5). ChatView owns the chat scroll + activity spinner; the
     //    footer/status line below is ours, so onFooterEvent is left unset (footer
     //    updates flow through handleBrokerFrame's single update path instead).
-    const chatView = new ChatView(tui, chatContainer, { cwd: meta.cwd });
+    const chatView = new ChatView(tui, chatContainer, { cwd: meta.cwd, palette: pal });
     // 4. Footer/status line — surfaces role + live state + transient notices.
     const clientId = randomUUID();
     let role = observer ? 'observer' : 'controller';
+    let brokerAgentDir;
     let liveState;
     let notice = '';
+    // Live context occupancy for the footer: `contextTokens` is the prompt-token
+    // count of the most recent assistant turn (input + cacheRead + cacheWrite =
+    // everything sent to the model, since with prompt caching bare `input` is just
+    // the uncached slice and badly understates the context), read off the relayed
+    // message_end stream. It rides data the viewer already receives, so the
+    // indicator needs no broker/protocol change.
+    let contextTokens;
+    const formatTokens = (n) => n >= 1000 ? `${(n / 1000).toFixed(n >= 10000 ? 0 : 1)}k` : `${n}`;
+    // A themed, aligned status bar: live state on the LEFT (role · model · streaming
+    // · context · queued), the transient notice pushed to the RIGHT edge — not jammed inline.
     const renderFooter = () => {
-        const bits = [role === 'controller' ? 'drive' : 'read-only'];
+        const segs = [
+            role === 'controller' ? pal.active('● drive') : pal.muted('○ read-only'),
+        ];
         if (liveState?.model)
-            bits.push(liveState.model);
+            segs.push(pal.info(liveState.model));
         if (liveState?.isStreaming)
-            bits.push('streaming');
-        if (liveState?.sessionName)
-            bits.push(liveState.sessionName);
-        if (liveState && liveState.pendingMessageCount > 0)
-            bits.push(`queued ${liveState.pendingMessageCount}`);
-        let line = `\x1b[2m${bits.join(' · ')}\x1b[22m`;
-        if (notice)
-            line += `   \x1b[33m${notice}\x1b[39m`;
+            segs.push(pal.active('streaming'));
+        if (contextTokens !== undefined) {
+            segs.push(pal.muted(`${formatTokens(contextTokens)} ctx`));
+        }
+        if (liveState && liveState.pendingMessageCount > 0) {
+            segs.push(pal.muted(`queued ${liveState.pendingMessageCount}`));
+        }
+        const left = segs.join(pal.muted(' · '));
+        const right = notice ? pal.warning(`⚠ ${notice}`) : '';
+        // Text(_, 1, 0) pads 1 col each side, so the usable span is columns - 2.
+        const span = Math.max(1, (process.stdout.columns ?? 80) - 2);
+        const rightW = visibleWidth(right);
+        // Truncate the left segment (ANSI-aware) so a long model/notice never wraps;
+        // the right-aligned notice keeps its slot.
+        const maxLeft = right ? Math.max(0, span - rightW - 1) : span;
+        const leftFit = visibleWidth(left) > maxLeft ? truncateToWidth(left, maxLeft, '…') : left;
+        const gap = Math.max(right ? 1 : 0, span - visibleWidth(leftFit) - rightW);
+        const line = right ? leftFit + ' '.repeat(gap) + right : leftFit;
         footer.clear();
         footer.addChild(new Text(line, 1, 0));
         tui.requestRender();
     };
-    const setNotice = (msg) => {
+    // Transient notices (errors, command feedback) auto-clear after a few seconds so
+    // a stale "error: …" doesn't linger in the footer forever. `sticky` keeps a notice
+    // up until explicitly replaced (used by the reconnect indicator, which is cleared
+    // by hand once the socket redials).
+    const NOTICE_CLEAR_MS = 3_000;
+    let noticeTimer;
+    const setNotice = (msg, opts) => {
         notice = msg;
+        if (noticeTimer !== undefined) {
+            clearTimeout(noticeTimer);
+            noticeTimer = undefined;
+        }
+        if (msg && !opts?.sticky) {
+            noticeTimer = setTimeout(() => {
+                noticeTimer = undefined;
+                notice = '';
+                renderFooter();
+            }, NOTICE_CLEAR_MS);
+        }
         renderFooter();
     };
-    // 5. Input layer (T6). onCommand/onDialogResponse → socket; onNotice → footer.
+    // Subscribed-node panel — manager line above the editor, live reports below,
+    // read straight from canvas.db via nav-model (Feature 2). asksMap is refreshed
+    // by the low-rate poll below; beginFrame() inside buildCanvasPanelLines memoizes
+    // the db reads for each rebuild.
+    let asksMap = {};
+    const renderPanels = () => {
+        const { managers: mLines, reports: rLines } = buildCanvasPanelLines(nodeId, asksMap, pal);
+        managers.clear();
+        for (const l of mLines)
+            managers.addChild(new Text(l, 1, 0));
+        reports.clear();
+        for (const l of rLines)
+            reports.addChild(new Text(l, 1, 0));
+        tui.requestRender();
+    };
+    // The alt+g GRAPH overlay (Feature 3) — a bounded, centered modal navigator
+    // over the same nav-model graph, reading the live asksMap.
+    const graphOverlay = new GraphOverlay(tui, nodeId, () => asksMap, pal);
+    // Refresh all canvas chrome (panels + overlay if open) from canvas.db.
+    const refreshChrome = () => {
+        renderPanels();
+        graphOverlay.refresh();
+    };
+    // Git context painted into the RIGHT of the editor's top border: cwd leaf ·
+    // branch · status symbols (● dirty, ⇡ ahead, ⇣ behind). Refreshed by the poll.
+    const renderGitInfo = (info) => {
+        const parts = [pal.muted(info.dir)];
+        if (info.branch)
+            parts.push(pal.info(`⎇ ${info.branch}`));
+        const sym = [];
+        if (info.dirty)
+            sym.push(pal.warning('●'));
+        if (info.ahead > 0)
+            sym.push(pal.active(`⇡${info.ahead}`));
+        if (info.behind > 0)
+            sym.push(pal.active(`⇣${info.behind}`));
+        if (sym.length > 0)
+            parts.push(sym.join(''));
+        // A trailing space keeps the symbols off the very last border cell.
+        editor.info = ` ${parts.join(pal.muted(' · '))} `;
+        tui.requestRender();
+    };
+    const pollGitInfo = () => fetchGitInfo(meta.cwd, renderGitInfo);
+    // Queued steering/follow-up messages, shown above the editor so you can SEE
+    // what is waiting (not just the footer count). Texts arrive on `queue_update`;
+    // the welcome snapshot carries only a count, so the panel fills from the first
+    // queue change after attach.
+    let queuedMessages = [];
+    const renderQueued = () => {
+        queued.clear();
+        if (queuedMessages.length > 0) {
+            const span = Math.max(1, (process.stdout.columns ?? 80) - 4);
+            queued.addChild(new Text(pal.muted(`queued (${queuedMessages.length}):`), 1, 0));
+            for (const msg of queuedMessages) {
+                const oneLine = msg.replace(/\s+/g, ' ').trim();
+                queued.addChild(new Text(pal.faint(`  ⋯ ${truncateToWidth(oneLine, span, '…')}`), 1, 0));
+            }
+        }
+        tui.requestRender();
+    };
+    // 5. Input layer (T6). onCommand/onDialogResponse → socket; onNotice → footer;
+    //    nodeId/onGraph feed the slash context (/promote targets this node, /graph
+    //    toggles the overlay); onRequest is the correlated read-op channel the
+    //    native pickers ride on.
     const input = new InputController(tui, editor, km, {
         onCommand: (frame) => socket.send(frame),
         onDialogResponse: (resp) => socket.send(resp),
         onNotice: (msg) => setNotice(msg),
+        nodeId,
+        onGraph: () => graphOverlay.toggle(),
+        // `/quit` — detach this viewer (the engine keeps running). Must tear down
+        // locally; a bare `bye` would just trigger the reconnect loop.
+        onQuit: () => teardown('detach'),
+        // `/copy` — last assistant message → system clipboard.
+        onCopy: () => copyLastAssistant(),
+        // Global display toggles (Ctrl+O tools / Ctrl+T thinking) — pure render state
+        // owned by ChatView, surfaced as a footer notice mirroring pi's status line.
+        onToggleToolsExpand: () => setNotice(chatView.toggleToolsExpanded() ? 'Tool output: expanded' : 'Tool output: collapsed'),
+        onToggleThinking: () => setNotice(chatView.toggleThinking() ? 'Thinking blocks: hidden' : 'Thinking blocks: visible'),
+        // Wire the correlated read-op channel so the native pickers (/model,
+        // /resume, /fork, /tree, /settings, /scoped-models) can fetch their payloads.
+        // Without this every picker degrades to the "isn't available in this viewer"
+        // notice (see slash-commands.ts + InputController.openPicker).
+        onRequest: (frame) => socket.request(frame),
+        // Mount the native pickers inline in the chrome stack, directly under the
+        // editor (queued-panel pattern) — not as a floating centered modal — so a
+        // picker reads as part of the editor, like pi's own selectors.
+        onMountPicker: (component) => {
+            pickerPanel.addChild(component);
+            tui.requestRender();
+        },
+        onUnmountPicker: () => {
+            pickerPanel.clear();
+            tui.requestRender();
+        },
+        // Auth pickers — viewer-local OAuth/API-key flows. Auth operations target the
+        // SAME auth.json the broker uses (broker + viewer share a filesystem in the
+        // tmux-local attach model), so these run entirely in the viewer process and
+        // then notify the broker to reload via a reload_auth frame.
+        openLoginPicker: () => {
+            const dir = brokerAgentDir ?? defaultAgentDir();
+            input.openAuthPicker((controls) => buildLoginPicker(tui, dir, () => socket.send({ type: 'reload_auth' }), (m) => setNotice(m), controls));
+        },
+        openLogoutPicker: () => {
+            const dir = brokerAgentDir ?? defaultAgentDir();
+            input.openAuthPicker((controls) => buildLogoutPicker(dir, () => socket.send({ type: 'reload_auth' }), (m) => setNotice(m), controls.close));
+        },
     });
+    // `/copy` — copy the last assistant message (held by ChatView, kept current
+    // from both the welcome snapshot and the live stream) to the system clipboard.
+    const copyLastAssistant = () => {
+        const text = chatView.getLastAssistantText();
+        if (!text) {
+            setNotice('Nothing to copy — no assistant message yet');
+            return;
+        }
+        setNotice(writeClipboardText(text) ? 'Copied last message to clipboard' : 'Copy failed — no clipboard tool found');
+    };
     // Feed fresh state into the input controller AND the footer. Steer-vs-prompt
     // routing (T6) reads `state.isStreaming`, so this must stay current — the
     // broker only ships full state in `welcome`, so we patch isStreaming/name/etc
@@ -150,7 +368,18 @@ async function runAttach(nodeId, observer) {
     const setLiveState = (state) => {
         liveState = state;
         input.setState(state);
+        // The session name lives in the editor's top border (solid chip); the border
+        // color tracks the agent's thinking level. Both follow live state.
+        editor.title = state.sessionName ? `⬢ ${state.sessionName}` : '';
+        editor.borderColor = thinkingBorderColor(state.thinkingLevel, pal.border);
+        // Title chip background = the same thinking-level color (bold white text), so
+        // the name chip and the border rule read as one hue.
+        editor.titleStyle = thinkingTitleStyle(state.thinkingLevel, defaultTitleStyle);
         renderFooter();
+        // Panel liveness rides the relayed event stream (agent_start/agent_end/
+        // queue_update/session_info_changed all patch state through here) plus the
+        // low-rate poll below for changes that emit no event (child status flips).
+        refreshChrome();
     };
     const patchState = (patch) => {
         if (liveState === undefined)
@@ -162,8 +391,16 @@ async function runAttach(nodeId, observer) {
         switch (frame.type) {
             case 'welcome': {
                 role = frame.role;
+                brokerAgentDir = frame.agentDir;
                 chatView.applySnapshot(frame.snapshot);
+                // Seed the footer's context indicator from the catch-up snapshot.
+                const cu = frame.snapshot.stats.contextUsage;
+                if (cu && cu.tokens != null)
+                    contextTokens = cu.tokens;
                 setLiveState(frame.snapshot.state);
+                // Ask the broker for its merged command list (engine/extension/skill
+                // commands) to enrich slash autocomplete beyond the builtins+canvas set.
+                socket.send({ type: 'get_commands' });
                 if (frame.pending_dialog != null)
                     input.attachDialog(frame.pending_dialog);
                 break;
@@ -175,6 +412,12 @@ async function runAttach(nodeId, observer) {
                 renderFooter();
                 break;
             }
+            case 'model_changed': {
+                // The broker's own post-set_model/cycle_model announcement (pi emits no
+                // engine event for a model switch) — keeps the footer's model current.
+                patchState({ model: frame.model });
+                break;
+            }
             case 'error': {
                 if (frame.code === 'not_controller') {
                     setNotice('read-only — another viewer is the controller');
@@ -185,13 +428,51 @@ async function runAttach(nodeId, observer) {
                 break;
             }
             case 'ack': {
-                // Dynamic-command autocomplete (feeding get_commands into T6's palette)
-                // is DEFERRED for Phase 4 (would require editing T6's input-controller —
-                // out of my 3-file scope; the fall-through-to-prompt path already makes
-                // extension commands functional). Surface only command failures here.
+                // get_commands replies with the broker's merged command list as JSON in
+                // `detail` — rebuild the autocomplete provider with it (slashCommandList
+                // re-appends the native canvas commands, deduped).
+                if (frame.for === 'get_commands' && frame.ok && frame.detail) {
+                    try {
+                        const list = JSON.parse(frame.detail);
+                        setCommands(list);
+                    }
+                    catch {
+                        /* malformed — keep the current provider */
+                    }
+                    break;
+                }
+                // navigate_tree's detail is the navigated-to user message's text (pi
+                // parity: the tree navigator restores it to the editor for re-editing);
+                // the rewound transcript itself arrives via the broker's re-welcome.
+                if (frame.for === 'navigate_tree' && frame.ok) {
+                    if (frame.detail) {
+                        editor.setText(frame.detail);
+                        tui.requestRender();
+                    }
+                    break;
+                }
+                if (frame.for === 'share') {
+                    if (frame.ok && frame.detail) {
+                        setNotice(`Shared: ${frame.detail}`);
+                        writeClipboardText(frame.detail);
+                    }
+                    else if (!frame.ok) {
+                        setNotice(`share failed: ${frame.detail ?? 'unknown error'}`);
+                    }
+                    break;
+                }
+                if (frame.for === 'clone' && !frame.ok) {
+                    setNotice(`clone failed: ${frame.detail ?? 'unknown error'}`);
+                    break;
+                }
                 if (!frame.ok) {
                     setNotice(`command failed: ${frame.for}${frame.detail ? ` — ${frame.detail}` : ''}`);
+                    break;
                 }
+                // Confirm commands whose effect is otherwise invisible — without this a
+                // `/reload` looks like it did nothing (the engine reloads silently).
+                if (frame.for === 'reload')
+                    setNotice('Reloaded keybindings, extensions, skills, prompts, and themes');
                 break;
             }
             case 'extension_ui_request': {
@@ -202,16 +483,27 @@ async function runAttach(nodeId, observer) {
                 // A relayed AgentSessionEvent — render it, and keep local state fresh.
                 const event = frame;
                 chatView.handleEvent(event);
+                // The most recent assistant turn's prompt tokens ARE the live context
+                // size — read straight off the relayed message, no broker round-trip.
+                if (event.type === 'message_end' && event.message.role === 'assistant') {
+                    const u = event.message.usage;
+                    contextTokens = u.input + u.cacheRead + u.cacheWrite;
+                    renderFooter();
+                }
                 if (event.type === 'agent_start')
                     patchState({ isStreaming: true });
                 else if (event.type === 'agent_end')
                     patchState({ isStreaming: false });
                 else if (event.type === 'session_info_changed')
                     patchState({ sessionName: event.name });
-                else if (event.type === 'thinking_level_changed')
+                else if (event.type === 'thinking_level_changed') {
                     patchState({ thinkingLevel: event.level });
+                    setNotice(`Thinking level: ${event.level}`);
+                }
                 else if (event.type === 'queue_update') {
-                    patchState({ pendingMessageCount: event.steering.length + event.followUp.length });
+                    queuedMessages = [...event.steering, ...event.followUp];
+                    renderQueued();
+                    patchState({ pendingMessageCount: queuedMessages.length });
                 }
                 break;
             }
@@ -239,10 +531,16 @@ async function runAttach(nodeId, observer) {
     const done = new Promise((r) => {
         resolveDone = r;
     });
+    let asksTimer;
     const teardown = (reason) => {
         if (tornDown)
             return;
         tornDown = true;
+        if (asksTimer !== undefined)
+            clearInterval(asksTimer);
+        if (noticeTimer !== undefined)
+            clearTimeout(noticeTimer);
+        graphOverlay.close();
         clearPaneTag();
         removeKeyListener();
         // A clean detach tells the broker to drop this viewer (the engine runs on);
@@ -264,6 +562,60 @@ async function runAttach(nodeId, observer) {
         }
         resolveDone();
     };
+    // The handshake the viewer sends on connect AND on every successful redial.
+    // After a broker refresh / crash-revive the fresh process has no controller and
+    // no memory of us, so re-`hello` reclaims our role and the `welcome` snapshot
+    // repaints full scrollback/state. Sends the CURRENT `role`, not the constructor
+    // `observer` flag: if we were preempted to observer at runtime (a
+    // `control_changed` demoted us), re-hello'ing as 'controller' would let us
+    // reclaim control from the new controller after a refresh — so the demotion
+    // must survive the reconnect.
+    const sendHello = () => {
+        socket.send({
+            type: 'hello',
+            role,
+            client_id: clientId,
+            term: { cols: process.stdout.columns ?? 80, rows: process.stdout.rows ?? 24 },
+        });
+    };
+    // Reconnect supervisor. A resident broker node that yields EXITS its broker
+    // (socket close) and is revived FRESH by the daemon on the SAME `view.sock`
+    // path within a few seconds. So on close we HOLD the pane and re-dial while
+    // the canvas-db row says the node is still alive (status active/idle), giving
+    // up only when it is genuinely terminal (done/dead/canceled or row gone) or a
+    // bounded ~30s of failed redials elapses (stale-row safety). A successful
+    // redial re-sends `hello`; the new broker's `welcome` runs applySnapshot,
+    // which resetChat()s the pane and rebuilds from the persisted .jsonl — a clean
+    // "clear + continuation" for free.
+    const RECONNECT_GIVEUP_MS = 30_000;
+    const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+    let reconnecting = false;
+    const attemptReconnect = async () => {
+        reconnecting = true;
+        setNotice('↻ node refreshing — reconnecting…', { sticky: true });
+        const deadline = Date.now() + RECONNECT_GIVEUP_MS;
+        let delay = 200;
+        while (!tornDown && Date.now() < deadline) {
+            if (reconnectShouldGiveUp(getRow(nodeId))) {
+                break; // genuinely gone → fall through to broker-gone
+            }
+            try {
+                await socket.redial();
+                reconnecting = false;
+                sendHello();
+                setNotice('');
+                return; // reconnected; the welcome snapshot clears + continues the pane
+            }
+            catch {
+                // ENOENT (socket not recreated yet) / ECONNREFUSED (listen not ready) → retry.
+                await sleep(Math.min(delay, 1000));
+                delay *= 2;
+            }
+        }
+        reconnecting = false;
+        if (!tornDown)
+            teardown('broker-gone');
+    };
     // Permanent socket wiring (the connect-race listeners are gone).
     socket.on('frame', handleBrokerFrame);
     socket.on('error', (err) => {
@@ -271,15 +623,44 @@ async function runAttach(nodeId, observer) {
         // broker-gone message prefers this over the generic text.
         lastSocketError = err.message;
     });
-    socket.on('close', () => teardown('broker-gone'));
-    // ctrl+c / ctrl+d → detach (T6 left these unwired; lifecycle is ours). A
-    // global TUI input listener fires BEFORE the focused component (and before any
-    // dialog overlay), so detach is unconditional and consistent.
+    socket.on('close', () => {
+        if (tornDown)
+            return; // a real detach/signal already won
+        if (reconnecting)
+            return; // the dead socket's own close during the redial loop
+        void attemptReconnect();
+    });
+    // ctrl+d → detach immediately (lifecycle is ours). ctrl+c is gentler: a single
+    // tap CLEARS the editor (and arms a window); a second tap within that window
+    // detaches. A global TUI input listener fires BEFORE the focused component (and
+    // before any dialog overlay), so this is consistent regardless of focus.
+    const CTRL_C_DETACH_MS = 1000;
+    let lastCtrlCAt = 0;
     const removeKeyListener = tui.addInputListener((data) => {
-        if (matchesKey(data, 'ctrl+c') || matchesKey(data, 'ctrl+d')) {
+        if (matchesKey(data, 'ctrl+d')) {
             teardown('detach');
             return { consume: true };
         }
+        if (matchesKey(data, 'ctrl+c')) {
+            const now = Date.now();
+            if (now - lastCtrlCAt < CTRL_C_DETACH_MS) {
+                lastCtrlCAt = 0;
+                teardown('detach');
+                return { consume: true };
+            }
+            lastCtrlCAt = now;
+            editor.setText('');
+            setNotice('Editor cleared — press Ctrl+C again to detach');
+            tui.requestRender();
+            return { consume: true };
+        }
+        // alt+g toggles the GRAPH overlay. The global listener fires BEFORE the
+        // focused component, so this works whether the editor or the overlay holds
+        // focus (closing it from inside the overlay too).
+        if (matchesKey(data, 'alt+g')) {
+            graphOverlay.toggle();
+            return { consume: true };
+        }
         return undefined;
     });
     // Pane kill / daemon teardown arrives as a signal (raw mode swallows ctrl+c as
@@ -291,17 +672,40 @@ async function runAttach(nodeId, observer) {
     // 8. Lay out, focus the editor, start, then handshake. Starting before the
     //    handshake means the welcome's applySnapshot renders into a live TUI.
     tui.addChild(chatContainer);
-    tui.addChild(footer);
+    tui.addChild(chrome);
+    tui.addChild(managers);
+    tui.addChild(queued);
     tui.addChild(editor);
+    tui.addChild(pickerPanel);
+    tui.addChild(reports);
+    tui.addChild(footer);
     tui.setFocus(editor);
     renderFooter();
+    renderPanels();
+    renderQueued();
+    pollGitInfo();
     tui.start();
-    socket.send({
-        type: 'hello',
-        role: observer ? 'observer' : 'controller',
-        client_id: clientId,
-        term: { cols: process.stdout.columns ?? 80, rows: process.stdout.rows ?? 24 },
-    });
+    // ProcessTerminal negotiated the keyboard protocol on OUR pi-tui instance; the
+    // editor reads the flag from its own (possibly separate) instance, so mirror it.
+    void mirrorKittyProtocolToEditor(procTerminal.kittyProtocolActive);
+    sendHello();
+    // Low-rate canvas-chrome refresh: repaint panels/overlay from canvas.db (child
+    // status flips emit no broker event) and re-poll the ask map asynchronously.
+    const ASKS_POLL_MS = 5_000;
+    const pollChrome = () => {
+        refreshChrome();
+        pollGitInfo();
+        fetchAsksAsync(climbRoot(nodeId), (counts) => {
+            if (JSON.stringify(counts) !== JSON.stringify(asksMap)) {
+                asksMap = counts;
+                refreshChrome();
+            }
+        });
+    };
+    pollChrome();
+    asksTimer = setInterval(pollChrome, ASKS_POLL_MS);
+    if (typeof asksTimer.unref === 'function')
+        asksTimer.unref();
     await done;
 }
 // ---------------------------------------------------------------------------

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

@@ -0,0 +1,9 @@
+import type { TUI } from '@earendil-works/pi-tui';
+import type { Picker, PickerControls } from './pickers.js';
+/** `/login` — show the provider selector, then run pi's native login flow in
+ *  the viewer. On success, notifies the broker to reload auth via reload_auth.
+ *  Returns a Picker (OAuthSelectorComponent as the overlay). */
+export declare function buildLoginPicker(tui: TUI, agentDir: string, onAuthReloaded: () => void, notify: (msg: string) => void, controls: PickerControls): Picker;
+/** `/logout` — show the provider selector in logout mode. On select, calls
+ *  authStorage.logout(providerId) directly, then notifies the broker to reload. */
+export declare function buildLogoutPicker(agentDir: string, onAuthReloaded: () => void, notify: (msg: string) => void, close: () => void): Picker;