ispbills-icli 8.4.9 → 8.4.11

package/package.json

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

package/src/tui/app.js

@@ -3,9 +3,16 @@
 // items are flushed to the terminal's native scrollback via Ink <Static> (so
 // you can scroll back through history), and only the live/streaming area plus
 // the input composer are re-rendered in place at the bottom.
-import { html, useState, useEffect, useRef, useCallback } from './dom.js';
+//
+// Mouse support (via src/tui/mouse.js + run.js):
+//   • Scroll UP   → sends \x1b[3S to scroll the terminal viewport upward
+//                   so the native scrollback buffer shows conversation history.
+//   • Scroll DOWN → swallowed; prevents drifting below the live/composer area.
+//   • Left click on tab bar row 1 → switches tabs by x-coordinate range.
+import { html, useState, useEffect, useRef, useCallback, useMemo } from './dom.js';
 import { Box, Text, Static, useStdout, useApp, useInput } from 'ink';
 import { C, glyphs, midDot, dash } from './theme.js';
+import { mouseEvents } from './mouse.js';
 import {
   Banner, UserMessage, AssistantMessage, StatusLines, Reasoning,
   Plan, Connect, Notice, Thinking, Choice, ShellInput, ShellOut,
@@ -123,6 +130,62 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, ve
     if (input === '4') { setActiveTab(3); return; }
   });
 
+  // ── Mouse event handling ────────────────────────────────────────────────────
+  // Tab bar x-ranges (1-indexed). Layout: paddingX=1 on the TabBar outer Box
+  // so text starts at column 2. Each tab = 2-char prefix ('  ' or '❯ ') +
+  // label text, followed by marginRight=2 before the next tab.
+  const tabClickRanges = useMemo(() => {
+    let x = 2; // paddingX=1 → first tab starts at column 2
+    return TABS.map((label) => {
+      const start = x;
+      const w = 2 + label.length; // prefix (2 chars) + label
+      x += w + 2;                 // advance past tab + marginRight=2
+      return { start, end: start + w - 1 };
+    });
+  }, []);
+
+  useEffect(() => {
+    const onMouse = ({ btn, x, y, press }) => {
+      // ── Scroll wheel UP → scroll viewport to reveal history ──────────────
+      if (btn === 64) {
+        try { process.stdout.write('\x1b[3S'); } catch {}
+        return;
+      }
+      // ── Scroll wheel DOWN → swallowed ─────────────────────────────────────
+      if (btn === 65) return;
+
+      // ── Left click → tab bar ─────────────────────────────────────────────
+      // Ink renders INLINE at the bottom of the terminal — NOT at y=1.
+      // SGR y coordinates are 1-indexed from the terminal top.
+      //
+      // Layout rows at idle (bottom-to-top):
+      //   rows    = footer hint
+      //   rows-1  = composer bottom border
+      //   rows-2  = composer input
+      //   rows-3  = composer top border
+      //   rows-4  = blank (marginTop=1 before composer)
+      //   rows-5  = tab separator
+      //   rows-6  = tab labels  ← TAB_ROW at idle
+      //   rows-7  = compact header
+      //
+      // When there is live content of height h between tab separator and
+      // composer, each row shifts up by h: TAB_ROW = rows - 6 - liveH.
+      if (btn === 0 && press) {
+        const liveH = live
+          ? 1 + Math.min((live.status?.length || 0) + (live.text ? 2 : 0) + (!live.text && !live.reply?.steps ? 1 : 0), 12)
+          : 0;
+        const tabRowY = rows - 6 - liveH;
+        if (Math.abs(y - tabRowY) <= 1) {          // ±1 row tolerance
+          const idx = tabClickRanges.findIndex((r) => x >= r.start && x <= r.end);
+          if (idx >= 0) setActiveTab(idx);
+        }
+      }
+    };
+
+    mouseEvents.on('event', onMouse);
+    return () => mouseEvents.off('event', onMouse);
+  }, [tabClickRanges, rows, live]);
+
   const setAutopilotMode = useCallback((next) => {
     apRef.current = next;
     setAutopilot(next);
@@ -575,38 +638,52 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, ve
   };
 
   const ctx = [model ? shortModel(model) : null, APP_CWD, cfg.user?.name, cfg.user?.role].filter(Boolean).join(midDot());
-  // Footer: left = session context (dimmed), right = hint or key-hints.
-  // Autopilot mode turns the right side yellow.
-  const footerHint = hint
-    ? hint
-    : autopilot
-    ? `${glyphs.bolt} autopilot ON${midDot()}/help${midDot()}Shift+Tab off${midDot()}Ctrl+C exit`
-    : `/help${midDot()}Shift+Tab autopilot${midDot()}Ctrl+C exit`;
-  const footerColor = hint ? C.yellow : autopilot ? C.yellow : void 0;
+  // Footer shows a concise key-hints bar. Autopilot badge is a right-aligned label.
+  const baseHint = hint || `/help${midDot()}Shift+Tab autopilot${midDot()}↑ scroll history${midDot()}Ctrl+C exit`;
   const compact = cols < 60;
 
   // The banner is the first <Static> item so it prints once at the very top and
   // scrolls away with history; completed transcript items follow it. Ink flushes
   // each <Static> item to the terminal's normal buffer exactly once, leaving the
   // native scrollback intact so earlier conversation can be scrolled back to.
+  // Scroll UP (mouse wheel) reveals this history; scroll DOWN is blocked.
   const staticItems = [{ type: 'banner', id: `banner-${clearEpoch}` }, ...items];
 
+  // ── Main render ─────────────────────────────────────────────────────────────
+  // Layout (top to bottom):
+  //  1. Compact persistent header — "iCopilot" brand always visible
+  //  2. Tab bar — Session / Monitoring / Issues / Gists (mouse-clickable)
+  //  3. Session pane — Static history + live streaming area  (scrollback via ↑)
+  //  4. Composer + footer — always pinned to the bottom
   return html`
     <${Box} flexDirection="column" width=${cols}>
-      ${/* Tab bar — always pinned above content */null}
+
+      ${/* ── 1. Compact header: brand + active context ─────────────────── */null}
+      <${Box} paddingX=${1} paddingTop=${0}>
+        <${Text} color=${C.accent} bold>iCopilot<//>
+        <${Text} color=${C.gray}> ${dash()} <//>
+        <${Text} dimColor>${ctx}<//>
+        ${latestVersion?.isNewer
+          ? html`<${Box} flexGrow=${1} justifyContent="flex-end"><${Text} color=${C.yellow}> 🔔 v${latestVersion.latest} /update<//>  <//>`
+          : null}
+      <//>
+
+      ${/* ── 2. Tab bar (mouse-clickable + Ctrl+1–4) ──────────────────── */null}
       <${TabBar} tabs=${TABS} active=${activeTab} onSelect=${setActiveTab} width=${cols} />
 
