ispbills-icli 3.0.0 → 4.0.1

package/bin/icli.js

@@ -4,16 +4,23 @@ import { stdin as input, stdout as output, argv, exit } from 'process';
 import chalk from 'chalk';
 import { loadConfig, configPath } from '../src/config.js';
 import { loginFlow } from '../src/auth.js';
+import { cols, inner, onResize, boxTop, boxBot, boxMid, boxRow, boxTopOpen, boxBotOpen } from '../src/layout.js';
 import {
-  streamChat, printBanner, printSlashMenu,
-  SLASH_COMMANDS, slashCompleter, cols,
+  streamChat, printBanner, printSlashMenu, printUserBox,
+  SLASH_COMMANDS, slashCompleter,
 } from '../src/chat.js';
 
-// ── Copilot CLI colour tokens ──────────────────────────────────────────────────
-const dim      = chalk.hex('#9198A1');
-const tertiary = chalk.hex('#6e7781');
-const accent   = chalk.hex('#4493F8').bold;
-const rule     = () => chalk.hex('#3D444D')('  ' + '─'.repeat(Math.max(0, cols() - 4)));
+const P = {
+  border:  chalk.hex('#3D444D'),
+  dim:     chalk.hex('#9198A1'),
+  muted:   chalk.hex('#6e7781'),
+  accent:  chalk.hex('#4493F8').bold,
+  accentD: chalk.hex('#4493F8'),
+  bold:    chalk.bold.white,
+  ok:      chalk.green,
+  warn:    chalk.yellow,
+  err:     chalk.red,
+};
 
 const args = argv.slice(2);
 const cmd  = args[0] ?? '';
@@ -21,51 +28,54 @@ const cmd  = args[0] ?? '';
 // ── Help ───────────────────────────────────────────────────────────────────────
 function printHelp() {
   process.stdout.write('\n');
-  process.stdout.write('  ' + chalk.bold.white('iCli') + dim('  ·  IspBills AI Terminal\n'));
-  process.stdout.write(rule() + '\n\n');
+  process.stdout.write(boxTop('iCli  ·  Help', P.border) + '\n');
 
-  process.stdout.write(chalk.bold.white('  Usage\n\n'));
-  const cmds = [
+  process.stdout.write(boxRow('', P.border) + '\n');
+  process.stdout.write(boxRow(P.bold('Usage'), P.border) + '\n');
+  process.stdout.write(boxRow('', P.border) + '\n');
+  [
     ['icli',            'Interactive REPL with slash commands'],
     ['icli "question"', 'Single-shot query then exit'],
     ['icli login',      'Authenticate to your IspBills instance'],
     ['icli whoami',     'Show current session info'],
     ['icli --help',     'Show this help'],
-  ];
-  for (const [c, d] of cmds) {
-    process.stdout.write('  ' + accent(c.padEnd(20)) + dim(d) + '\n');
-  }
+  ].forEach(([c, d]) =>
+    process.stdout.write(boxRow(P.accent(c.padEnd(20)) + P.dim(d), P.border) + '\n')
+  );
 
-  process.stdout.write('\n' + chalk.bold.white('  Slash commands\n\n'));
+  process.stdout.write(boxMid(P.border) + '\n');
+  process.stdout.write(boxRow(P.bold('Slash commands'), P.border) + '\n');
+  process.stdout.write(boxRow('', P.border) + '\n');
   for (const { cmd: c, hint, desc } of SLASH_COMMANDS) {
-    const key = (c + (hint ? ' ' + hint : '')).padEnd(22);
-    process.stdout.write('  ' + accent(key) + dim(desc) + '\n');
+    const key = (c + (hint ? ' '+hint : '')).padEnd(22);
+    process.stdout.write(boxRow(P.accent(key) + P.dim(desc), P.border) + '\n');
   }
 
-  process.stdout.write('\n' + chalk.bold.white('  Keyboard shortcuts\n\n'));
+  process.stdout.write(boxMid(P.border) + '\n');
+  process.stdout.write(boxRow(P.bold('Keyboard shortcuts'), P.border) + '\n');
+  process.stdout.write(boxRow('', P.border) + '\n');
   [
-    ['Tab',         'Autocomplete slash commands'],
-    ['↑ / ↓',      'Navigate input history'],
-    ['Ctrl+T',      'Toggle reasoning display'],
-    ['Ctrl+L',      'Clear screen'],
-    ['Ctrl+C',      'Cancel / exit'],
-  ].forEach(([k, d]) => {
-    process.stdout.write('  ' + chalk.yellow(k.padEnd(14)) + dim(d) + '\n');
-  });
-  process.stdout.write('\n');
+    ['Tab',       'Autocomplete slash commands'],
+    ['↑ / ↓',    'Navigate input history'],
+    ['Ctrl+T',    'Toggle reasoning display'],
+    ['Ctrl+L',    'Clear screen'],
+    ['Ctrl+C',    'Cancel / exit'],
+  ].forEach(([k, d]) =>
+    process.stdout.write(boxRow(P.warn(k.padEnd(14)) + P.dim(d), P.border) + '\n')
+  );
+  process.stdout.write(boxRow('', P.border) + '\n');
+  process.stdout.write(boxBot(P.border) + '\n\n');
 }
 
 // ── Auth ───────────────────────────────────────────────────────────────────────
 async function ensureAuth() {
   let cfg = loadConfig();
   if (!cfg) {
-    process.stdout.write(chalk.yellow('\n  No saved credentials. Setting up iCli.\n\n'));
+    process.stdout.write(P.warn('\n  No saved credentials. Setting up iCli.\n\n'));
     cfg = await loginFlow();
-    process.stdout.write(
-      '\n  ' + chalk.green('✓') + ' Logged in as ' +
+    process.stdout.write('\n  ' + P.ok('✓') + ' Logged in as ' +
       chalk.white(cfg.user?.name ?? cfg.user?.email) +
-      dim(' · ' + (cfg.user?.role ?? 'operator')) + '\n\n'
-    );
+      P.dim(' · ' + (cfg.user?.role ?? 'operator')) + '\n\n');
   }
   return cfg;
 }
