@crouton-kit/crouter 0.3.28 → 0.3.29

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

@@ -16,21 +16,25 @@
 // is therefore a BRANCH wrapping a single leaf: `crtr attach to <node>`.
 import { randomUUID } from 'node:crypto';
 import { execFile } from 'node:child_process';
-import { CombinedAutocompleteProvider, Container, ProcessTerminal, Text, TUI, matchesKey, } from '@earendil-works/pi-tui';
-import { CustomEditor, getSelectListTheme, } from '@earendil-works/pi-coding-agent';
+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, 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 { climbRoot } from '../../core/canvas/nav-model.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 { 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, createKeybindingsManager } from './config-load.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
@@ -122,22 +126,47 @@ 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();
+    // 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 · badge · managers (↑ subscriber) · editor · reports
-    //    (↓ subscriptions) · footer. The badge sits in the BOTTOM-anchored chrome
+    //    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 tui = new TUI(new ProcessTerminal());
-    const badge = new Container();
+    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) => {
@@ -147,47 +176,80 @@ async function runAttach(nodeId, observer) {
     // 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 && 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();
     };
-    // Name badge — the session name (= the canvas editor label `kind (mode)
-    // name`), relayed over the socket and patched live (Feature 1). Rendered just
-    // above the managers line in the bottom chrome so it stays in-viewport.
-    const renderBadge = () => {
-        badge.clear();
-        if (liveState?.sessionName)
-            badge.addChild(new Text(`\x1b[1m${liveState.sessionName}\x1b[22m`, 1, 0));
-        tui.requestRender();
-    };
     // 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);
+        const { managers: mLines, reports: rLines } = buildCanvasPanelLines(nodeId, asksMap, pal);
         managers.clear();
         for (const l of mLines)
             managers.addChild(new Text(l, 1, 0));
@@ -196,24 +258,109 @@ async function runAttach(nodeId, observer) {
             reports.addChild(new Text(l, 1, 0));
         tui.requestRender();
     };
-    // The alt+g GRAPH overlay (Feature 3) — a full-screen navigator over the same
-    // nav-model graph, reading the live asksMap.
-    const graphOverlay = new GraphOverlay(tui, nodeId, () => asksMap);
+    // 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).
+    //    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
@@ -221,8 +368,14 @@ 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();
-        renderBadge();
         // 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).
@@ -238,7 +391,12 @@ 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.
@@ -254,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');
@@ -277,9 +441,38 @@ async function runAttach(nodeId, observer) {
                     }
                     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': {
@@ -290,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;
             }
@@ -334,6 +538,8 @@ async function runAttach(nodeId, observer) {
         tornDown = true;
         if (asksTimer !== undefined)
             clearInterval(asksTimer);
+        if (noticeTimer !== undefined)
+            clearTimeout(noticeTimer);
         graphOverlay.close();
         clearPaneTag();
         removeKeyListener();
@@ -357,10 +563,17 @@ 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: observer ? 'observer' : 'controller',
+            role,
             client_id: clientId,
             term: { cols: process.stdout.columns ?? 80, rows: process.stdout.rows ?? 24 },
         });
@@ -379,7 +592,7 @@ async function runAttach(nodeId, observer) {
     let reconnecting = false;
     const attemptReconnect = async () => {
         reconnecting = true;
-        setNotice('↻ node refreshing — reconnecting…');
+        setNotice('↻ node refreshing — reconnecting…', { sticky: true });
         const deadline = Date.now() + RECONNECT_GIVEUP_MS;
         let delay = 200;
         while (!tornDown && Date.now() < deadline) {
@@ -417,14 +630,30 @@ async function runAttach(nodeId, observer) {
             return; // the dead socket's own close during the redial loop
         void attemptReconnect();
     });
-    // 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.
+    // 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).
@@ -443,22 +672,29 @@ 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(badge);
+    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();
-    renderBadge();
     renderPanels();
+    renderQueued();
+    pollGitInfo();
     tui.start();
+    // 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;

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;