+      ${/* ── 3a. Session pane ────────────────────────────────────────────── */null}
       ${activeTab === 0
         ? html`<${Box} flexDirection="column">
             <${Static} key=${clearEpoch} items=${staticItems}>
               ${(it) => it.type === 'banner'
-                ? html`<${Box} key=${it.id} flexDirection="column" alignItems="center" marginBottom=${1}>
+                ? html`<${Box} key=${it.id} flexDirection="column" alignItems="center" marginBottom=${2}>
                     <${Banner} cfg=${cfg} model=${model} width=${cols} compact=${compact} version=${version} cwd=${APP_CWD} />
                   <//>`
                 : renderItem(it)}
             <//>
+            ${/* Gap between history and live area — gives breathing room */null}
             ${live
-              ? html`<${Box} flexDirection="column">
+              ? html`<${Box} flexDirection="column" marginTop=${1}>
                   <${StatusLines} lines=${live.status} busy=${busy} />
                   ${showReasoning && live.reasoning ? html`<${Reasoning} text=${live.reasoning} />` : null}
                   ${live.reply?.steps ? html`<${Plan} reply=${live.reply} live=${true} />` : null}
@@ -623,23 +700,24 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, ve
               : null}
           <//>`
         : null}
+
+      ${/* ── 3b. Other tabs ──────────────────────────────────────────────── */null}
       ${activeTab === 1 ? html`<${MonitoringView} cfg=${cfg} />` : null}
       ${activeTab === 2 ? html`<${IssuesView} issues=${issuesRef.current} />` : null}
       ${activeTab === 3 ? html`<${GistsView} cfg=${cfg} />` : null}
 
+      ${/* ── 4. Composer + footer — fixed at bottom ─────────────────────── */null}
       <${Box} flexDirection="column" marginTop=${1}>
         ${activeTab === 0
           ? (choice
             ? html`<${Choice} ...${choice} />`
             : html`<${Composer} onSubmit=${onSubmit} busy=${busy} width=${cols} prefill=${prefillText} onPrefillConsumed=${() => setPrefillText(null)} />`)
-          : html`<${Box} paddingX=${1}><${Text} dimColor>Ctrl+1 for Session  ·  Ctrl+2/3/4 for other tabs<//>  <//>` }
+          : html`<${Box} paddingX=${1}><${Text} dimColor>Click a tab or Ctrl+1–4 to switch  ·  Ctrl+1 for Session<//>  <//>` }
         <${Box} paddingX=${1} width=${cols}>
           <${Box} flexGrow=${1}>
-            <${Text} dimColor wrap="truncate-end">${ctx}<//>
-          <//>
-          ${latestVersion?.isNewer
-            ? html`<${Text} color=${C.yellow} wrap="truncate-end">🔔 v${latestVersion.latest} available — /update<//>` 
-            : html`<${Text} color=${footerColor} dimColor=${!footerColor} wrap="truncate-end">${footerHint}<//>` }
+            <${Text} dimColor wrap="truncate-end">${hint ? hint : baseHint}<//><//>
+          ${autopilot
+            ? html`<${Text} color=${C.yellow} bold wrap="truncate-end"> ${glyphs.bolt} autopilot ON<//>` : null}
         <//>
       <//>
     <//>`;

