test(web): establish renderer-independent dashboard e2e baseline

[flamboh]

Note

🤖 GPT-6.1-Sol on behalf of Oliver

The dashboard migration needs tests that verify chart values and interactions without depending on canvas pixels. This layer expands the normal SQLite fixture and establishes a DOM contract that the TanStack/SVG renderer must retain.

Layer 2 of the frontend overhaul, based on perf/harness from #129. Nothing is merged or deployed by this layer.

Coverage

• 57 Playwright tests, up from 26, covering the dataset picker, all eight dashboard cards, file lookup/detail, alerts and error routes.
• Checks actual series counts and values, axis titles, tooltips, legends, metrics, families, directions, MAAD side/order/measure, ranges, brush/drilldown, deferred activation, ordering, request cancellation, empty/unavailable/loading/error recovery, URL/history, keyboard forms, theme and 390/1920px layouts.
• Both IP families, five granularities, directional traffic, duration/TTL, port/IP/protocol counts, MAAD and two populated days have deterministic fixture data. An isolated alert fixture exercises rows, filters and pagination.
• Replaces pixel reads, drawing interception and image-data comparisons with rendered-state assertions. Four workers bound test contention. An existing alert-limit unit-test fixture now inserts its rows in one transaction to avoid repeated fsync timeouts.

The read-only real-data QA recorded 280 actions across the baseline and follow-up scripts and saved 78 before screenshots. Artifacts remain local in /tmp/atlantis-frontend-overhaul/e2e/: flows.md, findings.md, chart-contract.md, screens.md, audit JSON/scripts and baseline-screens/. Private dataset screenshots were not uploaded. The perf stage, test stage, Cloudflare and v5 database were unchanged. The perf benchmark was not rerun and this PR makes no performance improvement claim.

Renderer contract

The e2e README spells out the migration contract. Preserve data-chart-id, data-chart-activated, data-chart-sentinel, and the following hooks:

• chart-surface with role="img", accessible name/description and data-chart-rendered.
• chart-render-state with state, kind, finite positioned mark count and visible series count.
• chart-series with label, visibility, count/min/max/total and normalized point/legend interaction targets; chart-axis with displayed axis titles.
• chart-tooltip with the displayed tooltip text; existing spectrum role="tooltip".
• chart-card-state and coverage lifecycle state.

The publisher is renderer independent and accepts HTML or SVG. The temporary Chart.js adapter publishes after rendering and removes summaries on destruction. Unknown coverage and unpositioned/nonfinite points do not count as rendered marks. Coverage summaries describe observed/expected ratios. This adds accessible summaries, not keyboard chart navigation.

Top QA findings for later layers

• Traffic tooltip totals can read the wrong original index after leading unknown buckets are trimmed.
• Empty/unknown windows can leave blank plots rather than explanatory feedback.
• Singleton characteristic/port x bounds can produce nonfinite positions despite finite input values.
• Narrow file detail has clipped dense text and a small internal overflow; source/destination headings disappear on narrow layouts.
• Chart legends, brush and drilldown lack keyboard equivalents. Local selections reset on reload, impossible calendar timestamps pass lookup validation, and file summary requests are duplicated.

No product bugs were fixed here. The known DST capture-evidence issue #104 remains separate.

Human review guide

1. Run bun run test:e2e with the normal fixture server. It should pass without access to the private product or perf deployment.
2. Open March 1 fixture traffic at 5-minute grouping. TCP flows should be 100 overall, 80 for IPv4, 20 for IPv6 and 50 for ingress. Extend through March 3, then narrow to March 3: daily TCP totals should be 300, then 200.
3. Scroll through all cards; switch dimensions and MAAD measures, toggle a legend, hover a spectrum point and brush traffic. Verify the hidden summaries track the actual graphic. Inspect both file analysis sides after drilldown.
4. Review empty, unavailable and no-source cases separately. Unknown coverage must remain distinct from observed zero. Confirm delayed/failed requests recover and an older spectrum request cannot replace current state.
5. Inspect the alerts fixture's sort/filter/pagination and clipboard feedback. The real private stage has no running feed.
6. For layer 3, retain hook semantics and user-facing control labels. Decide whether to fix the documented persistence and keyboard gaps, then add/update assertions for intentional behavior changes.

Automated verification passed: bun run format, bun run lint, bun run typecheck, bun run test:web with 215 tests, and bun run test:e2e with 57 tests. Manual Chromium QA covered 320/390/1440/1920px views. Full screen-reader/contrast review, touch devices, Firefox/WebKit and performance remeasurement remain for later layers.

Made by GPT-6.1-Sol through the Codex harness in T3 Code.