ispbills-icli 8.5.5 → 8.5.7

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 = [];
@@ -28,13 +30,25 @@ function splitArgs(s) {
   return out;
 }
 
-function shortenPath(p) {
+function shortenPath(p, maxLen = Infinity) {
+  let result;
   try {
     const home = homedir();
     const rel = relative(home, p);
-    if (!rel.startsWith('..')) return '~/' + rel;
-  } catch {}
-  return p;
+    result = rel.startsWith('..') ? p : '~/' + rel;
+  } catch {
+    result = p;
+  }
+  if (maxLen === Infinity || result.length <= maxLen) return result;
+  // §8: progressive shortening ~/…/sub/path
+  const withoutHome = result.replace(/^~\//, '');
+  const segs = withoutHome.split('/');
+  while (segs.length > 1) {
+    segs.shift();
+    const candidate = '~/\u2026/' + segs.join('/');
+    if (candidate.length <= maxLen) return candidate;
+  }
+  return '~/\u2026/' + segs[segs.length - 1];
 }
 
 function gitBranch(cwd = process.cwd()) {
@@ -52,6 +66,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';
@@ -114,14 +248,24 @@ const MODES = ['ask', 'plan', 'autopilot'];
 
 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 +277,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 {}
@@ -168,15 +318,6 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
     try { saveConfig(cfg); } catch {}
   }, [cfg]);
 
-  useEffect(() => {
-    if (agentName) {
-      setTimeout(() => pushNotice(`${glyphs.bolt} Agent: ${agentName} — delegating to named agent.`, C.accent, true), 200);
-    }
-    if (resumeMode) {
-      setTimeout(() => pushNotice(`${glyphs.arrow} Resume mode — last session info will appear in /session`, C.muted, true), 200);
-    }
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
   const setModeState = useCallback((next) => {
     modeRef.current = next;
     apRef.current = next === 'autopilot';
@@ -200,14 +341,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);
@@ -220,6 +362,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; }
@@ -252,9 +431,9 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
       focusText: false,
       allowText: false,
       options: [
-        { label: '1. Yes', value: 'session' },
-        { label: '2. Yes, remember', value: 'remember' },
-        { label: '3. No, exit', value: 'exit', danger: true },
+        { label: '1. Yes, proceed (this session)', value: 'session' },
+        { label: '2. Yes, and remember this folder', value: 'remember' },
+        { label: '3. No, exit (Esc)', value: 'exit', danger: true },
       ],
     });
   }, [cfg, persistCfg]);
@@ -313,6 +492,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;
@@ -321,9 +558,11 @@ 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)
-    const TOKEN_LIMIT = 100000;
     if (approxTokens(convo.current) > TOKEN_LIMIT * 0.95) {
       pushNotice(`${glyphs.arrow} Context at 95% — auto-compacting history…`, C.warning, true);
       const snapshot = convo.current;
@@ -352,7 +591,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,
@@ -387,8 +630,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));
@@ -413,14 +658,49 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
       setLive(null);
       if (type === 'plan') {
         const destructive = (reply.steps || []).some((st) => /destruct|high/.test(st.risk || ''));
+        // §9: choiceActionRef handles autopilot hand-off
+        choiceActionRef.current = (value) => {
+          if (value === '__autopilot__') {
+            apRef.current = true;
+            setModeState('autopilot');
+            runTurn('apply fix');
+            return;
+          }
+          if (value != null) runTurn(String(value));
+        };
         setChoice({
           title: 'Apply this fix?',
           note: reply.summary || '',
           sel: 0, text: '', focusText: false, allowText: false,
           options: [
-            { label: destructive ? 'Apply fix (destructive)' : 'Apply fix', value: 'apply fix', danger: destructive },
-            { label: 'Explain the plan first', value: 'explain this plan in more detail before applying' },
-            { label: 'Cancel', value: null },
+            { label: destructive ? '1. Apply fix (destructive ⚠)' : '1. Apply fix', value: 'apply fix', danger: destructive },
+            { label: '2. Accept plan and build on autopilot', value: '__autopilot__' },
+            { label: '3. Explain the plan first', value: 'explain this plan in more detail before applying' },
+            { label: '4. Cancel', value: null },
+          ],
+        });
+      } else if (type === 'tool_approval' || (reply.toolCall && (type === 'prompt' || type === 'choice'))) {
+        // §13: exact tool-approval format
+        const toolName = reply.toolCall?.name || 'shell';
+        const toolArgs = reply.toolCall?.args || reply.toolCall?.command || '';
+        const toolDesc = toolArgs ? `${toolName}: ${toolArgs}` : (reply.note || toolName);
+        choiceActionRef.current = (value) => {
+          if (value === '__session_allow__') {
+            cfg.allowedTools = [...(cfg.allowedTools || []), toolName];
+            runTurn('yes, proceed with this tool call');
+            return;
+          }
+          if (value != null) runTurn(String(value));
+        };
+        setChoice({
+          title: '⚙ Tool request',
+          note: toolDesc,
+          sel: 0, text: '', focusText: false, allowText: false,
+          isToolApproval: true,
+          options: [
+            { label: '1. Yes', value: 'yes, proceed with this tool call' },
+            { label: '2. Yes, and approve shell for the rest of the session', value: '__session_allow__' },
+            { label: '3. No, and tell Copilot what to do differently (Esc)', value: null },
           ],
         });
       } else if (type === 'prompt' || type === 'choice') {
@@ -444,7 +724,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) {
@@ -473,6 +753,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);
@@ -499,11 +782,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
@@ -514,17 +810,44 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
       runTurn(prompt);
       return;
     }
