feat(web): redesign analysis as an Ops console

[flamboh]

Note

🤖 GPT-6.1-Sol on behalf of Oliver

Round 3 review fixes

Restore the original purple-to-yellow spectrum hue mapping and repaint mounted canvas colors on theme changes. Relative theme colors restore IP/protocol router hue offsets, distinct port sources and larger palettes. The additive chart contract exposes actual computed color/opacity for appearance checks.

Rename Series to Metrics, align date/actions at 36px with a separate chip summary, and narrow the desktop rail to 200px. Fine-pointer filter controls are 32px with compact section spacing; touch and modal-sheet controls retain 44px. The fold geometry spec reserves room for all three v5 sources at 1280x800. Visible title-bar move/shorter/taller buttons replace Layout. Loaded wrappers fit their resized content, preserve 16px gaps, and clear stale native inline height when button resizing. Reordering restores keyboard focus to the move control, with an enabled move fallback at either end of the order.

Own-tip verification: format, lint, typecheck, production build, 238 web tests, 111 Playwright tests and landing lint/build pass. Added coverage checks both pointer types, toolbar containment, arbitrary Metrics choices, native/button resize interaction, packed panels, color distinction and mounted spectrum repaint. Human review: exercise all cards and twelve file plots at 390/768/1280/1920 in both themes, compare axes/colors to the original Chart.js view, and check the 1280x800 three-source rail. Independent deployed v5 QA and the final fixed-settings benchmark are complete; see below.

The chart/UI before-after attachments use generated public fixtures and illustrative timelines. Actual v5 screenshots and the complete original/current/fixed chart sheets remain private/local.

Round 3 performance

Metric	Layer 4	Round 2 final	Round 3 final	vs layer 4	vs round 2
Total JS raw, KiB	588.8	625.0	629.4	+6.9%	+0.7%
Total JS gzip, KiB	191.1	202.4	204.0	+6.7%	+0.8%
Total CSS gzip, KiB	10.6	12.3	12.6	+19.5%	+2.4%
Dashboard FCP/LCP p50, ms	136.0	152.0	148.0	+8.8%	-2.6%
Dashboard visible charts p50, ms	477.2	478.9	501.0	+5.0%	+4.6%
Dashboard visible charts p95, ms	517.7	506.2	504.5	-2.5%	-0.3%
Dashboard all charts p50, ms	2934.3	2982.9	3084.2	+5.1%	+3.4%
Dashboard observed initial TBT p50, ms	114.0	75.0	87.0	-23.7%	+16.0%
Six-month visible charts p50, ms	439.1	434.8	417.4	-4.9%	-4.0%
Six-month all charts p50, ms	2538.7	2601.3	2650.7	+4.4%	+1.9%
Filtered hourly visible charts p50, ms	393.2	399.8	419.9	+6.8%	+5.0%
Filtered hourly all charts p50, ms	2443.1	2552.9	2627.8	+7.6%	+2.9%
File detail LCP p50, ms	424.0	456.0	492.0	+16.0%	+7.9%
File detail charts p50, ms	418.3	449.3	490.0	+17.1%	+9.1%
File detail observed initial TBT p50, ms	125.0	114.0	127.0	+1.6%	+11.4%
Dashboard retained heap p50, MiB	18.2	18.2	18.6	+2.3%	+2.0%
File detail retained heap p50, MiB	6.8	6.8	7.0	+3.1%	+2.2%
Traffic default API p50, ms	32.1	31.0	35.7	+11.2%	+15.3%
Traffic default API p95, ms	36.5	42.5	41.7	+14.4%	-1.7%
Spectrum both sides default API p50, ms	77.3	81.4	78.3	+1.4%	-3.7%
Spectrum both sides default API p95, ms	81.6	98.7	103.6	+27.1%	+5.0%
Structure default API p50, ms	121.5	123.5	120.7	-0.7%	-2.3%
Structure default API p95, ms	157.6	156.8	172.8	+9.6%	+10.2%

Same layer-4 dates, 1280x800 viewport, five API samples, three page samples, one warmup, 1000ms settling and no throttling. Zero errors; all 35 query cases, parameters and decoded payload sizes identical. All-chart readiness includes settling/GC; observed TBT is long-task blocking measured by this harness, not Lighthouse or INP.

Round 3 restores chart fidelity: calendar ticks, gridlines, legend glyphs, per-chart clip paths and computed series colors. It also adds the new UI controls. Together these cost about +1.6 KiB of JS gzip over round 2 (+6.7% over layer 4). File-chart readiness rises to 490 ms (+17% over layer 4) and dashboard all-chart readiness to 3.08 s (+5%). A file render probe confirms one SVG write and one exact-size observation per plot, so no render loop came back. Diagnostic traces show more layout and raster work from the wider plots and the restored grids and marks. A larger diagnostic sample (15 API runs, 9 page runs) measured lower numbers: dashboard visible 472 ms and file charts 464 ms. Shared-host variance is therefore significant, and causal claims stay limited. Round 3 has no server, API, query or storage changes; every API case and decoded payload is identical. The full threshold audit is in the retained perf/round3-final/threshold-audit.md.

