ispbills-icli 8.5.3 → 8.5.4

package/src/tui/app.js

@@ -1,14 +1,10 @@
-// Root Ink application. Renders an INLINE chat UI (GitHub Copilot CLI style):
-// the banner prints once at the top and scrolls away, completed transcript
-// items are flushed to the terminal's native scrollback via Ink <Static> (so
-// you can scroll back through history), and only the live/streaming area plus
-// the input composer are re-rendered in place at the bottom.
+// Root Ink application. Renders an INLINE chat UI (GitHub Copilot CLI style).
 import { html, useState, useEffect, useRef, useCallback } from './dom.js';
 import { Box, Text, Static, useStdout, useApp, useInput } from 'ink';
 import { C, glyphs, midDot, dash } from './theme.js';
 import {
   Banner, TabBar, FollowupChips, UserMessage, AssistantMessage, StatusLines, Reasoning,
-  Plan, Connect, Notice, Thinking, Choice,
+  Plan, Connect, Notice, Thinking, Choice, ShellOutput, SearchOverlay, HelpOverlay,
 } from './components.js';
 import { Composer } from './composer.js';
 import { streamChat } from '../client.js';
@@ -19,11 +15,11 @@ import { loadNotes, addNote, forgetNote, memoryPreamble } from '../memory.js';
 import { copyToClipboard } from '../clipboard.js';
 import { createGist } from '../gist.js';
 import { git as gitCmd, commitBackup } from '../gitrepo.js';
-import { execSync } from 'child_process';
+import { execSync, spawnSync } from 'child_process';
 import { homedir } from 'os';
-import { relative } from 'path';
+import { dirname, isAbsolute, relative, resolve } from 'path';
+import { existsSync, readFileSync } from 'fs';
 
-// Split a command argument string into argv, honouring "quoted" segments.
 function splitArgs(s) {
   const out = [];
   const re = /"([^"]*)"|'([^']*)'|(\S+)/g;
@@ -32,7 +28,6 @@ function splitArgs(s) {
   return out;
 }
 