@@ -87,16 +97,11 @@ function slashToQuestion(line) {
 
 // ── Single-shot ────────────────────────────────────────────────────────────────
 async function singleShot(cfg, question) {
-  // Copilot CLI style: role label then content, separated by blank lines
-  process.stdout.write('\n  ' + chalk.hex('#4493F8').bold('You') + '\n');
-  process.stdout.write('  ' + chalk.white(question) + '\n\n');
-  process.stdout.write(rule() + '\n\n');
-  process.stdout.write('  ' + chalk.bold.white('iCopilot') + '\n');
-
+  printUserBox(question);
   try {
     await streamChat(cfg, [{ role: 'user', content: question }]);
   } catch (e) {
-    process.stdout.write('\n  ' + chalk.red('✖ ') + chalk.white(e.message) + '\n\n');
+    process.stdout.write('\n  ' + P.err('✖ ') + chalk.white(e.message) + '\n\n');
     exit(1);
   }
 }
@@ -105,30 +110,26 @@ async function singleShot(cfg, question) {
 async function interactiveRepl(cfg) {
   const history       = [];
   let   showReasoning = true;
+  const PROMPT        = () => '  ' + P.accentD('❯') + ' ';
 
   printBanner(cfg);
 
-  // Copilot CLI uses `> ` style prompt
-  const PROMPT = '  ' + chalk.hex('#4493F8').bold('>') + ' ';
-
   const rl = createInterface({
     input, output,
-    prompt:    PROMPT,
+    prompt:    PROMPT(),
     completer: slashCompleter,
     terminal:  true,
   });
 
-  process.stdout.on('resize', () => rl.setPrompt(PROMPT));
-
+  onResize(() => rl.setPrompt(PROMPT()));
   rl.prompt();
 
   rl.on('line', async (line) => {
     const q = line.trim();
     if (!q) { rl.prompt(); return; }
 
-    // ── Built-in commands ──────────────────────────────────────────────────
     if (q === '/exit' || q === 'exit' || q === 'quit') {
-      process.stdout.write(tertiary('\n  Goodbye.\n\n')); rl.close(); exit(0);
+      process.stdout.write(P.muted('\n  Goodbye.\n\n')); rl.close(); exit(0);
     }
     if (q === '/clear' || q === 'clear') {
       process.stdout.write('\x1Bc'); printBanner(cfg); rl.prompt(); return;
@@ -137,59 +138,46 @@ async function interactiveRepl(cfg) {
     if (q === '/history' || q === 'history') {
       const turns = history.filter(m => m.role === 'user');
       if (!turns.length) {
-        process.stdout.write(tertiary('\n  No history yet.\n\n'));
+        process.stdout.write(P.muted('\n  No history yet.\n\n'));
       } else {
-        process.stdout.write('\n');
+        process.stdout.write('\n' + boxTop('History', P.border) + '\n');
         turns.forEach((m, i) =>
-          process.stdout.write('  ' + dim(String(i+1).padStart(2)+'.') + ' ' + chalk.white(m.content.slice(0, cols()-8)) + '\n')
+          process.stdout.write(boxRow(P.dim(String(i+1).padStart(2)+'.') + ' ' +
+            chalk.white(m.content.slice(0, inner() - 5)), P.border) + '\n')
         );
-        process.stdout.write('\n');
+        process.stdout.write(boxBot(P.border) + '\n\n');
       }
       rl.prompt(); return;
     }
     if (q === '/') { printSlashMenu(); rl.prompt(); return; }
 
-    // ── Resolve slash command ──────────────────────────────────────────────
     let question = q;
     if (q.startsWith('/')) {
       const resolved = slashToQuestion(q);
       if (resolved) {
         question = resolved;
-        process.stdout.write('  ' + tertiary('→ ') + dim(question) + '\n');
+        process.stdout.write('  ' + P.muted('→ ') + P.dim(question) + '\n');
       }
     }
 
     rl.pause();
     history.push({ role: 'user', content: question });
 
-    // Role separator — Copilot CLI style blank-line + label pattern
-    process.stdout.write('\n' + rule() + '\n\n');
-    process.stdout.write('  ' + chalk.bold.white('iCopilot') + '\n');
+    // User message box
+    printUserBox(question);
 
     try {
       const answer = await streamChat(cfg, [...history], {}, { thinking: showReasoning });
       if (answer) history.push({ role: 'assistant', content: answer });
     } catch (e) {
-      process.stdout.write('\n  ' + chalk.red('✖ ') + chalk.white(e.message) + '\n\n');
+      process.stdout.write('\n  ' + P.err('✖ ') + chalk.white(e.message) + '\n\n');
     }
 
-    process.stdout.write(rule() + '\n\n');
     rl.resume();
     rl.prompt();
   });
 
-  // Ctrl+T toggles reasoning (matches Copilot CLI Ctrl+T)
-  if (input.setRawMode) {
-    process.stdin.on('keypress', (str, key) => {
-      if (key?.ctrl && key?.name === 't') {
-        showReasoning = !showReasoning;
-        process.stdout.write(tertiary(`\n  Reasoning ${showReasoning ? 'on' : 'off'}\n\n`));
-        rl.prompt();
-      }
-    });
-  }
-
-  rl.on('close', () => { process.stdout.write(tertiary('\n  Goodbye.\n\n')); exit(0); });
+  rl.on('close', () => { process.stdout.write(P.muted('\n  Goodbye.\n\n')); exit(0); });
 }
 
 // ── Main ───────────────────────────────────────────────────────────────────────
@@ -198,31 +186,26 @@ async function main() {
 
   if (cmd === 'login') {
     const cfg = await loginFlow();
-    process.stdout.write(
-      '\n  ' + chalk.green('✓') + ' Logged in as ' +
+    process.stdout.write('\n  ' + P.ok('✓') + ' Logged in as ' +
       chalk.white(cfg.user?.name ?? cfg.user?.email) +
-      dim(' · ' + (cfg.user?.role ?? 'operator')) + '\n'
-    );
-    process.stdout.write('  ' + dim('Config: ' + configPath()) + '\n\n');
+      P.dim(' · ' + (cfg.user?.role ?? 'operator')) + '\n');
+    process.stdout.write('  ' + P.dim('Config: ' + configPath()) + '\n\n');
     return;
   }
 
   if (cmd === 'whoami') {
     const cfg = loadConfig();
     if (!cfg) {
-      process.stdout.write('\n  ' + chalk.yellow('Not logged in.') + ' Run ' + accent('icli login') + '\n\n');
+      process.stdout.write('\n  ' + P.warn('Not logged in.') + ' Run ' + P.accent('icli login') + '\n\n');
       return;
     }
-    process.stdout.write('\n' + rule() + '\n');
-    [
-      ['url',   cfg.url],
-      ['name',  cfg.user?.name],
-      ['email', cfg.user?.email],
-      ['role',  cfg.user?.role],
-    ].forEach(([k, v]) => {
-      if (v) process.stdout.write('  ' + dim(k.padEnd(7)) + chalk.white(v) + '\n');
-    });
-    process.stdout.write(rule() + '\n\n');
+    process.stdout.write('\n' + boxTop('Session', P.border) + '\n');
+    [['url', cfg.url], ['name', cfg.user?.name], ['email', cfg.user?.email], ['role', cfg.user?.role]]
+      .filter(([, v]) => v)
+      .forEach(([k, v]) =>
+        process.stdout.write(boxRow(P.dim(k.padEnd(7)) + chalk.white(v), P.border) + '\n')
+      );
+    process.stdout.write(boxBot(P.border) + '\n\n');
     return;
   }
 
@@ -237,6 +220,6 @@ async function main() {
 }
 
 main().catch(e => {
-  process.stdout.write('\n  ' + chalk.red('✖ ') + chalk.white(e.message) + '\n\n');
+  process.stdout.write('\n  ' + P.err('✖ ') + chalk.white(e.message) + '\n\n');
   exit(1);
 });

package/package.json

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

package/src/chat.js

@@ -3,38 +3,37 @@ import ora from 'ora';
 import { marked } from 'marked';
 import TerminalRenderer from 'marked-terminal';
 import { refreshToken } from './auth.js';
-
-// ── Copilot CLI colour palette (matched from app.js theme tokens) ─────────────
-const C = {
-  textPrimary:    chalk.white,
-  textSecondary:  chalk.hex('#9198A1'),
-  textTertiary:   chalk.hex('#6e7781'),
-  accent:         chalk.hex('#4493F8'),
-  border:         chalk.hex('#3D444D'),
-  userLabel:      chalk.hex('#4493F8').bold,    // same as selected/accent
-  assistantLabel: chalk.white.bold,
-  statusOk:       chalk.green,
-  statusErr:      chalk.red,
-  statusWarn:     chalk.yellow,
-  code:           chalk.hex('#79c0ff'),          // syntaxString dark
-  codeBg:         chalk.bgHex('#161b22').hex('#c9d1d9'),
+import { cols, inner, visLen, padRight, stripAnsi,
+         boxTop, boxMid, boxBot, boxTopOpen, boxBotOpen,
+         boxRow, boxLine } from './layout.js';
+
+// ── Copilot CLI palette ────────────────────────────────────────────────────────
+const P = {
+  border:    chalk.hex('#3D444D'),
+  dim:       chalk.hex('#9198A1'),
+  muted:     chalk.hex('#6e7781'),
+  accent:    chalk.hex('#4493F8'),
+  accentB:   chalk.hex('#4493F8').bold,
+  white:     chalk.white,
+  bold:      chalk.bold.white,
+  ok:        chalk.green,
+  err:       chalk.red,
+  warn:      chalk.yellow,
+  cyan:      chalk.cyan,
+  reasoning: chalk.hex('#9198A1').italic,
 };
 
-// ── Layout ────────────────────────────────────────────────────────────────────
-export const cols = () => Math.min((process.stdout.columns || 80), 88);
-const rule = (ch = '─') => C.border('  ' + ch.repeat(Math.max(0, cols() - 4)));
-
-// ── Markdown (matched to Copilot CLI syntax colours) ──────────────────────────
+// ── Markdown ───────────────────────────────────────────────────────────────────
 marked.setOptions({ renderer: new TerminalRenderer({
   firstHeading: chalk.bold.white,
   heading:      chalk.bold.white,
   strong:       chalk.bold.white,
   em:           chalk.italic.hex('#9198A1'),
   codespan:     (t) => chalk.bgHex('#161b22').hex('#c9d1d9')(` ${t} `),
-  code:         (t) => '\n' + t.split('\n').map(l => '    ' + chalk.hex('#c9d1d9')(l)).join('\n') + '\n',
-  blockquote:   (t) => C.textSecondary('  ▌ ' + t.trim()),
-  listitem:     (t) => `  ${C.accent('·')} ${t.trimEnd()}`,
-  hr:           () => rule() + '\n',
+  code:         (t) => '\n' + t.split('\n').map(l => '    ' + chalk.hex('#a5d6ff')(l)).join('\n') + '\n',
+  blockquote:   (t) => P.dim('  ▌ ') + P.dim(t.trim()),
+  listitem:     (t) => `  ${P.accent('·')} ${t.trimEnd()}`,
+  hr:           () => P.border('─'.repeat(inner())) + '\n',
   link:         (_h, _t, t) => chalk.hex('#58a6ff').underline(t || _h),
 }) });
 
@@ -42,50 +41,68 @@ function renderMarkdown(text) {
   try { return marked(text).trimEnd(); } catch { return text; }
 }
 
-// ── Status icon (same pattern, cleaner) ───────────────────────────────────────
+// ── Status icon ────────────────────────────────────────────────────────────────
 function statusIcon(line) {
   const l = line.toLowerCase();
-  if (/unreachable|skip|fail|error/.test(l))        return C.statusErr('✗');
-  if (/done|success|found|complet|online/.test(l))  return C.statusOk('✓');
-  if (/batch|sub.?agent|fleet|parallel/.test(l))    return C.accent('◈');
-  if (/\[\d+\/\d+\]/.test(l))                       return C.accent('◉');
-  if (/probe|reachab|ping/.test(l))                 return C.statusWarn('◎');
-  if (/read|fetch|get|query/.test(l))               return C.textSecondary('↓');
-  if (/connect|ssh|telnet|api/.test(l))             return C.accent('⇢');
-  if (/⌁/.test(line))                               return C.border('⌁');
-  return C.border('›');
+  if (/unreachable|skip|fail|error/.test(l))        return P.err('✗');
+  if (/done|success|found|complet|online/.test(l))  return P.ok('✓');
+  if (/batch|sub.?agent|fleet|parallel/.test(l))    return P.accentB('◈');
+  if (/\[\d+\/\d+\]/.test(l))                       return P.accent('◉');
+  if (/probe|reachab|ping/.test(l))                 return P.warn('◎');
+  if (/connect|ssh|telnet|api/.test(l))             return P.accent('⇢');
+  if (/read|fetch|get|query/.test(l))               return P.dim('↓');
+  if (/⌁/.test(line))                               return P.border('⌁');
+  return P.border('›');
 }
 
-// ── Banner (Copilot CLI style: label · info · shortcuts) ─────────────────────
+const shortModel = (m) =>
+  m.replace('openai/', '').replace(/^claude-/, '').replace(/^gpt-/, 'gpt-');
+
+// ── Banner ────────────────────────────────────────────────────────────────────
 export function printBanner(cfg, meta = {}) {
   const model = meta.model ? shortModel(meta.model) : (cfg?._model ?? null);
+  const w     = cols();
+
   process.stdout.write('\n');
 
-  // Title row — bold label, dim subtitle
-  process.stdout.write(
-    '  ' + chalk.bold.white('iCopilot') +
-    C.textSecondary('  ·  IspBills AI Network Engineer') + '\n'
-  );
-
-  // Session info row (model · user · role) — matches Copilot CLI footer format
-  const parts = [];
-  if (model)           parts.push(C.textSecondary('model ') + chalk.white(model));
-  if (cfg?.user?.name) parts.push(C.textSecondary('user ')  + chalk.white(cfg.user.name));
-  if (cfg?.user?.role) parts.push(C.textSecondary('role ')  + chalk.white(cfg.user.role));
-  if (cfg?.url)        parts.push(C.textSecondary('url ')   + C.accent(cfg.url));
-  if (parts.length) {
-    process.stdout.write('  ' + parts.join(C.textSecondary('  ·  ')) + '\n');
+  // Top border
+  process.stdout.write(boxTop('', P.border) + '\n');
+
+  // Title row
+  const title = P.bold('iCopilot') + P.dim('  ·  IspBills AI Network Engineer');
+  process.stdout.write(boxRow(title, P.border) + '\n');
+
+  // Divider
+  process.stdout.write(boxMid(P.border) + '\n');
+
+  // Session info rows
+  const row1parts = [];
+  if (model)           row1parts.push(P.dim('model ') + P.white(model));
+  if (cfg?.user?.name) row1parts.push(P.dim('user ')  + P.white(cfg.user.name));
+  if (cfg?.user?.role) row1parts.push(P.dim('role ')  + P.white(cfg.user.role));
+  if (row1parts.length) {
+    process.stdout.write(boxRow(row1parts.join(P.dim('  ·  ')), P.border) + '\n');
+  }
+  if (cfg?.url) {
+    const maxUrl = inner() - 6;
+    const url    = cfg.url.length > maxUrl ? cfg.url.slice(0, maxUrl - 1) + '…' : cfg.url;
+    process.stdout.write(boxRow(P.dim('url  ') + P.accent(url), P.border) + '\n');
   }
 
-  // Hint row — matches Copilot CLI shortcut hints
-  process.stdout.write(
-    C.textTertiary('  /  commands    Tab  autocomplete    ↑↓  history    Ctrl+C  exit') + '\n'
-  );
-  process.stdout.write(rule() + '\n\n');
-}
+  // Divider
+  process.stdout.write(boxMid(P.border) + '\n');
 
-function shortModel(m) {
-  return m.replace('openai/', '').replace(/^claude-/, '').replace(/^gpt-/, 'gpt-');
+  // Hints row
+  const hints = [
+    P.accentB('/') + P.muted(' commands'),
+    P.accentB('Tab') + P.muted(' autocomplete'),
+    P.accentB('↑↓') + P.muted(' history'),
+    P.accentB('Ctrl+C') + P.muted(' exit'),
+  ].join(P.muted('    '));
+  process.stdout.write(boxRow(hints, P.border) + '\n');
+
+  // Bottom border
+  process.stdout.write(boxBot(P.border) + '\n\n');
 }
 
 // ── Slash commands ─────────────────────────────────────────────────────────────
@@ -104,12 +121,13 @@ export const SLASH_COMMANDS = [
 
 export function printSlashMenu() {
   process.stdout.write('\n');
-  process.stdout.write(chalk.bold.white('  Commands') + C.textTertiary('  (Tab to autocomplete)\n\n'));
+  process.stdout.write(boxTop('Commands', P.border) + '\n');
   for (const { cmd: c, hint, desc } of SLASH_COMMANDS) {
-    const key = (c + (hint ? ' ' + hint : '')).padEnd(22);
-    process.stdout.write('  ' + C.accent(key) + C.textSecondary(desc) + '\n');
+    const key  = P.accentB(c) + (hint ? P.dim(' ' + hint) : '');
+    const line = padRight(key, 22) + '  ' + P.dim(desc);
+    process.stdout.write(boxRow(line, P.border) + '\n');
   }
-  process.stdout.write('\n');
+  process.stdout.write(boxBot(P.border) + '\n\n');
 }
 
 export function slashCompleter(line) {
@@ -120,6 +138,26 @@ export function slashCompleter(line) {
   return [[], line];
 }
 
+// ── User message box ───────────────────────────────────────────────────────────
+export function printUserBox(question) {
+  process.stdout.write('\n');
+  process.stdout.write(boxTop('You', P.accentB) + '\n');
+  // Word-wrap the question to fit inside the box
+  const maxW  = inner();
+  const words = question.split(' ');
+  let   line  = '';
+  for (const word of words) {
+    if (line.length + word.length + 1 > maxW && line) {
+      process.stdout.write(boxRow(P.white(line), P.accentB) + '\n');
+      line = word;
+    } else {
+      line = line ? line + ' ' + word : word;
+    }
+  }
+  if (line) process.stdout.write(boxRow(P.white(line), P.accentB) + '\n');
+  process.stdout.write(boxBot(P.accentB) + '\n');
+}
+
 // ── streamChat ────────────────────────────────────────────────────────────────
 export async function streamChat(cfg, messages, context = {}, opts = {}) {
   const showThinking = opts.thinking !== false;
@@ -149,17 +187,26 @@ export async function streamChat(cfg, messages, context = {}, opts = {}) {
     throw new Error(`AI request failed (HTTP ${res.status}): ${txt.slice(0, 200)}`);
   }
 
-  // ── Render state ───────────────────────────────────────────────────────────
-  let reasoningOpen = false;    // true while inside a live reasoning block
+  // ── Streaming state ─────────────────────────────────────────────────────────
+  let boxOpen       = false;   // have we printed ╭─ iCopilot ?
+  let reasoningOpen = false;
   let answerBuf     = '';
   let rawAnswer     = '';
   let finalResult   = null;
 
+  // Open the iCopilot response box
+  function ensureBoxOpen() {
+    if (boxOpen) return;
+    boxOpen = true;
+    process.stdout.write('\n' + boxTopOpen('iCopilot', P.border) + '\n');
+  }
+
+  // Ora spinner — sits on a │  prefixed line
   const spinner = ora({
-    text:       C.textSecondary('Thinking…'),
+    text:       P.dim('Thinking…'),
     color:      'blue',
     spinner:    'dots',
-    prefixText: '  ',
+    prefixText: P.border('│') + '  ',
   });
 
   const stopSpinner = () => { if (spinner.isSpinning) spinner.stop(); };
@@ -168,33 +215,34 @@ export async function streamChat(cfg, messages, context = {}, opts = {}) {
     if (reasoningOpen) return;
     stopSpinner();
     reasoningOpen = true;
-    // Copilot CLI style: label then indented content
-    process.stdout.write('\n  ' + C.textSecondary('Reasoning') + '\n');
-    process.stdout.write(C.border('  │ '));
+    process.stdout.write(boxLine('', P.border) + '\n');
+    process.stdout.write(boxLine(P.dim('╌ Reasoning ') + P.border('╌'.repeat(Math.max(0, inner() - 14))), P.border) + '\n');
+    process.stdout.write(boxLine(P.border('│ '), P.border));
   }
 
   function writeReasonDelta(delta) {
     if (!reasoningOpen) return;
     const parts = delta.split('\n');
     for (let i = 0; i < parts.length; i++) {
-      if (i > 0) process.stdout.write('\n' + C.border('  │ '));
-      if (parts[i]) process.stdout.write(C.textSecondary(parts[i]));
+      if (i > 0) process.stdout.write('\n' + boxLine(P.border('│ '), P.border));
+      if (parts[i]) process.stdout.write(P.reasoning(parts[i]));
     }
   }
 
   function closeReasoning() {
     if (!reasoningOpen) return;
-    process.stdout.write('\n\n');
+    process.stdout.write('\n' + boxLine('', P.border) + '\n');
     reasoningOpen = false;
   }
 
   function printStatus(line) {
+    ensureBoxOpen();
     if (reasoningOpen) closeReasoning();
     stopSpinner();
     const icon   = statusIcon(line);
     const text   = line.trimStart();
-    const indent = /^[\s·•⌁]/.test(line) ? '    ' : '  ';
-    process.stdout.write(indent + icon + ' ' + C.textSecondary(text) + '\n');
+    const indent = /^[\s·•⌁]/.test(line) ? '  ' : '';
+    process.stdout.write(boxLine(indent + icon + ' ' + P.dim(text), P.border) + '\n');
     if (showThinking) spinner.start();
   }
 
@@ -206,7 +254,8 @@ export async function streamChat(cfg, messages, context = {}, opts = {}) {
   }
 
   // ── SSE reader ─────────────────────────────────────────────────────────────
-  if (showThinking) spinner.start();
+  if (showThinking) { ensureBoxOpen(); spinner.start(); }
+
   const decoder = new TextDecoder();
   let sseBuffer = '';
 
@@ -223,7 +272,8 @@ export async function streamChat(cfg, messages, context = {}, opts = {}) {
       if (ev.status_delta !== undefined) {
         printStatus(ev.status_delta);
       } else if (ev.reason_delta !== undefined) {
-        if (!reasoningOpen) openReasoning();       // re-open after STATUS closes it
+        ensureBoxOpen();
+        if (!reasoningOpen) openReasoning();
         writeReasonDelta(ev.reason_delta);
       } else if (ev.delta !== undefined) {
         if (reasoningOpen) closeReasoning();
@@ -237,56 +287,58 @@ export async function streamChat(cfg, messages, context = {}, opts = {}) {
     }
   }
 
-  // ── Final render ───────────────────────────────────────────────────────────
+  // ── Final render ─────────────────────────────────────────────────────────────
   stopSpinner();
   if (reasoningOpen) closeReasoning();
+  ensureBoxOpen();
 
   const reply     = finalResult?.reply ?? {};
   const replyType = reply.type ?? 'message';
   const meta      = finalResult?._meta ?? {};
 
-  // Save model to cfg for banner re-use
   if (meta.model && cfg) cfg._model = shortModel(meta.model);
 
-  // Content separator (same as Copilot CLI visual spacing)
-  process.stdout.write('\n');
+  // Blank separator before content
+  process.stdout.write(boxLine('', P.border) + '\n');
 
   if (replyType === 'message') {
-    const text = reply.text || answerBuf || '(no response)';
-    process.stdout.write(renderMarkdown(text).split('\n').map(l => '  ' + l).join('\n') + '\n');
+    const text     = reply.text || answerBuf || '(no response)';
+    const rendered = renderMarkdown(text);
+    for (const l of rendered.split('\n')) {
+      process.stdout.write(boxLine(l, P.border) + '\n');
+    }
 
   } else if (replyType === 'plan') {
-    process.stdout.write('  ' + chalk.bold.white('Plan') + '\n');
-    if (reply.summary) process.stdout.write('  ' + C.textSecondary(reply.summary) + '\n');
-    process.stdout.write('\n');
+    process.stdout.write(boxLine(P.bold('Plan'), P.border) + '\n');
+    if (reply.summary) process.stdout.write(boxLine(P.dim(reply.summary), P.border) + '\n');
+    process.stdout.write(boxLine('', P.border) + '\n');
     (reply.steps || []).forEach((s, i) => {
-      const risk = s.risk === 'high'   ? C.statusErr(' ⚠ high risk') :
-                   s.risk === 'medium' ? C.statusWarn(' ⚡') : '';
-      process.stdout.write(`  ${C.textSecondary(String(i+1)+'.')}  ${chalk.yellow(s.cmd || '')}${risk}\n`);
-      if (s.purpose) process.stdout.write(C.textTertiary(`       ${s.purpose}\n`));
+      const risk = s.risk === 'high'   ? P.err(' ⚠ high risk') :
+                   s.risk === 'medium' ? P.warn(' ⚡') : '';
+      process.stdout.write(boxLine(`${P.dim(String(i+1)+'.')}  ${P.warn(s.cmd || '')}${risk}`, P.border) + '\n');
+      if (s.purpose) process.stdout.write(boxLine('     ' + P.muted(s.purpose), P.border) + '\n');
     });
-    process.stdout.write('\n' + C.textSecondary('  Reply ') + chalk.white('apply fix') + C.textSecondary(' to confirm.\n'));
+    process.stdout.write(boxLine('', P.border) + '\n');
+    process.stdout.write(boxLine(P.dim('Type ') + P.white('apply fix') + P.dim(' to confirm.'), P.border) + '\n');
 
   } else if (replyType === 'connect') {
     const dev = reply.device ?? {};
     process.stdout.write(
-      '  ' + C.statusOk('🔌 ') +
-      chalk.bold.white(`${dev.kind ?? '?'}#${dev.id ?? '?'}`) + ' ' +
-      chalk.white(dev.name ?? '') + ' ' +
-      C.textSecondary(`(${dev.host ?? ''})`) + '\n'
+      boxLine(P.ok('🔌 ') + P.bold(`${dev.kind ?? '?'}#${dev.id ?? '?'}`) +
+        ' ' + P.white(dev.name ?? '') + ' ' + P.dim(`(${dev.host ?? ''})`), P.border) + '\n'
     );
-    if (reply.note) process.stdout.write(C.textSecondary('  ' + reply.note) + '\n');
+    if (reply.note) process.stdout.write(boxLine(P.dim(reply.note), P.border) + '\n');
   }
 
-  // ── Footer — matches Copilot CLI status bar format: model · user · ... ──────
-  process.stdout.write('\n');
-  const footParts = [];
-  if (meta.model) footParts.push(shortModel(meta.model));
-  if (meta.user)  footParts.push(meta.user);
-  if (meta.role)  footParts.push(meta.role);
-  if (footParts.length) {
-    process.stdout.write(C.textTertiary('  ' + footParts.join(' · ')) + '\n');
+  // Blank + footer line inside box
+  process.stdout.write(boxLine('', P.border) + '\n');
+  const foot = [meta.model ? shortModel(meta.model) : null, meta.user, meta.role].filter(Boolean);
+  if (foot.length) {
+    process.stdout.write(boxLine(P.muted(foot.join(' · ')), P.border) + '\n');
   }
 
+  // Close the box
+  process.stdout.write(boxBotOpen(P.border) + '\n\n');
+
   return reply.text || answerBuf || '';
 }

package/src/layout.js

@@ -0,0 +1,75 @@
+// ── Terminal width ─────────────────────────────────────────────────────────────
+export function termCols() {
+  if (process.stdout.isTTY  && process.stdout.columns  > 0) return process.stdout.columns;
+  if (process.stderr.isTTY  && process.stderr.columns  > 0) return process.stderr.columns;
+  const env = parseInt(process.env.COLUMNS || process.env.TERM_WIDTH || '0');
+  if (env > 0) return env;
+  return 80;
+}
+export const cols    = () => Math.max(40, termCols());
+export const inner   = () => cols() - 4;           // usable width inside │  …  │
+export const onResize = (cb) => {
+  process.stdout.on('resize', cb);
+  process.stderr.on('resize', cb);
+};
+
+// ── ANSI-aware string helpers ─────────────────────────────────────────────────
+const RE_ANSI = /\x1b\[[^m]*m/g;
+export const stripAnsi  = (s) => s.replace(RE_ANSI, '');
+export const visLen     = (s) => [...stripAnsi(s)].length;   // Unicode-safe
+export const padRight   = (s, n) => s + ' '.repeat(Math.max(0, n - visLen(s)));
+
+// ── Box-drawing helpers (rounded corners) ─────────────────────────────────────
+// draw(color, char, n)  — repeat char n times with color
+const rep = (ch, n) => ch.repeat(Math.max(0, n));
+
+/** Full top border:   ╭─ [label] ──────────────╮
+ *  ╭  (1) + ─ (1) + lbl (lbl.len) + dash + ╮ (1) = w
+ *  → dash = w - 3 - lbl.length              */
+export function boxTop(label, borderFn) {
+  const w   = cols();
+  const lbl = label ? ` ${label} ` : '';
+  if (lbl.length) {
+    const dash = rep('─', Math.max(0, w - 3 - lbl.length));
+    return borderFn(`╭─${lbl}${dash}╮`);
+  }
+  return borderFn('╭' + rep('─', w - 2) + '╮');
+}
+
+/** Divider inside box: ├────────────────────────┤ */
+export function boxMid(borderFn) {
+  return borderFn('├' + rep('─', cols() - 2) + '┤');
+}
+
+/** Full bottom border: ╰──────────────────────────╯ */
+export function boxBot(borderFn) {
+  return borderFn('╰' + rep('─', cols() - 2) + '╯');
+}
+
+/** Open top border (no right cap — for streaming sections):
+ *  ╭─ [label] ────────────────────────────── */
+export function boxTopOpen(label, borderFn) {
+  const w   = cols();
+  const lbl = label ? ` ${label} ` : '';
+  const dash = rep('─', Math.max(0, w - 2 - lbl.length));
+  return borderFn(`╭─${lbl}${dash}`);
+}
+
+/** Open bottom border: ╰───────────────────────── */
+export function boxBotOpen(borderFn) {
+  return borderFn('╰' + rep('─', cols() - 1));
+}
+
+/** One content row with left border and padded right border:
+ *  │  [content]                │
+ *  1 + 2 + visLen(content) + pad + 1 = cols()  → pad = cols()-4-visLen(content) */
+export function boxRow(content, borderFn) {
+  const w   = cols();
+  const pad = Math.max(1, w - 4 - visLen(content));
+  return borderFn('│') + '  ' + content + ' '.repeat(pad) + borderFn('│');
+}
+
+/** Left-border only line (for streaming):  │  [content] */
+export function boxLine(content, borderFn) {
+  return borderFn('│') + '  ' + content;
+}