The dashboard uses an Ops console. Global source, direction, granularity and MAAD choices live in a persistent desktop rail; dates and the selected-filter summary stay in a slim time toolbar. Local metric choices stay with their chart. This makes the relationship between the query and its results clearer and exposes more of the first plot on phones.

Based on #134, after the chart migration in #131 and performance work in #133. The Ops console spans the dataset directory, dashboard, alerts, file lookup and file detail. It preserves the blue accent, neutral tokens, system fonts, tabular numerals and existing chart contracts.

Direction and behavior

• Desktop users can collapse the rail for wider plots. Below 1024px, the same controls open in a keyboard-accessible modal sheet, with focus containment and return to the trigger.
• The traffic toolbar keeps quick selections and moves twelve independently selectable metric/protocol checkboxes into a Metrics popover. Native chart legends keep their existing toggles.
• File context and MAAD choices move into the rail. Source metadata sits beside its plots, with full values at narrow widths. The dataset directory and file lookup use the same console layout.
• Full-width chart panels preserve readable time axes, deferred panel order/heights and the existing first-card activation budget. The concept's multi-column chart grid and illustrative KPIs are not shipped.
• Source deselection/reselection recovers traffic, including the sole-source case. Escape cancels a pending sheet open before its lazy module finishes loading; reopening succeeds and closing returns focus.

The retained alternatives are Query bar and Overview first. The rail keeps global settings visible during desktop analysis; the query bar hides more choices in popovers, while overview-first would change the summary/focus contract and activation order. Round 1 remains available on feat/redesign-workbench-v1 if Oliver prefers the workbench direction.

Public visual evidence

The attached direction sheet is redesign/round2-directions.png. It includes the three alternatives in light/dark desktop/mobile layouts. The attached shipped comparison labels Before, Round 1 / Workbench and Round 2 / Ops console at 1280px and 390px in both themes. Before is the parent brand branch. The separate file-detail and phone-sheet images show the shipped controls.

All public captures use generated Playwright fixtures or illustrative mockup data. Private dataset captures and machine-local inputs remain local and are not uploaded or committed.

Round 2 performance vs layer 4 shipping (superseded by the round 3 table above)

Metric	Layer 4	Final round 2	Change
Total JS raw, KiB	588.8	625.0	+6.1%
Total JS gzip, KiB	191.1	202.4	+5.9%
Total CSS gzip, KiB	10.6	12.3	+16.8%
Dashboard FCP/LCP p50, ms	136.0	152.0	+11.8%
Dashboard visible charts p50, ms	477.2	478.9	+0.4%
Dashboard visible charts p95, ms	517.7	506.2	-2.2%
Dashboard all charts p50, ms	2934.3	2982.9	+1.7%
Dashboard observed initial TBT p50, ms	114.0	75.0	-34.2%
Six-month visible charts p50, ms	439.1	434.8	-1.0%
Six-month all charts p50, ms	2538.7	2601.3	+2.5%
Filtered hourly visible charts p50, ms	393.2	399.8	+1.7%
Filtered hourly all charts p50, ms	2443.1	2552.9	+4.5%
File detail LCP p50, ms	424.0	456.0	+7.5%
File detail charts p50, ms	418.3	449.3	+7.4%
File detail observed initial TBT p50, ms	125.0	114.0	-8.8%
Dashboard retained heap p50, MiB	18.2	18.2	+0.3%
File detail retained heap p50, MiB	6.8	6.8	+0.8%
Traffic default API p50, ms	32.1	31.0	-3.6%
Traffic default API p95, ms	36.5	42.5	+16.3%
Spectrum both sides default API p50, ms	77.3	81.4	+5.3%
Spectrum both sides default API p95, ms	81.6	98.7	+21.0%
Structure default API p50, ms	121.5	123.5	+1.7%
Structure default API p95, ms	157.6	156.8	-0.5%

The first round-2 run regressed file-chart readiness from layer 4's 418.3ms to 491.5ms; the larger repeat reached 509.0ms and observed TBT 182ms versus 125ms in layer 4. A trace found twelve redundant chart renders: computed CSS width 317.938px differed from ResizeObserver's exact 317.9375px. The adapter now waits for the first observation and passes those explicit dimensions, then owns size updates and disconnects on teardown. It retains every chart and the existing data, axes and marks.

The final file-chart p50 is 449.3ms, 8.6% below the earlier same-sample run and 11.7% below its larger repeat, but still 7.4% above layer 4. File observed TBT is 114ms, 8.8% below layer 4 and 37.4% below the larger repeat. File LCP remains 456ms, 7.5% above layer 4. Dashboard visible readiness is within 0.4% of layer 4; dashboard LCP adds 16ms. These residual costs remain explicit review items.

