ispbills-icli 8.5.5 → 8.5.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ispbills-icli",
-  "version": "8.5.5",
+  "version": "8.5.6",
   "description": "iCli — IspBills AI network engineer in your terminal",
   "keywords": [
     "ispbills",

package/src/session.js

@@ -1,9 +1,50 @@
-import { appendFileSync, existsSync, mkdirSync, readdirSync, readFileSync } from 'fs';
+import { existsSync, mkdirSync, readdirSync, readFileSync, statSync, unlinkSync, writeFileSync } from 'fs';
 import { homedir } from 'os';
 import { join } from 'path';
 
 const SESSION_DIR = join(homedir(), '.config', 'ispbills-icli', 'sessions');
 
+function safeJson(raw, fallback = null) {
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return fallback;
+  }
+}
+
+function normalizeMessages(messages = []) {
+  return messages
+    .filter((m) => m && typeof m.role === 'string')
+    .map((m) => ({ role: m.role, content: String(m.content ?? '') }));
+}
+
+function autoNameFromMessages(messages = []) {
+  const firstUser = messages.find((m) => m?.role === 'user' && String(m.content || '').trim());
+  const text = String(firstUser?.content || '').replace(/\s+/g, ' ').trim();
+  if (!text) return 'Untitled session';
+  return text.slice(0, 40).trim();
+}
+
+function normalizeSession(session = {}) {
+  const now = new Date().toISOString();
+  const messages = normalizeMessages(session.messages);
+  const id = String(session.id || Date.now().toString(36));
+  return {
+    id,
+    name: String(session.name || autoNameFromMessages(messages) || 'Untitled session'),
+    cwd: String(session.cwd || process.cwd()),
+    branch: String(session.branch || ''),
+    model: String(session.model || ''),
+    createdAt: session.createdAt || now,
+    updatedAt: session.updatedAt || now,
+    messages,
+  };
+}
+
+function sessionPathFor(id) {
+  return join(SESSION_DIR, `${id}.json`);
+}
+
 export function sessionDir() {
   return SESSION_DIR;
 }
@@ -12,30 +53,105 @@ export function initSessionDir() {
   if (!existsSync(SESSION_DIR)) mkdirSync(SESSION_DIR, { recursive: true });
 }
 
-export function newSessionPath() {
-  const id = new Date().toISOString().replace(/[:.]/g, '-');
-  return join(SESSION_DIR, `${id}.jsonl`);
+export function saveSession(session) {
+  try {
+    initSessionDir();
+    const existing = loadSessionById(session?.id);
+    const normalized = normalizeSession({
+      ...existing,
+      ...session,
+      id: session?.id || existing?.id,
+      createdAt: session?.createdAt || existing?.createdAt,
+      updatedAt: new Date().toISOString(),
+      name: session?.name || existing?.name,
+    });
+    if (!normalized.name || normalized.name === 'Untitled session') {
+      normalized.name = autoNameFromMessages(normalized.messages);
+    }
+    writeFileSync(sessionPathFor(normalized.id), JSON.stringify(normalized, null, 2) + '\n');
+    return normalized;
+  } catch {
+    return null;
+  }
 }
 
-/** Append a single message to the JSONL session log (best-effort). */
-export function saveMessage(sessionPath, message) {
+export function loadSessionById(id) {
+  if (!id) return null;
+  const path = sessionPathFor(id);
+  if (!existsSync(path)) return null;
+  const loaded = safeJson(readFileSync(path, 'utf8'), null);
+  return loaded ? normalizeSession(loaded) : null;
+}
+
+export function deleteSession(id) {
   try {
-    appendFileSync(sessionPath, JSON.stringify({ timestamp: new Date().toISOString(), message }) + '\n');
+    const path = sessionPathFor(id);
+    if (!existsSync(path)) return false;
+    unlinkSync(path);
+    return true;
   } catch {
-    /* non-fatal — session logging is a convenience only */
+    return false;
   }
 }
 
-export function listSessions() {
+export function listSessionsDetailed() {
   if (!existsSync(SESSION_DIR)) return [];
-  return readdirSync(SESSION_DIR).filter((f) => f.endsWith('.jsonl')).sort();
+  return readdirSync(SESSION_DIR)
+    .filter((f) => f.endsWith('.json'))
+    .map((file) => {
+      const full = join(SESSION_DIR, file);
+      const session = safeJson(readFileSync(full, 'utf8'), null);
+      if (!session) return null;
+      const normalized = normalizeSession(session);
+      const stats = statSync(full);
+      return {
+        id: normalized.id,
+        name: normalized.name || autoNameFromMessages(normalized.messages),
+        cwd: normalized.cwd,
+        branch: normalized.branch,
+        model: normalized.model,
+        createdAt: normalized.createdAt,
+        updatedAt: normalized.updatedAt,
+        messageCount: normalized.messages.length,
+        messages: normalized.messages,
+        mtimeMs: stats.mtimeMs,
+      };
+    })
+    .filter(Boolean)
+    .sort((a, b) => new Date(b.updatedAt || 0).getTime() - new Date(a.updatedAt || 0).getTime());
 }
 
-export function loadSession(sessionPath) {
-  if (!existsSync(sessionPath)) return [];
-  return readFileSync(sessionPath, 'utf-8')
-    .split('\n')
-    .filter(Boolean)
-    .map((line) => { try { return JSON.parse(line).message; } catch { return null; } })
-    .filter(Boolean);
+export function loadMostRecent() {
+  const [session] = listSessionsDetailed();
+  if (!session?.id) return null;
+  return loadSessionById(session.id);
+}
+
+export function listSessions() {
+  return listSessionsDetailed().map((s) => s.id);
+}
+
+export function loadSession(sessionPathOrId) {
+  if (!sessionPathOrId) return [];
+  if (sessionPathOrId.endsWith?.('.json')) {
+    const session = safeJson(readFileSync(sessionPathOrId, 'utf8'), null);
+    return normalizeSession(session || {}).messages;
+  }
+  return loadSessionById(sessionPathOrId)?.messages || [];
+}
+
+export function newSessionPath() {
+  initSessionDir();
+  return sessionPathFor(Date.now().toString(36));
+}
+
+export function saveMessage(sessionPathOrId, message) {
+  if (!message) return null;
+  const id = String(sessionPathOrId || Date.now().toString(36)).replace(/\.json$/, '');
+  const existing = loadSessionById(id);
+  return saveSession({
+    ...(existing || {}),
+    id,
+    messages: [...(existing?.messages || []), message],
+  });
 }

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';
@@ -114,14 +236,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 +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 {}
@@ -168,15 +306,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 +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);
@@ -220,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; }
@@ -313,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;
@@ -321,9 +546,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 +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,
@@ -387,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));
@@ -444,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) {
@@ -473,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);
@@ -499,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
@@ -522,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)`,
@@ -533,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') {
@@ -569,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;
@@ -588,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);
@@ -606,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;
     }
@@ -655,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 ')) {
@@ -1078,6 +1329,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 +1350,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 +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;
@@ -1138,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; }
@@ -1171,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');
@@ -1201,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();
@@ -1215,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];
@@ -1251,7 +1652,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 +1664,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 +1676,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,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;
@@ -1299,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
@@ -1342,9 +1745,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 +1780,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 +1789,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 +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}
             />`}
 