-// Shorten a path with ~ for home directory.
 function shortenPath(p) {
   try {
     const home = homedir();
@@ -42,29 +37,68 @@ function shortenPath(p) {
   return p;
 }
 
-// Get the current git branch name (synchronous, non-throwing).
-function gitBranch() {
+function gitBranch(cwd = process.cwd()) {
   try {
     return execSync('git rev-parse --abbrev-ref HEAD', {
-      cwd: process.cwd(), stdio: ['ignore', 'pipe', 'ignore'], timeout: 1000,
+      cwd, stdio: ['ignore', 'pipe', 'ignore'], timeout: 1000,
     }).toString().trim();
   } catch {
     return '';
   }
 }
 
-// Approximate token count from text (~4 chars per token).
 function approxTokens(messages) {
   const total = messages.reduce((n, m) => n + (m.content?.length || 0), 0);
   return Math.round(total / 4);
 }
 
+function pkgVersion() {
+  try {
+    return JSON.parse(readFileSync(new URL('../../package.json', import.meta.url), 'utf8')).version || 'unknown';
+  } catch {
+    return 'unknown';
+  }
+}
+
+function feedbackUrl() {
+  try {
+    const raw = execSync('git config --get remote.origin.url', {
+      cwd: process.cwd(), stdio: ['ignore', 'pipe', 'ignore'], timeout: 1000,
+    }).toString().trim();
+    if (!raw) return 'https://github.com/issues/new';
+    const gh = raw
+      .replace(/^git@github\.com:/, 'https://github.com/')
+      .replace(/\.git$/, '');
+    if (/^https:\/\/github\.com\//.test(gh)) return `${gh}/issues/new`;
+  } catch {}
+  return 'https://github.com/issues/new';
+}
+
+function isTrustedDir(cfg, dir) {
+  const trusted = cfg?.tui?.trustedDirs || {};
+  let cur = resolve(dir);
+  while (true) {
+    if (trusted[cur]) return true;
+    const parent = dirname(cur);
+    if (parent === cur) break;
+    cur = parent;
+  }
+  return false;
+}
+
+function itemPreview(it) {
+  if (!it) return '';
+  if (it.type === 'user' || it.type === 'assistant' || it.type === 'notice' || it.type === 'help') return String(it.text || it.type);
+  if (it.type === 'shell') return `$ ${it.command}\n${it.output || ''}`;
+  if (it.type === 'plan') return `Plan ${it.reply?.summary || ''}`;
+  if (it.type === 'connect') return `Connect ${it.reply?.device?.kind || ''}`;
+  if (it.type === 'activity') return (it.status || []).join('\n');
+  return JSON.stringify(it);
+}
+
 function useTerminalSize() {
   const { stdout } = useStdout();
-  const [size, setSize] = useState({
-    cols: stdout?.columns || 80,
-    rows: stdout?.rows || 24,
-  });
+  const [size, setSize] = useState({ cols: stdout?.columns || 80, rows: stdout?.rows || 24 });
   useEffect(() => {
     if (!stdout) return;
     const on = () => setSize({ cols: stdout.columns || 80, rows: stdout.rows || 24 });
@@ -76,68 +110,203 @@ function useTerminalSize() {
 
 let itemId = 0;
 const nextId = () => ++itemId;
-
-// Mode cycle: ask → plan → autopilot → ask
 const MODES = ['ask', 'plan', 'autopilot'];
 
-export function App({ cfg, display = {}, onExternal, onExit, initialQuestion }) {
+export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, showBanner = true }) {
   const { exit } = useApp();
-  const { cols, rows } = useTerminalSize();
+  const { cols } = useTerminalSize();
   const colsRef = useRef(cols);
   useEffect(() => { colsRef.current = cols; }, [cols]);
 
   const [items, setItems] = useState([]);
-  const [live, setLive] = useState(null); // { status:[], reasoning:'', text:'' }
+  const [live, setLive] = useState(null);
   const [busy, setBusy] = useState(false);
   const [model, setModel] = useState(cfg._model);
-  const [showReasoning, setShowReasoning] = useState(false); // collapsed by default per spec
-  const [mode, setMode] = useState('ask');      // 'ask' | 'plan' | 'autopilot'
+  const [showReasoning, setShowReasoning] = useState(false);
+  const [mode, setMode] = useState('ask');
   const [activeTab, setActiveTab] = useState('session');
-  const [chips, setChips] = useState([]);       // followup suggestion strings
+  const [chips, setChips] = useState([]);
   const [activeChip, setActiveChip] = useState(0);
   const [hint, setHint] = useState('');
   const [startedAt, setStartedAt] = useState(0);
-  const [choice, setChoice] = useState(null); // { title, note, options, allowText, sel, text, focusText, onPick }
-  const [clearEpoch, setClearEpoch] = useState(0); // bump to remount <Static> on /clear /new
-
-  const convo = useRef([]);      // [{role, content}] for the backend
-  const plain = useRef([]);      // plain-text transcript for exit reprint
-  const abortRef = useRef(null); // AbortController of the in-flight turn
-  const ctrlC = useRef(0);       // timestamp of the last lone Ctrl+C
-  const apRef = useRef(false);   // live autopilot flag (read inside runTurn)
-  const modeRef = useRef('ask'); // live mode (read inside runTurn)
-  const modelRef = useRef(cfg._model); // preferred model to request
-  const lastAnswerRef = useRef('');    // most recent assistant answer (for /copy, /gist)
-  const choiceActionRef = useRef(null); // action to run when a non-AI Choice is picked
-  const branchRef = useRef(gitBranch()); // current git branch (detected once at start)
-
-  // Enable terminal bracketed-paste so multi-line pastes (mouse right-click or
-  // Cmd/Ctrl+V) arrive wrapped in markers as one block — the Composer inserts
-  // them with newlines preserved instead of submitting on the first newline.
+  const [choice, setChoice] = useState(null);
+  const [clearEpoch, setClearEpoch] = useState(0);
+  const [composerClearToken, setComposerClearToken] = useState(0);
+  const [composerText, setComposerText] = useState('');
+  const [search, setSearch] = useState(null);
+  const [expandedItems, setExpandedItems] = useState(null);
+  const [allowAll, setAllowAll] = useState(Boolean(cfg?.tui?.allowAll));
+  const [streamerMode, setStreamerMode] = useState(Boolean(cfg?.tui?.streamerMode));
+  const [shellMode, setShellMode] = useState(false);
+  const [trusted, setTrusted] = useState(isTrustedDir(cfg, process.cwd()));
+
+  const convo = useRef([]);
+  const plain = useRef([]);
+  const abortRef = useRef(null);
+  const ctrlC = useRef(0);
+  const apRef = useRef(false);
+  const modeRef = useRef('ask');
+  const modelRef = useRef(cfg._model);
+  const lastAnswerRef = useRef('');
+  const choiceActionRef = useRef(null);
+  const branchRef = useRef(gitBranch());
+  const queuedRef = useRef(null);
+  const activeTurns = useRef(0);
+  const dismissTimers = useRef(new Map());
+  const dispatchSubmitRef = useRef(null);
+
   useEffect(() => {
     try { process.stdout.write('\x1b[?2004h'); } catch {}
     return () => { try { process.stdout.write('\x1b[?2004l'); } catch {} };
   }, []);
 
+  useEffect(() => () => {
+    for (const timer of dismissTimers.current.values()) clearTimeout(timer);
+  }, []);
+
+  const persistCfg = useCallback(() => {
+    try { saveConfig(cfg); } catch {}
+  }, [cfg]);
+
   const setModeState = useCallback((next) => {
     modeRef.current = next;
     apRef.current = next === 'autopilot';
     setMode(next);
   }, []);
 
-  const push = useCallback((item) => setItems((xs) => [...xs, { id: nextId(), cols: colsRef.current, ...item }]), []);
+  const push = useCallback((item) => {
+    const next = { id: nextId(), cols: colsRef.current, ts: item.ts ?? Date.now(), ...item };
+    setItems((xs) => [...xs, next]);
+    return next;
+  }, []);
+
+  const removeItem = useCallback((id) => {
+    setItems((xs) => xs.filter((x) => x.id !== id));
+    const timer = dismissTimers.current.get(id);
+    if (timer) {
+      clearTimeout(timer);
+      dismissTimers.current.delete(id);
+    }
+  }, []);
+
+  useEffect(() => {
+    for (const item of items) {
+      if (item.type !== 'notice' || !item.autoDismiss || dismissTimers.current.has(item.id)) continue;
+      const timer = setTimeout(() => removeItem(item.id), 4000);
+      dismissTimers.current.set(item.id, timer);
+    }
+  }, [items, removeItem]);
+
+  const pushNotice = useCallback((text, color = C.gray, autoDismiss = false) => {
+    push({ type: 'notice', text, color, autoDismiss });
+  }, [push]);
+
   const log = (line) => plain.current.push(line);
 
-  // Clear the visible transcript: wipe the screen + native scrollback and
-  // remount <Static> (via clearEpoch) so nothing is re-flushed above the input.
   const clearAll = useCallback(() => {
     try { process.stdout.write('\x1b[2J\x1b[3J\x1b[H'); } catch {}
     setItems([]);
+    setExpandedItems(null);
+    setSearch(null);
     setClearEpoch((n) => n + 1);
   }, []);
 
+  const queueSubmission = useCallback((text) => {
+    const q = String(text || '').trim();
+    if (!q) { pushNotice('Nothing to queue.', C.muted, true); return; }
+    queuedRef.current = q;
+    pushNotice(`[queued] ${q}`, C.warning, true);
+  }, [pushNotice]);
+
+  const openTrustDialog = useCallback((dir = process.cwd()) => {
+    choiceActionRef.current = (value) => {
+      if (value === 'session') {
+        setTrusted(true);
+        pushNotice(`Trusted for this session: ${shortenPath(dir)}`, C.success, true);
+        return;
+      }
+      if (value === 'remember') {
+        cfg.tui = cfg.tui || {};
+        cfg.tui.trustedDirs = { ...(cfg.tui.trustedDirs || {}), [resolve(dir)]: true };
+        persistCfg();
+        setTrusted(true);
+        pushNotice(`Trusted and remembered: ${shortenPath(dir)}`, C.success, true);
+        return;
+      }
+      doExit();
+    };
+    setChoice({
+      title: 'Do you trust files in this folder?',
+      note: shortenPath(dir),
+      sel: 0,
+      text: '',
+      focusText: false,
+      allowText: false,
+      options: [
+        { label: '1. Yes', value: 'session' },
+        { label: '2. Yes, remember', value: 'remember' },
+        { label: '3. No, exit', value: 'exit', danger: true },
+      ],
+    });
+  }, [cfg, persistCfg]);
+
+  useEffect(() => {
+    if (!trusted && !choice) openTrustDialog(process.cwd());
+  }, [trusted, choice, openTrustDialog]);
+
+  const doExit = useCallback(() => { onExit?.(plain.current); exit(); }, [exit, onExit]);
+
+  const maybeProcessQueue = useCallback(() => {
+    if (activeTurns.current !== 0 || !queuedRef.current) return;
+    const next = queuedRef.current;
+    queuedRef.current = null;
+    setComposerClearToken((n) => n + 1);
+    setTimeout(() => dispatchSubmitRef.current?.(next, { queued: true }), 0);
+  }, []);
+
+  const doGist = useCallback(async (kind) => {
+    let content; let filename; let description;
+    if (kind === 'transcript') {
+      content = convo.current.map((m) => `### ${m.role}\n\n${m.content}`).join('\n\n---\n\n') || '(empty)';
+      filename = 'icli-transcript.md';
+      description = 'iCli conversation transcript';
+    } else {
+      content = lastAnswerRef.current || '(no answer)';
+      filename = 'icli-answer.md';
+      description = 'iCli answer';
+    }
+    pushNotice(`${glyphs.arrow} Creating secret gist…`, C.gray);
+    try {
+      const { url } = await createGist(cfg, { filename, content, description, isPublic: false });
+      const tool = await copyToClipboard(url);
+      pushNotice(`${glyphs.check} Gist created: ${url}${tool ? ' (URL copied)' : ''}`, C.green);
+    } catch (e) {
+      pushNotice(`${glyphs.cross} ${e.message}`, C.red);
+    }
+  }, [cfg, pushNotice]);
+
+  const runShellCommand = useCallback((rawCommand) => {
+    const command = String(rawCommand || '').trim();
+    if (!command) {
+      setShellMode(true);
+      pushNotice('Shell mode enabled. Press Esc to exit.', C.warning, true);
+      return;
+    }
+    if (shellMode && /^(exit|quit)$/i.test(command)) {
+      setShellMode(false);
+      pushNotice('Exited shell mode.', C.muted, true);
+      return;
+    }
+    push({ type: 'user', text: shellMode ? command : `!${command}` });
+    log(`\n$ ${command}\n`);
+    const res = spawnSync(command, { shell: true, encoding: 'utf8', cwd: process.cwd(), maxBuffer: 1024 * 1024 });
+    const output = [res.stdout || '', res.stderr || ''].join('').trim() || '(no output)';
+    push({ type: 'shell', command, output, code: res.status ?? 0 });
+  }, [log, push, pushNotice, shellMode]);
+
   const runTurn = useCallback(async (question, opts = {}) => {
     const { depth = 0, archive = null, label = '', synthetic = false } = opts;
+    activeTurns.current += 1;
     if (!synthetic) {
       push({ type: 'user', text: question });
       log(`\n${glyphs.prompt} ${question}\n`);
@@ -146,15 +315,17 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion })
     setBusy(true);
     setHint('');
     setChips([]);
+    setExpandedItems(null);
+    setSearch(null);
     setStartedAt(Date.now());
     const s = { status: [], reasoning: '', text: '', reply: null };
     setLive({ ...s });
 
     const abort = new AbortController();
     abortRef.current = abort;
-
     const context = {
       autopilot: apRef.current,
+      allowAll,
       client: 'icli',
       ui: { tables: true, prompts: true, markdown: true },
     };
@@ -176,55 +347,51 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion })
       });
       if (meta.model) setModel(meta.model);
       const type = reply.type ?? 'message';
-      // Persist the tool / sub-agent activity trace inline (Copilot-CLI style)
-      // so it stays in history instead of vanishing with the live region.
       if (s.status.length) push({ type: 'activity', status: s.status });
-      if (type === 'plan') { push({ type: 'plan', reply }); log('[plan] ' + (reply.summary || '')); }
-      else if (type === 'connect') {
-        push({ type: 'connect', reply }); log('[connect] ' + (reply.device?.kind || ''));
-        // The icli has no interactive terminal — send a synthetic session-event
-        // so the backend continues to the plan/answer (rule 4). Depth-guard to
-        // prevent a loop if the backend keeps emitting connect (shouldn't happen).
+      if (type === 'plan') {
+        push({ type: 'plan', reply });
+        log('[plan] ' + (reply.summary || ''));
+      } else if (type === 'connect') {
+        push({ type: 'connect', reply });
+        log('[connect] ' + (reply.device?.kind || ''));
         if (depth < 2) {
           const dev = reply.device || {};
           const goal = convo.current.filter((m) => m.role === 'user').slice(-1)[0]?.content || '';
           const sessionEvent = `[session-event] Terminal session opened on ${dev.kind || 'device'} id=${dev.id || '?'} proto=${dev.proto || 'ssh'}. vendor=auto. OPERATOR GOAL: ${goal}`;
-          setLive(null); setBusy(false); abortRef.current = null;
+          setLive(null);
           return runTurn(sessionEvent, { depth: depth + 1, synthetic: true });
         }
+      } else if (type === 'prompt' || type === 'choice') {
+        push({ type: 'assistant', text: text || reply.question || '' });
+        log(text || reply.question || '');
+      } else {
+        push({ type: 'assistant', text: text || '(no response)' });
+        log(text || '');
       }
-      else if (type === 'prompt' || type === 'choice') { push({ type: 'assistant', text: text || reply.question || '' }); log(text || reply.question || ''); }
-      else { push({ type: 'assistant', text: text || '(no response)' }); log(text || ''); }
       if (text) convo.current.push({ role: 'assistant', content: text });
       lastAnswerRef.current = text || reply.summary || reply.question || lastAnswerRef.current;
 
-      // Populate followup chips from reply.suggestions (up to 4).
       if (Array.isArray(reply.suggestions) && reply.suggestions.length) {
         setChips(reply.suggestions.slice(0, 4));
         setActiveChip(0);
       }
 
-      // Archive a /backup answer to the per-user git repo.
       if (archive === 'backup' && text) {
         try {
           const r = await commitBackup(cfg, label, text);
-          push({ type: 'notice',
-            text: `${glyphs.check} Backup saved to git repo (${r.file})${r.committed ? '' : ' — nothing new to commit'}.`,
-            color: C.green });
+          pushNotice(`${glyphs.check} Backup saved to git repo (${r.file})${r.committed ? '' : ' — nothing new to commit'}.`, C.green);
         } catch (e) {
-          push({ type: 'notice', text: `${glyphs.warn} Could not archive backup: ${e.message}`, color: C.yellow });
+          pushNotice(`${glyphs.warn} Could not archive backup: ${e.message}`, C.warning);
         }
       }
 
-      // Autopilot: auto-confirm a proposed plan without waiting for the user.
       if (type === 'plan' && apRef.current && depth < 3) {
-        push({ type: 'notice', text: `${glyphs.bolt} autopilot ${dash()} applying fix…`, color: C.yellow });
-        setLive(null); setBusy(false); abortRef.current = null;
+        pushNotice(`${glyphs.bolt} autopilot ${dash()} applying fix…`, C.warning, true);
+        setLive(null);
         return runTurn('apply fix', { depth: depth + 1 });
       }
 
-      // Otherwise surface an interactive prompt for the user to choose/answer.
-      setLive(null); setBusy(false); abortRef.current = null;
+      setLive(null);
       if (type === 'plan') {
         const destructive = (reply.steps || []).some((st) => /destruct|high/.test(st.risk || ''));
         setChoice({
@@ -249,77 +416,73 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion })
         });
       }
     } catch (e) {
-      if (abort.signal.aborted) push({ type: 'notice', text: `${glyphs.cross} Cancelled.`, color: C.yellow });
-      else push({ type: 'notice', text: `${glyphs.cross} ${e.message}`, color: C.red });
-      setLive(null); setBusy(false); abortRef.current = null;
+      if (abort.signal.aborted) pushNotice(`${glyphs.cross} Cancelled.`, C.warning);
+      else pushNotice(`${glyphs.cross} ${e.message}`, C.red);
     } finally {
       abortRef.current = null;
       setLive(null);
       setBusy(false);
+      activeTurns.current = Math.max(0, activeTurns.current - 1);
+      maybeProcessQueue();
     }
-  }, [cfg, push]);
+  }, [allowAll, cfg, log, maybeProcessQueue, push, pushNotice]);
 
