feat(runner): redesign the interactive page, with an Appearance panel accessibility themes and a tour of tripwire by nev21 · Pull Request #360 · nevware21/tripwire

nev21 · 2026-10-28T03:22:41Z

Layout: the title row holds the Target picker and the actions menu at the top right; the Scope row (Scope, Failed only, Run) and the status line stay pinned while the results scroll with the page, so there is one scrollbar and the background no longer repeats with a seam.
Narrow windows: instead of wrapping a row, Failed only and then Target fold into the actions menu as stand-ins that drive the real controls (ui/overflow.ts); they unfold as the window widens, and on a phone Scope and Run share one line.
Actions menu: Reload Tests, Auto-reload (now a ticked menu setting with no toolbar checkbox), Clear Logs, Appearance… and Finish & Stop Server; it supports checkbox and radio entries, skips hidden entries with the arrow keys and scrolls on a short window.
Clear Results moves out of the menu to an icon at the end of the status line, Clear scope becomes an ✕ inside the Scope box that shows while a scope is set, and the toolbar Finish button is removed in favour of the menu's Finish & Stop Server.
Status line: a run summary (passed, failed, skipped and the run's duration) whose failed count toggles Failed only, kept right-aligned with the assertion count and Clear results even when the line wraps; the status text points at Finish & Stop Server, and the header shows the target, host and test count.
Results: suites read "2 passed · 1 failed · 1 child suite", each row's left edge shows its state, skipped and pending tests show as skipped rather than passed, the test glyphs take their status colour, durations over a second read in seconds, and Failed only says how many tests it is hiding.
Failed assertions show their message once, then the Expected and Actual values (sent from the test frame and the worker via shared/assertionValues.ts), with the rest of the description folded under Details; the values are written without running anything of the test's own (no getters, toJSON or toString; accessors read [Getter]) and never throw, so the assertion always fails with its own error.
Runner Log: draws the reporters' terminal colours (ui/ansi.ts, tokenized by @nevware21/chromacon's parseAnsi: SGR styles and 16, 256 and 24-bit colours, with other sequences such as OSC 8 hyperlinks dropped) in the GitHub dark palette the docs' reporter images use, and keeps blank lines blank.
Appearance panel (ui/appearance.ts): a dialog opened from the actions menu, as a menu may hold only menu items; it holds the theme as a searchable combobox (any part of a name, in any order, or ArrowDown for the full list), Color-blind safe as a checkbox, and the zoom; Escape closes the theme list first and then the panel, returning focus to the menu button.
Themes come from one list (THEMES in ui/theme.ts) so that user-defined themes can be added later: System, Light and Dark for both styles, Low light (dim), and color-blind safe (Okabe-Ito blue and orange in light and dark, the log included).
Zoom: − and + step through 50% to 300% and Reset returns to the run's zoom; it is CSS zoom on the page's own container (--ui-zoom on .app-shell), so it never uses the browser's zoom and never scales a test's frame, content or the root font size; viewport units inside it are divided by the zoom.
The compact layout follows the zoom: body classes layout-narrow and layout-short, set before first paint and on resize, replace the two window-size media queries, so a zoomed page takes its narrow layout as a smaller window would.
--browser-theme and browserTheme in a config file (a string or an array) set the theme, color vision and zoom (eg. dim,colorblind,125%); the flag replaces only the parts it names, and an unknown word or a zoom outside 50% to 300% is an error. A choice made in the panel is kept in that browser while it differs from the run's setting, and is applied inline before the page first paints.
Autocomplete: a closed list reopens on ArrowDown or a click, a new openOnFocus option keeps it closed when its input takes focus as a dialog opens, it returns a close() for its owner, and a value already picked from the list is no longer highlighted as if it were a search.
Accessibility: page language; a skip link to the results that leaves the hash alone; labelled regions; named icon buttons and plain-word names where the small-capital labels leaked into accessible names; aria-activedescendant for the suggestion lists; assertions announced as passed or failed instead of by glyph; focusable scrolling regions; focus-visible outlines; reduced-motion support.
Build: the browser and worker bundles keep their iife wrapper (uglify's toplevel now applies only to the CommonJS CLI), since unwrapped into a bare block their vars were globals and the test frame's own it replaced ts-utils' "call", stopping every run in the page.
Build: uglify no longer runs with unsafe, which rewrote every String(x) as ""+x in all three bundles; that throws for a Symbol and failed each symbol assertion in debug:browser and debug:worker.
Removes the unused resources/runner.css and resources/runner.html.
Docs: a new tour (docs/tour.md) shows tripwire's own suite running unchanged on node, in Chrome and in a web worker, coverage from the command line, the interactive page and the measured speed, with images made from real runs by docs/scripts/genTourImages.js (npm run docs-tour-images, or -- terminal / -- browser for one set); it is linked from the README, the docs index, why-tripwire.md and llms.txt.
Docs: test-runner.md documents the reworked interactive page and adds a Themes and accessibility section covering the Appearance panel and zoom, with --browser-theme and browserTheme in both tables; --help, llms.txt and the Mocha guide's configPrecedence block are updated.
Tests: new ansi, overflow, theme, appearance, resources, assertionValues, browserTheme and genTourImages suites; the uxDom stand-ins gain comma selectors, scrollingElement and documentElement, text nodes, real Event dispatch, style.setProperty and shownTextOf.
Tests: binGuard adds BIN-SCOPE (nothing but expressions at the top level of the browser and worker bundles) and BIN-STRING (String(x) survives minification).
The puppeteer page test now covers the run summary, Expected/Actual values, log colours, folding at 520px and 390px, theme search and the Appearance panel, color-blind colours, zoom with the compact layout across a reload, keyboard use and Chrome's accessibility tree.

…, accessibility themes and a tour of tripwire - Layout: the title row holds the Target picker and the actions menu at the top right; the Scope row (Scope, Failed only, Run) and the status line stay pinned while the results scroll with the page, so there is one scrollbar and the background no longer repeats with a seam. - Narrow windows: instead of wrapping a row, Failed only and then Target fold into the actions menu as stand-ins that drive the real controls (ui/overflow.ts); they unfold as the window widens, and on a phone Scope and Run share one line. - Actions menu: Reload Tests, Auto-reload (now a ticked menu setting with no toolbar checkbox), Clear Logs, Appearance… and Finish & Stop Server; it supports checkbox and radio entries, skips hidden entries with the arrow keys and scrolls on a short window. - Clear Results moves out of the menu to an icon at the end of the status line, Clear scope becomes an ✕ inside the Scope box that shows while a scope is set, and the toolbar Finish button is removed in favour of the menu's Finish & Stop Server. - Status line: a run summary (passed, failed, skipped and the run's duration) whose failed count toggles Failed only, kept right-aligned with the assertion count and Clear results even when the line wraps; the status text points at Finish & Stop Server, and the header shows the target, host and test count. - Results: suites read "2 passed · 1 failed · 1 child suite", each row's left edge shows its state, skipped and pending tests show as skipped rather than passed, the test glyphs take their status colour, durations over a second read in seconds, and Failed only says how many tests it is hiding. - Failed assertions show their message once, then the Expected and Actual values (sent from the test frame and the worker via shared/assertionValues.ts), with the rest of the description folded under Details; the values are written without running anything of the test's own (no getters, toJSON or toString; accessors read [Getter]) and never throw, so the assertion always fails with its own error. - Runner Log: draws the reporters' terminal colours (ui/ansi.ts, tokenized by @nevware21/chromacon's parseAnsi: SGR styles and 16, 256 and 24-bit colours, with other sequences such as OSC 8 hyperlinks dropped) in the GitHub dark palette the docs' reporter images use, and keeps blank lines blank. - Appearance panel (ui/appearance.ts): a dialog opened from the actions menu, as a menu may hold only menu items; it holds the theme as a searchable combobox (any part of a name, in any order, or ArrowDown for the full list), Color-blind safe as a checkbox, and the zoom; Escape closes the theme list first and then the panel, returning focus to the menu button. - Themes come from one list (THEMES in ui/theme.ts) so that user-defined themes can be added later: System, Light and Dark for both styles, Low light (dim), and color-blind safe (Okabe-Ito blue and orange in light and dark, the log included). - Zoom: − and + step through 50% to 300% and Reset returns to the run's zoom; it is CSS zoom on the page's own container (--ui-zoom on .app-shell), so it never uses the browser's zoom and never scales a test's frame, content or the root font size; viewport units inside it are divided by the zoom. - The compact layout follows the zoom: body classes layout-narrow and layout-short, set before first paint and on resize, replace the two window-size media queries, so a zoomed page takes its narrow layout as a smaller window would. - --browser-theme <list> and browserTheme in a config file (a string or an array) set the theme, color vision and zoom (eg. dim,colorblind,125%); the flag replaces only the parts it names, and an unknown word or a zoom outside 50% to 300% is an error. A choice made in the panel is kept in that browser while it differs from the run's setting, and is applied inline before the page first paints. - Autocomplete: a closed list reopens on ArrowDown or a click, a new openOnFocus option keeps it closed when its input takes focus as a dialog opens, it returns a close() for its owner, and a value already picked from the list is no longer highlighted as if it were a search. - Accessibility: page language; a skip link to the results that leaves the hash alone; labelled regions; named icon buttons and plain-word names where the small-capital labels leaked into accessible names; aria-activedescendant for the suggestion lists; assertions announced as passed or failed instead of by glyph; focusable scrolling regions; focus-visible outlines; reduced-motion support. - Build: the browser and worker bundles keep their iife wrapper (uglify's toplevel now applies only to the CommonJS CLI), since unwrapped into a bare block their vars were globals and the test frame's own `it` replaced ts-utils' "call", stopping every run in the page. - Build: uglify no longer runs with unsafe, which rewrote every String(x) as ""+x in all three bundles; that throws for a Symbol and failed each symbol assertion in debug:browser and debug:worker. - Removes the unused resources/runner.css and resources/runner.html. - Docs: a new tour (docs/tour.md) shows tripwire's own suite running unchanged on node, in Chrome and in a web worker, coverage from the command line, the interactive page and the measured speed, with images made from real runs by docs/scripts/genTourImages.js (npm run docs-tour-images, or -- terminal / -- browser for one set); it is linked from the README, the docs index, why-tripwire.md and llms.txt. - Docs: test-runner.md documents the reworked interactive page and adds a Themes and accessibility section covering the Appearance panel and zoom, with --browser-theme and browserTheme in both tables; --help, llms.txt and the Mocha guide's configPrecedence block are updated. - Tests: new ansi, overflow, theme, appearance, resources, assertionValues, browserTheme and genTourImages suites; the uxDom stand-ins gain comma selectors, scrollingElement and documentElement, text nodes, real Event dispatch, style.setProperty and shownTextOf. - Tests: binGuard adds BIN-SCOPE (nothing but expressions at the top level of the browser and worker bundles) and BIN-STRING (String(x) survives minification). - The puppeteer page test now covers the run summary, Expected/Actual values, log colours, folding at 520px and 390px, theme search and the Appearance panel, color-blind colours, zoom with the compact layout across a reload, keyboard use and Chrome's accessibility tree.

Copilot

Copilot was unable to review this pull request because the user who requested the review has insufficient remaining quota.

+                if (status === "failed") {
                    aggSuite.failed++;
+                } else if (status === "skipped") {
+                    aggSuite.skipped = (aggSuite.skipped || 0) + 1;


Copilot

Copilot was unable to review this pull request because the user who requested the review has insufficient remaining quota.

codecov · 2026-10-28T03:35:45Z

Codecov Report

❌ Patch coverage is 98.68996% with 12 lines in your changes missing coverage. Please review.
✅ Project coverage is 97.10%. Comparing base (2b23ef2) to head (b35b1f4).

Files with missing lines	Patch %	Lines
internal/runner/src/ux/browser/ui/client.ts	91.66%	4 Missing ⚠️
internal/runner/src/shared/assertionValues.ts	97.50%	2 Missing ⚠️
internal/runner/src/ux/browser/ui/autocomplete.ts	95.83%	2 Missing ⚠️
internal/runner/src/ux/browser/ui/appearance.ts	99.13%	1 Missing ⚠️
internal/runner/src/ux/browser/ui/filtering.ts	93.33%	1 Missing ⚠️
internal/runner/src/ux/browser/ui/theme.ts	99.00%	1 Missing ⚠️
internal/runner/src/ux/browser/ui/ui-rendering.ts	99.39%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #360      +/-   ##
==========================================
+ Coverage   97.03%   97.10%   +0.06%     
==========================================
  Files         324      330       +6     
  Lines       16893    17709     +816     
  Branches     4525     4758     +233     
==========================================
+ Hits        16392    17196     +804     
- Misses        501      513      +12

Files with missing lines	Coverage Δ
internal/runner/src/cli/parseArgs.ts	`100.00% <100.00%> (ø)`
internal/runner/src/client/workerRunner.ts	`98.29% <100.00%> (+0.02%)`	⬆️
internal/runner/src/execute/browserRunner.ts	`97.35% <100.00%> (ø)`
internal/runner/src/shared/browserTheme.ts	`100.00% <100.00%> (ø)`
internal/runner/src/tripwire.ts	`95.14% <100.00%> (+0.01%)`	⬆️
internal/runner/src/ux/browser/ui/ansi.ts	`100.00% <100.00%> (ø)`
internal/runner/src/ux/browser/ui/assertions.ts	`100.00% <100.00%> (ø)`
internal/runner/src/ux/browser/ui/dom.ts	`100.00% <100.00%> (ø)`
internal/runner/src/ux/browser/ui/frame-mode.ts	`96.55% <100.00%> (+0.04%)`	⬆️
internal/runner/src/ux/browser/ui/logging.ts	`98.82% <100.00%> (+0.08%)`	⬆️
... and 16 more

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

nevware21-bot

Approved by nevware21-bot

Copilot AI balanced review requested due to automatic review settings October 28, 2026 03:22

nev21 requested a review from a team as a code owner October 28, 2026 03:22

Merge 82d1b84 into 2b23ef2

bd64a29

nev21 requested a review from a team as a code owner October 28, 2026 03:22

Copilot AI reviewed Oct 28, 2026

github-advanced-security Bot found potential problems Oct 28, 2026

View reviewed changes

Comment thread internal/runner/src/ux/browser/ui/test-execution.ts

if (status === "failed") {

aggSuite.failed++;

} else if (status === "skipped") {

aggSuite.skipped = (aggSuite.skipped || 0) + 1;

chore: syncing versions and shrinkwrap

b35b1f4

Copilot AI balanced review requested due to automatic review settings October 28, 2026 03:24

Copilot AI reviewed Oct 28, 2026

nevware21-bot approved these changes Oct 28, 2026

View reviewed changes

Navigation Menu

Repository navigation

feat(runner): redesign the interactive page, with an Appearance panel accessibility themes and a tour of tripwire - #360

feat(runner): redesign the interactive page, with an Appearance panel accessibility themes and a tour of tripwire#360
nev21 wants to merge 3 commits into
mainfrom
nev21/CiChecks

nev21 commented Oct 28, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

codecov Bot commented Oct 28, 2026 •

edited

Loading

Uh oh!

nevware21-bot left a comment

Uh oh!

This branch has not been deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

nev21 commented Oct 28, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

codecov Bot commented Oct 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

nevware21-bot left a comment

Choose a reason for hiding this comment

Uh oh!

This branch has not been deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

codecov Bot commented Oct 28, 2026 •

edited

Loading