ispbills-icli 8.1.1 → 8.3.0

package/src/tui/app.js

@@ -7,13 +7,26 @@ import { Box, Text, useStdout, useApp, useInput } from 'ink';
 import { C, glyphs, midDot, dash } from './theme.js';
 import {
   Banner, UserMessage, AssistantMessage, StatusLines, Reasoning,
-  Plan, Connect, Notice, Thinking,
+  Plan, Connect, Notice, Thinking, Choice,
 } from './components.js';
 import { Composer } from './composer.js';
 import { streamChat } from '../client.js';
 import { slashToQuestion, SLASH_COMMANDS } from '../commands.js';
 import { saveConfig } from '../config.js';
 import { shortModel } from '../ui.js';
+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';
+
+// Split a command argument string into argv, honouring "quoted" segments.
+function splitArgs(s) {
+  const out = [];
+  const re = /"([^"]*)"|'([^']*)'|(\S+)/g;
+  let m;
+  while ((m = re.exec(s))) out.push(m[1] ?? m[2] ?? m[3]);
+  return out;
+}
 
 function useTerminalSize() {
   const { stdout } = useStdout();
@@ -59,6 +72,7 @@ function liveHeight(live, cols, showReasoning) {
   let h = 2; // thinking line + margin
   if (live.status?.length) h += 1 + live.status.length;
   if (showReasoning && live.reasoning) h += 1 + wrapLines(live.reasoning, cols);
+  if (live.reply?.steps) h += 3 + live.reply.steps.length * 2 + (live.reply.summary ? 1 : 0);
   if (live.text) h += 1 + wrapLines(live.text, cols);
   return h;
 }
@@ -74,6 +88,8 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion })
   const [showReasoning, setShowReasoning] = useState(!!display.reasoning);
   const [autopilot, setAutopilot] = useState(false);
   const [hint, setHint] = useState('');
+  const [startedAt, setStartedAt] = useState(0);
+  const [choice, setChoice] = useState(null); // { title, note, options, allowText, sel, text, focusText, onPick }
 
   const convo = useRef([]);      // [{role, content}] for the backend
   const plain = useRef([]);      // plain-text transcript for exit reprint
@@ -81,6 +97,15 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion })
   const ctrlC = useRef(0);       // timestamp of the last lone Ctrl+C
   const apRef = useRef(false);   // live autopilot flag (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
+
+  // Enable terminal bracketed-paste so multi-line pastes arrive as one chunk
+  // (the Composer flattens them) instead of submitting on the first newline.
+  useEffect(() => {
+    try { process.stdout.write('\x1b[?2004h'); } catch {}
+    return () => { try { process.stdout.write('\x1b[?2004l'); } catch {} };
+  }, []);
 
   const setAutopilotMode = useCallback((next) => {
     apRef.current = next;
@@ -90,29 +115,38 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion })
   const push = useCallback((item) => setItems((xs) => [...xs, { id: nextId(), ...item }]), []);
   const log = (line) => plain.current.push(line);
 