package/src/tui/components.js

@@ -16,20 +16,51 @@ const LOGO = [
 ];
 
 const HELP_ROWS = [
-  ['Shift+Tab', 'cycle ask / plan / autopilot'],
-  ['Ctrl+S', 'run while preserving input'],
-  ['Ctrl+Enter / Ctrl+Q', 'queue follow-up while busy'],
-  ['Ctrl+G', 'edit prompt in external editor'],
-  ['Ctrl+F', 'search timeline'],
-  ['Ctrl+O / Ctrl+E', 'expand recent / all timeline items'],
-  ['Ctrl+T', 'toggle reasoning'],
-  ['Ctrl+R', 'reverse-search input history'],
-  ['Ctrl+V', 'paste attachment help'],
-  ['Ctrl+Z', 'suspend to background'],
-  ['!', 'shell command / shell mode'],
-  ['?', 'quick help overlay'],
-  ['@mention', 'insert ISP entities'],
-  ['#123', 'reference customer / ticket id'],
+  '┌─────────────────────────────────────────────────────────┐',
+  '│  iCLI — QUICK REFERENCE                                 │',
+  '├────────────────────┬────────────────────────────────────┤',
+  '│  LAUNCH            │  icli [--banner] [--experimental]  │',
+  '│  ONE-SHOT          │  icli -p "prompt" [--allow-all]    │',
+  '│  RESUME LAST       │  icli --continue                   │',
+  '├────────────────────┼────────────────────────────────────┤',
+  '│  CYCLE MODES       │  Shift+Tab                         │',
+  '│  CANCEL            │  Esc  (or Ctrl+C once)            │',
+  '│  EXIT              │  Ctrl+C twice  or  /exit          │',
+  '│  SHUTDOWN          │  Ctrl+D                           │',
+  '│  CLEAR SCREEN      │  Ctrl+L                           │',
+  '│  CLEAR HISTORY     │  /clear                           │',
+  '├────────────────────┼────────────────────────────────────┤',
+  '│  REASONING         │  Ctrl+T                           │',
+  '│  EXPAND RECENT     │  Ctrl+O                           │',
+  '│  EXPAND ALL        │  Ctrl+E                           │',
+  '│  TIMELINE SEARCH   │  Ctrl+F                           │',
+  '│  PAGE SCROLL       │  Page Up / Page Down              │',
+  '├────────────────────┼────────────────────────────────────┤',
+  '│  FILE MENTION      │  @path/to/file                    │',
+  '│  ISP REFERENCE     │  #NUMBER                          │',
+  '│  SHELL BYPASS      │  !command                         │',
+  '│  QUICK HELP        │  ?  (empty input)                 │',
+  '│  EXTERNAL EDITOR   │  Ctrl+G                           │',
+  '│  PASTE ATTACHMENT  │  Ctrl+V                           │',
+  '│  QUEUE MESSAGE     │  Ctrl+Enter  while busy           │',
+  '├────────────────────┼────────────────────────────────────┤',
+  '│  LINE START/END    │  Ctrl+A / Ctrl+E                  │',
+  '│  WORD JUMP         │  Alt+← / Alt+→                    │',
+  '│  DELETE WORD       │  Ctrl+W                           │',
+  '│  DELETE TO END     │  Ctrl+K                           │',
+  '│  DELETE TO START   │  Ctrl+U                           │',
+  '│  HISTORY NAV       │  ↑ / ↓                            │',
+  '│  ACCEPT MENU       │  Tab                              │',
+  '│  MULTILINE INPUT   │  Shift+Enter                      │',
+  '├────────────────────┼────────────────────────────────────┤',
+  '│  MODEL             │  /model                           │',
+  '│  CONTEXT / USAGE   │  /context  or  /usage             │',
+  '│  COMPACT HISTORY   │  /compact [focus]                 │',
+  '│  DIFF VIEW         │  /diff                            │',
+  '│  SESSION INFO      │  /session                         │',
+  '│  RESUME SESSION    │  /resume                          │',
+  '│  HELP              │  /help                            │',
+  '└────────────────────┴────────────────────────────────────┘',
 ];
 
 function formatTs(ts) {
@@ -39,6 +70,21 @@ function formatTs(ts) {
   } catch {
     return '';
   }
+
+  function formatDate(ts) {
+    if (!ts) return '';
+    try {
+      return new Date(ts).toLocaleString([], {
+        year: 'numeric',
+        month: 'short',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+      });
+    } catch {
+      return '';
+    }
+  }
 }
 
 function SpeakerLine({ label, color, cols = 80, ts, rightLabel = '' }) {
@@ -310,14 +356,24 @@ export function Notice({ text, color = C.gray }) {
   return html`<${Box} marginTop=${1}><${Text} color=${color}>${text}<//><//>`;
 }
 
+export function LabeledNotice({ label, text, color = C.gray, cols = 80, ts, bodyColor = C.white }) {
+  return html`
+    <${Box} flexDirection="column" marginTop=${1}>
+      <${Sep} cols=${cols} />
+      <${SpeakerLine} label=${label} color=${color} cols=${cols} ts=${ts} />
+      <${Box} paddingX=${2}>
+        <${Text} color=${bodyColor}>${text}<//>
+      <//>
+    <//>`;
+}
+
 export function HelpOverlay({ cols = 80, ts }) {
   return html`
     <${Box} flexDirection="column" marginTop=${1} borderStyle=${borderStyle()} borderColor=${C.accent} paddingX=${1} width=${cols}>
       <${SpeakerLine} label="? Help" color=${C.accent} cols=${Math.max(10, cols - 2)} ts=${ts} />
-      ${HELP_ROWS.map(([key, desc]) => html`
-        <${Box} key=${key} paddingX=${1}>
-          <${Text} color=${C.success} bold>${key.padEnd(22)}<//>
-          <${Text} color=${C.muted}>${desc}<//>
+      ${HELP_ROWS.map((line, i) => html`
+        <${Box} key=${'help-' + i} paddingX=${1}>
+          <${Text} color=${i === 0 || i === HELP_ROWS.length - 1 || /├|┬|┴/.test(line) ? C.muted : C.white}>${line}<//>
         <//>`)}
     <//>`;
 }
@@ -341,6 +397,62 @@ export function SearchOverlay({ query = '', matches = [], active = 0, cols = 80
     <//>`;
 }
 
+export function SessionPicker({ sessions = [], sel = 0, cols = 80, sort = 'relevance' }) {
+  return html`
+    <${Box} flexDirection="column" marginTop=${1} borderStyle=${borderStyle()} borderColor=${C.accent} paddingX=${1} width=${cols}>
+      <${Text} color=${C.accent} bold>${glyphs.arrow} Resume session<//>
+      <${Text} color=${C.muted}>Sort: ${sort}  ·  Enter open  ·  d delete  ·  s sort  ·  Esc close<//>
+      <${Box} marginTop=${1}>
+        <${Text} color=${C.muted} bold>${'Name'.padEnd(24)} ${'Path'.padEnd(Math.max(12, cols - 54))} ${'Updated'.padEnd(18)} Msgs<//>
+      <//>
+      ${sessions.length
+        ? sessions.map((session, i) => {
+            const on = i === sel;
+            const name = String(session.name || 'Untitled session').slice(0, 24).padEnd(24);
+            const path = String(session.cwd || '').slice(0, Math.max(12, cols - 54)).padEnd(Math.max(12, cols - 54));
+            const updated = formatDate(session.updatedAt).slice(0, 18).padEnd(18);
+            return html`
+              <${Box} key=${session.id}>
+                <${Text} color=${on ? C.accent : C.muted}>${on ? glyphs.prompt + ' ' : '  '}<//>
+                <${Text} color=${on ? C.white : C.brand} bold=${on}>${name}<//>
+                <${Text} color=${C.muted}> ${path} ${updated} ${String(session.messageCount || 0).padStart(4)}<//>
+              <//>`;
+          })
+        : html`<${Text} color=${C.muted}>No saved sessions.<//>`}
+    <//>`;
+}
+
+export function DiffViewer({ diff = [], sel = 0, staged = false, whitespace = false, cols = 80, height = 18, commentCount = 0 }) {
+  const maxVisible = Math.max(6, height);
+  const start = Math.max(0, Math.min(sel - Math.floor(maxVisible / 2), Math.max(0, diff.length - maxVisible)));
+  const visible = diff.slice(start, start + maxVisible);
+  return html`
+    <${Box} flexDirection="column" marginTop=${1} borderStyle=${borderStyle()} borderColor=${C.accent} paddingX=${1} width=${cols}>
+      <${Text} color=${C.accent} bold>${glyphs.expand} Diff viewer<//>
+      <${Text} color=${C.muted}>${staged ? 'staged (git diff --cached)' : 'unstaged (git diff)'}  ·  whitespace ${whitespace ? 'ignored' : 'shown'}  ·  comments ${commentCount}<//>
+      ${visible.map((line, i) => {
+        const idx = start + i;
+        const on = idx === sel;
+        const prefix = String(line.content || '').slice(0, Math.max(1, cols - 6));
+        const color = line.type === 'add'
+          ? C.success
+          : line.type === 'del'
+          ? C.error
+          : line.type === 'header'
+          ? C.accent
+          : line.type === 'hunk'
+          ? C.muted
+          : C.white;
+        return html`
+          <${Box} key=${String(idx) + prefix}>
+            <${Text} color=${on ? C.warning : C.muted}>${on ? glyphs.prompt + ' ' : '  '}<//>
+            <${Text} color=${color} bold=${line.type === 'header'} inverse=${on}>${prefix}<//>
+          <//>`;
+      })}
+      <${Text} color=${C.muted}>j/k move  PgUp/PgDn scroll  h/l file  g/G ends  b staged  w whitespace  c comment  Enter submit  Esc close<//>
+    <//>`;
+}
+
 export function Thinking({ label = 'Working', startedAt }) {
   const [, tick] = useState(0);
   useEffect(() => {

package/src/tui/composer.js

@@ -85,11 +85,15 @@ export function Composer({
   onSearch,
   onNotice,
   onEmptyEsc,
+  onActivateSession,
   onValueChange,
   busy,
   blocked = false,
   width = 80,
   mode = 'ask',
+  activeTab = 'session',
+  presetText = '',
+  presetToken = 0,
   clearToken = 0,
 }) {
   const [value, setValue] = useState('');
@@ -124,6 +128,16 @@ export function Composer({
     setHistSearchSel(0);
   }, [clearToken]);
 
+  useEffect(() => {
+    if (!presetToken) return;
+    setValue(String(presetText || ''));
+    setCursor(String(presetText || '').length);
+    setHistIdx(-1);
+    setHistSearch(false);
+    setHistSearchQ('');
+    setHistSearchSel(0);
+  }, [presetText, presetToken]);
+
   useEffect(() => {
     onValueChange?.(value);
   }, [value, onValueChange]);
@@ -222,6 +236,10 @@ export function Composer({
     }
     if (blocked) return;
     if (busy) return;
+    if (activeTab !== 'session' && enter) {
+      onActivateSession?.();
+      return;
+    }
 
     if (histSearch) {
       if (key.escape) { setHistSearch(false); setHistSearchQ(''); setHistSearchSel(0); return; }
@@ -465,6 +483,7 @@ export function Composer({
 
       <${Box} width=${width} paddingX=${1}>
         <${Text} color=${promptColor} bold>${promptGlyph} <//>
+        ${busy ? html`<${Text} color=${C.muted}>(working…) <//>` : null}
         ${modePrefix ? html`<${Text} color=${mode === 'shell' ? C.warning : C.accent} bold>${modePrefix}<//>` : null}
         ${empty
           ? html`<${Box} flexGrow=${1}>