feat(frontend): waterfall zoom, initial-load filter, fresher reports

Author: nabramovitz

src/frontend/packages/core/src/features/about/diagnostic-performance-page/diagnostic-performance-page.component.html

@@ -26,12 +26,18 @@
     <!-- Scope note -->
     <app-card>
       <div class="px-4 py-3 text-sm text-content-muted">
-        These numbers reflect this browsing session's initial page load and stay put
-        as you move around the app. Reload &amp; measure captures a fresh warm
-        (cached) load; for a cold load, hard-reload the browser with the cache
-        bypassed (&#8984;&#8679;R in Chrome/Firefox on macOS, Ctrl+Shift+R elsewhere).
-        Numbers are cleanest when this page is opened soon after the app loads &mdash;
-        background requests made before the first visit are included.
+        The milestone numbers reflect this browsing session's initial page load and
+        stay put as you move around the app. The waterfall and byte totals keep
+        accumulating: every fetch since the page loaded is recorded, including lazy
+        route chunks loaded as you navigate, so the timeline grows (and its scale
+        stretches from ms to s) the longer the session runs &mdash; check
+        &ldquo;Initial load only&rdquo; on the waterfall to compare like with like.
+        Recording stops silently after 500 resources. Reload &amp; measure captures
+        a fresh warm (cached) load; for a cold load, hard-reload the browser with
+        the cache bypassed (&#8984;&#8679;R in Chrome/Firefox on macOS,
+        Ctrl+Shift+R elsewhere). Numbers are cleanest when this page is opened soon
+        after the app loads &mdash; background requests made before the first visit
+        are included.
       </div>
     </app-card>
 

src/frontend/packages/core/src/features/about/diagnostic-performance-page/diagnostic-performance-page.component.spec.ts

@@ -119,14 +119,16 @@ describe('DiagnosticPerformancePageComponent', () => {
     expect(verdict).toContain('50% cached');
   });
 
-  it('re-displays the saved report instead of re-measuring on re-entry', async () => {
+  it('re-displays the saved report immediately and re-measures on re-entry', async () => {
     expect(vi.mocked(buildLoadReport)).toHaveBeenCalledTimes(1);
 
     const second = TestBed.createComponent(DiagnosticPerformancePageComponent);
     second.detectChanges();
+    // The saved report shows before the fresh measurement resolves.
+    expect(second.componentInstance.report()).toEqual(fixedReport);
     await second.whenStable();
 
-    expect(vi.mocked(buildLoadReport)).toHaveBeenCalledTimes(1);
+    expect(vi.mocked(buildLoadReport)).toHaveBeenCalledTimes(2);
     expect(second.componentInstance.report()).toEqual(fixedReport);
   });
 

src/frontend/packages/core/src/features/about/diagnostic-performance-page/diagnostic-performance-page.component.ts

@@ -18,9 +18,11 @@ import { ResourceWaterfallComponent } from './resource-waterfall.component';
 
 const TOP_RESOURCE_COUNT = 20;
 
-// The initial-load report is immutable for a browsing session, so it survives
-// route changes here and re-displays when the user returns to this tab. A
-// hard reload resets module state and yields a fresh measurement.
+// The last report survives route changes so returning to this tab shows data
+// immediately instead of waiting out the ~500ms paint-observer window. Each
+// visit still re-measures in the background: the milestone numbers come out
+// identical (same navigation), but the waterfall picks up resources fetched
+// since the last look. A hard reload resets module state entirely.
 let savedReport: LoadReport | null = null;
 
 /** Test hook: clear the session-persisted report between specs. */
@@ -70,9 +72,8 @@ export class DiagnosticPerformancePageComponent implements OnInit {
   ngOnInit() {
     if (savedReport) {
       this.report.set(savedReport);
-    } else {
-      this.measure();
     }
+    this.measure();
   }
 
   async measure() {

src/frontend/packages/core/src/features/about/diagnostic-performance-page/resource-waterfall.component.spec.ts

@@ -11,11 +11,15 @@ import {
   basename,
   formatTick,
   groupRows,
+  initialLoadResources,
   mergeMilestoneLabels,
   milestoneLines,
   spanPercent,
+  rowLabel,
   toPercent,
   waterfallScaleMax,
+  windowPercent,
+  windowTicks,
 } from './resource-waterfall.component';
 
 const row = (over: Partial<ResourceRow> = {}): ResourceRow => ({
@@ -152,6 +156,63 @@ describe('groupRows', () => {
   });
 });
 
+describe('rowLabel', () => {
+  it('keeps a file basename bare', () => {
+    expect(rowLabel('/assets/js/main.abc123.js')).toBe('main.abc123.js');
+  });
+
+  it('prefixes an extensionless basename with its parent segment', () => {
+    expect(rowLabel('/@vite/client')).toBe('@vite/client');
+    expect(rowLabel('/pp/v1/proxy/apps/df29d654')).toBe('apps/df29d654');
+  });
+
+  it('leaves a single extensionless segment bare', () => {
+    expect(rowLabel('/info')).toBe('info');
+  });
+});
+
+describe('windowPercent', () => {
+  it('maps ms linearly onto 0-100 within the window', () => {
+    expect(windowPercent(1500, { startMs: 1000, endMs: 2000 })).toBe(50);
+  });
+
+  it('clamps values outside the window', () => {
+    expect(windowPercent(500, { startMs: 1000, endMs: 2000 })).toBe(0);
+    expect(windowPercent(2500, { startMs: 1000, endMs: 2000 })).toBe(100);
+  });
+
+  it('returns 0 for an empty window', () => {
+    expect(windowPercent(1000, { startMs: 1000, endMs: 1000 })).toBe(0);
+  });
+});
+
+describe('windowTicks', () => {
+  it('matches axisTicks for a zero-based window', () => {
+    expect(windowTicks({ startMs: 0, endMs: 1000 })).toEqual(axisTicks(1000));
+  });
+
+  it('emits round-number ticks inside a shifted window, excluding the start edge', () => {
+    expect(windowTicks({ startMs: 1000, endMs: 2000 }))
+      .toEqual([1100, 1200, 1300, 1400, 1500, 1600, 1700, 1800, 1900, 2000]);
+  });
+
+  it('returns nothing for an empty window', () => {
+    expect(windowTicks({ startMs: 1000, endMs: 1000 })).toEqual([]);
+  });
+});
+
+describe('initialLoadResources', () => {
+  it('drops resources starting after the load event, keeping the boundary inclusive', () => {
+    const rows = [row({ startMs: 100 }), row({ startMs: 500 }), row({ startMs: 501 })];
+    expect(initialLoadResources(rows, 500).map(r => r.startMs)).toEqual([100, 500]);
+  });
+
+  it('filters nothing when the load event is unknown', () => {
+    const rows = [row({ startMs: 100 }), row({ startMs: 9999 })];
+    expect(initialLoadResources(rows, 0)).toEqual(rows);
+  });
+});
+
 describe('milestoneLines', () => {
   it('includes DCL, load, FCP and LCP when all are present', () => {
     const lines = milestoneLines({