ispbills-icli 8.6.5 → 8.6.7

package/package.json

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

package/src/tui/app.js

@@ -1822,7 +1822,7 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
     <${Box} flexDirection="column" width=${cols}>
       <${Static} key=${clearEpoch} items=${staticItems}>
         ${(it) => it.type === 'banner'
-          ? html`<${Box} key=${it.id} flexDirection="column" alignItems="center">
+          ? html`<${Box} key=${it.id} flexDirection="column" alignItems="center" width=${cols}>
               <${Banner} cfg=${cfg} model=${model} width=${cols} compact=${compact} streamerMode=${streamerMode} />
             <//>`
           : renderItem(it)}

package/src/tui/components.js

@@ -187,32 +187,41 @@ export function Banner({ cfg = {}, model, width = 80, compact = false, streamerM
   }
 
   return html`
-    <${Box} flexDirection="column" marginBottom=${1} alignItems="center">
+    <${Box} flexDirection="column" marginBottom=${1} alignItems="center" width=${width}>
       ${wide
-        ? html`<${Box} flexDirection="column" alignItems="center">
+        ? html`<${Box} flexDirection="column" alignItems="center" width=${width}>
             ${LOGO.map((l, i) => html`<${Text} key=${'l' + i} color=${C.accent} bold>${l}<//>`)}
-            <${Text} color=${C.muted}>iCopilot ${dash()} IspBills network engineer in your terminal<//>
           <//>`
-        : html`<${Text} color=${C.accent} bold>iCopilot ${html`<${Text} color=${C.muted}>${dash()} IspBills AI terminal<//>`}<//>`}
-      <${Box} marginTop=${1}>
+        : html`<${Text} color=${C.accent} bold>◈ iCopilot ${html`<${Text} color=${C.muted}>${dash()} IspBills AI terminal<//>`}<//>` }
+
+      ${wide ? html`<${Text} color=${C.separator}>${'─'.repeat(Math.max(1, width))}<//>\n` : null}
+
+      <${Box} marginTop=${wide ? 0 : 1} justifyContent="center">
+        <${Text} color=${C.accent} bold>◈ iCopilot<//>
+        <${Text} color=${C.muted}>  ${dash()}  IspBills network engineer in your terminal<//>
+      <//>
+
+      ${wide ? html`<${Text} color=${C.separator}>${'─'.repeat(Math.max(1, width))}<//>\n` : null}
+
+      ${meta.length ? html`<${Box} marginTop=${1} justifyContent="center">
         ${meta.map(([label, val], i) => html`
           <${Box} key=${'m' + i}>
             ${i > 0 ? html`<${Text} color=${C.muted}>${midDot()}<//>` : null}
             <${Text} color=${C.muted}>${label} <//>
             <${Text} color=${label === 'model' ? C.accent : C.brand}>${val}<//>
           <//>`)}
+      <//>` : null}
+
+      ${cfg.url ? html`<${Box} justifyContent="center"><${Text} color=${C.muted}>${cfg.url}<//><//>` : null}
+
+      <${Box} flexDirection="column" marginTop=${1} alignItems="center" width=${width}>
+        <${Box} paddingX=${2} flexDirection="column">
+          <${Text} color=${C.muted} dimColor>  ${' @ '}${html`<${Text} color=${C.accent}>@<//>`} mention files · ${html`<${Text} color=${C.accent}>/<//>`} commands · ${html`<${Text} color=${C.accent}>?<//>`} help · ${html`<${Text} color=${C.accent}>!<//>` } shell<//>
+        <//>
       <//>
-      ${cfg.url ? html`<${Text} color=${C.muted}>${cfg.url}<//>` : null}
-
-      <${Box} flexDirection="column" marginTop=${1} paddingX=${2} alignSelf="flex-start">
-        <${Text} color=${C.muted} bold>Quick start:<//>\n
-        <${Text} color=${C.muted}>  <${Text} color=${C.accent}>@<//>  mention files or devices<//>
-        <${Text} color=${C.muted}>  <${Text} color=${C.accent}>/<//>  slash commands<//>
-        <${Text} color=${C.muted}>  <${Text} color=${C.accent}>?<//>  quick help overlay<//>
-        <${Text} color=${C.muted}>  <${Text} color=${C.accent}>!<//>  run shell command<//>
-      <//>
+
       ${!isAuth
-        ? html`<${Box} marginTop=${1}>
+        ? html`<${Box} marginTop=${1} justifyContent="center">
             <${Text} color=${C.warning}>⚠ Not authenticated — run <//>
             <${Text} color=${C.slash} bold>/login<//>
             <${Text} color=${C.warning}> to connect.<//><//>` 

package/src/tui/run.js

@@ -4,39 +4,85 @@ import { render } from 'ink';
 import { App } from './app.js';
 import { saveConfig } from '../config.js';
 
+// iCopilot wordmark in block letters
 const LOGO = [
-  '██╗ ██████╗ ██████╗ ██████╗ ██╗██╗      ██████╗ ████████╗',
-  '██║██╔════╝██╔═══██╗██╔══██╗██║██║     ██╔═══██╗╚══██╔══╝',
-  '██║██║     ██║   ██║██████╔╝██║██║     ██║   ██║   ██║   ',
-  '██║██║     ██║   ██║██╔═══╝ ██║██║     ██║   ██║   ██║   ',
-  '██║╚██████╗╚██████╔╝██║     ██║███████╗╚██████╔╝   ██║   ',
-  '╚═╝ ╚═════╝ ╚═════╝ ╚═╝     ╚═╝╚══════╝ ╚═════╝    ╚═╝   ',
+  ' ██╗ ██████╗ ██████╗ ██████╗ ██╗██╗      ██████╗ ████████╗',
+  ' ██║██╔════╝██╔═══██╗██╔══██╗██║██║     ██╔═══██╗╚══██╔══╝',
+  ' ██║██║     ██║   ██║██████╔╝██║██║     ██║   ██║   ██║   ',
+  ' ██║██║     ██║   ██║██╔═══╝ ██║██║     ██║   ██║   ██║   ',
+  ' ██║╚██████╗╚██████╔╝██║     ██║███████╗╚██████╔╝   ██║   ',
+  ' ╚═╝ ╚═════╝ ╚═════╝ ╚═╝     ╚═╝╚══════╝ ╚═════╝    ╚═╝   ',
+];
+
+// ANSI gradient: dim purple → bright purple → bright blue → bright cyan
+const FRAMES = [
+  LOGO.map((l) => `\x1b[2;35m${l}\x1b[0m`),           // dim magenta
+  LOGO.map((l) => `\x1b[1;35m${l}\x1b[0m`),           // bold magenta
+  LOGO.map((l, i) => i < 3 ? `\x1b[1;35m${l}\x1b[0m` : `\x1b[1;34m${l}\x1b[0m`), // split
+  LOGO.map((l) => `\x1b[1;34m${l}\x1b[0m`),           // bold blue
+  LOGO.map((l, i) => i < 3 ? `\x1b[1;34m${l}\x1b[0m` : `\x1b[1;36m${l}\x1b[0m`), // split
+  LOGO.map((l) => `\x1b[1;36m${l}\x1b[0m`),           // bold cyan
+  LOGO.map((l) => `\x1b[1;35m${l}\x1b[0m`),           // back to bold magenta
 ];
-const COLORS = ['35', '95', '94', '96', '97'];
 
 async function animateSplash(cfg = {}) {
   if (!process.stdout.isTTY) return;
-  for (let frame = 0; frame < COLORS.length; frame++) {
-    const color = COLORS[frame];
-    const lines = LOGO.map((line, idx) => `\x1b[${Math.min(frame + idx + 1, 5) > 3 ? '1' : '2'};${color}m${line}\x1b[0m`).join('\n');
-    process.stdout.write(lines + '\n');
-    await new Promise((resolve) => setTimeout(resolve, 110));
-    if (frame !== COLORS.length - 1) process.stdout.write(`\x1b[${LOGO.length}A`);
+  const cols = process.stdout.columns || 80;
+  const logoW = LOGO[0].length;
+  const pad = ' '.repeat(Math.max(0, Math.floor((cols - logoW) / 2)));
+
+  // Phase 1: reveal lines one-by-one dim
+  for (let i = 0; i < LOGO.length; i++) {
+    process.stdout.write(`${pad}\x1b[2;35m${LOGO[i]}\x1b[0m\n`);
+    await new Promise((r) => setTimeout(r, 55));
   }
-  // §3: welcome text, quick-start tips and a visible /login instruction.
-  const DIM = '\x1b[2m';
-  const ACCENT = '\x1b[38;5;141m';
-  const WARN = '\x1b[38;5;179m';
-  const R = '\x1b[0m';
-  process.stdout.write(`\n  ${ACCENT}iCopilot${R} ${DIM}— IspBills network engineer in your terminal${R}\n\n`);
-  process.stdout.write(`  ${DIM}Quick start:${R}\n`);
-  process.stdout.write(`    ${ACCENT}@${R}${DIM}  mention files or devices${R}\n`);
-  process.stdout.write(`    ${ACCENT}/${R}${DIM}  slash commands${R}\n`);
-  process.stdout.write(`    ${ACCENT}?${R}${DIM}  quick help overlay${R}\n`);
-  process.stdout.write(`    ${ACCENT}!${R}${DIM}  run a shell command${R}\n`);
+
+  // Phase 2: colour-cycle animation
+  for (let fi = 1; fi < FRAMES.length; fi++) {
+    process.stdout.write(`\x1b[${LOGO.length}A`);
+    for (const line of FRAMES[fi]) {
+      process.stdout.write(`${pad}${line}\n`);
+    }
+    await new Promise((r) => setTimeout(r, 90));
+  }
+
+  // Welcome section — centered
+  const DIM  = '\x1b[2m';
+  const BOLD = '\x1b[1m';
+  const ACC  = '\x1b[38;5;141m'; // #A371F7 purple
+  const BLU  = '\x1b[38;5;75m';  // #58A6FF blue
+  const WARN = '\x1b[38;5;179m'; // #D29922 amber
+  const SEP  = '\x1b[38;5;237m'; // #30363D separator
+  const R    = '\x1b[0m';
+
+  const hr = `${SEP}${'─'.repeat(cols)}${R}`;
+  const subtitle = `${ACC}◈ iCopilot${R}  ${DIM}IspBills network engineer in your terminal${R}`;
+  const subtitleLen = 10 + 2 + 46; // approx visual length
+  const subPad = ' '.repeat(Math.max(0, Math.floor((cols - subtitleLen) / 2)));
+
+  process.stdout.write(`\n${hr}\n`);
+  process.stdout.write(`${subPad}${subtitle}\n`);
+  process.stdout.write(`${hr}\n\n`);
+
+  // Quick-start tips in a two-column grid, centered
+  const tips = [
+    [`${ACC}@${R}`, 'mention files, devices, ONUs'],
+    [`${ACC}/${R}`, 'slash commands & autocomplete'],
+    [`${ACC}?${R}`, 'quick help overlay'],
+    [`${ACC}!${R}`, 'run shell command directly'],
+    [`${BLU}Shift+Tab${R}`, 'cycle Ask → Plan → Autopilot'],
+    [`${BLU}Ctrl+T${R}`,    'toggle reasoning display'],
+  ];
+  const tipW = 42;
+  const tipPad = ' '.repeat(Math.max(0, Math.floor((cols - tipW) / 2)));
+  process.stdout.write(`${tipPad}${DIM}Quick start:${R}\n`);
+  for (const [key, desc] of tips) {
+    process.stdout.write(`${tipPad}  ${BOLD}${key}${R}  ${DIM}${desc}${R}\n`);
+  }
+
   const isAuth = Boolean(cfg?.user?.name || cfg?.user?.email || cfg?.apiKey || cfg?._token);
   if (!isAuth) {
-    process.stdout.write(`\n  ${WARN}⚠ Not authenticated — run ${R}${ACCENT}/login${R}${WARN} to connect.${R}\n`);
+    process.stdout.write(`\n${tipPad}${WARN}⚠ Not authenticated${R}  ${DIM}run${R} ${ACC}/login${R} ${DIM}to connect${R}\n`);
   }
   process.stdout.write('\n');
 }