forever components

Terminal

Test Runner

Simulates a watch-mode test runner: spec suites stream in with green PASS ticks, one flaky spec fails red then retries and recovers, a live pass/fail tally and per-suite timings update in real time, and the run closes with a Stmts/Branch/Funcs/Lines coverage table before restarting on a loop.

csslight complexitymoderate motion

Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited

Live demo — the real component, running in a sandbox. One self-contained HTML file, zero dependencies. Open it on the canvas →
Worth keeping? Votes steer what gets built next — sign in to cast one, free to read

When to use it

Developer-tool landing pages, CI/testing dashboards, loading screens, or any terminal-aesthetic hero that needs a credible "tests are running" ambient backdrop.

When not to

Light-background UIs (background is hardcoded dark #0d1117) and non-technical audiences for whom spec output and coverage percentages carry no meaning.

Working with an AI agent

Every component ships agent-ready metadata. An example instruction for this one:

Add a suite {f:'payments/refund.spec.ts', ms:190, specs:['issues a full refund','rejects a double refund']} to the suites array, change the flaky spec's assertion message, and slow the per-spec streaming from 95ms to 160ms.

Safe to edit

  • suite/spec data (suites array: file names, per-suite ms, spec descriptions, flaky index)
  • coverage table rows and percentages (cov array)
  • per-spec / per-suite streaming delays (sleep 95/170ms and retry 280/300ms)
  • max visible lines (MAX=30)
  • loop restart pause (sleep 2800ms)
  • accent and level colors (.ttr-ok/.ttr-warn/.ttr-err CSS)

Keep intact

  • IIFE with "use strict"
  • visibilitychange running-flag stop/resume guard
  • prefers-reduced-motion staticFrame() early-return path
  • role=img + aria-label on the wrapper and aria-hidden corner caption
  • live tally element updated via tally()

Known limitations

  • Background and terminal palette are hardcoded dark — must edit CSS to re-theme
  • Not themeable: exposes no --pro-* custom-property block
  • Purely ambient with no click interactivity
  • With justify-content:flex-end older lines scroll out of view on short viewports; only the newest MAX lines render

terminaltest-runnercoveragemonospaceclidark-modelooptypewriter

More Terminal components

  • Shell SessionSimulates a looping shell session: commands type out character-by-character with a blinking cursor, then output lines appear, then the next command begins.
  • Resource MonitorRetro BBS-style system monitor showing 6 CPU core bars and 3 memory rows with ASCII block characters; values drift randomly every 420ms.
  • Log StreamSimulates a live server log tail — new entries slide in every 650ms with color-coded INFO/WARN/ERROR/DEBUG levels and real-time timestamps.
  • Build RunnerSimulates npm install + build pipeline in a scrolling terminal; packages, lint/compile steps, and file-change events stream in sequence and loop endlessly.
  • Network TraceSimulates a live traceroute — hops appear one by one with color-coded latency (green/orange/red); ms values fluctuate after trace completes, then loop.
  • Diff ViewerA unified git diff viewer that streams a code review in line by line: a file header with +12/-4 counts, a hunk header, then context/addition/deletion…