tokenmaw 0.3.0 → 0.4.0

package/dist/ui/fullscreen-tui.js

@@ -1,3 +1,4 @@
+import { resolve as resolvePath, sep } from 'node:path';
 import blessed from 'blessed';
 import { renderTuiMarkdown, toolDiff } from './markdown.js';
 import { resilientFetch } from '../fetch.js';
@@ -5,8 +6,15 @@ import { layoutComposer } from './composer-layout.js';
 import { renderWelcome } from './welcome.js';
 import { copyText } from './clipboard.js';
 import { commandMatches } from './commands.js';
-import { diffPreview, elapsedLabel, STATUS_PRESENTATION, toolPresentation, tuiLayout, visibleTimelineEntries } from './tui-design.js';
-import { recordTimeline } from '../runtime/session-timeline.js';
+import { runShellCommand } from '../infra/tools.js';
+import { diffPreview, elapsedLabel, isWaitingForFirstToken, spinnerGlyph, STATUS_PRESENTATION, toolPresentation, tuiLayout, visibleTimelineEntries, waitingIndicatorFrame } from './tui-design.js';
+import { attachPillScrollbar, pillScrollbarColors } from './scrollbar.js';
+import { recordTimeline, recordShellRun } from '../runtime/session-timeline.js';
+import { otherWorkspaceInstances } from '../runtime/workspace-instances.js';
+import { activeTuiTheme, resolveTheme, setActiveTheme, themeNames } from './theme.js';
+import { resetTuiMarkdownCache } from './markdown.js';
+import { BRACKETED_PASTE_DISABLE, BRACKETED_PASTE_ENABLE, enableBracketedPaste } from './bracketed-paste.js';
+import { WorktreeManager } from '../runtime/worktree.js';
 const PROVIDERS = [
     { id: 'openai', label: 'OpenAI', backend: 'openai', baseUrl: 'https://api.openai.com/v1', needsKey: true },
     { id: 'openrouter', label: 'OpenRouter', backend: 'openai', baseUrl: 'https://openrouter.ai/api/v1', needsKey: true },
@@ -15,15 +23,8 @@ const PROVIDERS = [
     { id: 'ollama', label: 'Ollama · local', backend: 'ollama', baseUrl: 'http://localhost:11434', needsKey: false },
     { id: 'custom', label: 'Custom · OpenAI compatible', backend: 'openai', baseUrl: '', needsKey: false },
 ];
-const COLOR = {
-    // Stick to the ANSI palette so Windows consoles do not quantize custom RGB
-    // values into black. In blessed, `gray` is bright-black (color 8), so it can
-    // disappear on a black background; `white` is the readable 8-color fallback.
-    background: 'black', panel: 'black', elevated: '#20242a', modal: '#171a1f', modalRule: '#2b3139', line: 'gray',
-    text: 'light-white', muted: 'white', subtle: 'gray', accent: 'light-cyan', success: 'light-green',
-    warning: 'light-yellow', error: 'light-red',
-};
-const TONE_COLOR = { muted: COLOR.muted, accent: COLOR.accent, success: COLOR.success, warning: COLOR.warning, error: COLOR.error };
+const COLOR = () => activeTuiTheme().ui;
+const TONE_COLOR = (tone) => COLOR()[tone];
 function oneLine(value, max = 72) {
     const text = String(value ?? '').replace(/\s+/g, ' ').trim();
     return text.length > max ? `${text.slice(0, max - 1)}…` : text;
@@ -73,6 +74,16 @@ export async function runFullscreenTui(runtime, options) {
     let spinnerTimer;
     let welcomeTimer;
     let welcomeFrame = 0;
+    let welcomeStartedAt = 0;
+    // Terminal focus lifecycle (DECSET 1004): while the window is unfocused the
+    // periodic repaints pause — otherwise 20fps of screen updates flood the PTY
+    // and the terminal replays the backlog the moment the window regains focus.
+    let windowFocused = true;
+    let streamTimer;
+    let shellAbort;
+    let shellAnimationFrame = 0;
+    let waitingFrame = 0;
+    let lastPaintedStreamText = '';
     const composerChars = [];
     const inputHistory = [];
     const pendingTurns = new Set();
@@ -80,7 +91,24 @@ export async function runFullscreenTui(runtime, options) {
     const activityLog = new Map();
     const thinkingBlocks = new Map();
     const thinkingBlockLines = new Map();
+    // Sticky collapse header: when an expanded block's own header has scrolled
+    // above the viewport while the block body is still on screen, the header is
+    // redrawn pinned to the first conversation row so it can always be clicked
+    // to collapse. Sticky rows do not exist in the logical content; they are
+    // inserted at the viewport top after scrolling is applied.
+    // Streaming events can batch: a thinking segment may be rendered only after
+    // it already finished, so the start time is tracked per turn, not per block.
+    const thinkingStartedAt = new Map();
+    const markThinkingStart = (turnId) => {
+        if (!thinkingStartedAt.has(turnId))
+            thinkingStartedAt.set(turnId, Date.now());
+    };
     let latestThinkingTurnId;
+    let stickyHeader;
+    let lastStickyKey;
+    // Blessed bubbles a click from the sticky overlay up to the conversation
+    // box; the flag consumes the bubbled copy so the block is toggled once.
+    let stickyClickHandled = false;
     let conversationFollowOutput = true;
     let conversationScrollOffset = 0;
     let restoringConversationScroll = false;
@@ -94,8 +122,22 @@ export async function runFullscreenTui(runtime, options) {
     let completionQuery = '';
     let dismissedCompletion = '';
     let nativeSelection = false;
+    // /btw side conversation state. Inside a side session, `sideParentSessionId`
+    // points at the conversation /back and Ctrl+C return to. /fork works from
+    // anywhere but never changes the mode.
+    let sideParentSessionId;
+    const isBtw = () => sideParentSessionId !== undefined;
     let selection;
     const hasSelection = () => Boolean(selection && (selection.start.x !== selection.end.x || selection.start.y !== selection.end.y));
+    // When the sticky row's identity or text changes, a full redraw avoids
+    // blessed CSR diff artifacts around the shifted top row.
+    const invalidateStickyIfChanged = (next) => {
+        const key = next ? `${next.turnId} :: ${next.line}` : '';
+        if (key !== lastStickyKey) {
+            lastStickyKey = key || undefined;
+            requestFullRedraw();
+        }
+    };
     const restoreThinking = () => {
         const restored = new Map();
         for (const message of session.messages) {
@@ -108,58 +150,125 @@ export async function runFullscreenTui(runtime, options) {
         }
     };
     restoreThinking();
+    setActiveTheme(options.configManager.getConfig().theme);
+    // Bracketed paste: the terminal wraps pasted text in `\x1b[200~ ... \x1b[201~`.
+    // The filter turns each wrapped chunk into one paste event, so line breaks
+    // inside a paste insert literally instead of being read as Enter (which
+    // used to submit the half-pasted draft).
+    const pasteInput = enableBracketedPaste(process.stdin);
     const screen = blessed.screen({
+        input: pasteInput,
         smartCSR: true, fullUnicode: true, title: 'TokenMaw',
-        style: { bg: COLOR.background, fg: COLOR.text },
+        style: { bg: COLOR().background, fg: COLOR().text },
     });
+    screen.program.write(BRACKETED_PASTE_ENABLE);
+    // Blessed defers alt-buffer entry to terminfo's smcup, which is empty on
+    // several TERM entries — the app then paints into the scrollback and every
+    // animated repaint shoves the native scrollbar around. Force ?1049 so the
+    // TUI owns the alternate screen (restored on exit) regardless of terminfo.
+    screen.program.decset('1049');
+    screen.program.decset('1004');
+    let fullRedrawPending = true;
+    const requestFullRedraw = () => { fullRedrawPending = true; };
+    const renderScreen = () => {
+        if (fullRedrawPending) {
+            // Blessed's smart CSR occasionally leaves the tail of a wide/long line
+            // behind when an element shrinks or disappears. Reallocating only for
+            // structural transitions clears both its current and previous buffers.
+            screen.realloc();
+            fullRedrawPending = false;
+        }
+        screen.render();
+    };
     const screenBuffer = screen;
     const statusbar = blessed.box({
         parent: screen, bottom: 0, left: 0, width: '100%', height: 1, tags: true,
-        padding: { left: 1, right: 1 }, style: { bg: COLOR.background, fg: COLOR.muted },
+        padding: { left: 1, right: 1 }, style: { bg: COLOR().background, fg: COLOR().muted },
     });
     const conversation = blessed.box({
         parent: screen, top: 0, left: 0, width: '100%', bottom: 3,
         tags: true, scrollable: true, alwaysScroll: true, keys: true, vi: true, mouse: true, autoFocus: false,
-        scrollbar: {
-            ch: '│',
-            track: { bg: COLOR.panel },
-            style: { fg: COLOR.muted },
-        },
         padding: { left: 2, right: 2 },
-        style: { bg: COLOR.background, fg: COLOR.text },
+        style: { bg: COLOR().background, fg: COLOR().text },
+    });
+    // Full-width surface keeps the composer visually continuous at both edges;
+    // the editable text box is inset on top of this backdrop.
+    const composerBackdrop = blessed.box({
+        parent: screen, bottom: 1, left: 0, width: '100%', height: 2,
+        style: { bg: COLOR().composer },
     });
     const activity = blessed.list({
-        parent: screen, top: 2, right: 0, width: '28%', bottom: 2,
+        parent: screen, top: 3, right: 0, width: '28%', bottom: 2,
         tags: true, keys: true, vi: true, mouse: true,
         scrollable: true, padding: { left: 1, right: 1 },
         style: {
-            bg: COLOR.background, fg: COLOR.muted,
-            selected: { bg: COLOR.elevated, fg: COLOR.accent, bold: true },
+            bg: COLOR().activity, fg: COLOR().muted,
+            selected: { bg: COLOR().elevated, fg: COLOR().accent, bold: true },
         },
     });
     const composer = blessed.box({
         parent: screen, bottom: 1, left: 3, width: '100%-4', height: 2,
         input: true, keys: true, mouse: true, padding: { left: 0, right: 1 },
-        style: { bg: COLOR.background, fg: COLOR.text },
+        tags: true,
+        style: { bg: COLOR().composer, fg: COLOR().text },
     });
     const divider = blessed.box({
-        parent: screen, bottom: 3, left: 1, width: '100%-2', height: 1,
-        style: { fg: COLOR.line, bg: COLOR.background },
+        // This row is part of the composer surface. Keeping it full width makes
+        // the input area read as one continuous band instead of a boxed field
+        // separated by a decorative rule.
+        parent: screen, bottom: 3, left: 0, width: '100%', height: 1,
+        style: { fg: COLOR().composer, bg: COLOR().composer },
     });
     const composerPrompt = blessed.box({
         parent: screen, bottom: 1, left: 1, width: 2, height: 2,
-        content: '›', style: { bg: COLOR.background, fg: COLOR.accent },
+        content: '›', style: { bg: COLOR().composer, fg: COLOR().accent },
     });
     const completions = blessed.list({
         parent: screen, left: 2, bottom: 4, width: '100%-4', height: 5,
         hidden: true, tags: true, mouse: true, keys: false, autoFocus: false,
         padding: { left: 1, right: 1 },
-        style: { bg: COLOR.panel, fg: COLOR.muted, selected: { bg: COLOR.elevated, fg: COLOR.accent, bold: true } },
+        style: { bg: COLOR().panel, fg: COLOR().muted, selected: { bg: COLOR().elevated, fg: COLOR().accent, bold: true } },
     });
     const activityHeader = blessed.box({
-        parent: screen, top: 0, right: 0, width: '28%', height: 2, hidden: true, tags: true,
-        padding: { left: 1, right: 1 }, style: { bg: COLOR.background, fg: COLOR.text },
+        parent: screen, top: 0, right: 0, width: '28%', height: 3, hidden: true, tags: true,
+        padding: { left: 1, right: 1 }, style: { bg: COLOR().activity, fg: COLOR().text },
     });
+    const activityDetailScrollbar = {};
+    let activityDetail;
+    // Pill scrollbars are screen-level overlay elements; they resolve theme
+    // colors on every sync, so a theme switch needs no extra patching.
+    const pillColors = () => pillScrollbarColors(COLOR());
+    const conversationScrollbar = attachPillScrollbar(conversation, pillColors);
+    const activityScrollbar = attachPillScrollbar(activity, pillColors);
+    // Persistent widgets capture style objects at creation time; a theme switch
+    // must patch them in place so the repaint picks up the new palette.
+    const applyWidgetTheme = () => {
+        const c = COLOR();
+        statusbar.style.bg = c.background;
+        statusbar.style.fg = c.muted;
+        conversation.style.bg = c.background;
+        conversation.style.fg = c.text;
+        activity.style.bg = c.activity;
+        activity.style.fg = c.muted;
+        // blessed's List copies style.item from the constructor palette and reads
+        // it per unselected row on every render, so it must be re-created here.
+        activity.style.item = { bg: c.activity, fg: c.muted };
+        activity.style.selected = { bg: c.elevated, fg: c.accent, bold: true };
+        composer.style.bg = c.composer;
+        composer.style.fg = c.text;
+        composerBackdrop.style.bg = c.composer;
+        divider.style.fg = c.composer;
+        divider.style.bg = c.composer;
+        composerPrompt.style.bg = c.composer;
+        composerPrompt.style.fg = c.accent;
+        completions.style.bg = c.panel;
+        completions.style.fg = c.muted;
+        completions.style.item = { bg: c.panel, fg: c.muted };
+        completions.style.selected = { bg: c.elevated, fg: c.accent, bold: true };
+        activityHeader.style.bg = c.activity;
+        activityHeader.style.fg = c.text;
+    };
+    applyWidgetTheme();
     screen.program.setMouse({ vt200Mouse: true, sgrMouse: true, utfMouse: false, cellMotion: true, allMotion: true }, true);
     const placeComposerCursor = () => {
         if (closed || screen.focused !== composer)
@@ -181,37 +290,51 @@ export async function runFullscreenTui(runtime, options) {
         const result = layoutComposer(composerValue(), composerCursor, width, (text) => Number(composer.strWidth(text)));
         const height = Math.min(Math.max(2, result.rows.length), Math.max(2, Math.min(6, Number(screen.height) - 7)));
         const start = Math.max(0, result.cursor.row - height + 1);
+        // A draft starting with `!` is shell mode: the prompt becomes `$` and the
+        // command text wears the shell color so the submit target is unambiguous.
+        const shellMode = composerValue().startsWith('!');
+        composerPrompt.setContent(shellMode ? '$' : '›');
+        composerPrompt.style.fg = shellMode ? COLOR().warning : COLOR().accent;
         composer.height = height;
         composerPrompt.height = height;
+        composerBackdrop.height = height;
         conversation.bottom = height + 2;
         activity.bottom = height + 2;
         divider.bottom = height + 1;
-        divider.setContent('─'.repeat(Math.max(0, Number(screen.width) - 2)));
+        divider.setContent(' '.repeat(Math.max(0, Number(screen.width))));
         composerRow = result.cursor.row - start;
         composerColumn = result.cursor.column;
-        composer.setContent(result.rows.slice(start, start + height).join('\n'));
+        // Rows are laid out from plain text; escape them for the tag parser so
+        // commands containing literal braces render as typed.
+        const visibleRows = result.rows.slice(start, start + height).map((row) => safe(row));
+        composer.setContent(shellMode
+            ? visibleRows.map((row) => `{${COLOR().warning}-fg}${row}{/${COLOR().warning}-fg}`).join('\n')
+            : visibleRows.join('\n'));
         const query = composerValue();
         if (query !== completionQuery) {
             completionIndex = 0;
             completionQuery = query;
         }
         const matches = query === dismissedCompletion ? [] : commandMatches(query);
+        const completionsWereHidden = completions.hidden;
         if (!matches.length)
             completions.hide();
         else {
             completions.bottom = height + 2;
             completions.height = Math.min(matches.length, 6, Math.max(1, Number(screen.height) - height - 3));
             completionIndex = Math.min(completionIndex, matches.length - 1);
-            completions.setItems(matches.map((item) => `{${COLOR.accent}-fg}${safe(item.name.padEnd(12))}{/${COLOR.accent}-fg} {${COLOR.muted}-fg}${safe(item.description)}{/${COLOR.muted}-fg}`));
+            completions.setItems(matches.map((item) => `{${COLOR().accent}-fg}${safe(item.name.padEnd(12))}{/${COLOR().accent}-fg} {${COLOR().muted}-fg}${safe(item.description)}{/${COLOR().muted}-fg}`));
             completions.select(completionIndex);
             completions.show();
             completions.setFront();
         }
+        if (completionsWereHidden !== completions.hidden)
+            requestFullRedraw();
     };
     const renderComposerFrame = () => {
         renderComposer();
         screen.program.hideCursor();
-        screen.render();
+        renderScreen();
         placeComposerCursor();
         screen.program.showCursor();
     };
@@ -243,9 +366,26 @@ export async function runFullscreenTui(runtime, options) {
         renderComposer();
         renderComposerFrame();
     };
+    const insertPaste = (text) => {
+        const chars = Array.from(text);
+        composerChars.splice(composerCursor, 0, ...chars);
+        composerCursor += chars.length;
+    };
     const handleComposerKey = (ch, key) => {
         if (closed)
             return;
+        if (pasteInput.pasteActive) {
+            // Paste content is literal: line breaks included, never a submit.
+            // CR is normalized to LF so browser-style CRLF pastes stay clean.
+            if (ch === '\r' || ch === '\n')
+                insertPaste('\n');
+            else if (ch && !key.ctrl && !key.meta && !/^[\x00-\x1f\x7f]$/.test(ch))
+                insertPaste(ch);
+            // Long pastes span many reads: keep repainting so the composer does
+            // not appear frozen while the paste streams in.
+            scheduleRefresh();
+            return;
+        }
         const matches = completions.hidden ? [] : commandMatches(composerValue());
         if (matches.length && (key.name === 'up' || key.name === 'down')) {
             completionIndex = (completionIndex + (key.name === 'up' ? -1 : 1) + matches.length) % matches.length;
@@ -268,7 +408,7 @@ export async function runFullscreenTui(runtime, options) {
         if ((key.name === 'enter' || key.name === 'return') && !key.meta) {
             void submit();
             return;
-        }
+        } // guarded above: never fires inside a paste
         if ((key.meta && (key.name === 'enter' || key.name === 'return')) || (key.ctrl && key.name === 'j')) {
             composerChars.splice(composerCursor++, 0, '\n');
         }
@@ -312,6 +452,9 @@ export async function runFullscreenTui(runtime, options) {
         renderComposer();
         renderComposerFrame();
     };
+    // The thinking header spins on a fixed 60ms cadence; spinnerGlyphFrame maps
+    // each tick onto an eased burst-and-pause rhythm (fast, then slow) so the
+    // animation feels alive instead of metronome-slow.
     const startSpinner = () => {
         if (spinnerTimer || pendingTurns.size === 0)
             return;
@@ -320,12 +463,12 @@ export async function runFullscreenTui(runtime, options) {
                 stopSpinner();
                 return;
             }
-            if (nativeSelection || hasSelection())
+            if (nativeSelection || hasSelection() || !windowFocused)
                 return;
-            spinnerFrame = (spinnerFrame + 1) % 20;
+            spinnerFrame += 1;
             conversationDirty = true;
             scheduleRefresh();
-        }, 800);
+        }, 60);
         spinnerTimer.unref?.();
     };
     const stopSpinner = () => {
@@ -334,6 +477,47 @@ export async function runFullscreenTui(runtime, options) {
         clearInterval(spinnerTimer);
         spinnerTimer = undefined;
     };
+    // While a turn is live, deltas alone cannot be trusted to defeat blessed's
+    // row-diff suppression or the viewport-clamped trailing line, so a slow
+    // repaint cadence forces the growing transcript onto the screen. The same
+    // tick animates the waiting indicator shown before the first token arrives.
+    const stopStreamTimer = () => {
+        if (!streamTimer)
+            return;
+        clearInterval(streamTimer);
+        streamTimer = undefined;
+    };
+    const startStreamTimer = () => {
+        if (streamTimer || closed)
+            return;
+        streamTimer = setInterval(() => {
+            if (closed || pendingTurns.size === 0) {
+                stopStreamTimer();
+                return;
+            }
+            // Native text selection owns the screen; never dirty or repaint under it.
+            if (nativeSelection || hasSelection() || !windowFocused)
+                return;
+            const runningEntry = [...(session.timeline ?? [])].find((entry) => entry.status === 'running' && entry.kind !== 'tool' && entry.kind !== 'shell');
+            if (streams.size > 0 || runningEntry) {
+                const liveText = [...streams.values()].join('')
+                    + [...(session.timeline ?? [])].filter((entry) => entry.status === 'running' && entry.kind === 'message').map((entry) => entry.content).join('');
+                if (liveText !== lastPaintedStreamText) {
+                    // Only a real content change earns a structural repaint; plain diffs
+                    // stay cheap and flicker-free.
+                    fullRedrawPending = true;
+                    lastPaintedStreamText = liveText;
+                    conversationDirty = true;
+                }
+            }
+            else {
+                waitingFrame = (waitingFrame + 1) % 24;
+                conversationDirty = true;
+            }
+            scheduleRefresh();
+        }, 90);
+        streamTimer.unref?.();
+    };
     const focusComposer = () => {
         if (closed)
             return;
@@ -342,72 +526,208 @@ export async function runFullscreenTui(runtime, options) {
             composer.focus();
         renderComposerFrame();
     };
-    const choose = (title, items) => new Promise((resolveChoice) => {
+    /** A small clickable ✕ pinned to a modal's top-right corner. Modals already
+     * close on Escape; this gives mouse users the same affordance. */
+    const attachCloseButton = (modal, onClose) => {
+        const button = blessed.box({
+            parent: modal, top: 0, right: 0, width: 3, height: 1, tags: true, mouse: true,
+            content: ' {bold}✕{/bold} ',
+            style: { bg: COLOR().modal, fg: COLOR().muted, hover: { bg: COLOR().modal, fg: COLOR().error } },
+        });
+        button.on('click', onClose);
+        return button;
+    };
+    const choose = (title, items, options = {}) => new Promise((resolveChoice) => {
         composerPinned = false;
-        const renderedItems = items.map((item) => typeof item === 'string'
+        const searchable = options.searchable === true;
+        const renderItem = (item) => typeof item === 'string'
             ? safe(item)
-            : `{bold}${safe(item.label)}{/bold}${item.detail ? `  {${COLOR.muted}-fg}${safe(item.detail)}{/${COLOR.muted}-fg}` : ''}`);
+            : `{bold}${safe(item.label)}{/bold}${item.detail ? `  {${COLOR().muted}-fg}${safe(item.detail)}{/${COLOR().muted}-fg}` : ''}`;
         const itemWidths = items.map((item) => typeof item === 'string' ? item.length : Math.max(item.label.length, item.detail?.length ?? 0));
         const width = Math.min(Math.max(28, Number(screen.width) - 4), 82, Math.max(36, ...itemWidths.map((item) => item + 8)));
-        const height = Math.min(items.length + 4, 22, Math.max(6, Number(screen.height) - 2));
+        const height = Math.min(items.length + (searchable ? 5 : 4), 22, Math.max(searchable ? 7 : 6, Number(screen.height) - 2));
         const modal = blessed.box({
             parent: screen, top: 'center', left: 'center', width, height,
-            tags: true, style: { bg: COLOR.modal, fg: COLOR.text },
+            tags: true, style: { bg: COLOR().modal, fg: COLOR().text },
         });
         const heading = blessed.box({
             parent: modal, top: 0, left: 1, right: 1, height: 1, tags: true,
-            content: `{bold}${safe(title)}{/bold}`, style: { bg: COLOR.modal, fg: COLOR.text },
+            content: `{bold}${safe(title)}{/bold}`, style: { bg: COLOR().modal, fg: COLOR().text },
         });
+        const filterRow = searchable
+            ? blessed.box({
+                parent: modal, top: 1, left: 1, right: 1, height: 1, tags: true,
+                style: { bg: COLOR().modal, fg: COLOR().subtle },
+            })
+            : undefined;
         const rule = blessed.box({
-            parent: modal, top: 1, left: 1, right: 1, height: 1, tags: true,
-            content: `{${COLOR.modalRule}-fg}${'─'.repeat(Math.max(0, width - 2))}{/${COLOR.modalRule}-fg}`,
-            style: { bg: COLOR.modal, fg: COLOR.modalRule },
+            parent: modal, top: searchable ? 2 : 1, left: 1, right: 1, height: 1, tags: true,
+            content: `{${COLOR().modalRule}-fg}${'─'.repeat(Math.max(0, width - 2))}{/${COLOR().modalRule}-fg}`,
+            style: { bg: COLOR().modal, fg: COLOR().modalRule },
         });
         const list = blessed.list({
-            parent: modal, top: 2, left: 1, right: 1, bottom: 1, items: renderedItems, tags: true, keys: true, vi: true, mouse: true,
-            scrollable: true, style: { bg: COLOR.modal, fg: COLOR.text, selected: { bg: COLOR.modal, fg: COLOR.accent, bold: true } },
+            parent: modal, top: searchable ? 3 : 2, left: 1, right: 1, bottom: 1,
+            items: items.map(renderItem), tags: true, keys: true, vi: !searchable, mouse: true,
+            scrollable: true, style: { bg: COLOR().modal, fg: COLOR().text, selected: { bg: COLOR().modal, fg: COLOR().accent, bold: true } },
         });
+        // Type-to-filter state: `currentMap` maps displayed rows back to the
+        // original items order so selection and highlight stay stable under
+        // filtering.
+        let filterText = '';
+        let currentMap = items.map((_, index) => index);
+        const renderFilterRow = () => {
+            if (!filterRow)
+                return;
+            const c = COLOR();
+            filterRow.setContent(filterText
+                ? `{${c.accent}-fg}/ ${safe(filterText)}{/${c.accent}-fg}{${c.subtle}-fg}▌{/${c.subtle}-fg}`
+                : `{${c.subtle}-fg}type to filter…{/${c.subtle}-fg}`);
+        };
+        const applyFilter = () => {
+            const query = filterText.trim().toLowerCase();
+            currentMap = query
+                ? items.map((_, index) => index).filter((index) => {
+                    const item = items[index];
+                    const haystack = typeof item === 'string' ? item : `${item.label} ${item.detail ?? ''}`;
+                    return haystack.toLowerCase().includes(query);
+                })
+                : items.map((_, index) => index);
+            if (currentMap.length) {
+                list.setItems(currentMap.map((index) => renderItem(items[index])));
+                list.select(0);
+            }
+            else {
+                list.setItems([`{${COLOR().subtle}-fg}  no matches{/${COLOR().subtle}-fg}`]);
+            }
+            renderFilterRow();
+            screen.render();
+        };
+        if (searchable && filterRow) {
+            list.on('keypress', (ch, key) => {
+                if (done || key?.ctrl || key?.meta)
+                    return;
+                if (key?.name === 'backspace') {
+                    if (!filterText)
+                        return;
+                    filterText = filterText.slice(0, -1);
+                    applyFilter();
+                    return;
+                }
+                const printable = typeof ch === 'string' && ch.length === 1 && ch >= ' ' && ch !== '\x7f';
+                if (!printable)
+                    return;
+                filterText += ch;
+                applyFilter();
+            });
+        }
+        const closeButton = attachCloseButton(modal, () => finish(-1));
+        // The modal captures style objects at creation time; while a live preview
+        // swaps the active palette, re-patch it so it does not keep the palette
+        // it was opened with.
+        const restyleModal = () => {
+            const c = COLOR();
+            modal.style.bg = c.modal;
+            modal.style.fg = c.text;
+            heading.style.bg = c.modal;
+            heading.style.fg = c.text;
+            rule.style.bg = c.modal;
+            rule.style.fg = c.modalRule;
+            rule.setContent(`{${c.modalRule}-fg}${'─'.repeat(Math.max(0, width - 2))}{/${c.modalRule}-fg}`);
+            if (filterRow) {
+                filterRow.style.bg = c.modal;
+                renderFilterRow();
+            }
+            list.style.bg = c.modal;
+            list.style.fg = c.text;
+            // Row elements resolve their palette from list.style.item on render;
+            // re-create it or the picker keeps the palette it opened with.
+            list.style.item = { bg: c.modal, fg: c.text };
+            list.style.selected = { bg: c.modal, fg: c.accent, bold: true };
+            closeButton.style.bg = c.modal;
+            closeButton.style.fg = c.muted;
+            closeButton.style.hover = { bg: c.modal, fg: c.error };
+            // Respect the active filter instead of resetting to the full list.
+            if (currentMap.length)
+                list.setItems(currentMap.map((index) => renderItem(items[index])));
+            else
+                list.setItems([`{${c.subtle}-fg}  no matches{/${c.subtle}-fg}`]);
+        };
         let done = false;
         const finish = (value) => {
             if (done)
                 return;
             done = true;
             modal.destroy();
+            requestFullRedraw();
             composerPinned = true;
             focusComposer();
             resolveChoice(value);
         };
-        list.on('select', (_item, index) => finish(index));
-        list.key(['escape', 'q'], () => finish(-1));
+        list.on('select', (_item, index) => {
+            const mapped = typeof index === 'number' ? currentMap[index] : undefined;
+            if (typeof mapped === 'number')
+                finish(mapped);
+        });
+        // setItems() re-emits 'select item' while restoring the selection, so the
+        // preview handler must be re-entrancy guarded or it recurses forever.
+        let restyling = false;
+        list.on('select item', (_item, index) => {
+            if (done || restyling || !options.onHighlight || typeof index !== 'number' || index < 0)
+                return;
+            const mapped = currentMap[index];
+            if (typeof mapped !== 'number')
+                return;
+            restyling = true;
+            try {
+                options.onHighlight(mapped);
+                restyleModal();
+                renderScreen();
+            }
+            finally {
+                restyling = false;
+            }
+        });
+        if (searchable) {
+            // `q` types into the filter here, so Escape (and ✕) are the only
+            // dismissal shortcuts.
+            list.key(['escape'], () => finish(-1));
+        }
+        else {
+            list.key(['escape', 'q'], () => finish(-1));
+        }
         list.focus();
+        if (typeof options.initial === 'number' && options.initial > 0)
+            list.select(options.initial);
+        renderFilterRow();
         void heading;
         void rule;
-        screen.render();
+        renderScreen();
     });
     const ask = (label, initial = '', secret = false) => new Promise((resolveAnswer) => {
         composerPinned = false;
         const width = Math.min(76, Math.max(28, Number(screen.width) - 4));
         const modal = blessed.box({
             parent: screen, top: 'center', left: 'center', width, height: 7,
-            style: { bg: COLOR.modal, fg: COLOR.text },
+            style: { bg: COLOR().modal, fg: COLOR().text },
         });
         blessed.box({
             parent: modal, top: 0, left: 1, right: 1, height: 1, tags: true,
-            content: `{bold}${safe(label)}{/bold}`, style: { bg: COLOR.modal, fg: COLOR.text },
+            content: `{bold}${safe(label)}{/bold}`, style: { bg: COLOR().modal, fg: COLOR().text },
         });
         blessed.box({
             parent: modal, top: 1, left: 1, right: 1, height: 1,
-            content: '─'.repeat(Math.max(0, width - 2)), style: { bg: COLOR.modal, fg: COLOR.modalRule },
+            content: '─'.repeat(Math.max(0, width - 2)), style: { bg: COLOR().modal, fg: COLOR().modalRule },
         });
         const input = blessed.textbox({
             parent: modal, top: 3, left: 1, right: 1, height: 1,
             inputOnFocus: true, keys: true, mouse: true, censor: secret,
-            style: { bg: COLOR.modal, fg: COLOR.text, focus: { bg: COLOR.modal, fg: COLOR.text } },
+            style: { bg: COLOR().modal, fg: COLOR().text, focus: { bg: COLOR().modal, fg: COLOR().text } },
         });
         blessed.box({
             parent: modal, bottom: 0, left: 1, right: 1, height: 1,
-            content: 'Enter confirm  ·  Esc cancel', style: { bg: COLOR.modal, fg: COLOR.modalRule },
+            content: 'Enter confirm  ·  Esc cancel', style: { bg: COLOR().modal, fg: COLOR().modalRule },
         });
+        attachCloseButton(modal, () => finish(''));
         input.setValue(initial);
         let done = false;
         const finish = (value) => {
@@ -415,6 +735,7 @@ export async function runFullscreenTui(runtime, options) {
                 return;
             done = true;
             modal.destroy();
+            requestFullRedraw();
             composerPinned = true;
             focusComposer();
             resolveAnswer(value.trim());
@@ -424,24 +745,82 @@ export async function runFullscreenTui(runtime, options) {
         input.key('escape', () => finish(''));
         input.focus();
         input.readInput();
-        screen.render();
+        renderScreen();
     });
     const instances = () => [...instanceCache.values()];
+    // Cross-process awareness: periodically look for other live maw instances
+    // in the same workspace so the status bar can warn before edits collide.
+    let otherInstances = [];
+    const instancePoll = setInterval(() => {
+        void otherWorkspaceInstances(runtime.workspace()).then((found) => {
+            const changed = found.length !== otherInstances.length
+                || found.some((item, index) => item.pid !== otherInstances[index]?.pid);
+            otherInstances = found;
+            if (changed) {
+                renderStatus();
+                screen.render();
+            }
+        }).catch(() => undefined);
+    }, 15_000);
+    instancePoll.unref?.();
+    void otherWorkspaceInstances(runtime.workspace()).then((found) => {
+        otherInstances = found;
+        renderStatus();
+    }).catch(() => undefined);
     const depthPrefix = (instance) => {
         const status = STATUS_PRESENTATION[instance.status];
-        const color = TONE_COLOR[status.tone];
+        const color = TONE_COLOR(status.tone);
         return `${'  '.repeat(instance.depth)}{${color}-fg}${status.icon}{/${color}-fg}`;
     };
     const renderStatus = () => {
         const active = instances().filter((item) => item.status === 'running' || item.status === 'waiting' || item.status === 'queued').length;
         const activityText = active ? `${active} active` : 'Ready';
+        const usage = instances().reduce((total, item) => {
+            total.input += item.usage?.inputTokens ?? 0;
+            total.output += item.usage?.outputTokens ?? 0;
+            total.cached += item.usage?.cachedInputTokens ?? 0;
+            if (item.usage?.firstTokenMs !== undefined)
+                total.firstTokenMs = total.firstTokenMs === undefined ? item.usage.firstTokenMs : Math.min(total.firstTokenMs, item.usage.firstTokenMs);
+            return total;
+        }, { input: 0, output: 0, cached: 0, firstTokenMs: undefined });
+        const usageText = usage.input || usage.output ? `  ·  ${usage.input + usage.output} tok${usage.cached ? ` (${usage.cached} cached)` : ''}${usage.firstTokenMs !== undefined ? `  ·  first ${usage.firstTokenMs}ms` : ''}` : '';
         const width = Math.max(1, Number(screen.width) - 2);
-        const left = `maw  ${activeModel}`;
-        const right = Number(screen.width) >= 78 ? `${activityText}  ·  Ctrl+K commands` : activityText;
-        const gap = width - Number(statusbar.strWidth(left)) - Number(statusbar.strWidth(right));
+        const home = process.env.HOME ? resolvePath(process.env.HOME) : undefined;
+        const cwd = runtime.workspace();
+        const cwdText = home && cwd.startsWith(home + sep) ? `~${cwd.slice(home.length)}` : cwd;
+        const left = `maw  ${activeModel}  ${cwdText}`;
+        // Surface the mode-specific Ctrl+C semantics so the double-press quit is
+        // never a surprise, and [side] marks a /btw conversation.
+        const ctrlHint = isBtw() ? 'Ctrl+C back' : 'Ctrl+C x2 quit';
+        // Cross-process state: a read-only badge when another process owns this
+        // session, and a warning when other maw instances are live in the
+        // same workspace (file conflicts are detected, not hidden).
+        const access = runtime.sessionAccess(sessionId);
+        const accessBadge = access.writable
+            ? ''
+            : `  {${COLOR().error}-fg}[read-only${access.holderPid ? ` pid ${access.holderPid}` : ''}]{/${COLOR().error}-fg}`;
+        const instanceBadge = otherInstances.length
+            ? `  {${COLOR().warning}-fg}⚠ ${otherInstances.length} other maw${otherInstances.length === 1 ? '' : 's'}{/${COLOR().warning}-fg}`
+            : '';
+        // A standing goal takes priority over the quit hint; the hint yields so
+        // the goal never gets truncated below its floor.
+        const right = session.goal
+            ? `${activityText}${usageText}`
+            : Number(screen.width) >= 78
+                ? `${activityText}${usageText}  ·  Ctrl+K commands  ·  ${ctrlHint}`
+                : `${activityText}${usageText}  ·  ${ctrlHint}`;
+        const goal = session.goal;
+        // The standing goal rides the right cluster so the layout stays a single
+        // left/right split; a separate child widget would fight the statusbar's
+        // setContent-based repaint. Its budget is whatever the left and right
+        // clusters leave over, floored so it never collapses to nothing.
+        const goalBudget = Math.max(8, width - Number(statusbar.strWidth(left)) - Number(statusbar.strWidth(right)) - 4);
+        const goalText = goal ? `  ⚑ ${oneLine(goal, goalBudget)}` : '';
+        const rightText = `${right}${goalText}`;
+        const gap = width - Number(statusbar.strWidth(left)) - Number(statusbar.strWidth(rightText));
         statusbar.setContent(gap >= 3
-            ? `{bold}maw{/bold}  {${COLOR.muted}-fg}${safe(activeModel)}{/${COLOR.muted}-fg}${' '.repeat(gap)}{${active ? COLOR.accent : COLOR.muted}-fg}${safe(right)}{/${active ? COLOR.accent : COLOR.muted}-fg}`
-            : `{bold}maw{/bold}${active ? `  {${COLOR.accent}-fg}${active} active{/${COLOR.accent}-fg}` : ''}`);
+            ? `{bold}maw{/bold}  {${COLOR().muted}-fg}${safe(activeModel)}{/${COLOR().muted}-fg}  {${COLOR().muted}-fg}${safe(cwdText)}{/${COLOR().muted}-fg}${isBtw() ? `  {${COLOR().accent}-fg}[side]{/${COLOR().accent}-fg}` : ''}${accessBadge}${instanceBadge}${' '.repeat(Math.max(0, gap))}{${active ? COLOR().accent : COLOR().muted}-fg}${safe(rightText)}{/${active ? COLOR().accent : COLOR().muted}-fg}`
+            : `{bold}maw{/bold}${goal ? `  {${COLOR().accent}-fg}⚑ ${safe(oneLine(goal, goalBudget))}{/${COLOR().accent}-fg}` : ''}${active ? `  {${COLOR().accent}-fg}${active} active{/${COLOR().accent}-fg}` : ''}${accessBadge}${instanceBadge}`);
     };
     const conversationAtBottom = () => {
         const viewportHeight = Math.max(0, Number(conversation.height) - Number(conversation.iheight));
@@ -471,15 +850,25 @@ export async function runFullscreenTui(runtime, options) {
         const metrics = tuiLayout(screenWidth, activityVisible);
         const markdownCols = Math.max(10, Math.min(120, metrics.conversationWidth - metrics.horizontalPadding * 2 - 2));
         thinkingBlockLines.clear();
-        const welcomeVisible = !session.messages.length && !streams.size && thinkingBlocks.size === 0;
+        // The welcome screen yields to any conversation content — messages,
+        // streaming output, thinking, or transcript entries like shell runs and
+        // queued asides.
+        const welcomeVisible = !session.messages.length && !streams.size && thinkingBlocks.size === 0 && !(session.timeline?.length);
         if (welcomeVisible) {
             for (const line of renderWelcome(Number(conversation.width) - Number(conversation.iwidth) - 1, Number(conversation.height) - Number(conversation.iheight), Number(screen.height), welcomeFrame))
                 pushConversationLine(line);
             if (!welcomeTimer) {
+                welcomeStartedAt = performance.now();
                 welcomeTimer = setInterval(() => {
-                    if (nativeSelection || hasSelection() || screen.focused !== composer)
+                    if (!windowFocused || nativeSelection || hasSelection() || screen.focused !== composer)
                         return;
-                    welcomeFrame = (welcomeFrame + 1) % 80;
+                    // The frame derives from the monotonic clock instead of a counter:
+                    // after sleep or background suspension the animation lands on the
+                    // correct phase in one step, with no backlog of missed ticks.
+                    welcomeFrame = Math.floor((performance.now() - welcomeStartedAt) / 50);
+                    // The frame only reaches the screen if the conversation actually
+                    // re-renders; a bare refresh would early-return on a clean buffer.
+                    conversationDirty = true;
                     scheduleRefresh();
                 }, 50);
                 welcomeTimer.unref?.();
@@ -493,40 +882,70 @@ export async function runFullscreenTui(runtime, options) {
         if (session.timeline) {
             const { entries: visibleTimeline, omitted } = visibleTimelineEntries(session.timeline);
             if (omitted) {
-                pushConversationLine(`{${COLOR.subtle}-fg}  ${omitted} earlier activity entries omitted from this view{/${COLOR.subtle}-fg}`);
+                pushConversationLine(`{${COLOR().subtle}-fg}  ${omitted} earlier activity entries omitted from this view{/${COLOR().subtle}-fg}`);
                 pushConversationLine('');
             }
             for (const entry of visibleTimeline) {
                 if (entry.kind === 'message') {
                     pushConversationLine('');
                     if (entry.role === 'user') {
-                        pushConversationLine(`{${COLOR.accent}-fg}{bold}You{/bold}{/${COLOR.accent}-fg}`);
+                        pushConversationLine(`{${COLOR().accent}-fg}{bold}You{/bold}{/${COLOR().accent}-fg}`);
                         pushConversationLine(safe(entry.content));
                     }
                     else if (entry.role === 'system') {
-                        pushConversationLine(`{${COLOR.warning}-fg}! ${safe(entry.content)}{/${COLOR.warning}-fg}`);
+                        pushConversationLine(`{${COLOR().warning}-fg}! ${safe(entry.content)}{/${COLOR().warning}-fg}`);
                     }
                     else {
-                        pushConversationLine(`{${COLOR.muted}-fg}{bold}TokenMaw{/bold}{/${COLOR.muted}-fg}`);
+                        pushConversationLine(`{${COLOR().muted}-fg}{bold}TokenMaw{/bold}{/${COLOR().muted}-fg}`);
                         pushConversationLine(renderTuiMarkdown(entry.content, markdownCols));
                     }
                     pushConversationLine('');
                     continue;
                 }
+                if (entry.kind === 'shell') {
+                    // User-typed shell run: the command line wears a dedicated color so
+                    // it reads as a user action, not agent activity; the status glyph
+                    // keeps its own tone. Output streams beneath as plain text.
+                    pushConversationLine('');
+                    const running = entry.status === 'running';
+                    const commandColor = COLOR().warning;
+                    const stateLabel = running
+                        ? waitingIndicatorFrame(shellAnimationFrame, { accent: COLOR().accent, subtle: COLOR().subtle })
+                        : entry.status === 'failed'
+                            ? `✗ exit ${entry.exitCode ?? 1}`
+                            : entry.status === 'cancelled'
+                                ? '× stopped'
+                                : '✓';
+                    const iconColor = running ? COLOR().accent
+                        : entry.status === 'failed' ? COLOR().error
+                            : entry.status === 'cancelled' ? COLOR().muted : COLOR().success;
+                    pushConversationLine(`{${commandColor}-fg}{bold}! ${safe(entry.input ?? '')}{/bold}{/${commandColor}-fg} ${running ? stateLabel : `{${iconColor}-fg}${stateLabel}{/${iconColor}-fg}`}`);
+                    const outputLines = safe(entry.content).split('\n');
+                    const maxOutputLines = 400;
+                    if (outputLines.length > maxOutputLines) {
+                        pushConversationLine(`  {${COLOR().subtle}-fg}… ${outputLines.length - maxOutputLines} earlier output lines hidden{/${COLOR().subtle}-fg}`);
+                    }
+                    for (const line of outputLines.slice(-maxOutputLines)) {
+                        if (line.length > 0)
+                            pushConversationLine(`  ${line}`);
+                    }
+                    pushConversationLine('');
+                    continue;
+                }
                 const expanded = thinkingBlocks.get(entry.id)?.expanded ?? false;
                 const previous = thinkingBlocks.get(entry.id);
                 const block = { turnId: entry.id, expanded, content: previous?.content ?? [],
                     status: entry.status === 'running' ? 'active' : 'completed',
                     thinking: entry.kind === 'thinking' ? entry.content : previous?.thinking,
-                    startedAt: previous?.startedAt ?? (entry.status === 'running' ? Date.now() : undefined),
-                    finishedAt: entry.status === 'running' ? undefined : previous?.finishedAt };
+                    startedAt: previous?.startedAt ?? entry.startedAt ?? thinkingStartedAt.get(entry.turnId ?? '') ?? (entry.status === 'running' ? Date.now() : undefined),
+                    finishedAt: entry.status === 'running' ? undefined : previous?.finishedAt ?? entry.endedAt ?? Date.now() };
                 thinkingBlocks.set(entry.id, block);
                 if (entry.kind === 'thinking') {
                     renderThinkingBlock(block);
                 }
                 else {
                     const headerLine = lineCursor;
-                    thinkingBlockLines.set(entry.id, { headerLine });
+                    thinkingBlockLines.set(entry.id, { headerLine, lastLine: headerLine });
                     latestThinkingTurnId = entry.id;
                     const agent = entry.instanceId ? instanceCache.get(entry.instanceId)?.agentId : undefined;
                     const state = entry.status === 'running'
@@ -536,18 +955,18 @@ export async function runFullscreenTui(runtime, options) {
                             : entry.status === 'cancelled'
                                 ? STATUS_PRESENTATION.cancelled
                                 : STATUS_PRESENTATION.idle;
-                    const color = TONE_COLOR[state.tone];
+                    const color = TONE_COLOR(state.tone);
                     const presentation = toolPresentation(entry.tool ?? '', entry.input);
                     const owner = agent && agent !== 'main' ? `${agent} · ` : '';
                     const detail = presentation.detail ? `  ${oneLine(presentation.detail, Math.max(18, markdownCols - presentation.label.length - owner.length - 12))}` : '';
-                    pushConversationLine(`{${color}-fg}${expanded ? '▼' : '▶'} ${state.icon}{/${color}-fg} {${COLOR.muted}-fg}${safe(owner)}${safe(presentation.label)}${safe(detail)}{/${COLOR.muted}-fg}`);
+                    pushConversationLine(`{${color}-fg}${expanded ? '▼' : '▶'} ${state.icon}{/${color}-fg} {${COLOR().muted}-fg}${safe(owner)}${safe(presentation.label)}${safe(detail)}{/${COLOR().muted}-fg}`);
                     if (expanded) {
                         if (entry.input) {
-                            pushConversationLine(`  {${COLOR.subtle}-fg}Input{/${COLOR.subtle}-fg}`);
+                            pushConversationLine(`  {${COLOR().subtle}-fg}Input{/${COLOR().subtle}-fg}`);
                             for (const line of safe(entry.input).split('\n'))
                                 pushConversationLine(`  ${line}`);
                         }
-                        pushConversationLine(`  {${COLOR.subtle}-fg}${entry.status === 'running' ? 'Output · running' : 'Output'}{/${COLOR.subtle}-fg}`);
+                        pushConversationLine(`  {${COLOR().subtle}-fg}${entry.status === 'running' ? 'Output · running' : 'Output'}{/${COLOR().subtle}-fg}`);
                         for (const line of renderTuiMarkdown(entry.content || 'Waiting for output…', Math.max(10, markdownCols - 2)).split('\n'))
                             pushConversationLine(`  ${line}`);
                     }
@@ -556,7 +975,7 @@ export async function runFullscreenTui(runtime, options) {
                         if (patch)
                             pushConversationLine(renderTuiMarkdown(diffPreview(patch), markdownCols));
                         if (entry.status === 'failed')
-                            pushConversationLine(`  {${COLOR.error}-fg}${safe(oneLine(entry.content, markdownCols - 2))}{/${COLOR.error}-fg}`);
+                            pushConversationLine(`  {${COLOR().error}-fg}${safe(oneLine(entry.content, markdownCols - 2))}{/${COLOR().error}-fg}`);
                     }
                     pushConversationLine('');
                 }
@@ -569,15 +988,15 @@ export async function runFullscreenTui(runtime, options) {
                 : safe(message.content);
             pushConversationLine('');
             if (user) {
-                pushConversationLine(`{${COLOR.accent}-fg}{bold}You{/bold}{/${COLOR.accent}-fg}`);
+                pushConversationLine(`{${COLOR().accent}-fg}{bold}You{/bold}{/${COLOR().accent}-fg}`);
                 pushConversationLine(content);
             }
             else if (message.role === 'assistant') {
-                pushConversationLine(`{${COLOR.muted}-fg}{bold}TokenMaw{/bold}{/${COLOR.muted}-fg}`);
+                pushConversationLine(`{${COLOR().muted}-fg}{bold}TokenMaw{/bold}{/${COLOR().muted}-fg}`);
                 pushConversationLine(content);
             }
             else {
-                pushConversationLine(`{${COLOR.warning}-fg}! ${content}{/${COLOR.warning}-fg}`);
+                pushConversationLine(`{${COLOR().warning}-fg}! ${content}{/${COLOR().warning}-fg}`);
             }
             pushConversationLine('');
             if (message.role === 'user' && message.turnId && thinkingBlocks.has(message.turnId)) {
@@ -585,10 +1004,32 @@ export async function runFullscreenTui(runtime, options) {
                 renderThinkingBlock(thinkingBlocks.get(message.turnId));
             }
         }
+        if (isWaitingForFirstToken({
+            pendingTurns: pendingTurns.size,
+            streamingEntries: streams.size,
+            runningTimelineEntries: [...(session.timeline ?? [])].filter((entry) => entry.status === 'running' && entry.kind !== 'tool' && entry.kind !== 'shell').length,
+            sessionHasTimeline: Boolean(session.timeline),
+        })) {
+            // Only a confirmed thinking delta switches the slot to Thinking; until
+            // then the ellipsis stands. Deltas emit through onEvent, which always
+            // coalesces into a refresh via scheduleRefresh, so the very next frame
+            // after the first reasoning token shows the Thinking header.
+            const pendingBlock = [...thinkingBlocks.values()].reverse().find((block) => block.status === 'active' && block.thinking);
+            if (pendingBlock) {
+                renderThinkingBlock(pendingBlock);
+            }
+            else {
+                pushConversationLine('');
+                pushConversationLine(`{${COLOR().muted}-fg}{bold}TokenMaw{/bold}{/${COLOR().muted}-fg}`);
+                pushConversationLine(waitingIndicatorFrame(waitingFrame, { accent: COLOR().accent, subtle: COLOR().subtle }));
+                pushConversationLine('');
+            }
+        }
         if (!session.timeline && pendingTurns.size > 0) {
             const turnId = [...pendingTurns][0];
             if (!thinkingBlocks.has(turnId)) {
                 thinkingBlocks.set(turnId, { turnId, expanded: false, content: [], status: 'active', startedAt: Date.now() });
+                markThinkingStart(turnId);
             }
             if (!renderedBlocks.has(turnId)) {
                 renderThinkingBlock(thinkingBlocks.get(turnId));
@@ -598,13 +1039,13 @@ export async function runFullscreenTui(runtime, options) {
             if (!text.trim())
                 continue;
             pushConversationLine('');
-            pushConversationLine(`{${COLOR.muted}-fg}{bold}TokenMaw{/bold}{/${COLOR.muted}-fg}`);
+            pushConversationLine(`{${COLOR().muted}-fg}{bold}TokenMaw{/bold}{/${COLOR().muted}-fg}`);
             pushConversationLine(renderTuiMarkdown(text, markdownCols));
             pushConversationLine('');
         }
         if (notice) {
             pushConversationLine('');
-            const noticeColor = /^Error\b|failed/i.test(notice) ? COLOR.error : COLOR.warning;
+            const noticeColor = /^Error\b|failed/i.test(notice) ? COLOR().error : COLOR().warning;
             pushConversationLine(`{${noticeColor}-fg}! ${safe(notice)}{/${noticeColor}-fg}`);
             pushConversationLine('');
         }
@@ -625,29 +1066,137 @@ export async function runFullscreenTui(runtime, options) {
         finally {
             restoringConversationScroll = false;
         }
+        applyStickyHeader(conversation.childBase);
         conversationFollowOutput = shouldFollowOutput;
         conversationDirty = false;
     };
+    // Pin the collapse header of an expanded block to the conversation top while
+    // the user is reading that block's body. The pinned row is a fixed overlay on
+    // the viewport's first row, and it disappears again as soon as the block's
+    // real header scrolls back into view or the whole block scrolls past the top.
+    const applyStickyHeader = (viewportTop) => {
+        const visibleRows = Math.max(1, Number(conversation.height) - Number(conversation.iheight));
+        const scrollHeight = conversation.getScrollHeight();
+        // Nothing is scrolled out of view when the content fits, so no block can
+        // need a pinned header — fall through to the hide branch below so any
+        // sticky row left over from before the content shrank is cleared too.
+        let sticky;
+        if (scrollHeight > visibleRows) {
+            const topRow = Math.max(0, Math.min(scrollHeight - visibleRows, viewportTop));
+            const clines = conversation._clines;
+            // Block positions are logical content rows, but scrolling (childBase) is
+            // counted in rendered rows: long wrapped lines make the two diverge.
+            // Translate through ftor so the viewport is never considered to have
+            // left a block it is still inside.
+            const logicalSpan = (real) => {
+                const bucket = clines?.ftor?.[real];
+                if (!bucket || bucket.length === 0)
+                    return { first: real, last: real };
+                return { first: Number(bucket[0]), last: Number(bucket[bucket.length - 1]) };
+            };
+            const pinFor = (turnId, block, position) => {
+                const line = stickyHeaderLine(block);
+                return {
+                    turnId,
+                    line,
+                    lastLine: logicalSpan(position.lastLine).last,
+                    // The redraw key excludes the spinner glyph: its 60ms animation must
+                    // not force full-screen reallocations, while label/duration changes
+                    // (which only grow or switch) still do.
+                    redrawKey: `${turnId} :: ${line.replace(spinnerGlyph(spinnerFrame), '')}`,
+                };
+            };
+            // Keep the current sticky row only while its block still occupies the
+            // viewport top: the real header sits above the top row and the block
+            // body has not fully scrolled past it yet.
+            const pos = stickyHeader ? thinkingBlockLines.get(stickyHeader.turnId) : undefined;
+            const keptBlock = stickyHeader && pos ? thinkingBlocks.get(stickyHeader.turnId) : undefined;
+            if (stickyHeader && pos && keptBlock?.expanded) {
+                const header = logicalSpan(pos.headerLine);
+                const tail = logicalSpan(pos.lastLine);
+                if (header.first < topRow && tail.last >= topRow) {
+                    // Regenerate the row so a live block's spinner glyph and elapsed
+                    // seconds keep updating instead of freezing at the pinning frame.
+                    sticky = pinFor(stickyHeader.turnId, keptBlock, pos);
+                }
+            }
+            if (!sticky) {
+                // Several expanded blocks may sit above the viewport; the one to pin
+                // is the unique block whose rendered span still contains the top row.
+                for (const [turnId, position] of thinkingBlockLines) {
+                    const block = thinkingBlocks.get(turnId);
+                    if (!block?.expanded)
+                        continue;
+                    const header = logicalSpan(position.headerLine);
+                    const tail = logicalSpan(position.lastLine);
+                    if (header.first < topRow && tail.last >= topRow) {
+                        sticky = pinFor(turnId, block, position);
+                        break;
+                    }
+                }
+            }
+        }
+        invalidateStickyIfChanged(sticky);
+        const conversationExt = conversation;
+        if (!sticky) {
+            conversationExt._listWrapper?.hide();
+            return;
+        }
+        // The pinned header is a fixed overlay anchored at the viewport's first
+        // row; it does not consume a logical content row.
+        conversationExt._listWrapper ??= (() => {
+            // Full parent width plus the same left/right padding as the content
+            // stream keeps the pinned header aligned with the real header row.
+            // `fixed` exempts the overlay from the scrollable parent's childBase
+            // offset, so it stays anchored at the viewport's top row instead of
+            // scrolling out of view together with the conversation content.
+            const wrapper = blessed.box({ parent: conversation, top: 0, left: 0, width: '100%', height: 1, tags: true, mouse: true, fixed: true, padding: { left: 2, right: 2 }, style: { bg: COLOR().background } });
+            wrapper.on('click', () => {
+                // Blessed bubbles this click up to the conversation box; the flag
+                // consumes the bubbled copy so the block is toggled exactly once.
+                stickyClickHandled = true;
+                if (hasSelection())
+                    return;
+                focusConversation();
+                if (stickyHeader)
+                    toggleThinkingBlock(stickyHeader.turnId);
+            });
+            return wrapper;
+        })();
+        stickyHeader = sticky;
+        conversationExt._listWrapper.show();
+        conversationExt._listWrapper.setContent(sticky.line);
+    };
+    const stickyHeaderLine = (block) => {
+        const toggle = block.expanded ? '▼' : '▶';
+        const icon = block.status === 'active' ? spinnerGlyph(spinnerFrame) : toggle;
+        const color = block.status === 'active' ? COLOR().accent : COLOR().muted;
+        const label = block.status === 'active'
+            ? (block.thinking || block.content.length === 0 ? 'Thinking' : 'Working')
+            : (block.thinking ? 'Thought' : 'Activity');
+        const duration = elapsedLabel(block.startedAt, block.finishedAt);
+        const durationText = duration ? `  ${duration}` : '';
+        return `{${color}-fg}${toggle} ${icon} ${label}${durationText}{/${color}-fg}`;
+    };
     const renderThinkingBlock = (block) => {
         const headerLine = lineCursor;
         const toggle = block.expanded ? '▼' : '▶';
-        const icon = block.status === 'active'
-            ? ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'][spinnerFrame % 10]
-            : toggle;
-        const color = block.status === 'active' ? COLOR.accent : COLOR.muted;
-        const label = block.thinking
-            ? (block.status === 'active' ? 'Thinking' : 'Thought')
-            : (block.status === 'active' ? 'Working' : 'Activity');
+        const icon = block.status === 'active' ? spinnerGlyph(spinnerFrame) : toggle;
+        const color = block.status === 'active' ? COLOR().accent : COLOR().muted;
+        // An active block with nothing to show yet is the pre-first-token state:
+        // the model is reasoning, so label it Thinking, not Working.
+        const label = block.status === 'active'
+            ? (block.thinking || block.content.length === 0 ? 'Thinking' : 'Working')
+            : (block.thinking ? 'Thought' : 'Activity');
         const duration = elapsedLabel(block.startedAt, block.finishedAt);
         const durationText = duration ? `  ${duration}` : '';
         if (block.status === 'active') {
-            const scanLabel = `{${COLOR.accent}-fg}${label}{/${COLOR.accent}-fg}`;
-            pushConversationLine(`{${color}-fg}${toggle} ${icon}{/${color}-fg} ${scanLabel}{${COLOR.subtle}-fg}${durationText}{/${COLOR.subtle}-fg}`);
+            const scanLabel = `{${COLOR().accent}-fg}${label}{/${COLOR().accent}-fg}`;
+            pushConversationLine(`{${color}-fg}${toggle} ${icon}{/${color}-fg} ${scanLabel}{${COLOR().subtle}-fg}${durationText}{/${COLOR().subtle}-fg}`);
         }
         else {
             pushConversationLine(`{${color}-fg}${icon} ${label}${durationText}{/${color}-fg}`);
         }
-        thinkingBlockLines.set(block.turnId, { headerLine });
         latestThinkingTurnId = block.turnId;
         if (block.expanded) {
             if (block.thinking) {
@@ -665,17 +1214,27 @@ export async function runFullscreenTui(runtime, options) {
             }
         }
         pushConversationLine('');
+        // Recorded after the whole block is pushed so `lastLine` covers the body;
+        // the pinned header must vanish once this row scrolls past the viewport top.
+        thinkingBlockLines.set(block.turnId, { headerLine, lastLine: Math.max(0, lineCursor - 1) });
     };
     const renderActivity = () => {
+        if (activityDetail) {
+            const instance = instanceCache.get(activityDetail.instanceId);
+            if (instance)
+                activityDetail.body.setContent(activityDetailContent(instance));
+        }
         if (!activityDirty)
             return;
         const current = instances();
         const activeCount = current.filter((item) => ['running', 'waiting', 'queued'].includes(item.status)).length;
-        activityHeader.setContent(`{bold}Agents{/bold}{${COLOR.muted}-fg}${activeCount ? `  ${activeCount} active` : ''}{/${COLOR.muted}-fg}\n{${COLOR.subtle}-fg}${'─'.repeat(Math.max(0, Number(activity.width) - 2))}{/${COLOR.subtle}-fg}`);
+        activityHeader.setContent(`{bold}Activity{/bold}{${COLOR().muted}-fg}${activeCount ? `  ${activeCount} active` : ''}{/${COLOR().muted}-fg}\n{${COLOR().subtle}-fg}Click an agent to view progress{/${COLOR().subtle}-fg}\n{${COLOR().subtle}-fg}${'─'.repeat(Math.max(0, Number(activity.width) - 2))}{/${COLOR().subtle}-fg}`);
         activity.setItems(current.map((instance) => {
             const state = STATUS_PRESENTATION[instance.status];
             const summary = instance.lastError || activityLog.get(instance.instanceId)?.at(-1) || instance.lastOutput;
-            return `${depthPrefix(instance)} {bold}${safe(instance.agentId)}{/bold}  {${TONE_COLOR[state.tone]}-fg}${state.label}{/${TONE_COLOR[state.tone]}-fg}\n${'  '.repeat(instance.depth + 1)}{${COLOR.muted}-fg}${safe(oneLine(summary, Math.max(16, Number(activity.width) - instance.depth * 2 - 4)) || 'No recent activity')}{/${COLOR.muted}-fg}`;
+            const fixedWidth = instance.depth * 2 + instance.agentId.length + state.label.length + 6;
+            const detail = oneLine(summary, Math.max(0, Number(activity.width) - fixedWidth));
+            return `${depthPrefix(instance)} {bold}${safe(instance.agentId)}{/bold}  {${TONE_COLOR(state.tone)}-fg}${state.label}{/${TONE_COLOR(state.tone)}-fg}${detail ? `  {${COLOR().subtle}-fg}${safe(detail)}{/${COLOR().subtle}-fg}` : ''}`;
         }));
         activityDirty = false;
     };
@@ -686,6 +1245,7 @@ export async function runFullscreenTui(runtime, options) {
             lastLayoutKey = layoutKey;
             conversationDirty = true;
             activityDirty = true;
+            requestFullRedraw();
         }
         const conversationBox = conversation;
         conversationBox.padding.left = metrics.horizontalPadding;
@@ -736,12 +1296,29 @@ export async function runFullscreenTui(runtime, options) {
             composer.focus();
         if (composerFocused)
             screen.program.hideCursor();
-        screen.render();
+        // Overlay scrollbars must be positioned before the render pass that
+        // paints them.
+        conversationScrollbar.sync();
+        activityScrollbar.sync();
+        activityDetailScrollbar.current?.sync();
+        renderScreen();
         if (composerFocused) {
             placeComposerCursor();
             screen.program.showCursor();
         }
     };
+    // Focus regained is treated like a resize: one invalidate + full redraw so
+    // blessed's diff buffers, the viewport, and the overlay scrollbar positions
+    // are all rebuilt from the live state instead of a stale frame.
+    screen.program.on('focus', () => {
+        windowFocused = true;
+        requestFullRedraw();
+        conversationDirty = true;
+        scheduleRefresh();
+    });
+    screen.program.on('blur', () => {
+        windowFocused = false;
+    });
     const applyModel = async (alias) => {
         const resolved = options.resolveModel(alias);
         if (!resolved.config.model)
@@ -765,7 +1342,7 @@ export async function runFullscreenTui(runtime, options) {
                 label: `${alias}${alias === activeModel ? '  ✓' : ''}`,
                 detail: entry ? `${providerName(entry)} · ${entry.model}` : 'Session model',
             };
-        }));
+        }), { searchable: true });
         if (index >= 0)
             await applyModel(aliases[index]);
     };
@@ -793,7 +1370,7 @@ export async function runFullscreenTui(runtime, options) {
             notice = 'Could not load models. Enter a model name manually.';
         let model;
         if (remoteModels.length) {
-            const index = await choose('Provider model', [...remoteModels, 'Type manually…']);
+            const index = await choose('Provider model', [...remoteModels, 'Type manually…'], { searchable: true });
             if (index < 0)
                 return;
             model = index < remoteModels.length ? remoteModels[index] : await ask('Provider model name');
@@ -876,7 +1453,7 @@ export async function runFullscreenTui(runtime, options) {
         const index = await choose('Agent specs', specs.map((spec) => ({
             label: spec.id,
             detail: `${spec.scope} · ${spec.model ?? 'inherit'} · ${oneLine(spec.description, 42)}`,
-        })));
+        })), { searchable: true });
         if (index < 0)
             return;
         const spec = specs[index];
@@ -888,7 +1465,12 @@ export async function runFullscreenTui(runtime, options) {
             'Close',
         ]);
     };
-    const switchSession = async (id) => {
+    const switchSession = async (id, opts = {}) => {
+        if (opts.forkFrom) {
+            // /btw and /fork both start as a full copy of the current conversation,
+            // so the side model keeps the whole picture from message one.
+            await runtime.forkSession(opts.forkFrom, id);
+        }
         const next = await runtime.openSession(id);
         sessionId = id;
         session = next;
@@ -901,7 +1483,11 @@ export async function runFullscreenTui(runtime, options) {
         activityLog.clear();
         thinkingBlocks.clear();
         thinkingBlockLines.clear();
+        thinkingStartedAt.clear();
         pendingTurns.clear();
+        stickyHeader = undefined;
+        lastStickyKey = undefined;
+        conversation._listWrapper?.hide();
         notice = '';
         conversationDirty = true;
         conversationFollowOutput = true;
@@ -911,32 +1497,159 @@ export async function runFullscreenTui(runtime, options) {
             if (instance.instanceId === session.mainInstanceId && instance.activeTurnId)
                 pendingTurns.add(instance.activeTurnId);
         }
+        sideParentSessionId = opts.parentSessionId;
         startSpinner();
+        startStreamTimer();
         refresh();
     };
     const openSessions = async () => {
         const sessions = await runtime.listSessions();
         const index = await choose('Sessions', [
-            ...sessions.map((item) => ({ label: item.sessionId, detail: `${item.messages} messages` })),
+            ...sessions.map((item) => ({ label: item.sessionId, detail: `${item.messages} messages${item.sessionId.startsWith('btw-') ? '  [side]' : ''}` })),
             { label: 'New session', detail: 'Start a blank conversation' },
-        ]);
+        ], { searchable: true });
         if (index < 0)
             return;
         await switchSession(index === sessions.length ? `session-${Date.now()}` : sessions[index].sessionId);
     };
+    const activityDetailContent = (instance) => {
+        const state = STATUS_PRESENTATION[instance.status];
+        const stateColor = TONE_COLOR(state.tone);
+        const source = runtime.registry.get(instance.agentId)?.source ?? 'built in';
+        const lines = [
+            `{${stateColor}-fg}${state.icon} ${state.label}{/${stateColor}-fg}  {${COLOR().subtle}-fg}${safe(instance.instanceId.slice(0, 8))}{/${COLOR().subtle}-fg}`,
+            `{${COLOR().subtle}-fg}Source{/${COLOR().subtle}-fg}  ${safe(source)}`,
+            `{${COLOR().subtle}-fg}Updated{/${COLOR().subtle}-fg} ${safe(new Date(instance.updatedAt).toLocaleTimeString())}`,
+            '',
+            '{bold}Progress{/bold}',
+        ];
+        const entries = (session.timeline ?? []).filter((entry) => entry.instanceId === instance.instanceId && entry.kind !== 'message').slice(-30);
+        if (entries.length) {
+            for (const entry of entries) {
+                if (entry.kind === 'thinking') {
+                    lines.push(`{${entry.status === 'running' ? COLOR().accent : COLOR().subtle}-fg}… Thinking{/${entry.status === 'running' ? COLOR().accent : COLOR().subtle}-fg}  ${safe(oneLine(entry.content, 140) || 'Waiting…')}`);
+                    continue;
+                }
+                const itemState = entry.status === 'running'
+                    ? STATUS_PRESENTATION.running
+                    : entry.status === 'failed'
+                        ? STATUS_PRESENTATION.failed
+                        : entry.status === 'cancelled'
+                            ? STATUS_PRESENTATION.cancelled
+                            : STATUS_PRESENTATION.idle;
+                const presentation = toolPresentation(entry.tool ?? '', entry.input);
+                const detail = presentation.detail || oneLine(entry.content, 120);
+                lines.push(`{${TONE_COLOR(itemState.tone)}-fg}${itemState.icon} ${safe(presentation.label)}{/${TONE_COLOR(itemState.tone)}-fg}${detail ? `  {${COLOR().muted}-fg}${safe(oneLine(detail, 140))}{/${COLOR().muted}-fg}` : ''}`);
+            }
+        }
+        else {
+            const log = activityLog.get(instance.instanceId) ?? [];
+            if (log.length)
+                lines.push(...log.slice(-20).map((item) => `{${COLOR().muted}-fg}· ${safe(item)}{/${COLOR().muted}-fg}`));
+            else
+                lines.push(`{${COLOR().subtle}-fg}No progress events yet.{/${COLOR().subtle}-fg}`);
+        }
+        if (instance.lastError)
+            lines.push('', `{${COLOR().error}-fg}! ${safe(oneLine(instance.lastError, 240))}{/${COLOR().error}-fg}`);
+        else if (instance.lastOutput)
+            lines.push('', `{${COLOR().subtle}-fg}Latest output{/${COLOR().subtle}-fg}`, safe(oneLine(instance.lastOutput, 240)));
+        return lines.join('\n');
+    };
     const showActivityDetail = async () => {
         const instance = instances()[selectedActivityIndex];
         if (!instance)
             return;
-        const log = activityLog.get(instance.instanceId) ?? [];
-        await choose(`${instance.agentId} · ${instance.instanceId.slice(0, 8)}`, [
-            `status  ${instance.status}`,
-            `source  ${runtime.registry.get(instance.agentId)?.source ?? ''}`,
-            ...log.slice(-12),
-            ...(instance.lastOutput ? [`output  ${oneLine(instance.lastOutput, 120)}`] : []),
-            ...(instance.lastError ? [`error   ${oneLine(instance.lastError, 120)}`] : []),
-            'Close',
-        ]);
+        activityDetail?.modal.destroy();
+        composerPinned = false;
+        const width = Math.min(88, Math.max(36, Number(screen.width) - 6));
+        const height = Math.min(24, Math.max(9, Number(screen.height) - 4));
+        const modal = blessed.box({
+            parent: screen, top: 'center', left: 'center', width, height,
+            tags: true, style: { bg: COLOR().modal, fg: COLOR().text },
+        });
+        blessed.box({
+            parent: modal, top: 0, left: 2, right: 2, height: 1, tags: true,
+            content: `{bold}${safe(instance.agentId)} progress{/bold}`,
+            style: { bg: COLOR().modal, fg: COLOR().text },
+        });
+        blessed.box({
+            parent: modal, top: 1, left: 2, right: 2, height: 1,
+            content: '─'.repeat(Math.max(0, width - 4)), style: { bg: COLOR().modal, fg: COLOR().modalRule },
+        });
+        const body = blessed.box({
+            parent: modal, top: 3, left: 2, right: 2, bottom: 2,
+            tags: true, keys: true, vi: true, mouse: true, scrollable: true, alwaysScroll: true,
+            style: { bg: COLOR().modal, fg: COLOR().text },
+            content: activityDetailContent(instance),
+        });
+        blessed.box({
+            parent: modal, bottom: 0, left: 2, right: 2, height: 1,
+            content: 'Scroll to browse  ·  Esc close', style: { bg: COLOR().modal, fg: COLOR().subtle },
+        });
+        const closeDetail = () => {
+            if (activityDetail?.modal !== modal)
+                return;
+            activityDetailScrollbar.current?.destroy();
+            activityDetailScrollbar.current = undefined;
+            activityDetail = undefined;
+            modal.destroy();
+            requestFullRedraw();
+            composerPinned = true;
+            focusComposer();
+        };
+        body.key(['escape', 'q'], closeDetail);
+        attachCloseButton(modal, closeDetail);
+        activityDetailScrollbar.current = attachPillScrollbar(body, pillColors);
+        activityDetail = { instanceId: instance.instanceId, modal, body };
+        body.focus();
+        requestFullRedraw();
+        activityDetailScrollbar.current.sync();
+        renderScreen();
+    };
+    // Swaps the active palette and repaints every surface without persisting;
+    // used both to commit a choice and to preview while browsing the picker.
+    const applyThemeVisuals = (name) => {
+        const next = setActiveTheme(name);
+        resetTuiMarkdownCache();
+        applyWidgetTheme();
+        conversationDirty = true;
+        activityDirty = true;
+        requestFullRedraw();
+        return next;
+    };
+    const applyTheme = async (name) => {
+        const next = applyThemeVisuals(name);
+        notice = `Theme set to ${next.label}`;
+        await options.configManager.saveConfig({ ...options.configManager.getConfig(), theme: next.name });
+        refresh();
+    };
+    const openTheme = async () => {
+        const original = activeTuiTheme().name;
+        const names = themeNames();
+        const index = await choose('Theme', names.map((name) => ({
+            label: `${name}${name === original ? '  ✓' : ''}`,
+            detail: resolveTheme(name).label,
+        })), {
+            searchable: true,
+            // Open with the active theme preselected so browsing starts from where
+            // the user is, not from the top of an arbitrary list.
+            initial: Math.max(0, names.indexOf(original)),
+            onHighlight: (highlight) => {
+                const name = names[highlight];
+                if (name && name !== activeTuiTheme().name) {
+                    applyThemeVisuals(name);
+                    refresh();
+                }
+            },
+        });
+        if (index >= 0) {
+            await applyTheme(names[index]);
+        }
+        else if (activeTuiTheme().name !== original) {
+            // Picker dismissed: roll back to the theme chosen before previewing.
+            applyThemeVisuals(original);
+            refresh();
+        }
     };
     const command = async (raw) => {
         const [name = '', ...args] = raw.slice(1).trim().split(/\s+/);
@@ -950,6 +1663,9 @@ export async function runFullscreenTui(runtime, options) {
             case 'agents':
                 await showAgents();
                 break;
+            case 'theme':
+                await openTheme();
+                break;
             case 'sessions':
                 await openSessions();
                 break;
@@ -967,7 +1683,11 @@ export async function runFullscreenTui(runtime, options) {
                 streams.clear();
                 thinkingBlocks.clear();
                 thinkingBlockLines.clear();
+                thinkingStartedAt.clear();
                 pendingTurns.clear();
+                stickyHeader = undefined;
+                lastStickyKey = undefined;
+                conversation._listWrapper?.hide();
                 notice = '';
                 conversationDirty = true;
                 refresh();
@@ -995,6 +1715,166 @@ export async function runFullscreenTui(runtime, options) {
                 refresh();
                 break;
             }
+            // /aside queues a side note without starting a turn; it folds into the
+            // next submitted message. /btw opens a self-contained side conversation
+            // forked from this one (/back or Ctrl+C returns); /fork copies the whole
+            // conversation into a new saved session. /goal sets a standing directive
+            // shown in the status bar and injected into every agent's prompt until
+            // cleared.
+            case 'aside': {
+                const note = args.join(' ');
+                if (!note) {
+                    notice = 'Usage: /aside <note>';
+                    refresh();
+                    break;
+                }
+                const result = await runtime.addAside(sessionId, note);
+                notice = result.detail;
+                break;
+            }
+            case 'btw': {
+                const question = args.join(' ').trim();
+                if (!question) {
+                    notice = 'Usage: /btw <question> - opens a side conversation; /back or Ctrl+C returns';
+                    refresh();
+                    break;
+                }
+                await switchSession(`btw-${Date.now()}`, { forkFrom: sessionId, parentSessionId: sessionId });
+                await runtime.submitMessage(sessionId, question);
+                break;
+            }
+            case 'back': {
+                if (!sideParentSessionId) {
+                    notice = 'Not in a /btw side conversation.';
+                    refresh();
+                    break;
+                }
+                await switchSession(sideParentSessionId);
+                break;
+            }
+            case 'fork': {
+                await switchSession(`session-${Date.now()}`, { forkFrom: sessionId });
+                break;
+            }
+            case 'goal': {
+                const result = await runtime.setSessionGoal(sessionId, args.join(' '));
+                session.goal = runtime.getSession(sessionId)?.goal;
+                notice = result.detail;
+                refresh();
+                break;
+            }
+            case 'cd': {
+                const target = args.join(' ').trim();
+                if (!target) {
+                    notice = `Working directory: ${runtime.workspace()}`;
+                    refresh();
+                    break;
+                }
+                try {
+                    const result = await runtime.changeWorkspace(target, { sessionId });
+                    notice = `Working directory: ${result.to}`;
+                    refresh();
+                }
+                catch (error) {
+                    notice = `cd failed: ${error instanceof Error ? error.message : String(error)}`;
+                    refresh();
+                }
+                break;
+            }
+            // Managed worktrees: /worktree <name> creates (or reopens) an isolated
+            // checkout under .coder/worktrees/<name> and moves this session into it,
+            // /worktree-list shows status, /worktree-exit returns to the main
+            // checkout, /worktree-remove <name> drops a clean worktree.
+            case 'worktree': {
+                const name = args.join(' ').trim();
+                if (!name) {
+                    const manager = new WorktreeManager(runtime.workspace());
+                    const here = await manager.containing(runtime.workspace());
+                    notice = here ? `In worktree ${here.name} (${here.branch})${here.dirty ? ' · dirty' : ''}` : 'Usage: /worktree <name>';
+                    refresh();
+                    break;
+                }
+                try {
+                    const manager = new WorktreeManager(runtime.workspace());
+                    if (!await manager.isGitRepository())
+                        throw new Error('not inside a git repository');
+                    const info = await manager.create(name);
+                    await runtime.changeWorkspace(info.path, { sessionId });
+                    notice = `Worktree ready: ${info.path} (${info.branch})`;
+                    refresh();
+                }
+                catch (error) {
+                    notice = `worktree failed: ${error instanceof Error ? error.message : String(error)}`;
+                    refresh();
+                }
+                break;
+            }
+            case 'worktree-list': {
+                try {
+                    const manager = new WorktreeManager(runtime.workspace());
+                    const all = await manager.list();
+                    const here = await manager.containing(runtime.workspace());
+                    if (!all.length) {
+                        notice = 'No managed worktrees. /worktree <name> creates one.';
+                        refresh();
+                        break;
+                    }
+                    const lines = all.map((info) => `${info.name === here?.name ? '▸' : ' '} ${info.name}  ${info.branch}${info.dirty ? '  [dirty]' : ''}${info.locked ? '  [locked]' : ''}`);
+                    notice = lines.join('   ·   ');
+                    refresh();
+                }
+                catch (error) {
+                    notice = `worktree-list failed: ${error instanceof Error ? error.message : String(error)}`;
+                    refresh();
+                }
+                break;
+            }
+            case 'worktree-exit': {
+                try {
+                    const manager = new WorktreeManager(runtime.workspace());
+                    const here = await manager.containing(runtime.workspace());
+                    if (!here) {
+                        notice = 'Not inside a managed worktree.';
+                        refresh();
+                        break;
+                    }
+                    await manager.unlock(here.name);
+                    const main = await manager.mainRoot();
+                    await runtime.changeWorkspace(main, { sessionId });
+                    notice = `Back in main checkout: ${main} (worktree ${here.name} kept on disk)`;
+                    refresh();
+                }
+                catch (error) {
+                    notice = `worktree-exit failed: ${error instanceof Error ? error.message : String(error)}`;
+                    refresh();
+                }
+                break;
+            }
+            case 'worktree-remove': {
+                const name = args.join(' ').trim();
+                if (!name) {
+                    notice = 'Usage: /worktree-remove <name>';
+                    refresh();
+                    break;
+                }
+                try {
+                    const manager = new WorktreeManager(runtime.workspace());
+                    await manager.remove(name);
+                    notice = `Removed worktree ${name} (branch kept).`;
+                    refresh();
+                }
+                catch (error) {
+                    notice = `worktree-remove failed: ${error instanceof Error ? error.message : String(error)}`;
+                    refresh();
+                }
+                break;
+            }
+            // Alias for `/cd` with no argument; arguments are ignored, like pwd.
+            case 'pwd': {
+                notice = `Working directory: ${runtime.workspace()}`;
+                refresh();
+                break;
+            }
             case 'help':
                 await commandPalette();
                 break;
@@ -1015,6 +1895,7 @@ export async function runFullscreenTui(runtime, options) {
         const actions = [
             { label: 'Provider', detail: 'Manage model endpoints' },
             { label: 'Model', detail: 'Choose the session model' },
+            { label: 'Theme', detail: 'Switch the color theme' },
             { label: 'Agent specs', detail: 'Inspect effective roles and permissions' },
             { label: 'Sessions', detail: 'Open a saved conversation' },
             { label: 'New session', detail: 'Start a blank conversation' },
@@ -1023,26 +1904,28 @@ export async function runFullscreenTui(runtime, options) {
             { label: 'Toggle activity', detail: 'Show or hide the agent tree' },
             { label: 'Exit', detail: 'Close TokenMaw' },
         ];
-        const index = await choose('Command palette', actions);
+        const index = await choose('Command palette', actions, { searchable: true });
         if (index === 0)
             await openProvider();
         if (index === 1)
             await openModel();
         if (index === 2)
-            await showAgents();
+            await openTheme();
         if (index === 3)
-            await openSessions();
+            await showAgents();
         if (index === 4)
-            await switchSession(`session-${Date.now()}`);
+            await openSessions();
         if (index === 5)
-            await command('/clear');
+            await switchSession(`session-${Date.now()}`);
         if (index === 6)
+            await command('/clear');
+        if (index === 7)
             await command('/compact');
-        if (index === 7) {
+        if (index === 8) {
             activityVisible = !activityVisible;
             refresh();
         }
-        if (index === 8)
+        if (index === 9)
             close();
     };
     const submit = async () => {
@@ -1051,6 +1934,10 @@ export async function runFullscreenTui(runtime, options) {
             focusComposer();
             return;
         }
+        // A submit and a Ctrl+C park can interleave: if the draft changed under
+        // us, the user just parked a new draft — drop this stale submit.
+        if (value !== composerValue().trim())
+            return;
         if (!inputHistory.includes(value))
             inputHistory.push(value);
         setComposerValue('');
@@ -1058,6 +1945,16 @@ export async function runFullscreenTui(runtime, options) {
         try {
             if (value.startsWith('/'))
                 await command(value);
+            // Shell mode: `!cmd` runs directly in the workspace, outside the agent
+            // loop and tool policy. Output streams in a popup and never reaches the
+            // model context.
+            else if (value.startsWith('!')) {
+                const shellCommand = value.slice(1).trim();
+                if (!shellCommand)
+                    notice = 'Usage: !<command> runs it in the workspace shell.';
+                else
+                    await runShellMode(shellCommand);
+            }
             else {
                 notice = '';
                 conversationFollowOutput = true;
@@ -1067,8 +1964,10 @@ export async function runFullscreenTui(runtime, options) {
                     pendingTurns.add(turnId);
                 if (pendingTurns.has(turnId) && !thinkingBlocks.has(turnId)) {
                     thinkingBlocks.set(turnId, { turnId, expanded: false, content: [], status: 'active', startedAt: Date.now() });
+                    markThinkingStart(turnId);
                 }
                 startSpinner();
+                startStreamTimer();
                 refresh();
             }
         }
@@ -1092,16 +1991,28 @@ export async function runFullscreenTui(runtime, options) {
         if (event.type === 'assistant_message' && !session.messages.some((message) => message.messageId === event.message.messageId)) {
             session.messages.push({ ...event.message });
         }
+        if (event.type === 'system_message') {
+            // System notices render only in the timeline stream, never in the
+            // persisted message list; recordTimeline dedupes by messageId.
+            conversationDirty = true;
+        }
         recordTimeline(session, event);
         if (event.type === 'thinking_delta') {
             conversationDirty = true;
+            markThinkingStart(event.turnId);
             const block = thinkingBlocks.get(event.turnId) ?? [...thinkingBlocks.values()].reverse().find((item) => item.status === 'active') ?? thinkingBlocks.get(latestThinkingTurnId ?? '');
             if (block)
                 block.thinking = `${block.thinking ?? ''}${event.text}`;
+            // Deltas can burst faster than a usable frame rate; the turn timer paints
+            // them at a steady cadence so a markdown re-render runs at most ~10fps.
+            if (streamTimer)
+                return;
         }
         if (event.type === 'assistant_delta') {
             conversationDirty = true;
             streams.set(event.turnId, `${streams.get(event.turnId) ?? ''}${event.text}`);
+            if (streamTimer)
+                return;
         }
         if (event.type === 'assistant_message') {
             conversationDirty = true;
@@ -1143,6 +2054,7 @@ export async function runFullscreenTui(runtime, options) {
                 notice = `Error: ${event.error}`;
                 pendingTurns.clear();
                 stopSpinner();
+                stopStreamTimer();
             }
         }
         if (event.type === 'instance_updated' && event.instance.instanceId === session.mainInstanceId
@@ -1160,7 +2072,9 @@ export async function runFullscreenTui(runtime, options) {
             }
             if (!thinkingBlocks.has(turnId))
                 thinkingBlocks.set(turnId, { turnId, expanded: false, content: [], status: 'active', startedAt: Date.now() });
+            markThinkingStart(turnId);
             startSpinner();
+            startStreamTimer();
         }
         if (event.type === 'instance_updated'
             && event.instance.sessionId === sessionId
@@ -1175,9 +2089,61 @@ export async function runFullscreenTui(runtime, options) {
             pendingTurns.clear();
             streams.clear();
             stopSpinner();
+            stopStreamTimer();
         }
         scheduleRefresh();
     };
+    // `!command` shell mode. Output streams inline into the conversation as a
+    // timeline entry (transcript-only — never sent to the model); Ctrl+C stops
+    // the run. Like a real shell, a nonzero exit is shown, not treated as an
+    // error: the user is the authorizer.
+    const runShellMode = async (shellCommand) => {
+        const entry = recordShellRun(session, shellCommand);
+        const keepTail = (text) => (text.length > 48_000 ? text.slice(-48_000) : text);
+        const controller = new AbortController();
+        shellAbort = controller;
+        // Long-running commands animate the header's ellipsis (same gradient
+        // frames as the waiting indicator) so a live job is obvious at a glance.
+        const animation = setInterval(() => {
+            if (closed) {
+                clearInterval(animation);
+                return;
+            }
+            if (!windowFocused)
+                return;
+            shellAnimationFrame += 1;
+            conversationDirty = true;
+            scheduleRefresh();
+        }, 60);
+        animation.unref?.();
+        conversationDirty = true;
+        refresh();
+        try {
+            const result = await runShellCommand(shellCommand, {
+                workspaceRoot: runtime.workspace(),
+                signal: controller.signal,
+                onChunk: (text) => {
+                    const cleaned = text.replace(/[\u0000-\u0008\u000b\u000c\u000e-\u001f]/g, '');
+                    if (!cleaned)
+                        return;
+                    entry.content = keepTail(entry.content + cleaned);
+                    conversationDirty = true;
+                    scheduleRefresh();
+                },
+            });
+            entry.content = keepTail(result.output.replace(/[\u0000-\u0008\u000b\u000c\u000e-\u001f]/g, ''));
+            entry.exitCode = result.exitCode;
+            entry.status = result.exitCode === 0 ? 'completed' : result.exitCode === undefined ? 'cancelled' : 'failed';
+            entry.endedAt = Date.now();
+        }
+        finally {
+            clearInterval(animation);
+            if (shellAbort === controller)
+                shellAbort = undefined;
+            conversationDirty = true;
+            refresh();
+        }
+    };
     const unsubscribe = runtime.subscribe(onEvent);
     let finish;
     const done = new Promise((resolveDone) => { finish = resolveDone; });
@@ -1186,10 +2152,33 @@ export async function runFullscreenTui(runtime, options) {
             return;
         closed = true;
         stopSpinner();
+        stopStreamTimer();
         if (welcomeTimer)
             clearInterval(welcomeTimer);
+        clearInterval(instancePoll);
         unsubscribe();
+        // Release bracketed paste mode before the screen goes away so the shell
+        // after exit does not keep accumulating pasted text without newlines.
+        // Leave the alternate buffer for the same reason: the forced ?1049 entry
+        // must not outlive the TUI even where terminfo's rmcup is empty.
+        try {
+            screen.program.write(BRACKETED_PASTE_DISABLE);
+            screen.program.decrst('1004');
+            screen.program.decrst('1049');
+            screen.program.flush();
+        }
+        catch {
+            // The program may already be torn down; the reset is best effort.
+        }
         screen.destroy();
+        // Blessed only removes its own listeners on destroy; release our proxy's
+        // forwarding too so the real stdin is left with no lingering listeners.
+        try {
+            pasteInput.destroy?.();
+        }
+        catch {
+            // Already torn down; nothing left to release.
+        }
         finish?.();
     }
     composer.on('keypress', handleComposerKey);
@@ -1211,6 +2200,7 @@ export async function runFullscreenTui(runtime, options) {
     };
     const toggleActivity = () => {
         activityVisible = !activityVisible;
+        requestFullRedraw();
         refresh();
         focusComposer();
     };
@@ -1226,6 +2216,7 @@ export async function runFullscreenTui(runtime, options) {
         conversationScrollOffset = conversation.childBase;
         block.expanded = !block.expanded;
         conversationDirty = true;
+        requestFullRedraw();
         refresh();
     };
     const focusConversation = () => {
@@ -1258,6 +2249,14 @@ export async function runFullscreenTui(runtime, options) {
             return;
         const contentTop = lpos.yi + Number(conversation.itop);
         const relY = data.y - contentTop;
+        // A click on the sticky overlay already toggled the block; the bubbled
+        // copy must not toggle it back.
+        if (stickyClickHandled) {
+            stickyClickHandled = false;
+            return;
+        }
+        // The pinned header is an overlay, not an inserted row: logical line
+        // indices still map 1:1 onto rendered rows, so no extra offset applies.
         const row = Math.floor(relY) + conversation.childBase;
         // RenderThinkingBlock records indices in the raw `lines` array, but blessed
         // re-parses/wraps content into `_clines`. Translate via ftor so the click
@@ -1278,7 +2277,26 @@ export async function runFullscreenTui(runtime, options) {
         if (latestThinkingTurnId)
             toggleThinkingBlock(latestThinkingTurnId);
     });
-    activity.on('click', focusComposer);
+    activity.on('click', (data) => {
+        const list = activity;
+        const selectedItem = list.items[list.selected];
+        const bounds = selectedItem?.lpos;
+        if (!bounds || data.y === undefined || data.y < bounds.yi || data.y >= bounds.yl)
+            return;
+        selectedActivityIndex = list.selected;
+        runAction(showActivityDetail);
+    });
+    // Blessed routes clicks that land on a rendered list row to the row element
+    // itself; the list only sees the bubbled `element click`. Resolve the row
+    // back to its agent so a click opens that agent's progress directly.
+    activity.on('element click', (el) => {
+        const list = activity;
+        const index = list.items.indexOf(el);
+        if (index < 0)
+            return;
+        selectedActivityIndex = index;
+        runAction(showActivityDetail);
+    });
     conversation.on('mousedown', focusConversation);
     conversation.on('wheelup', () => {
         selection = undefined;
@@ -1299,6 +2317,12 @@ export async function runFullscreenTui(runtime, options) {
             return;
         conversationScrollOffset = conversation.childBase;
         conversationFollowOutput = conversationAtBottom();
+        // Pure scrolling does not mark the content dirty; the pinned header still
+        // needs to appear/disappear as the viewport moves.
+        if (stickyHeader || thinkingBlockLines.size > 0) {
+            conversationDirty = true;
+            scheduleRefresh();
+        }
     });
     screen.key(['pageup', 'pagedown'], (_ch, key) => {
         selection = undefined;
@@ -1367,10 +2391,61 @@ export async function runFullscreenTui(runtime, options) {
             selection.dragging = false;
         }
     });
+    // Ctrl+C semantics depend on mode: inside a /btw side conversation it
+    // returns to the parent session; elsewhere a bare press arms a quit
+    // confirmation and a second press within 2s exits, so a stray Ctrl+C never
+    // kills the session by accident.
+    let ctrlCAt = 0;
+    const handleBareCtrlC = () => {
+        // A running !command is the first thing Ctrl+C stops; the quit
+        // confirmation must not fire while the user is just killing a job.
+        if (shellAbort) {
+            shellAbort.abort();
+            notice = 'Stopping command…';
+            refresh();
+            return;
+        }
+        if (isBtw()) {
+            const parent = sideParentSessionId;
+            void switchSession(parent).then(() => {
+                notice = 'Returned from /btw side conversation.';
+                refresh();
+            });
+            return;
+        }
+        // A non-empty draft changes the first press: park it in history and
+        // clear the composer. The second press (or a bare press on an empty
+        // composer) arms the quit as before.
+        if (composerValue().trim()) {
+            const draft = composerValue().trim();
+            if (inputHistory[inputHistory.length - 1] !== draft)
+                inputHistory.push(draft);
+            // setComposerValue resets historyIndex, so the next Up naturally lands
+            // on the freshly parked draft.
+            setComposerValue('');
+            notice = 'Draft saved — press Up to restore.';
+            // The notice renders through the conversation timeline; without this
+            // flag the repaint skips the stale transcript and the user never sees
+            // the confirmation.
+            conversationDirty = true;
+            renderComposerFrame();
+            refresh();
+            focusComposer();
+            return;
+        }
+        const pressedAt = Date.now();
+        if (pressedAt - ctrlCAt > 2000) {
+            ctrlCAt = pressedAt;
+            notice = 'Press Ctrl+C again to quit.';
+            refresh();
+            return;
+        }
+        close();
+    };
     screen.key(['C-c'], () => {
         const range = orderedSelection();
         if (!range || !selection) {
-            close();
+            handleBareCtrlC();
             return;
         }
         const [start, end] = range;