ispbills-icli 8.4.13 → 8.5.0

package/package.json

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

package/src/commands.js

@@ -52,9 +52,16 @@ export const SLASH_COMMANDS = [
   { cmd: '/copy',       hint: '',            desc: 'Copy the last AI answer to the clipboard', group: 'Memory', local: true },
 
   // ── Session & app ──
-  { cmd: '/autopilot',  hint: '',            desc: 'Toggle autopilot (auto-apply fixes)',     group: 'Session', local: true },
+  { cmd: '/plan',       hint: '[prompt]',    desc: 'Switch to plan mode (Shift+Tab to cycle)', group: 'Session', local: true },
+  { cmd: '/autopilot',  hint: '',            desc: 'Toggle autopilot mode (auto-apply fixes)', group: 'Session', local: true },
   { cmd: '/model',      hint: '[name]',      desc: 'Show or set the AI model',                group: 'Session', local: true },
   { cmd: '/reasoning',  hint: '',            desc: 'Toggle reasoning display (Ctrl+T)',       group: 'Session', local: true },
+  { cmd: '/context',    hint: '',            desc: 'Show context window token usage',          group: 'Session', local: true },
+  { cmd: '/usage',      hint: '',            desc: 'Show session usage metrics',              group: 'Session', local: true },
+  { cmd: '/compact',    hint: '[focus]',     desc: 'Compress conversation history',           group: 'Session', local: true },
+  { cmd: '/session',    hint: '',            desc: 'Show session info (cwd, branch, tokens)', group: 'Session', local: true },
+  { cmd: '/share',      hint: '',            desc: 'Share session to a GitHub gist',          group: 'Session', local: true },
+  { cmd: '/theme',      hint: '',            desc: 'View current colour theme info',          group: 'Session', local: true },
   { cmd: '/new',        hint: '',            desc: 'Start a fresh conversation',              group: 'Session', local: true },
   { cmd: '/history',    hint: '',            desc: 'Show conversation history',               group: 'Session', local: true },
   { cmd: '/clear',      hint: '',            desc: 'Clear the screen',                        group: 'Session', local: true },

package/src/tui/app.js

@@ -7,7 +7,7 @@ import { html, useState, useEffect, useRef, useCallback } from './dom.js';
 import { Box, Text, Static, useStdout, useApp, useInput } from 'ink';
 import { C, glyphs, midDot, dash } from './theme.js';
 import {
-  Banner, UserMessage, AssistantMessage, StatusLines, Reasoning,
+  Banner, TabBar, FollowupChips, UserMessage, AssistantMessage, StatusLines, Reasoning,
   Plan, Connect, Notice, Thinking, Choice,
 } from './components.js';
 import { Composer } from './composer.js';
@@ -19,6 +19,9 @@ import { loadNotes, addNote, forgetNote, memoryPreamble } from '../memory.js';
 import { copyToClipboard } from '../clipboard.js';
 import { createGist } from '../gist.js';
 import { git as gitCmd, commitBackup } from '../gitrepo.js';
+import { execSync } from 'child_process';
+import { homedir } from 'os';
+import { relative } from 'path';
 
 // Split a command argument string into argv, honouring "quoted" segments.
 function splitArgs(s) {
@@ -29,6 +32,33 @@ function splitArgs(s) {
   return out;
 }
 
+// Shorten a path with ~ for home directory.
+function shortenPath(p) {
+  try {
+    const home = homedir();
+    const rel = relative(home, p);
+    if (!rel.startsWith('..')) return '~/' + rel;
+  } catch {}
+  return p;
+}
+
+// Get the current git branch name (synchronous, non-throwing).
+function gitBranch() {
+  try {
+    return execSync('git rev-parse --abbrev-ref HEAD', {
+      cwd: process.cwd(), stdio: ['ignore', 'pipe', 'ignore'], timeout: 1000,
+    }).toString().trim();
+  } catch {
+    return '';
+  }
+}
+
+// Approximate token count from text (~4 chars per token).
+function approxTokens(messages) {
+  const total = messages.reduce((n, m) => n + (m.content?.length || 0), 0);
+  return Math.round(total / 4);
+}
+
 function useTerminalSize() {
   const { stdout } = useStdout();
   const [size, setSize] = useState({
@@ -47,16 +77,24 @@ function useTerminalSize() {
 let itemId = 0;
 const nextId = () => ++itemId;
 
+// Mode cycle: ask → plan → autopilot → ask
+const MODES = ['ask', 'plan', 'autopilot'];
+
 export function App({ cfg, display = {}, onExternal, onExit, initialQuestion }) {
   const { exit } = useApp();
   const { cols, rows } = useTerminalSize();
+  const colsRef = useRef(cols);
+  useEffect(() => { colsRef.current = cols; }, [cols]);
 
   const [items, setItems] = useState([]);
   const [live, setLive] = useState(null); // { status:[], reasoning:'', text:'' }
   const [busy, setBusy] = useState(false);
   const [model, setModel] = useState(cfg._model);
-  const [showReasoning, setShowReasoning] = useState(!!display.reasoning);
-  const [autopilot, setAutopilot] = useState(false);
+  const [showReasoning, setShowReasoning] = useState(false); // collapsed by default per spec
+  const [mode, setMode] = useState('ask');      // 'ask' | 'plan' | 'autopilot'
+  const [activeTab, setActiveTab] = useState('session');
+  const [chips, setChips] = useState([]);       // followup suggestion strings
+  const [activeChip, setActiveChip] = useState(0);
   const [hint, setHint] = useState('');
   const [startedAt, setStartedAt] = useState(0);
   const [choice, setChoice] = useState(null); // { title, note, options, allowText, sel, text, focusText, onPick }
@@ -67,9 +105,11 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion })
   const abortRef = useRef(null); // AbortController of the in-flight turn
   const ctrlC = useRef(0);       // timestamp of the last lone Ctrl+C
   const apRef = useRef(false);   // live autopilot flag (read inside runTurn)
+  const modeRef = useRef('ask'); // live mode (read inside runTurn)
   const modelRef = useRef(cfg._model); // preferred model to request
   const lastAnswerRef = useRef('');    // most recent assistant answer (for /copy, /gist)
   const choiceActionRef = useRef(null); // action to run when a non-AI Choice is picked
+  const branchRef = useRef(gitBranch()); // current git branch (detected once at start)
 
   // Enable terminal bracketed-paste so multi-line pastes (mouse right-click or
   // Cmd/Ctrl+V) arrive wrapped in markers as one block — the Composer inserts
@@ -79,12 +119,13 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion })
     return () => { try { process.stdout.write('\x1b[?2004l'); } catch {} };
   }, []);
 
-  const setAutopilotMode = useCallback((next) => {
-    apRef.current = next;
-    setAutopilot(next);
+  const setModeState = useCallback((next) => {
+    modeRef.current = next;
+    apRef.current = next === 'autopilot';
+    setMode(next);
   }, []);
 
-  const push = useCallback((item) => setItems((xs) => [...xs, { id: nextId(), ...item }]), []);
+  const push = useCallback((item) => setItems((xs) => [...xs, { id: nextId(), cols: colsRef.current, ...item }]), []);
   const log = (line) => plain.current.push(line);
 
   // Clear the visible transcript: wipe the screen + native scrollback and
@@ -104,6 +145,7 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion })
     convo.current.push({ role: 'user', content: question });
     setBusy(true);
     setHint('');
+    setChips([]);
     setStartedAt(Date.now());
     const s = { status: [], reasoning: '', text: '', reply: null };
     setLive({ ...s });
@@ -156,6 +198,12 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion })
       if (text) convo.current.push({ role: 'assistant', content: text });
       lastAnswerRef.current = text || reply.summary || reply.question || lastAnswerRef.current;
 