-    if (q === '/theme') {
-      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.');
+    if (q === '/theme' || q.startsWith('/theme ')) {
+      const arg = q.slice('/theme'.length).trim();
+      const themes = ['default', 'dim', 'high-contrast', 'colorblind'];
+      if (arg && themes.includes(arg)) {
+        cfg.theme = arg;
+        persistCfg();
+        pushNotice(`${glyphs.check} Theme set to "${arg}". Restart iCli to fully apply.`, C.success);
+        return;
+      }
+      const current = cfg.theme || 'default';
+      choiceActionRef.current = (value) => {
+        if (!value) return;
+        cfg.theme = value;
+        persistCfg();
+        pushNotice(`${glyphs.check} Theme set to "${value}". Restart iCli to fully apply.`, C.success);
+      };
+      setChoice({
+        title: 'Select colour theme',
+        note: `Current: ${current}`,
+        sel: Math.max(0, themes.indexOf(current)),
+        text: '', focusText: false, allowText: false,
+        options: [
+          { label: 'default',        value: 'default',        hint: 'Auto-detected dark or light' },
+          { label: 'dim',            value: 'dim',            hint: 'Reduced brightness, lower contrast' },
+          { label: 'high-contrast',  value: 'high-contrast',  hint: 'Maximum contrast for readability' },
+          { label: 'colorblind',     value: 'colorblind',     hint: 'Adjusted for colour-vision differences' },
+        ],
+      });
       return;
     }
     if (q === '/session') {
       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)`,
@@ -533,15 +856,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') {
@@ -569,6 +895,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;
@@ -588,6 +915,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);
@@ -606,10 +934,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;
     }
@@ -655,10 +982,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 ')) {
@@ -1078,6 +1402,9 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
       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);
@@ -1096,19 +1423,6 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
       }
       return;
     }
-    if (q === '/continue' || q.startsWith('/continue ')) {
-      // same as /resume
-      const name = cfg?.tui?.sessionNames?.[process.cwd()] || '(unnamed)';
-      pushNotice([
-        `Session ${dash()} ${name}`,
-        `Path    ${dash()} ${shortenPath(process.cwd())}`,
-        `Msgs    ${dash()} ${convo.current.length}`,
-        `Last AI ${dash()} ${(lastAnswerRef.current || '(none)').slice(0, 120)}`,
-        '',
-        'Session persistence coming in a future release. Use /session for current session info.',
-      ].join('\n'));
-      return;
-    }
     const turnOpts = {};
     let question = q;
     if (q.startsWith('/')) {
@@ -1125,7 +1439,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;
@@ -1138,14 +1452,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 (currentChoice?.isToolApproval || /⚙ Tool request|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; }
@@ -1171,6 +1544,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');
@@ -1201,7 +1664,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();
@@ -1215,6 +1678,31 @@ 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;
+    }
+    // §5: o = open in browser, / = open search for this tab
+    if (activeTab !== 'session' && input === 'o') {
+      const openCmd = process.platform === 'darwin' ? 'open' : 'xdg-open';
+      const base = (cfg.url || '').replace(/\/$/, '');
+      const url = base ? `${base}/${activeTab}` : `https://ispbills.local/${activeTab}`;
+      try { spawnSync(openCmd, [url], { detached: true, stdio: 'ignore', shell: false }); } catch {}
+      pushNotice(`Opening ${url} in browser…`, C.muted, true);
+      return;
+    }
+    if (activeTab !== 'session' && input === '/') {
+      openSearch();
+      pushNotice(`Search ${activeTab} tab…`, C.muted, true);
+      return;
+    }
     if (key.tab && key.shift && !busy) {
       const cur = MODES.indexOf(modeRef.current);
       const next = MODES[(cur + 1) % MODES.length];
@@ -1251,7 +1739,7 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
         { cmd: '/offline', desc: 'All offline devices' },
         { cmd: '/flapping [device]', desc: 'Flapping interfaces' },
       ],
