scripter-x 1.0.0 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "scripter-x",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "ScripterX — local Flipkart session extractor (runs on your residential IP, syncs to marthunt)",
   "type": "module",
   "bin": {

package/src/commands.js

@@ -237,11 +237,19 @@ export async function configCmd(io, _api, args = {}) {
 }
 
 export function help(io) {
-  io.print('  commands: run · campaigns · export · balance · creds · stop · delete · whoami · config · logout · exit');
+  io.print('  commands: run · campaigns · export · balance · creds · stop · delete · whoami · config · update · logout · exit');
+}
+
+export async function update(io) {
+  io.print('  ◉ updating ScripterX to the latest version…');
+  const { runUpdate } = await import('./update.js');
+  const r = await runUpdate();
+  if (r.ok) io.print('  ✓ updated! restart `scripterx` to use the new version.');
+  else io.print(`  ✗ update failed: ${r.output.split('\n')[0]} — try: npm install -g scripter-x@latest`);
 }
 
 // dispatch table used by the interactive shell
 export const REGISTRY = {
   run, campaigns, export: exportCmd, balance, creds, stop, delete: del,
-  whoami, login, logout, config: configCmd, help,
+  whoami, login, logout, config: configCmd, update, help,
 };

package/src/index.js

@@ -10,6 +10,7 @@ import { paint } from './util.js';
 import { ask, askSecret, confirm, askChoice } from './prompt.js';
 import { REGISTRY } from './commands.js';
 import { App } from './ui/App.js';
+import { FullScreen, enterAltScreen } from './ui/fullscreen.js';
 
 const VERSION = '1.0.0';
 const h = React.createElement;
@@ -73,23 +74,28 @@ async function main() {
     let username = cfg.username;
     // validate token quietly so the banner shows the right user
     if (cfg.jwt) { try { username = (await new ApiClient().me()).username; } catch { username = null; } }
+    // non-blocking update check (shown as a notice line once the shell is up)
+    let updateNotice = null;
+    try { const { checkForUpdate } = await import('./update.js'); const v = await checkForUpdate(VERSION); if (v) updateNotice = v; } catch { /* */ }
     const ctx = {
-      username, server: cfg.server_base_url,
+      username, server: cfg.server_base_url, updateNotice,
       dispatch: async (name, io) => {
         const fn = REGISTRY[name] || REGISTRY[name.split(' ')[0]];
         if (!fn) { io.print(`  ✗ unknown command: ${name} (type 'help')`); return; }
         await fn(io, null, {});
       },
     };
-    const { waitUntilExit } = render(h(App, { ctx }));
-    await waitUntilExit();
+    // fullscreen: own the screen (stable coords, no flicker), restore on exit
+    const restore = enterAltScreen();
+    const { waitUntilExit } = render(h(FullScreen, null, h(App, { ctx })), { exitOnCtrlC: false });
+    try { await waitUntilExit(); } finally { restore(); }
     return;
   }
 
   // ── one-shot mode ──
   const map = { run: 'run', campaigns: 'campaigns', export: 'export', balance: 'balance',
     creds: 'creds', stop: 'stop', delete: 'delete', whoami: 'whoami', login: 'login',
-    logout: 'logout', config: 'config', help: 'help' };
+    logout: 'logout', config: 'config', update: 'update', help: 'help' };
   const fnName = map[cmd];
   if (!fnName) { cliIo.print(`  ✗ unknown command: ${cmd}`); console.log(HELP); process.exit(1); }
   const args = {

package/src/theme.js

@@ -42,6 +42,31 @@ function hexRgb(h) {
   return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)];
 }
 