+      // Populate followup chips from reply.suggestions (up to 4).
+      if (Array.isArray(reply.suggestions) && reply.suggestions.length) {
+        setChips(reply.suggestions.slice(0, 4));
+        setActiveChip(0);
+      }
+
       // Archive a /backup answer to the per-user git repo.
       if (archive === 'backup' && text) {
         try {
@@ -250,17 +298,71 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion })
       return;
     }
     if (q === '/reasoning') {
-      setShowReasoning((v) => { push({ type: 'notice', text: `Reasoning display ${!v ? 'on' : 'off'}.` }); return !v; });
+      setShowReasoning((v) => { push({ type: 'notice', text: `Reasoning display ${!v ? 'expanded' : 'collapsed'}.` }); return !v; });
       return;
     }
     if (q === '/autopilot' || q === '/auto') {
-      const next = !apRef.current;
-      setAutopilotMode(next);
+      const next = modeRef.current !== 'autopilot' ? 'autopilot' : 'ask';
+      setModeState(next);
       push({ type: 'notice',
-        text: next
-          ? `${glyphs.bolt} Autopilot ON ${dash()} proposed fixes will be applied automatically. Toggle with Shift+Tab.`
-          : `Autopilot OFF ${dash()} fixes will wait for your confirmation.`,
-        color: next ? C.yellow : C.gray });
+        text: next === 'autopilot'
+          ? `${glyphs.bolt} Autopilot ON ${dash()} proposed fixes will be applied automatically. Shift+Tab to cycle modes.`
+          : `Mode: ask ${dash()} fixes will wait for your confirmation.`,
+        color: next === 'autopilot' ? C.warning : C.muted });
+      return;
+    }
+    if (q === '/plan') {
+      const next = modeRef.current !== 'plan' ? 'plan' : 'ask';
+      setModeState(next);
+      push({ type: 'notice', text: `Mode: ${next} ${dash()} Shift+Tab to cycle.`, color: C.accent });
+      return;
+    }
+    if (q === '/context' || q === '/usage') {
+      const tokens = approxTokens(convo.current);
+      push({ type: 'notice', text: `Context: ~${tokens.toLocaleString()} tokens (${convo.current.length} messages). /compact to summarise.` });
+      return;
+    }
+    if (q === '/compact' || q.startsWith('/compact ')) {
+      const focus = q.slice('/compact'.length).trim();
+      const prompt = focus
+        ? `Summarise our conversation so far, focusing on: ${focus}`
+        : 'Summarise our conversation so far in a concise way, preserving key facts and decisions.';
+      convo.current = [];
+      push({ type: 'notice', text: `${glyphs.arrow} Compacting history…`, color: C.muted });
+      runTurn(prompt);
+      return;
+    }
+    if (q === '/theme') {
+      push({ type: 'notice', text: 'Theme: dark (default). Palette: purple accent, blue brand, green success, amber warning, red error.\nSet NO_COLOR=1 to disable colour or FORCE_COLOR=1 to force it.' });
+      return;
+    }
+    if (q === '/session') {
+      const tokens = approxTokens(convo.current);
+      const branch = branchRef.current;
+      const cwd = shortenPath(process.cwd());
+      push({ type: 'notice', text: [
+        `Session  ${dash()} ${cwd}${branch ? ' [' + branch + ']' : ''}`,
+        `Messages ${dash()} ${convo.current.length}`,
+        `Tokens   ${dash()} ~${tokens.toLocaleString()} (approx)`,
+        `Model    ${dash()} ${model || modelRef.current || 'server default'}`,
+        `Mode     ${dash()} ${modeRef.current}`,
+      ].join('\n') });
+      return;
+    }
+    if (q === '/share') {
+      if (!lastAnswerRef.current && convo.current.length === 0) {
+        push({ type: 'notice', text: 'Nothing to share yet — ask something first.', color: C.muted }); return;
+      }
+      choiceActionRef.current = (v) => doGist(v);
+      setChoice({
+        title: 'Share conversation…',
+        note: 'Saves as a secret GitHub gist', sel: 0, text: '', focusText: false, allowText: false,
+        options: [
+          { label: 'Last AI answer', value: 'answer' },
+          { label: 'Full conversation transcript', value: 'transcript' },
+          { label: 'Cancel', value: null },
+        ],
+      });
       return;
     }
     if (q === '/model' || q.startsWith('/model ')) {
@@ -282,7 +384,7 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion })
         const head = c.group !== group ? ((group = c.group), `\n  ${c.group}\n`) : '';
         return head + `    ${(c.cmd + (c.hint ? ' ' + c.hint : '')).padEnd(22)}${c.desc}`;
       }).join('\n');
