ispbills-icli 8.5.6 → 8.5.7

package/package.json

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

package/src/tui/app.js

@@ -30,13 +30,25 @@ function splitArgs(s) {
   return out;
 }
 
-function shortenPath(p) {
+function shortenPath(p, maxLen = Infinity) {
+  let result;
   try {
     const home = homedir();
     const rel = relative(home, p);
-    if (!rel.startsWith('..')) return '~/' + rel;
-  } catch {}
-  return p;
+    result = rel.startsWith('..') ? p : '~/' + rel;
+  } catch {
+    result = p;
+  }
+  if (maxLen === Infinity || result.length <= maxLen) return result;
+  // §8: progressive shortening ~/…/sub/path
+  const withoutHome = result.replace(/^~\//, '');
+  const segs = withoutHome.split('/');
+  while (segs.length > 1) {
+    segs.shift();
+    const candidate = '~/\u2026/' + segs.join('/');
+    if (candidate.length <= maxLen) return candidate;
+  }
+  return '~/\u2026/' + segs[segs.length - 1];
 }
 
 function gitBranch(cwd = process.cwd()) {
@@ -419,9 +431,9 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
       focusText: false,
       allowText: false,
       options: [
-        { label: '1. Yes', value: 'session' },
-        { label: '2. Yes, remember', value: 'remember' },
-        { label: '3. No, exit', value: 'exit', danger: true },
+        { label: '1. Yes, proceed (this session)', value: 'session' },
+        { label: '2. Yes, and remember this folder', value: 'remember' },
+        { label: '3. No, exit (Esc)', value: 'exit', danger: true },
       ],
     });
   }, [cfg, persistCfg]);
@@ -646,14 +658,49 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
       setLive(null);
       if (type === 'plan') {
         const destructive = (reply.steps || []).some((st) => /destruct|high/.test(st.risk || ''));
+        // §9: choiceActionRef handles autopilot hand-off
+        choiceActionRef.current = (value) => {
+          if (value === '__autopilot__') {
+            apRef.current = true;
+            setModeState('autopilot');
+            runTurn('apply fix');
+            return;
+          }
+          if (value != null) runTurn(String(value));
+        };
         setChoice({
           title: 'Apply this fix?',
           note: reply.summary || '',
           sel: 0, text: '', focusText: false, allowText: false,
           options: [
-            { label: destructive ? 'Apply fix (destructive)' : 'Apply fix', value: 'apply fix', danger: destructive },
-            { label: 'Explain the plan first', value: 'explain this plan in more detail before applying' },
-            { label: 'Cancel', value: null },
+            { label: destructive ? '1. Apply fix (destructive ⚠)' : '1. Apply fix', value: 'apply fix', danger: destructive },
+            { label: '2. Accept plan and build on autopilot', value: '__autopilot__' },
+            { label: '3. Explain the plan first', value: 'explain this plan in more detail before applying' },
+            { label: '4. Cancel', value: null },
+          ],
+        });
+      } else if (type === 'tool_approval' || (reply.toolCall && (type === 'prompt' || type === 'choice'))) {
+        // §13: exact tool-approval format
+        const toolName = reply.toolCall?.name || 'shell';
+        const toolArgs = reply.toolCall?.args || reply.toolCall?.command || '';
+        const toolDesc = toolArgs ? `${toolName}: ${toolArgs}` : (reply.note || toolName);
+        choiceActionRef.current = (value) => {
+          if (value === '__session_allow__') {
+            cfg.allowedTools = [...(cfg.allowedTools || []), toolName];
+            runTurn('yes, proceed with this tool call');
+            return;
+          }
+          if (value != null) runTurn(String(value));
+        };
+        setChoice({
+          title: '⚙ Tool request',
+          note: toolDesc,
+          sel: 0, text: '', focusText: false, allowText: false,
+          isToolApproval: true,
+          options: [
+            { label: '1. Yes', value: 'yes, proceed with this tool call' },
+            { label: '2. Yes, and approve shell for the rest of the session', value: '__session_allow__' },
+            { label: '3. No, and tell Copilot what to do differently (Esc)', value: null },
           ],
         });
       } else if (type === 'prompt' || type === 'choice') {
@@ -763,8 +810,34 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
       runTurn(prompt);
       return;
     }
