ispbills-icli 8.6.2 → 8.6.3

package/package.json

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

package/src/tui/components.js

@@ -117,17 +117,30 @@ export function TabBar({ active = 'session', cols = 80, mode = 'ask' }) {
   const modeBadge = mode !== 'ask'
     ? ` ${mode === 'autopilot' ? '⚡ AUTO' : mode === 'shell' ? '⌘ SHELL' : '📋 PLAN'}`
     : '';
+  const badgeLen = modeBadge ? modeBadge.length + 2 : 0;
+  const available = cols - 2 - badgeLen; // -2 for paddingX={1}
+
+  // §11: clip tab labels when terminal is narrow (~50 cols)
+  // Full:  [Session]   Devices   Customers   Alarms  = ~42 chars
+  // Short: [Ses]   Dev   Cus   Alm              = ~26 chars
+  const fullWidth = TABS.reduce((sum, t, i) => {
+    const w = t.id === active ? t.label.length + 2 : t.label.length;
+    return sum + (i > 0 ? 3 : 0) + w;
+  }, 0);
+  const abbreviated = fullWidth > available;
+
   return html`
     <${Box} width=${cols} backgroundColor="blue">
       <${Box} paddingX=${1} flexGrow=${1}>
         ${TABS.map((t, i) => {
           const on = t.id === active;
+          const lbl = abbreviated ? t.label.slice(0, 3) : t.label;
           return html`
             <${Box} key=${t.id}>
               ${i > 0 ? html`<${Text} backgroundColor="blue">   <//>` : null}
               ${on
-                ? html`<${Text} color="white" bold backgroundColor="blue">[${t.label}]<//>`
-                : html`<${Text} color="white" dimColor backgroundColor="blue">${t.label}<//>`}
+                ? html`<${Text} color="white" bold backgroundColor="blue">[${lbl}]<//>`
+                : html`<${Text} color="white" dimColor backgroundColor="blue">${lbl}<//>`}
             <//>`;
         })}
       <//>
@@ -280,7 +293,7 @@ export function ShellOutput({ command, output, cols = 80, ts, code = 0 }) {
         ts=${ts}
         rightLabel=${code === 0 ? '' : `exit ${code}`}
       />
-      <${Box} paddingX=${2} flexDirection="column">
+      <${Box} paddingX=${1} flexDirection="column">
         <${Text} color=${C.warning}>$ ${command}<//>
         <${Text}>${output || '(no output)'}<//>
       <//>
@@ -509,7 +522,7 @@ export function Thinking({ label = 'Working', startedAt }) {
   }, []);
   const secs = startedAt ? Math.max(0, Math.round((Date.now() - startedAt) / 1000)) : 0;
   return html`
-    <${Box} marginTop=${1} paddingX=${2}>
+    <${Box} marginTop=${1} paddingX=${1}>
       <${Text} color=${C.warning}><${Spinner} type=${spinnerType()} /><//>
       <${Text} color=${C.warning} bold> ${label}<//>
       <${Text} color=${C.muted}>… (${secs}s ${midDot()}esc to interrupt)<//>