+// ASCII wordmark for the welcome screen (MOTD-style). Each line gets a gradient color.
+export const ASCII_LOGO = [
+  '  ███████  ██████ ██████  ██ ██████  ████████ ███████ ██████  ██   ██',
+  '  ██      ██      ██   ██ ██ ██   ██    ██    ██      ██   ██  ██ ██ ',
+  '  ███████ ██      ██████  ██ ██████     ██    █████   ██████    ███  ',
+  '       ██ ██      ██   ██ ██ ██         ██    ██      ██   ██  ██ ██ ',
+  '  ███████  ██████ ██   ██ ██ ██         ██    ███████ ██   ██ ██   ██',
+];
+
+// Return the logo lines, each tinted with one stop of the brand gradient (top→bottom sweep).
+export function logoLines(colors = BRAND_GRAD) {
+  const stops = colors.map(hexRgb);
+  const n = Math.max(ASCII_LOGO.length - 1, 1);
+  return ASCII_LOGO.map((line, i) => {
+    const pos = (i / n) * (stops.length - 1);
+    const lo = Math.floor(pos);
+    const hi = Math.min(lo + 1, stops.length - 1);
+    const f = pos - lo;
+    const r = Math.round(stops[lo][0] + (stops[hi][0] - stops[lo][0]) * f);
+    const g = Math.round(stops[lo][1] + (stops[hi][1] - stops[lo][1]) * f);
+    const b = Math.round(stops[lo][2] + (stops[hi][2] - stops[lo][2]) * f);
+    return { text: line, color: `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}` };
+  });
+}
+
 // Return an array of {char, color} for a smooth gradient sweep across `colors`.
 export function gradientChars(s, colors = BRAND_GRAD) {
   const stops = colors.map(hexRgb);

package/src/ui/App.js

@@ -8,7 +8,7 @@
 //   'output'  → scrollback lines a command printed (tables, results)
 import React, { useState, useEffect, useRef } from 'react';
 import { Box, Text, useApp } from 'ink';
-import { Shell } from './Shell.js';
+import { Shell, WelcomeBox } from './Shell.js';
 import { SelectList, Confirm, TextField } from './components.js';
 import { RunView } from './RunView.js';
 import { COLORS } from '../theme.js';
@@ -62,6 +62,13 @@ export function App({ ctx }) {
     };
   }
 
+  // show the "update available" notice once on mount
+  useEffect(() => {
+    if (ctx.updateNotice) {
+      io.current.print(`  ⬆ update available: v${ctx.updateNotice} — type 'update' to upgrade`, 'warn');
+    }
+  }, []);
+
   async function runCommand(name) {
     setBusy(true);
     try {
@@ -74,12 +81,17 @@ export function App({ ctx }) {
     }
   }
 
-  // scrollback (map semantic color names → theme hexes)
+  // scrollback (map semantic color names → theme hexes). Show only the most recent lines
+  // that fit, so output grows DOWNWARD toward the prompt instead of pushing it off-screen.
   const colorMap = { accent: COLORS.accent, danger: COLORS.danger, success: COLORS.success, warn: COLORS.warn };
+  const visibleLines = lines.slice(-200);
   const scroll = h(Box, { flexDirection: 'column' },
-    lines.map((l, i) => h(Text, { key: i, color: colorMap[l.color] || l.color || undefined }, l.text)));
+    visibleLines.map((l, i) => h(Text, { key: i, color: colorMap[l.color] || l.color || undefined }, l.text)));
 