package/src/tui/components.js

@@ -507,7 +507,7 @@ export function TabBar({ tabs = [], active = 0, onSelect, width = 80 }) {
               >${on ? glyphs.prompt + ' ' : '  '}${label}<//><//>`;
         })}
         <${Box} flexGrow=${1}>
-          <${Text} dimColor>  Ctrl+${tabs.map((_, i) => i + 1).join('/')}<//><//>
+          <${Text} dimColor>  click or Ctrl+${tabs.map((_, i) => i + 1).join('/')}<//><//>
       <//>
       <${Text} color=${C.accent} dimColor>${sep.repeat(Math.max(8, width - 2))}<//>
     <//>`;

package/src/tui/mouse.js

@@ -0,0 +1,68 @@
+// Mouse event support for the iCli TUI.
+// Patches process.stdin.read() to intercept SGR mouse escape sequences before
+// Ink's input parser sees them, routing them to a shared EventEmitter instead.
+// This prevents mouse sequences from appearing as garbage in the composer.
+//
+// SGR mouse format: \x1b[<{btn};{x};{y}M  (button press)
+//                   \x1b[<{btn};{x};{y}m  (button release)
+//
+// Button codes of interest:
+//   0  = left click press/release
+//   64 = scroll wheel up
+//   65 = scroll wheel down
+import { EventEmitter } from 'events';
+
+const MOUSE_SGR = /\x1b\[<(\d+);(\d+);(\d+)([Mm])/g;
+
+// Shared event emitter — app.js subscribes to 'event'.
+export const mouseEvents = new EventEmitter();
+mouseEvents.setMaxListeners(20);
+
+/**
+ * Patch stdin.read() to intercept and strip mouse sequences.
+ * Returns an unpatch function to restore the original.
+ */
+export function patchStdinMouse(stdin) {
+  if (!stdin || typeof stdin.read !== 'function') return () => {};
+  const origRead = stdin.read.bind(stdin);
+
+  stdin.read = function (size) {
+    const data = origRead(size);
+    if (!data) return data;
+    const str = data.toString('utf8');
+
+    // Emit each mouse event found in the chunk.
+    MOUSE_SGR.lastIndex = 0;
+    let m;
+    while ((m = MOUSE_SGR.exec(str)) !== null) {
+      mouseEvents.emit('event', {
+        btn: parseInt(m[1], 10),
+        x:   parseInt(m[2], 10),
+        y:   parseInt(m[3], 10),
+        press: m[4] === 'M',
+      });
+    }
+
+    // Strip ALL mouse sequences so Ink never sees them.
+    const filtered = str.replace(/\x1b\[<\d+;\d+;\d+[Mm]/g, '');
+    return filtered ? Buffer.from(filtered, 'utf8') : null;
+  };
+
+  return function unpatch() {
+    stdin.read = origRead;
+  };
+}
+
+/** Enable SGR mouse button + scroll-wheel tracking. */
+export function enableMouse() {
+  try {
+    process.stdout.write('\x1b[?1000h\x1b[?1006h');
+  } catch {}
+}
+
+/** Disable SGR mouse tracking (restore normal terminal mouse behaviour). */
+export function disableMouse() {
+  try {
+    process.stdout.write('\x1b[?1000l\x1b[?1006l');
+  } catch {}
+}

package/src/tui/run.js

@@ -3,14 +3,25 @@
 // once at the top and scrolls away, and the terminal's native scrollback keeps
 // the full conversation history. Completed transcript items are flushed to the
 // scrollback by Ink's <Static>; only the live area + input re-render in place.
+//
+// Mouse support: SGR mouse tracking is enabled so that:
+//  • Left-clicks on the tab bar switch tabs.
+//  • Scroll-wheel UP scrolls the terminal's native scrollback (history).
+//  • Scroll-wheel DOWN is swallowed — no drifting below the live area.
 import { html } from './dom.js';
 import { render } from 'ink';
 import { App } from './app.js';
+import { patchStdinMouse, enableMouse, disableMouse } from './mouse.js';
 
 export async function runTui(cfg, opts = {}) {
   const { display = {}, onExternal, initialQuestion, version = '', resumeSession = null } = opts;
   let externalAction;
 
+  // Patch stdin.read() to strip mouse sequences before Ink sees them,
+  // then enable SGR mouse tracking so the terminal sends us those events.
+  const unpatchMouse = patchStdinMouse(process.stdin);
+  enableMouse();
+
   const instance = render(
     html`<${App}
       cfg=${cfg}
@@ -25,5 +36,8 @@ export async function runTui(cfg, opts = {}) {
 
   await instance.waitUntilExit();
 
+  disableMouse();
+  unpatchMouse();
+
   return externalAction;
 }