jestronaut 0.1.0 → 0.2.0

package/README.md

@@ -6,6 +6,17 @@ An interactive terminal dashboard for Jest — navigate live test results, suite
 ![Jest](https://img.shields.io/badge/jest-%3E%3D27-orange)
 ![Node](https://img.shields.io/badge/node-%3E%3D16-green)
 
+## Screenshots
+
+### Main Dashboard
+![Main Dashboard](assets/dashboard.png)
+
+### Suite Detail
+![Suite Detail](assets/suite-detail.png)
+
+### Failure Detail
+![Failure Detail](assets/failure-detail.png)
+
 ## Features
 
 - Live dashboard updates as tests run

package/bin/jestronaut.js

@@ -14,6 +14,17 @@ const SUPPRESS = [
   'Jest did not exit',
   'detectOpenHandles',
   'asynchronous operations',
+  'Watch Usage',
+  'Press `',
+  'Press a',
+  'Press f',
+  'Press p',
+  'Press t',
+  'Press q',
+  'Press Enter',
+  'No tests found',
+  'ran all test suites',
+  'Ran all test suites',
 ];
 
 function shouldSuppress(chunk) {
@@ -36,6 +47,43 @@ process.stderr.write = (chunk, enc, cb) => {
 // Clear terminal before handing off to Jest
 realStdout('\x1b[2J\x1b[H');
 
+// Block Jest's watch mode from stealing raw TTY control from blessed.
+// Blessed will call setRawMode itself when the screen is created in the reporter.
+// We block ALL subsequent calls after that so Jest can't interfere.
+const realSetRawMode = process.stdin.setRawMode && process.stdin.setRawMode.bind(process.stdin);
+if (realSetRawMode) {
+  let rawModeSet = false;
+  process.stdin.setRawMode = (val) => {
+    if (!rawModeSet && val) {
+      rawModeSet = true;
+      return realSetRawMode(val);
+    }
+    if (!val) {
+      // allow turning off (e.g. on exit)
+      rawModeSet = false;
+      return realSetRawMode(val);
+    }
+    return process.stdin;
+  };
+}
+
+// Intercept stdin data events: when TUI is active, only dispatch to blessed's
+// listeners — skip Jest's watch mode listener so it doesn't trigger a re-run.
+const realEmit = process.stdin.emit.bind(process.stdin);
+process.stdin.emit = (event, ...args) => {
+  if (event === 'data' && global.__jestronaut_block_jest_input__ && global.__jestronaut_blessed_listeners__) {
+    // Call only blessed's listeners, skip Jest's
+    global.__jestronaut_blessed_listeners__.forEach(l => l(...args));
+    return true;
+  }
+  return realEmit(event, ...args);
+};
+
+// Global contract for watch mode:
+//   __jestronaut_ui__            — { screen, widgets, startTicker, state } created once, reused across re-runs
+//   __jestronaut_blessed_listeners__ — Set of stdin 'data' listeners registered by blessed (set in reporter constructor)
+//   __jestronaut_block_jest_input__  — boolean; true when TUI should handle all input exclusively (set in renderAll)
+
 // Forward all CLI args so flags like --testPathPattern, --watch etc. still work
 const { run } = require('jest');
 run();

package/lib/reporter.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const { createState } = require('./state');
+const { createState, resetState } = require('./state');
 const { createScreen } = require('./ui/screen');
 const { updateHeader } = require('./ui/panels/header');
 const { updateStats } = require('./ui/panels/stats');
@@ -10,18 +10,41 @@ const { updateFooter } = require('./ui/panels/footer');
 class DashboardReporter {
   constructor(globalConfig) {
     this._globalConfig = globalConfig;
-    this._state = createState();
-    const { screen, widgets, renderAll, refreshOpenSuiteDetail } = createScreen(this._state);
+    const watchMode = globalConfig.watch || globalConfig.watchAll || false;
+    // On watch re-runs, reuse the shared state that key handlers reference
+    if (global.__jestronaut_ui__) {
+      this._state = global.__jestronaut_ui__.state;
+      this._state.watchMode = watchMode;
+      this._state.watchWaiting = watchMode;
+    } else {
+      this._state = createState();
+      this._state.watchMode = watchMode;
+      this._state.watchWaiting = watchMode;
+    }
+    const beforeScreen = new Set(process.stdin.listeners('data'));
+    const { screen, widgets, renderAll, refreshOpenSuiteDetail, startTicker } = createScreen(this._state);
+    // Only set blessed listeners once — on first construction when blessed registers them
+    if (!global.__jestronaut_blessed_listeners__) {
+      global.__jestronaut_blessed_listeners__ = new Set(
+        process.stdin.listeners('data').filter(l => !beforeScreen.has(l))
+      );
+    }
     this._screen = screen;
     this._widgets = widgets;
     this._renderAll = renderAll;
     this._refreshOpenSuiteDetail = refreshOpenSuiteDetail;
+    this._startTicker = startTicker;
   }
 
   onRunStart(results) {
     const s = this._state;
+    resetState(s);
+    s.watchWaiting = false;
+    this._widgets.suiteDetail.hide();
+    this._widgets.testDetail.hide();
+    this._startTicker();
     s.stats.suites = results.numTotalTestSuites;
-    s.stats.expectedTotal = results.numTotalTests || 0;
+    s.stats.expectedTotal = 0;
     s.stats.startTime = Date.now();
     this._renderAll();
   }
@@ -122,7 +145,8 @@ class DashboardReporter {
       `{center}{bold} ${ok ? 'ALL TESTS PASSED' : 'SOME TESTS FAILED'} — ${elapsed}s {/bold}{/center}`
     );
 
-    s.stats.expectedTotal = s.stats.total;
+    s.stats.endTime = Date.now();
+    if (s.watchMode) s.watchWaiting = true;
     updateStats(this._widgets.stats, s.stats);
     updateProgress(this._widgets.progress, s.stats, this._screen.width);
     updateFooter(this._widgets.footer, s);

package/lib/state.js

@@ -15,6 +15,7 @@ function createState() {
       suites: 0,
       suitesCompleted: 0,
       startTime: Date.now(),
+      endTime: null,
     },
 
     // suite data keyed by file path
@@ -45,7 +46,36 @@ function createState() {
 
     // animation
     spinFrame: 0,
+
+    // watch mode
+    watchMode: false,
+    watchWaiting: false,
+  };
+}
+
+function resetState(state) {
+  state.stats = {
+    passed: 0, failed: 0, skipped: 0,
+    total: 0, expectedTotal: 0,
+    suites: 0, suitesCompleted: 0,
+    startTime: Date.now(),
+    endTime: null,
   };
+  state.suites = {};
+  state.suiteOrder = [];
+  state.resultLines = [];
+  state.resultMeta = [];
+  state.failures = [];
+  state.resultCursor = -1;
+  state.suiteCursor = 0;
+  state.suiteDetailOpen = false;
+  state.suiteDetailPath = null;
+  state.suiteDetailLines = [];
+  state.suiteDetailMeta = [];
+  state.suiteDetailCursor = 0;
+  state.testDetailOpen = false;
+  state.spinFrame = 0;
+  // watchMode and watchWaiting are intentionally preserved across resets
 }
 
-module.exports = { createState };
+module.exports = { createState, resetState };

package/lib/ui/keys.js

@@ -119,6 +119,7 @@ function _openSuiteDetail(widgets, state, path) {
   widgets.suiteDetail.setLabel(result.label);
   widgets.suiteDetail.style.border.fg = result.hasFailed ? 'red' : 'green';
   widgets.suiteDetail.show();
+  widgets.suiteDetail.setFront();
   suiteDetailOverlay.refreshSuiteDetail(widgets.suiteDetail, state);
 }
 

package/lib/ui/overlays/suiteDetail.js

@@ -12,7 +12,7 @@ function createSuiteDetail(screen) {
     scrollbar: { ch: '|', style: { fg: 'magenta' } },
     style: {
       border: { fg: 'magenta' }, label: { fg: 'magenta', bold: true },
-      bg: '#08080a', item: { fg: 'white' },
+      bg: '#08080a', item: { fg: 'white', bg: '#08080a' },
     },
     padding: { left: 2, right: 2, top: 1, bottom: 1 },
     hidden: true,

package/lib/ui/overlays/testDetail.js

@@ -80,6 +80,7 @@ function openTestDetail(widget, failure, stats) {
   widget.setContent(lines.join('\n'));
   widget.scrollTo(0);
   widget.show();
+  widget.setFront();
 }
 
 module.exports = { createTestDetail, openTestDetail };

package/lib/ui/panels/footer.js

@@ -14,7 +14,8 @@ function createFooter(screen) {
 }
 
 function updateFooter(widget, state) {
-  const elapsed = ((Date.now() - state.stats.startTime) / 1000).toFixed(1);
+  const endTime = state.stats.endTime || Date.now();
+  const elapsed = ((endTime - state.stats.startTime) / 1000).toFixed(1);
   const suiteStr = `${state.stats.suitesCompleted}/${state.stats.suites} suites`;
   const spin = SPINNER[state.spinFrame];
   const running = Object.values(state.suites).filter(s => !s.done).length;
@@ -33,6 +34,9 @@ function _getHint(state) {
   if (state.suiteDetailOpen) {
     return '{cyan-fg}[j/k]{/cyan-fg} navigate failed tests  |  {cyan-fg}[Enter]{/cyan-fg} open failure  |  {cyan-fg}[Esc]{/cyan-fg} back';
   }
+  if (state.watchWaiting) {
+    return '{yellow-fg}[a]{/yellow-fg} run all tests';
+  }
   if (state.focus === 'results') {
     return '{cyan-fg}[Tab]{/cyan-fg} switch panel  |  {cyan-fg}[Enter]{/cyan-fg} open failure';
   }

package/lib/ui/panels/header.js

@@ -4,7 +4,7 @@ const blessed = require('blessed');
 
 function createHeader(screen) {
   const widget = blessed.box({
-    top: 0, left: 0, width: '100%', height: 3,
+    top: 0, left: 0, width: '100%', height: 2,
     content: '{center}{bold} JEST TEST DASHBOARD {/bold}{/center}',
     tags: true,
     style: { fg: 'white', bg: 'blue', bold: true },

package/lib/ui/panels/progress.js

@@ -4,7 +4,7 @@ const blessed = require('blessed');
 
 function createProgress(screen) {
   const widget = blessed.box({
-    top: 5, left: 0, width: '100%', height: 2,
+    top: 4, left: 0, width: '100%', height: 2,
     tags: true,
     style: { fg: 'white', bg: '#111133' },
   });
@@ -13,9 +13,8 @@ function createProgress(screen) {
 }
 
 function updateProgress(widget, stats, screenWidth) {
-  const done = stats.passed + stats.failed + stats.skipped;
-  const total = stats.expectedTotal || done || 1;
-  const pct = Math.min(100, Math.round((done / total) * 100));
+  const suiteTotal = stats.suites || 1;
+  const pct = Math.min(100, Math.round((stats.suitesCompleted / suiteTotal) * 100));
   const bar = _buildBar(pct, screenWidth, stats.failed > 0);
   widget.setContent(` Progress: ${bar} ${pct}%`);
 }

package/lib/ui/panels/results.js

@@ -4,7 +4,7 @@ const blessed = require('blessed');
 
 function createResults(screen) {
   const widget = blessed.list({
-    top: 7, left: 0, width: '65%', bottom: 3,
+    top: 6, left: 0, width: '65%', bottom: 3,
     label: ' Test Results ',
     border: { type: 'line' },
     tags: true, scrollable: true, alwaysScroll: true,
@@ -12,7 +12,8 @@ function createResults(screen) {
     scrollbar: { ch: '|', style: { fg: 'cyan' } },
     style: {
       border: { fg: 'cyan' }, label: { fg: 'cyan', bold: true },
-      bg: '#0a0a1a', item: { fg: 'white' },
+      bg: '#0a0a1a', item: { fg: 'white', bg: '#0a0a1a' },
+      selected: { bg: '#1a1a4a', bold: true },
     },
     padding: { left: 1, right: 1 },
   });
@@ -21,15 +22,14 @@ function createResults(screen) {
 }
 
 function refreshResults(widget, state) {
-  const items = state.resultLines.map((line, i) => {
-    if (state.focus === 'results' && i === state.resultCursor) {
-      return `{#1a1a4a-bg}${line}{/#1a1a4a-bg}`;
-    }
-    return line;
-  });
-  widget.setItems(items);
-  if (state.focus === 'results' && state.resultCursor >= 0) {
+  const overlayOpen = state.suiteDetailOpen || state.testDetailOpen;
+  const active = !overlayOpen && state.focus === 'results' && state.resultCursor >= 0;
+  widget.setItems(state.resultLines);
+  if (active) {
+    widget.select(state.resultCursor);
     widget.scrollTo(state.resultCursor);
+  } else {
+    widget.select(-1);
   }
 }
 

package/lib/ui/panels/stats.js

@@ -4,7 +4,7 @@ const blessed = require('blessed');
 
 function createStats(screen) {
   const widget = blessed.box({
-    top: 3, left: 0, width: '100%', height: 2,
+    top: 2, left: 0, width: '100%', height: 2,
     tags: true,
     style: { fg: 'white', bg: '#111133' },
   });

package/lib/ui/panels/suites.js

@@ -5,7 +5,7 @@ const { SPINNER } = require('../../constants');
 
 function createSuites(screen) {
   const widget = blessed.list({
-    top: 7, right: 0, width: '35%', bottom: 3,
+    top: 6, right: 0, width: '35%', bottom: 3,
     label: ' Suites ',
     border: { type: 'line' },
     tags: true, scrollable: true, alwaysScroll: true,
@@ -13,7 +13,8 @@ function createSuites(screen) {
     scrollbar: { ch: '|', style: { fg: 'magenta' } },
     style: {
       border: { fg: 'magenta' }, label: { fg: 'magenta', bold: true },
-      bg: '#0a0a1a', item: { fg: 'white' },
+      bg: '#0a0a1a', item: { fg: 'white', bg: '#0a0a1a' },
+      selected: { bg: '#1a0a3a', bold: true },
     },
     padding: { left: 1, right: 1 },
   });
@@ -41,17 +42,19 @@ function updateSuites(widget, state) {
       ? '\n' + [...s.running].map(t => `  {cyan-fg}> ${t}{/cyan-fg}`).join('\n')
       : '';
 
-    const isCursor = state.focus === 'suites' && i === state.suiteCursor;
-    const bg = isCursor ? '{#1a0a3a-bg}' : '';
-    const bgEnd = isCursor ? '{/#1a0a3a-bg}' : '';
+    const isCursor = state.focus === 'suites' && !state.suiteDetailOpen && !state.testDetailOpen && i === state.suiteCursor;
     const hint = isCursor ? ' {cyan-fg}[Enter]{/cyan-fg}' : '';
 
-    return `${bg}${icon} {white-fg}${name}{/white-fg}${detail}${hint}${bgEnd}${runningLines}`;
+    return `${icon} {white-fg}${name}{/white-fg}${detail}${hint}${runningLines}`;
   });
 
   widget.setItems(items.length ? items : ['{grey-fg}waiting...{/grey-fg}']);
-  if (state.focus === 'suites' && state.suiteCursor >= 0) {
+  const active = state.focus === 'suites' && !state.suiteDetailOpen && !state.testDetailOpen;
+  if (active && state.suiteCursor >= 0) {
+    widget.select(state.suiteCursor);
     widget.scrollTo(state.suiteCursor);
+  } else {
+    widget.select(-1);
   }
 }
 

package/lib/ui/screen.js

@@ -13,6 +13,19 @@ const { createTestDetail } = require('./overlays/testDetail');
 const { bindKeys, refreshOpenSuiteDetail } = require('./keys');
 
 function createScreen(state) {
+  // Reuse screen and widgets across watch re-runs — Jest re-instantiates the
+  // reporter on every run, but we must not create a second blessed screen.
+  if (global.__jestronaut_ui__) {
+    const { screen, widgets, startTicker, state: sharedState } = global.__jestronaut_ui__;
+    screen.realloc();
+    return {
+      screen, widgets,
+      renderAll: () => renderAll(screen, widgets, sharedState),
+      refreshOpenSuiteDetail: () => refreshOpenSuiteDetail(widgets, sharedState),
+      startTicker,
+    };
+  }
+
   const screen = blessed.screen({
     smartCSR: true,
     title: 'Jest Dashboard',
@@ -43,20 +56,33 @@ function createScreen(state) {
 
   bindKeys(screen, widgets, state, render);
 
-  // animation ticker
-  state._ticker = setInterval(() => {
-    state.spinFrame = (state.spinFrame + 1) % SPINNER.length;
-    updateSuites(widgets.suites, state);
-    updateFooter(widgets.footer, state);
-    screen.render();
-  }, 120);
+  function startTicker() {
+    if (state._ticker) clearInterval(state._ticker);
+    state._ticker = setInterval(() => {
+      state.spinFrame = (state.spinFrame + 1) % SPINNER.length;
+      updateSuites(widgets.suites, state);
+      updateFooter(widgets.footer, state);
+      screen.render();
+    }, 120);
+  }
+
+  global.__jestronaut_ui__ = { screen, widgets, startTicker, state };
 
+  startTicker();
   renderAll(screen, widgets, state);
 
-  return { screen, widgets, renderAll: () => renderAll(screen, widgets, state), refreshOpenSuiteDetail: () => refreshOpenSuiteDetail(widgets, state) };
+  return { screen, widgets, renderAll: () => renderAll(screen, widgets, state), refreshOpenSuiteDetail: () => refreshOpenSuiteDetail(widgets, state), startTicker };
 }
 
 function renderAll(screen, widgets, state) {
+  // Only pass keypresses to Jest's watch mode when truly idle:
+  // watch waiting, no overlays, and no results to navigate
+  global.__jestronaut_block_jest_input__ = !(
+    state.watchWaiting &&
+    !state.suiteDetailOpen &&
+    !state.testDetailOpen &&
+    state.resultLines.length === 0
+  );
   updateStats(widgets.stats, state.stats);
   updateProgress(widgets.progress, state.stats, screen.width);
   updateSuites(widgets.suites, state);

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "jestronaut",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "An interactive terminal dashboard UI for Jest — navigate live test results, suites, and failure details without leaving your terminal",
   "main": "index.js",
   "bin": {
-    "jestronaut": "bin/jestronaut.js"
+    "jestronaut": "./bin/jestronaut.js"
   },
   "keywords": [
     "jest",
@@ -24,5 +24,14 @@
   },
   "peerDependencies": {
     "jest": ">=27"
+  },
+  "author": "Deep Nandi",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/realdeepnandi/jestronaut.git"
+  },
+  "homepage": "https://github.com/realdeepnandi/jestronaut#readme",
+  "bugs": {
+    "url": "https://github.com/realdeepnandi/jestronaut/issues"
   }
 }