ispbills-icli 8.4.12 → 8.5.0

package/src/tui/app.js

@@ -7,9 +7,8 @@ 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, UserMessage, AssistantMessage, StatusLines, Reasoning,
-  Plan, Connect, Notice, Thinking, Choice, ShellInput, ShellOut,
-  TabBar, MonitoringView, IssuesView, GistsView,
+  Banner, TabBar, FollowupChips, UserMessage, AssistantMessage, StatusLines, Reasoning,
+  Plan, Connect, Notice, Thinking, Choice,
 } from './components.js';
 import { Composer } from './composer.js';
 import { streamChat } from '../client.js';
@@ -17,19 +16,12 @@ import { slashToQuestion, SLASH_COMMANDS } from '../commands.js';
 import { saveConfig } from '../config.js';
 import { shortModel } from '../ui.js';
 import { loadNotes, addNote, forgetNote, memoryPreamble } from '../memory.js';
-import { copyToClipboard, readFromClipboard } from '../clipboard.js';
+import { copyToClipboard } from '../clipboard.js';
 import { createGist } from '../gist.js';
 import { git as gitCmd, commitBackup } from '../gitrepo.js';
-import { runShell } from '../shell.js';
-import { checkLatestVersion } from '../version-check.js';
-import { saveResume } from '../resume.js';
-import { basename } from 'path';
-
-// CWD basename — computed once at startup (before any cd).
-const APP_CWD = basename(process.cwd());
-
-// Tab identifiers (order = display order).
-export const TABS = ['Session', 'Monitoring', 'Issues', 'Gists'];
+import { execSync } from 'child_process';
+import { homedir } from 'os';
+import { relative } from 'path';
 
 // Split a command argument string into argv, honouring "quoted" segments.
 function splitArgs(s) {
@@ -40,6 +32,33 @@ function splitArgs(s) {
   return out;
 }
 
+// Shorten a path with ~ for home directory.
+function shortenPath(p) {
+  try {
+    const home = homedir();
+    const rel = relative(home, p);
+    if (!rel.startsWith('..')) return '~/' + rel;
+  } catch {}
+  return p;
+}
+
+// Get the current git branch name (synchronous, non-throwing).
+function gitBranch() {
+  try {
+    return execSync('git rev-parse --abbrev-ref HEAD', {
+      cwd: process.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 useTerminalSize() {
   const { stdout } = useStdout();
   const [size, setSize] = useState({
@@ -58,33 +77,39 @@ function useTerminalSize() {
 let itemId = 0;
 const nextId = () => ++itemId;
 
-export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, version = '', resumeSession = null }) {
+// Mode cycle: ask → plan → autopilot → ask
+const MODES = ['ask', 'plan', 'autopilot'];
+
+export function App({ cfg, display = {}, onExternal, onExit, initialQuestion }) {
   const { exit } = useApp();
   const { cols, rows } = useTerminalSize();
+  const colsRef = useRef(cols);
+  useEffect(() => { colsRef.current = cols; }, [cols]);
 
   const [items, setItems] = useState([]);
   const [live, setLive] = useState(null); // { status:[], reasoning:'', text:'' }
   const [busy, setBusy] = useState(false);
   const [model, setModel] = useState(cfg._model);
-  const [showReasoning, setShowReasoning] = useState(!!display.reasoning);
-  const [autopilot, setAutopilot] = useState(false);
+  const [showReasoning, setShowReasoning] = useState(false); // collapsed by default per spec
+  const [mode, setMode] = useState('ask');      // 'ask' | 'plan' | 'autopilot'
+  const [activeTab, setActiveTab] = useState('session');
+  const [chips, setChips] = useState([]);       // followup suggestion strings
+  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 [prefillText, setPrefillText] = useState(null); // clipboard paste → pre-fills Composer
-  const [activeTab, setActiveTab] = useState(0);        // 0=Session 1=Monitoring 2=Issues 3=Gists
-  const [latestVersion, setLatestVersion] = useState(null); // { latest, isNewer } from npm
 
   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 issuesRef = useRef([]);        // AI-flagged issues accumulated across session
+  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
@@ -94,41 +119,13 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, ve
     return () => { try { process.stdout.write('\x1b[?2004l'); } catch {} };
   }, []);
 
-  // Background version check — runs once after mount, non-blocking.
-  useEffect(() => {
-    if (!version || version === 'unknown') return;
-    checkLatestVersion(version).then((result) => {
-      if (result?.isNewer) setLatestVersion(result);
-    });
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
-  // Restore session after a hot-reload /update.
-  useEffect(() => {
-    if (!resumeSession) return;
-    convo.current = resumeSession.convo || [];
-    plain.current = resumeSession.plain || [];
-    // Re-hydrate items list from plain text so the user sees their history.
-    if (resumeSession.items?.length) {
-      setItems(resumeSession.items.map((it) => ({ id: nextId(), ...it })));
-    }
-    push({ type: 'notice', text: `${glyphs.check} Session restored after update — conversation history preserved.`, color: C.green });
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
-  // Tab switching: Ctrl+1/2/3/4.
-  useInput((input, key) => {
-    if (!key.ctrl) return;
-    if (input === '1') { setActiveTab(0); return; }
-    if (input === '2') { setActiveTab(1); return; }
-    if (input === '3') { setActiveTab(2); return; }
-    if (input === '4') { setActiveTab(3); return; }
-  });
-
-  const setAutopilotMode = useCallback((next) => {
-    apRef.current = next;
-    setAutopilot(next);
+  const setModeState = useCallback((next) => {
+    modeRef.current = next;
+    apRef.current = next === 'autopilot';
+    setMode(next);
   }, []);
 
-  const push = useCallback((item) => setItems((xs) => [...xs, { id: nextId(), ...item }]), []);
+  const push = useCallback((item) => setItems((xs) => [...xs, { id: nextId(), cols: colsRef.current, ...item }]), []);
   const log = (line) => plain.current.push(line);
 
   // Clear the visible transcript: wipe the screen + native scrollback and
@@ -148,6 +145,7 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, ve
     convo.current.push({ role: 'user', content: question });
     setBusy(true);
     setHint('');
+    setChips([]);
     setStartedAt(Date.now());
     const s = { status: [], reasoning: '', text: '', reply: null };
     setLive({ ...s });
@@ -200,6 +198,12 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, ve
       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 {
@@ -285,22 +289,6 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, ve
     if (!q) return;
     setHint('');
 
-    // ── ! shell command execution (GitHub Copilot CLI parity) ──────────────
-    if (q.startsWith('!')) {
-      const cmd = q.slice(1).trim();
-      if (!cmd) return;
-      push({ type: 'shell_in', cmd });
-      log(`$ ${cmd}`);
-      runShell(cmd).then((result) => {
-        const out = [result.stdout, result.stderr].filter(Boolean).join('\n').trim();
-        push({ type: 'shell_out', ok: result.ok, output: out || `(exit code ${result.exitCode})` });
-        if (out) log(out);
-      }).catch((e) => {
-        push({ type: 'notice', text: `${glyphs.cross} Shell error: ${e.message}`, color: C.red });
-      });
-      return;
-    }
-
     if (q === '/exit' || q === 'exit' || q === 'quit') { doExit(); return; }
     if (q === '/clear') { clearAll(); return; }
     if (q === '/new') {
@@ -310,17 +298,71 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, ve
       return;
     }
     if (q === '/reasoning') {
-      setShowReasoning((v) => { push({ type: 'notice', text: `Reasoning display ${!v ? 'on' : 'off'}.` }); return !v; });
+      setShowReasoning((v) => { push({ type: 'notice', text: `Reasoning display ${!v ? 'expanded' : 'collapsed'}.` }); return !v; });
       return;
     }
     if (q === '/autopilot' || q === '/auto') {
-      const next = !apRef.current;
-      setAutopilotMode(next);
+      const next = modeRef.current !== 'autopilot' ? 'autopilot' : 'ask';
+      setModeState(next);
       push({ type: 'notice',
-        text: next
-          ? `${glyphs.bolt} Autopilot ON ${dash()} proposed fixes will be applied automatically. Toggle with Shift+Tab.`
-          : `Autopilot OFF ${dash()} fixes will wait for your confirmation.`,
-        color: next ? C.yellow : C.gray });
+        text: 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 });
+      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 });
+      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.` });
+      return;
+    }
+    if (q === '/compact' || q.startsWith('/compact ')) {
+      const focus = q.slice('/compact'.length).trim();
+      const prompt = focus
+        ? `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 });
+      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.' });
+      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 + ']' : ''}`,
+        `Messages ${dash()} ${convo.current.length}`,
+        `Tokens   ${dash()} ~${tokens.toLocaleString()} (approx)`,
+        `Model    ${dash()} ${model || modelRef.current || 'server default'}`,
+        `Mode     ${dash()} ${modeRef.current}`,
+      ].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;
+      }
+      choiceActionRef.current = (v) => doGist(v);
+      setChoice({
+        title: 'Share conversation…',
+        note: 'Saves as a secret GitHub gist', sel: 0, text: '', focusText: false, allowText: false,
+        options: [
+          { label: 'Last AI answer', value: 'answer' },
+          { label: 'Full conversation transcript', value: 'transcript' },
+          { label: 'Cancel', value: null },
+        ],
+      });
       return;
     }
     if (q === '/model' || q.startsWith('/model ')) {
@@ -342,7 +384,7 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, ve
         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 autopilot · Ctrl+T reasoning · Ctrl+Z/Ctrl+Y undo/redo · Ctrl+L clear · Ctrl+C twice to exit' });
+      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' });
       return;
     }
     if (q === '/history') {
@@ -350,31 +392,8 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, ve
       push({ type: 'notice', text: us.length ? us.map((m, i) => `  ${i + 1}. ${m.content.slice(0, 80)}`).join('\n') : 'No history yet.' });
       return;
     }
-    if (q === '/usage') {
-      const total = convo.current.length;
-      const userTurns = convo.current.filter((m) => m.role === 'user').length;
-      const chars = convo.current.reduce((acc, m) => acc + m.content.length, 0);
-      const approxTokens = Math.round(chars / 4);
-      const lines = [
-        `Conversation stats:`,
-        `  turns       ${userTurns}`,
-        `  messages    ${total}`,
-        `  ~tokens     ${approxTokens.toLocaleString()} (estimated)`,
-        `  ~chars      ${chars.toLocaleString()}`,
-        `  model       ${model || cfg._model || 'server default'}`,
-        `  cwd         ${APP_CWD}`,
-      ];
-      push({ type: 'notice', text: lines.join('\n'), color: C.cyan });
-      return;
-    }
     if (q === '/logout') { onExternal?.('logout'); doExit(); return; }
-    if (q === '/update') {
-      // Save current conversation so the new binary can resume it.
-      const resumeFile = saveResume(convo.current, plain.current, items);
-      onExternal?.({ action: 'update', resumeFile });
-      doExit();
-      return;
-    }
+    if (q === '/update') { onExternal?.('update'); doExit(); return; }
 
     // ── Memory ──
     if (q === '/remember' || q.startsWith('/remember ')) {
@@ -402,39 +421,8 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, ve
     }
 
     // ── Clipboard ──
-    // ── /about ─────────────────────────────────────────────────────────────
-    if (q === '/about') {
-      const lines = [
-        `iCopilot CLI  v${version || '?'}`,
-        `Server  ${cfg.url || '(unknown)'}`,
-        `User    ${cfg.user?.name || '—'}  (${cfg.user?.role || '—'})`,
-        `Model   ${shortModel(model || cfg._model || '—')}`,
-        '',
-        'Type /help for all commands · Ctrl+C to exit',
-        'npm: ispbills-icli · github: lupael/IspBills',
-      ];
-      push({ type: 'notice', text: lines.join('\n'), color: C.accent });
-      return;
-    }
-
-    // ── /paste ─────────────────────────────────────────────────────────────
-    if (q === '/paste') {
-      push({ type: 'notice', text: `${glyphs.arrow} Reading clipboard…`, color: C.gray });
-      readFromClipboard().then((text) => {
-        if (!text) {
-          push({ type: 'notice', text: `${glyphs.cross} Clipboard is empty or no clipboard tool found.\nInstall xclip / wl-clipboard (Linux), or use macOS/Windows.`, color: C.red });
-          return;
-        }
-        const lines = text.split('\n').length;
-        push({ type: 'notice',
-          text: `${glyphs.check} Pasted ${lines} line${lines !== 1 ? 's' : ''} (${text.length} chars) into the input box — review and press Enter to send.`,
-          color: C.green });
-        setPrefillText(text);
-      });
-      return;
-    }
-
-    if (q === '/copy') {      const ans = lastAnswerRef.current;
+    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.`
@@ -493,15 +481,15 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, ve
       } else { push({ type: 'notice', text: `Unknown command: ${q}. Type /help.` }); return; }
     }
     runTurn(question, opts);
-  }, [doExit, push, runTurn, onExternal, setAutopilotMode, model, cfg, doGist]);
+  }, [doExit, push, runTurn, onExternal, setModeState, model, cfg, doGist]);
 
   // 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.gray }); return; }
-    if (value == null) { push({ type: 'notice', text: 'Dismissed.', color: C.gray }); return; }
+    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; }
     runTurn(String(value));
   }, [push, runTurn]);
 
