ispbills-icli 8.4.7 → 8.4.9

package/bin/icli.js

@@ -315,13 +315,33 @@ async function main() {
   // plain readline REPL when stdout/stdin is not a TTY (pipes, dumb terminals).
   if (output.isTTY && input.isTTY) {
     const { runTui } = await import('../src/tui/run.js');
-    const action = await runTui(cfg, { display, version: pkgVersion() });
-    if (action === 'logout') {
+    const { loadResume } = await import('../src/resume.js');
+
+    // Hot-reload resume: if started with --resume <file>, restore the saved session.
+    const resumeFile = flag('--resume');
+    const resumeSession = loadResume(resumeFile);
+
+    const action = await runTui(cfg, { display, version: pkgVersion(), resumeSession });
+
+    const actionName = typeof action === 'string' ? action : action?.action;
+    if (actionName === 'logout') {
       const cleared = clearConfig();
       console.log(`\n  ${cleared ? GREEN + glyphs.check + RESET + ' Logged out — credentials cleared.' : YELLOW + 'Already logged out.' + RESET}`);
       console.log(`  ${DIM}Run ${RESET}${ACCENT}icli login${RESET}${DIM} to sign in again.${RESET}\n`);
-    } else if (action === 'update') {
-      selfUpdate();
+    } else if (actionName === 'update') {
+      const ok = selfUpdate();
+      if (ok && action?.resumeFile) {
+        // Re-exec with the new binary, passing --resume so the session is restored.
+        const { execFileSync } = await import('child_process');
+        const newBin = process.argv[1]; // same script path — npm replaced the file in-place
+        const baseArgs = process.argv.slice(2).filter((a) => a !== '--resume' && a !== action.resumeFile);
+        process.stdout.write(`\n  ${ACCENT}Reloading iCli with your session restored…${RESET}\n\n`);
+        try {
+          execFileSync(process.execPath, [newBin, ...baseArgs, '--resume', action.resumeFile], {
+            stdio: 'inherit',
+          });
+        } catch { /* user Ctrl+C'd the resumed session — that's fine */ }
+      }
     }
     return;
   }

package/package.json

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

package/src/resume.js

@@ -0,0 +1,30 @@
+/**
+ * Temporary session persistence for the /update hot-reload flow.
+ *
+ * Before updating, icli serialises the live conversation to a JSON file in
+ * /tmp so the new binary can resume right where the user left off.
+ */
+import { writeFileSync, readFileSync, existsSync, unlinkSync } from 'fs';
+import { tmpdir } from 'os';
+import { join } from 'path';
+
+const PREFIX = 'icli-resume-';
+
+/** Write a resume file and return its path. */
+export function saveResume(convo, plain, items = []) {
+  const path = join(tmpdir(), `${PREFIX}${Date.now()}.json`);
+  writeFileSync(path, JSON.stringify({ convo, plain, items, savedAt: new Date().toISOString() }), 'utf8');
+  return path;
+}
+
+/** Load and delete a resume file. Returns { convo, plain, items } or null. */
+export function loadResume(path) {
+  if (!path || !existsSync(path)) return null;
+  try {
+    const data = JSON.parse(readFileSync(path, 'utf8'));
+    try { unlinkSync(path); } catch { /* best-effort delete */ }
+    return { convo: data.convo || [], plain: data.plain || [], items: data.items || [] };
+  } catch {
+    return null;
+  }
+}

package/src/tui/app.js

@@ -9,6 +9,7 @@ import { C, glyphs, midDot, dash } from './theme.js';
 import {
   Banner, UserMessage, AssistantMessage, StatusLines, Reasoning,
   Plan, Connect, Notice, Thinking, Choice, ShellInput, ShellOut,
+  TabBar, MonitoringView, IssuesView, GistsView,
 } from './components.js';
 import { Composer } from './composer.js';
 import { streamChat } from '../client.js';
@@ -20,11 +21,16 @@ import { copyToClipboard, readFromClipboard } from '../clipboard.js';
 import { createGist } from '../gist.js';
 import { git as gitCmd, commitBackup } from '../gitrepo.js';
 import { runShell } from '../shell.js';
+import { checkLatestVersion } from '../version-check.js';
+import { saveResume } from '../resume.js';
 import { basename } from 'path';
 
 // CWD basename — computed once at startup (before any cd).
 const APP_CWD = basename(process.cwd());
 
+// Tab identifiers (order = display order).
+export const TABS = ['Session', 'Monitoring', 'Issues', 'Gists'];
+
 // Split a command argument string into argv, honouring "quoted" segments.
 function splitArgs(s) {
   const out = [];
@@ -52,7 +58,7 @@ function useTerminalSize() {
 let itemId = 0;
 const nextId = () => ++itemId;
 
-export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, version = '' }) {
+export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, version = '', resumeSession = null }) {
   const { exit } = useApp();
   const { cols, rows } = useTerminalSize();
 
@@ -67,6 +73,8 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, ve
   const [choice, setChoice] = useState(null); // { title, note, options, allowText, sel, text, focusText, onPick }
   const [clearEpoch, setClearEpoch] = useState(0); // bump to remount <Static> on /clear /new
   const [prefillText, setPrefillText] = useState(null); // clipboard paste → pre-fills Composer
+  const [activeTab, setActiveTab] = useState(0);        // 0=Session 1=Monitoring 2=Issues 3=Gists
+  const [latestVersion, setLatestVersion] = useState(null); // { latest, isNewer } from npm
 
   const convo = useRef([]);      // [{role, content}] for the backend
   const plain = useRef([]);      // plain-text transcript for exit reprint
@@ -76,6 +84,7 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, ve
   const modelRef = useRef(cfg._model); // preferred model to request
   const lastAnswerRef = useRef('');    // most recent assistant answer (for /copy, /gist)
   const choiceActionRef = useRef(null); // action to run when a non-AI Choice is picked
+  const issuesRef = useRef([]);        // AI-flagged issues accumulated across session
 
   // Enable terminal bracketed-paste so multi-line pastes (mouse right-click or
   // Cmd/Ctrl+V) arrive wrapped in markers as one block — the Composer inserts
@@ -85,6 +94,35 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, ve
     return () => { try { process.stdout.write('\x1b[?2004l'); } catch {} };
   }, []);
 