-  const doExit = useCallback(() => { onExit?.(plain.current); exit(); }, [exit, onExit]);
-
-  // Create a gist from the last answer or the whole transcript (invoked by the
-  // /gist Choice below).
-  const doGist = useCallback(async (kind) => {
-    let content, filename, description;
-    if (kind === 'transcript') {
-      content = convo.current.map((m) => `### ${m.role}\n\n${m.content}`).join('\n\n---\n\n') || '(empty)';
-      filename = 'icli-transcript.md';
-      description = 'iCli conversation transcript';
-    } else {
-      content = lastAnswerRef.current || '(no answer)';
-      filename = 'icli-answer.md';
-      description = 'iCli answer';
-    }
-    push({ type: 'notice', text: `${glyphs.arrow} Creating secret gist…`, color: C.gray });
-    try {
-      const { url } = await createGist(cfg, { filename, content, description, isPublic: false });
-      const tool = await copyToClipboard(url);
-      push({ type: 'notice', text: `${glyphs.check} Gist created: ${url}${tool ? ' (URL copied)' : ''}`, color: C.green });
-    } catch (e) {
-      push({ type: 'notice', text: `${glyphs.cross} ${e.message}`, color: C.red });
+  const showExpanded = useCallback((kind, sourceItems) => {
+    if (!sourceItems.length) {
+      pushNotice('Nothing to expand yet.', C.muted, true);
+      return;
     }
-  }, [cfg, push]);
+    setExpandedItems({
+      kind,
+      items: sourceItems.map((it, idx) => ({ ...it, id: `expanded-${kind}-${idx}-${it.id}` })),
+    });
+    pushNotice(`Expanded ${kind}.`, C.muted, true);
+  }, [pushNotice]);
 
-  const onSubmit = useCallback((raw) => {
-    const q = raw.trim();
-    if (!q) return;
+  const dispatchSubmit = useCallback((raw, opts = {}) => {
+    const q = String(raw || '').trim();
+    if (!q || !trusted) return;
     setHint('');
+    setExpandedItems(null);
+    setSearch(null);
+
+    if (shellMode) { runShellCommand(q); return; }
+    if (q === '!') { runShellCommand(''); return; }
+    if (q.startsWith('!')) { runShellCommand(q.slice(1)); return; }
+    if (q === '?') { push({ type: 'help', text: 'help' }); return; }
 
     if (q === '/exit' || q === 'exit' || q === 'quit') { doExit(); return; }
     if (q === '/clear') { clearAll(); return; }
     if (q === '/new') {
       convo.current = [];
       clearAll();
-      push({ type: 'notice', text: `${glyphs.check} New conversation started.`, color: C.green });
+      pushNotice(`${glyphs.check} New conversation started.`, C.green);
       return;
     }
     if (q === '/reasoning') {
-      setShowReasoning((v) => { push({ type: 'notice', text: `Reasoning display ${!v ? 'expanded' : 'collapsed'}.` }); return !v; });
+      setShowReasoning((v) => { pushNotice(`Reasoning display ${!v ? 'expanded' : 'collapsed'}.`); return !v; });
       return;
     }
     if (q === '/autopilot' || q === '/auto') {
       const next = modeRef.current !== 'autopilot' ? 'autopilot' : 'ask';
       setModeState(next);
-      push({ type: 'notice',
-        text: next === 'autopilot'
+      pushNotice(
+        next === 'autopilot'
           ? `${glyphs.bolt} Autopilot ON ${dash()} proposed fixes will be applied automatically. Shift+Tab to cycle modes.`
           : `Mode: ask ${dash()} fixes will wait for your confirmation.`,
-        color: next === 'autopilot' ? C.warning : C.muted });
+        next === 'autopilot' ? C.warning : C.muted,
+      );
       return;
     }
     if (q === '/plan') {
       const next = modeRef.current !== 'plan' ? 'plan' : 'ask';
       setModeState(next);
-      push({ type: 'notice', text: `Mode: ${next} ${dash()} Shift+Tab to cycle.`, color: C.accent });
+      pushNotice(`Mode: ${next} ${dash()} Shift+Tab to cycle.`, C.accent);
       return;
     }
     if (q === '/context' || q === '/usage') {
       const tokens = approxTokens(convo.current);
-      push({ type: 'notice', text: `Context: ~${tokens.toLocaleString()} tokens (${convo.current.length} messages). /compact to summarise.` });
+      pushNotice(`Context: ~${tokens.toLocaleString()} tokens (${convo.current.length} messages). /compact to summarise.`);
       return;
     }
     if (q === '/compact' || q.startsWith('/compact ')) {
@@ -328,30 +491,43 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion })
         ? `Summarise our conversation so far, focusing on: ${focus}`
         : 'Summarise our conversation so far in a concise way, preserving key facts and decisions.';
       convo.current = [];
-      push({ type: 'notice', text: `${glyphs.arrow} Compacting history…`, color: C.muted });
+      pushNotice(`${glyphs.arrow} Compacting history…`, C.muted);
       runTurn(prompt);
       return;
     }
     if (q === '/theme') {
-      push({ type: 'notice', text: 'Theme: dark (default). Palette: purple accent, blue brand, green success, amber warning, red error.\nSet NO_COLOR=1 to disable colour or FORCE_COLOR=1 to force it.' });
+      pushNotice('Theme: dark (default). Palette: purple accent, blue brand, green success, amber warning, red error.\nSet NO_COLOR=1 to disable colour or FORCE_COLOR=1 to force it.');
       return;
     }
     if (q === '/session') {
       const tokens = approxTokens(convo.current);
       const branch = branchRef.current;
       const cwd = shortenPath(process.cwd());
-      push({ type: 'notice', text: [
-        `Session  ${dash()} ${cwd}${branch ? ' [' + branch + ']' : ''}`,
+      const name = cfg?.tui?.sessionNames?.[process.cwd()] || '(unnamed)';
+      pushNotice([
+        `Session  ${dash()} ${name}`,
+        `Path     ${dash()} ${cwd}${branch ? ' [' + branch + ']' : ''}`,
         `Messages ${dash()} ${convo.current.length}`,
         `Tokens   ${dash()} ~${tokens.toLocaleString()} (approx)`,
         `Model    ${dash()} ${model || modelRef.current || 'server default'}`,
         `Mode     ${dash()} ${modeRef.current}`,
-      ].join('\n') });
+      ].join('\n'));
+      return;
+    }
+    if (q === '/resume' || q.startsWith('/resume ') || q === '/continue' || q.startsWith('/continue ')) {
+      const name = cfg?.tui?.sessionNames?.[process.cwd()] || '(unnamed)';
+      pushNotice([
+        `Resume (local stub)`,
+        `Name     ${dash()} ${name}`,
+        `Path     ${dash()} ${shortenPath(process.cwd())}`,
+        `Messages ${dash()} ${convo.current.length}`,
+        `Last AI  ${dash()} ${(lastAnswerRef.current || '(none)').slice(0, 120)}`,
+      ].join('\n'));
       return;
     }
     if (q === '/share') {
       if (!lastAnswerRef.current && convo.current.length === 0) {
-        push({ type: 'notice', text: 'Nothing to share yet — ask something first.', color: C.muted }); return;
+        pushNotice('Nothing to share yet — ask something first.', C.muted); return;
       }
       choiceActionRef.current = (v) => doGist(v);
       setChoice({
@@ -368,80 +544,169 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion })
     if (q === '/model' || q.startsWith('/model ')) {
       const name = q.slice('/model'.length).trim();
       if (!name) {
-        push({ type: 'notice', text: `Current model: ${model || modelRef.current || 'server default'}.\nUse /model <name> to request a different model.` });
+        pushNotice(`Current model: ${model || modelRef.current || 'server default'}.\nUse /model <name> to request a different model.`);
       } else {
         modelRef.current = name;
         setModel(name);
         cfg._model = name;
-        try { saveConfig(cfg); } catch {}
-        push({ type: 'notice', text: `${glyphs.check} Model set to ${name}. It applies to your next message.`, color: C.green });
+        persistCfg();
+        pushNotice(`${glyphs.check} Model set to ${name}. It applies to your next message.`, C.green);
       }
       return;
     }
+    if (q === '/cwd') {
+      pushNotice(process.cwd());
+      return;
+    }
+    if (q === '/cd' || q.startsWith('/cd ')) {
+      const arg = q.slice('/cd'.length).trim();
+      if (!arg) { pushNotice(`cwd ${dash()} ${process.cwd()}`); return; }
+      const target = isAbsolute(arg) ? arg : resolve(process.cwd(), arg);
+      if (!existsSync(target)) { pushNotice(`Directory not found: ${target}`, C.red); return; }
+      try {
+        process.chdir(target);
+        branchRef.current = gitBranch(target);
+        const ok = isTrustedDir(cfg, target);
+        setTrusted(ok);
+        if (!ok) openTrustDialog(target);
+        pushNotice(`Changed directory to ${shortenPath(target)}`, C.green, true);
+      } catch (e) {
+        pushNotice(`Could not change directory: ${e.message}`, C.red);
+      }
+      return;
+    }
+    if (q === '/allow-all' || q.startsWith('/allow-all ')) {
+      const arg = q.slice('/allow-all'.length).trim().toLowerCase();
+      const next = arg === 'show' ? allowAll : arg === 'on' ? true : arg === 'off' ? false : !allowAll;
+      if (arg !== 'show') {
+        cfg.tui = { ...(cfg.tui || {}), allowAll: next };
+        persistCfg();
+        setAllowAll(next);
+      }
+      pushNotice(`allow-all ${dash()} ${next ? 'ON' : 'OFF'}`, next ? C.warning : C.muted, arg !== 'show');
+      return;
+    }
+    if (q === '/rename' || q.startsWith('/rename ')) {
+      const name = q.slice('/rename'.length).trim() || `session-${new Date().toISOString().slice(0, 16).replace(/[T:]/g, '-')}`;
+      cfg.tui = cfg.tui || {};
+      cfg.tui.sessionNames = { ...(cfg.tui.sessionNames || {}), [process.cwd()]: name };
+      persistCfg();
+      pushNotice(`${glyphs.check} Session renamed to ${name}.`, C.green);
+      return;
+    }
+    if (q === '/changelog' || q.startsWith('/changelog')) {
+      try {
+        const raw = execSync('npm view ispbills-icli version time --json', {
+          cwd: process.cwd(), stdio: ['ignore', 'pipe', 'ignore'], timeout: 5000,
+        }).toString();
+        const data = JSON.parse(raw);
+        const versions = Object.entries(data.time || {})
+          .filter(([k]) => /^\d/.test(k))
+          .slice(-5)
+          .map(([k, v]) => `  ${k} ${dash()} ${String(v).slice(0, 10)}`)
+          .join('\n');
+        pushNotice(`ispbills-icli ${dash()} current ${pkgVersion()}\nRecent npm releases:\n${versions || '  unavailable'}`);
+      } catch {
+        pushNotice(`ispbills-icli ${dash()} current ${pkgVersion()}\nRecent changelog unavailable offline.`);
+      }
+      return;
+    }
+    if (q === '/feedback' || q === '/bug') {
+      pushNotice(`Feedback: ${feedbackUrl()}`);
+      return;
+    }
+    if (q === '/env') {
+      pushNotice([
+        `url      ${dash()} ${cfg.url}`,
+        `user     ${dash()} ${cfg.user?.name || cfg.user?.email || 'unknown'}`,
+        `model    ${dash()} ${model || modelRef.current || 'server default'}`,
+        `mode     ${dash()} ${shellMode ? 'shell' : modeRef.current}`,
+        `memory   ${dash()} ${loadNotes(cfg).length} notes`,
+        `allowAll ${dash()} ${allowAll ? 'on' : 'off'}`,
+        `streamer ${dash()} ${streamerMode ? 'on' : 'off'}`,
+      ].join('\n'));
+      return;
+    }
+    if (q === '/streamer-mode') {
+      const next = !streamerMode;
+      cfg.tui = { ...(cfg.tui || {}), streamerMode: next };
+      persistCfg();
+      setStreamerMode(next);
+      pushNotice(`streamer-mode ${dash()} ${next ? 'ON' : 'OFF'}`, next ? C.warning : C.muted, true);
+      return;
+    }
+    if (q === '/diff') {
+      gitCmd(cfg, ['diff', '--stat']).then((r) => {
+        const body = (r.stdout || '').trim() || (r.stderr || '').trim() || 'No recent diff in the backup repo.';
+        pushNotice(`backup repo diff\n${body.slice(0, 3500)}`, r.ok ? C.muted : C.red);
+      });
+      return;
+    }
+    if (q === '/review' || q.startsWith('/review ')) {
+      if (!lastAnswerRef.current) { pushNotice('Nothing to review yet — ask something first.', C.muted); return; }
+      const focus = q.slice('/review'.length).trim();
+      const reviewPrompt = `${focus ? `${focus}. ` : ''}Review the following last answer for correctness, risks, and missing details in the ISP context:\n\n${lastAnswerRef.current}`;
+      runTurn(reviewPrompt, { synthetic: false });
+      return;
+    }
     if (q === '/help' || q === 'help') {
       let group = null;
       const lines = SLASH_COMMANDS.map((c) => {
         const head = c.group !== group ? ((group = c.group), `\n  ${c.group}\n`) : '';
         return head + `    ${(c.cmd + (c.hint ? ' ' + c.hint : '')).padEnd(22)}${c.desc}`;
       }).join('\n');
-      push({ type: 'notice', text: 'Commands:' + lines + '\n\n  Keys: Shift+Tab cycle modes (ask→plan→autopilot) · Ctrl+T toggle reasoning · Ctrl+L clear · Ctrl+N/P followup chips · Ctrl+D exit · Ctrl+C×2 exit' });
+      pushNotice('Commands:' + lines + '\n\n  Keys: Shift+Tab cycle modes · Ctrl+T toggle reasoning · Ctrl+L clear · Ctrl+N/P followup chips · Ctrl+D exit · Ctrl+S preserve input · Ctrl+G external editor');
       return;
     }
     if (q === '/history') {
       const us = convo.current.filter((m) => m.role === 'user');
-      push({ type: 'notice', text: us.length ? us.map((m, i) => `  ${i + 1}. ${m.content.slice(0, 80)}`).join('\n') : 'No history yet.' });
+      pushNotice(us.length ? us.map((m, i) => `  ${i + 1}. ${m.content.slice(0, 80)}`).join('\n') : 'No history yet.');
       return;
     }
     if (q === '/logout') { onExternal?.('logout'); doExit(); return; }
     if (q === '/update') { onExternal?.('update'); doExit(); return; }
 
-    // ── Memory ──
     if (q === '/remember' || q.startsWith('/remember ')) {
       const note = q.slice('/remember'.length).trim();
-      if (!note) { push({ type: 'notice', text: 'Usage: /remember <note>' }); return; }
+      if (!note) { pushNotice('Usage: /remember <note>'); return; }
       const notes = addNote(cfg, note);
-      push({ type: 'notice', text: `${glyphs.check} Remembered (${notes.length} note${notes.length > 1 ? 's' : ''}). I'll keep this in mind.`, color: C.green });
+      pushNotice(`${glyphs.check} Remembered (${notes.length} note${notes.length > 1 ? 's' : ''}). I'll keep this in mind.`, C.green);
       return;
     }
     if (q === '/memory') {
       const notes = loadNotes(cfg);
-      push({ type: 'notice', text: notes.length
+      pushNotice(notes.length
         ? 'Memory notes:\n' + notes.map((n, i) => `  ${i + 1}. ${n.text}`).join('\n') + '\n\n  /forget <n|all> to remove.'
-        : 'No memory notes yet. Add one with /remember <note>.' });
+        : 'No memory notes yet. Add one with /remember <note>.');
       return;
     }
     if (q === '/forget' || q.startsWith('/forget ')) {
       const which = q.slice('/forget'.length).trim();
-      if (!which) { push({ type: 'notice', text: 'Usage: /forget <number | all | text>' }); return; }
+      if (!which) { pushNotice('Usage: /forget <number | all | text>'); return; }
       const { notes, removed } = forgetNote(cfg, which);
-      push({ type: 'notice',
-        text: removed ? `${glyphs.check} Forgot ${removed} note(s). ${notes.length} remain.` : 'No matching note found.',
-        color: removed ? C.green : C.gray });
+      pushNotice(removed ? `${glyphs.check} Forgot ${removed} note(s). ${notes.length} remain.` : 'No matching note found.', removed ? C.green : C.gray);
       return;
     }
-
-    // ── Clipboard ──
     if (q === '/copy') {
       const ans = lastAnswerRef.current;
-      if (!ans) { push({ type: 'notice', text: 'Nothing to copy yet — ask something first.', color: C.gray }); return; }
-      copyToClipboard(ans).then((tool) => push({ type: 'notice',
-        text: tool ? `${glyphs.check} Copied last answer (${ans.length} chars) to the clipboard.`
-                   : `${glyphs.cross} No clipboard tool found. Install xclip / wl-clipboard (Linux), or use macOS/Windows.`,
-        color: tool ? C.green : C.red }));
+      if (!ans) { pushNotice('Nothing to copy yet — ask something first.', C.gray); return; }
+      copyToClipboard(ans).then((tool) => pushNotice(
+        tool ? `${glyphs.check} Copied last answer (${ans.length} chars) to the clipboard.`
+             : `${glyphs.cross} No clipboard tool found. Install xclip / wl-clipboard (Linux), or use macOS/Windows.`,
+        tool ? C.green : C.red,
+      ));
       return;
     }
-
-    // ── GitHub gist ──
     if (q === '/gist' || q.startsWith('/gist ')) {
       const rest = q.slice('/gist'.length).trim();
       if (rest.startsWith('token ')) {
         cfg.github_token = rest.slice('token '.length).trim();
-        try { saveConfig(cfg); } catch {}
-        push({ type: 'notice', text: `${glyphs.check} GitHub token saved. /gist will use it (needs the "gist" scope).`, color: C.green });
+        persistCfg();
+        pushNotice(`${glyphs.check} GitHub token saved. /gist will use it (needs the "gist" scope).`, C.green);
         return;
       }
       if (!lastAnswerRef.current && convo.current.length === 0) {
-        push({ type: 'notice', text: 'Nothing to save yet — ask something first.', color: C.gray });
+        pushNotice('Nothing to save yet — ask something first.', C.gray);
         return;
       }
       choiceActionRef.current = (v) => doGist(v);
@@ -456,42 +721,50 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion })
       });
       return;
     }