@@ -543,15 +531,34 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, ve
       setHint('Press Ctrl+C again to exit');
       return;
     }
+    if (key.ctrl && input === 'd') { doExit(); return; }  // Ctrl+D shutdown
     if (key.escape && busy) { abortRef.current?.abort(); return; }
+    if (key.escape && chips.length) { setChips([]); return; } // Esc dismisses chips
     if (key.tab && key.shift && !busy) {
-      const next = !apRef.current;
-      setAutopilotMode(next);
-      setHint(next ? 'Autopilot ON' : 'Autopilot OFF');
+      // Cycle: ask → plan → autopilot → ask
+      const cur = MODES.indexOf(modeRef.current);
+      const next = MODES[(cur + 1) % MODES.length];
+      setModeState(next);
+      setHint(`Mode: ${next}`);
       return;
     }
     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) {
+      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.
@@ -561,85 +568,82 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, ve
   }, [initialQuestion, onSubmit]);
 
   const renderItem = (it) => {
+    const c = it.cols || 80;
     switch (it.type) {
-      case 'user': return html`<${UserMessage} key=${it.id} text=${it.text} />`;
-      case 'assistant': return html`<${AssistantMessage} key=${it.id} text=${it.text} />`;
+      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 '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_in': return html`<${ShellInput} key=${it.id} cmd=${it.cmd} />`;
-      case 'shell_out': return html`<${ShellOut} key=${it.id} ok=${it.ok} output=${it.output} />`;
       default: return null;
     }
   };
 