-  const runTurn = useCallback(async (question, depth = 0) => {
+  const runTurn = useCallback(async (question, opts = {}) => {
+    const { depth = 0, archive = null, label = '' } = opts;
     push({ type: 'user', text: question });
     log(`\n${glyphs.prompt} ${question}\n`);
     convo.current.push({ role: 'user', content: question });
     setBusy(true);
     setHint('');
-    const s = { status: [], reasoning: '', text: '' };
+    setStartedAt(Date.now());
+    const s = { status: [], reasoning: '', text: '', reply: null };
     setLive({ ...s });
 
     const abort = new AbortController();
     abortRef.current = abort;
 
-    const context = { autopilot: apRef.current };
+    const context = {
+      autopilot: apRef.current,
+      client: 'icli',
+      ui: { tables: true, prompts: true, markdown: true },
+    };
     if (modelRef.current) context.model = modelRef.current;
 
     try {
-      const { reply, text, meta } = await streamChat(cfg, [...convo.current], {
+      const preamble = memoryPreamble(cfg);
+      const outbound = preamble ? [preamble, ...convo.current] : [...convo.current];
+      const { reply, text, meta } = await streamChat(cfg, outbound, {
         signal: abort.signal,
         context,
         onEvent: (ev) => {
           if (ev.type === 'status') s.status = [...s.status, ev.line];
           else if (ev.type === 'reasoning') s.reasoning += ev.delta;
           else if (ev.type === 'text') s.text += ev.delta;
+          else if (ev.type === 'plan') s.reply = ev.reply;
           setLive({ ...s });
         },
       });
@@ -120,20 +154,59 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion })
       const type = reply.type ?? 'message';
       if (type === 'plan') { push({ type: 'plan', reply }); log('[plan] ' + (reply.summary || '')); }
       else if (type === 'connect') { push({ type: 'connect', reply }); log('[connect] ' + (reply.device?.kind || '')); }
+      else if (type === 'prompt' || type === 'choice') { push({ type: 'assistant', text: text || reply.question || '' }); log(text || reply.question || ''); }
       else { 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;
+
+      // Archive a /backup answer to the per-user git repo.
+      if (archive === 'backup' && text) {
+        try {
+          const r = await commitBackup(cfg, label, text);
+          push({ type: 'notice',
+            text: `${glyphs.check} Backup saved to git repo (${r.file})${r.committed ? '' : ' — nothing new to commit'}.`,
+            color: C.green });
+        } catch (e) {
+          push({ type: 'notice', text: `${glyphs.warn} Could not archive backup: ${e.message}`, color: C.yellow });
+        }
+      }
 
       // Autopilot: auto-confirm a proposed plan without waiting for the user.
       if (type === 'plan' && apRef.current && depth < 3) {
         push({ type: 'notice', text: `${glyphs.bolt} autopilot ${dash()} applying fix…`, color: C.yellow });
-        setLive(null);
-        setBusy(false);
-        abortRef.current = null;
-        return runTurn('apply fix', depth + 1);
+        setLive(null); setBusy(false); abortRef.current = null;
+        return runTurn('apply fix', { depth: depth + 1 });
+      }
+
+      // Otherwise surface an interactive prompt for the user to choose/answer.
+      setLive(null); setBusy(false); abortRef.current = null;
+      if (type === 'plan') {
+        const destructive = (reply.steps || []).some((st) => /destruct|high/.test(st.risk || ''));
+        setChoice({
+          title: 'Apply this fix?',
+          note: reply.summary || '',
+          sel: 0, text: '', focusText: false, allowText: false,
+          options: [
+            { label: destructive ? 'Apply fix (destructive)' : 'Apply fix', value: 'apply fix', danger: destructive },
+            { label: 'Explain the plan first', value: 'explain this plan in more detail before applying' },
+            { label: 'Cancel', value: null },
+          ],
+        });
+      } else if (type === 'prompt' || type === 'choice') {
+        const opts = (reply.options || []).map((o) =>
+          typeof o === 'string' ? { label: o, value: o } : { label: o.label ?? o.value, value: o.value ?? o.label, hint: o.hint });
+        setChoice({
+          title: reply.question || 'Choose an option',
+          note: reply.note || '',
+          sel: 0, text: '', focusText: opts.length === 0,
+          allowText: reply.allowText !== false,
+          options: opts,
+        });
       }
     } catch (e) {
       if (abort.signal.aborted) push({ type: 'notice', text: `${glyphs.cross} Cancelled.`, color: C.yellow });
       else push({ type: 'notice', text: `${glyphs.cross} ${e.message}`, color: C.red });
+      setLive(null); setBusy(false); abortRef.current = null;
     } finally {
       abortRef.current = null;
       setLive(null);
@@ -143,6 +216,29 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion })
 
   const doExit = useCallback(() => { onExit?.(plain.current); exit(); }, [exit, onExit]);
 
+  // Create a gist from the last answer or the whole transcript (invoked by the
+  // /gist Choice below).
+  const doGist = useCallback(async (kind) => {
+    let content, filename, description;
+    if (kind === 'transcript') {
+      content = convo.current.map((m) => `### ${m.role}\n\n${m.content}`).join('\n\n---\n\n') || '(empty)';
+      filename = 'icli-transcript.md';
+      description = 'iCli conversation transcript';
+    } else {
+      content = lastAnswerRef.current || '(no answer)';
+      filename = 'icli-answer.md';
+      description = 'iCli answer';
+    }
+    push({ type: 'notice', text: `${glyphs.arrow} Creating secret gist…`, color: C.gray });
+    try {
+      const { url } = await createGist(cfg, { filename, content, description, isPublic: false });
+      const tool = await copyToClipboard(url);
+      push({ type: 'notice', text: `${glyphs.check} Gist created: ${url}${tool ? ' (URL copied)' : ''}`, color: C.green });
+    } catch (e) {
+      push({ type: 'notice', text: `${glyphs.cross} ${e.message}`, color: C.red });
+    }
+  }, [cfg, push]);
+
   const onSubmit = useCallback((raw) => {
     const q = raw.trim();
     if (!q) return;
@@ -189,7 +285,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+L clear · Ctrl+C twice to exit' });
+      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' });
       return;
     }
     if (q === '/history') {
@@ -200,17 +296,134 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion })
     if (q === '/logout') { onExternal?.('logout'); doExit(); return; }
     if (q === '/update') { onExternal?.('update'); doExit(); return; }
 
+    // ── Memory ──
+    if (q === '/remember' || q.startsWith('/remember ')) {
+      const note = q.slice('/remember'.length).trim();
+      if (!note) { push({ type: 'notice', text: 'Usage: /remember <note>' }); return; }
+      const notes = addNote(cfg, note);
+      push({ type: 'notice', text: `${glyphs.check} Remembered (${notes.length} note${notes.length > 1 ? 's' : ''}). I'll keep this in mind.`, color: C.green });
+      return;
+    }
+    if (q === '/memory') {
+      const notes = loadNotes(cfg);
+      push({ type: 'notice', text: notes.length
+        ? 'Memory notes:\n' + notes.map((n, i) => `  ${i + 1}. ${n.text}`).join('\n') + '\n\n  /forget <n|all> to remove.'
+        : 'No memory notes yet. Add one with /remember <note>.' });
+      return;
+    }
+    if (q === '/forget' || q.startsWith('/forget ')) {
+      const which = q.slice('/forget'.length).trim();
+      if (!which) { push({ type: 'notice', text: 'Usage: /forget <number | all | text>' }); return; }
+      const { notes, removed } = forgetNote(cfg, which);
+      push({ type: 'notice',
+        text: removed ? `${glyphs.check} Forgot ${removed} note(s). ${notes.length} remain.` : 'No matching note found.',
+        color: removed ? C.green : C.gray });
+      return;
+    }
+
+    // ── Clipboard ──
+    if (q === '/copy') {
+      const ans = lastAnswerRef.current;
+      if (!ans) { push({ type: 'notice', text: 'Nothing to copy yet — ask something first.', color: C.gray }); return; }
+      copyToClipboard(ans).then((tool) => push({ type: 'notice',
+        text: tool ? `${glyphs.check} Copied last answer (${ans.length} chars) to the clipboard.`
+                   : `${glyphs.cross} No clipboard tool found. Install xclip / wl-clipboard (Linux), or use macOS/Windows.`,
+        color: tool ? C.green : C.red }));
+      return;
+    }
+
+    // ── GitHub gist ──
+    if (q === '/gist' || q.startsWith('/gist ')) {
+      const rest = q.slice('/gist'.length).trim();
+      if (rest.startsWith('token ')) {
+        cfg.github_token = rest.slice('token '.length).trim();
+        try { saveConfig(cfg); } catch {}
+        push({ type: 'notice', text: `${glyphs.check} GitHub token saved. /gist will use it (needs the "gist" scope).`, color: C.green });
+        return;
+      }
+      if (!lastAnswerRef.current && convo.current.length === 0) {
+        push({ type: 'notice', text: 'Nothing to save yet — ask something first.', color: C.gray });
+        return;
+      }
+      choiceActionRef.current = (v) => doGist(v);
+      setChoice({
+        title: 'Create a secret gist from…',
+        note: '', sel: 0, text: '', focusText: false, allowText: false,
+        options: [
+          { label: 'The last AI answer', value: 'answer' },
+          { label: 'The entire conversation transcript', value: 'transcript' },
+          { label: 'Cancel', value: null },
+        ],
+      });
+      return;
+    }
+
+    // ── Local git repo ──
+    if (q === '/git' || q.startsWith('/git ')) {
+      const args = q.slice('/git'.length).trim();
+      if (!args) { push({ type: 'notice', text: 'Usage: /git <status | log | commit -m "msg" | push | diff | remote add origin <url>>' }); return; }
+      gitCmd(cfg, splitArgs(args)).then((r) => {
+        const body = (r.stdout || '').trim() || (r.stderr || '').trim() || (r.ok ? '(done)' : '(no output)');
+        push({ type: 'notice', text: `$ git ${args}\n${body.slice(0, 3500)}`, color: r.ok ? undefined : C.red });
+      });
+      return;
+    }
+
     let question = q;
+    const opts = {};
     if (q.startsWith('/')) {
       const mapped = slashToQuestion(q);
-      if (mapped) question = mapped;
-      else { push({ type: 'notice', text: `Unknown command: ${q}. Type /help.` }); return; }
+      if (mapped) {
+        question = mapped;
+        if (q === '/backup' || q.startsWith('/backup ')) {
+          opts.archive = 'backup';
+          opts.label = q.slice('/backup'.length).trim() || 'fleet';
+        }
+      } else { push({ type: 'notice', text: `Unknown command: ${q}. Type /help.` }); return; }
+    }
+    runTurn(question, opts);
+  }, [doExit, push, runTurn, onExternal, setAutopilotMode, 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; }
+    runTurn(String(value));
+  }, [push, runTurn]);
+
+  useInput((input, key) => {
+    if (!choice) 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; }
+    if (key.downArrow) {
+      setChoice((c) => {
+        const max = c.options.length - 1;
+        if (c.allowText && c.sel >= max) return { ...c, focusText: true };
+        return { ...c, sel: Math.min(max, c.sel + 1) };
+      });
+      return;
+    }
+    if (key.return) {
+      if (choice.focusText) { const t = choice.text.trim(); if (t) pickChoice(t); return; }
+      pickChoice(choice.options[choice.sel]?.value);
+      return;
     }
-    runTurn(question);
-  }, [doExit, push, runTurn, onExternal, setAutopilotMode, model, cfg]);
+    if (choice.focusText) {
+      if (key.backspace || key.delete) { setChoice((c) => ({ ...c, text: c.text.slice(0, -1) })); return; }
+      if (input && !key.ctrl && !key.meta) {
+        const printable = input.replace(/[\x00-\x1f\x7f]/g, '');
+        if (printable) setChoice((c) => ({ ...c, text: c.text + printable }));
+      }
+    }
+  });
 
   // Global keys (Composer handles text editing; here we handle app-level keys).
   useInput((input, key) => {
+    if (choice) return; // the Choice prompt owns the keyboard
     if (key.ctrl && input === 'c') {
       if (busy) { abortRef.current?.abort(); setHint(''); return; }
       const now = Date.now();
@@ -280,16 +493,19 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion })
         ${chosen.map(renderItem)}
         ${live
           ? html`<${Box} flexDirection="column">
-              <${StatusLines} lines=${live.status} />
+              <${StatusLines} lines=${live.status} busy=${busy} />
               ${showReasoning && live.reasoning ? html`<${Reasoning} text=${live.reasoning} />` : null}
+              ${live.reply?.steps ? html`<${Plan} reply=${live.reply} live=${true} />` : null}
               ${live.text ? html`<${Box} marginTop=${1}><${AssistantMessage} text=${live.text} /><//>` : null}
-              <${Thinking} label=${live.text ? 'Responding' : 'Thinking'} />
+              <${Thinking} label=${live.reply ? 'Planning' : live.text ? 'Responding' : 'Working'} startedAt=${startedAt} />
             <//>`
           : null}
       <//>
 
       <${Box} flexShrink=${0} flexDirection="column">
-        <${Composer} onSubmit=${onSubmit} busy=${busy} width=${cols} />
+        ${choice
+          ? html`<${Choice} ...${choice} />`
+          : html`<${Composer} onSubmit=${onSubmit} busy=${busy} width=${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}<//>

package/src/tui/components.js

@@ -1,5 +1,5 @@
 // Presentational components for the iCli Ink TUI.
-import { html } from './dom.js';
+import { html, useState, useEffect } from './dom.js';
 import { Box, Text } from 'ink';
 import Spinner from 'ink-spinner';
 import { C, glyphs, spinnerType, borderStyle, midDot, dash } from './theme.js';
@@ -55,12 +55,22 @@ export function Banner({ cfg = {}, model, width = 80, compact = false }) {
     <//>`;
 }
 
+/** Split text into spans, colouring @mentions. */
+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=${base}>${p}<//>`,
+  );
+}
+
 /** The user's prompt line. */
 export function UserMessage({ text }) {
   return html`
     <${Box} marginTop=${1}>
       <${Text} color=${C.accent} bold>${glyphs.prompt} <//>
-      <${Text} color=${C.white}>${text}<//>
+      <${Text}>${withMentions(text)}<//>
     <//>`;
 }
 