-      push({ type: 'notice', text: 'Commands:' + lines + '\n\n  Keys: Shift+Tab autopilot · Ctrl+T reasoning · Ctrl+Z/Ctrl+Y undo/redo · Ctrl+L clear · Ctrl+C twice to exit' });
+      push({ type: 'notice', text: 'Commands:' + lines + '\n\n  Keys: Shift+Tab cycle modes (ask→plan→autopilot) · Ctrl+T toggle reasoning · Ctrl+L clear · Ctrl+N/P followup chips · Ctrl+D exit · Ctrl+C×2 exit' });
       return;
     }
     if (q === '/history') {
@@ -379,15 +481,15 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion })
       } else { push({ type: 'notice', text: `Unknown command: ${q}. Type /help.` }); return; }
     }
     runTurn(question, opts);
-  }, [doExit, push, runTurn, onExternal, setAutopilotMode, model, cfg, doGist]);
+  }, [doExit, push, runTurn, onExternal, setModeState, model, cfg, doGist]);
 
   // Interactive prompt/choice handling (owns the keyboard while open).
   const pickChoice = useCallback((value) => {
     const act = choiceActionRef.current;
     choiceActionRef.current = null;
     setChoice(null);
-    if (act) { if (value != null) act(value); else push({ type: 'notice', text: 'Cancelled.', color: C.gray }); return; }
-    if (value == null) { push({ type: 'notice', text: 'Dismissed.', color: C.gray }); return; }
+    if (act) { if (value != null) act(value); else push({ type: 'notice', text: 'Cancelled.', color: C.muted }); return; }
+    if (value == null) { push({ type: 'notice', text: 'Dismissed.', color: C.muted }); return; }
     runTurn(String(value));
   }, [push, runTurn]);
 
@@ -429,15 +531,34 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion })
       setHint('Press Ctrl+C again to exit');
       return;
     }