-
-    // ── Local git repo ──
     if (q === '/git' || q.startsWith('/git ')) {
       const args = q.slice('/git'.length).trim();
-      if (!args) { push({ type: 'notice', text: 'Usage: /git <status | log | commit -m "msg" | push | diff | remote add origin <url>>' }); return; }
+      if (!args) { pushNotice('Usage: /git <status | log | commit -m "msg" | push | diff | remote add origin <url>>'); return; }
       gitCmd(cfg, splitArgs(args)).then((r) => {
         const body = (r.stdout || '').trim() || (r.stderr || '').trim() || (r.ok ? '(done)' : '(no output)');
-        push({ type: 'notice', text: `$ git ${args}\n${body.slice(0, 3500)}`, color: r.ok ? undefined : C.red });
+        pushNotice(`$ git ${args}\n${body.slice(0, 3500)}`, r.ok ? C.muted : C.red);
       });
       return;
     }
 
     let question = q;
-    const opts = {};
+    const turnOpts = {};
     if (q.startsWith('/')) {
       const mapped = slashToQuestion(q);
       if (mapped) {
         question = mapped;
         if (q === '/backup' || q.startsWith('/backup ')) {
-          opts.archive = 'backup';
-          opts.label = q.slice('/backup'.length).trim() || 'fleet';
+          turnOpts.archive = 'backup';
+          turnOpts.label = q.slice('/backup'.length).trim() || 'fleet';
         }
-      } else { push({ type: 'notice', text: `Unknown command: ${q}. Type /help.` }); return; }
+      } else {
+        pushNotice(`Unknown command: ${q}. Type /help.`);
+        return;
+      }
     }
