ispbills-icli 8.5.4 → 8.5.6

package/src/tui/app.js

@@ -5,6 +5,7 @@ import { C, glyphs, midDot, dash } from './theme.js';
 import {
   Banner, TabBar, FollowupChips, UserMessage, AssistantMessage, StatusLines, Reasoning,
   Plan, Connect, Notice, Thinking, Choice, ShellOutput, SearchOverlay, HelpOverlay,
+  SessionPicker, DiffViewer, LabeledNotice,
 } from './components.js';
 import { Composer } from './composer.js';
 import { streamChat } from '../client.js';
@@ -19,6 +20,7 @@ import { execSync, spawnSync } from 'child_process';
 import { homedir } from 'os';
 import { dirname, isAbsolute, relative, resolve } from 'path';
 import { existsSync, readFileSync } from 'fs';
+import { deleteSession, loadMostRecent, loadSessionById, saveSession, listSessionsDetailed } from '../session.js';
 
 function splitArgs(s) {
   const out = [];
@@ -52,6 +54,126 @@ function approxTokens(messages) {
   return Math.round(total / 4);
 }
 
+const TOKEN_LIMIT = 100000;
+const SESSION_SORTS = ['relevance', 'last used', 'created', 'name'];
+
+function sessionAutoName(messages = []) {
+  const firstUser = messages.find((m) => m?.role === 'user' && String(m.content || '').trim());
+  const text = String(firstUser?.content || '').replace(/\s+/g, ' ').trim();
+  return text ? text.slice(0, 40).trim() : 'Untitled session';
+}
+
+function renderConversationItems(messages = [], cols = 80) {
+  return messages
+    .filter((m) => m?.role === 'user' || m?.role === 'assistant')
+    .map((m) => ({
+      id: nextId(),
+      cols,
+      ts: Date.now(),
+      type: m.role,
+      text: String(m.content || ''),
+    }));
+}
+
+function contextUsageLabel(tokens) {
+  const ratio = tokens / TOKEN_LIMIT;
+  if (ratio >= 0.5) return `~${Math.round(ratio * 100)}% ctx`;
+  if (tokens <= 0) return '';
+  return `~${Math.max(1, Math.round(tokens / 1000))}k ctx`;
+}
+
+function usageBar(value, max, width = 16) {
+  const safeMax = Math.max(1, max);
+  const filled = Math.max(0, Math.min(width, Math.round((value / safeMax) * width)));
+  return `${'■'.repeat(filled)}${'░'.repeat(Math.max(0, width - filled))}`;
+}
+
+function formatDuration(ms = 0) {
+  const mins = Math.max(0, Math.round(ms / 60000));
+  if (mins < 1) return 'under a minute';
+  if (mins === 1) return '1 minute';
+  if (mins < 60) return `${mins} minutes`;
+  const hours = Math.floor(mins / 60);
+  const rem = mins % 60;
+  return rem ? `${hours}h ${rem}m` : `${hours}h`;
+}
+
+function sessionRelevanceScore(session, cwd) {
+  const here = resolve(cwd || process.cwd());
+  const there = resolve(session?.cwd || here);
+  if (there === here) return 4;
+  if (here.startsWith(there + '/')) return 3;
+  if (there.startsWith(here + '/')) return 2;
+  const home = homedir();
+  if (relative(home, there).slice(0, 2) !== '..') return 1;
+  return 0;
+}
+
+function sortSessions(sessions, mode, cwd) {
+  const list = [...sessions];
+  if (mode === 'created') {
+    return list.sort((a, b) => new Date(b.createdAt || 0).getTime() - new Date(a.createdAt || 0).getTime());
+  }
+  if (mode === 'name') {
+    return list.sort((a, b) => {
+      const an = String(a.name || '').trim();
+      const bn = String(b.name || '').trim();
+      if (!an) return 1;
+      if (!bn) return -1;
+      return an.localeCompare(bn);
+    });
+  }
+  if (mode === 'last used') {
+    return list.sort((a, b) => new Date(b.updatedAt || 0).getTime() - new Date(a.updatedAt || 0).getTime());
+  }
+  return list.sort((a, b) => {
+    const score = sessionRelevanceScore(b, cwd) - sessionRelevanceScore(a, cwd);
+    if (score !== 0) return score;
+    return new Date(b.updatedAt || 0).getTime() - new Date(a.updatedAt || 0).getTime();
+  });
+}
+
+function parseDiff(raw = '') {
+  const lines = [];
+  let file = '';
+  let oldLine = 0;
+  let newLine = 0;
+  for (const content of String(raw || '').split('\n')) {
+    if (content.startsWith('diff --git ')) {
+      file = content.replace(/^diff --git a\/(.+?) b\/.+$/, '$1');
+      lines.push({ type: 'header', content, file });
+      continue;
+    }
+    if (content.startsWith('@@')) {
+      const match = content.match(/^@@ -(\d+)(?:,\d+)? \+(\d+)(?:,\d+)? @@/);
+      oldLine = Number(match?.[1] || 0);
+      newLine = Number(match?.[2] || 0);
+      lines.push({ type: 'hunk', content, file, oldLine, newLine });
+      continue;
+    }
+    if (content.startsWith('+++ ') || content.startsWith('--- ') || content.startsWith('index ')) {
+      lines.push({ type: 'header', content, file });
+      continue;
+    }
+    if (content.startsWith('+')) {
+      lines.push({ type: 'add', content, file, lineNumber: newLine });
+      newLine += 1;
+      continue;
+    }
+    if (content.startsWith('-')) {
+      lines.push({ type: 'del', content, file, lineNumber: oldLine });
+      oldLine += 1;
+      continue;
+    }
+    lines.push({ type: 'ctx', content, file, oldLine, newLine });
+    if (!content.startsWith('\\')) {
+      oldLine += 1;
+      newLine += 1;
+    }
+  }
+  return lines;
+}
+
 function pkgVersion() {
   try {
     return JSON.parse(readFileSync(new URL('../../package.json', import.meta.url), 'utf8')).version || 'unknown';
@@ -112,16 +234,26 @@ let itemId = 0;
 const nextId = () => ++itemId;
 const MODES = ['ask', 'plan', 'autopilot'];
 
-export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, showBanner = true }) {
+export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, showBanner = true, agentName, resumeMode }) {
   const { exit } = useApp();
-  const { cols } = useTerminalSize();
+  const initialResumeRef = useRef(undefined);
+  if (initialResumeRef.current === undefined) {
+    const resumed = resumeMode ? loadMostRecent() : null;
+    if (resumed?.cwd && existsSync(resumed.cwd)) {
+      try { process.chdir(resumed.cwd); } catch {}
+    }
+    initialResumeRef.current = resumed;
+  }
+  const initialSession = initialResumeRef.current;
+  const initialMessages = initialSession?.messages || [];
+  const { cols, rows } = useTerminalSize();
   const colsRef = useRef(cols);
   useEffect(() => { colsRef.current = cols; }, [cols]);
 
-  const [items, setItems] = useState([]);
+  const [items, setItems] = useState(() => renderConversationItems(initialMessages, cols));
   const [live, setLive] = useState(null);
   const [busy, setBusy] = useState(false);
-  const [model, setModel] = useState(cfg._model);
+  const [model, setModel] = useState(initialSession?.model || cfg._model);
   const [showReasoning, setShowReasoning] = useState(false);
   const [mode, setMode] = useState('ask');
   const [activeTab, setActiveTab] = useState('session');
@@ -133,27 +265,33 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
   const [clearEpoch, setClearEpoch] = useState(0);
   const [composerClearToken, setComposerClearToken] = useState(0);
   const [composerText, setComposerText] = useState('');
+  const [composerPreset, setComposerPreset] = useState({ token: 0, text: '' });
   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 [sessionPicker, setSessionPicker] = useState(null);
+  const [diffState, setDiffState] = useState(null);
 
-  const convo = useRef([]);
+  const convo = useRef(initialMessages);
   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 modelRef = useRef(initialSession?.model || cfg._model);
+  const lastAnswerRef = useRef([...initialMessages].reverse().find((m) => m.role === 'assistant')?.content || '');
   const choiceActionRef = useRef(null);
-  const branchRef = useRef(gitBranch());
+  const branchRef = useRef(initialSession?.branch || gitBranch(process.cwd()));
   const queuedRef = useRef(null);
   const activeTurns = useRef(0);
   const dismissTimers = useRef(new Map());
   const dispatchSubmitRef = useRef(null);
+  const sessionIdRef = useRef(initialSession?.id || Date.now().toString(36));
+  const sessionCreatedAtRef = useRef(initialSession?.createdAt || new Date().toISOString());
+  const sessionNameRef = useRef(initialSession?.name || sessionAutoName(initialMessages));
 
   useEffect(() => {
     try { process.stdout.write('\x1b[?2004h'); } catch {}
@@ -191,14 +329,15 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
 
   useEffect(() => {
     for (const item of items) {
-      if (item.type !== 'notice' || !item.autoDismiss || dismissTimers.current.has(item.id)) continue;
+      if (!['notice', 'info', 'error'].includes(item.type) || !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 });
+  const pushNotice = useCallback((text, color = C.gray, autoDismiss = false, type = null) => {
+    const resolvedType = type || (color === C.red || color === C.error ? 'error' : 'info');
+    push({ type: resolvedType, text, color, autoDismiss });
   }, [push]);
 
   const log = (line) => plain.current.push(line);
@@ -211,6 +350,43 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
     setClearEpoch((n) => n + 1);
   }, []);
 
+  const replaceTimeline = useCallback((messages = []) => {
+    try { process.stdout.write('\x1b[2J\x1b[3J\x1b[H'); } catch {}
+    setItems(renderConversationItems(messages, colsRef.current));
+    setExpandedItems(null);
+    setSearch(null);
+    setClearEpoch((n) => n + 1);
+  }, []);
+
+  const saveCurrentSession = useCallback((overrides = {}) => {
+    const saved = saveSession({
+      id: sessionIdRef.current,
+      name: overrides.name || sessionNameRef.current || sessionAutoName(convo.current),
+      cwd: process.cwd(),
+      branch: branchRef.current,
+      model: modelRef.current || model || '',
+      createdAt: overrides.createdAt || sessionCreatedAtRef.current,
+      updatedAt: new Date().toISOString(),
+      messages: overrides.messages || convo.current,
+    });
+    if (saved?.name) sessionNameRef.current = saved.name;
+    if (saved?.createdAt) sessionCreatedAtRef.current = saved.createdAt;
+    return saved;
+  }, [model]);
+
+  useEffect(() => {
+    if (agentName) {
+      setTimeout(() => pushNotice(`${glyphs.bolt} Agent: ${agentName} — delegating to named agent.`, C.accent, true), 200);
+    }
+    if (resumeMode) {
+      if (initialSession?.id) {
+        setTimeout(() => pushNotice(`${glyphs.arrow} Resumed session: ${initialSession.name || sessionAutoName(initialMessages)}`, C.muted, true), 200);
+      } else {
+        setTimeout(() => pushNotice(`${glyphs.arrow} No saved session found to continue.`, C.muted, true), 200);
+      }
+    }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
   const queueSubmission = useCallback((text) => {
     const q = String(text || '').trim();
     if (!q) { pushNotice('Nothing to queue.', C.muted, true); return; }
@@ -304,6 +480,64 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
     push({ type: 'shell', command, output, code: res.status ?? 0 });
   }, [log, push, pushNotice, shellMode]);
 
+  const loadSessionIntoApp = useCallback((session, notice = 'Session loaded.') => {
+    if (!session?.id) return;
+    if (session.cwd && existsSync(session.cwd)) {
+      try { process.chdir(session.cwd); } catch {}
+    }
+    branchRef.current = session.branch || gitBranch(process.cwd());
+    setTrusted(isTrustedDir(cfg, process.cwd()));
+    sessionIdRef.current = session.id;
+    sessionCreatedAtRef.current = session.createdAt || new Date().toISOString();
+    sessionNameRef.current = session.name || sessionAutoName(session.messages);
+    convo.current = session.messages || [];
+    lastAnswerRef.current = [...convo.current].reverse().find((m) => m.role === 'assistant')?.content || '';
+    modelRef.current = session.model || modelRef.current;
+    setModel(session.model || modelRef.current);
+    setModeState('ask');
+    setSessionPicker(null);
+    setDiffState(null);
+    replaceTimeline(convo.current);
+    setComposerClearToken((n) => n + 1);
+    pushNotice(notice, C.green, true);
+    saveCurrentSession();
+  }, [cfg, pushNotice, replaceTimeline, saveCurrentSession, setModeState]);
+
+  const openSessionPicker = useCallback(() => {
+    const sort = sessionPicker?.sort || 'relevance';
+    const sessions = sortSessions(listSessionsDetailed(), sort, process.cwd());
+    if (!sessions.length) {
+      pushNotice('No saved sessions yet.', C.muted, true);
+      return;
+    }
+    setSessionPicker({ sort, sel: 0, sessions });
+  }, [pushNotice, sessionPicker?.sort]);
+
+  const loadDiffState = useCallback((overrides = {}) => {
+    const staged = overrides.staged ?? diffState?.staged ?? false;
+    const whitespace = overrides.whitespace ?? diffState?.whitespace ?? false;
+    const args = ['diff'];
+    if (staged) args.push('--cached');
+    if (whitespace) args.push('--ignore-all-space');
+    const res = spawnSync('git', args, { cwd: process.cwd(), encoding: 'utf8', maxBuffer: 1024 * 1024 });
+    const raw = String(res.stdout || res.stderr || '');
+    const lines = parseDiff(raw);
+    if (!lines.length) {
+      pushNotice('No diff to show.', C.muted, true);
+      setDiffState(null);
+      return;
+    }
+    setDiffState((prev) => ({
+      lines,
+      raw,
+      sel: Math.min(prev?.sel || 0, Math.max(0, lines.length - 1)),
+      staged,
+      whitespace,
+      comments: prev?.comments || {},
+      commentInput: null,
+    }));
+  }, [diffState?.staged, diffState?.whitespace, pushNotice]);
+
   const runTurn = useCallback(async (question, opts = {}) => {
     const { depth = 0, archive = null, label = '', synthetic = false } = opts;
     activeTurns.current += 1;
@@ -312,6 +546,18 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
       log(`\n${glyphs.prompt} ${question}\n`);
     }
     convo.current.push({ role: 'user', content: question });
+    if (!sessionNameRef.current || sessionNameRef.current === 'Untitled session') {
+      sessionNameRef.current = sessionAutoName(convo.current);
+    }
+
+    // Auto-compact at ~95% of context budget (approx 100k token limit)
+    if (approxTokens(convo.current) > TOKEN_LIMIT * 0.95) {
+      pushNotice(`${glyphs.arrow} Context at 95% — auto-compacting history…`, C.warning, true);
+      const snapshot = convo.current;
+      convo.current = [];
+      convo.current.push({ role: 'user', content: 'Summarise our conversation so far in a concise way, preserving key facts and decisions.' });
+    }
+
     setBusy(true);
     setHint('');
     setChips([]);
@@ -333,7 +579,11 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
 
     try {
       const preamble = memoryPreamble(cfg);
-      const outbound = preamble ? [preamble, ...convo.current] : [...convo.current];
+      const request = modeRef.current === 'plan' && !synthetic
+        ? `[PLAN MODE] Before implementing, ask 2-3 clarifying questions about this request, then wait for answers before creating any implementation plan. Request: ${question}`
+        : question;
+      const outboundBase = [...convo.current.slice(0, -1), { role: 'user', content: request }];
+      const outbound = preamble ? [preamble, ...outboundBase] : outboundBase;
       const { reply, text, meta } = await streamChat(cfg, outbound, {
         signal: abort.signal,
         context,
@@ -368,8 +618,10 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
         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;
+      const assistantContent = text || reply.summary || reply.question || reply.note || '';
+      if (assistantContent) convo.current.push({ role: 'assistant', content: assistantContent });
+      lastAnswerRef.current = assistantContent || lastAnswerRef.current;
+      saveCurrentSession();
 
       if (Array.isArray(reply.suggestions) && reply.suggestions.length) {
         setChips(reply.suggestions.slice(0, 4));
@@ -425,7 +677,7 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
       activeTurns.current = Math.max(0, activeTurns.current - 1);
       maybeProcessQueue();
     }
-  }, [allowAll, cfg, log, maybeProcessQueue, push, pushNotice]);
+  }, [allowAll, cfg, log, maybeProcessQueue, push, pushNotice, saveCurrentSession]);
 
   const showExpanded = useCallback((kind, sourceItems) => {
     if (!sourceItems.length) {
@@ -454,6 +706,9 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
     if (q === '/exit' || q === 'exit' || q === 'quit') { doExit(); return; }
     if (q === '/clear') { clearAll(); return; }
     if (q === '/new') {
+      sessionIdRef.current = Date.now().toString(36);
+      sessionCreatedAtRef.current = new Date().toISOString();
+      sessionNameRef.current = 'Untitled session';
       convo.current = [];
       clearAll();
       pushNotice(`${glyphs.check} New conversation started.`, C.green);
@@ -480,11 +735,24 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
       pushNotice(`Mode: ${next} ${dash()} Shift+Tab to cycle.`, C.accent);
       return;
     }
-    if (q === '/context' || q === '/usage') {
+    if (q === '/context') {
       const tokens = approxTokens(convo.current);
       pushNotice(`Context: ~${tokens.toLocaleString()} tokens (${convo.current.length} messages). /compact to summarise.`);
       return;
     }
+    if (q === '/usage') {
+      const messages = convo.current.length;
+      const tokens = approxTokens(convo.current);
+      const durationMs = Date.now() - new Date(sessionCreatedAtRef.current).getTime();
+      pushNotice([
+        'Usage ─────────────────────────────────',
+        `  Messages   ${usageBar(messages, 20)}  ${messages} msgs`,
+        `  Tokens     ${usageBar(tokens, TOKEN_LIMIT)}  ${tokens >= 1000 ? `~${(tokens / 1000).toFixed(1)}k` : `~${tokens}`}`,
+        `  Session    ${formatDuration(durationMs)}`,
+        `  Model      ${model || modelRef.current || 'server default'}`,
+      ].join('\n'));
+      return;
+    }
     if (q === '/compact' || q.startsWith('/compact ')) {
       const focus = q.slice('/compact'.length).trim();
       const prompt = focus
@@ -503,9 +771,10 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
       const tokens = approxTokens(convo.current);
       const branch = branchRef.current;
       const cwd = shortenPath(process.cwd());
-      const name = cfg?.tui?.sessionNames?.[process.cwd()] || '(unnamed)';
+      const name = sessionNameRef.current || sessionAutoName(convo.current);
       pushNotice([
         `Session  ${dash()} ${name}`,
+        `ID       ${dash()} ${sessionIdRef.current}`,
         `Path     ${dash()} ${cwd}${branch ? ' [' + branch + ']' : ''}`,
         `Messages ${dash()} ${convo.current.length}`,
         `Tokens   ${dash()} ~${tokens.toLocaleString()} (approx)`,
@@ -514,15 +783,18 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
       ].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'));
+    if (q === '/resume' || q === '/continue') {
+      openSessionPicker();
+      return;
+    }
+    if (q.startsWith('/resume ') || q.startsWith('/continue ')) {
+      const id = q.split(/\s+/).slice(1).join(' ').trim();
+      const session = loadSessionById(id);
+      if (!session) {
+        pushNotice(`Session not found: ${id}`, C.red);
+        return;
+      }
+      loadSessionIntoApp(session, `Session loaded: ${session.name || id}`);
       return;
     }
     if (q === '/share') {
@@ -550,6 +822,7 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
         setModel(name);
         cfg._model = name;
         persistCfg();
+        saveCurrentSession();
         pushNotice(`${glyphs.check} Model set to ${name}. It applies to your next message.`, C.green);
       }
       return;
@@ -569,6 +842,7 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
         const ok = isTrustedDir(cfg, target);
         setTrusted(ok);
         if (!ok) openTrustDialog(target);
+        saveCurrentSession();
         pushNotice(`Changed directory to ${shortenPath(target)}`, C.green, true);
       } catch (e) {
         pushNotice(`Could not change directory: ${e.message}`, C.red);
@@ -587,10 +861,9 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
       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();
+      const name = q.slice('/rename'.length).trim() || sessionAutoName(convo.current);
+      sessionNameRef.current = name;
+      saveCurrentSession({ name });
       pushNotice(`${glyphs.check} Session renamed to ${name}.`, C.green);
       return;
     }
@@ -636,10 +909,7 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
       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);
-      });
+      loadDiffState({ staged: false, whitespace: false });
       return;
     }
     if (q === '/review' || q.startsWith('/review ')) {
@@ -653,9 +923,35 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
       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}`;
+        return head + `    ${(c.cmd + (c.hint ? ' ' + c.hint : '')).padEnd(30)}${c.desc}`;
       }).join('\n');
-      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');
+      pushNotice(
+        'Commands:' + lines +
+        '\n\n  Keyboard shortcuts:\n' +
+        '    Shift+Tab        cycle modes: ask → plan → autopilot\n' +
+        '    Ctrl+T           toggle reasoning display\n' +
+        '    Ctrl+L           clear screen\n' +
+        '    Ctrl+R           reverse history search\n' +
+        '    Ctrl+F           timeline search\n' +
+        '    Ctrl+O           expand recent items\n' +
+        '    Ctrl+E           expand all items\n' +
+        '    Ctrl+G           open $EDITOR\n' +
+        '    Ctrl+X e         open $EDITOR (alt)\n' +
+        '    Ctrl+X /         slash picker mid-prompt\n' +
+        '    Ctrl+X b         promote task to background\n' +
+        '    Ctrl+X o         open most recent link\n' +
+        '    Ctrl+S           run and preserve input\n' +
+        '    Ctrl+N / Ctrl+P  cycle followup chips\n' +
+        '    Ctrl+Enter       queue message while busy\n' +
+        '    Ctrl+V           paste attachment\n' +
+        '    Ctrl+Z           suspend (Unix)\n' +
+        '    Shift+Enter      insert newline\n' +
+        '    Alt+← / Alt+→    jump word\n' +
+        '    Ctrl+Home / End  jump to start/end\n' +
+        '    Ctrl+D           shutdown\n' +
+        '    Ctrl+C × 2       exit\n' +
+        '    Esc              cancel / exit mode\n'
+      );
       return;
     }
     if (q === '/history') {
@@ -731,8 +1027,331 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
       return;
     }
 
-    let question = q;
+    // ── Terminal setup ──────────────────────────────────────────────────────
+    if (q === '/terminal-setup') {
+      pushNotice([
+        'Terminal setup — enable Shift+Enter for multi-line input:',
+        '',
+        '  iTerm2 (macOS): Preferences → Keys → Add: Shift+Enter → Send escape sequence: \\n',
+        '  Kitty: kitty.conf → map shift+return send_text all \\n',
+        '  WezTerm: Auto-supported.',
+        '  Windows Terminal: Add JSON keybinding for shiftEnter → newline.',
+        '  VS Code terminal: Already supported.',
+        '  Other: Try Alt+Enter (sends \\n in most terminals).',
+        '',
+        'If your terminal supports bracketed paste, multi-line paste also works.',
+      ].join('\n'));
+      return;
+    }
+
+    // ── Experimental ────────────────────────────────────────────────────────
+    if (q === '/experimental' || q.startsWith('/experimental ')) {
+      const arg = q.slice('/experimental'.length).trim().toLowerCase();
+      const current = Boolean(cfg?.tui?.experimental);
+      const next = arg === 'show' ? current : arg === 'on' ? true : arg === 'off' ? false : !current;
+      if (arg !== 'show') {
+        cfg.tui = { ...(cfg.tui || {}), experimental: next };
+        persistCfg();
+      }
+      pushNotice(`experimental features ${dash()} ${next ? 'ON' : 'OFF'}`, next ? C.warning : C.muted, arg !== 'show');
+      return;
+    }
+
+    // ── Permissions ──────────────────────────────────────────────────────────
+    if (q === '/permissions' || q.startsWith('/permissions ')) {
+      const arg = q.slice('/permissions'.length).trim().toLowerCase();
+      if (arg === 'reset') {
+        cfg.tui = { ...(cfg.tui || {}), allowedTools: [], allowAll: false };
+        persistCfg();
+        setAllowAll(false);
+        pushNotice(`${glyphs.check} All permissions reset.`, C.green);
+        return;
+      }
+      const tools = cfg?.tui?.allowedTools || [];
+      pushNotice([
+        `Permissions ${dash()} ${shortenPath(process.cwd())}`,
+        `allow-all  ${dash()} ${allowAll ? 'ON' : 'off'}`,
+        `tools      ${dash()} ${tools.length ? tools.join(', ') : 'none pre-approved'}`,
+        `dirs       ${dash()} ${Object.keys(cfg?.tui?.trustedDirs || {}).map(shortenPath).join(', ') || 'none'}`,
+        '',
+        'Use /reset-allowed-tools to clear, /allow-all to toggle, /add-dir PATH to add.',
+      ].join('\n'));
+      return;
+    }
+    if (q === '/reset-allowed-tools') {
+      cfg.tui = { ...(cfg.tui || {}), allowedTools: [] };
+      persistCfg();
+      pushNotice(`${glyphs.check} In-session tool approvals cleared.`, C.green);
+      return;
+    }
+    if (q === '/allow-tool' || q.startsWith('/allow-tool ')) {
+      const tool = q.slice('/allow-tool'.length).trim();
+      if (!tool) { pushNotice('Usage: /allow-tool TOOL (e.g. shell(git))'); return; }
+      const tools = [...(cfg?.tui?.allowedTools || []), tool];
+      cfg.tui = { ...(cfg.tui || {}), allowedTools: tools };
+      persistCfg();
+      pushNotice(`${glyphs.check} Pre-approved: ${tool}`, C.green);
+      return;
+    }
+    if (q === '/sandbox' || q.startsWith('/sandbox ')) {
+      const arg = q.slice('/sandbox'.length).trim().toLowerCase();
+      const current = Boolean(cfg?.tui?.sandbox);
+      const next = arg === 'enable' ? true : arg === 'disable' ? false : !current;
+      cfg.tui = { ...(cfg.tui || {}), sandbox: next };
+      persistCfg();
+      pushNotice(`sandbox mode ${dash()} ${next ? 'ENABLED — restricted filesystem/network access' : 'disabled'}`, next ? C.warning : C.muted, true);
+      return;
+    }
+    if (q === '/add-dir' || q.startsWith('/add-dir ')) {
+      const p = q.slice('/add-dir'.length).trim();
+      if (!p) { pushNotice('Usage: /add-dir PATH'); return; }
+      const target = isAbsolute(p) ? p : resolve(process.cwd(), p);
+      if (!existsSync(target)) { pushNotice(`Directory not found: ${target}`, C.red); return; }
+      cfg.tui = { ...(cfg.tui || {}), trustedDirs: { ...(cfg.tui?.trustedDirs || {}), [target]: true } };
+      persistCfg();
+      pushNotice(`${glyphs.check} Added to allowed directories: ${shortenPath(target)}`, C.green);
+      return;
+    }
+    if (q === '/list-dirs') {
+      const dirs = Object.keys(cfg?.tui?.trustedDirs || {});
+      pushNotice(dirs.length
+        ? 'Allowed directories:\n' + dirs.map((d, i) => `  ${i + 1}. ${shortenPath(d)}`).join('\n')
+        : 'No directories added yet. Use /add-dir PATH or trust a directory at launch.');
+      return;
+    }
+    if (q === '/init') {
+      const fp = resolve(process.cwd(), '.github/copilot-instructions.md');
+      if (existsSync(fp)) {
+        pushNotice(`Copilot instructions already exist at ${shortenPath(fp)}. Edit it directly.`);
+      } else {
+        runTurn('Create a .github/copilot-instructions.md file for this repository with sensible defaults for an ISP NOC tool.');
+      }
+      return;
+    }
+
+    // ── Agents & tools ───────────────────────────────────────────────────────
+    if (q === '/agent') {
+      pushNotice([
+        'Built-in agents:',
+        '  explore       — Quick codebase analysis; questions without polluting main context',
+        '  task          — Runs builds, tests, linters with brief success/full failure output',
+        '  general       — Complex multi-step tasks with full toolset, separate context',
+        '  code-review   — Surfaces only genuine issues; minimal noise',
+        '  research      — Deep research across codebase, repos, web with citations',
+        '  rubber-duck   — Constructive critic; consulted automatically on non-trivial tasks',
+        '',
+        'Use: /rubber-duck [prompt] · /research TOPIC · /fleet [prompt]',
+      ].join('\n'));
+      return;
+    }
+    if (q === '/skills') {
+      pushNotice([
+        'Skills (ISP NOC context):',
+        '  optical       — Optical power analysis and ONU diagnostics (enabled)',
+        '  fleet-check   — Parallel multi-device scanning (enabled)',
+        '  backup        — Automated config backup via git (enabled)',
+        '  customers     — Customer lookup and ticket integration (enabled)',
+        '  alarms        — Real-time alarm monitoring (enabled)',
+        '',
+        'Use /experimental to unlock additional skills.',
+      ].join('\n'));
+      return;
+    }
+    if (q === '/tasks') {
+      const active = activeTurns.current;
+      const queued = queuedRef.current ? 1 : 0;
+      pushNotice([
+        `Background tasks ${dash()} ${active > 0 ? `${active} running` : 'idle'}`,
+        `Queued messages  ${dash()} ${queued}`,
+        `Shell mode       ${dash()} ${shellMode ? 'active' : 'off'}`,
+        '',
+        'Use Ctrl+Enter to queue a message while busy. Ctrl+X b promotes to background.',
+      ].join('\n'));
+      return;
+    }
+    if (q === '/fleet' || q.startsWith('/fleet ')) {
+      const prompt = q.slice('/fleet'.length).trim();
+      runTurn(prompt
+        ? `Fleet mode: spawn parallel subagents to work on: ${prompt}. Report combined results.`
+        : 'Fleet mode: spawn parallel subagents to check status of all devices and report combined results.');
+      return;
+    }
+    if (q === '/rubber-duck' || q.startsWith('/rubber-duck ')) {
+      const prompt = q.slice('/rubber-duck'.length).trim();
+      const context = lastAnswerRef.current ? `\nContext from last answer:\n${lastAnswerRef.current.slice(0, 1000)}` : '';
+      runTurn(`Play the role of a rubber-duck reviewer. Give a second opinion on the following, focusing on what could go wrong, what's missing, and what risks exist. Be concise and high-signal.${context ? context : ' ' + (prompt || 'Review our conversation so far.')}`);
+      return;
+    }
+    if (q === '/research' || q.startsWith('/research ')) {
+      const topic = q.slice('/research'.length).trim();
+      if (!topic) { pushNotice('Usage: /research TOPIC'); return; }
+      runTurn(`Run deep research on: ${topic}. Search GitHub repos, docs, and known ISP NOC resources. Produce a report with citations.`);
+      return;
+    }
+    if (q === '/mcp' || q.startsWith('/mcp ')) {
+      const sub = q.slice('/mcp'.length).trim();
+      pushNotice([
+        `MCP servers ${dash()} ${sub || 'show'}`,
+        '  GitHub MCP server is preconfigured (github.com resources: repos, issues, PRs).',
+        '  Config: ~/.config/ispbills-icli/mcp-config.json',
+        '',
+        sub === 'show' || !sub
+          ? '  No additional MCP servers configured. Use /mcp add to add one.'
+          : `  Subcommand '${sub}' — MCP management UI coming soon.`,
+      ].join('\n'));
+      return;
+    }
+    if (q === '/plugin' || q.startsWith('/plugin ')) {
+      pushNotice(`Plugin marketplace — coming soon. Use npm to install ispbills-icli-* plugins.`);
+      return;
+    }
+    if (q === '/lsp' || q.startsWith('/lsp ')) {
+      pushNotice(`LSP integration — configure ~/.config/ispbills-icli/lsp-config.json\nSubcommands: show, test, reload, help.`);
+      return;
+    }
+    if (q === '/ide') {
+      pushNotice(`IDE connection — connect via VS Code extension. Install "IspBills AI" from the VS Code marketplace.`);
+      return;
+    }
+    if (q === '/pr' || q.startsWith('/pr ')) {
+      const sub = q.slice('/pr'.length).trim() || 'view';
+      runTurn(`GitHub PR ${sub}: check the current branch's pull request status, list any open PRs, and summarise review status.`);
+      return;
+    }
+    if (q === '/delegate' || q.startsWith('/delegate ')) {
+      const prompt = q.slice('/delegate'.length).trim();
+      runTurn(prompt
+        ? `Delegate the following changes to a remote repo with an AI-generated PR: ${prompt}`
+        : 'Summarise what changes could be delegated to a remote PR and ask which to proceed with.');
+      return;
+    }
+    if (q === '/instructions') {
+      const paths = [
+        resolve(process.cwd(), '.github/copilot-instructions.md'),
+        resolve(process.cwd(), 'AGENTS.md'),
+        resolve(process.cwd(), 'CLAUDE.md'),
+        resolve(homedir(), '.copilot/copilot-instructions.md'),
+      ];
+      const found = paths.filter(existsSync).map(shortenPath);
+      pushNotice(found.length
+        ? 'Custom instruction files:\n' + found.map((p, i) => `  ${i + 1}. ${p}`).join('\n') + '\n\n  Edit any to customise AI behaviour.'
+        : 'No custom instruction files found.\n  Use /init to create .github/copilot-instructions.md.');
+      return;
+    }
+    if (q === '/remote' || q.startsWith('/remote ')) {
+      pushNotice('Remote steering — allows steering this session from another device via a shared link. Coming soon.');
+      return;
+    }
+    if (q === '/chronicle' || q.startsWith('/chronicle ')) {
+      const sub = q.slice('/chronicle'.length).trim() || 'standup';
+      const prompts = {
+        standup: 'Generate a concise standup summary from this session: what was worked on, what was completed, and any blockers.',
+        tips: 'Based on this session, what best practices or tips would improve my ISP NOC workflow?',
+        improve: 'Analyse this session and suggest concrete improvements to my approach or tooling.',
+        reindex: 'Reindex and categorise all actions taken in this session.',
+      };
+      runTurn(prompts[sub] || `Chronicle ${sub}: summarise this session focusing on ${sub}.`);
+      return;
+    }
+    if (q === '/keep-alive' || q.startsWith('/keep-alive ')) {
+      const arg = q.slice('/keep-alive'.length).trim().toLowerCase();
+      pushNotice(`keep-alive ${dash()} ${arg || 'status'}. Note: keep-alive prevents machine sleep. Use /keep-alive on|off|busy.`, C.muted);
+      return;
+    }
+    if (q === '/ask' || q.startsWith('/ask ')) {
+      const question2 = q.slice('/ask'.length).trim();
+      if (!question2) { pushNotice('Usage: /ask QUESTION — quick side-question without adding to history'); return; }
+      pushNotice(`[ask] ${question2}`, C.muted, false);
+      // Run as an isolated turn that doesn't add to main history
+      const savedConvo = [...convo.current];
+      convo.current = [];
+      runTurn(question2).then(() => { convo.current = savedConvo; });
+      return;
+    }
+    if (q === '/after' || q.startsWith('/after ')) {
+      pushNotice('Scheduled prompts (/after, /every) are experimental. Feature coming in a future release.', C.muted);
+      return;
+    }
+    if (q === '/every' || q.startsWith('/every ')) {
+      pushNotice('Scheduled prompts (/every) are experimental. Feature coming in a future release.', C.muted);
+      return;
+    }
+
+    // ── Misc system ──────────────────────────────────────────────────────────
+    if (q === '/restart') {
+      pushNotice(`${glyphs.arrow} Restarting iCli…`, C.muted, true);
+      setTimeout(() => { try { process.exit(0); } catch {} }, 500);
+      return;
+    }
+    if (q === '/downgrade' || q.startsWith('/downgrade ')) {
+      const ver = q.slice('/downgrade'.length).trim();
+      if (!ver) { pushNotice('Usage: /downgrade VERSION (e.g. /downgrade 8.5.3)'); return; }
+      pushNotice(`${glyphs.arrow} Rolling back to ispbills-icli@${ver}…`, C.warning, true);
+      const res = spawnSync('npm', ['install', '-g', `ispbills-icli@${ver}`], { stdio: 'pipe', encoding: 'utf8' });
+      pushNotice(res.status === 0
+        ? `${glyphs.check} Downgraded to ${ver}. Restart iCli.`
+        : `${glyphs.cross} Downgrade failed: ${(res.stderr || '').slice(0, 200)}`, res.status === 0 ? C.green : C.red);
+      return;
+    }
+    if (q === '/app') {
+      pushNotice('Launching GitHub Copilot desktop app… (stub — install from github.com/github/copilot-for-desktop)', C.muted);
+      return;
+    }
+    if (q === '/user' || q.startsWith('/user ')) {
+      const u = cfg.user;
+      pushNotice([
+        `User ${dash()} ${u?.name || u?.email || 'unknown'}`,
+        `Email ${dash()} ${u?.email || 'n/a'}`,
+        `Role  ${dash()} ${u?.role || 'operator'}`,
+        `URL   ${dash()} ${cfg.url || 'n/a'}`,
+      ].join('\n'));
+      return;
+    }
+    if (q === '/login') {
+      pushNotice('Run `icli login` from a new terminal to re-authenticate. /logout then restart to force re-login.', C.muted);
+      return;
+    }
+    if (q === '/whoami') {
+      const u = cfg.user;
+      pushNotice([
+        `${u?.name || u?.email || 'unknown'} ${dash()} ${u?.role || 'operator'}`,
+        u?.email ? `email  ${dash()} ${u.email}` : '',
+        `url    ${dash()} ${cfg.url || 'n/a'}`,
+      ].filter(Boolean).join('\n'));
+      return;
+    }
+    if (q === '/clikit' || q.startsWith('/clikit ')) {
+      pushNotice('clikit component preview — UI component library. Coming soon.', C.muted);
+      return;
+    }
+    if (q === '/extensions' || q.startsWith('/extensions ')) {
+      pushNotice('Extensions — manage CLI extensions at .github/extensions/. Coming soon.', C.muted);
+      return;
+    }
+    if (q === '/reset') {
+      sessionIdRef.current = Date.now().toString(36);
+      sessionCreatedAtRef.current = new Date().toISOString();
+      sessionNameRef.current = 'Untitled session';
+      convo.current = [];
+      clearAll();
+      pushNotice(`${glyphs.check} Conversation reset.`, C.green);
+      return;
+    }
+    if (q === '/models' || q.startsWith('/models ')) {
+      const name = q.slice('/models'.length).trim();
+      if (!name) {
+        pushNotice(`Current model: ${model || modelRef.current || 'server default'}.\nUse /model <name> or /models <name> to set.`);
+      } else {
+        modelRef.current = name;
+        setModel(name);
+        cfg._model = name;
+        persistCfg();
+        pushNotice(`${glyphs.check} Model set to ${name}.`, C.green);
+      }
+      return;
+    }
     const turnOpts = {};
+    let question = q;
     if (q.startsWith('/')) {
       const mapped = slashToQuestion(q);
       if (mapped) {
@@ -747,7 +1366,7 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
       }
     }
     runTurn(question, turnOpts);
-  }, [allowAll, cfg, clearAll, doExit, doGist, modeRef, model, onExternal, openTrustDialog, persistCfg, push, pushNotice, runShellCommand, runTurn, setModeState, shellMode, streamerMode, trusted]);
+  }, [allowAll, cfg, clearAll, doExit, doGist, loadDiffState, loadSessionIntoApp, model, onExternal, openSessionPicker, openTrustDialog, persistCfg, push, pushNotice, runShellCommand, runTurn, saveCurrentSession, setModeState, shellMode, streamerMode, trusted]);
 
   useEffect(() => {
     dispatchSubmitRef.current = dispatchSubmit;
@@ -760,14 +1379,73 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
   const pickChoice = useCallback((value) => {
     const act = choiceActionRef.current;
     choiceActionRef.current = null;
+    const currentChoice = choice;
     setChoice(null);
     if (act) { act(value); return; }
-    if (value == null) { pushNotice('Dismissed.', C.muted, true); return; }
+    if (value == null) {
+      if (/tool request|approval|shell:/i.test(`${currentChoice?.title || ''} ${currentChoice?.note || ''}`)) {
+        setChoice({
+          title: 'Tell Copilot what to do differently:',
+          note: '',
+          sel: 0,
+          text: '',
+          focusText: true,
+          allowText: true,
+          options: [],
+        });
+        return;
+      }
+      pushNotice('Dismissed.', C.muted, true);
+      return;
+    }
     runTurn(String(value));
-  }, [pushNotice, runTurn]);
+  }, [choice, pushNotice, runTurn]);
+
+  useInput((input, key) => {
+    if (!sessionPicker) return;
+    if (key.escape || (key.ctrl && input === 'c')) { setSessionPicker(null); return; }
+    if (key.upArrow || input === 'k') {
+      setSessionPicker((p) => ({ ...p, sel: Math.max(0, p.sel - 1) }));
+      return;
+    }
+    if (key.downArrow || input === 'j') {
+      setSessionPicker((p) => ({ ...p, sel: Math.min(Math.max(0, p.sessions.length - 1), p.sel + 1) }));
+      return;
+    }
+    if (input === 's') {
+      setSessionPicker((p) => {
+        const nextSort = SESSION_SORTS[(SESSION_SORTS.indexOf(p.sort) + 1) % SESSION_SORTS.length];
+        return {
+          ...p,
+          sort: nextSort,
+          sel: 0,
+          sessions: sortSessions(listSessionsDetailed(), nextSort, process.cwd()),
+        };
+      });
+      return;
+    }
+    if (input === 'd') {
+      const current = sessionPicker.sessions[sessionPicker.sel];
+      if (!current) return;
+      const deleted = deleteSession(current.id);
+      const sessions = sortSessions(listSessionsDetailed(), sessionPicker.sort, process.cwd());
+      setSessionPicker(sessions.length ? {
+        ...sessionPicker,
+        sessions,
+        sel: Math.min(sessionPicker.sel, Math.max(0, sessions.length - 1)),
+      } : null);
+      pushNotice(deleted ? `Deleted session: ${current.name || current.id}` : `Could not delete session: ${current.id}`, deleted ? C.green : C.red, true);
+      return;
+    }
+    if (key.return) {
+      const current = sessionPicker.sessions[sessionPicker.sel];
+      if (current) loadSessionIntoApp(loadSessionById(current.id) || current, `Session loaded: ${current.name || current.id}`);
+    }
+  });
 
   useInput((input, key) => {
     if (!choice) return;
+    if (sessionPicker || diffState) return;
     if (key.escape || (key.ctrl && input === 'c')) { setChoice(null); return; }
     if (key.tab && choice.allowText) { setChoice((c) => ({ ...c, focusText: !c.focusText })); return; }
     if (key.upArrow) { setChoice((c) => ({ ...c, focusText: false, sel: Math.max(0, c.sel - 1) })); return; }
@@ -793,6 +1471,96 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
     }
   });
 
