jestronaut 0.2.0 → 0.3.16

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Deep Nandi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -2,15 +2,19 @@
 
 An interactive terminal dashboard for Jest — navigate live test results, suites, and failure stack traces without leaving your terminal.
 
+[![npm](https://img.shields.io/npm/v/jestronaut)](https://www.npmjs.com/package/jestronaut)
 ![License](https://img.shields.io/badge/license-MIT-blue)
 ![Jest](https://img.shields.io/badge/jest-%3E%3D27-orange)
-![Node](https://img.shields.io/badge/node-%3E%3D16-green)
+![Node](https://img.shields.io/badge/node-%3E%3D18-green)
 
 ## Screenshots
 
 ### Main Dashboard
 ![Main Dashboard](assets/dashboard.png)
 
+### Watch Mode
+![Watch Mode](assets/watch-mode.png)
+
 ### Suite Detail
 ![Suite Detail](assets/suite-detail.png)
 
@@ -104,7 +108,7 @@ npm test
 
 ## Requirements
 
-- Node >= 16
+- Node >= 18
 - Jest >= 27
 
 ## License

package/bin/jestronaut.js

@@ -1,5 +1,4 @@
 #!/usr/bin/env node
-'use strict';
 
 // Intercept stdout/stderr before Jest loads anything so its early
 // output ("Determining test suites...") doesn't bleed into the TUI.
@@ -47,43 +46,38 @@ 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.
+// Block Jest's watch mode from turning off raw mode while the TUI is active.
+// ink manages raw mode itself — we only prevent Jest from disabling it mid-run.
 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);
+    // Allow enabling raw mode always (ink may call this multiple times).
+    // Block disabling raw mode when the TUI is holding input focus.
+    if (!val && global.__jestronaut_block_jest_input__) {
+      return process.stdin;
     }
-    if (!val) {
-      // allow turning off (e.g. on exit)
-      rawModeSet = false;
-      return realSetRawMode(val);
-    }
-    return process.stdin;
+    return realSetRawMode(val);
   };
 }
 
-// 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.
+// Gate Jest's stdin keypresses using EventEmitter.prototype.emit patch.
+// This is more reliable than patching stdin.on because Node's stream internals
+// may bypass a patched .on() after setEncoding() is called.
 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.__jestronaut_emit__ = realEmit;
+
+const _origEmit = process.stdin.emit;
+process.stdin.emit = function(event, ...args) {
+  if (event === 'data' && global.__jestronaut_block_jest_input__) return true;
+  return _origEmit.apply(this, [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)
+//   __jestronaut_ui__                    — { store, unmount } created once, reused across re-runs
+//   __jestronaut_block_jest_input__      — boolean; true when TUI holds input focus
+//   __jestronaut_jest_keypress__         — Jest's raw onKeypress listener (unwrapped)
+//   __jestronaut_emit__                  — original process.stdin.emit before any patching
 
 // Forward all CLI args so flags like --testPathPattern, --watch etc. still work
-const { run } = require('jest');
+const { run } = await import('jest');
 run();

package/index.js

@@ -1,3 +1 @@
-'use strict';
-
-module.exports = require('./lib/reporter');
+export { default } from './lib/reporter.js';

package/lib/constants.js

@@ -1,5 +1 @@
-'use strict';
-
-const SPINNER = ['|', '/', '-', '\\'];
-
-module.exports = { SPINNER };
+export const SPINNER = ['|', '/', '-', '\\'];

package/lib/reporter.js

@@ -1,52 +1,24 @@
-'use strict';
+import { createApp } from './ui/app.js';
+import { buildSuiteDetailItems } from './ui/components/SuiteDetailOverlay.js';
 
-const { createState, resetState } = require('./state');
-const { createScreen } = require('./ui/screen');
-const { updateHeader } = require('./ui/panels/header');
-const { updateStats } = require('./ui/panels/stats');
-const { updateProgress } = require('./ui/panels/progress');
-const { updateFooter } = require('./ui/panels/footer');
-
-class DashboardReporter {
+export default class DashboardReporter {
   constructor(globalConfig) {
     this._globalConfig = globalConfig;
     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;
+    const ui = createApp();
+    this._store = ui.store;
+    this._state = ui.store.state;
+    this._state.watchMode = watchMode;
+    this._state.watchWaiting = watchMode;
   }
 
   onRunStart(results) {
+    this._store.reset();
     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 = 0;
     s.stats.startTime = Date.now();
-    this._renderAll();
+    this._store.notify();
   }
 
   onTestFileStart(test) {
@@ -56,12 +28,17 @@ class DashboardReporter {
       running: new Set(), tests: [],
     };
     this._state.suiteOrder.push(test.path);
-    this._renderAll();
+    // Keep suite count in sync in case onRunStart received 0 (Jest discovers tests lazily)
+    if (this._state.suiteOrder.length > this._state.stats.suites) {
+      this._state.stats.suites = this._state.suiteOrder.length;
+    }
+    this._store.notify();
   }
 
   onTestCaseStart(test, info) {
     const suite = this._state.suites[test.path];
     if (suite && info) suite.running.add(info.fullName || info.title);
+    this._store.notify();
   }
 
   onTestCaseResult(test, r) {
@@ -73,52 +50,29 @@ class DashboardReporter {
 
     s.stats.total++;
     if (suite.running) suite.running.delete(r.fullName || r.title);
-
-    suite.tests.push({
-      title: r.title,
-      status: r.status,
-      duration: r.duration,
-      messages: r.failureMessages || [],
-    });
-
-    let icon, textColor;
+    suite.tests.push({ title: r.title, status: r.status, duration: r.duration, messages: r.failureMessages || [] });
 
     if (r.status === 'passed') {
       s.stats.passed++;
       suite.passed++;
-      icon = '{green-fg}PASS{/green-fg}';
-      textColor = 'white-fg';
       s.resultMeta.push({ status: 'passed', failureIndex: -1 });
+      s.resultItems.push({ icon: 'PASS', iconColor: 'green', ancestor: r.ancestorTitles.join(' > '), title: r.title, titleColor: 'white', duration: r.duration ?? null, isFailed: false });
     } else if (r.status === 'failed') {
       s.stats.failed++;
       suite.failed++;
-      icon = '{red-fg}FAIL{/red-fg}';
-      textColor = 'red-fg';
       const failureIndex = s.failures.length;
-      s.failures.push({
-        title: r.title,
-        suiteName: r.ancestorTitles.join(' > '),
-        messages: r.failureMessages || [],
-        duration: r.duration,
-      });
+      s.failures.push({ title: r.title, suiteName: r.ancestorTitles.join(' > '), messages: r.failureMessages || [], duration: r.duration });
       s.resultMeta.push({ status: 'failed', failureIndex });
+      s.resultItems.push({ icon: 'FAIL', iconColor: 'red', ancestor: r.ancestorTitles.join(' > '), title: r.title, titleColor: 'red', duration: r.duration ?? null, isFailed: true });
     } else {
       s.stats.skipped++;
-      icon = '{yellow-fg}SKIP{/yellow-fg}';
-      textColor = 'yellow-fg';
       s.resultMeta.push({ status: r.status, failureIndex: -1 });
+      s.resultItems.push({ icon: 'SKIP', iconColor: 'yellow', ancestor: r.ancestorTitles.join(' > '), title: r.title, titleColor: 'yellow', duration: r.duration ?? null, isFailed: false });
     }
 
     s.suites[test.path] = suite;
-
-    const ms = r.duration != null ? ` {grey-fg}(${r.duration}ms){/grey-fg}` : '';
-    const ancestor = r.ancestorTitles.join(' > ');
-    const prefix = ancestor ? `{grey-fg}${ancestor} >{/grey-fg} ` : '';
-    const hint = r.status === 'failed' ? ' {cyan-fg}[Enter]{/cyan-fg}' : '';
-    s.resultLines.push(`[${icon}] ${prefix}{${textColor}}${r.title}{/${textColor}}${ms}${hint}`);
-
     this._refreshOpenSuiteDetail();
-    this._renderAll();
+    this._store.notify();
   }
 
   onTestFileResult(test) {
@@ -130,28 +84,23 @@ class DashboardReporter {
       this._state.stats.suitesCompleted++;
     }
     this._refreshOpenSuiteDetail();
-    this._renderAll();
+    this._store.notify();
   }
 
   onRunComplete(_, results) {
     const s = this._state;
-    if (s._ticker) { clearInterval(s._ticker); s._ticker = null; }
-
-    const elapsed = ((Date.now() - s.stats.startTime) / 1000).toFixed(2);
-    const ok = results.numFailedTests === 0;
-
-    updateHeader(this._widgets.header, ok);
-    this._widgets.header.setContent(
-      `{center}{bold} ${ok ? 'ALL TESTS PASSED' : 'SOME TESTS FAILED'} — ${elapsed}s {/bold}{/center}`
-    );
-
+    s.runComplete = true;
+    s.runOk = results.numFailedTests === 0;
+    s.runElapsed = ((Date.now() - s.stats.startTime) / 1000).toFixed(2);
     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);
-    this._renderAll();
+    this._store.notify();
   }
-}
 
-module.exports = DashboardReporter;
+  _refreshOpenSuiteDetail() {
+    const s = this._state;
+    if (!s.suiteDetailOpen || !s.suiteDetailPath) return;
+    const result = buildSuiteDetailItems(s.suites[s.suiteDetailPath], s.suiteDetailPath);
+    s.suiteDetailItems = result.items;
+  }
+}

package/lib/state.js

@@ -1,81 +1,64 @@
-'use strict';
-
-// Central mutable state shared across all UI modules.
-// All modules receive a reference to this object and read/write it directly.
-
-function createState() {
+export function createState() {
   return {
-    // run-level stats
     stats: {
       passed: 0,
       failed: 0,
       skipped: 0,
       total: 0,
-      expectedTotal: 0,
       suites: 0,
       suitesCompleted: 0,
       startTime: Date.now(),
       endTime: null,
     },
-
-    // suite data keyed by file path
     suites: {},
     suiteOrder: [],
-
-    // flat list of all test results for the results panel
-    resultLines: [],  // display strings
-    resultMeta: [],   // { status, failureIndex }
-
-    // all failure objects for detail view
-    failures: [],     // { title, suiteName, messages, duration }
-
-    // panel focus
-    focus: 'results', // 'results' | 'suites'
+    resultItems: [],  // [{ icon, iconColor, ancestor, title, titleColor, duration, isFailed }]
+    resultMeta: [],   // [{ status, failureIndex }]
+    failures: [],     // [{ title, suiteName, messages, duration }]
+    focus: 'results',
     resultCursor: -1,
     suiteCursor: 0,
-
-    // suite detail overlay
     suiteDetailOpen: false,
     suiteDetailPath: null,
-    suiteDetailLines: [],
-    suiteDetailMeta: [],
+    suiteDetailItems: [],  // [{ type, text, color, failureObj }]
     suiteDetailCursor: 0,
-
-    // test detail overlay
     testDetailOpen: false,
-
-    // animation
+    testDetailFailure: null,
+    testDetailScrollOffset: 0,
+    runComplete: false,
+    runOk: false,
+    runElapsed: null,
     spinFrame: 0,
-
-    // watch mode
     watchMode: false,
     watchWaiting: false,
   };
 }
 
-function resetState(state) {
+export function resetState(state) {
   state.stats = {
     passed: 0, failed: 0, skipped: 0,
-    total: 0, expectedTotal: 0,
+    total: 0,
     suites: 0, suitesCompleted: 0,
     startTime: Date.now(),
     endTime: null,
   };
   state.suites = {};
   state.suiteOrder = [];
-  state.resultLines = [];
+  state.resultItems = [];
   state.resultMeta = [];
   state.failures = [];
   state.resultCursor = -1;
   state.suiteCursor = 0;
   state.suiteDetailOpen = false;
   state.suiteDetailPath = null;
-  state.suiteDetailLines = [];
-  state.suiteDetailMeta = [];
+  state.suiteDetailItems = [];
   state.suiteDetailCursor = 0;
   state.testDetailOpen = false;
+  state.testDetailFailure = null;
+  state.testDetailScrollOffset = 0;
+  state.runComplete = false;
+  state.runOk = false;
+  state.runElapsed = null;
   state.spinFrame = 0;
-  // watchMode and watchWaiting are intentionally preserved across resets
+  // watchMode and watchWaiting preserved across resets
 }
-
-module.exports = { createState, resetState };

package/lib/ui/app.js

@@ -0,0 +1,20 @@
+import { render } from 'ink';
+import React from 'react';
+import { JestronautStore } from './store.js';
+import { Dashboard } from './components/Dashboard.js';
+
+export function createApp() {
+  if (global.__jestronaut_ui__) {
+    return global.__jestronaut_ui__;
+  }
+
+  const store = new JestronautStore();
+  const { unmount } = render(
+    React.createElement(Dashboard, { store }),
+    { exitOnCtrlC: false }
+  );
+
+  const ui = { store, unmount };
+  global.__jestronaut_ui__ = ui;
+  return ui;
+}

package/lib/ui/components/Dashboard.js

@@ -0,0 +1,179 @@
+import React, { useState, useEffect, useReducer } from 'react';
+import { Box, useInput, useApp, useStdout } from 'ink';
+import { SPINNER } from '../../constants.js';
+import { Header } from './Header.js';
+import { Stats } from './Stats.js';
+import { Progress } from './Progress.js';
+import { ResultsList } from './ResultsList.js';
+import { SuitesList } from './SuitesList.js';
+import { Footer } from './Footer.js';
+import { SuiteDetailOverlay, buildSuiteDetailItems, moveCursor as moveSuiteDetailCursor } from './SuiteDetailOverlay.js';
+import { TestDetailOverlay, buildLines as buildTestDetailLines } from './TestDetailOverlay.js';
+
+const FIXED_ROWS = 2 + 2 + 2 + 3; // header + stats + progress + footer
+
+export function Dashboard({ store }) {
+  const { exit } = useApp();
+  const { stdout } = useStdout();
+  const [dims, setDims] = useState({ columns: stdout.columns || 80, rows: stdout.rows || 24 });
+  const [, forceUpdate] = useReducer(x => x + 1, 0);
+
+  useEffect(() => {
+    const onResize = () => setDims({ columns: stdout.columns || 80, rows: stdout.rows || 24 });
+    stdout.on('resize', onResize);
+    return () => stdout.off('resize', onResize);
+  }, [stdout]);
+
+  const { columns, rows } = dims;
+
+  useEffect(() => {
+    store.on('update', forceUpdate);
+    return () => store.off('update', forceUpdate);
+  }, [store]);
+
+  useEffect(() => {
+    global.__jestronaut_block_jest_input__ = true;
+    return () => { global.__jestronaut_block_jest_input__ = false; };
+  }, []);
+
+  useEffect(() => {
+    const id = setInterval(() => {
+      if (store.state.runComplete && !store.state.watchWaiting) return;
+      store.state.spinFrame = (store.state.spinFrame + 1) % SPINNER.length;
+      store.notify();
+    }, 120);
+    return () => clearInterval(id);
+  }, [store]);
+
+  const state = store.state;
+
+  useInput((input, key) => {
+    const s = store.state;
+
+    if (input === 'q' || (key.ctrl && input === 'c')) {
+      exit();
+      process.exit(0);
+    }
+
+    if (input === 'a' && s.watchWaiting) {
+      // Briefly unblock, forward 'a' to Jest's watch listener, then re-block
+      global.__jestronaut_block_jest_input__ = false;
+      if (global.__jestronaut_emit__) global.__jestronaut_emit__('data', 'a');
+      global.__jestronaut_block_jest_input__ = true;
+      return;
+    }
+
+    if (key.tab && !s.suiteDetailOpen && !s.testDetailOpen) {
+      s.focus = s.focus === 'results' ? 'suites' : 'results';
+      store.notify();
+      return;
+    }
+
+    if (key.upArrow || input === 'k') {
+      if (s.testDetailOpen) {
+        s.testDetailScrollOffset = Math.max(0, (s.testDetailScrollOffset || 0) - 1);
+      } else if (s.suiteDetailOpen) {
+        moveSuiteDetailCursor(s, -1);
+      } else if (s.focus === 'results') {
+        if (!s.resultItems.length) return;
+        s.resultCursor = s.resultCursor <= 0 ? s.resultItems.length - 1 : s.resultCursor - 1;
+      } else {
+        if (!s.suiteOrder.length) return;
+        s.suiteCursor = s.suiteCursor <= 0 ? s.suiteOrder.length - 1 : s.suiteCursor - 1;
+      }
+      store.notify();
+      return;
+    }
+
+    if (key.downArrow || input === 'j') {
+      if (s.testDetailOpen) {
+        const totalLines = s.testDetailFailure ? buildTestDetailLines(s.testDetailFailure, s.stats).length : 0;
+        const innerHeight = Math.max(1, rows - 2);
+        const maxOffset = Math.max(0, totalLines - innerHeight);
+        s.testDetailScrollOffset = Math.min(maxOffset, (s.testDetailScrollOffset || 0) + 1);
+      } else if (s.suiteDetailOpen) {
+        moveSuiteDetailCursor(s, 1);
+      } else if (s.focus === 'results') {
+        if (!s.resultItems.length) return;
+        s.resultCursor = s.resultCursor >= s.resultItems.length - 1 ? 0 : s.resultCursor + 1;
+      } else {
+        if (!s.suiteOrder.length) return;
+        s.suiteCursor = s.suiteCursor >= s.suiteOrder.length - 1 ? 0 : s.suiteCursor + 1;
+      }
+      store.notify();
+      return;
+    }
+
+    if (key.return) {
+      if (s.testDetailOpen) return;
+      if (s.suiteDetailOpen) {
+        const item = s.suiteDetailItems[s.suiteDetailCursor];
+        if (item && item.type === 'test' && item.failureObj) {
+          s.testDetailOpen = true;
+          s.testDetailFailure = item.failureObj;
+          s.testDetailScrollOffset = 0;
+          store.notify();
+        }
+        return;
+      }
+      if (s.focus === 'results') {
+        if (s.resultCursor < 0 || s.resultCursor >= s.resultMeta.length) return;
+        const meta = s.resultMeta[s.resultCursor];
+        if (meta.status !== 'failed') return;
+        s.testDetailOpen = true;
+        s.testDetailFailure = s.failures[meta.failureIndex];
+        s.testDetailScrollOffset = 0;
+      } else {
+        if (!s.suiteOrder.length) return;
+        const path = s.suiteOrder[s.suiteCursor];
+        if (!path) return;
+        const result = buildSuiteDetailItems(s.suites[path], path);
+        s.suiteDetailOpen = true;
+        s.suiteDetailPath = path;
+        s.suiteDetailItems = result.items;
+        s.suiteDetailCursor = result.items.findIndex(m => m.type === 'test' && m.failureObj);
+        if (s.suiteDetailCursor < 0) s.suiteDetailCursor = 0;
+      }
+      store.notify();
+      return;
+    }
+
+    if (key.escape) {
+      if (s.testDetailOpen) {
+        s.testDetailOpen = false;
+        s.testDetailFailure = null;
+        s.testDetailScrollOffset = 0;
+      } else if (s.suiteDetailOpen) {
+        s.suiteDetailOpen = false;
+        s.suiteDetailPath = null;
+        s.suiteDetailItems = [];
+        s.suiteDetailCursor = 0;
+      }
+      store.notify();
+    }
+  });
+
+  if (state.testDetailOpen) {
+    return React.createElement(TestDetailOverlay, { state, rows });
+  }
+  if (state.suiteDetailOpen) {
+    return React.createElement(SuiteDetailOverlay, { state, rows });
+  }
+
+  const listHeight = Math.max(4, rows - FIXED_ROWS);
+
+  return React.createElement(
+    Box,
+    { flexDirection: 'column', height: rows, width: columns },
+    React.createElement(Header, { state }),
+    React.createElement(Stats, { stats: state.stats }),
+    React.createElement(Progress, { stats: state.stats, width: columns }),
+    React.createElement(
+      Box,
+      { flexDirection: 'row', height: listHeight },
+      React.createElement(Box, { width: '65%' }, React.createElement(ResultsList, { state, height: listHeight })),
+      React.createElement(Box, { width: '35%' }, React.createElement(SuitesList,  { state, height: listHeight }))
+    ),
+    React.createElement(Footer, { state })
+  );
+}

package/lib/ui/components/Footer.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { SPINNER } from '../../constants.js';
+
+export function Footer({ state }) {
+  const { stats, testDetailOpen, suiteDetailOpen, watchWaiting, spinFrame, suites } = state;
+  const elapsed = stats.startTime
+    ? (((stats.endTime || Date.now()) - stats.startTime) / 1000).toFixed(1) + 's'
+    : '0.0s';
+  const runningCount = Object.values(suites).filter(s => !s.done).length;
+  const spin = SPINNER[spinFrame % SPINNER.length];
+
+  let hint;
+  if (testDetailOpen)       hint = '[Esc] close   [j/k] scroll';
+  else if (suiteDetailOpen) hint = '[j/k] navigate failed   [Enter] open failure   [Esc] back';
+  else if (watchWaiting)    hint = '[a] run all tests   [q] quit';
+  else                      hint = '[Tab] switch panel   [j/k] navigate   [Enter] open failure   [q] quit';
+
+  const statusText = runningCount > 0
+    ? `${spin} Running ${runningCount} suite${runningCount > 1 ? 's' : ''}...`
+    : `Elapsed: ${elapsed}`;
+
+  return React.createElement(
+    Box,
+    { height: 3, backgroundColor: '#111133', flexDirection: 'column', justifyContent: 'center', paddingLeft: 2 },
+    React.createElement(
+      Box,
+      { justifyContent: 'space-between' },
+      React.createElement(Text, { color: 'cyan' }, hint),
+      React.createElement(Text, { color: 'gray' }, statusText)
+    )
+  );
+}

package/lib/ui/components/Header.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+
+export function Header({ state }) {
+  const { runComplete, runOk, runElapsed } = state;
+  let content, bg;
+  if (runComplete) {
+    content = runOk ? `ALL TESTS PASSED — ${runElapsed}s` : `SOME TESTS FAILED — ${runElapsed}s`;
+    bg = runOk ? 'green' : 'red';
+  } else {
+    content = 'JEST TEST DASHBOARD';
+    bg = 'blue';
+  }
+  return React.createElement(
+    Box,
+    { height: 2, backgroundColor: bg, justifyContent: 'center', alignItems: 'center' },
+    React.createElement(Text, { bold: true, color: 'white' }, content)
+  );
+}