+    if (key.ctrl && input === 'd') { doExit(); return; }  // Ctrl+D shutdown
     if (key.escape && busy) { abortRef.current?.abort(); return; }
+    if (key.escape && chips.length) { setChips([]); return; } // Esc dismisses chips
     if (key.tab && key.shift && !busy) {
-      const next = !apRef.current;
-      setAutopilotMode(next);
-      setHint(next ? 'Autopilot ON' : 'Autopilot OFF');
+      // Cycle: ask → plan → autopilot → ask
+      const cur = MODES.indexOf(modeRef.current);
+      const next = MODES[(cur + 1) % MODES.length];
+      setModeState(next);
+      setHint(`Mode: ${next}`);
       return;
     }
     if (key.ctrl && input === 't') { setShowReasoning((v) => !v); return; }
     if (key.ctrl && input === 'l' && !busy) { clearAll(); return; }
+    // Ctrl+N / Ctrl+P — cycle followup chips
+    if (key.ctrl && input === 'n' && chips.length) {
+      setActiveChip((i) => (i + 1) % chips.length); return;
+    }
+    if (key.ctrl && input === 'p' && chips.length) {
+      setActiveChip((i) => (i - 1 + chips.length) % chips.length); return;
+    }
+    // Tab cycles the tab bar (when not in slash palette)
+    if (key.tab && !key.shift && !busy) {
+      setActiveTab((t) => {
+        const tabs = ['session', 'devices', 'customers', 'alarms'];
+        return tabs[(tabs.indexOf(t) + 1) % tabs.length];
+      });
+      return;
+    }
   });
 
   // Auto-run a first question if launched with one.
@@ -447,9 +568,10 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion })
   }, [initialQuestion, onSubmit]);
 
   const renderItem = (it) => {
+    const c = it.cols || 80;
     switch (it.type) {
-      case 'user': return html`<${UserMessage} key=${it.id} text=${it.text} />`;
-      case 'assistant': return html`<${AssistantMessage} key=${it.id} text=${it.text} />`;
+      case 'user': return html`<${UserMessage} key=${it.id} text=${it.text} cols=${c} />`;
+      case 'assistant': return html`<${AssistantMessage} key=${it.id} text=${it.text} cols=${c} />`;
       case 'plan': return html`<${Plan} key=${it.id} reply=${it.reply} />`;
       case 'connect': return html`<${Connect} key=${it.id} reply=${it.reply} />`;
       case 'activity': return html`<${StatusLines} key=${it.id} lines=${it.status} busy=${false} />`;
@@ -458,16 +580,32 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion })
     }
   };
 
-  const ctx = [model ? shortModel(model) : null, cfg.user?.name, cfg.user?.role].filter(Boolean).join(midDot());
-  const modeTag = autopilot ? `${glyphs.bolt} autopilot ${midDot()} ` : '';
-  const footerRight = hint || `${modeTag}/help ${midDot()} Shift+Tab autopilot ${midDot()} Ctrl+C exit`;
+  // ── Footer ───────────────────────────────────────────────────────────────────
+  // Left:  ~/cwd   ⏎ branch   mode-badge
+  // Right: model   ~Nk ctx
+  const cwd = shortenPath(process.cwd());
+  const branch = branchRef.current;
+  const tokenCount = approxTokens(convo.current);
+  const tokenLabel = tokenCount > 0 ? `~${Math.round(tokenCount / 1000)}k ctx` : '';
+  const modelLabel = shortModel(model || modelRef.current || '');
+  const modeLabel = mode !== 'ask' ? ` ${midDot()} ${glyphs.bolt} ${mode}` : '';
+
+  const footerLeft = [
+    cwd,
+    branch ? `${glyphs.gitBranch}${branch}` : null,
+  ].filter(Boolean).join('  ');
+
+  const footerRight = hint
+    ? hint
+    : [modelLabel, tokenLabel].filter(Boolean).join(`  ${midDot()}  `);
+
   const compact = cols < 60;
 
   // The banner is the first <Static> item so it prints once at the very top and
   // scrolls away with history; completed transcript items follow it. Ink flushes
   // each <Static> item to the terminal's normal buffer exactly once, leaving the
   // native scrollback intact so earlier conversation can be scrolled back to.
-  const staticItems = [{ type: 'banner', id: `banner-${clearEpoch}` }, ...items];
+  const staticItems = [{ type: 'banner', id: `banner-${clearEpoch}`, cols }, ...items];
 
   return html`
     <${Box} flexDirection="column" width=${cols}>
@@ -482,20 +620,30 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion })
       ${live
         ? html`<${Box} flexDirection="column">
             <${StatusLines} lines=${live.status} busy=${busy} />