-    runTurn(question, opts);
-  }, [doExit, push, runTurn, onExternal, setModeState, model, cfg, doGist]);
+    runTurn(question, turnOpts);
+  }, [allowAll, cfg, clearAll, doExit, doGist, modeRef, model, onExternal, openTrustDialog, persistCfg, push, pushNotice, runShellCommand, runTurn, setModeState, shellMode, streamerMode, trusted]);
+
+  useEffect(() => {
+    dispatchSubmitRef.current = dispatchSubmit;
+  }, [dispatchSubmit]);
+
+  useEffect(() => {
+    if (initialQuestion && trusted && !choice && convo.current.length === 0) dispatchSubmit(initialQuestion);
+  }, [initialQuestion, trusted, choice, dispatchSubmit]);
 
-  // Interactive prompt/choice handling (owns the keyboard while open).
   const pickChoice = useCallback((value) => {
     const act = choiceActionRef.current;
     choiceActionRef.current = null;
     setChoice(null);
-    if (act) { if (value != null) act(value); else push({ type: 'notice', text: 'Cancelled.', color: C.muted }); return; }
-    if (value == null) { push({ type: 'notice', text: 'Dismissed.', color: C.muted }); return; }
+    if (act) { act(value); return; }
+    if (value == null) { pushNotice('Dismissed.', C.muted, true); return; }
     runTurn(String(value));
-  }, [push, runTurn]);
+  }, [pushNotice, runTurn]);
 
   useInput((input, key) => {
     if (!choice) return;
@@ -520,9 +793,37 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion })
     }
   });
 