-  const ctx = [model ? shortModel(model) : null, APP_CWD, cfg.user?.name, cfg.user?.role].filter(Boolean).join(midDot());
-  // Footer: left = session context (dimmed), right = hint or key-hints.
-  // Autopilot mode turns the right side yellow.
-  const footerHint = hint
+  // ── 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 footerRight = hint
     ? hint
-    : autopilot
-    ? `${glyphs.bolt} autopilot ON${midDot()}/help${midDot()}Shift+Tab off${midDot()}Ctrl+C exit`
-    : `/help${midDot()}Shift+Tab autopilot${midDot()}Ctrl+C exit`;
-  const footerColor = hint ? C.yellow : autopilot ? C.yellow : void 0;
+    : [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}` }, ...items];
+  const staticItems = [{ type: 'banner', id: `banner-${clearEpoch}`, cols }, ...items];
 
   return html`
     <${Box} flexDirection="column" width=${cols}>
-      ${/* Tab bar — always pinned above content */null}
-      <${TabBar} tabs=${TABS} active=${activeTab} onSelect=${setActiveTab} 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} />
+            <//>`
+          : renderItem(it)}
+      <//>
 
-      ${activeTab === 0
+      ${live
         ? html`<${Box} flexDirection="column">
-            <${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} version=${version} cwd=${APP_CWD} />
-                  <//>`
-                : renderItem(it)}
-            <//>
-            ${live
-              ? html`<${Box} flexDirection="column">
-                  <${StatusLines} lines=${live.status} busy=${busy} />
-                  ${showReasoning && live.reasoning ? html`<${Reasoning} text=${live.reasoning} />` : null}
-                  ${live.reply?.steps ? html`<${Plan} reply=${live.reply} live=${true} />` : null}
-                  ${live.text
-                    ? html`<${Box} marginTop=${live.status.length ? 0 : 1}>
-                        <${AssistantMessage} text=${live.text} streaming=${true} />
-                      <//>`  : null}
-                  ${!live.text && !live.reply?.steps
-                    ? html`<${Thinking}
-                        label=${live.status.length ? 'Working' : 'Thinking'}
-                        startedAt=${startedAt} />`
-                    : null}
-                <//>`
-              : null}
+            <${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}
+            <${Thinking} label=${live.reply ? 'Planning' : live.text ? 'Responding' : 'Working'} startedAt=${startedAt} />
           <//>`
         : null}