-    if (q === '/theme') {
-      pushNotice('Theme: dark (default). Palette: purple accent, blue brand, green success, amber warning, red error.\nSet NO_COLOR=1 to disable colour or FORCE_COLOR=1 to force it.');
+    if (q === '/theme' || q.startsWith('/theme ')) {
+      const arg = q.slice('/theme'.length).trim();
+      const themes = ['default', 'dim', 'high-contrast', 'colorblind'];
+      if (arg && themes.includes(arg)) {
+        cfg.theme = arg;
+        persistCfg();
+        pushNotice(`${glyphs.check} Theme set to "${arg}". Restart iCli to fully apply.`, C.success);
+        return;
+      }
+      const current = cfg.theme || 'default';
+      choiceActionRef.current = (value) => {
+        if (!value) return;
+        cfg.theme = value;
+        persistCfg();
+        pushNotice(`${glyphs.check} Theme set to "${value}". Restart iCli to fully apply.`, C.success);
+      };
+      setChoice({
+        title: 'Select colour theme',
+        note: `Current: ${current}`,
+        sel: Math.max(0, themes.indexOf(current)),
+        text: '', focusText: false, allowText: false,
+        options: [
+          { label: 'default',        value: 'default',        hint: 'Auto-detected dark or light' },
+          { label: 'dim',            value: 'dim',            hint: 'Reduced brightness, lower contrast' },
+          { label: 'high-contrast',  value: 'high-contrast',  hint: 'Maximum contrast for readability' },
+          { label: 'colorblind',     value: 'colorblind',     hint: 'Adjusted for colour-vision differences' },
+        ],
+      });
       return;
     }
     if (q === '/session') {
@@ -1383,7 +1456,7 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
     setChoice(null);
     if (act) { act(value); return; }
     if (value == null) {
-      if (/tool request|approval|shell:/i.test(`${currentChoice?.title || ''} ${currentChoice?.note || ''}`)) {
+      if (currentChoice?.isToolApproval || /⚙ Tool request|tool request|approval|shell:/i.test(`${currentChoice?.title || ''} ${currentChoice?.note || ''}`)) {
         setChoice({
           title: 'Tell Copilot what to do differently:',
           note: '',
@@ -1616,6 +1689,20 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
       pushNotice('Composer primed with an ISP reference. Continue typing after #.', C.muted, true);
       return;
     }
+    // §5: o = open in browser, / = open search for this tab
+    if (activeTab !== 'session' && input === 'o') {
+      const openCmd = process.platform === 'darwin' ? 'open' : 'xdg-open';
+      const base = (cfg.url || '').replace(/\/$/, '');
+      const url = base ? `${base}/${activeTab}` : `https://ispbills.local/${activeTab}`;
+      try { spawnSync(openCmd, [url], { detached: true, stdio: 'ignore', shell: false }); } catch {}
+      pushNotice(`Opening ${url} in browser…`, C.muted, true);
+      return;
+    }
+    if (activeTab !== 'session' && input === '/') {
+      openSearch();
+      pushNotice(`Search ${activeTab} tab…`, C.muted, true);
+      return;
+    }
     if (key.tab && key.shift && !busy) {
       const cur = MODES.indexOf(modeRef.current);
       const next = MODES[(cur + 1) % MODES.length];
@@ -1693,17 +1780,21 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
       case 'notice': return html`<${Notice} key=${it.id} text=${it.text} color=${it.color} />`;
       case 'info': return html`<${LabeledNotice} key=${it.id} label="ℹ  Info" text=${it.text} color=${C.muted} bodyColor=${it.color || C.white} cols=${c} ts=${it.ts} />`;
       case 'error': return html`<${LabeledNotice} key=${it.id} label="✖ Error" text=${it.text} color=${C.error} bodyColor=${it.color || C.white} cols=${c} ts=${it.ts} />`;
+      case 'system': return html`<${LabeledNotice} key=${it.id} label="⚙ System" text=${it.text} color=${C.muted} bodyColor=${it.color || C.white} cols=${c} ts=${it.ts} />`;
       case 'shell': return html`<${ShellOutput} key=${it.id} command=${it.command} output=${it.output} code=${it.code} cols=${c} ts=${it.ts} />`;
       case 'help': return html`<${HelpOverlay} key=${it.id} cols=${c} ts=${it.ts} />`;
       default: return null;
     }
   };
 
-  const cwd = shortenPath(process.cwd());
   const branch = branchRef.current;
   const tokenCount = approxTokens(convo.current);
   const tokenLabel = contextUsageLabel(tokenCount);
   const modelLabel = streamerMode ? '' : shortModel(model || modelRef.current || 'server default');
+  // §8: progressive path shortening — reserve space for right section
+  const footerRightEstLen = (modelLabel.length || 0) + (tokenLabel.length || 0) + 8;
+  const cwdMaxLen = Math.max(12, cols - footerRightEstLen - (branch ? branch.length + 6 : 0) - 4);
+  const cwd = shortenPath(process.cwd(), cwdMaxLen);
   const footerLeft = [cwd, branch ? `${glyphs.gitBranch}${branch}` : null].filter(Boolean).join('  ');
   const footerRight = hint
     ? hint
@@ -1731,7 +1822,7 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
             <${StatusLines} lines=${live.status} busy=${busy} />
             ${live.reasoning ? html`<${Reasoning} text=${live.reasoning} show=${showReasoning} />` : null}
             ${live.reply?.steps ? html`<${Plan} reply=${live.reply} live=${true} />` : null}
-            ${live.text ? html`<${AssistantMessage} text=${live.text} cols=${cols} ts=${startedAt || Date.now()} />` : null}
+            ${live.text ? html`<${AssistantMessage} text=${live.text} cols=${cols} ts=${startedAt || Date.now()} streaming=${true} />` : null}
             <${Thinking} label=${live.reply ? 'Planning' : live.text ? 'Responding' : 'Working'} startedAt=${startedAt} />
           <//>`
         : null}
@@ -1805,7 +1896,7 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
               }}
               busy=${busy}
               blocked=${Boolean(choice || search || sessionPicker || diffState || !trusted)}
-              width=${cols}
+              width=${Math.max(60, cols)}
               mode=${composerMode}
               activeTab=${activeTab}
               presetText=${composerPreset.text}

package/src/tui/components.js

@@ -152,6 +152,8 @@ export function Banner({ cfg = {}, model, width = 80, compact = false, streamerM
   const meta = [
     ['model', streamerMode ? 'hidden' : m], ['user', cfg.user?.name], ['role', cfg.user?.role],
   ].filter(([, v]) => v);
+  // §3: show /login instruction when unauthenticated
+  const isAuth = Boolean(cfg.user?.name || cfg.user?.email || cfg.apiKey || cfg._token);
 
   if (compact) {
     return html`
@@ -182,6 +184,20 @@ export function Banner({ cfg = {}, model, width = 80, compact = false, streamerM
           <//>`)}
       <//>
       ${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}>
+            <${Text} color=${C.warning}>⚠ Not authenticated — run <//>
+            <${Text} color=${C.slash} bold>/login<//>
+            <${Text} color=${C.warning}> to connect.<//><//>` 
+        : null}
     <//>`;
 }
 
@@ -211,13 +227,36 @@ export function UserMessage({ text, cols = 80, ts }) {
     <//>`;
 }
 
-export function AssistantMessage({ text, cols = 80, ts, label = `${glyphs.copilotDot} iCopilot` }) {
+// §12: live streaming code-fence highlighter
+function StreamingText({ text = '' }) {
+  const lines = String(text).split('\n');
+  let inFence = false;
+  let fenceLang = '';
+  const rendered = [];
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    const fm = line.match(/^```(\w*)/);
+    if (fm) {
+      inFence = !inFence;
+      fenceLang = inFence ? (fm[1] || '') : '';
+      rendered.push(html`<${Text} key=${i} color=${C.muted}>${line}<//>`);
+    } else if (inFence) {
+      const isShell = /^(sh|bash|zsh|fish|console|shell)$/i.test(fenceLang);
+      rendered.push(html`<${Text} key=${i} color=${isShell ? C.success : C.brand}>${line}<//>`);
+    } else {
+      rendered.push(html`<${Text} key=${i}>${line}<//>`);
+    }
+  }
+  return rendered;
+}
+
+export function AssistantMessage({ text, cols = 80, ts, label = `${glyphs.copilotDot} iCopilot`, streaming = false }) {
   return html`
     <${Box} flexDirection="column" marginTop=${1}>
       <${Sep} cols=${cols} />
       <${SpeakerLine} label=${label} color=${C.accent} cols=${cols} ts=${ts} />
-      <${Box} paddingX=${2}>
-        <${Markdown} content=${text} />
+      <${Box} paddingX=${2} flexDirection="column">
+        ${streaming ? html`<${StreamingText} text=${text} />` : html`<${Markdown} content=${text} />`}
       <//>
     <//>`;
 }
@@ -296,7 +335,7 @@ export function Reasoning({ text, show = true }) {
   if (!show) {
     return html`
       <${Box} paddingX=${2} marginTop=${1}>
-        <${Text} color=${C.muted} italic>${glyphs.reasoning} Thinking (≈${tokenEst} tokens)… Ctrl+T to expand<//><//>`;
+        <${Text} color=${C.muted} italic>${glyphs.copilotDot} Thinking (≈${tokenEst} tokens)… Ctrl+T to expand<//><//>`;
   }
   return html`
     <${Box} flexDirection="column" marginTop=${1} borderStyle=${borderStyle()} borderColor=${C.separator}
@@ -468,7 +507,41 @@ export function Thinking({ label = 'Working', startedAt }) {
     <//>`;
 }
 
-export function Choice({ title, note, options = [], sel = 0, allowText = false, text = '', focusText = false }) {
+export function Choice({ title, note, options = [], sel = 0, allowText = false, text = '', focusText = false, isToolApproval = false }) {
+  // §13: tool approval uses exact spec format with Sep-style header
+  if (isToolApproval) {
+    return html`
+      <${Box} flexDirection="column" marginTop=${1}>
+        <${Sep} cols=${80} />
+        <${Box} paddingX=${2} marginTop=${1}>
+          <${Text} color=${C.accent} bold>⚙ Tool request<//>
+        <//>
+        ${note ? html`<${Box} paddingX=${2} marginTop=${1}><${Text} color=${C.muted}>${note}<//><//>` : null}
+        <${Box} flexDirection="column" marginTop=${1} paddingX=${2}>
+          ${options.map((o, i) => {
+            const on = !focusText && i === sel;
+            const label = o.label ?? o.value ?? String(o);
+            const tone = o.danger ? C.error : on ? C.success : C.white;
+            return html`
+              <${Box} key=${'o' + i}>
+                <${Text} color=${on ? C.success : C.muted}>${on ? glyphs.prompt + ' ' : '  '}<//>
+                <${Text} color=${tone} bold=${on}>${label}<//>
+              <//>`;
+          })}
+          ${allowText
+            ? html`<${Box} key="freetext" marginTop=${1}>
+                <${Text} color=${focusText ? C.accent : C.muted}>${focusText ? glyphs.prompt + ' ' : '  '}<//>
+                <${Text} color=${C.muted}>Tell Copilot what to do differently: <//>
+                <${Text} color=${C.white}>${text}<//>${focusText ? html`<${Text} inverse> <//>` : null}
+              <//>` 
+            : null}
+        <//>
+        <${Box} marginTop=${1} paddingX=${2}>
+          <${Text} color=${C.muted}>${glyphs.up}${glyphs.down} choose ${midDot()}Enter confirm ${midDot()}Esc cancel<//>
+        <//>
+      <//>`;
+  }
+
   return html`
     <${Box} flexDirection="column" marginTop=${1} borderStyle=${borderStyle()} borderColor=${C.accent} paddingX=${1}>
       ${title ? html`<${Text} color=${C.accent} bold>${glyphs.diamond} ${title}<//>` : null}

package/src/tui/composer.js

@@ -44,6 +44,21 @@ function fileCompletions(pathToken, cwd) {
   }
 }
 
+// §14: fuzzy file search for @word (no path separator)
+function fuzzyFileCompletions(token, cwd) {
+  const query = token.slice(1).toLowerCase();
+  if (!query) return [];
+  try {
+    const entries = readdirSync(cwd, { withFileTypes: true });
+    return entries
+      .filter((e) => e.name.toLowerCase().includes(query))
+      .slice(0, 8)
+      .map((e) => ({ tag: '@' + e.name, desc: e.isDirectory() ? 'directory' : 'file' }));
+  } catch {
+    return [];
+  }
+}
+
 function insertAt(text, cursor, chunk) {
   return text.slice(0, cursor) + chunk + text.slice(cursor);
 }
@@ -159,14 +174,18 @@ export function Composer({
   const token = upto.slice(tokStart);
   const slashMode = value.startsWith('/') && tokStart === 0;
   const mentionMode = token.startsWith('@');
-  // file path mention: @/ @./ @~/ or @word.ext style
-  const fileMode = mentionMode && /^@(\/|\.\/|~\/|\.\.\/)/.test(token);
+  // §14: file mode = explicit path prefix OR any path containing /
+  const fileMode = mentionMode && (/^@(\/|\.\/|~\/|\.\.\/)/.test(token) || (token.includes('/') && token.length > 1));
+  // Known entity mention: @device, @olt, @onu, @customer, etc.
+  const knownMention = mentionMode && !fileMode && MENTIONS.some((m) => m.tag.toLowerCase().startsWith(token.toLowerCase()));
   const matches = slashMode
     ? SLASH_COMMANDS.filter((s) => s.cmd.startsWith(token))
     : fileMode
     ? fileCompletions(token.slice(1), process.cwd())
-    : mentionMode
-    ? MENTIONS.filter((m) => m.tag.startsWith(token.toLowerCase()))
+    : knownMention
+    ? MENTIONS.filter((m) => m.tag.toLowerCase().startsWith(token.toLowerCase()))
+    : mentionMode && token.length > 1
+    ? fuzzyFileCompletions(token, process.cwd())  // §14: fuzzy file search
     : [];
   const menuOpen = matches.length > 0;
 
@@ -220,7 +239,10 @@ export function Composer({
       setText(c, c.length);
       return;
     }
-    const ins = matches[sel].tag + ':';
+    const match = matches[sel];
+    // §14: file paths get trailing space; entity mentions get ':'
+    const isFile = fileMode || match.desc === 'file' || match.desc === 'directory';
+    const ins = isFile ? match.tag + ' ' : match.tag + ':';
     const v = value.slice(0, tokStart) + ins + value.slice(cursor);
     setText(v, tokStart + ins.length);
   };
@@ -501,7 +523,9 @@ export function Composer({
               ? null
               : fileMode
               ? html`<${Box}><${Text} color=${C.brand} bold>@ file<//>  <${Text} color=${C.muted}>fuzzy path match<//><//>` 
-              : html`<${Box}><${Text} color=${C.brand} bold>@ mention<//>  <${Text} color=${C.muted}>device · customer · entity<//><//>` }
+              : knownMention
+              ? html`<${Box}><${Text} color=${C.brand} bold>@ mention<//>  <${Text} color=${C.muted}>device · customer · entity<//><//>` 
+              : html`<${Box}><${Text} color=${C.brand} bold>@ file<//>  <${Text} color=${C.muted}>fuzzy match<//><//>` }
             ${paletteRows}
           <//>`
         : null}

package/src/tui/theme.js

@@ -47,7 +47,7 @@ const ASCII_EXTRA = {
   collapse:   '-',    // collapse indicator
 };
 const UNICODE_EXTRA = {
-  copilotDot: '⬡',      // white hexagon for Copilot label
+  copilotDot: '◈',      // spec §6: ◈ Copilot speaker label (◈ in accent/purple)
   busy:       '⧖',      // white hourglass for busy state
   gitBranch:  '\uE0A0 ', // Nerd Font powerline branch glyph
   tabOpen:    '[',