ispbills-icli 8.6.9 → 8.7.0

package/package.json

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

package/src/auth.js

@@ -2,6 +2,40 @@ import * as readline from 'readline/promises';
 import { stdin as input, stdout as output } from 'process';
 import { saveConfig } from './config.js';
 
+/** Read a password from stdin without echoing characters. */
+async function readPasswordHidden(prompt) {
+  return new Promise((resolve) => {
+    output.write(prompt);
+    let pass = '';
+    const onData = (ch) => {
+      if (ch === '\r' || ch === '\n') {
+        input.setRawMode(false);
+        input.removeListener('data', onData);
+        output.write('\n');
+        resolve(pass);
+      } else if (ch === '\u0003') {
+        input.setRawMode(false);
+        process.exit(1);
+      } else if (ch === '\u007f' || ch === '\b') {
+        if (pass.length > 0) pass = pass.slice(0, -1);
+      } else {
+        pass += ch;
+      }
+    };
+    try {
+      input.setRawMode(true);
+      input.resume();
+      input.setEncoding('utf8');
+      input.on('data', onData);
+    } catch {
+      // fallback: readline without masking (non-TTY env)
+      input.removeListener('data', onData);
+      const rl2 = readline.createInterface({ input, output });
+      rl2.question(prompt, (ans) => { rl2.close(); resolve(ans); });
+    }
+  });
+}
+
 export async function loginFlow(existingUrl = '') {
   const rl = readline.createInterface({ input, output });
 
@@ -16,11 +50,11 @@ export async function loginFlow(existingUrl = '') {
   url = url.replace(/\/$/, '');
   if (!/^https?:\/\//i.test(url)) url = 'https://' + url;
 
-  const email    = (await rl.question('Email: ')).trim();
-  const password = await rl.question('Password: ');
-
+  const email = (await rl.question('Email: ')).trim();
   rl.close();
 
+  const password = await readPasswordHidden('Password: ');
+
   const res = await fetch(`${url}/api/v1/auth/login`, {
     method:  'POST',
     headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
@@ -44,15 +78,21 @@ export async function loginFlow(existingUrl = '') {
 }
 
 export async function refreshToken(cfg) {
-  const res = await fetch(`${cfg.url}/api/v1/auth/refresh`, {
-    method:  'POST',
-    headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
-    body:    JSON.stringify({ refresh_token: cfg.refresh_token }),
-  });
-  if (!res.ok) return null;
-  const data = await res.json();
-  cfg.token         = data.token;
-  cfg.refresh_token = data.refresh_token;
-  saveConfig(cfg);
-  return cfg;
+  try {
+    const res = await fetch(`${cfg.url}/api/v1/auth/refresh`, {
+      method:  'POST',
+      headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
+      body:    JSON.stringify({ refresh_token: cfg.refresh_token }),
+    });
+    if (!res.ok) return null;
+    const data = await res.json().catch(() => null);
+    if (!data?.token) return null;
+    cfg.token         = data.token;
+    cfg.refresh_token = data.refresh_token;
+    saveConfig(cfg);
+    return cfg;
+  } catch {
+    return null;
+  }
 }
+

package/src/gitrepo.js

@@ -42,13 +42,16 @@ function run(cfg, args, { input } = {}) {
 export async function ensureRepo(cfg) {
   const dir = repoDir(cfg);
   if (!existsSync(join(dir, '.git'))) {
-    await run(cfg, ['init', '-q']);
+    const init = await run(cfg, ['init', '-q']);
+    if (init.code !== 0) throw new Error(`git init failed: ${init.stderr.trim()}`);
     await run(cfg, ['config', 'user.name', cfg?.user?.name || 'IspBills operator']);
     await run(cfg, ['config', 'user.email', cfg?.user?.email || 'operator@ispbills.local']);
     await run(cfg, ['config', 'commit.gpgsign', 'false']);
     writeFileSync(join(dir, 'README.md'), '# IspBills device backups\n\nManaged by iCli (`/backup`, `/git`).\n');
-    await run(cfg, ['add', 'README.md']);
-    await run(cfg, ['commit', '-q', '-m', 'Initialise backup repository']);
+    const add = await run(cfg, ['add', 'README.md']);
+    if (add.code !== 0) throw new Error(`git add failed: ${add.stderr.trim()}`);
+    const commit = await run(cfg, ['commit', '-q', '-m', 'Initialise backup repository']);
+    if (commit.code !== 0) throw new Error(`git commit failed: ${commit.stderr.trim()}`);
   }
   return dir;
 }

package/src/session.js

@@ -134,8 +134,12 @@ export function listSessions() {
 export function loadSession(sessionPathOrId) {
   if (!sessionPathOrId) return [];
   if (sessionPathOrId.endsWith?.('.json')) {
-    const session = safeJson(readFileSync(sessionPathOrId, 'utf8'), null);
-    return normalizeSession(session || {}).messages;
+    try {
+      const session = safeJson(readFileSync(sessionPathOrId, 'utf8'), null);
+      return normalizeSession(session || {}).messages;
+    } catch {
+      return [];
+    }
   }
   return loadSessionById(sessionPathOrId)?.messages || [];
 }

package/src/tui/app.js

@@ -2,10 +2,11 @@
 import { html, useState, useEffect, useRef, useCallback } from './dom.js';
 import { Box, Text, useStdout, useApp, useInput } from 'ink';
 import { C, glyphs, midDot, dash } from './theme.js';
+import { useMouse } from './mouse.js';
 import {
   Banner, TabBar, FollowupChips, UserMessage, AssistantMessage, StatusLines, Reasoning,
   Plan, Connect, Notice, Thinking, Choice, ShellOutput, SearchOverlay, HelpOverlay,
-  SessionPicker, DiffViewer, LabeledNotice,
+  SessionPicker, DiffViewer, LabeledNotice, TABS, TAB_W,
 } from './components.js';
 import { Composer } from './composer.js';
 import { streamChat } from '../client.js';
@@ -243,15 +244,15 @@ function itemHeight(it, cols = 80) {
   const w = Math.max(1, cols - 4); // paddingX + body inset
   switch (it.type) {
     case 'user':
-      return 3 + wrappedLines(it.text, w); // sep + speaker + margin + body
+      return 2 + wrappedLines(it.text, w); // marginTop + speaker + body
     case 'assistant':
-      return 3 + wrappedLines(it.text, Math.min(w, 96));
+      return 2 + wrappedLines(it.text, Math.min(w, 96));
     case 'shell':
-      return 4 + wrappedLines(it.output || '(no output)', w) + 1;
+      return 3 + wrappedLines(it.output || '(no output)', w) + 1;
     case 'plan':
-      return 4 + (it.reply?.steps?.length || 0);
+      return 3 + (it.reply?.steps?.length || 0);
     case 'connect':
-      return 5;
+      return 4;
     case 'activity':
       return 1 + (it.status?.length || 0);
     case 'notice':
@@ -295,7 +296,7 @@ function liveAreaHeight(live, cols = 80, showReasoning = false) {
   if (!live) return 0;
   const w = Math.max(1, cols - 4);
   let h = 2; // thinking line + margin
-  if (live.text) h += 3 + wrappedLines(live.text, Math.min(w, 96));
+  if (live.text) h += 2 + wrappedLines(live.text, Math.min(w, 96));
   if (live.reasoning) h += showReasoning ? 2 + wrappedLines(live.reasoning, w) : 1;
   if (live.reply?.steps) h += 3 + live.reply.steps.length;
   if (live.status?.length) h += 1 + live.status.length;
@@ -362,6 +363,35 @@ const TAB_CONTENT = {
   },
 };
 
+function TabView({ panel, cols, activeTab }) {
+  const descriptions = {
+    devices: 'ISP device management — status, diagnostics, reachability',
+    maps: 'Network topology — VLAN, routing, IP planning, topology',
+    alarms: 'Real-time monitoring — alarms, offline devices, optical levels',
+  };
+  const desc = descriptions[activeTab] || '';
+  const bw = cols - 4;
+  return html`
+    <${Box} flexDirection="column" paddingX=${2} paddingY=${1}>
+      <${Box} marginBottom=${1}>
+        <${Text} color=${C.brand} bold>${panel.title}<//><${Text} color=${C.muted}>  ${desc}<//>
+      <//>
+      <${Text} color=${C.separator}>${'─'.repeat(Math.max(1, bw))}<//>
+      <${Box} flexDirection="column" marginTop=${1}>
+        ${panel.commands.map((c, i) => html`
+          <${Box} key=${i}>
+            <${Text} color=${C.accent} bold>${String(i + 1).padStart(2)}. <//>
+            <${Text} color=${C.slash}>${c.cmd.padEnd(26)}<//>
+            <${Text} color=${C.muted}>${c.desc.slice(0, Math.max(10, cols - 38))}<//>
+          <//>`)}
+      <//>
+      <${Text} color=${C.separator} dimColor>${'─'.repeat(Math.max(1, bw))}<//>
+      <${Box} marginTop=${1}>
+        <${Text} color=${C.muted} dimColor>${panel.hint}<//><${Text} color=${C.muted} dimColor>  ${midDot()}  o open in browser<//><${Text} color=${C.muted} dimColor>  ${midDot()}  c/Enter → Session<//>
+      <//>
+    <//>`;
+}
+
 export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, showBanner = true, agentName, resumeMode }) {
   const { exit } = useApp();
   const initialResumeRef = useRef(undefined);
@@ -377,11 +407,6 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
   const { cols, rows } = useTerminalSize();
   const colsRef = useRef(cols);
   useEffect(() => { colsRef.current = cols; }, [cols]);
-  // Fixed-height viewport: total rows minus chrome (tabbar + spacing + chips +
-  // composer + footer). Everything else scrolls inside this region.
-  const viewportRows = Math.max(3, rows - 6);
-  const scrollPage = Math.max(4, viewportRows - 2);
-
   const [items, setItems] = useState(() => renderConversationItems(initialMessages, cols));
   const [live, setLive] = useState(null);
   const [busy, setBusy] = useState(false);
@@ -407,6 +432,11 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
   const [trusted, setTrusted] = useState(isTrustedDir(cfg, process.cwd()));
   const [sessionPicker, setSessionPicker] = useState(null);
   const [diffState, setDiffState] = useState(null);
+  const chipsRows = (!busy && chips.length && !choice && !search && !sessionPicker && !diffState) ? 1 : 0;
+  const composerRows = 2;
+  const chromeRows = 2 + composerRows + 1 + chipsRows + 1;
+  const viewportRows = Math.max(3, rows - chromeRows);
+  const scrollPage = Math.max(4, viewportRows - 2);
 
   const convo = useRef(initialMessages);
   const plain = useRef([]);
@@ -427,6 +457,23 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
   const sessionCreatedAtRef = useRef(initialSession?.createdAt || new Date().toISOString());
   const sessionNameRef = useRef(initialSession?.name || sessionAutoName(initialMessages));
 
+  useMouse(({ btn, x, y, press }) => {
+    if (!press) return;
+    if (y <= 1 && btn === 0) {
+      const idx = Math.floor(x / TAB_W);
+      if (idx >= 0 && idx < TABS.length) {
+        setActiveTab(TABS[idx].id);
+        return;
+      }
+    }
+    if (choice || search || sessionPicker || diffState) return;
+    if (btn === 64) {
+      setScrollOffset((n) => Math.min(maxScrollRef.current, n + 3));
+    } else if (btn === 65) {
+      setScrollOffset((n) => Math.max(0, n - 3));
+    }
+  });
+
   useEffect(() => {
     try { process.stdout.write('\x1b[?2004h'); } catch {}
     return () => { try { process.stdout.write('\x1b[?2004l'); } catch {} };
@@ -1197,7 +1244,10 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
         '    Ctrl+Home / End  jump to start/end\n' +
         '    Ctrl+D           shutdown\n' +
         '    Ctrl+C × 2       exit\n' +
-        '    Esc              cancel / exit mode\n'
+        '    Esc              cancel / exit mode\n' +
+        '\n  Web commands:\n' +
+        '    /search QUERY     Web search (DuckDuckGo instant answers)\n' +
+        '    /fetch URL        Fetch and display a web page\n'
       );
       return;
     }
@@ -1387,7 +1437,7 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
         '  research      — Deep research across codebase, repos, web with citations',
         '  rubber-duck   — Constructive critic; consulted automatically on non-trivial tasks',
         '',
-        'Use: /rubber-duck [prompt] · /research TOPIC · /fleet [prompt]',
+        'Use: /search QUERY · /fetch URL · /rubber-duck [prompt] · /research TOPIC · /fleet [prompt]',
       ].join('\n'));
       return;
     }
@@ -1429,6 +1479,68 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
       runTurn(`Play the role of a rubber-duck reviewer. Give a second opinion on the following, focusing on what could go wrong, what's missing, and what risks exist. Be concise and high-signal.${context ? context : ' ' + (prompt || 'Review our conversation so far.')}`);
       return;
     }
+    if (q === '/search' || q.startsWith('/search ')) {
+      const query = q.slice('/search'.length).trim();
+      if (!query) { pushNotice('Usage: /search QUERY', C.warning); return; }
+      pushNotice(`Searching: ${query}…`, C.muted, true);
+      (async () => {
+        try {
+          const url = `https://api.duckduckgo.com/?q=${encodeURIComponent(query)}&format=json&no_redirect=1&no_html=1&skip_disambig=1`;
+          const res = await fetch(url, { headers: { 'User-Agent': 'ispbills-icli/8.6.10' } });
+          const data = await res.json();
+          const lines = [];
+          if (data.AbstractText) lines.push(`**${data.Heading}**\n\n${data.AbstractText}\n\nSource: ${data.AbstractURL}`);
+          if (data.RelatedTopics?.length) {
+            lines.push('\n**Related:**');
+            data.RelatedTopics.slice(0, 5).forEach((t) => {
+              if (t.Text) lines.push(`- ${t.Text}`);
+            });
+          }
+          if (!lines.length) lines.push(`No instant results. Try: /research ${query}`);
+          push({ type: 'assistant', text: lines.join('\n') });
+        } catch (err) {
+          push({ type: 'error', text: `Search failed: ${err.message}` });
+        }
+      })();
+      return;
+    }
+    if (q === '/fetch' || q.startsWith('/fetch ')) {
+      const rawUrl = q.slice('/fetch'.length).trim();
+      if (!rawUrl) { pushNotice('Usage: /fetch URL', C.warning); return; }
+      const fetchUrl = rawUrl.startsWith('http') ? rawUrl : `https://${rawUrl}`;
+      pushNotice(`Fetching ${fetchUrl}…`, C.muted, true);
+      (async () => {
+        try {
+          const res = await fetch(fetchUrl, {
+            headers: { 'User-Agent': 'ispbills-icli/8.6.10', 'Accept': 'text/html,text/plain,*/*' },
+            redirect: 'follow',
+            signal: AbortSignal.timeout(15000),
+          });
+          if (!res.ok) throw new Error(`HTTP ${res.status} ${res.statusText}`);
+          const ct = res.headers.get('content-type') || '';
+          const text = await res.text();
+          let content;
+          if (ct.includes('json')) {
+            try { content = '```json\n' + JSON.stringify(JSON.parse(text), null, 2).slice(0, 4000) + '\n```'; }
+            catch { content = text.slice(0, 4000); }
+          } else {
+            content = text
+              .replace(/<script[\s\S]*?<\/script>/gi, '')
+              .replace(/<style[\s\S]*?<\/style>/gi, '')
+              .replace(/<[^>]+>/g, ' ')
+              .replace(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&nbsp;/g, ' ').replace(/&#?\w+;/g, '')
+              .replace(/[ \t]{2,}/g, ' ')
+              .replace(/\n{3,}/g, '\n\n')
+              .trim()
+              .slice(0, 5000);
+          }
+          push({ type: 'assistant', text: `**${fetchUrl}**\n\n${content}` });
+        } catch (err) {
+          push({ type: 'error', text: `Fetch failed: ${err.message}` });
+        }
+      })();
+      return;
+    }
     if (q === '/research' || q.startsWith('/research ')) {
       const topic = q.slice('/research'.length).trim();
       if (!topic) { pushNotice('Usage: /research TOPIC'); return; }
@@ -1541,7 +1653,7 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
       return;
     }
     if (q === '/app') {
-      pushNotice('Launching GitHub Copilot desktop app… (stub — install from github.com/github/copilot-for-desktop)', C.muted);
+      pushNotice('iCopilot web app — open your IspBills instance in the browser with /o or by typing the URL.', C.muted);
       return;
     }
     if (q === '/user' || q.startsWith('/user ')) {
@@ -1894,7 +2006,7 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
     }
     if (key.ctrl && input === 't') { setShowReasoning((v) => !v); return; }
     if (key.ctrl && input === 'l' && !busy) { clearAll(); return; }
-    if (key.ctrl && input === 'f' && !busy) { openSearch(); return; }
+    if (key.ctrl && input === 'f' && !busy && !composerText.trim()) { openSearch(); return; }
     if (key.ctrl && input === 'o' && !busy && !composerText.trim()) { showExpanded('recent items', items.slice(-5)); return; }
     if (key.ctrl && input === 'e' && !busy && !composerText.trim()) { showExpanded('all items', items); return; }
     if (key.ctrl && input === 'n' && chips.length) { setActiveChip((i) => (i + 1) % chips.length); return; }
@@ -1904,6 +2016,25 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
         const tabs = ['session', 'devices', 'maps', 'alarms'];
         return tabs[(tabs.indexOf(t) + 1) % tabs.length];
       });
+      return;
+    }
+    // ←/→ arrow tab switching when the composer is empty (no cursor to move).
+    // The outer early-return already guards against choice/search/sessionPicker/diffState.
+    if (!composerText.trim()) {
+      if (key.leftArrow) {
+        setActiveTab((t) => {
+          const tabs = ['session', 'devices', 'maps', 'alarms'];
+          return tabs[(tabs.indexOf(t) - 1 + tabs.length) % tabs.length];
+        });
+        return;
+      }
+      if (key.rightArrow) {
+        setActiveTab((t) => {
+          const tabs = ['session', 'devices', 'maps', 'alarms'];
+          return tabs[(tabs.indexOf(t) + 1) % tabs.length];
+        });
+        return;
+      }
     }
     // Alt+↑/↓ for viewport scrolling (alternative to PgUp/PgDn)
     if (key.meta && key.upArrow && !choice && !search && !sessionPicker && !diffState) {
@@ -1936,7 +2067,7 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
     const c = it.cols || 80;
     switch (it.type) {
       case 'user': return html`<${UserMessage} key=${it.id} text=${it.text} cols=${c} ts=${it.ts} />`;
-      case 'assistant': return html`<${AssistantMessage} key=${it.id} text=${it.text} cols=${c} />`;
+      case 'assistant': return html`<${AssistantMessage} key=${it.id} text=${it.text} cols=${c} ts=${it.ts} />`;
       case 'plan': return html`<${Plan} key=${it.id} reply=${it.reply} />`;
       case 'connect': return html`<${Connect} key=${it.id} reply=${it.reply} />`;
       case 'activity': return html`<${StatusLines} key=${it.id} lines=${it.status} busy=${false} />`;
@@ -1958,7 +2089,7 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
   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 footerLeft = [cwd, branch ? `${glyphs.gitBranch}${branch}` : null].filter(Boolean).join(midDot());
   const footerRight = hint
     ? hint
     : streamerMode
@@ -1979,17 +2110,19 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
 
   const liveArea = live
     ? html`<${Box} flexDirection="column">
-        ${live.text ? html`<${AssistantMessage} text=${live.text} cols=${cols} ts=${startedAt || Date.now()} streaming=${true} />` : null}
+        <${StatusLines} lines=${live.status} busy=${busy} />
         ${live.reasoning ? html`<${Reasoning} text=${live.reasoning} show=${showReasoning} />` : null}
+        ${live.text ? html`<${AssistantMessage} text=${live.text} cols=${cols} ts=${startedAt || Date.now()} streaming=${true} />` : null}
         ${live.reply?.steps ? html`<${Plan} reply=${live.reply} live=${true} />` : null}
-        <${StatusLines} lines=${live.status} busy=${busy} />
         <${Thinking} label=${live.reply ? 'Planning' : live.text ? 'Responding' : 'Working'} startedAt=${startedAt} />
       <//>`
     : null;
 
+  const scrollPct = maxScrollRef.current > 0 ? Math.round((scrollOffset / maxScrollRef.current) * 100) : 100;
   const scrollIndicator = hasAbove
-    ? html`<${Box} paddingX=${1}>
-        <${Text} color=${C.muted} dimColor>${glyphs.up} ${aboveCount} message${aboveCount === 1 ? '' : 's'} above ${midDot()} PgUp/PgDn or Alt+↑/↓ to scroll<//>
+    ? html`<${Box} paddingX=${1} justifyContent="space-between" width=${cols}>
+        <${Text} color=${C.muted} dimColor>${glyphs.up} ${aboveCount} above ${midDot()} PgUp/PgDn ${midDot()} scroll<//>
+        <${Text} color=${C.muted} dimColor>${scrollPct}%<//>
       <//>`
     : null;
 
@@ -2022,20 +2155,11 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
         ${expandedItems.items.map((it) => renderItem(it))}
       <//>`
     : tabPanel
-    ? html`<${Box} flexDirection="column" paddingX=${1} paddingY=${1}>
-        <${Text} color=${C.brand} bold>${tabPanel.title} — Quick Commands<//>\n
-        ${tabPanel.commands.map((c, i) =>
-          html`<${Box} key=${i}>
-            <${Text} color=${C.accent} bold>${String(i + 1)}. <//>
-            <${Text} color=${C.slash}>${c.cmd.padEnd(22)}<//>
-            <${Text} color=${C.muted}>${c.desc}<//>
-          <//>`)}
-        \n<${Text} color=${C.muted}>${tabPanel.hint}<//>
-      <//>`
+    ? html`<${TabView} panel=${tabPanel} cols=${cols} activeTab=${activeTab} />`
     : html`<${Box} flexDirection="column">
         ${showEmptyBanner
           ? html`<${Box} flexDirection="column" alignItems="center" width=${cols}>
-              <${Banner} cfg=${cfg} model=${model} width=${cols} compact=${true} streamerMode=${streamerMode} />
+              <${Banner} cfg=${cfg} model=${model} width=${cols} compact=${!showBanner} streamerMode=${streamerMode} />
             <//>`
           : null}
         ${scrollIndicator}
@@ -2045,17 +2169,19 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
 
   return html`
     <${Box} flexDirection="column" width=${cols} height=${rows}>
-      <${TabBar} active=${activeTab} cols=${cols} mode=${composerMode} />
+      <${TabBar} active=${activeTab} cols=${cols} />
 
       <${Box} flexDirection="column" flexGrow=${1} overflow="hidden">
         ${timelineContent}
       <//>
 
-      ${search ? html`<${SearchOverlay} query=${search.query} matches=${searchMatches} active=${search.active} cols=${cols} />` : null}
+      <${Box} flexDirection="column">
+        ${search ? html`<${SearchOverlay} query=${search.query} matches=${searchMatches} active=${search.active} cols=${cols} />` : null}
 
-      ${!busy && chips.length ? html`<${FollowupChips} chips=${chips} active=${activeChip} />` : null}
+        ${!busy && chips.length && !choice && !search && !sessionPicker && !diffState
+          ? html`<${FollowupChips} chips=${chips} active=${activeChip} />`
+          : null}
 
-      <${Box} flexDirection="column">
         ${choice
           ? html`<${Choice} ...${choice} cols=${cols} />`
           : sessionPicker

package/src/tui/components.js

@@ -106,45 +106,33 @@ function SpeakerLine({ label, color, glyphColor, cols = 80, ts, rightLabel = ''
 }
 
 // ── Tab Bar ─────────────────────────────────────────────────────────────────
-const TABS = [
-  { id: 'session',   label: 'Session'   },
-  { id: 'devices',   label: 'Devices'   },
-  { id: 'maps', label: 'Network Maps' },
-  { id: 'alarms',    label: 'Alarms'    },
+export const TABS = [
+  { id: 'session', label: 'Session' },
+  { id: 'devices', label: 'Devices' },
+  { id: 'maps',    label: 'Maps'    },
+  { id: 'alarms',  label: 'Alarms'  },
 ];
 
-export function TabBar({ active = 'session', cols = 80, mode = 'ask' }) {
-  const modeBadge = mode !== 'ask'
-    ? ` ${mode === 'autopilot' ? '⚡ AUTO' : mode === 'shell' ? '⌘ SHELL' : '📋 PLAN'}`
-    : '';
-  const badgeLen = modeBadge ? modeBadge.length + 2 : 0;
-  const available = cols - 2 - badgeLen; // -2 for paddingX={1}
-
-  // §11: clip tab labels when terminal is narrow (~50 cols)
-  // Full:  [Session]   Devices   Customers   Alarms  = ~42 chars
-  // Short: [Ses]   Dev   Cus   Alm              = ~26 chars
-  const fullWidth = TABS.reduce((sum, t, i) => {
-    const w = t.id === active ? t.label.length + 2 : t.label.length;
-    return sum + (i > 0 ? 3 : 0) + w;
-  }, 0);
-  const abbreviated = fullWidth > available;
+export const TAB_W = 14;
 
+export function TabBar({ active = 'session', cols = 80 }) {
   return html`
-    <${Box} width=${cols} backgroundColor="blue">
-      <${Box} paddingX=${1} flexGrow=${1}>
-        ${TABS.map((t, i) => {
-          const on = t.id === active;
-          const lbl = abbreviated ? t.label.slice(0, 3) : t.label;
+    <${Box} flexDirection="column" width=${cols}>
+      <${Box} flexDirection="row" width=${cols}>
+        ${TABS.map((tab, i) => {
+          const on = tab.id === active;
+          const label = ` ${i + 1} ${tab.label} `.padEnd(TAB_W);
           return html`
-            <${Box} key=${t.id}>
-              ${i > 0 ? html`<${Text} backgroundColor="blue">   <//>` : null}
-              ${on
-                ? html`<${Text} color="white" bold backgroundColor="blue">[${lbl}]<//>`
-                : html`<${Text} color="white" dimColor backgroundColor="blue">${lbl}<//>`}
+            <${Box} key=${tab.id} width=${TAB_W}>
+              <${Text} bold=${on} color=${on ? 'cyan' : 'white'} dimColor=${!on} inverse=${on}>
+                ${label}
+              <//>
             <//>`;
         })}
+        <${Box} flexGrow=${1} />
+        <${Text} color=${C.muted} dimColor>click ${midDot()} ←/→<//>
       <//>
-      ${modeBadge ? html`<${Box} paddingRight=${1}><${Text} color="yellow" bold backgroundColor="blue">${modeBadge}<//><//>` : null}
+      <${Text} color=${C.separator}>${'─'.repeat(Math.max(1, cols))}<//>
     <//>`;
 }
 
@@ -152,73 +140,62 @@ export function FollowupChips({ chips = [], active = 0 }) {
   if (!chips.length) return null;
   return html`
     <${Box} paddingX=${1} flexWrap="wrap">
-      <${Text} color=${C.muted}>Next: <//>
-      ${chips.map((chip, i) => {
+      <${Text} color=${C.muted}>Next <//>
+      ${chips.slice(0, 4).map((chip, i) => {
         const on = i === active;
         return html`
-          <${Box} key=${'ch' + i}>
-            ${i > 0 ? html`<${Text} color=${C.muted}> <//>` : null}
-            <${Text} color=${on ? C.success : C.muted} bold=${on}>[${chip}]<//>
+          <${Box} key=${'ch' + i} marginRight=${1}>
+            <${Text} color=${on ? C.success : 'white'} inverse=${on}> ${chip} <//>
           <//>`;
       })}
-      <${Text} color=${C.muted}>  ↵ run  Ctrl+N/P cycle  Esc dismiss<//>
     <//>`;
 }
 
 export function Banner({ cfg = {}, model, width = 80, compact = false, streamerMode = false }) {
+  const [frame, setFrame] = useState(0);
+
+  useEffect(() => {
+    const iv = setInterval(() => setFrame((f) => (f + 1) % 4), 120);
+    return () => clearInterval(iv);
+  }, []);
+
+  const colors = ['cyan', 'blue', C.success, C.accent];
+  const logoColor = colors[frame] ?? 'cyan';
+
   const m = shortModel(model || cfg._model || 'IspBills AI');
-  const wide = !compact && width >= 60;
-  const meta = [
-    ['model', streamerMode ? 'hidden' : m], ['user', cfg.user?.name], ['role', cfg.user?.role],
-  ].filter(([, v]) => v);
-  // §3: show /login instruction when unauthenticated
   const isAuth = Boolean(cfg.user?.name || cfg.user?.email || cfg.apiKey || cfg._token);
 
   if (compact) {
     return html`
       <${Box} marginBottom=${1}>
-        <${Text} color=${C.accent} bold>iCopilot <//>
-        ${meta.map(([label, val], i) => html`
-          <${Box} key=${'m' + i}>
-            <${Text} color=${C.muted}>${midDot()}<//>
-            <${Text} color=${label === 'model' ? C.accent : C.brand}>${val}<//>
-          <//>`)}
+        <${Text} color=${C.accent} bold>${glyphs.ring} iCopilot <//>
+        <${Text} color=${C.muted}>${midDot()}<//>
+        <${Text} color=${C.muted}>${m}<//>
+        ${cfg.user?.name ? html`<${Text} color=${C.muted}>${midDot()}<//>` : null}
+        ${cfg.user?.name ? html`<${Text} color=${C.brand}>${cfg.user.name}<//>` : null}
       <//>`;
   }
 
   return html`
     <${Box} flexDirection="column" marginBottom=${1} alignItems="center" width=${width}>
-      ${wide
-        ? html`<${Box} flexDirection="column" alignItems="center" width=${width}>
-            ${LOGO.map((l, i) => html`<${Text} key=${'l' + i} color=${C.accent} bold>${l}<//>`)}
-          <//>`
-        : html`<${Text} color=${C.accent} bold>◈ iCopilot ${html`<${Text} color=${C.muted}>${dash()} IspBills AI terminal<//>`}<//>` }
-
-      ${wide ? html`<${Text} color=${C.separator}>${'─'.repeat(Math.max(1, width))}<//>\n` : null}
+      <${Box} flexDirection="column" alignItems="center" width=${width}>
+        ${LOGO.map((l, i) => html`<${Text} key=${'l' + i} color=${logoColor} bold>${l}<//>`)}
+      <//>
 
-      <${Box} marginTop=${wide ? 0 : 1} justifyContent="center">
-        <${Text} color=${C.accent} bold>◈ iCopilot<//>
+      <${Box} marginTop=${1} justifyContent="center">
+        <${Text} color=${C.accent} bold>${glyphs.ring} iCopilot<//>
         <${Text} color=${C.muted}>  ${dash()}  IspBills network engineer in your terminal<//>
       <//>
 
-      ${wide ? html`<${Text} color=${C.separator}>${'─'.repeat(Math.max(1, width))}<//>\n` : null}
-
-      ${meta.length ? html`<${Box} marginTop=${1} justifyContent="center">
-        ${meta.map(([label, val], i) => html`
-          <${Box} key=${'m' + i}>
-            ${i > 0 ? html`<${Text} color=${C.muted}>${midDot()}<//>` : null}
-            <${Text} color=${C.muted}>${label} <//>
-            <${Text} color=${label === 'model' ? C.accent : C.brand}>${val}<//>
-          <//>`)}
-      <//>` : null}
-
-      ${cfg.url ? html`<${Box} justifyContent="center"><${Text} color=${C.muted}>${cfg.url}<//><//>` : null}
-
-      <${Box} flexDirection="column" marginTop=${1} alignItems="center" width=${width}>
-        <${Box} paddingX=${2} flexDirection="column">
-          <${Text} color=${C.muted} dimColor>  ${' @ '}${html`<${Text} color=${C.accent}>@<//>`} mention files · ${html`<${Text} color=${C.accent}>/<//>`} commands · ${html`<${Text} color=${C.accent}>?<//>`} help · ${html`<${Text} color=${C.accent}>!<//>` } shell<//>
-        <//>
-      <//>
+      ${model || cfg._model ? html`
+        <${Box} marginTop=${1} justifyContent="center">
+          <${Text} color=${C.muted}>model <//>
+          <${Text} color=${C.accent}>${m}<//>
+          ${cfg.user?.name ? html`<${Text} color=${C.muted}>${midDot()}<//>` : null}
+          ${cfg.user?.name ? html`<${Text} color=${C.muted}>user <//>` : null}
+          ${cfg.user?.name ? html`<${Text} color=${C.brand}>${cfg.user.name}<//>` : null}
+          ${cfg.url ? html`<${Text} color=${C.muted}>${midDot()}${cfg.url}<//>` : null}
+        <//>` : null}
 
       ${!isAuth
         ? html`<${Box} marginTop=${1} justifyContent="center">
@@ -226,6 +203,10 @@ export function Banner({ cfg = {}, model, width = 80, compact = false, streamerM
             <${Text} color=${C.slash} bold>/login<//>
             <${Text} color=${C.warning}> to connect.<//><//>` 
         : null}
+
+      <${Box} marginTop=${1} justifyContent="center">
+        <${Text} color=${C.muted} dimColor>@ mention  /  commands  ?  help  !  shell  Shift+Tab  cycle mode<//>
+      <//>
     <//>`;
 }
 
@@ -245,12 +226,15 @@ function Sep({ cols = 80 }) {
 }
 
 export function UserMessage({ text, cols = 80, ts }) {
+  const stamp = ts ? new Date(ts).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' }) : '';
   return html`
-    <${Box} flexDirection="column" marginTop=${1}>
-      <${Sep} cols=${cols} />
-      <${SpeakerLine} label="You" color=${C.brand} cols=${cols} ts=${ts} />
-      <${Box} paddingX=${1}>
-        <${Text}>${withMentions(text)}<//>
+    <${Box} flexDirection="column" marginBottom=${1}>
+      <${Box} flexDirection="row" justifyContent="space-between" width=${cols} paddingX=${1}>
+        <${Text} bold color="cyan">You<//>
+        <${Text} color=${C.muted}>${stamp}<//>
+      <//>
+      <${Box} paddingX=${1} marginLeft=${2} flexWrap="wrap">
+        ${withMentions(text)}
       <//>
     <//>`;
 }
@@ -278,14 +262,17 @@ function StreamingText({ text = '' }) {
   return rendered;
 }
 
-export function AssistantMessage({ text, cols = 80, ts, label = `${glyphs.ring} iCopilot`, streaming = false }) {
-  // §11: response content box capped at 100 columns; separators stay full-width (§6).
+export function AssistantMessage({ text, cols = 80, ts, label, streaming = false }) {
+  const stamp = ts ? new Date(ts).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' }) : '';
+  const speakerLabel = streaming ? 'iCopilot ●' : 'iCopilot';
   const bodyWidth = Math.min(cols, 100);
   return html`
-    <${Box} flexDirection="column" marginTop=${1}>
-      <${Sep} cols=${cols} />
-      <${SpeakerLine} label=${label} color="white" glyphColor=${C.accent} cols=${cols} />
-      <${Box} paddingX=${1} flexDirection="column" width=${bodyWidth}>
+    <${Box} flexDirection="column" marginBottom=${1}>
+      <${Box} flexDirection="row" justifyContent="space-between" width=${cols} paddingX=${1}>
+        <${Text} bold color=${C.success}>${speakerLabel}<//>
+        <${Text} color=${C.muted}>${stamp}<//>
+      <//>
+      <${Box} paddingX=${1} marginLeft=${2} flexDirection="column" width=${bodyWidth}>
         ${streaming ? html`<${StreamingText} text=${text} />` : html`<${Markdown} content=${text} />`}
       <//>
     <//>`;
@@ -294,9 +281,8 @@ export function AssistantMessage({ text, cols = 80, ts, label = `${glyphs.ring}
 export function ShellOutput({ command, output, cols = 80, ts, code = 0 }) {
   return html`
     <${Box} flexDirection="column" marginTop=${1}>
-      <${Sep} cols=${cols} />
       <${SpeakerLine}
-        label="⌘ Shell"
+        label=${"$ Shell"}
         color=${code === 0 ? C.warning : C.error}
         cols=${cols}
         ts=${ts}
@@ -314,44 +300,49 @@ const LEAD_EMOJI = /^\s*([\u{1F000}-\u{1FAFF}\u{2600}-\u{27BF}\u{2B00}-\u{2BFF}\
 
 export function StatusLines({ lines = [], busy = false }) {
   if (!lines.length) return null;
-  const subLines = lines.filter((l) => SUBAGENT.test(l));
   const lastIdx = lines.length - 1;
   return html`
     <${Box} flexDirection="column" marginTop=${1}>
       ${lines.map((line, i) => {
-        const sm = String(line).match(SUBAGENT);
+        const lineStr = String(line);
+        const sm = lineStr.match(SUBAGENT);
         if (sm) {
           const [, idx, total, host, result] = sm;
+          // A subagent line is still running when busy and hasn't got a ✓/✗ prefix yet
+          const isCompleted = /^\s*[✓✗x]/.test(lineStr);
+          const running = busy && !isCompleted;
           const good = !/fail|error|down|offline|unreachable|timeout|deny/i.test(result);
-          const isLast = subLines[subLines.length - 1] === line;
-          const running = busy && isLast && Number(idx) < Number(total);
           const branch = Number(idx) === Number(total) ? glyphs.branchEnd : glyphs.branchMid;
+          const hostTrunc = host.length > 24 ? host.slice(0, 22) + '…' : host;
+          const resultTrunc = result.length > 32 ? result.slice(0, 30) + '…' : result;
           return html`
             <${Box} key=${'s' + i}>
               <${Text} color=${C.gray}>  <//>
-              <${Text} color=${C.magenta}>${branch} <//>
-              <${Text} color=${C.gray}>${idx}/${total} <//>
-              <${Text} color=${C.white} bold>${host}<//>
-              <${Text} color=${C.gray}> ${dash()} <//>
+              <${Text} color=${C.accent}>${branch} <//>
+              <${Text} color=${C.muted}>${idx}/${total} <//>
+              <${Text} color=${C.white} bold>${hostTrunc}<//>
+              <${Text} color=${C.muted}> ${dash()} <//>
               ${running
-                ? html`<${Text} color=${C.accent}><${Spinner} type=${spinnerType()} /> working<//>`
-                : html`<${Text} color=${good ? C.green : C.red} bold>${good ? glyphs.check : glyphs.cross} ${result}<//>`}
+                ? html`<${Text} color=${C.warning}><${Spinner} type=${spinnerType()} /><//>  <${Text} color=${C.muted}>running<//>`
+                : html`<${Text} color=${good ? C.success : C.error} bold>${good ? glyphs.check : glyphs.cross} ${resultTrunc}<//>`}
             <//>`;
         }
 
         const running = busy && i === lastIdx;
-        const em = String(line).match(LEAD_EMOJI);
-        const body = em ? String(line).slice(em[0].length) : String(line).replace(/^[\s◈◆●○◎⇢→>*✓✗×!⚠·-]+/u, '');
+        const em = lineStr.match(LEAD_EMOJI);
+        const body = em ? lineStr.slice(em[0].length) : lineStr.replace(/^[\s◈◆●○◎⇢→>*✓✗×!⚠·-]+/u, '');
         const ci = body.indexOf(':');
         const action = ci > -1 ? body.slice(0, ci).trim() : body.trim();
         const detail = ci > -1 ? body.slice(ci + 1).trim() : '';
-        // §6/§23: render as [Tool call: name  detail]  ✓/spinner chip
-        const chipLabel = detail ? `${em ? em[1] : ''}${action}  ${detail}` : `${em ? em[1] : ''}${action}`;
+        const chipLabel = detail
+          ? `${em ? em[1] : ''}${action}: ${detail.slice(0, 40)}`
+          : `${em ? em[1] : ''}${action}`;
         return html`
           <${Box} key=${'s' + i} marginTop=${0}>
             <${Text} color=${C.muted}>  <//>
             <${Text} color=${running ? C.warning : C.muted}>[<//>
-            <${Text} color=${running ? C.white : C.muted} bold=${running}>${chipLabel.trim()}<//><${Text} color=${running ? C.warning : C.muted}>]<//><${Text}> <//>
+            <${Text} color=${running ? C.white : C.muted} bold=${running}>${chipLabel.trim().slice(0, 60)}<//><${Text} color=${running ? C.warning : C.muted}>]<//>
+            <${Text}> <//>
             ${running
               ? html`<${Text} color=${C.accent}><${Spinner} type=${spinnerType()} /><//>`
               : html`<${Text} color=${C.success}>${glyphs.check}<//>`}
@@ -429,7 +420,6 @@ export function Notice({ text, color = C.gray }) {
 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=${1}>
         <${Text} color=${bodyColor}>${text}<//>
@@ -534,7 +524,7 @@ export function Thinking({ label = 'Working', startedAt }) {
     <${Box} marginTop=${1} paddingX=${1}>
       <${Text} color=${C.warning}><${Spinner} type=${spinnerType()} /><//>
       <${Text} color=${C.warning} bold> ${label}<//>
-      <${Text} color=${C.muted}>… (${secs}s ${midDot()}esc to interrupt)<//>
+      <${Text} color=${C.muted}>… (${secs}s ${midDot()} esc to cancel)<//>
     <//>`;
 }
 
@@ -543,11 +533,9 @@ export function Choice({ title, note, options = [], sel = 0, allowText = false,
   if (isToolApproval) {
     return html`
       <${Box} flexDirection="column" marginTop=${1}>
-        <${Sep} cols=${cols} />
         <${Box} paddingX=${2} marginTop=${1}>
-          <${Text} color=${C.accent} bold>⚙ Tool request<//>
+          <${Text} color=${C.accent} bold>${glyphs.bolt} Tool request<//>
         <//>
-        <${Sep} cols=${cols} />
         ${note ? html`<${Box} paddingX=${2} marginTop=${1}><${Text} color=${C.muted}>${note}<//><//>` : null}
         <${Box} flexDirection="column" marginTop=${1} paddingX=${2}>
           ${options.map((o, i) => {

package/src/tui/composer.js

@@ -466,13 +466,13 @@ export function Composer({
   const promptGlyph = glyphs.prompt;
   const promptColor = busy ? C.warning : C.success;
   const ghostHint = busy ? 'Working…' : 'Enter @ to mention files or / for commands…';
-  const modePrefix = mode === 'plan'
-    ? '[plan] '
+  const modeLabel = mode === 'plan'
+    ? '[plan]'
     : mode === 'autopilot'
-    ? '[auto] '
+    ? '[auto]'
     : mode === 'shell'
-    ? '[shell] '
-    : '';
+    ? '[shell]'
+    : '[ask]';
 
   const paletteRows = (() => {
     if (!menuOpen) return null;
@@ -483,12 +483,14 @@ export function Composer({
     return window.map((s, wi) => {
       const i = start + wi;
       const on = i === sel;
-      const kk = slashMode ? (s.cmd + (s.hint ? ' ' + s.hint : '')) : s.tag;
+      const kk = (slashMode ? (s.cmd + (s.hint ? ' ' + s.hint : '')) : s.tag).slice(0, 22);
       const label = kk.padEnd(22);
+      const descWidth = Math.max(8, width - 28);
+      const desc = s.desc ? s.desc.slice(0, descWidth) : '';
       return html`<${Box} key=${'m' + i}>
         <${Text} color=${on ? C.success : C.muted}>${on ? glyphs.prompt + ' ' : '  '}<//>
         <${Text} color=${on ? C.success : slashMode ? C.slash : C.accent} bold=${on}>${label}<//>
-        <${Text} color=${C.muted}>${s.desc}<//>
+        <${Text} color=${C.muted}>${desc}<//>
       <//>`;
     });
   })();
@@ -505,20 +507,22 @@ export function Composer({
           <//>`
         : null}
 
-      <${Text} color=${C.accent}>${'_'.repeat(Math.max(1, width))}<//>
-
-      <${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}>
-              <${Text} color="white" inverse> <//>
-              <${Text} color=${C.muted} italic> ${ghostHint}<//>
-            <//>`
-          : html`<${Box} flexGrow=${1}>
-              <${Text}>${before}<//><${Text} inverse>${at}<//><${Text}>${after}<//><${Text} color=${C.muted} italic>${ghost}<//>
-            <//>`}
+      <${Text} color=${C.muted}>${'═'.repeat(Math.max(1, width))}<//>
+
+      <${Box} width=${width} paddingX=${1} justifyContent="space-between">
+        <${Box} flexGrow=${1}>
+          <${Text} color=${promptColor} bold>${promptGlyph} <//>
+          ${busy ? html`<${Text} color=${C.muted}>(working…) <//>` : null}
+          ${empty
+            ? html`<${Box} flexGrow=${1}>
+                <${Text} color="white" inverse> <//>
+                <${Text} color=${C.muted} italic> ${ghostHint}<//>
+              <//>`
+            : html`<${Box} flexGrow=${1}>
+                <${Text}>${before}<//><${Text} inverse>${at}<//><${Text}>${after}<//><${Text} color=${C.muted} italic>${ghost}<//>
+              <//>`}
+        <//>
+        <${Text} color=${C.muted}>${modeLabel}<//>
       <//>
 
       ${menuOpen
@@ -533,7 +537,5 @@ export function Composer({
             ${paletteRows}
           <//>`
         : null}
-
-      <${Text} color=${C.separator}>${(asciiSafe() ? '-' : '─').repeat(Math.max(1, width))}<//>
     <//>`;
 }

package/src/tui/mouse.js

@@ -0,0 +1,57 @@
+import { useEffect, useRef } from './dom.js';
+import { useStdin } from 'ink';
+
+function parseMouseData(chunk, emit) {
+  let i = 0;
+  while (i < chunk.length) {
+    if (chunk.startsWith('\x1b[<', i)) {
+      const match = chunk.slice(i).match(/^\x1b\[<(\d+);(\d+);(\d+)([Mm])/);
+      if (!match) return chunk.slice(i);
+      const btn = Number(match[1]);
+      const x = Math.max(0, Number(match[2]) - 1);
+      const y = Math.max(0, Number(match[3]) - 1);
+      emit({ btn, x, y, press: match[4] === 'M' });
+      i += match[0].length;
+      continue;
+    }
+    if (chunk.startsWith('\x1b[M', i)) {
+      if (i + 6 > chunk.length) return chunk.slice(i);
+      const btn = chunk.charCodeAt(i + 3) - 32;
+      const x = Math.max(0, chunk.charCodeAt(i + 4) - 33);
+      const y = Math.max(0, chunk.charCodeAt(i + 5) - 33);
+      emit({ btn, x, y, press: btn !== 3 });
+      i += 6;
+      continue;
+    }
+    i += 1;
+  }
+  return '';
+}
+
+export function useMouse(handler, enabled = true) {
+  const { stdin } = useStdin();
+  const handlerRef = useRef(handler);
+  const bufferRef = useRef('');
+
+  handlerRef.current = handler;
+
+  useEffect(() => {
+    if (!enabled || !stdin) return;
+
+    try { process.stdout.write('\x1b[?1000h\x1b[?1006h'); } catch {}
+
+    const onData = (chunk) => {
+      const text = Buffer.isBuffer(chunk) ? chunk.toString('latin1') : String(chunk);
+      bufferRef.current = parseMouseData(bufferRef.current + text, (event) => {
+        handlerRef.current?.(event);
+      });
+    };
+
+    stdin.on('data', onData);
+    return () => {
+      stdin.off('data', onData);
+      bufferRef.current = '';
+      try { process.stdout.write('\x1b[?1000l\x1b[?1006l'); } catch {}
+    };
+  }, [enabled, stdin]);
+}

package/src/tui/theme.js

@@ -24,6 +24,7 @@ export const C = {
   muted:     '#8B949E', // grey
   separator: '#30363D', // dark
   slash:     '#E3B341', // gold
+  bgTabBar:  '#0D1117', // tab bar background
   // Legacy aliases (keep existing code working)
   gray:    '#8B949E',
   white:   'white',