ispbills-icli 2.0.0 → 4.0.0

package/bin/icli.js

@@ -1,174 +1,225 @@
 #!/usr/bin/env node
-import * as readline from 'readline/promises';
+import { createInterface } from 'readline';
 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 { streamChat, printBanner } from '../src/chat.js';
+import { cols, inner, onResize, boxTop, boxBot, boxMid, boxRow, boxTopOpen, boxBotOpen } from '../src/layout.js';
+import {
+  streamChat, printBanner, printSlashMenu, printUserBox,
+  SLASH_COMMANDS, slashCompleter,
+} from '../src/chat.js';
+
+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,
+};
 
-// ─── Parse args ─────────────────────────────────────────────────────────────
 const args = argv.slice(2);
 const cmd  = args[0] ?? '';
 
-// ─── Help ────────────────────────────────────────────────────────────────────
+// ── Help ───────────────────────────────────────────────────────────────────────
 function printHelp() {
-  const line = '─'.repeat(58);
-  console.log('\n' + chalk.cyan('  ╭' + line + '╮'));
-  console.log(chalk.cyan('  │  ') + chalk.bold.white('iCli') + chalk.dim('  —  IspBills AI Terminal') + ' '.repeat(28) + chalk.cyan('  │'));
-  console.log(chalk.cyan('  ╰' + line + '╯') + '\n');
-
-  console.log(chalk.bold('  Usage\n'));
-  console.log('  ' + chalk.cyan('icli') + '                     ' + chalk.dim('Interactive REPL'));
-  console.log('  ' + chalk.cyan('icli') + ' ' + chalk.yellow('"your question"') + '    ' + chalk.dim('Single-shot query'));
-  console.log('  ' + chalk.cyan('icli login') + '               ' + chalk.dim('Authenticate'));
-  console.log('  ' + chalk.cyan('icli whoami') + '              ' + chalk.dim('Show current login'));
-  console.log('  ' + chalk.cyan('icli --help') + '              ' + chalk.dim('Show this help'));
-
-  console.log('\n' + chalk.bold('  Examples\n'));
-  console.log('  ' + chalk.dim('$') + ' icli "is vlan 82 in use?"');
-  console.log('  ' + chalk.dim('$') + ' icli "show all ONUs on olt#1"');
-  console.log('  ' + chalk.dim('$') + ' icli "which customer is using IP 192.168.1.50?"');
-  console.log('  ' + chalk.dim('$') + ' icli' + chalk.dim('  # start interactive REPL'));
-
-  console.log('\n' + chalk.bold('  Config\n'));
-  console.log('  ' + chalk.dim(configPath()) + '\n');
+  process.stdout.write('\n');
+  process.stdout.write(boxTop('iCli  ·  Help', P.border) + '\n');
+
+  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'],
+  ].forEach(([c, d]) =>
+    process.stdout.write(boxRow('  ' + P.accent(c.padEnd(20)) + P.dim(d), P.border) + '\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(boxRow('  ' + P.accent(key) + P.dim(desc), P.border) + '\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(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');
 }
 
-// ─── Ensure authenticated ────────────────────────────────────────────────────
+// ── Auth ───────────────────────────────────────────────────────────────────────
 async function ensureAuth() {
   let cfg = loadConfig();
   if (!cfg) {
-    console.log(chalk.yellow('\n  No saved login found. Let\'s connect iCli.\n'));
+    process.stdout.write(P.warn('\n  No saved credentials. Setting up iCli.\n\n'));
     cfg = await loginFlow();
-    console.log('\n  ' + chalk.green('✓') + ' Logged in as ' +
+    process.stdout.write('\n  ' + P.ok('✓') + ' Logged in as ' +
       chalk.white(cfg.user?.name ?? cfg.user?.email) +
-      chalk.dim(' · ' + (cfg.user?.role ?? 'operator')));
-    console.log('  ' + chalk.dim('Connected to: ') + chalk.cyan(cfg.url) + '\n');
+      P.dim(' · ' + (cfg.user?.role ?? 'operator')) + '\n\n');
   }
   return cfg;
 }
 
-// ─── Single-shot query ───────────────────────────────────────────────────────
-async function singleShot(cfg, question) {
-  // Show the user's own message
-  process.stdout.write('\n  ' + chalk.cyan('You  ') + chalk.white(question) + '\n');
-  process.stdout.write('  ' + chalk.dim('─'.repeat(58)) + '\n');
-  process.stdout.write('  ' + chalk.bold.cyan('iCopilot') + '\n');
+// ── Slash → question ───────────────────────────────────────────────────────────
+function slashToQuestion(line) {
+  const [sc, ...rest] = line.trim().split(/\s+/);
+  const arg = rest.join(' ');
+  switch (sc) {
+    case '/check':    return arg ? `run diagnostics on ${arg}` : 'check status of all devices';
+    case '/vlan':     return arg ? `is vlan ${arg} in use or free?` : 'list all vlans in use';
+    case '/onu':      return arg ? `show ONU ${arg} status and signal level` : 'list all ONUs';
+    case '/customer': return arg ? `look up customer ${arg}` : 'show recent customers';
+    case '/ping':     return arg ? `ping ${arg} through the network` : 'which devices are reachable?';
+    case '/online':   return 'list currently online PPPoE sessions';
+    default:          return null;
+  }
+}
 
-  const messages = [{ role: 'user', content: question }];
+// ── Single-shot ────────────────────────────────────────────────────────────────
+async function singleShot(cfg, question) {
+  printUserBox(question);
   try {
-    await streamChat(cfg, messages);
+    await streamChat(cfg, [{ role: 'user', content: question }]);
   } catch (e) {
-    console.error('\n  ' + chalk.red('✖ ' + e.message) + '\n');
+    process.stdout.write('\n  ' + P.err('✖ ') + chalk.white(e.message) + '\n\n');
     exit(1);
   }
 }
 
-// ─── Interactive REPL ────────────────────────────────────────────────────────
+// ── REPL ───────────────────────────────────────────────────────────────────────
 async function interactiveRepl(cfg) {
-  const history = [];
+  const history       = [];
+  let   showReasoning = true;
+  const PROMPT        = () => '  ' + P.accentD('❯') + ' ';
 
   printBanner(cfg);
 
-  const rl = readline.createInterface({
+  const rl = createInterface({
     input, output,
-    prompt: chalk.cyan('  You  ') + chalk.white(''),
+    prompt:    PROMPT(),
+    completer: slashCompleter,
+    terminal:  true,
   });
 
+  onResize(() => rl.setPrompt(PROMPT()));
   rl.prompt();
 
   rl.on('line', async (line) => {
     const q = line.trim();
     if (!q) { rl.prompt(); return; }
 
-    if (q === 'exit' || q === 'quit') {
-      console.log(chalk.dim('\n  Goodbye.\n'));
-      rl.close();
-      exit(0);
+    if (q === '/exit' || q === 'exit' || q === 'quit') {
+      process.stdout.write(P.muted('\n  Goodbye.\n\n')); rl.close(); exit(0);
     }
-    if (q === 'clear') { console.clear(); printBanner(cfg); rl.prompt(); return; }
-    if (q === 'history') {
-      console.log('');
-      history.filter(m => m.role === 'user').forEach((m, i) => {
-        console.log('  ' + chalk.dim(String(i + 1) + '.') + ' ' + m.content.slice(0, 80));
-      });
-      console.log('');
-      rl.prompt();
-      return;
+    if (q === '/clear' || q === 'clear') {
+      process.stdout.write('\x1Bc'); printBanner(cfg); rl.prompt(); return;
+    }
+    if (q === '/help' || q === 'help') { printHelp(); rl.prompt(); return; }
+    if (q === '/history' || q === 'history') {
+      const turns = history.filter(m => m.role === 'user');
+      if (!turns.length) {
+        process.stdout.write(P.muted('\n  No history yet.\n\n'));
+      } else {
+        process.stdout.write('\n' + boxTop('History', P.border) + '\n');
+        turns.forEach((m, i) =>
+          process.stdout.write(boxRow('  ' + P.dim(String(i+1).padStart(2)+'.') + ' ' +
+            chalk.white(m.content.slice(0, inner() - 8)), P.border) + '\n')
+        );
+        process.stdout.write(boxBot(P.border) + '\n\n');
+      }
+      rl.prompt(); return;
+    }
+    if (q === '/') { printSlashMenu(); rl.prompt(); return; }
+
+    let question = q;
+    if (q.startsWith('/')) {
+      const resolved = slashToQuestion(q);
+      if (resolved) {
+        question = resolved;
+        process.stdout.write('  ' + P.muted('→ ') + P.dim(question) + '\n');
+      }
     }
-    if (q === 'help') { printHelp(); rl.prompt(); return; }
 
     rl.pause();
-    history.push({ role: 'user', content: q });
+    history.push({ role: 'user', content: question });
 
-    // Show iCopilot label before streaming response
-    process.stdout.write('  ' + chalk.dim('─'.repeat(58)) + '\n');
-    process.stdout.write('  ' + chalk.bold.cyan('iCopilot') + '\n');
+    // User message box
+    printUserBox(question);
 
     try {
-      const answer = await streamChat(cfg, [...history]);
+      const answer = await streamChat(cfg, [...history], {}, { thinking: showReasoning });
       if (answer) history.push({ role: 'assistant', content: answer });
     } catch (e) {
-      console.error('\n  ' + chalk.red('✖ ' + e.message) + '\n');
+      process.stdout.write('\n  ' + P.err('✖ ') + chalk.white(e.message) + '\n\n');
     }
 
-    // Prompt for next message with label
-    process.stdout.write('  ' + chalk.dim('─'.repeat(58)) + '\n');
-    rl.setPrompt(chalk.cyan('  You  ') + chalk.white(''));
     rl.resume();
     rl.prompt();
   });
 
-  rl.on('close', () => {
-    console.log(chalk.dim('\n  Goodbye.\n'));
-    exit(0);
-  });
+  rl.on('close', () => { process.stdout.write(P.muted('\n  Goodbye.\n\n')); exit(0); });
 }
 
-// ─── Main ────────────────────────────────────────────────────────────────────
+// ── Main ───────────────────────────────────────────────────────────────────────
 async function main() {
-  if (cmd === '--help' || cmd === '-h' || cmd === 'help') {
-    printHelp(); return;
-  }
+  if (cmd === '--help' || cmd === '-h' || cmd === 'help') { printHelp(); return; }
 
   if (cmd === 'login') {
     const cfg = await loginFlow();
-    console.log('\n  ' + chalk.green('✓') + ' Logged in as ' +
+    process.stdout.write('\n  ' + P.ok('✓') + ' Logged in as ' +
       chalk.white(cfg.user?.name ?? cfg.user?.email) +
-      chalk.dim(' · ' + (cfg.user?.role ?? 'operator')));
-    console.log('  ' + chalk.dim('Config saved: ') + chalk.dim(configPath()) + '\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) {
-      console.log('\n  ' + chalk.yellow('Not logged in.') + ' Run ' + chalk.cyan('icli login') + '\n');
+      process.stdout.write('\n  ' + P.warn('Not logged in.') + ' Run ' + P.accent('icli login') + '\n\n');
       return;
     }
-    const line = '─'.repeat(58);
-    console.log('\n' + chalk.dim('  ' + line));
-    console.log('  ' + chalk.dim('URL   ') + chalk.cyan(cfg.url));
-    console.log('  ' + chalk.dim('Name  ') + chalk.white(cfg.user?.name ?? '—'));
-    console.log('  ' + chalk.dim('Email ') + chalk.white(cfg.user?.email ?? '—'));
-    console.log('  ' + chalk.dim('Role  ') + chalk.white(cfg.user?.role ?? '—'));
-    console.log(chalk.dim('  ' + line) + '\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;
   }
 
   const cfg = await ensureAuth();
 
-  // Single-shot: icli "question here"
   if (cmd && !cmd.startsWith('-')) {
     await singleShot(cfg, args.join(' '));
     return;
   }
 
-  // Interactive REPL
   await interactiveRepl(cfg);
 }
 
 main().catch(e => {
-  console.error('\n  ' + chalk.red('✖ ' + e.message) + '\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": "2.0.0",
+  "version": "4.0.0",
   "description": "iCli — IspBills AI network engineer in your terminal",
   "keywords": [
     "ispbills",

package/src/chat.js

@@ -3,119 +3,258 @@ import ora from 'ora';
 import { marked } from 'marked';
 import TerminalRenderer from 'marked-terminal';
 import { refreshToken } from './auth.js';
+import { cols, inner, visLen, padRight, stripAnsi,
+         boxTop, boxMid, boxBot, boxTopOpen, boxBotOpen,
+         boxRow, boxLine } from './layout.js';
 
-// Configure markdown renderer
+// ── 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,
+};
+
+// ── Markdown ───────────────────────────────────────────────────────────────────
 marked.setOptions({ renderer: new TerminalRenderer({
-  firstHeading: chalk.bold.cyan,
-  heading:      chalk.bold.cyan,
+  firstHeading: chalk.bold.white,
+  heading:      chalk.bold.white,
   strong:       chalk.bold.white,
-  em:           chalk.italic.dim,
-  codespan:     (code) => chalk.bgGray.white(` ${code} `),
-  code:         (code) => code.split('\n').map(l => chalk.green('  ' + l)).join('\n'),
-  blockquote:   chalk.dim,
-  listitem:     (text) => `  ${chalk.cyan('•')} ${text}`,
-  hr:           () => chalk.dim('  ' + '─'.repeat(56)) + '\n',
-  link:         (_href, _title, text) => chalk.cyan.underline(text || _href),
+  em:           chalk.italic.hex('#9198A1'),
+  codespan:     (t) => chalk.bgHex('#161b22').hex('#c9d1d9')(` ${t} `),
+  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),
 }) });
 
 function renderMarkdown(text) {
-  try {
-    return marked(text).trimEnd();
-  } catch {
-    return text;
+  try { return marked(text).trimEnd(); } catch { return text; }
+}
+
+// ── Status icon ────────────────────────────────────────────────────────────────
+function statusIcon(line) {
+  const l = line.toLowerCase();
+  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('›');
+}
+
+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');
+
+  // 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() - 8;
+    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');
+  }
+
+  // Divider
+  process.stdout.write(boxMid(P.border) + '\n');
+
+  // 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 ─────────────────────────────────────────────────────────────
+export const SLASH_COMMANDS = [
+  { cmd: '/check',    hint: '[device]',  desc: 'Run diagnostics on a device'  },
+  { cmd: '/vlan',     hint: '[id]',      desc: 'Check VLAN usage'             },
+  { cmd: '/onu',      hint: '[id]',      desc: 'Show ONU status and signal'   },
+  { cmd: '/customer', hint: '[name/IP]', desc: 'Look up a customer'           },
+  { cmd: '/ping',     hint: '[host]',    desc: 'Ping a host'                  },
+  { cmd: '/online',   hint: '',          desc: 'List online sessions'         },
+  { cmd: '/history',  hint: '',          desc: 'Show conversation history'    },
+  { cmd: '/clear',    hint: '',          desc: 'Clear the screen'             },
+  { cmd: '/help',     hint: '',          desc: 'Show help'                    },
+  { cmd: '/exit',     hint: '',          desc: 'Exit iCli'                    },
+];
+
+export function printSlashMenu() {
+  process.stdout.write('\n');
+  process.stdout.write(boxTop('Commands', P.border) + '\n');
+  for (const { cmd: c, hint, desc } of SLASH_COMMANDS) {
+    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(boxBot(P.border) + '\n\n');
+}
+
+export function slashCompleter(line) {
+  if (line.startsWith('/')) {
+    const hits = SLASH_COMMANDS.map(s => s.cmd + ' ').filter(s => s.startsWith(line));
+    return [hits.length ? hits : SLASH_COMMANDS.map(s => s.cmd + ' '), 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() - 2;
+  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');
 }
 
-/**
- * Stream a single chat turn to stdout.
- *
- * @param {object}   cfg       - { url, token, refresh_token, user }
- * @param {Array}    messages  - [{ role, content }]
- * @param {object}   [context] - optional device context
- * @param {object}   [opts]    - { thinking: bool }
- * @returns {string} The final answer text
- */
+// ── streamChat ────────────────────────────────────────────────────────────────
 export async function streamChat(cfg, messages, context = {}, opts = {}) {
   const showThinking = opts.thinking !== false;
   const body = JSON.stringify({ messages, context });
 
-  let res = await fetch(`${cfg.url}/api/v1/ai/chat/stream`, {
-    method:  'POST',
-    headers: {
-      'Content-Type':  'application/json',
-      'Accept':        'text/event-stream',
-      'Authorization': `Bearer ${cfg.token}`,
-    },
-    body,
-  });
-
-  // Token expired — try refresh once
-  if (res.status === 401 && cfg.refresh_token) {
-    const updated = await refreshToken(cfg);
-    if (!updated) throw new Error('Session expired. Run `icli login` to re-authenticate.');
-    Object.assign(cfg, updated);
-    res = await fetch(`${cfg.url}/api/v1/ai/chat/stream`, {
-      method:  'POST',
+  async function doFetch(token) {
+    return fetch(`${cfg.url}/api/v1/ai/chat/stream`, {
+      method: 'POST',
       headers: {
         'Content-Type':  'application/json',
         'Accept':        'text/event-stream',
-        'Authorization': `Bearer ${cfg.token}`,
+        'Authorization': `Bearer ${token}`,
       },
       body,
     });
   }
 
+  let res = await doFetch(cfg.token);
+  if (res.status === 401 && cfg.refresh_token) {
+    const updated = await refreshToken(cfg);
+    if (!updated) throw new Error('Session expired. Run `icli login`.');
+    Object.assign(cfg, updated);
+    res = await doFetch(cfg.token);
+  }
   if (!res.ok) {
     const txt = await res.text().catch(() => '');
     throw new Error(`AI request failed (HTTP ${res.status}): ${txt.slice(0, 200)}`);
   }
 
-  // ── Spinner ──────────────────────────────────────────────────────────────
+  // ── 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:    chalk.dim('Thinking…'),
-    color:   'cyan',
-    spinner: 'dots',
-    prefixText: ' ',
+    text:       P.dim('Thinking…'),
+    color:      'blue',
+    spinner:    'dots',
+    prefixText: P.border('│') + '  ',
   });
 
-  let reasonBuf   = '';
-  let answerBuf   = '';
-  let rawAnswer   = '';
-  let finalResult = null;
+  const stopSpinner = () => { if (spinner.isSpinning) spinner.stop(); };
 
-  function stopSpinner() {
-    if (spinner.isSpinning) spinner.stop();
+  function openReasoning() {
+    if (reasoningOpen) return;
+    stopSpinner();
+    reasoningOpen = true;
+    process.stdout.write(boxLine('', P.border) + '\n');
+    process.stdout.write(boxLine(P.dim('  ╌ Reasoning ') + P.border('╌'.repeat(Math.max(0, inner() - 16))), P.border) + '\n');
+    process.stdout.write(boxLine(P.border('  │ '), P.border));
   }
 
-  function printStatus(line) {
-    stopSpinner();
-    process.stdout.write(chalk.magenta('  › ') + chalk.dim(line) + '\n');
-    if (showThinking) spinner.start();
+  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' + boxLine(P.border('  │ '), P.border));
+      if (parts[i]) process.stdout.write(P.reasoning(parts[i]));
+    }
   }
 
-  function flushReasoning() {
-    if (!reasonBuf.trim()) return;
+  function closeReasoning() {
+    if (!reasoningOpen) return;
+    process.stdout.write('\n' + boxLine('', P.border) + '\n');
+    reasoningOpen = false;
+  }
+
+  function printStatus(line) {
+    ensureBoxOpen();
+    if (reasoningOpen) closeReasoning();
     stopSpinner();
-    const lines = reasonBuf.trim().split('\n').filter(Boolean);
-    process.stdout.write('\n');
-    process.stdout.write(chalk.dim('  ┌─ Reasoning ' + '─'.repeat(44)) + '\n');
-    for (const l of lines) {
-      process.stdout.write(chalk.dim('  │ ') + chalk.dim.italic(l) + '\n');
-    }
-    process.stdout.write(chalk.dim('  └' + '─'.repeat(57)) + '\n');
-    reasonBuf = '';
+    const icon   = statusIcon(line);
+    const text   = line.trimStart();
+    const indent = /^[\s·•⌁]/.test(line) ? '    ' : '  ';
+    process.stdout.write(boxLine(indent + icon + ' ' + P.dim(text), P.border) + '\n');
+    if (showThinking) spinner.start();
   }
 
   function parseStreamText(raw) {
     const m = raw.match(/"text"\s*:\s*"((?:[^"\\]|\\.)*)/);
     if (!m) return raw.trimStart().startsWith('{') ? null : raw;
-    return m[1]
-      .replace(/\\n/g, '\n').replace(/\\t/g, '\t')
-      .replace(/\\r/g, '').replace(/\\"/g, '"').replace(/\\\\/g, '\\');
+    return m[1].replace(/\\n/g,'\n').replace(/\\t/g,'\t')
+               .replace(/\\r/g,'').replace(/\\"/g,'"').replace(/\\\\/g,'\\');
   }
 
-  // ── SSE reader ───────────────────────────────────────────────────────────
-  if (showThinking) spinner.start();
+  // ── SSE reader ─────────────────────────────────────────────────────────────
+  if (showThinking) { ensureBoxOpen(); spinner.start(); }
 
   const decoder = new TextDecoder();
   let sseBuffer = '';
@@ -126,16 +265,19 @@ export async function streamChat(cfg, messages, context = {}, opts = {}) {
     sseBuffer = lines.pop();
 
     for (const line of lines) {
-      const trimmed = line.replace(/\r$/, '');
-      if (!trimmed.startsWith('data: ')) continue;
-      let ev;
-      try { ev = JSON.parse(trimmed.slice(6)); } catch { continue; }
+      const t = line.replace(/\r$/, '');
+      if (!t.startsWith('data: ')) continue;
+      let ev; try { ev = JSON.parse(t.slice(6)); } catch { continue; }
 
       if (ev.status_delta !== undefined) {
         printStatus(ev.status_delta);
       } else if (ev.reason_delta !== undefined) {
-        reasonBuf += ev.reason_delta;
+        ensureBoxOpen();
+        if (!reasoningOpen) openReasoning();
+        writeReasonDelta(ev.reason_delta);
       } else if (ev.delta !== undefined) {
+        if (reasoningOpen) closeReasoning();
+        stopSpinner();
         rawAnswer += ev.delta;
         const txt = parseStreamText(rawAnswer);
         if (txt !== null) answerBuf = txt;
@@ -145,73 +287,59 @@ export async function streamChat(cfg, messages, context = {}, opts = {}) {
     }
   }
 
-  // ── Final render ─────────────────────────────────────────────────────────
+  // ── Final render ─────────────────────────────────────────────────────────────
   stopSpinner();
-  flushReasoning();
+  if (reasoningOpen) closeReasoning();
+  ensureBoxOpen();
 
   const reply     = finalResult?.reply ?? {};
   const replyType = reply.type ?? 'message';
+  const meta      = finalResult?._meta ?? {};
 
-  process.stdout.write('\n' + chalk.dim('  ' + '─'.repeat(58)) + '\n\n');
+  if (meta.model && cfg) cfg._model = shortModel(meta.model);
+
+  // Blank separator before content
+  process.stdout.write(boxLine('', P.border) + '\n');
 
   if (replyType === 'message') {
-    const text = reply.text || answerBuf || '(no response)';
+    const text     = reply.text || answerBuf || '(no response)';
     const rendered = renderMarkdown(text);
-    const indented = rendered.split('\n').map(l => '  ' + l).join('\n');
-    process.stdout.write(indented + '\n\n');
-    return text;
+    // Render each markdown line with │ prefix
+    for (const l of rendered.split('\n')) {
+      process.stdout.write(boxLine('  ' + l, P.border) + '\n');
+    }
 
   } else if (replyType === 'plan') {
-    process.stdout.write('  ' + chalk.bold.cyan('📋 ') + chalk.bold.white(reply.summary || 'Plan') + '\n\n');
-    (reply.steps || []).forEach((step, i) => {
-      const risk = step.risk === 'high' ? chalk.red('  ⚠ high risk') : '';
-      process.stdout.write(`  ${chalk.cyan(String(i + 1) + '.')} ${chalk.yellow(step.cmd || '')}${risk}\n`);
-      if (step.purpose) process.stdout.write(chalk.dim(`      ${step.purpose}\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'   ? 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');
-    return reply.summary || '';
+    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(
-      '  ' + chalk.bold.green('🔌 ') +
-      chalk.bold.green(`${dev.kind ?? '?'}#${dev.id ?? '?'}`) +
-      chalk.white(` ${dev.name ?? ''} `) +
-      chalk.dim(`(${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(chalk.dim('  ' + reply.note) + '\n');
-    process.stdout.write('\n');
-    return reply.note || '';
+    if (reply.note) process.stdout.write(boxLine('  ' + P.dim(reply.note), P.border) + '\n');
   }
 
-  return answerBuf;
-}
+  // 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');
+  }
 
-/** Print a styled welcome banner. */
-export function printBanner(cfg) {
-  const line = '─'.repeat(58);
-  process.stdout.write('\n');
-  process.stdout.write(chalk.cyan('  ╭' + line + '╮') + '\n');
-  process.stdout.write(
-    chalk.cyan('  │  ') +
-    chalk.bold.white('iCopilot') +
-    chalk.dim('  ·  IspBills AI Network Engineer') +
-    ' '.repeat(13) +
-    chalk.cyan('  │') + '\n'
-  );
-  process.stdout.write(chalk.cyan('  ╰' + line + '╯') + '\n\n');
+  // Close the box
+  process.stdout.write(boxBotOpen(P.border) + '\n\n');
 
-  if (cfg?.url) {
-    process.stdout.write(chalk.dim('  Connected ') + chalk.cyan(cfg.url) + '\n');
-  }
-  if (cfg?.user?.name || cfg?.user?.email) {
-    process.stdout.write(
-      chalk.dim('  Logged in ') +
-      chalk.white(cfg.user.name || cfg.user.email) +
-      chalk.dim(' · ' + (cfg.user.role ?? 'operator')) + '\n'
-    );
-  }
-  process.stdout.write('\n');
-  process.stdout.write(chalk.dim('  Type your question and press Enter. Type "exit" to quit.\n'));
-  process.stdout.write(chalk.dim('  ' + line) + '\n\n');
+  return reply.text || answerBuf || '';
 }

package/src/layout.js

@@ -0,0 +1,69 @@
+// ── 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] ──────────────╮ */
+export function boxTop(label, borderFn) {
+  const w    = cols();
+  const lbl  = label ? ` ${label} ` : '';
+  const dash = rep('─', Math.max(0, w - 2 - lbl.length));
+  return borderFn(`╭${lbl.length ? '─' + lbl : ''}${dash}╮`);
+}
+
+/** 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 - 1 - 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]           │ */
+export function boxRow(content, borderFn) {
+  const w    = cols();
+  const pad  = Math.max(0, 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;
+}