+  useInput((input, key) => {
+    if (!diffState) return;
+    if (choice || search || sessionPicker) return;
+    const commenting = diffState.commentInput;
+    if (commenting) {
+      if (key.escape) {
+        setDiffState((d) => ({ ...d, commentInput: null }));
+        return;
+      }
+      if (key.return) {
+        const text = String(commenting.text || '').trim();
+        if (!text) {
+          setDiffState((d) => ({ ...d, commentInput: null }));
+          return;
+        }
+        setDiffState((d) => ({
+          ...d,
+          comments: { ...(d.comments || {}), [commenting.lineIndex]: { ...commenting, text } },
+          commentInput: null,
+        }));
+        pushNotice('Diff comment saved.', C.green, true);
+        return;
+      }
+      if (key.backspace || key.delete) {
+        setDiffState((d) => ({ ...d, commentInput: { ...d.commentInput, text: d.commentInput.text.slice(0, -1) } }));
+        return;
+      }
+      if (input && !key.ctrl && !key.meta) {
+        const printable = input.replace(/[\x00-\x1f\x7f]/g, '');
+        if (printable) setDiffState((d) => ({ ...d, commentInput: { ...d.commentInput, text: d.commentInput.text + printable } }));
+      }
+      return;
+    }
+
+    const page = Math.max(4, rows - 12);
+    const fileIndexes = diffState.lines.map((line, idx) => line.type === 'header' && /^diff --git /.test(line.content) ? idx : -1).filter((idx) => idx >= 0);
+    const moveFile = (dir) => {
+      const current = fileIndexes.findIndex((idx) => idx >= diffState.sel);
+      const nextIndex = dir > 0
+        ? fileIndexes[Math.min(fileIndexes.length - 1, Math.max(0, current + 1))]
+        : fileIndexes[Math.max(0, (current <= 0 ? fileIndexes.length : current) - 1)];
+      if (typeof nextIndex === 'number') setDiffState((d) => ({ ...d, sel: nextIndex }));
+    };
+
+    if (key.escape || (key.ctrl && input === 'c')) { setDiffState(null); return; }
+    if (input === 'j' || key.downArrow) { setDiffState((d) => ({ ...d, sel: Math.min(d.lines.length - 1, d.sel + 1) })); return; }
+    if (input === 'k' || key.upArrow) { setDiffState((d) => ({ ...d, sel: Math.max(0, d.sel - 1) })); return; }
+    if (input === 'g' || key.home) { setDiffState((d) => ({ ...d, sel: 0 })); return; }
+    if (input === 'G' || key.end) { setDiffState((d) => ({ ...d, sel: Math.max(0, d.lines.length - 1) })); return; }
+    if (key.pageDown) { setDiffState((d) => ({ ...d, sel: Math.min(d.lines.length - 1, d.sel + page) })); return; }
+    if (key.pageUp) { setDiffState((d) => ({ ...d, sel: Math.max(0, d.sel - page) })); return; }
+    if (key.ctrl && input === 'd') { setDiffState((d) => ({ ...d, sel: Math.min(d.lines.length - 1, d.sel + Math.max(2, Math.floor(page / 2))) })); return; }
+    if (key.ctrl && input === 'u') { setDiffState((d) => ({ ...d, sel: Math.max(0, d.sel - Math.max(2, Math.floor(page / 2))) })); return; }
+    if (input === 'h' || key.leftArrow) { moveFile(-1); return; }
+    if (input === 'l' || key.rightArrow) { moveFile(1); return; }
+    if (input === 'b') { loadDiffState({ staged: !diffState.staged, whitespace: diffState.whitespace }); return; }
+    if (input === 'w') { loadDiffState({ staged: diffState.staged, whitespace: !diffState.whitespace }); return; }
+    if (input === 'c') {
+      const line = diffState.lines[diffState.sel];
+      if (!line) return;
+      setDiffState((d) => ({
+        ...d,
+        commentInput: {
+          lineIndex: d.sel,
+          file: line.file || 'diff',
+          lineNumber: line.lineNumber || line.newLine || line.oldLine || 0,
+          text: d.comments?.[d.sel]?.text || '',
+          content: line.content,
+        },
+      }));
+      return;
+    }
+    if (input === 's') {
+      const comments = Object.values(diffState.comments || {});
+      pushNotice(comments.length
+        ? comments.map((c, i) => `${i + 1}. ${c.file}:${c.lineNumber || '?'} — ${c.text}`).join('\n')
+        : 'No diff comments yet.', C.muted);
+      return;
+    }
+    if (key.return) {
+      const comments = Object.values(diffState.comments || {});
+      if (!comments.length) return;
+      setDiffState(null);
+      runTurn([
+        'Review these git diff comments/questions and explain the relevant changes:',
+        ...comments.map((c, i) => `${i + 1}. ${c.file}:${c.lineNumber || '?'} ${c.content}\nComment: ${c.text}`),
+      ].join('\n\n'));
+    }
+  });
+
   const openSearch = useCallback(() => {
     setSearch({ query: '', active: 0 });
     setHint('Timeline search');
@@ -823,7 +1591,7 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
   });
 
   useInput((input, key) => {
-    if (choice || search) return;
+    if (choice || search || sessionPicker || diffState) return;
     if (key.ctrl && input === 'c') {
       if (busy) { abortRef.current?.abort(); setHint(''); return; }
       const now = Date.now();
@@ -837,6 +1605,17 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
     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 (activeTab !== 'session' && key.return) {
+      setActiveTab('session');
+      setHint('Session tab active');
+      return;
+    }
+    if (activeTab !== 'session' && input === 'c') {
+      setActiveTab('session');
+      setComposerPreset({ token: Date.now(), text: '#' });
+      pushNotice('Composer primed with an ISP reference. Continue typing after #.', C.muted, true);
+      return;
+    }
     if (key.tab && key.shift && !busy) {
       const cur = MODES.indexOf(modeRef.current);
       const next = MODES[(cur + 1) % MODES.length];
@@ -859,6 +1638,50 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
     }
   });
 
+  // Tab-specific content panels (shown when not on Session tab)
+  const TAB_CONTENT = {
+    devices: {
+      title: 'Devices',
+      commands: [
+        { cmd: '/status', desc: 'Fleet health summary' },
+        { cmd: '/reachable', desc: 'Who is up / down' },
+        { cmd: '/alarms', desc: 'Active alarms' },
+        { cmd: '/check [device]', desc: 'Full device diagnostics' },
+        { cmd: '/uptime [device]', desc: 'Uptime and last reboot' },
+        { cmd: '/cpu [device]', desc: 'CPU / memory load' },
+        { cmd: '/offline', desc: 'All offline devices' },
+        { cmd: '/flapping [device]', desc: 'Flapping interfaces' },
+      ],
+      hint: 'Press Enter to switch back to Session and use the composer',
+    },
+    customers: {
+      title: 'Customers',
+      commands: [
+        { cmd: '/customer [name]', desc: 'Look up a customer' },
+        { cmd: '/online', desc: 'Online PPPoE sessions' },
+        { cmd: '/pppoe [user]', desc: 'PPPoE session detail' },
+        { cmd: '/dhcp', desc: 'DHCP leases & pool usage' },
+        { cmd: '/onu [id]', desc: 'ONU signal and status' },
+        { cmd: '/bandwidth [device]', desc: 'Traffic / bandwidth' },
+      ],
+      hint: 'Press Enter to switch back to Session and send commands',
+    },
+    alarms: {
+      title: 'Alarms',
+      commands: [
+        { cmd: '/alarms', desc: 'Active alarms & recent faults' },
+        { cmd: '/offline', desc: 'All offline devices' },
+        { cmd: '/down [circuit]', desc: 'Down circuits / uplinks' },
+        { cmd: '/flapping [device]', desc: 'Flapping interfaces' },
+        { cmd: '/optical [device]', desc: 'Optical RX/TX (dBm)' },
+        { cmd: '/reachable', desc: 'Reachability sweep' },
+      ],
+      hint: 'Press Enter to switch back to Session and type a command',
+    },
+  };
+
+  const tabPanel = activeTab !== 'session' ? TAB_CONTENT[activeTab] : null;
+
   const renderItem = (it) => {
     const c = it.cols || 80;
     switch (it.type) {
@@ -868,6 +1691,8 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
       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 'info': return html`<${LabeledNotice} key=${it.id} label="ℹ  Info" text=${it.text} color=${C.muted} bodyColor=${it.color || C.white} cols=${c} ts=${it.ts} />`;
+      case 'error': return html`<${LabeledNotice} key=${it.id} label="✖ Error" text=${it.text} color=${C.error} bodyColor=${it.color || C.white} cols=${c} ts=${it.ts} />`;
       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;
@@ -877,7 +1702,7 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
   const cwd = shortenPath(process.cwd());
   const branch = branchRef.current;
   const tokenCount = approxTokens(convo.current);
-  const tokenLabel = tokenCount > 0 ? `~${Math.max(1, Math.round(tokenCount / 1000))}k ctx` : '';
+  const tokenLabel = contextUsageLabel(tokenCount);
   const modelLabel = streamerMode ? '' : shortModel(model || modelRef.current || 'server default');
   const footerLeft = [cwd, branch ? `${glyphs.gitBranch}${branch}` : null].filter(Boolean).join('  ');
   const footerRight = hint
@@ -920,13 +1745,52 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
 
       ${search ? html`<${SearchOverlay} query=${search.query} matches=${searchMatches} active=${search.active} cols=${cols} />` : null}
 
+      ${diffState
+        ? html`<${Box} flexDirection="column">
+            <${DiffViewer}
+              diff=${diffState.lines}
+              sel=${diffState.sel}
+              staged=${diffState.staged}
+              whitespace=${diffState.whitespace}
+              cols=${cols}
+              height=${Math.max(8, rows - 14)}
+              commentCount=${Object.keys(diffState.comments || {}).length}
+            />
+            ${diffState.commentInput
+              ? html`<${Choice}
+                  title=${`Tell Copilot what stands out about ${diffState.commentInput.file}:${diffState.commentInput.lineNumber || '?'}`}
+                  note=${diffState.commentInput.content}
+                  sel=${0}
+                  allowText=${true}
+                  text=${diffState.commentInput.text}
+                  focusText=${true}
+                  options=${[]}
+                />`
+              : null}
+          <//>`
+        : null}
+
       <${TabBar} active=${activeTab} cols=${cols} mode=${composerMode} />
 
+      ${tabPanel && !diffState
+        ? html`<${Box} flexDirection="column" paddingX=${1} paddingY=${1}>
+            <${Text} color=${C.brand} bold>${tabPanel.title} — Quick Commands<//>\n
+            ${tabPanel.commands.map((c, i) =>
+              html`<${Box} key=${i}>
+                <${Text} color=${C.slash}>${c.cmd.padEnd(24)}<//>
+                <${Text} color=${C.muted}>${c.desc}<//>
+              <//>`)}
+            \n<${Text} color=${C.muted}>${tabPanel.hint} · Press Enter to return to Session · Press c to start a #reference<//>
+          <//>`
+        : null}
+
       ${!busy && chips.length ? html`<${FollowupChips} chips=${chips} active=${activeChip} />` : null}
 
       <${Box} flexDirection="column">
         ${choice
           ? html`<${Choice} ...${choice} />`
+          : sessionPicker
+          ? html`<${SessionPicker} sessions=${sessionPicker.sessions} sel=${sessionPicker.sel} sort=${sessionPicker.sort} cols=${cols} />`
           : html`<${Composer}
               onSubmit=${dispatchSubmit}
               onSubmitKeep=${dispatchSubmit}
@@ -934,14 +1798,18 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
               onSearch=${openSearch}
               onNotice=${(text, color = C.muted) => pushNotice(text, color, true)}
               onEmptyEsc=${() => { if (shellMode) setShellMode(false); else if (expandedItems) setExpandedItems(null); }}
+              onActivateSession=${() => { setActiveTab('session'); setHint('Session tab active'); }}
               onValueChange=${setComposerText}
               onEmptySubmit=${() => {
                 if (chips.length) dispatchSubmit(chips[activeChip]);
               }}
               busy=${busy}
-              blocked=${Boolean(choice || search || !trusted)}
+              blocked=${Boolean(choice || search || sessionPicker || diffState || !trusted)}
               width=${cols}
               mode=${composerMode}
+              activeTab=${activeTab}
+              presetText=${composerPreset.text}
+              presetToken=${composerPreset.token}
               clearToken=${composerClearToken}
             />`}