Lazy loading the filter sheet reduces initial file-route JS by about 2.1 KiB gzip versus pre-fix round 2. Total emitted JS gzip is 202.4 KiB, +11,588 bytes / 5.9% versus layer 4; all-chunk gzip grew another 1,600 bytes versus pre-fix round 2 because split chunks cannot share compression. CSS gzip is 12.3 KiB, +1,817 bytes / 16.8%. The table counts all chunks, including the deferred sheet. Diagnostic trace animation-frame work dropped from 90.5ms to 1.4ms; those traces demonstrate the mechanism, while the final table supplies timing evidence.

Same layer-4 warm-cache dates, 1280x800 viewport, 5 API samples, 3 page samples, one warmup, no CPU/network throttle and rendered-chart readiness. Zero benchmark errors; all 35 API request cases, parameters and decoded payload sizes are unchanged. All 31 exported JS/CSS assets match the final perf image byte-for-byte.

No task-owned QA, builds, tests or development servers ran during measurement. Unrelated shared-host maintenance and existing development processes were left untouched. Layer 4 paused existing development processes before the newer prohibition; this run cannot reproduce that isolation exactly. Three page samples and shared-host contention limit causal timing claims. Observed TBT is this harness's long-task measure, not Lighthouse or INP; all-chart readiness includes settling/GC. Full comparison, raw runs and traces are retained in /tmp/atlantis-frontend-overhaul/perf/layer6-round2-final/.

Verification and QA

Final own-tip format, lint, typecheck, 238 web tests, 111 serial Chromium e2e tests, production fixture build, landing lint and landing build pass. Each changed lower layer also passed its own gates: #131 had 230 web/71 browser tests, #133 had 235/74, and #134 had 235/76 plus landing checks. These are automated checks; the independent deployed browser review is separate.

The first independent reviewer compared original Chart.js :8080 and the combined perf image :8090 by GET-only browsing. It captured 352 observations covering all eight dashboard cards and twelve file plots at 390/768/1280/1920 in both actual persisted themes, and visually inspected all 32 before/after sheets. It also checked 96 visible file tooltips, 56 interaction groups, 54 applicable native/button resize scenarios, 13 range/recovery groups, 32 supplemental groups and eight native-grip reorder scenarios. Five bounded granularities were reviewed at 1280px in both themes. All requested main filter targets and packing checks passed; the actual three-source 200px fine-pointer rail ends its lowest MAAD control at y=790.14 in a 1280x800 viewport. Coarse-pointer selection controls retain 44px.

That review found one P2: Enter on a direct move button moved the chart but dropped focus to BODY. This final tip restores focus after Svelte's keyed DOM move and chooses an enabled move action at either boundary. The new keyboard specs cover repeated movement through both boundaries, persisted order and plot resizing at phone/desktop widths. A separate independent follow-up on the exact final image passes 48 keyboard groups, including 464 Enter moves, 72 boundary fallbacks, 32 hydrated reloads, 336 size actions and 840 packed measurements. The final fold, all eight coarse width/theme cases, ten representative chart/file appearance cases and all 32 served asset hashes also pass. Both driver browsers close in finally. The second independent review accepted 69 check groups with no unresolved objections and no new product defects.

No other confirmed product regression emerged from the covered visual and interaction matrix. The reviewer retained and attributed about:blank storage exceptions to its theme init script; guarded injection passes. Expected superseded GET cancellations and deliberate browser-local error/missing-route cases are recorded separately. Phone traffic deliberately has resize:none below 768px, so its two attempted native drags were invalid test assumptions; button resizing and all eligible native cases pass. Original TTL no-data and inactive Alerts feed behavior are inherited.

Human review guide

Run bun run test:e2e for generated data and populated alerts fixtures. For manual use, configure a dataset with multiple sources, long input locators and large values. Start at /, open the dashboard, alerts, file lookup and file detail in both themes at 390, 768, 1280 and 1920px.

Review the rail/time-toolbar/local-toolbar hierarchy and plot density. Collapse/reopen the rail; open the phone sheet by keyboard, press Escape immediately on its first open, reopen it, change a source/direction and close it. Confirm selection preservation and focus return. Select arbitrary combinations of all twelve metrics, toggle legends and explore values by keyboard. Brush/drill with Back/Reset; reverse and correct dates; remove/reselect sources; reorder/resize cards and reload. Use Enter repeatedly on the title-bar move buttons and confirm focus stays on the same card, including an enabled move fallback at either boundary. On file detail, inspect Source/Destination headings, complete totals, hover targets, MAAD family/measure and Next File context. Review the choice of full-width panels and the disclosed bundle/timing costs.

Remaining manual checks are Firefox/WebKit, real touch, a screen-reader session and comprehensive contrast/color-vision review. Twelve traffic series still rely on labels/dashes as well as the palette. Populated alerts/TTL and alternate absent/internal MAAD configurations use fixtures because the real perf product does not provide them. Inherited local selection persistence and format-only impossible-calendar lookup behavior remain outside this redesign.

Only perf was redeployed with a read-only data mount. Production container identity, image, PID, start time and running state, and source database stat all match their pre-verification snapshots. Production/test, Cloudflare, the v5 database and other owners' processes were not modified.

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