ispbills-icli 8.6.8 → 8.6.10

package/package.json

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

package/src/tui/app.js

@@ -243,15 +243,15 @@ function itemHeight(it, cols = 80) {
   const w = Math.max(1, cols - 4); // paddingX + body inset
   switch (it.type) {
     case 'user':
-      return 3 + wrappedLines(it.text, w); // sep + speaker + margin + body
+      return 2 + wrappedLines(it.text, w); // marginTop + speaker + body
     case 'assistant':
-      return 3 + wrappedLines(it.text, Math.min(w, 96));
+      return 2 + wrappedLines(it.text, Math.min(w, 96));
     case 'shell':
-      return 4 + wrappedLines(it.output || '(no output)', w) + 1;
+      return 3 + wrappedLines(it.output || '(no output)', w) + 1;
     case 'plan':
-      return 4 + (it.reply?.steps?.length || 0);
+      return 3 + (it.reply?.steps?.length || 0);
     case 'connect':
-      return 5;
+      return 4;
     case 'activity':
       return 1 + (it.status?.length || 0);
     case 'notice':
@@ -295,7 +295,7 @@ function liveAreaHeight(live, cols = 80, showReasoning = false) {
   if (!live) return 0;
   const w = Math.max(1, cols - 4);
   let h = 2; // thinking line + margin
-  if (live.text) h += 3 + wrappedLines(live.text, Math.min(w, 96));
+  if (live.text) h += 2 + wrappedLines(live.text, Math.min(w, 96));
   if (live.reasoning) h += showReasoning ? 2 + wrappedLines(live.reasoning, w) : 1;
   if (live.reply?.steps) h += 3 + live.reply.steps.length;
   if (live.status?.length) h += 1 + live.status.length;
@@ -318,6 +318,50 @@ let itemId = 0;
 const nextId = () => ++itemId;
 const MODES = ['ask', 'plan', 'autopilot'];
 
+// Tab-specific quick-command panels. Static — does not depend on component state.
+const TAB_CONTENT = {
+  devices: {
+    title: 'Devices',
+    commands: [
+      { cmd: '/status',           desc: 'Fleet health summary' },
+      { cmd: '/reachable',        desc: 'Who is up / down' },
+      { cmd: '/alarms',           desc: 'Active alarms' },
+      { cmd: '/check [device]',   desc: 'Full device diagnostics' },
+      { cmd: '/uptime [device]',  desc: 'Uptime and last reboot' },
+      { cmd: '/cpu [device]',     desc: 'CPU / memory load' },
+      { cmd: '/offline',          desc: 'All offline devices' },
+      { cmd: '/flapping [device]', desc: 'Flapping interfaces' },
+    ],
+    hint: 'Press a number (1–8) to insert command · Enter to return to Session',
+  },
+  maps: {
+    title: 'Network Maps',
+    commands: [
+      { cmd: '/vlan [id]',        desc: 'VLAN topology & members' },
+      { cmd: '/route [device]',   desc: 'Routing table & next-hops' },
+      { cmd: '/overlaps',         desc: 'IP subnet overlap check' },
+      { cmd: '/mac [addr]',       desc: 'MAC address lookup' },
+      { cmd: '/arp [device]',     desc: 'ARP table & IP-MAC map' },
+      { cmd: '/trace [host]',     desc: 'Traceroute to host' },
+      { cmd: '/topology',         desc: 'Network topology diagram' },
+      { cmd: '/segments',         desc: 'Network segments & subnets' },
+    ],
+    hint: 'Press a number (1–8) to insert command · Enter to return to Session',
+  },
+  alarms: {
+    title: 'Alarms',
+    commands: [
+      { cmd: '/alarms',           desc: 'Active alarms & recent faults' },
+      { cmd: '/offline',          desc: 'All offline devices' },
+      { cmd: '/down [circuit]',   desc: 'Down circuits / uplinks' },
+      { cmd: '/flapping [device]', desc: 'Flapping interfaces' },
+      { cmd: '/optical [device]', desc: 'Optical RX/TX (dBm)' },
+      { cmd: '/reachable',        desc: 'Reachability sweep' },
+    ],
+    hint: 'Press a number (1–6) to insert command · Enter to return to Session',
+  },
+};
+
 export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, showBanner = true, agentName, resumeMode }) {
   const { exit } = useApp();
   const initialResumeRef = useRef(undefined);
@@ -333,9 +377,8 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
   const { cols, rows } = useTerminalSize();
   const colsRef = useRef(cols);
   useEffect(() => { colsRef.current = cols; }, [cols]);
-  // Fixed-height viewport: total rows minus chrome (tabbar + spacing + chips +
-  // composer + footer). Everything else scrolls inside this region.
-  const viewportRows = Math.max(3, rows - 6);
+  // Fixed-height viewport: total rows minus chrome (tabbar=1, composer=2, footer=1, buffer=3).
+  const viewportRows = Math.max(3, rows - 7);
   const scrollPage = Math.max(4, viewportRows - 2);
 
   const [items, setItems] = useState(() => renderConversationItems(initialMessages, cols));
@@ -984,7 +1027,42 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
     if (q === '/model' || q.startsWith('/model ')) {
       const name = q.slice('/model'.length).trim();
       if (!name) {
-        pushNotice(`Current model: ${model || modelRef.current || 'server default'}.\nUse /model <name> to request a different model.`);
+        // Show interactive model picker
+        const cur = model || modelRef.current || '';
+        const MODELS = [
+          { id: 'gpt-4o-mini',                     desc: 'Fast & affordable (default)' },
+          { id: 'openai/gpt-4o',                   desc: 'OpenAI GPT-4o — balanced' },
+          { id: 'openai/gpt-4.1',                  desc: 'OpenAI GPT-4.1 — latest' },
+          { id: 'openai/o3',                        desc: 'OpenAI o3 — reasoning' },
+          { id: 'openai/o3-mini',                   desc: 'OpenAI o3-mini — fast reasoning' },
+          { id: 'anthropic/claude-3-5-sonnet',      desc: 'Claude 3.5 Sonnet — strong' },
+          { id: 'anthropic/claude-3-opus',          desc: 'Claude 3 Opus — advanced' },
+          { id: 'anthropic/claude-3-haiku',         desc: 'Claude 3 Haiku — fast' },
+          { id: 'meta/llama-3.3-70b-instruct',      desc: 'Llama 3.3 70B (open)' },
+          { id: 'mistral/mistral-large',            desc: 'Mistral Large' },
+        ];
+        choiceActionRef.current = (val) => {
+          if (val) {
+            modelRef.current = val;
+            setModel(val);
+            cfg._model = val;
+            persistCfg();
+            saveCurrentSession();
+            pushNotice(`${glyphs.check} Model set to ${val}.`, C.green);
+          }
+        };
+        setChoice({
+          title: `Select AI Model  (current: ${cur || 'server default'})`,
+          note: 'Use ↑/↓ to move, Enter to confirm, Esc to cancel',
+          sel: Math.max(0, MODELS.findIndex((m) => m.id === cur)),
+          text: '',
+          focusText: false,
+          allowText: false,
+          options: MODELS.map((m, i) => ({
+            label: `${i + 1}. ${m.id.padEnd(36)} ${m.desc}`,
+            value: m.id,
+          })),
+        });
       } else {
         modelRef.current = name;
         setModel(name);
@@ -1318,7 +1396,7 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
         '  optical       — Optical power analysis and ONU diagnostics (enabled)',
         '  fleet-check   — Parallel multi-device scanning (enabled)',
         '  backup        — Automated config backup via git (enabled)',
-        '  customers     — Customer lookup and ticket integration (enabled)',
+        '  maps          — Network topology maps and IP planning (enabled)',
         '  alarms        — Real-time alarm monitoring (enabled)',
         '',
         'Use /experimental to unlock additional skills.',
@@ -1822,61 +1900,42 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
     if (key.ctrl && input === 'p' && chips.length) { setActiveChip((i) => (i - 1 + chips.length) % chips.length); return; }
     if (key.tab && !key.shift && !busy && !composerText.trim()) {
       setActiveTab((t) => {
-        const tabs = ['session', 'devices', 'customers', 'alarms'];
+        const tabs = ['session', 'devices', 'maps', 'alarms'];
         return tabs[(tabs.indexOf(t) + 1) % tabs.length];
       });
     }
+    // Alt+↑/↓ for viewport scrolling (alternative to PgUp/PgDn)
+    if (key.meta && key.upArrow && !choice && !search && !sessionPicker && !diffState) {
+      setScrollOffset((n) => Math.min(maxScrollRef.current, n + Math.max(3, Math.floor(scrollPage / 4))));
+      return;
+    }
+    if (key.meta && key.downArrow && !choice && !search && !sessionPicker && !diffState) {
+      setScrollOffset((n) => Math.max(0, n - Math.max(3, Math.floor(scrollPage / 4))));
+      return;
+    }
+    // Number keys on non-session tabs: 1-9 insert the panel's Nth command into composer
+    if (activeTab !== 'session' && !choice && !search) {
+      const n = parseInt(input, 10);
+      if (!isNaN(n) && n >= 1) {
+        const panel = TAB_CONTENT[activeTab];
+        const cmd = panel?.commands[n - 1]?.cmd;
+        if (cmd) {
+          const insertCmd = cmd.replace(/\[.*?\]/g, '').trim();
+          setActiveTab('session');
+          setComposerPreset({ token: Date.now(), text: insertCmd });
+        }
+        return;
+      }
+    }
   });
 
-  // Tab-specific content panels (shown when not on Session tab)
-  const TAB_CONTENT = {
-    devices: {
-      title: 'Devices',
-      commands: [
-        { cmd: '/status', desc: 'Fleet health summary' },
-        { cmd: '/reachable', desc: 'Who is up / down' },
-        { cmd: '/alarms', desc: 'Active alarms' },
-        { cmd: '/check [device]', desc: 'Full device diagnostics' },
-        { cmd: '/uptime [device]', desc: 'Uptime and last reboot' },
-        { cmd: '/cpu [device]', desc: 'CPU / memory load' },
-        { cmd: '/offline', desc: 'All offline devices' },
-        { cmd: '/flapping [device]', desc: 'Flapping interfaces' },
-      ],
-      hint: 'Press Enter to switch back to Session and use the composer',
-    },
-    customers: {
-      title: 'Customers',
-      commands: [
-        { cmd: '/customer [name]', desc: 'Look up a customer' },
-        { cmd: '/online', desc: 'Online PPPoE sessions' },
-        { cmd: '/pppoe [user]', desc: 'PPPoE session detail' },
-        { cmd: '/dhcp', desc: 'DHCP leases & pool usage' },
-        { cmd: '/onu [id]', desc: 'ONU signal and status' },
-        { cmd: '/bandwidth [device]', desc: 'Traffic / bandwidth' },
-      ],
-      hint: 'Press Enter to switch back to Session and send commands',
-    },
-    alarms: {
-      title: 'Alarms',
-      commands: [
-        { cmd: '/alarms', desc: 'Active alarms & recent faults' },
-        { cmd: '/offline', desc: 'All offline devices' },
-        { cmd: '/down [circuit]', desc: 'Down circuits / uplinks' },
-        { cmd: '/flapping [device]', desc: 'Flapping interfaces' },
-        { cmd: '/optical [device]', desc: 'Optical RX/TX (dBm)' },
-        { cmd: '/reachable', desc: 'Reachability sweep' },
-      ],
-      hint: 'Press Enter to switch back to Session and type a command',
-    },
-  };
-
   const tabPanel = activeTab !== 'session' ? TAB_CONTENT[activeTab] : null;
 
   const renderItem = (it) => {
     const c = it.cols || 80;
     switch (it.type) {
       case 'user': return html`<${UserMessage} key=${it.id} text=${it.text} cols=${c} ts=${it.ts} />`;
-      case 'assistant': return html`<${AssistantMessage} key=${it.id} text=${it.text} cols=${c} ts=${it.ts} />`;
+      case 'assistant': return html`<${AssistantMessage} key=${it.id} text=${it.text} cols=${c} />`;
       case 'plan': return html`<${Plan} key=${it.id} reply=${it.reply} />`;
       case 'connect': return html`<${Connect} key=${it.id} reply=${it.reply} />`;
       case 'activity': return html`<${StatusLines} key=${it.id} lines=${it.status} busy=${false} />`;
@@ -1929,7 +1988,7 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
 
   const scrollIndicator = hasAbove
     ? html`<${Box} paddingX=${1}>
-        <${Text} color=${C.muted} dimColor>${glyphs.up} ${aboveCount} message${aboveCount === 1 ? '' : 's'} above ${midDot()} PgUp/PgDn to scroll<//>
+        <${Text} color=${C.muted} dimColor>${glyphs.up} ${aboveCount} message${aboveCount === 1 ? '' : 's'} above ${midDot()} PgUp/PgDn or Alt+↑/↓ to scroll<//>
       <//>`
     : null;
 
@@ -1966,10 +2025,11 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
         <${Text} color=${C.brand} bold>${tabPanel.title} — Quick Commands<//>\n
         ${tabPanel.commands.map((c, i) =>
           html`<${Box} key=${i}>
-            <${Text} color=${C.slash}>${c.cmd.padEnd(24)}<//>
+            <${Text} color=${C.accent} bold>${String(i + 1)}. <//>
+            <${Text} color=${C.slash}>${c.cmd.padEnd(22)}<//>
             <${Text} color=${C.muted}>${c.desc}<//>
           <//>`)}
-        \n<${Text} color=${C.muted}>${tabPanel.hint} · Press Enter to return to Session · Press c to start a #reference<//>
+        \n<${Text} color=${C.muted}>${tabPanel.hint}<//>
       <//>`
     : html`<${Box} flexDirection="column">
         ${showEmptyBanner

package/src/tui/components.js

@@ -109,7 +109,7 @@ function SpeakerLine({ label, color, glyphColor, cols = 80, ts, rightLabel = ''
 const TABS = [
   { id: 'session',   label: 'Session'   },
   { id: 'devices',   label: 'Devices'   },
-  { id: 'customers', label: 'Customers' },
+  { id: 'maps', label: 'Network Maps' },
   { id: 'alarms',    label: 'Alarms'    },
 ];
 
@@ -247,7 +247,6 @@ function Sep({ cols = 80 }) {
 export function UserMessage({ text, cols = 80, ts }) {
   return html`
     <${Box} flexDirection="column" marginTop=${1}>
-      <${Sep} cols=${cols} />
       <${SpeakerLine} label="You" color=${C.brand} cols=${cols} ts=${ts} />
       <${Box} paddingX=${1}>
         <${Text}>${withMentions(text)}<//>
@@ -278,13 +277,12 @@ function StreamingText({ text = '' }) {
   return rendered;
 }
 
-export function AssistantMessage({ text, cols = 80, ts, label = `${glyphs.copilotDot} iCopilot`, streaming = false }) {
+export function AssistantMessage({ text, cols = 80, ts, label = `${glyphs.ring} iCopilot`, streaming = false }) {
   // §11: response content box capped at 100 columns; separators stay full-width (§6).
   const bodyWidth = Math.min(cols, 100);
   return html`
     <${Box} flexDirection="column" marginTop=${1}>
-      <${Sep} cols=${cols} />
-      <${SpeakerLine} label=${label} color="white" glyphColor=${C.accent} cols=${cols} ts=${ts} />
+      <${SpeakerLine} label=${label} color="white" glyphColor=${C.accent} cols=${cols} />
       <${Box} paddingX=${1} flexDirection="column" width=${bodyWidth}>
         ${streaming ? html`<${StreamingText} text=${text} />` : html`<${Markdown} content=${text} />`}
       <//>
@@ -294,7 +292,6 @@ export function AssistantMessage({ text, cols = 80, ts, label = `${glyphs.copilo
 export function ShellOutput({ command, output, cols = 80, ts, code = 0 }) {
   return html`
     <${Box} flexDirection="column" marginTop=${1}>
-      <${Sep} cols=${cols} />
       <${SpeakerLine}
         label="⌘ Shell"
         color=${code === 0 ? C.warning : C.error}
@@ -429,7 +426,6 @@ export function Notice({ text, color = C.gray }) {
 export function LabeledNotice({ label, text, color = C.gray, cols = 80, ts, bodyColor = C.white }) {
   return html`
     <${Box} flexDirection="column" marginTop=${1}>
-      <${Sep} cols=${cols} />
       <${SpeakerLine} label=${label} color=${color} cols=${cols} ts=${ts} />
       <${Box} paddingX=${1}>
         <${Text} color=${bodyColor}>${text}<//>
@@ -543,11 +539,9 @@ export function Choice({ title, note, options = [], sel = 0, allowText = false,
   if (isToolApproval) {
     return html`
       <${Box} flexDirection="column" marginTop=${1}>
-        <${Sep} cols=${cols} />
         <${Box} paddingX=${2} marginTop=${1}>
           <${Text} color=${C.accent} bold>⚙ Tool request<//>
         <//>
-        <${Sep} cols=${cols} />
         ${note ? html`<${Box} paddingX=${2} marginTop=${1}><${Text} color=${C.muted}>${note}<//><//>` : null}
         <${Box} flexDirection="column" marginTop=${1} paddingX=${2}>
           ${options.map((o, i) => {

package/src/tui/composer.js

@@ -533,7 +533,5 @@ export function Composer({
             ${paletteRows}
           <//>`
         : null}
-
-      <${Text} color=${C.separator}>${(asciiSafe() ? '-' : '─').repeat(Math.max(1, width))}<//>
     <//>`;
 }