-  // Global keys (Composer handles text editing; here we handle app-level keys).
+  const openSearch = useCallback(() => {
+    setSearch({ query: '', active: 0 });
+    setHint('Timeline search');
+  }, []);
+
+  const searchMatches = search
+    ? items
+        .map((it) => ({ ...it, preview: itemPreview(it) }))
+        .filter((it) => !search.query || it.preview.toLowerCase().includes(search.query.toLowerCase()))
+    : [];
+
   useInput((input, key) => {
-    if (choice) return; // the Choice prompt owns the keyboard
+    if (!search) return;
+    if (key.escape || (key.ctrl && input === 'c')) { setSearch(null); setHint(''); return; }
+    if (key.backspace || key.delete) { setSearch((s) => ({ ...s, query: s.query.slice(0, -1), active: 0 })); return; }
+    if (key.upArrow) { setSearch((s) => ({ ...s, active: Math.max(0, s.active - 1) })); return; }
+    if (key.downArrow || key.tab) { setSearch((s) => ({ ...s, active: Math.min(Math.max(0, searchMatches.length - 1), s.active + 1) })); return; }
+    if (key.return) {
+      if (searchMatches.length) showExpanded('search results', [searchMatches[search.active] || searchMatches[0]]);
+      setSearch(null);
+      setHint('');
+      return;
+    }
+    if (input && !key.ctrl && !key.meta) {
+      const printable = input.replace(/[\x00-\x1f\x7f]/g, '');
+      if (printable) setSearch((s) => ({ ...s, query: s.query + printable, active: 0 }));
+    }
+  });
+
+  useInput((input, key) => {
+    if (choice || search) return;
     if (key.ctrl && input === 'c') {
       if (busy) { abortRef.current?.abort(); setHint(''); return; }
       const now = Date.now();
@@ -531,11 +832,12 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion })
       setHint('Press Ctrl+C again to exit');
       return;
     }