-      hint: 'Type a command or press Enter on Session tab to interact',
+      hint: 'Press Enter to switch back to Session and use the composer',
     },
     customers: {
       title: 'Customers',
@@ -1263,7 +1751,7 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
         { cmd: '/onu [id]', desc: 'ONU signal and status' },
         { cmd: '/bandwidth [device]', desc: 'Traffic / bandwidth' },
       ],
-      hint: 'Switch to Session tab (Tab) to send commands',
+      hint: 'Press Enter to switch back to Session and send commands',
     },
     alarms: {
       title: 'Alarms',
@@ -1275,7 +1763,7 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
         { cmd: '/optical [device]', desc: 'Optical RX/TX (dBm)' },
         { cmd: '/reachable', desc: 'Reachability sweep' },
       ],
-      hint: 'Switch to Session tab (Tab) and type a command',
+      hint: 'Press Enter to switch back to Session and type a command',
     },
   };
 
@@ -1290,17 +1778,23 @@ 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 'system': return html`<${LabeledNotice} key=${it.id} label="⚙ System" text=${it.text} color=${C.muted} 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;
     }
   };
 
-  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');
+  // §8: progressive path shortening — reserve space for right section
+  const footerRightEstLen = (modelLabel.length || 0) + (tokenLabel.length || 0) + 8;
+  const cwdMaxLen = Math.max(12, cols - footerRightEstLen - (branch ? branch.length + 6 : 0) - 4);
+  const cwd = shortenPath(process.cwd(), cwdMaxLen);
   const footerLeft = [cwd, branch ? `${glyphs.gitBranch}${branch}` : null].filter(Boolean).join('  ');
   const footerRight = hint
     ? hint
@@ -1328,7 +1822,7 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
             <${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} ts=${startedAt || Date.now()} />` : null}
+            ${live.text ? html`<${AssistantMessage} text=${live.text} cols=${cols} ts=${startedAt || Date.now()} streaming=${true} />` : null}
             <${Thinking} label=${live.reply ? 'Planning' : live.text ? 'Responding' : 'Working'} startedAt=${startedAt} />
           <//>`
         : null}
@@ -1342,9 +1836,34 @@ 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
+      ${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) =>
@@ -1352,7 +1871,7 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
                 <${Text} color=${C.slash}>${c.cmd.padEnd(24)}<//>
                 <${Text} color=${C.muted}>${c.desc}<//>
               <//>`)}
-            \n<${Text} color=${C.muted}>${tabPanel.hint}<//>
+            \n<${Text} color=${C.muted}>${tabPanel.hint} · Press Enter to return to Session · Press c to start a #reference<//>
           <//>`
         : null}
 
@@ -1361,6 +1880,8 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
       <${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}
@@ -1368,14 +1889,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)}
-              width=${cols}
+              blocked=${Boolean(choice || search || sessionPicker || diffState || !trusted)}
+              width=${Math.max(60, cols)}
               mode=${composerMode}
+              activeTab=${activeTab}
+              presetText=${composerPreset.text}
+              presetToken=${composerPreset.token}
               clearToken=${composerClearToken}
             />`}