ispbills-icli 8.6.1 → 8.6.3

package/package.json

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

package/src/tui/components.js

@@ -87,11 +87,17 @@ function formatTs(ts) {
   }
 }
 
-function SpeakerLine({ label, color, cols = 80, ts, rightLabel = '' }) {
+// glyphColor: when set, the first 2 chars (glyph + space) render in glyphColor,
+// and the rest of the label renders in color (bold white). Matches spec §6.
+function SpeakerLine({ label, color, glyphColor, cols = 80, ts, rightLabel = '' }) {
   const stamp = ts ? `[${formatTs(ts)}]` : '';
+  const parts = glyphColor ? [String(label).slice(0, 2), String(label).slice(2)] : null;
   return html`
     <${Box} paddingX=${1} marginTop=${1} width=${cols}>
-      <${Text} color=${color} bold>${label}<//>
+      ${parts
+        ? html`<${Text} color=${glyphColor} bold>${parts[0]}<//><${Text} color=${color} bold>${parts[1]}<//>` 
+        : html`<${Text} color=${color} bold>${label}<//>` 
+      }
       <${Box} flexGrow=${1} />
       ${rightLabel ? html`<${Text} color=${C.muted}>${rightLabel}<//>` : null}
       ${rightLabel && stamp ? html`<${Text} color=${C.muted}> <//>` : null}
@@ -111,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}<//>`}
             <//>`;
         })}
       <//>
@@ -256,7 +275,7 @@ export function AssistantMessage({ text, cols = 80, ts, label = `${glyphs.copilo
   return html`
     <${Box} flexDirection="column" marginTop=${1}>
       <${Sep} cols=${cols} />
-      <${SpeakerLine} label=${label} color=${C.accent} cols=${cols} ts=${ts} />
+      <${SpeakerLine} label=${label} color="white" glyphColor=${C.accent} cols=${cols} ts=${ts} />
       <${Box} paddingX=${1} flexDirection="column" width=${bodyWidth}>
         ${streaming ? html`<${StreamingText} text=${text} />` : html`<${Markdown} content=${text} />`}
       <//>
@@ -274,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)'}<//>
       <//>
@@ -403,7 +422,7 @@ export function LabeledNotice({ label, text, color = C.gray, cols = 80, ts, body
     <${Box} flexDirection="column" marginTop=${1}>
       <${Sep} cols=${cols} />
       <${SpeakerLine} label=${label} color=${color} cols=${cols} ts=${ts} />
-      <${Box} paddingX=${2}>
+      <${Box} paddingX=${1}>
         <${Text} color=${bodyColor}>${text}<//>
       <//>
     <//>`;
@@ -503,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)<//>