fix(replay): stamp frame points with the playhead date so series render as one line (#620)

ScatterGraph scopes Pareto frontiers and line paths per point.date (needed
for the comparison-date overlay), but replay frames copied each config's
template point verbatim — carrying that config's first-observation date.
Configs introduced on different dates therefore landed in different date
buckets within one frame, splitting a single hardware series into several
same-colored roofline segments with duplicated line labels ("one line
diverging into two") the moment the playhead crossed a newer config's first
date. Stamping every frame point with the playhead's current date restores
one frontier and one path per (hw, precision), which matches what a replay
frame is: a single point in time.

中文：replay（时间回放）图表中，同一硬件系列会分裂成多条同色曲线并出现重复的
曲线标签。原因是每帧数据沿用了各 config 模板点的首次观测日期，而 ScatterGraph
按 point.date 分桶计算 Pareto 前沿并分段绘制路径。现将每帧所有数据点统一标记为
播放头当前日期，使每个（硬件、精度）系列在单帧内只生成一条前沿曲线，符合
"一帧即一个时间点"的语义。附带回归单元测试。

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

Author: cquil11

packages/app/src/components/inference/replay/__tests__/replayFrameData.test.ts

@@ -17,6 +17,9 @@ const baseTemplate = {
   precision: 'fp8',
   tp: 8,
   conc: 64,
+  // Deliberately NOT one of the timeline dates: templates carry each config's
+  // first-observation date, which buildFrameData must override per frame.
+  date: '2025-08-15',
 } as unknown as InferenceData;
 
 function makeTimeline(): ReplayTimeline {
@@ -38,7 +41,7 @@ function makeTimeline(): ReplayTimeline {
         configId: 'b',
         hwKey: 'h100',
         precision: 'fp8',
-        template: { ...baseTemplate, hwKey: 'h100' } as InferenceData,
+        template: { ...baseTemplate, hwKey: 'h100', date: '2025-08-20' } as InferenceData,
         // Stays invisible across the first two steps so a true "omits invisible
         // configs" assertion is meaningful — `interpolateAtStep` pops a config
         // in for the *whole* invisible→visible segment, so we need both
@@ -243,6 +246,22 @@ describe('buildFrameData', () => {
     }
   });
 
+  // Regression: ScatterGraph scopes Pareto frontiers and line paths per
+  // point.date, so a frame mixing template (first-observation) dates renders
+  // one hardware series as several same-colored lines with duplicate labels.
+  it('stamps every point with the playhead date, not the template first-observation date', () => {
+    const t = makeTimeline();
+    const atStart = buildFrameData(t, 0);
+    expect(atStart.length).toBeGreaterThan(0);
+    for (const d of atStart) expect(d.date).toBe('2025-09-01');
+
+    const atEnd = buildFrameData(t, 1);
+    // Both configs are visible at the last step and carry distinct template
+    // dates — the frame must still present a single uniform date.
+    expect(atEnd).toHaveLength(2);
+    for (const d of atEnd) expect(d.date).toBe('2025-09-03');
+  });
+
   it('returns empty when the timeline has zero configs', () => {
     const empty: ReplayTimeline = {
       dates: ['2025-09-01'],

packages/app/src/components/inference/replay/replayFrameData.ts

@@ -5,11 +5,17 @@ import { interpolateAtStep } from './interpolateAtTime';
 
 export function buildFrameData(timeline: ReplayTimeline, fraction: number): InferenceData[] {
   const idxFloat = stepFloatAtFraction(fraction, timeline.dates.length);
+  // A replay frame is a single point in time, so every point gets the
+  // playhead's date. Each template keeps its config's first-observation date,
+  // and ScatterGraph scopes Pareto frontiers and line paths per date — leaving
+  // mixed template dates in one frame splits a hardware series into several
+  // same-colored lines (with duplicated line labels) mid-replay.
+  const frameDate = dateAtFraction(timeline, fraction);
   const out: InferenceData[] = [];
   for (const c of timeline.configs) {
     const r = interpolateAtStep(c.stepValues, idxFloat);
     if (!r.visible) continue;
-    out.push({ ...c.template, x: r.x, y: r.y });
+    out.push({ ...c.template, x: r.x, y: r.y, date: frameDate });
   }
   return out;
 }