feat: add replay over time

packages/app/cypress/component/chart-buttons.cy.tsx

@@ -49,6 +49,44 @@ describe('ChartButtons', () => {
     });
   });
 
+  describe('with MP4 export', () => {
+    it('shows MP4 option in the export popover and triggers the callback', () => {
+      const onExportMp4 = cy.stub().as('mp4Export');
+      const onExportCsv = cy.stub().as('csvExport');
+      cy.mount(
+        <div style={{ position: 'relative', width: 400, height: 200 }}>
+          <div id="test-chart">Chart content</div>
+          <ChartButtons
+            chartId="test-chart"
+            analyticsPrefix="test"
+            onExportCsv={onExportCsv}
+            onExportMp4={onExportMp4}
+          />
+        </div>,
+      );
+      cy.get('[data-testid="export-button"]').click();
+      cy.get('[data-testid="export-png-button"]').should('be.visible');
+      cy.get('[data-testid="export-csv-button"]').should('be.visible');
+      cy.get('[data-testid="export-mp4-button"]').should('be.visible').click();
+      cy.get('@mp4Export').should('have.been.calledOnce');
+      cy.get('@csvExport').should('not.have.been.called');
+    });
+
+    it('shows the popover when only MP4 export is provided (no CSV)', () => {
+      const onExportMp4 = cy.stub().as('mp4Export');
+      cy.mount(
+        <div style={{ position: 'relative', width: 400, height: 200 }}>
+          <div id="test-chart">Chart content</div>
+          <ChartButtons chartId="test-chart" analyticsPrefix="test" onExportMp4={onExportMp4} />
+        </div>,
+      );
+      cy.get('[data-testid="export-button"]').click();
+      cy.get('[data-testid="export-csv-button"]').should('not.exist');
+      cy.get('[data-testid="export-mp4-button"]').click();
+      cy.get('@mp4Export').should('have.been.calledOnce');
+    });
+  });
+
   describe('hideZoomReset', () => {
     it('hides zoom reset button when hideZoomReset is true', () => {
       cy.mount(

packages/app/cypress/e2e/inference-replay.cy.ts

@@ -0,0 +1,137 @@
+const openReplayDialog = () => {
+  cy.get('[data-testid="chart-figure"]')
+    .first()
+    .within(() => {
+      cy.get('[data-testid="export-button"]').click();
+    });
+  cy.get('[data-testid="export-mp4-button"]').first().click();
+};
+
+describe('Inference Replay', () => {
+  before(() => {
+    cy.window().then((win) => {
+      win.localStorage.setItem('inferencex-star-modal-dismissed', String(Date.now()));
+    });
+    cy.visit('/inference');
+    cy.get('[data-testid="inference-chart-display"]').should('exist');
+  });
+
+  it('exposes MP4 export in the chart export menu', () => {
+    cy.get('[data-testid="chart-figure"]')
+      .first()
+      .within(() => {
+        cy.get('[data-testid="export-button"]').click();
+      });
+    cy.get('[data-testid="export-mp4-button"]').should('be.visible');
+  });
+
+  it('opens the replay preview modal from the MP4 menu item', () => {
+    openReplayDialog();
+    // Assert the dialog itself is visible. ChartDisplay now opens the launcher
+    // via an imperative ref; the optional-chain `?.open()` would silently
+    // no-op if the ref ever failed to attach, so this guards against that.
+    cy.get('[data-testid="replay-dialog-chart-0"]').should('be.visible');
+    cy.get('[data-testid="replay-panel-chart-0"]').should('exist');
+    cy.get('[data-testid="replay-panel-chart-0"]').then(($panel) => {
+      const text = $panel.text();
+      const hasControls = $panel.find('[data-testid="replay-play-pause"]').length > 0;
+      const hasMessage = /Loading benchmark history|Not enough history/u.test(text) || hasControls;
+      expect(hasMessage).to.equal(true);
+    });
+  });
+
+  it('exposes scrubber + play/pause + speed controls when history is available', () => {
+    // Wait for history to resolve into either the controls UI or the empty-state message.
+    cy.get('[data-testid="replay-panel-chart-0"]', { timeout: 15_000 }).should(($panel) => {
+      const hasControls = $panel.find('[data-testid="replay-play-pause"]').length > 0;
+      const hasEmpty = /Not enough history/u.test($panel.text());
+      expect(hasControls || hasEmpty).to.equal(true);
+    });
+
+    cy.get('[data-testid="replay-panel-chart-0"]').then(($panel) => {
+      if ($panel.find('[data-testid="replay-play-pause"]').length === 0) {
+        cy.log('Replay history fixture has < 2 dates; skipping interactive checks');
+        return;
+      }
+      cy.get('[data-testid="replay-scrubber"]').should('exist');
+      // The speed trigger is always present; individual SelectItems are only
+      // mounted in the Radix portal while the dropdown is open.
+      cy.get('[data-testid="replay-speed-select"]').should('exist');
+      cy.get('[data-testid="replay-export-mp4"]').should('exist');
+
+      // Play, then pause, and confirm the button toggles label.
+      cy.get('[data-testid="replay-play-pause"]').click().should('contain.text', 'Pause');
+      cy.get('[data-testid="replay-play-pause"]').click().should('contain.text', 'Play');
+    });
+  });
+
+  it('advances the date overlay and scrubber when Play is pressed', () => {
+    cy.get('body').then(($body) => {
+      if ($body.find('[data-testid="replay-play-pause"]').length === 0) {
+        cy.log('Replay history fixture has < 2 dates; skipping animation check');
+        return;
+      }
+      cy.get('[data-testid="replay-scrubber"]')
+        .invoke('val')
+        .then((startVal) => {
+          cy.get('[data-testid="replay-date-overlay"]')
+            .invoke('text')
+            .then((startDate) => {
+              cy.get('[data-testid="replay-play-pause"]').click();
+              cy.wait(800);
+              cy.get('[data-testid="replay-play-pause"]').click();
+              cy.get('[data-testid="replay-scrubber"]')
+                .invoke('val')
+                .should((endVal) => {
+                  expect(Number(endVal)).to.be.greaterThan(Number(startVal));
+                });
+              cy.get('[data-testid="replay-date-overlay"]')
+                .invoke('text')
+                .should((endDate) => {
+                  expect(endDate).not.to.equal(startDate);
+                });
+            });
+        });
+    });
+  });
+
+  it('re-renders the replay frame when a parent-chart toggle changes', () => {
+    cy.get('body').then(($body) => {
+      if ($body.find('[data-testid="replay-panel-chart-0"]').length === 0) return;
+      // Capture the SVG path data for the first roofline as a stable signature.
+      cy.get('[data-testid="replay-panel-chart-0"] svg path.roofline')
+        .first()
+        .invoke('attr', 'd')
+        .then((beforeD) => {
+          // Toggle the log-scale setting in the underlying inference context —
+          // the replay panel shares state with the parent chart, so the chart
+          // re-renders without us touching the replay UI.
+          cy.window().then((win) => {
+            const url = new URL(win.location.href);
+            const cur = url.searchParams.get('i_log') === '1';
+            url.searchParams.set('i_log', cur ? '0' : '1');
+            win.history.replaceState(null, '', url.toString());
+            // Dispatch a popstate so InferenceContext picks up the change.
+            win.dispatchEvent(new win.PopStateEvent('popstate'));
+          });
+          cy.wait(400);
+          cy.get('[data-testid="replay-panel-chart-0"] svg path.roofline')
+            .first()
+            .invoke('attr', 'd')
+            .should((afterD) => {
+              expect(afterD).not.to.equal(beforeD);
+            });
+        });
+    });
+  });
+
+  it('closes the modal', () => {
+    cy.get('body').then(($body) => {
+      if ($body.find('[data-testid="replay-panel-chart-0"]').length === 0) return;
+      // Radix Dialog closes on Escape — more robust than picking the X by DOM
+      // order now that the panel contains its own buttons (Play, Reset, …).
+      cy.get('body').type('{esc}');
+      cy.get('[data-testid="replay-panel-chart-0"]').should('not.exist');
+    });
+  });
+});

packages/app/cypress/support/mock-data.ts

@@ -82,7 +82,7 @@ export function createMockHardwareConfig(): HardwareConfig {
 
 export function createMockChartDefinition(overrides?: Partial<ChartDefinition>): ChartDefinition {
   return {
-    chartType: 'scatter',
+    chartType: 'e2e',
     heading: 'End-to-End Latency vs Throughput',
     x: 'conc' as keyof AggDataEntry,
     x_label: 'Concurrency',

packages/app/package.json

@@ -59,6 +59,7 @@
     "gray-matter": "^4.0.3",
     "iwanthue": "^2.0.0",
     "lucide-react": "^1.14.0",
+    "mp4-muxer": "^5.2.2",
     "next": "^16.2.6",
     "next-mdx-remote": "^6.0.0",
     "next-themes": "^0.4.6",

packages/app/src/components/inference/replay/ReplayLauncher.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+import { forwardRef, useImperativeHandle, useState } from 'react';
+
+import type { ChartDefinition } from '@/components/inference/types';
+import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog';
+import { Skeleton } from '@/components/ui/skeleton';
+
+// Keep this in sync with REPLAY_HEIGHT + padding/header/controls in ReplayPanel
+// so the dialog doesn't resize as the panel transitions through its loading states.
+const REPLAY_PANEL_MIN_HEIGHT = 620;
+
+const ReplayPanel = dynamic(() => import('./ReplayPanel'), {
+  ssr: false,
+  loading: () => <Skeleton className="w-full" style={{ height: REPLAY_PANEL_MIN_HEIGHT }} />,
+});
+
+interface ReplayLauncherProps {
+  parentChartId: string;
+  chartDefinition: ChartDefinition;
+  yLabel: string;
+  xLabel: string;
+}
+
+export interface ReplayLauncherHandle {
+  open: () => void;
+}
+
+/**
+ * Owns its own open state so callers only need a ref + .open() call instead of
+ * a controlled boolean per chart instance. The dialog mounts the panel lazily,
+ * keeping mp4-muxer and html-to-image out of the main inference bundle.
+ */
+const ReplayLauncher = forwardRef<ReplayLauncherHandle, ReplayLauncherProps>(
+  function ReplayLauncher({ parentChartId, chartDefinition, yLabel, xLabel }, ref) {
+    const [open, setOpen] = useState(false);
+    useImperativeHandle(ref, () => ({ open: () => setOpen(true) }), []);
+    return (
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent
+          className="max-w-[min(1280px,95vw)] w-[min(1280px,95vw)] max-h-[92vh] overflow-y-auto p-0 sm:rounded-lg"
+          data-testid={`replay-dialog-${parentChartId}`}
+        >
+          <DialogTitle className="sr-only">Replay over time</DialogTitle>
+          {open && (
+            <ReplayPanel
+              parentChartId={parentChartId}
+              chartDefinition={chartDefinition}
+              yLabel={yLabel}
+              xLabel={xLabel}
+            />
+          )}
+        </DialogContent>
+      </Dialog>
+    );
+  },
+);
+
+export default ReplayLauncher;