@@ -72,44 +82,71 @@ export function AssistantMessage({ text }) {
     <//>`;
 }
 
-/** Icon for a server progress/status line. */
-function statusIcon(line) {
+/** Classify a server progress/status line into an icon + tone. */
+function classify(line) {
   const l = String(line).toLowerCase();
-  if (/unreachable|skip|fail|error|denied|timeout/.test(l)) return html`<${Text} color=${C.red}>${glyphs.cross}<//>`;
-  if (/done|success|found|complet|online|ready|ok\b/.test(l)) return html`<${Text} color=${C.green}>${glyphs.check}<//>`;
-  if (/batch|sub.?agent|fleet|parallel/.test(l)) return html`<${Text} color=${C.accent}>${glyphs.ring}<//>`;
-  if (/\[\d+\/\d+\]/.test(l)) return html`<${Text} color=${C.accent}>${glyphs.diamond}<//>`;
-  if (/probe|reachab|ping/.test(l)) return html`<${Text} color=${C.yellow}>${glyphs.target}<//>`;
-  if (/connect|ssh|telnet|api|session/.test(l)) return html`<${Text} color=${C.accent}>${glyphs.arrow}<//>`;
-  return html`<${Text} color=${C.gray}>${glyphs.bullet}<//>`;
+  if (/unreachable|skip|fail|error|denied|timeout|down\b|offline/.test(l)) return { icon: glyphs.cross, color: C.red };
+  if (/done|success|found|complet|online|ready|free\b|ok\b|\bup\b/.test(l)) return { icon: glyphs.check, color: C.green };
+  if (/assign|sub.?agent|fleet|parallel|dispatch|spawn/.test(l)) return { icon: glyphs.ring, color: C.magenta };
+  if (/probe|reachab|ping/.test(l)) return { icon: glyphs.target, color: C.yellow };
+  if (/connect|ssh|telnet|api|session|running|exec|command/.test(l)) return { icon: glyphs.arrow, color: C.accent };
+  return { icon: glyphs.bullet, color: C.gray };
 }
 
-/** Live server activity (tool calls happening backend-side). */
-export function StatusLines({ lines = [] }) {
+// A sub-agent progress line, e.g. "✓ [1/3] nas#1: FREE" or "[2/3] olt#1: down".
+const SUBAGENT = /^\s*[✓✗x]?\s*\[(\d+)\/(\d+)\]\s*(.+?)\s*[:：]\s*(.+?)\s*$/;
+
+/** Live server activity — tool calls and sub-agents happening backend-side. */
+export function StatusLines({ lines = [], busy = false }) {
   if (!lines.length) return null;
+  const subLines = lines.filter((l) => SUBAGENT.test(l));
   return html`
     <${Box} flexDirection="column" marginTop=${1}>
-      ${lines.map((line, i) => html`
-        <${Box} key=${'s' + i}>
-          ${statusIcon(line)}
-          <${Text} color=${C.gray}> ${line}<//>
-        <//>`)}
+      ${lines.map((line, i) => {
+        const sm = String(line).match(SUBAGENT);
+        if (sm) {
+          const [, idx, total, host, result] = sm;
+          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;
+          return html`
+            <${Box} key=${'s' + i}>
+              <${Text} color=${C.magenta}>${branch} <//>
+              <${Text} color=${C.gray}>${idx}/${total} <//>
+              <${Text} color=${C.white} bold>${host}<//>
+              <${Text} color=${C.gray}> ${dash()} <//>
+              ${running
+                ? html`<${Text} color=${C.accent}><${Spinner} type=${spinnerType()} /><//>`
+                : html`<${Text} color=${good ? C.green : C.red} bold>${good ? glyphs.check : glyphs.cross} ${result}<//>`}
+            <//>`;
+        }
+        const { icon, color } = classify(line);
+        const clean = String(line).replace(/^[\s◈◆●○◎⇢→>*✓✗×!⚠·-]+/u, '').trimStart() || String(line);
+        return html`
+          <${Box} key=${'s' + i}>
+            <${Text} color=${color}>${icon}<//>
+            <${Text} color=${C.gray}> ${clean}<//>
+          <//>`;
+      })}
     <//>`;
 }
 
-/** Reasoning trace (only when enabled). */
+/** Reasoning trace (shown by default; toggle with Ctrl+T). */
 export function Reasoning({ text }) {
   if (!text) return null;
   return html`
-    <${Box} flexDirection="column" marginTop=${1}>
-      <${Text} color=${C.accent}>${glyphs.reasoning} ${html`<${Text} color=${C.gray}>Reasoning<//>`}<//>
-      <${Text} color=${C.gray}>${text}<//>
+    <${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}<//>
     <//>`;
 }
 
 /** A proposed remediation plan. */
-export function Plan({ reply = {} }) {
+export function Plan({ reply = {}, live = false }) {
   const steps = reply.steps || [];
+  const dot3 = '…';
   return html`
     <${Box} flexDirection="column" marginTop=${1}>
       <${Text} color=${C.accent} bold>${glyphs.diamond} Plan<//>
@@ -133,7 +170,9 @@ export function Plan({ reply = {} }) {
           <//>`;
       })}
       <${Box} marginTop=${1}>