-    if (key.ctrl && input === 'd') { doExit(); return; }  // Ctrl+D shutdown
+    if (key.ctrl && input === 'd') { doExit(); return; }
     if (key.escape && busy) { abortRef.current?.abort(); return; }
-    if (key.escape && chips.length) { setChips([]); return; } // Esc dismisses chips
+    if (key.escape && shellMode && !composerText.trim()) { setShellMode(false); pushNotice('Exited shell mode.', C.muted, true); return; }
+    if (key.escape && expandedItems) { setExpandedItems(null); return; }
+    if (key.escape && chips.length) { setChips([]); return; }
     if (key.tab && key.shift && !busy) {
-      // Cycle: ask → plan → autopilot → ask
       const cur = MODES.indexOf(modeRef.current);
       const next = MODES[(cur + 1) % MODES.length];
       setModeState(next);
@@ -544,75 +846,57 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion })
     }
     if (key.ctrl && input === 't') { setShowReasoning((v) => !v); return; }
     if (key.ctrl && input === 'l' && !busy) { clearAll(); return; }
-    // Ctrl+N / Ctrl+P — cycle followup chips
-    if (key.ctrl && input === 'n' && chips.length) {
-      setActiveChip((i) => (i + 1) % chips.length); return;
-    }
-    if (key.ctrl && input === 'p' && chips.length) {
-      setActiveChip((i) => (i - 1 + chips.length) % chips.length); return;
-    }
-    // Tab cycles the tab bar (when not in slash palette)
-    if (key.tab && !key.shift && !busy) {
+    if (key.ctrl && input === 'f' && !busy) { openSearch(); return; }
+    if (key.ctrl && input === 'o' && !busy && !composerText.trim()) { showExpanded('recent items', items.slice(-5)); return; }
+    if (key.ctrl && input === 'e' && !busy && !composerText.trim()) { showExpanded('all items', items); return; }
+    if (key.ctrl && input === 'n' && chips.length) { setActiveChip((i) => (i + 1) % chips.length); return; }
+    if (key.ctrl && input === 'p' && chips.length) { setActiveChip((i) => (i - 1 + chips.length) % chips.length); return; }
+    if (key.tab && !key.shift && !busy && !composerText.trim()) {
       setActiveTab((t) => {
         const tabs = ['session', 'devices', 'customers', 'alarms'];
         return tabs[(tabs.indexOf(t) + 1) % tabs.length];
       });
-      return;
     }
   });
 