-      ${activeTab === 1 ? html`<${MonitoringView} cfg=${cfg} />` : null}
-      ${activeTab === 2 ? html`<${IssuesView} issues=${issuesRef.current} />` : null}
-      ${activeTab === 3 ? html`<${GistsView} cfg=${cfg} />` : null}
-
-      <${Box} flexDirection="column" marginTop=${1}>
-        ${activeTab === 0
-          ? (choice
-            ? html`<${Choice} ...${choice} />`
-            : html`<${Composer} onSubmit=${onSubmit} busy=${busy} width=${cols} prefill=${prefillText} onPrefillConsumed=${() => setPrefillText(null)} />`)
-          : html`<${Box} paddingX=${1}><${Text} dimColor>Ctrl+1 for Session  ·  Ctrl+2/3/4 for other tabs<//>  <//>` }
+
+      <${TabBar} active=${activeTab} cols=${cols} />
+
+      ${!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} />`}
+
+        <${Text} color=${C.separator}>${'─'.repeat(Math.max(1, cols))}<//>
+
         <${Box} paddingX=${1} width=${cols}>
           <${Box} flexGrow=${1}>
-            <${Text} dimColor wrap="truncate-end">${ctx}<//>
+            <${Text} color=${C.muted} wrap="truncate-end">${footerLeft}<//>
+            ${modeLabel ? html`<${Text} color=${mode === 'autopilot' ? C.warning : C.accent}>${modeLabel}<//>`  : null}
           <//>
-          ${latestVersion?.isNewer
-            ? html`<${Text} color=${C.yellow} wrap="truncate-end">🔔 v${latestVersion.latest} available — /update<//>` 
-            : html`<${Text} color=${footerColor} dimColor=${!footerColor} wrap="truncate-end">${footerHint}<//>` }
+          <${Text} color=${hint ? C.warning : C.muted} wrap="truncate-end">${footerRight}<//>
         <//>
       <//>
     <//>`;