+  // Background version check — runs once after mount, non-blocking.
+  useEffect(() => {
+    if (!version || version === 'unknown') return;
+    checkLatestVersion(version).then((result) => {
+      if (result?.isNewer) setLatestVersion(result);
+    });
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Restore session after a hot-reload /update.
+  useEffect(() => {
+    if (!resumeSession) return;
+    convo.current = resumeSession.convo || [];
+    plain.current = resumeSession.plain || [];
+    // Re-hydrate items list from plain text so the user sees their history.
+    if (resumeSession.items?.length) {
+      setItems(resumeSession.items.map((it) => ({ id: nextId(), ...it })));
+    }
+    push({ type: 'notice', text: `${glyphs.check} Session restored after update — conversation history preserved.`, color: C.green });
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Tab switching: Ctrl+1/2/3/4.
+  useInput((input, key) => {
+    if (!key.ctrl) return;
+    if (input === '1') { setActiveTab(0); return; }
+    if (input === '2') { setActiveTab(1); return; }
+    if (input === '3') { setActiveTab(2); return; }
+    if (input === '4') { setActiveTab(3); return; }
+  });
+
   const setAutopilotMode = useCallback((next) => {
     apRef.current = next;
     setAutopilot(next);
@@ -330,7 +368,13 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, ve
       return;
     }
     if (q === '/logout') { onExternal?.('logout'); doExit(); return; }
-    if (q === '/update') { onExternal?.('update'); doExit(); return; }
+    if (q === '/update') {
+      // Save current conversation so the new binary can resume it.
+      const resumeFile = saveResume(convo.current, plain.current, items);
+      onExternal?.({ action: 'update', resumeFile });
+      doExit();
+      return;
+    }
 
     // ── Memory ──
     if (q === '/remember' || q.startsWith('/remember ')) {
@@ -549,40 +593,53 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, ve
 
   return html`
     <${Box} flexDirection="column" width=${cols}>
-      <${Static} key=${clearEpoch} items=${staticItems}>
-        ${(it) => it.type === 'banner'
-          ? html`<${Box} key=${it.id} flexDirection="column" alignItems="center" marginBottom=${1}>
-              <${Banner} cfg=${cfg} model=${model} width=${cols} compact=${compact} version=${version} cwd=${APP_CWD} />
-            <//>`
-          : renderItem(it)}
-      <//>
+      ${/* Tab bar — always pinned above content */null}
+      <${TabBar} tabs=${TABS} active=${activeTab} onSelect=${setActiveTab} width=${cols} />
 
-      ${live
+      ${activeTab === 0
         ? html`<${Box} flexDirection="column">
-            <${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}
-            ${live.text
-              ? html`<${Box} marginTop=${live.status.length ? 0 : 1}>
-                  <${AssistantMessage} text=${live.text} streaming=${true} />
-                <//>` : null}
-            ${!live.text && !live.reply?.steps
-              ? html`<${Thinking}
-                  label=${live.status.length ? 'Working' : 'Thinking'}
-                  startedAt=${startedAt} />`
+            <${Static} key=${clearEpoch} items=${staticItems}>
+              ${(it) => it.type === 'banner'
+                ? html`<${Box} key=${it.id} flexDirection="column" alignItems="center" marginBottom=${1}>
+                    <${Banner} cfg=${cfg} model=${model} width=${cols} compact=${compact} version=${version} cwd=${APP_CWD} />
+                  <//>`
+                : renderItem(it)}
+            <//>
+            ${live
+              ? html`<${Box} flexDirection="column">
+                  <${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}
+                  ${live.text
+                    ? html`<${Box} marginTop=${live.status.length ? 0 : 1}>
+                        <${AssistantMessage} text=${live.text} streaming=${true} />
+                      <//>`  : null}
+                  ${!live.text && !live.reply?.steps
+                    ? html`<${Thinking}
+                        label=${live.status.length ? 'Working' : 'Thinking'}
+                        startedAt=${startedAt} />`
+                    : null}
+                <//>`
               : null}
           <//>`
         : null}
+      ${activeTab === 1 ? html`<${MonitoringView} cfg=${cfg} />` : null}
+      ${activeTab === 2 ? html`<${IssuesView} issues=${issuesRef.current} />` : null}
+      ${activeTab === 3 ? html`<${GistsView} cfg=${cfg} />` : null}
 
       <${Box} flexDirection="column" marginTop=${1}>
-        ${choice
-          ? html`<${Choice} ...${choice} />`
-          : html`<${Composer} onSubmit=${onSubmit} busy=${busy} width=${cols} prefill=${prefillText} onPrefillConsumed=${() => setPrefillText(null)} />`}
+        ${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<//>  <//>` }
         <${Box} paddingX=${1} width=${cols}>
           <${Box} flexGrow=${1}>
             <${Text} dimColor wrap="truncate-end">${ctx}<//>
           <//>
-          <${Text} color=${footerColor} dimColor=${!footerColor} wrap="truncate-end">${footerHint}<//>
+          ${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}<//>` }
         <//>
       <//>
     <//>`;

package/src/tui/components.js

@@ -1,5 +1,5 @@
 // Presentational components for the iCli Ink TUI.
-import { html, useState, useEffect } from './dom.js';
+import { html, useState, useEffect, useRef, useCallback } from './dom.js';
 import { Box, Text } from 'ink';
 import Spinner from 'ink-spinner';
 import { C, SG, glyphs, spinnerType, borderStyle, midDot, dash, asciiSafe } from './theme.js';
@@ -68,7 +68,7 @@ export function Banner({ cfg = {}, model, width = 80, compact = false, version =
               C.white}>${val}<//>
           <//>`)}
       <//>
-      ${cfg.url ? html`<${Box} marginTop=${0}><${Text} dimColor>${cfg.url}<//>` : null}
+      ${cfg.url ? html`<${Box} marginTop=${0}><${Text} dimColor>${cfg.url}<//><//>`  : null}
       <${Box} marginTop=${1}>
         <${Text} dimColor>Type a message${midDot()}<//>
         <${Text} color=${C.accent}>/help<//>
@@ -479,3 +479,279 @@ export function ShellOut({ ok, output = '' }) {
         ? html`<${Text} dimColor>${glyphs.bullet} ${more} more line${more > 1 ? 's' : ''} hidden<//>` : null}
     <//>`;
 }
+
+// ── Tab bar ──────────────────────────────────────────────────────────────────
+// GitHub Copilot CLI-style tab bar pinned above the content area.
+// Tabs are keyboard-accessible via Ctrl+1/2/3/4 (wired in app.js).
+
+/**
+ * Top-of-screen tab bar: Session | Monitoring | Issues | Gists
+ * Active tab rendered with accent underline + bold; inactive tabs are dimmed.
+ * The separator rule beneath uses the brand accent colour.
+ */
+export function TabBar({ tabs = [], active = 0, onSelect, width = 80 }) {
+  const A = asciiSafe();
+  const sep = A ? '-' : '─';
+  return html`
+    <${Box} flexDirection="column" width=${width}>
+      <${Box} flexDirection="row" paddingX=${1} paddingTop=${0}>
+        ${tabs.map((label, i) => {
+          const on = i === active;
+          return html`
+            <${Box} key=${'tab' + i} marginRight=${2}>
+              <${Text}
+                color=${on ? C.accent : C.gray}
+                bold=${on}
+                dimColor=${!on}
+                underline=${on}
+              >${on ? glyphs.prompt + ' ' : '  '}${label}<//><//>`;
+        })}
+        <${Box} flexGrow=${1}>
+          <${Text} dimColor>  Ctrl+${tabs.map((_, i) => i + 1).join('/')}<//><//>
+      <//>
+      <${Text} color=${C.accent} dimColor>${sep.repeat(Math.max(8, width - 2))}<//>
+    <//>`;
+}
+
+// ── Monitoring tab ────────────────────────────────────────────────────────────
+
+/**
+ * Auto-fetch /api/v2/monitoring/devices and /api/v2/monitoring/status-checks.
+ * Refreshes every 30 seconds.
+ */
+export function MonitoringView({ cfg }) {
+  const [data, setData] = useState(null);  // { devices, checks }
+  const [loading, setLoading] = useState(true);
+  const [err, setErr] = useState(null);
+  const [lastAt, setLastAt] = useState(null);
+  const timerRef = useRef(null);
+
+  const fetch_ = useCallback(async () => {
+    if (!cfg?.url || !cfg?.token) {
+      setErr('No server configured. Run icli login first.');
+      setLoading(false);
+      return;
+    }
+    try {
+      const headers = { Authorization: `Bearer ${cfg.token}`, Accept: 'application/json' };
+      const [devRes, chkRes] = await Promise.all([
+        fetch(`${cfg.url}/api/v2/monitoring/devices`, { headers }).catch(() => null),
+        fetch(`${cfg.url}/api/v2/monitoring/status-checks`, { headers }).catch(() => null),
+      ]);
+      const devices = devRes?.ok ? ((await devRes.json()).data || []) : [];
+      const checks  = chkRes?.ok ? ((await chkRes.json()).data || []) : [];
+      setData({ devices, checks });
+      setErr(null);
+    } catch (e) {
+      setErr(e.message || 'Fetch failed');
+    } finally {
+      setLoading(false);
+      setLastAt(new Date().toLocaleTimeString());
+    }
+  }, [cfg]);
+
+  useEffect(() => {
+    fetch_();
+    timerRef.current = setInterval(fetch_, 30000);
+    return () => clearInterval(timerRef.current);
+  }, [fetch_]);
+
+  if (loading) return html`
+    <${Box} marginTop=${2} paddingX=${2}>
+      <${Text} color=${C.accent}><${Spinner} type=${spinnerType()} /><//>
+      <${Text} color=${C.gray}> Fetching device status…<//>
+    <//>`;
+
+  if (err) return html`
+    <${Box} marginTop=${2} paddingX=${2} flexDirection="column">
+      <${Text} color=${C.red}>${glyphs.cross} Monitoring error: ${err}<//>
+      <${Text} dimColor>Make sure the server is reachable and you are logged in.<//>
+    <//>`;
+
+  const { devices = [], checks = [] } = data || {};
+  const devUp   = devices.filter((d) => String(d.status).toLowerCase() === 'up' || d.status === 1).length;
+  const devDown = devices.length - devUp;
+  const chkOk   = checks.filter((c) => c.latest_result?.status === 'up').length;
+  const chkFail = checks.filter((c) => c.latest_result?.status !== 'up' && c.latest_result).length;
+
+  return html`
+    <${Box} flexDirection="column" paddingX=${2} marginTop=${1}>
+      <${Box} marginBottom=${1}>
+        <${Text} color=${C.accent} bold>Network Monitoring<//>
+        ${lastAt ? html`<${Text} dimColor>  · refreshes every 30s · last: ${lastAt}<//>` : null}
+      <//>
+
+      ${/* ── Device summary ── */ null}
+      <${Box} marginBottom=${1} flexDirection="row" gap=${3}>
+        <${Box} flexDirection="column">
+          <${Text} dimColor>Managed Devices<//>
+          <${Box}>
+            <${Text} color=${C.green} bold>${devUp}<//>
+            <${Text} color=${C.gray}> up  <//>
+            <${Text} color=${devDown > 0 ? C.red : C.gray} bold=${devDown > 0}>${devDown}<//>
+            <${Text} color=${C.gray}> down<//>
+          <//>
+        <//>
+        <${Box} flexDirection="column">
+          <${Text} dimColor>Status Checks<//>
+          <${Box}>
+            <${Text} color=${C.green} bold>${chkOk}<//>
+            <${Text} color=${C.gray}> ok  <//>
+            <${Text} color=${chkFail > 0 ? C.red : C.gray} bold=${chkFail > 0}>${chkFail}<//>
+            <${Text} color=${C.gray}> fail<//>
+          <//>
+        <//>
+      <//>
+
+      ${/* ── Down devices ── */ null}
+      ${devDown > 0
+        ? html`<${Box} flexDirection="column" marginBottom=${1}>
+            <${Text} color=${C.red} bold>${glyphs.warn} Down devices<//>
+            ${devices.filter((d) => String(d.status).toLowerCase() !== 'up' && d.status !== 1).slice(0, 10).map((d, i) =>
+              html`<${Box} key=${'dd' + i}>
+                <${Text} color=${C.red}>  ${glyphs.cross} <//>
+                <${Text} color=${C.white}>${d.name || d.ip_address}<//>
+                <${Text} dimColor>  ${d.device_type || ''}  ${d.ip_address}<//>
+              <//>` )}
+          <//>` : null}
+
+      ${/* ── Failed checks ── */ null}
+      ${chkFail > 0
+        ? html`<${Box} flexDirection="column">
+            <${Text} color=${C.yellow} bold>${glyphs.warn} Failed checks<//>
+            ${checks.filter((c) => c.latest_result?.status !== 'up' && c.latest_result).slice(0, 10).map((c, i) =>
+              html`<${Box} key=${'cf' + i}>
+                <${Text} color=${C.yellow}>  ${glyphs.warn} <//>
+                <${Text} color=${C.white}>${c.name}<//>
+                <${Text} dimColor>  ${c.target || ''}  ${c.latest_result?.status || 'unknown'}<//>
+              <//>` )}
+          <//>` : null}
+
+      ${devDown === 0 && chkFail === 0
+        ? html`<${Box}><${Text} color=${C.green}>${glyphs.check} All devices and checks are up<//>  <//>`
+        : null}
+
+      <${Box} marginTop=${1}>
+        <${Text} dimColor>Switch to Session tab (Ctrl+1) · type /check in Session for details<//>
+      <//>
+    <//>`;
+}
+
+// ── Issues tab ────────────────────────────────────────────────────────────────
+
+/**
+ * Shows AI-flagged issues collected during the current session.
+ * Issues are populated by app.js whenever the AI notices an error/alarm.
+ */
+export function IssuesView({ issues = [] }) {
+  if (!issues.length) return html`
+    <${Box} flexDirection="column" paddingX=${2} marginTop=${2}>
+      <${Text} color=${C.accent} bold>Issues<//>
+      <${Box} marginTop=${1}>
+        <${Text} dimColor>${glyphs.bullet} No issues flagged in this session.<//>
+      <//>
+      <${Box} marginTop=${1}>
+        <${Text} dimColor>Run /alarms or /check in the Session tab to detect problems.<//>
+      <//>
+    <//>`;
+
+  return html`
+    <${Box} flexDirection="column" paddingX=${2} marginTop=${1}>
+      <${Text} color=${C.accent} bold>Issues  <${Text} dimColor>(${issues.length} flagged this session)<//><//>
+      <${Box} flexDirection="column" marginTop=${1}>
+        ${issues.slice().reverse().slice(0, 20).map((iss, i) => html`
+          <${Box} key=${'iss' + i} flexDirection="column" marginBottom=${1}>
+            <${Box}>
+              <${Text} color=${iss.severity === 'high' ? C.red : iss.severity === 'medium' ? C.yellow : C.gray}
+              >${iss.severity === 'high' ? glyphs.cross : glyphs.warn} <//>
+              <${Text} color=${C.white} bold>${iss.title}<//>
+              <${Text} dimColor>  ${iss.ts || ''}<//>
+            <//>
+            ${iss.body ? html`<${Text} dimColor>  ${iss.body.slice(0, 120)}<//>` : null}
+          <//>` )}
+      <//>
+    <//>`;
+}
+
+// ── Gists tab ─────────────────────────────────────────────────────────────────
+
+/**
+ * Lists GitHub gists created with /gist during this session or stored locally.
+ * If no GitHub token is set, shows instructions.
+ */
+export function GistsView({ cfg }) {
+  const [gists, setGists] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [err, setErr] = useState(null);
+
+  useEffect(() => {
+    const token = cfg?.github_token;
+    if (!token) {
+      setLoading(false);
+      return;
+    }
+    fetch('https://api.github.com/gists?per_page=20', {
+      headers: { Authorization: `token ${token}`, Accept: 'application/vnd.github.v3+json' },
+    })
+      .then((r) => (r.ok ? r.json() : Promise.reject(new Error(`HTTP ${r.status}`))))
+      .then((data) => {
+        const icliGists = Array.isArray(data)
+          ? data.filter((g) => (g.description || '').startsWith('[icli]') || (g.description || '').includes('iCopilot'))
+          : [];
+        setGists(icliGists.length ? icliGists : data.slice(0, 10));
+      })
+      .catch((e) => setErr(e.message))
+      .finally(() => setLoading(false));
+  }, [cfg?.github_token]);
+
+  if (!cfg?.github_token) return html`
+    <${Box} flexDirection="column" paddingX=${2} marginTop=${2}>
+      <${Text} color=${C.accent} bold>Gists<//>
+      <${Box} marginTop=${1} flexDirection="column">
+        <${Text} dimColor>No GitHub token configured.<//>
+        <${Text} dimColor>Run: ${''}<//>
+        <${Text} color=${C.cyan}>  /gist token YOUR_TOKEN<//>
+        <${Text} dimColor>Then use ${''}<//>
+        <${Text} color=${C.cyan}>  /gist<//>
+        <${Text} dimColor> in Session to save AI answers as secret gists.<//>
+      <//>
+    <//>`;
+
+  if (loading) return html`
+    <${Box} paddingX=${2} marginTop=${2}>
+      <${Text} color=${C.accent}><${Spinner} type=${spinnerType()} /><//>
+      <${Text} color=${C.gray}> Loading gists…<//>
+    <//>`;
+
+  if (err) return html`
+    <${Box} paddingX=${2} marginTop=${2} flexDirection="column">
+      <${Text} color=${C.red}>${glyphs.cross} GitHub error: ${err}<//>
+    <//>`;
+
+  if (!gists.length) return html`
+    <${Box} paddingX=${2} marginTop=${2} flexDirection="column">
+      <${Text} color=${C.accent} bold>Gists<//>
+      <${Box} marginTop=${1}><${Text} dimColor>No gists yet. Use /gist in Session to save an answer.<//>  <//><//>
+    <//>`;
+
+  return html`
+    <${Box} flexDirection="column" paddingX=${2} marginTop=${1}>
+      <${Text} color=${C.accent} bold>Gists  <${Text} dimColor>(${gists.length} recent)<//><//>
+      <${Box} flexDirection="column" marginTop=${1}>
+        ${gists.slice(0, 15).map((g, i) => {
+          const fname = Object.keys(g.files || {})[0] || 'unknown';
+          const desc  = (g.description || fname).slice(0, 60);
+          const date  = g.updated_at ? g.updated_at.slice(0, 10) : '';
+          return html`
+            <${Box} key=${'g' + i} marginBottom=${0}>
+              <${Text} color=${C.cyan}>${glyphs.bullet} <//>
+              <${Text} color=${C.white}>${desc}<//>
+              <${Text} dimColor>  ${date}<//>
+            <//>
+            <${Box} key=${'gu' + i}>
+              <${Text} dimColor>  ${g.html_url || ''}<//>
+            <//>`;
+        })}
+      <//>
+    <//>`;
+}

package/src/tui/run.js

@@ -8,7 +8,7 @@ import { render } from 'ink';
 import { App } from './app.js';
 
 export async function runTui(cfg, opts = {}) {
-  const { display = {}, onExternal, initialQuestion, version = '' } = opts;
+  const { display = {}, onExternal, initialQuestion, version = '', resumeSession = null } = opts;
   let externalAction;
 
   const instance = render(
@@ -17,6 +17,7 @@ export async function runTui(cfg, opts = {}) {
       display=${display}
       initialQuestion=${initialQuestion}
       version=${version}
+      resumeSession=${resumeSession}
       onExternal=${(a) => { externalAction = a; onExternal?.(a); }}
     />`,
     { exitOnCtrlC: false },

package/src/version-check.js

@@ -0,0 +1,43 @@
+/**
+ * Background version check against npm registry.
+ * Caches the result in the session so we only hit npm once per run.
+ * Resolves to { latest, isNewer } or null on any error (network, etc.).
+ */
+
+const PKG_NAME = 'ispbills-icli';
+const REGISTRY  = `https://registry.npmjs.org/${PKG_NAME}/latest`;
+
+/** Parse a semver string into [major, minor, patch] ints. */
+function parse(v) {
+  const parts = String(v || '').replace(/[^0-9.]/g, '').split('.').map(Number);
+  return [parts[0] || 0, parts[1] || 0, parts[2] || 0];
+}
+
+/** Returns true when `remote` is strictly newer than `current`. */
+function isNewer(current, remote) {
+  const [cMaj, cMin, cPat] = parse(current);
+  const [rMaj, rMin, rPat] = parse(remote);
+  if (rMaj !== cMaj) return rMaj > cMaj;
+  if (rMin !== cMin) return rMin > cMin;
+  return rPat > cPat;
+}
+
+/**
+ * Check npm for a newer version of ispbills-icli.
+ * Resolves to { latest: string, isNewer: boolean } or null.
+ */
+export async function checkLatestVersion(currentVersion) {
+  try {
+    const ctrl = new AbortController();
+    const timer = setTimeout(() => ctrl.abort(), 5000);
+    const res = await fetch(REGISTRY, { signal: ctrl.signal });
+    clearTimeout(timer);
+    if (!res.ok) return null;
+    const data = await res.json();
+    const latest = data.version;
+    if (!latest) return null;
+    return { latest, isNewer: isNewer(currentVersion, latest) };
+  } catch {
+    return null;
+  }
+}