-  // Auto-run a first question if launched with one.
-  const started = useRef(false);
-  useEffect(() => {
-    if (initialQuestion && !started.current) { started.current = true; onSubmit(initialQuestion); }
-  }, [initialQuestion, onSubmit]);
-
   const renderItem = (it) => {
     const c = it.cols || 80;
     switch (it.type) {
-      case 'user': return html`<${UserMessage} key=${it.id} text=${it.text} cols=${c} />`;
-      case 'assistant': return html`<${AssistantMessage} key=${it.id} text=${it.text} cols=${c} />`;
+      case 'user': return html`<${UserMessage} key=${it.id} text=${it.text} cols=${c} ts=${it.ts} />`;
+      case 'assistant': return html`<${AssistantMessage} key=${it.id} text=${it.text} cols=${c} ts=${it.ts} />`;
       case 'plan': return html`<${Plan} key=${it.id} reply=${it.reply} />`;
       case 'connect': return html`<${Connect} key=${it.id} reply=${it.reply} />`;
       case 'activity': return html`<${StatusLines} key=${it.id} lines=${it.status} busy=${false} />`;
       case 'notice': return html`<${Notice} key=${it.id} text=${it.text} color=${it.color} />`;
+      case 'shell': return html`<${ShellOutput} key=${it.id} command=${it.command} output=${it.output} code=${it.code} cols=${c} ts=${it.ts} />`;
+      case 'help': return html`<${HelpOverlay} key=${it.id} cols=${c} ts=${it.ts} />`;
       default: return null;
     }
   };
 
-  // ── Footer ───────────────────────────────────────────────────────────────────
-  // Left:  ~/cwd   ⏎ branch   mode-badge
-  // Right: model   ~Nk ctx
   const cwd = shortenPath(process.cwd());
   const branch = branchRef.current;
   const tokenCount = approxTokens(convo.current);
-  const tokenLabel = tokenCount > 0 ? `~${Math.round(tokenCount / 1000)}k ctx` : '';
-  const modelLabel = shortModel(model || modelRef.current || '');
-  const modeLabel = mode !== 'ask' ? ` ${midDot()} ${glyphs.bolt} ${mode}` : '';
-
-  const footerLeft = [
-    cwd,
-    branch ? `${glyphs.gitBranch}${branch}` : null,
-  ].filter(Boolean).join('  ');
-
+  const tokenLabel = tokenCount > 0 ? `~${Math.max(1, Math.round(tokenCount / 1000))}k ctx` : '';
+  const modelLabel = streamerMode ? '' : shortModel(model || modelRef.current || 'server default');
+  const footerLeft = [cwd, branch ? `${glyphs.gitBranch}${branch}` : null].filter(Boolean).join('  ');
   const footerRight = hint
     ? hint
-    : [modelLabel, tokenLabel].filter(Boolean).join(`  ${midDot()}  `);
-
+    : streamerMode
+    ? ''
+    : [modelLabel, tokenLabel].filter(Boolean).join(midDot());
   const compact = cols < 60;
-
-  // The banner is the first <Static> item so it prints once at the very top and
-  // scrolls away with history; completed transcript items follow it. Ink flushes
-  // each <Static> item to the terminal's normal buffer exactly once, leaving the
-  // native scrollback intact so earlier conversation can be scrolled back to.
-  const staticItems = [{ type: 'banner', id: `banner-${clearEpoch}`, cols }, ...items];
+  const composerMode = shellMode ? 'shell' : mode;
+  const staticItems = showBanner
+    ? [{ type: 'banner', id: `banner-${clearEpoch}`, cols }, ...items]
+    : items;
 
   return html`
     <${Box} flexDirection="column" width=${cols}>
       <${Static} key=${clearEpoch} items=${staticItems}>
         ${(it) => it.type === 'banner'
           ? html`<${Box} key=${it.id} flexDirection="column" alignItems="center" marginBottom=${1}>
-              <${Banner} cfg=${cfg} model=${model} width=${cols} compact=${compact} />
+              <${Banner} cfg=${cfg} model=${model} width=${cols} compact=${compact} streamerMode=${streamerMode} />
             <//>`
           : renderItem(it)}
       <//>
@@ -622,24 +906,48 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion })
             <${StatusLines} lines=${live.status} busy=${busy} />
             ${live.reasoning ? html`<${Reasoning} text=${live.reasoning} show=${showReasoning} />` : null}
             ${live.reply?.steps ? html`<${Plan} reply=${live.reply} live=${true} />` : null}
-            ${live.text ? html`<${AssistantMessage} text=${live.text} cols=${cols} />` : null}
+            ${live.text ? html`<${AssistantMessage} text=${live.text} cols=${cols} ts=${startedAt || Date.now()} />` : null}
             <${Thinking} label=${live.reply ? 'Planning' : live.text ? 'Responding' : 'Working'} startedAt=${startedAt} />
           <//>`
         : null}
 
-      <${TabBar} active=${activeTab} cols=${cols} mode=${mode} />
+      ${expandedItems
+        ? html`<${Box} flexDirection="column">
+            <${Notice} text=${`${glyphs.expand} ${expandedItems.kind}`} color=${C.muted} />
+            ${expandedItems.items.map((it) => renderItem(it))}
+          <//>`
+        : null}
+
+      ${search ? html`<${SearchOverlay} query=${search.query} matches=${searchMatches} active=${search.active} cols=${cols} />` : null}
+
+      <${TabBar} active=${activeTab} cols=${cols} mode=${composerMode} />
 
       ${!busy && chips.length ? html`<${FollowupChips} chips=${chips} active=${activeChip} />` : null}
 
       <${Box} flexDirection="column">
         ${choice
           ? html`<${Choice} ...${choice} />`
-          : html`<${Composer} onSubmit=${onSubmit} busy=${busy} width=${cols} />`}
+          : html`<${Composer}
+              onSubmit=${dispatchSubmit}
+              onSubmitKeep=${dispatchSubmit}
+              onQueue=${queueSubmission}
+              onSearch=${openSearch}
+              onNotice=${(text, color = C.muted) => pushNotice(text, color, true)}
+              onEmptyEsc=${() => { if (shellMode) setShellMode(false); else if (expandedItems) setExpandedItems(null); }}
+              onValueChange=${setComposerText}
+              onEmptySubmit=${() => {
+                if (chips.length) dispatchSubmit(chips[activeChip]);
+              }}
+              busy=${busy}
+              blocked=${Boolean(choice || search || !trusted)}
+              width=${cols}
+              mode=${composerMode}
+              clearToken=${composerClearToken}
+            />`}
 
         <${Box} paddingX=${1} width=${cols}>
           <${Box} flexGrow=${1}>
             <${Text} color=${C.muted} wrap="truncate-end">${footerLeft}<//>
-            ${modeLabel ? html`<${Text} color=${mode === 'autopilot' ? C.warning : C.accent}>${modeLabel}<//>`  : null}
           <//>
           <${Text} color=${hint ? C.warning : C.muted} wrap="truncate-end">${footerRight}<//>
         <//>