-        <${Text} color=${C.gray}>Type ${html`<${Text} color=${C.white}>apply fix<//>`} to confirm.<//>
+        ${live
+          ? html`<${Text} color=${C.gray} italic>${glyphs.bullet} forming plan${dot3}<//>`
+          : html`<${Text} color=${C.gray}>Type ${html`<${Text} color=${C.white}>apply fix<//>`} to confirm.<//>`}
       <//>
     <//>`;
 }
@@ -157,11 +196,54 @@ export function Notice({ text, color = C.gray }) {
   return html`<${Box} marginTop=${1}><${Text} color=${color}>${text}<//><//>`;
 }
 
-/** The active "thinking" line with a spinner. */
-export function Thinking({ label = 'Thinking' }) {
+/** The active "working" line — animated spinner, elapsed time, cancel hint. */
+export function Thinking({ label = 'Working', startedAt }) {
+  const [, tick] = useState(0);
+  useEffect(() => {
+    const id = setInterval(() => tick((n) => n + 1), 1000);
+    return () => clearInterval(id);
+  }, []);
+  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.gray}> ${label}…<//>
+      <${Text} color=${C.accent} bold> ${label}<//>
+      <${Text} color=${C.gray}>… (${secs}s ${midDot()}esc to interrupt)<//>
+    <//>`;
+}
+
+/**
+ * An interactive prompt — pick an option with ↑/↓ + Enter, or (when
+ * `allowText`) type a free-form answer. Mirrors GitHub Copilot CLI prompts.
+ * Presentational only: the parent owns `sel`/`textValue` and key handling.
+ */
+export function Choice({ title, note, options = [], sel = 0, allowText = false, text = '', focusText = false }) {
+  return html`
+    <${Box} flexDirection="column" marginTop=${1} borderStyle=${borderStyle()} borderColor=${C.accent} paddingX=${1}>
+      ${title ? html`<${Text} color=${C.accent} bold>${glyphs.diamond} ${title}<//>` : null}
+      ${note ? html`<${Text} color=${C.gray}>${note}<//>` : null}
+      <${Box} flexDirection="column" marginTop=${title || note ? 1 : 0}>
+        ${options.map((o, i) => {
+          const on = !focusText && i === sel;
+          const label = o.label ?? o.value ?? String(o);
+          const tone = o.danger ? C.red : on ? C.accent : C.white;
+          return html`
+            <${Box} key=${'o' + i}>
+              <${Text} color=${on ? C.accent : C.gray}>${on ? glyphs.prompt + ' ' : '  '}<//>
+              <${Text} color=${tone} bold=${on}>${label}<//>
+              ${o.hint ? html`<${Text} color=${C.gray}> ${dash()} ${o.hint}<//>` : null}
+            <//>`;
+        })}
+        ${allowText
+          ? html`<${Box} key="freetext">
+              <${Text} color=${focusText ? C.accent : C.gray}>${focusText ? glyphs.prompt + ' ' : '  '}<//>
+              <${Text} color=${C.gray}>${text ? '' : 'Type a custom answer…'}<//>
+              <${Text} color=${C.white}>${text}<//>${focusText ? html`<${Text} inverse> <//>` : null}
+            <//>`
+          : null}
+      <//>
+      <${Box} marginTop=${1}>
+        <${Text} color=${C.gray}>${glyphs.up}${glyphs.down} choose ${midDot()}${allowText ? 'Tab type ' + midDot() : ''}Enter confirm ${midDot()}Esc dismiss<//>
+      <//>
     <//>`;
 }