-            ${showReasoning && live.reasoning ? html`<${Reasoning} text=${live.reasoning} />` : null}
+            ${live.reasoning ? html`<${Reasoning} text=${live.reasoning} show=${showReasoning} />` : null}
             ${live.reply?.steps ? html`<${Plan} reply=${live.reply} live=${true} />` : null}
-            ${live.text ? html`<${Box} marginTop=${1}><${AssistantMessage} text=${live.text} /><//>` : null}
+            ${live.text ? html`<${AssistantMessage} text=${live.text} cols=${cols} />` : null}
             <${Thinking} label=${live.reply ? 'Planning' : live.text ? 'Responding' : 'Working'} startedAt=${startedAt} />
           <//>`
         : null}
 
-      <${Box} flexDirection="column" marginTop=${1}>
+      <${TabBar} active=${activeTab} cols=${cols} />
+
+      ${!busy && chips.length ? html`<${FollowupChips} chips=${chips} active=${activeChip} />` : null}
+
+      <${Box} flexDirection="column">
         ${choice
           ? html`<${Choice} ...${choice} />`
           : html`<${Composer} onSubmit=${onSubmit} busy=${busy} width=${cols} />`}
+
+        <${Text} color=${C.separator}>${'─'.repeat(Math.max(1, cols))}<//>
+
         <${Box} paddingX=${1} width=${cols}>
-          <${Box} flexGrow=${1}><${Text} color=${C.gray} wrap="truncate-end">${ctx}<//><//>
-          <${Text} color=${hint || autopilot ? C.yellow : C.gray} wrap="truncate-end">${footerRight}<//>
+          <${Box} flexGrow=${1}>
+            <${Text} color=${C.muted} wrap="truncate-end">${footerLeft}<//>
+            ${modeLabel ? html`<${Text} color=${mode === 'autopilot' ? C.warning : C.accent}>${modeLabel}<//>`  : null}
+          <//>
+          <${Text} color=${hint ? C.warning : C.muted} wrap="truncate-end">${footerRight}<//>
         <//>
       <//>
     <//>`;

package/src/tui/components.js

@@ -15,6 +15,52 @@ const LOGO = [
   '╚═╝ ╚═════╝ ╚═════╝ ╚═╝     ╚═╝╚══════╝ ╚═════╝    ╚═╝   ',
 ];
 
