ispbills-icli 8.5.2 → 8.5.3

package/package.json

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

package/src/tui/app.js

@@ -627,7 +627,7 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion })
           <//>`
         : null}
 
-      <${TabBar} active=${activeTab} cols=${cols} />
+      <${TabBar} active=${activeTab} cols=${cols} mode=${mode} />
 
       ${!busy && chips.length ? html`<${FollowupChips} chips=${chips} active=${activeChip} />` : null}
 
@@ -636,8 +636,6 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion })
           ? html`<${Choice} ...${choice} />`
           : html`<${Composer} onSubmit=${onSubmit} busy=${busy} width=${cols} />`}
 
-        <${Text} color=${C.separator}>${'─'.repeat(Math.max(1, cols))}<//>
-
         <${Box} paddingX=${1} width=${cols}>
           <${Box} flexGrow=${1}>
             <${Text} color=${C.muted} wrap="truncate-end">${footerLeft}<//>

package/src/tui/components.js

@@ -25,19 +25,28 @@ const TABS = [
   { id: 'alarms',    label: 'Alarms'    },
 ];
 
-export function TabBar({ active = 'session', cols = 80, onSwitch }) {
+export function TabBar({ active = 'session', cols = 80, mode = 'ask' }) {
+  // Deep-blue background track per spec (mirrors \x1b[44m ANSI blue).
+  // Active tab wrapped in [brackets] bold/white; inactive dimmed.
+  // Right side shows the current mode badge.
+  const modeBadge = mode !== 'ask'
+    ? ` ${mode === 'autopilot' ? '⚡ AUTO' : '📋 PLAN'}`
+    : '';
   return html`
-    <${Box} width=${cols} paddingX=${1} backgroundColor="#0D1117">
-      ${TABS.map((t, i) => {
-        const on = t.id === active;
-        return html`
-          <${Box} key=${t.id}>
-            ${i > 0 ? html`<${Text} color=${C.muted}>   <//>` : null}
-            ${on
-              ? html`<${Text} color="white" bold>[${t.label}]<//>`
-              : html`<${Text} color=${C.muted}>${t.label}<//>`}
-          <//>`;
-      })}
+    <${Box} width=${cols} backgroundColor="blue">
+      <${Box} paddingX=${1} flexGrow=${1}>
+        ${TABS.map((t, i) => {
+          const on = t.id === active;
+          return html`
+            <${Box} key=${t.id}>
+              ${i > 0 ? html`<${Text} color="cyan" backgroundColor="blue">   <//>` : null}
+              ${on
+                ? html`<${Text} color="white" bold backgroundColor="blue">[${t.label}]<//>`
+                : html`<${Text} color="cyan" backgroundColor="blue">${t.label}<//>`}
+            <//>`;
+        })}
+      <//>
+      ${modeBadge ? html`<${Box} paddingRight=${1}><${Text} color="yellow" bold backgroundColor="blue">${modeBadge}<//><//>` : null}
     <//>`;
 }
 
@@ -111,10 +120,9 @@ function withMentions(text, base = C.white) {
   );
 }
 
-// Full-width separator line, drawn in muted separator colour.
+// Full-width separator line using - (ASCII dash) per spec §6: "Full-width `-` characters in #30363D".
 function Sep({ cols = 80 }) {
-  return html`<${Text} color=${C.separator}>${'─'.repeat(Math.max(1, cols))}<//>`;
-}
+  return html`<${Text} color=${C.separator}>${'-'.repeat(Math.max(1, cols))}<//>`;}
 
 /** The user's prompt block — separator + "You" label + text. */
 export function UserMessage({ text, cols = 80 }) {

package/src/tui/composer.js

@@ -218,8 +218,8 @@ export function Composer({ onSubmit, busy, width = 80 }) {
   // Prompt glyph: ❯ (success/green) idle; ⧖ (warning/amber) busy.
   const promptGlyph = busy ? glyphs.busy : glyphs.prompt;
   const promptColor = busy ? C.warning : C.success;
-  // Ghost hint text when empty
-  const ghostHint = busy ? 'Working…' : 'Enter @ to mention a device or / for commands…';
+  // Ghost hint text when empty — per spec §7
+  const ghostHint = busy ? 'Working…' : 'Enter @ to mention files or / for commands…';
 
   return html`
     <${Box} flexDirection="column" width=${width}>
@@ -259,5 +259,7 @@ export function Composer({ onSubmit, busy, width = 80 }) {
               <${Text}>${before}<//><${Text} inverse>${at}<//><${Text}>${after}<//><${Text} color=${C.muted}>${ghost}<//>
             <//>`}
       <//>
+
+      <${Text} color=${C.separator}>${'─'.repeat(Math.max(1, width))}<//>
     <//>`;
 }