+  // Layout (top → bottom): banner · output · prompt/palette. So command output appears
+  // BELOW the banner and ABOVE the prompt — never above the banner.
   return h(Box, { flexDirection: 'column', ref: frameRef },
+    h(WelcomeBox, { username: me.username, server: me.server, frameRef, onLogout: () => runCommand('logout') }),
     scroll,
     screen === 'run' && runController ? h(RunView, { controller: runController, embedded: true }) : null,
     screen === 'prompts' && prompt ? h(PromptView, { prompt, frameRef }) : null,

package/src/ui/Shell.js

@@ -6,7 +6,7 @@
 // then control returns to the prompt.
 import React, { useState } from 'react';
 import { Box, Text, useInput, useApp } from 'ink';
-import { COLORS, gradientChars } from '../theme.js';
+import { COLORS, gradientChars, logoLines } from '../theme.js';
 import { Clickable, isMouse, parseMouse } from './mouse.js';
 
 const h = React.createElement;
@@ -23,22 +23,59 @@ export const COMMANDS = [
   { name: 'login', desc: 'sign in / switch account' },
   { name: 'logout', desc: 'sign out' },
   { name: 'config', desc: 'view / change settings' },
+  { name: 'update', desc: 'update to the latest version' },
   { name: 'help', desc: 'show all commands' },
   { name: 'exit', desc: 'quit ScripterX' },
 ];
 
-function WelcomeBox({ username, server, frameRef, onLogout }) {
-  const chars = gradientChars('ScripterX');
-  return h(Box, { borderStyle: 'round', borderColor: COLORS.accent, paddingX: 2, paddingY: 0, flexDirection: 'column' },
-    h(Box, null, chars.map((c, i) => h(Text, { key: i, color: c.color, bold: true }, c.char)),
-      h(Text, { color: 'gray' }, '   Flipkart session extractor')),
-    h(Box, null,
-      h(Text, { color: 'gray' }, username ? `◉ ${username}` : '○ not signed in'),
+export function WelcomeBox({ username, server, frameRef, onLogout }) {
+  const logo = logoLines();
+  return h(Box, { borderStyle: 'round', borderColor: COLORS.accent, paddingX: 2, paddingY: 1, flexDirection: 'column' },
+    // ASCII wordmark with a top→bottom gradient
+    ...logo.map((l, i) => h(Text, { key: i, color: l.color, bold: true }, l.text)),
+    h(Text, { color: 'gray' }, '   Flipkart session extractor — runs on your residential IP'),
+    h(Box, { marginTop: 1 },
+      h(Text, { color: username ? COLORS.success : 'gray' }, username ? '  ● ' : '  ○ '),
+      h(Text, { color: 'white' }, username || 'not signed in'),
       h(Text, { color: 'gray' }, `   ·   ${server}`),
-      // clickable logout affordance when signed in
       username ? h(Clickable, { frameRef, onClick: onLogout },
         h(Text, { color: COLORS.accent }, '    [ logout ]')) : null),
-    h(Text, { color: 'gray' }, "type a command, or / to browse — press 1-9 or ↑↓+enter to pick · 'exit' to quit"),
+    h(Text, { color: 'gray' }, "  type a command, or  /  to browse all  ·  1-9 / ↑↓+enter / click to pick  ·  exit to quit"),
+  );
+}
+
+// PaletteList — ALL matching commands in a scrolling window with a scrollbar. The window
+// follows the cursor (idx); a ▐ scrollbar on the right shows position when the list
+// overflows. Each row is hover-highlight + click + number selectable.
+const PALETTE_WINDOW = 6;
+function PaletteList({ matches, idx, frameRef, onHover, onPick }) {
+  const total = matches.length;
+  const cursor = Math.min(idx, total - 1);
+  // compute the scroll window so the cursor stays visible
+  let start = 0;
+  if (total > PALETTE_WINDOW) {
+    start = Math.max(0, Math.min(cursor - Math.floor(PALETTE_WINDOW / 2), total - PALETTE_WINDOW));
+  }
+  const visible = matches.slice(start, start + PALETTE_WINDOW);
+  const thumbAt = total > PALETTE_WINDOW
+    ? Math.round((cursor / (total - 1)) * (visible.length - 1)) : -1;
+
+  return h(Box, { flexDirection: 'column', marginLeft: 2 },
+    visible.map((c, vi) => {
+      const i = start + vi;
+      const active = i === cursor;
+      const num = i < 9 ? `${i + 1}` : ' ';
+      const bar = vi === thumbAt ? '▐' : (total > PALETTE_WINDOW ? '│' : ' ');
+      const row = h(Box, null,
+        h(Text, { color: active ? COLORS.accent : 'gray' }, active ? '▸ ' : '  '),
+        h(Text, { color: active ? COLORS.accent : 'gray', dimColor: !active }, `${num} `),
+        h(Text, { color: active ? COLORS.accent : 'white', bold: active }, ('/' + c.name).padEnd(12)),
+        h(Text, { color: 'gray' }, ' ' + c.desc.padEnd(34).slice(0, 34)),
+        h(Text, { color: COLORS.accent }, ' ' + bar));
+      return h(Clickable, { key: c.name, frameRef, onHover: () => onHover(i), onClick: () => onPick(c.name) }, row);
+    }),
+    total > PALETTE_WINDOW
+      ? h(Text, { color: 'gray' }, `   ${cursor + 1}/${total} · scroll with ↑↓`) : null,
   );
 }
 
@@ -62,11 +99,10 @@ export function Shell({ username, server, onRun, busy, frameRef }) {
     // parseMouse fires the clicked row's onClick via the registry — and NEVER type them.
     if (isMouse(input)) { parseMouse(input); return; }
     if (showPalette) {
-      // Number 1-9 = pick that visible row (no command name has a digit, so safe).
+      // Number 1-9 = pick that command (no command name has a digit, so safe).
       if (/^[1-9]$/.test(input)) {
-        const shown = matches.slice(0, 8);
         const n = +input - 1;
-        if (n < shown.length) { setQuery(''); setPaletteOpen(false); setIdx(0); run(shown[n].name); }
+        if (n < matches.length) { setQuery(''); setPaletteOpen(false); setIdx(0); run(matches[n].name); }
         return;
       }
       if (key.upArrow) { setIdx((i) => (i - 1 + matches.length) % matches.length); return; }
@@ -91,24 +127,15 @@ export function Shell({ username, server, onRun, busy, frameRef }) {
     onRun(name);
   }
 
+  // NOTE: the welcome banner is rendered by App at the TOP; Shell renders only the
+  // prompt + palette so they sit BELOW the command output.
   return h(Box, { flexDirection: 'column' },
-    h(WelcomeBox, { username, server, frameRef, onLogout: () => run('logout') }),
-    h(Box, { marginTop: 1 },
+    h(Box, null,
       h(Text, { color: COLORS.accent }, '› '),
       h(Text, null, query || ''),
       busy ? h(Text, { color: 'gray' }, ' …') : h(Text, { color: COLORS.accent }, '▏')),
-    showPalette ? h(Box, { flexDirection: 'column', marginTop: 0, marginLeft: 2 },
-      matches.slice(0, 8).map((c, i) => {
-        const active = i === Math.min(idx, matches.length - 1);
-        const row = h(Box, null,
-          h(Text, { color: active ? COLORS.accent : 'gray' }, active ? '▸ ' : '  '),
-          h(Text, { color: active ? COLORS.accent : 'gray', dimColor: !active }, `${i + 1} `),
-          h(Text, { color: active ? COLORS.accent : 'white', bold: active }, ('/' + c.name).padEnd(14)),
-          h(Text, { color: 'gray' }, ' ' + c.desc));
-        // hover → highlight this row; click → select + run it
-        return h(Clickable, { key: c.name, frameRef,
-          onHover: () => setIdx(i),
-          onClick: () => { setQuery(''); setPaletteOpen(false); setIdx(0); run(c.name); } }, row);
-      })) : null,
+    showPalette ? h(PaletteList, { matches, idx, frameRef,
+      onHover: (i) => setIdx(i),
+      onPick: (name) => { setQuery(''); setPaletteOpen(false); setIdx(0); run(name); } }) : null,
   );
 }

package/src/ui/fullscreen.js

@@ -0,0 +1,48 @@
+// Fullscreen (alternate screen buffer) host for the ink App.
+//
+// WHY: rendering inline (normal terminal buffer) caused two problems —
+//   1. the whole frame redrew on every operation (the flicker / "rerun" the user saw),
+//   2. mouse coordinates drifted with scrollback, so hover/click only worked at the top.
+// The alternate screen buffer (ESC[?1049h, like vim/htop/lazygit) gives the app its own
+// stable screen with a fixed top-left origin: no scrollback interference, clean redraws,
+// and reliable click/hover mapping everywhere.
+//
+// On exit we restore the normal screen so the user's terminal history is untouched.
+import React, { useState, useEffect } from 'react';
+import { Box, useStdout } from 'ink';
+
+const h = React.createElement;
+
+// Fills the alt-screen to the full terminal size and re-measures on resize, so the
+// layout (and the bottom-anchored math) always matches the real screen.
+export function FullScreen({ children }) {
+  const { stdout } = useStdout();
+  const [size, setSize] = useState({
+    rows: (stdout && stdout.rows) || 30,
+    cols: (stdout && stdout.columns) || 100,
+  });
+  useEffect(() => {
+    if (!stdout) return undefined;
+    const onResize = () => setSize({ rows: stdout.rows, cols: stdout.columns });
+    stdout.on('resize', onResize);
+    return () => stdout.off('resize', onResize);
+  }, [stdout]);
+
+  return h(Box, { width: size.cols, height: size.rows, flexDirection: 'column' }, children);
+}
+
+// enterAltScreen / leaveAltScreen — call around render(). Returns a cleanup fn.
+export function enterAltScreen() {
+  process.stdout.write('\x1b[?1049h'); // switch to alternate buffer
+  process.stdout.write('\x1b[2J\x1b[H'); // clear + home
+  process.stdout.write('\x1b[?25l');     // hide cursor (we draw our own ▏)
+  let restored = false;
+  const restore = () => {
+    if (restored) return;
+    restored = true;
+    process.stdout.write('\x1b[?25h');   // show cursor
+    process.stdout.write('\x1b[?1049l');  // back to normal buffer (history intact)
+  };
+  process.on('exit', restore);
+  return restore;
+}

package/src/ui/mouse.js

@@ -75,10 +75,11 @@ export function Clickable({ frameRef, onClick, onHover, children }) {
     const el = ref.current, frameEl = frameRef && frameRef.current;
     if (!el || !frameEl || !frameEl.yogaNode || !el.yogaNode) return undefined;
     try {
-      const frameH = frameEl.yogaNode.getComputedHeight();
+      // Fullscreen (alt-screen): the frame is anchored to the TOP (row 1), so a row's
+      // absolute terminal Y is simply 1 + its offset within the frame. This is stable
+      // (no scrollback drift) — the whole reason we run fullscreen.
       const off = offsetWithinFrame(el, frameEl);
-      const termRows = process.stdout.rows || 40;
-      const y = termRows - (frameH - off);
+      const y = off + 1;
       if (claimed.current != null && claimed.current !== y) {
         registry.delete(claimed.current); hoverRegistry.delete(claimed.current);
       }

package/src/update.js

@@ -0,0 +1,47 @@
+// Auto-update support.
+//   • checkForUpdate() — quietly asks the npm registry for the latest version (cached 6h),
+//     returns the newer version string or null. Used to show a notice on launch.
+//   • runUpdate() — runs `npm install -g scripter-x@latest`.
+import { execFile } from 'node:child_process';
+import { promisify } from 'node:util';
+import * as config from './config.js';
+
+const execFileP = promisify(execFile);
+const PKG = 'scripter-x';
+const CHECK_INTERVAL_MS = 6 * 60 * 60 * 1000; // 6h
+
+function cmp(a, b) {
+  const pa = String(a).split('.').map(Number), pb = String(b).split('.').map(Number);
+  for (let i = 0; i < 3; i++) { if ((pa[i] || 0) > (pb[i] || 0)) return 1; if ((pa[i] || 0) < (pb[i] || 0)) return -1; }
+  return 0;
+}
+
+// Returns the latest version if newer than `current`, else null. Network/registry errors
+// are swallowed (update checks must never break the app). Throttled via config.
+export async function checkForUpdate(current) {
+  const cfg = config.load();
+  const last = cfg._lastUpdateCheck || 0;
+  const now = Date.now();
+  // (Date.now is fine here — this is a real CLI, not the constrained workflow sandbox.)
+  if (now - last < CHECK_INTERVAL_MS && cfg._latestVersion) {
+    return cmp(cfg._latestVersion, current) > 0 ? cfg._latestVersion : null;
+  }
+  try {
+    const { stdout } = await execFileP('npm', ['view', PKG, 'version'], { timeout: 5000 });
+    const latest = stdout.trim();
+    config.setMany({ _lastUpdateCheck: now, _latestVersion: latest });
+    return cmp(latest, current) > 0 ? latest : null;
+  } catch {
+    return null;
+  }
+}
+
+// Run the global update. Returns { ok, output }.
+export async function runUpdate() {
+  try {
+    const { stdout, stderr } = await execFileP('npm', ['install', '-g', `${PKG}@latest`], { timeout: 120000 });
+    return { ok: true, output: (stdout + stderr).trim() };
+  } catch (e) {
+    return { ok: false, output: e.message };
+  }
+}