+// ── Tab Bar ─────────────────────────────────────────────────────────────────
+// Matches the June 2026 Copilot CLI GA redesign: deep-blue track, active tab
+// wrapped in [brackets], inactive tabs dimmed. Adapted for ISP NOC context.
+const TABS = [
+  { id: 'session',   label: 'Session'   },
+  { id: 'devices',   label: 'Devices'   },
+  { id: 'customers', label: 'Customers' },
+  { id: 'alarms',    label: 'Alarms'    },
+];
+
+export function TabBar({ active = 'session', cols = 80, onSwitch }) {
+  return html`
+    <${Box} width=${cols} paddingX=${1} backgroundColor="#0D1117">
+      ${TABS.map((t, i) => {
+        const on = t.id === active;
+        return html`
+          <${Box} key=${t.id}>
+            ${i > 0 ? html`<${Text} color=${C.muted}>   <//>` : null}
+            ${on
+              ? html`<${Text} color="white" bold>[${t.label}]<//>`
+              : html`<${Text} color=${C.muted}>${t.label}<//>`}
+          <//>`;
+      })}
+    <//>`;
+}
+
+// ── Followup Chips ────────────────────────────────────────────────────────────
+// Up to 4 suggested followup actions shown above the input after a response.
+// Ctrl+N/P cycles; ↵ on empty input submits active; Esc clears.
+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) => {
+        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}]<//>
+          <//>`;
+      })}
+      <${Text} color=${C.muted}>  ↵ run  Ctrl+N/P cycle  Esc dismiss<//>
+    <//>`;
+}
+
 /** Header banner — full logo on wide/tall terminals, compact title otherwise. */
 export function Banner({ cfg = {}, model, width = 80, compact = false }) {
   const m = shortModel(model || cfg._model || 'IspBills AI');
@@ -29,8 +75,8 @@ export function Banner({ cfg = {}, model, width = 80, compact = false }) {
         <${Text} color=${C.accent} bold>iCopilot <//>
         ${meta.map(([label, val], i) => html`
           <${Box} key=${'m' + i}>
-            <${Text} color=${C.gray}>${midDot()}<//>
-            <${Text} color=${label === 'model' ? C.cyan : C.white}>${val}<//>
+            <${Text} color=${C.muted}>${midDot()}<//>
+            <${Text} color=${label === 'model' ? C.accent : C.brand}>${val}<//>
           <//>`)}
       <//>`;
   }
@@ -40,18 +86,18 @@ export function Banner({ cfg = {}, model, width = 80, compact = false }) {
       ${wide
         ? html`<${Box} flexDirection="column" alignItems="center">
             ${LOGO.map((l, i) => html`<${Text} key=${'l' + i} color=${C.accent} bold>${l}<//>`)}
-            <${Text} color=${C.gray}>iCopilot ${dash()} network engineer in your terminal<//>
+            <${Text} color=${C.muted}>iCopilot ${dash()} IspBills network engineer in your terminal<//>
           <//>`
-        : html`<${Text} color=${C.accent} bold>iCopilot ${html`<${Text} color=${C.gray}>${dash()} IspBills AI terminal<//>`}<//>`}
+        : html`<${Text} color=${C.accent} bold>iCopilot ${html`<${Text} color=${C.muted}>${dash()} IspBills AI terminal<//>`}<//>`}
       <${Box} marginTop=${1}>
         ${meta.map(([label, val], i) => html`
           <${Box} key=${'m' + i}>
-            ${i > 0 ? html`<${Text} color=${C.gray}>${midDot()}<//>` : null}
-            <${Text} color=${C.gray}>${label} <//>
-            <${Text} color=${label === 'model' ? C.cyan : C.white}>${val}<//>
+            ${i > 0 ? html`<${Text} color=${C.muted}>${midDot()}<//>` : null}
+            <${Text} color=${C.muted}>${label} <//>
+            <${Text} color=${label === 'model' ? C.accent : C.brand}>${val}<//>
           <//>`)}
       <//>
-      ${cfg.url ? html`<${Text} color=${C.gray}>${cfg.url}<//>` : null}
+      ${cfg.url ? html`<${Text} color=${C.muted}>${cfg.url}<//>` : null}
     <//>`;
 }
 
@@ -60,25 +106,42 @@ function withMentions(text, base = C.white) {
   const parts = String(text).split(/(@[\w:.\-/]+)/g);
   return parts.map((p, i) =>
     /^@[\w:.\-/]+$/.test(p)
-      ? html`<${Text} key=${'mn' + i} color=${C.cyan} bold>${p}<//>`
+      ? html`<${Text} key=${'mn' + i} color=${C.accent} bold>${p}<//>`
       : html`<${Text} key=${'mn' + i} color=${base}>${p}<//>`,
   );
 }
 
-/** The user's prompt line. */
-export function UserMessage({ text }) {
+// Full-width separator line, drawn in muted separator colour.
+function Sep({ cols = 80 }) {
+  return html`<${Text} color=${C.separator}>${'─'.repeat(Math.max(1, cols))}<//>`;
+}
+
+/** The user's prompt block — separator + "You" label + text. */
+export function UserMessage({ text, cols = 80 }) {
   return html`
-    <${Box} marginTop=${1}>
-      <${Text} color=${C.accent} bold>${glyphs.prompt} <//>
-      <${Text}>${withMentions(text)}<//>
+    <${Box} flexDirection="column" marginTop=${1}>
+      <${Sep} cols=${cols} />
+      <${Box} paddingX=${2} marginTop=${1}>
+        <${Text} color=${C.brand} bold>You<//>
+      <//>
+      <${Box} paddingX=${2}>
+        <${Text}>${withMentions(text)}<//>
+      <//>
     <//>`;
 }
 
-/** A finished assistant answer (markdown). */
-export function AssistantMessage({ text }) {
+/** A finished assistant answer — separator + "⬡ iCopilot" label + markdown. */
+export function AssistantMessage({ text, cols = 80 }) {
+  const dot = glyphs.copilotDot;
   return html`
     <${Box} flexDirection="column" marginTop=${1}>
-      <${Markdown} content=${text} />
+      <${Sep} cols=${cols} />
+      <${Box} paddingX=${2} marginTop=${1}>
+        <${Text} color=${C.accent} bold>${dot} iCopilot<//>
+      <//>
+      <${Box} paddingX=${2}>
+        <${Markdown} content=${text} />
+      <//>
     <//>`;
 }
 
@@ -142,14 +205,21 @@ export function StatusLines({ lines = [], busy = false }) {
     <//>`;
 }
 
-/** Reasoning trace (shown by default; toggle with Ctrl+T). */
-export function Reasoning({ text }) {
+/** Reasoning trace — collapsed to a single dim line; Ctrl+T to expand. */
+export function Reasoning({ text, show = true }) {
   if (!text) return null;
+  // Estimate token count (~4 chars per token as rough heuristic)
+  const tokenEst = Math.round(text.length / 4);
+  if (!show) {
+    return html`
+      <${Box} paddingX=${2} marginTop=${1}>
+        <${Text} color=${C.muted} italic>${glyphs.reasoning} Thinking (≈${tokenEst} tokens)… Ctrl+T to expand<//><//>`;
+  }
   return html`
-    <${Box} flexDirection="column" marginTop=${1} borderStyle=${borderStyle()} borderColor=${C.gray}
-           borderTop=${false} borderRight=${false} borderBottom=${false} paddingLeft=${1}>
-      <${Text} color=${C.magenta}>${glyphs.reasoning} ${html`<${Text} color=${C.gray} bold>Reasoning<//>`}<//>
-      <${Text} color=${C.gray} italic>${text}<//>
+    <${Box} flexDirection="column" marginTop=${1} borderStyle=${borderStyle()} borderColor=${C.separator}
+           borderTop=${false} borderRight=${false} borderBottom=${false} paddingLeft=${2}>
+      <${Text} color=${C.accent}>${glyphs.reasoning} ${html`<${Text} color=${C.muted} bold>Reasoning<//>`}<//>
+      <${Text} color=${C.muted} italic>${text}<//>
     <//>`;
 }
 
@@ -206,7 +276,7 @@ export function Notice({ text, color = C.gray }) {
   return html`<${Box} marginTop=${1}><${Text} color=${color}>${text}<//><//>`;
 }
 
-/** The active "working" line — animated spinner, elapsed time, cancel hint. */
+/** The active "working" line — animated spinner (warning colour), elapsed time, cancel hint. */
 export function Thinking({ label = 'Working', startedAt }) {
   const [, tick] = useState(0);
   useEffect(() => {
@@ -215,10 +285,10 @@ export function Thinking({ label = 'Working', startedAt }) {
   }, []);
   const secs = startedAt ? Math.max(0, Math.round((Date.now() - startedAt) / 1000)) : 0;
   return html`
-    <${Box} marginTop=${1}>
-      <${Text} color=${C.accent}><${Spinner} type=${spinnerType()} /><//>
-      <${Text} color=${C.accent} bold> ${label}<//>
-      <${Text} color=${C.gray}>… (${secs}s ${midDot()}esc to interrupt)<//>
+    <${Box} marginTop=${1} paddingX=${2}>
+      <${Text} color=${C.warning}><${Spinner} type=${spinnerType()} /><//>
+      <${Text} color=${C.warning} bold> ${label}<//>
+      <${Text} color=${C.muted}>… (${secs}s ${midDot()}esc to interrupt)<//>
     <//>`;
 }
 

package/src/tui/composer.js

@@ -3,7 +3,7 @@
 // the input and is navigable with the arrow keys.
 import { html, useState, useEffect, useCallback, useRef } from './dom.js';
 import { Box, Text, useInput } from 'ink';
-import { C, glyphs, borderStyle } from './theme.js';
+import { C, glyphs } from './theme.js';
 import { SLASH_COMMANDS } from '../commands.js';
 
 // @-mention entity types. Selecting one inserts e.g. "@olt:" so the user can
@@ -215,11 +215,17 @@ export function Composer({ onSubmit, busy, width = 80 }) {
   const sugTok = menuOpen && matches[sel] ? (slashMode ? matches[sel].cmd : matches[sel].tag) : '';
   const ghost = sugTok && sugTok.startsWith(token) && cursor >= value.length ? sugTok.slice(token.length) : '';
 
+  // Prompt glyph: ❯ (success/green) idle; ⧖ (warning/amber) busy.
+  const promptGlyph = busy ? glyphs.busy : glyphs.prompt;
+  const promptColor = busy ? C.warning : C.success;
+  // Ghost hint text when empty
+  const ghostHint = busy ? 'Working…' : 'Enter @ to mention a device or / for commands…';
+
   return html`
     <${Box} flexDirection="column" width=${width}>
       ${menuOpen
         ? html`<${Box} flexDirection="column" paddingX=${1} marginBottom=${0}>
-            ${slashMode ? null : html`<${Box}><${Text} color=${C.cyan} bold>@ mention <//><${Text} color=${C.gray}>a device, customer or entity<//><//>`}
+            ${slashMode ? null : html`<${Box}><${Text} color=${C.accent} bold>@ mention <//><${Text} color=${C.muted}>a device, customer or entity<//><//>`}
             ${(() => {
               const MAX = 8;
               let start = 0;
@@ -231,24 +237,26 @@ export function Composer({ onSubmit, busy, width = 80 }) {
                 const key = slashMode ? (s.cmd + (s.hint ? ' ' + s.hint : '')) : s.tag;
                 const label = key.padEnd(21);
                 return html`<${Box} key=${'m' + i}>
-                  <${Text} color=${on ? C.accent : C.gray}>${on ? glyphs.prompt + ' ' : '  '}<//>
-                  <${Text} color=${on ? C.accent : slashMode ? C.white : C.cyan} bold=${on}>${label}<//>
-                  <${Text} color=${C.gray}>${s.desc}<//>
+                  <${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}<//>
                 <//>`;
               });
             })()}
           <//>`
         : null}
 
-      <${Box} width=${width} borderStyle=${borderStyle()} borderColor=${busy ? C.gray : C.accent} paddingX=${1}>
-        <${Text} color=${busy ? C.gray : C.accent}>${glyphs.prompt} <//>
+      <${Text} color=${C.accent}>${'_'.repeat(Math.max(1, width))}<//>
+
+      <${Box} width=${width} paddingX=${1}>
+        <${Text} color=${promptColor} bold>${promptGlyph} <//>
         ${empty
           ? html`<${Box} flexGrow=${1}>
-              <${Text} color=${C.gray} inverse> <//>
-              <${Text} color=${C.gray}>${busy ? 'Working…' : 'Ask about your network, or type / for commands'}<//>
+              <${Text} color="white" inverse> <//>
+              <${Text} color=${C.muted}> ${ghostHint}<//>
             <//>`
           : html`<${Box} flexGrow=${1}>
-              <${Text}>${before}<//><${Text} inverse>${at}<//><${Text}>${after}<//><${Text} color=${C.gray}>${ghost}<//>
+              <${Text}>${before}<//><${Text} inverse>${at}<//><${Text}>${after}<//><${Text} color=${C.muted}>${ghost}<//>
             <//>`}
       <//>
     <//>`;

package/src/tui/theme.js

@@ -1,24 +1,71 @@
 // Colours + glyphs for the Ink TUI. Colours are Ink-friendly names/hex;
 // glyphs and the spinner reuse the ASCII-safe logic from ui.js so classic
 // Windows consoles never render "tofu" boxes.
-import { glyphs, asciiSafe } from '../ui.js';
+import { glyphs as baseGlyphs, asciiSafe } from '../ui.js';
 
-export { glyphs, asciiSafe };
+export { asciiSafe };
 
-// Soft-blue brand accent (approx. xterm-256 colour 111).
-export const ACCENT = '#87afff';
+// ── Colour palette (matches GitHub Copilot CLI spec) ─────────────────────────
+// accent   = purple  — Copilot bullet, timeline separators, active tab
+// brand    = blue    — "You" speaker label, links, title
+// success  = green   — prompt glyph (idle), checkmarks, active chip
+// warning  = amber   — busy glyph, warnings, autopilot mode
+// error    = red     — error messages
+// muted    = grey    — footer, metadata, ghost text, dim labels
+// separator= dark    — turn dividers, lower input separator
+// slash    = gold    — slash command highlight in palette
+export const ACCENT = '#A371F7';
 export const C = {
-  accent: ACCENT,
-  gray: 'gray',
-  white: 'white',
-  cyan: 'cyan',
-  green: 'green',
-  yellow: 'yellow',
-  red: 'red',
-  magenta: 'magenta',
-  blue: 'blue',
+  accent:    '#A371F7', // purple
+  brand:     '#58A6FF', // blue
+  success:   '#3FB950', // green
+  warning:   '#D29922', // amber
+  error:     '#F85149', // red
+  muted:     '#8B949E', // grey
+  separator: '#30363D', // dark
+  slash:     '#E3B341', // gold
+  // Legacy aliases (keep existing code working)
+  gray:    '#8B949E',
+  white:   'white',
+  cyan:    'cyan',
+  green:   '#3FB950',
+  yellow:  '#D29922',
+  red:     '#F85149',
+  magenta: '#A371F7',
+  blue:    '#58A6FF',
 };
 
+// ── Extended glyph set (extends ui.js glyphs with TUI-specific ones) ─────────
+const ASCII_EXTRA = {
+  copilotDot: 'o',    // hex bullet for "o iCopilot" speaker label
+  busy:       '*',    // hourglass-style busy indicator
+  gitBranch:  'b:',  // git branch prefix
+  tabOpen:    '[',    // active tab open bracket
+  tabClose:   ']',    // active tab close bracket
+  chip:       '|',    // chip separator
+  expand:     '+',    // expand indicator
+  collapse:   '-',    // collapse indicator
+};
+const UNICODE_EXTRA = {
+  copilotDot: '⬡',      // white hexagon for Copilot label
+  busy:       '⧖',      // white hourglass for busy state
+  gitBranch:  '\uE0A0 ', // Nerd Font powerline branch glyph
+  tabOpen:    '[',
+  tabClose:   ']',
+  chip:       '·',
+  expand:     '▸',
+  collapse:   '▾',
+};
+
+// Merged glyph proxy: own extras first, then ui.js base glyphs.
+export const glyphs = new Proxy({}, {
+  get(_t, key) {
+    const extra = asciiSafe() ? ASCII_EXTRA : UNICODE_EXTRA;
+    if (key in extra) return extra[key];
+    return baseGlyphs[key];
+  },
+});
+
 // ink-spinner uses cli-spinners; 'line' is pure ASCII (|/-\), 'dots' is braille.
 export function spinnerType() {
   return asciiSafe() ? 'line' : 'dots';