diff --git a/packages/app/cypress/e2e/line-labels.cy.ts b/packages/app/cypress/e2e/line-labels.cy.ts
index a3fa4b68..822cad2d 100644
--- a/packages/app/cypress/e2e/line-labels.cy.ts
+++ b/packages/app/cypress/e2e/line-labels.cy.ts
@@ -39,6 +39,30 @@ describe('Line Labels Toggle', () => {
     );
   });
 
+  it('line labels render in the foreground, after the scatter points', () => {
+    // Labels were toggled on in the test above and remain on here.
+    cy.get('[data-testid="scatter-graph"] svg g.line-label').should('have.length.greaterThan', 0);
+
+    cy.get('[data-testid="scatter-graph"] svg').then(($svg) => {
+      const svg = $svg[0];
+      const dots = svg.querySelectorAll('.dot-group');
+      const labels = svg.querySelectorAll('g.line-label');
+      expect(dots.length, 'scatter dot groups exist').to.be.greaterThan(0);
+      expect(labels.length, 'line labels exist').to.be.greaterThan(0);
+
+      // Every label must paint after every dot group. Comparing the *last* dot
+      // group against the *first* label is sufficient: if the earliest label
+      // follows the latest dot in document order, all labels are in front.
+      const lastDot = dots.item(dots.length - 1)!;
+      const firstLabel = labels.item(0)!;
+      const relation = lastDot.compareDocumentPosition(firstLabel);
+      expect(
+        relation & Node.DOCUMENT_POSITION_FOLLOWING,
+        'line label follows the scatter points in DOM order (foreground)',
+      ).to.be.greaterThan(0);
+    });
+  });
+
   it('toggling Line Labels off removes label elements', () => {
     cy.get('#scatter-line-labels').click();
     cy.get('#scatter-line-labels').should('have.attr', 'data-state', 'unchecked');
diff --git a/packages/app/src/components/inference/replay/ReplayPanel.tsx b/packages/app/src/components/inference/replay/ReplayPanel.tsx
index 4ff3a499..7273ed24 100644
--- a/packages/app/src/components/inference/replay/ReplayPanel.tsx
+++ b/packages/app/src/components/inference/replay/ReplayPanel.tsx
@@ -10,6 +10,8 @@ import { useInference } from '@/components/inference/InferenceContext';
 import ScatterGraph from '@/components/inference/ui/ScatterGraph';
 import type { ChartDefinition } from '@/components/inference/types';
 import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
 import {
   Select,
   SelectContent,
@@ -21,7 +23,7 @@ import { useBenchmarkHistory } from '@/hooks/api/use-benchmark-history';
 import { track } from '@/lib/analytics';
 import { cn } from '@/lib/utils';
 
-import { buildReplayTimeline } from './buildReplayTimeline';
+import { buildReplayTimeline, computeFullRunDomain } from './buildReplayTimeline';
 import type { Mp4ExportError, Mp4ExportStage } from './exportMp4';
 import { buildFrameData, dateAtFraction, shouldCommitFraction, spanMs } from './replayFrameData';
 import { useReducedMotion } from './useReducedMotion';
@@ -63,7 +65,7 @@ export default function ReplayPanel({
   xLabel,
 }: ReplayPanelProps) {
   const inference = useInference();
-  const { selectedModel, selectedSequence } = inference;
+  const { selectedModel, selectedSequence, activeHwTypes } = inference;
 
   const { isl = 0, osl = 0 } = sequenceToIslOsl(selectedSequence) ?? {};
   const history = useBenchmarkHistory(selectedModel, isl, osl);
@@ -90,6 +92,15 @@ export default function ReplayPanel({
     inference.selectedPrecisions,
   ]);
 
+  // Fixed axes for the whole run: take the extent across every step (not just
+  // the current frame) for the active hardware, so the axes stay put and the
+  // frontier visibly expands toward them over time instead of the chart
+  // refitting each frame. Recomputed when the legend's hw filter changes.
+  const fixedExtent = useMemo(
+    () => (timeline ? computeFullRunDomain(timeline, (hw) => activeHwTypes.has(hw)) : null),
+    [timeline, activeHwTypes],
+  );
+
   // Track the SVG's position inside our relative wrapper so the date overlay
   // can anchor its bottom-right to the chart plot's top-right (the wrapper
   // also contains the legend, so we can't anchor to the wrapper edge).
@@ -161,6 +172,10 @@ export default function ReplayPanel({
   const [fraction, setFraction] = useState(0);
   const [playing, setPlaying] = useState(false);
   const [speed, setSpeed] = useState(1);
+  // Fixed axes (default) freeze the coordinate space to the whole run so the
+  // frontier visibly expands over time; turning this off lets the axes refit to
+  // each frame's points.
+  const [fixedAxes, setFixedAxes] = useState(true);
   const [isExporting, setIsExporting] = useState(false);
   const [exportProgress, setExportProgress] = useState<number | null>(null);
   const [exportError, setExportError] = useState<string | null>(null);
@@ -496,6 +511,9 @@ export default function ReplayPanel({
           chartDefinition={chartDefinition}
           transitionDuration={0}
           niceAxes={false}
+          pinLineLabels
+          xExtentOverride={fixedAxes ? fixedExtent?.x : undefined}
+          yExtentOverride={fixedAxes ? fixedExtent?.y : undefined}
         />
         <div
           className="absolute -translate-y-full pointer-events-none text-2xl font-bold tabular-nums opacity-85 leading-none pb-1"
@@ -564,6 +582,24 @@ export default function ReplayPanel({
             ))}
           </SelectContent>
         </Select>
+        <div className="flex items-center gap-2">
+          <Switch
+            id="replay-fixed-axes"
+            data-testid="replay-fixed-axes"
+            checked={fixedAxes}
+            onCheckedChange={(checked) => {
+              setFixedAxes(checked);
+              track('inference_replay_fixed_axes_toggled', { enabled: checked });
+            }}
+          />
+          <Label
+            htmlFor="replay-fixed-axes"
+            className="text-xs text-muted-foreground hover:text-foreground cursor-pointer whitespace-nowrap"
+            title="Keep the axes fixed across the whole run so you can see the frontier improve over time, or let them refit to each frame."
+          >
+            Fixed axes
+          </Label>
+        </div>
         <Button
           size="sm"
           variant="default"
diff --git a/packages/app/src/components/inference/replay/__tests__/buildReplayTimeline.test.ts b/packages/app/src/components/inference/replay/__tests__/buildReplayTimeline.test.ts
index f91adae6..6e8025e6 100644
--- a/packages/app/src/components/inference/replay/__tests__/buildReplayTimeline.test.ts
+++ b/packages/app/src/components/inference/replay/__tests__/buildReplayTimeline.test.ts
@@ -3,7 +3,11 @@ import { describe, expect, it } from 'vitest';
 import type { BenchmarkRow } from '@/lib/api';
 import type { ChartDefinition } from '@/components/inference/types';
 
-import { buildReplayTimeline, computeStepDomain } from '../buildReplayTimeline';
+import {
+  buildReplayTimeline,
+  computeFullRunDomain,
+  computeStepDomain,
+} from '../buildReplayTimeline';
 
 const ALL_HW = () => true;
 
@@ -153,6 +157,51 @@ describe('buildReplayTimeline', () => {
     expect(mi355xOnly.x[1]).toBeLessThan(50); // padded around 5
   });
 
+  it('computeFullRunDomain spans every step, not just one frame', () => {
+    const rows = [
+      baseRow({ date: '2025-01-01', metrics: { tput_per_gpu: 100, median_intvty: 10 }, conc: 8 }),
+      baseRow({ date: '2025-02-01', metrics: { tput_per_gpu: 200, median_intvty: 20 }, conc: 8 }),
+      baseRow({
+        date: '2025-02-01',
+        metrics: { tput_per_gpu: 5000, median_intvty: 200 },
+        conc: 16,
+      }),
+    ];
+    const t = buildReplayTimeline(rows, interactivityChartDef, 'y_tpPerGpu', null, ['fp4']);
+    const full = computeFullRunDomain(t, ALL_HW);
+    // The fixed extent reaches the run's largest observation (step 1's conc=16
+    // config) even though it isn't present at step 0 — that's what keeps the
+    // axes constant while the early frontier sits small in the corner.
+    expect(full.x[1]).toBeGreaterThanOrEqual(200);
+    expect(full.y[1]).toBeGreaterThanOrEqual(5000);
+    // And it never undershoots the per-step boxes.
+    const d0 = computeStepDomain(t, 0, ALL_HW);
+    expect(full.x[1]).toBeGreaterThanOrEqual(d0.x[1]);
+    expect(full.y[1]).toBeGreaterThanOrEqual(d0.y[1]);
+  });
+
+  it('computeFullRunDomain respects the hw filter', () => {
+    const rows = [
+      baseRow({
+        hardware: 'mi355x',
+        framework: 'sglang',
+        date: '2025-01-01',
+        metrics: { tput_per_gpu: 50, median_intvty: 5 },
+      }),
+      baseRow({
+        hardware: 'b200',
+        framework: 'trt',
+        date: '2025-02-01',
+        metrics: { tput_per_gpu: 5000, median_intvty: 400 },
+      }),
+    ];
+    const t = buildReplayTimeline(rows, interactivityChartDef, 'y_tpPerGpu', null, ['fp4']);
+    const everything = computeFullRunDomain(t, ALL_HW);
+    const mi355xOnly = computeFullRunDomain(t, (hw) => hw.startsWith('mi355x'));
+    expect(everything.x[1]).toBeGreaterThanOrEqual(400);
+    expect(mi355xOnly.x[1]).toBeLessThan(50); // padded around 5, ignores b200
+  });
+
   it('separates configs that differ in concurrency or tp', () => {
     const rows = [
       baseRow({ conc: 32 }),
diff --git a/packages/app/src/components/inference/replay/buildReplayTimeline.ts b/packages/app/src/components/inference/replay/buildReplayTimeline.ts
index be076418..91db3d40 100644
--- a/packages/app/src/components/inference/replay/buildReplayTimeline.ts
+++ b/packages/app/src/components/inference/replay/buildReplayTimeline.ts
@@ -56,6 +56,31 @@ export function computeStepDomain(
   return { x: safeDomain(xMin, xMax), y: safeDomain(yMin, yMax) };
 }
 
+// Bounding box across ALL steps for configs passing `hwFilter`. Unlike
+// computeStepDomain (one step), this is the fixed extent used for the entire
+// replay so the axes stay constant and the frontier visibly marches toward them
+// over time instead of the axes refitting to each frame.
+export function computeFullRunDomain(
+  timeline: ReplayTimeline,
+  hwFilter: (hwKey: string) => boolean,
+): StepDomain {
+  let xMin = Infinity;
+  let xMax = -Infinity;
+  let yMin = Infinity;
+  let yMax = -Infinity;
+  for (const c of timeline.configs) {
+    if (!hwFilter(c.hwKey)) continue;
+    for (const v of c.stepValues) {
+      if (!v.visible) continue;
+      if (v.x < xMin) xMin = v.x;
+      if (v.x > xMax) xMax = v.x;
+      if (v.y < yMin) yMin = v.y;
+      if (v.y > yMax) yMax = v.y;
+    }
+  }
+  return { x: safeDomain(xMin, xMax), y: safeDomain(yMin, yMax) };
+}
+
 const buildPointConfigId = (point: InferenceData): string => {
   let key = `${point.hwKey}|${point.precision}|${point.tp}|${point.conc}|${point.decode_ep ?? 0}|${point.prefill_tp ?? 0}|${point.prefill_ep ?? 0}`;
   if (point.disagg) key += `|disagg|${point.num_prefill_gpu ?? 0}|${point.num_decode_gpu ?? 0}`;
diff --git a/packages/app/src/components/inference/types.ts b/packages/app/src/components/inference/types.ts
index cbf64787..f34afc53 100644
--- a/packages/app/src/components/inference/types.ts
+++ b/packages/app/src/components/inference/types.ts
@@ -481,6 +481,24 @@ export interface ScatterGraphProps {
    * playback).
    */
   niceAxes?: boolean;
+  /**
+   * Pin each line label to a stable anchor along its roofline so it tracks the
+   * line smoothly instead of re-running the per-frame greedy placement (which
+   * makes labels teleport between candidate positions as the lines animate).
+   * Defaults to false. The replay panel passes true so labels keep a positional
+   * "affinity" across frames. Trades the static chart's per-frame de-overlap for
+   * positional stability — appropriate while the chart is animating.
+   */
+  pinLineLabels?: boolean;
+  /**
+   * Fixed x/y data extents `[min, max]` to base the axes on, instead of fitting
+   * to the currently rendered points. The normal domain padding (and log /
+   * zero-baseline handling) is still applied on top. Replay passes the whole
+   * run's extent so the axes stay constant across the animation and you can see
+   * the frontier expand toward them over time.
+   */
+  xExtentOverride?: [number, number];
+  yExtentOverride?: [number, number];
 }
 /**
  * @file types.ts
diff --git a/packages/app/src/components/inference/ui/ScatterGraph.tsx b/packages/app/src/components/inference/ui/ScatterGraph.tsx
index 56e0088e..6da6a4e5 100644
--- a/packages/app/src/components/inference/ui/ScatterGraph.tsx
+++ b/packages/app/src/components/inference/ui/ScatterGraph.tsx
@@ -6,6 +6,7 @@ import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 
 import { GRADIENT_NUDGE_EVENT } from '@/lib/nudges/registry';
 import { useInference } from '@/components/inference/InferenceContext';
+import { pointNearestX } from '@/components/inference/ui/line-label-anchor';
 import ChartLegend from '@/components/ui/chart-legend';
 import { useUnofficialRun } from '@/components/unofficial-run-provider';
 import { computeToggle } from '@/hooks/useTogglableSet';
@@ -122,6 +123,9 @@ const ScatterGraph = React.memo(
     overlayData,
     transitionDuration = 750,
     niceAxes = true,
+    pinLineLabels = false,
+    xExtentOverride,
+    yExtentOverride,
   }: ScatterGraphProps) => {
     const {
       activeHwTypes,
@@ -174,6 +178,11 @@ const ScatterGraph = React.memo(
     } = useUnofficialRun();
     const chartRef = useRef<D3ChartHandle>(null);
 
+    // Pinned line-label anchors (data-space x) keyed by line-label key. Persists
+    // across renders so each label keeps a stable spot along its line during
+    // replay animation. Only read/written when `pinLineLabels` is true.
+    const lineLabelAnchorRef = useRef<Map<string, number>>(new Map());
+
     // Effective active hw types for rendering — shared override when present, else global
     const effectiveOfficialHwTypes = localOfficialOverride ?? activeHwTypes;
 
@@ -439,9 +448,10 @@ const ScatterGraph = React.memo(
 
     const xScaleConfig = useMemo(() => {
       const ext =
-        visiblePoints.length > 0
+        xExtentOverride ??
+        (visiblePoints.length > 0
           ? (d3.extent(visiblePoints, (d) => d.x) as [number, number])
-          : ([0, 100] as [number, number]);
+          : ([0, 100] as [number, number]));
 
       let useLog = false;
       if (isInputTputMetric) {
@@ -460,13 +470,14 @@ const ScatterGraph = React.memo(
         nice: niceAxes,
         _isLog: useLog,
       };
-    }, [visiblePoints, isInputTputMetric, xLabel, scaleType, niceAxes]);
+    }, [visiblePoints, isInputTputMetric, xLabel, scaleType, niceAxes, xExtentOverride]);
 
     const yScaleConfig = useMemo(() => {
       const ext =
-        visiblePoints.length > 0
+        yExtentOverride ??
+        (visiblePoints.length > 0
           ? (d3.extent(visiblePoints, (d) => d.y) as [number, number])
-          : ([0, 100] as [number, number]);
+          : ([0, 100] as [number, number]));
       const range = ext[1] - ext[0];
       const useLog = !isInputTputMetric && logScale;
 
@@ -484,7 +495,7 @@ const ScatterGraph = React.memo(
         domain: [yMin, ext[1] * 1.05] as [number, number],
         nice: niceAxes,
       };
-    }, [visiblePoints, isInputTputMetric, logScale, niceAxes]);
+    }, [visiblePoints, isInputTputMetric, logScale, niceAxes, yExtentOverride]);
 
     // --- Axis configs ---
     const xAxisConfig = useMemo(
@@ -946,55 +957,86 @@ const ScatterGraph = React.memo(
                 if (!prev || e.points.length > prev.points.length) bestByGroup.set(groupKey, e);
               }
 
-              // Sort entries by highest y-value first (top of chart) for priority
-              const sorted = [...bestByGroup.values()].toSorted((a, b) => {
-                const ay = yScale(a.points[0].y);
-                const by = yScale(b.points[0].y);
-                return ay - by; // smaller pixel y = higher on chart
-              });
-
-              for (const entry of sorted) {
-                const pts = entry.points;
+              // Place one label per series. When pinned (replay), reuse a stored
+              // data-space anchor so the label tracks the same spot along its line
+              // as it animates; otherwise re-run greedy placement each render and
+              // hide on collision (the static chart's de-overlap behavior).
+              const anchors = lineLabelAnchorRef.current;
+              const placeLabel = (
+                key: string,
+                hw: string,
+                label: string,
+                color: string,
+                pts: InferenceData[],
+              ) => {
                 const candidates = [
-                  pts[Math.min(1, pts.length - 1)], // top-left (near start)
+                  pts[Math.min(1, pts.length - 1)], // near start
                   pts[Math.floor(pts.length / 2)], // midpoint
                   pts[Math.max(0, Math.floor((pts.length * 2) / 3))], // right-third
                   pts.at(-1)!, // endpoint
                 ];
-
-                const label = lineLabelText(entry.hw, entry.precision, multiPrecision);
-                let foundPlacement = false;
+                if (pinLineLabels) {
+                  let anchorX = anchors.get(key);
+                  if (anchorX === undefined) {
+                    // First sighting: pick the first non-colliding candidate
+                    // (endpoint as fallback) and remember its data-x for later
+                    // frames so the label no longer hops between candidates.
+                    let chosen = candidates.at(-1)!;
+                    for (const pt of candidates) {
+                      if (!collides(xScale(pt.x), yScale(pt.y))) {
+                        chosen = pt;
+                        break;
+                      }
+                    }
+                    anchorX = chosen.x;
+                    anchors.set(key, anchorX);
+                  }
+                  const pt = pointNearestX(pts, anchorX);
+                  const px = xScale(pt.x);
+                  const py = yScale(pt.y);
+                  placed.push({ x: px, y: py });
+                  // Stay visible across frames — positional stability is the goal
+                  // during animation, so we don't hide on transient collisions.
+                  lineLabels.push({ key, hw, label, color, x: px, y: py, visible: true });
+                  return;
+                }
                 for (const pt of candidates) {
                   const px = xScale(pt.x);
                   const py = yScale(pt.y);
                   if (!collides(px, py)) {
-                    lineLabels.push({
-                      key: entry.key,
-                      hw: entry.hw,
-                      label,
-                      color: getCssColor(resolveColor(entry.hw)),
-                      x: px,
-                      y: py,
-                      visible: true,
-                    });
+                    lineLabels.push({ key, hw, label, color, x: px, y: py, visible: true });
                     placed.push({ x: px, y: py });
-                    foundPlacement = true;
-                    break;
+                    return;
                   }
                 }
-                // If all candidates collide, hide this label
-                if (!foundPlacement) {
-                  const pt = pts[0];
-                  lineLabels.push({
-                    key: entry.key,
-                    hw: entry.hw,
-                    label,
-                    color: getCssColor(resolveColor(entry.hw)),
-                    x: xScale(pt.x),
-                    y: yScale(pt.y),
-                    visible: false,
-                  });
-                }
+                // All candidates collide — hide this label.
+                const pt = pts[0];
+                lineLabels.push({
+                  key,
+                  hw,
+                  label,
+                  color,
+                  x: xScale(pt.x),
+                  y: yScale(pt.y),
+                  visible: false,
+                });
+              };
+
+              // Sort entries by highest y-value first (top of chart) for priority
+              const sorted = [...bestByGroup.values()].toSorted((a, b) => {
+                const ay = yScale(a.points[0].y);
+                const by = yScale(b.points[0].y);
+                return ay - by; // smaller pixel y = higher on chart
+              });
+
+              for (const entry of sorted) {
+                placeLabel(
+                  entry.key,
+                  entry.hw,
+                  lineLabelText(entry.hw, entry.precision, multiPrecision),
+                  getCssColor(resolveColor(entry.hw)),
+                  entry.points,
+                );
               }
 
               // Also add hidden entries for any curve that wasn't placed (so the
@@ -1039,49 +1081,22 @@ const ScatterGraph = React.memo(
                 .toSorted(([, a], [, b]) => yScale(a.points[0].y) - yScale(b.points[0].y));
 
               for (const [ovKey, group] of sortedOverlay) {
-                const labelKey = `overlay-${ovKey}`;
-                const pts = group.points;
-                const candidates = [
-                  pts[Math.min(1, pts.length - 1)],
-                  pts[Math.floor(pts.length / 2)],
-                  pts[Math.max(0, Math.floor((pts.length * 2) / 3))],
-                  pts.at(-1)!,
-                ];
-                const label = overlayLabelText(
-                  group.runIndex,
+                placeLabel(
+                  `overlay-${ovKey}`,
                   group.hwKey,
-                  group.points[0]?.precision ?? '',
+                  overlayLabelText(group.runIndex, group.hwKey, group.points[0]?.precision ?? ''),
+                  overlayRunColor(group.runIndex),
+                  group.points,
                 );
-                let placedOverlay = false;
-                for (const pt of candidates) {
-                  const px = xScale(pt.x);
-                  const py = yScale(pt.y);
-                  if (!collides(px, py)) {
-                    lineLabels.push({
-                      key: labelKey,
-                      hw: group.hwKey,
-                      label,
-                      color: overlayRunColor(group.runIndex),
-                      x: px,
-                      y: py,
-                      visible: true,
-                    });
-                    placed.push({ x: px, y: py });
-                    placedOverlay = true;
-                    break;
-                  }
-                }
-                if (!placedOverlay) {
-                  const pt = pts[0];
-                  lineLabels.push({
-                    key: labelKey,
-                    hw: group.hwKey,
-                    label,
-                    color: overlayRunColor(group.runIndex),
-                    x: xScale(pt.x),
-                    y: yScale(pt.y),
-                    visible: false,
-                  });
+              }
+
+              // Drop anchors for series no longer present so the map stays bounded
+              // and a re-appearing series gets a fresh, in-range anchor.
+              if (pinLineLabels) {
+                const live = new Set(lineLabels.map((l) => l.key));
+                // Deleting the current key during Map iteration is well-defined.
+                for (const k of anchors.keys()) {
+                  if (!live.has(k)) anchors.delete(k);
                 }
               }
             } else {
@@ -1127,8 +1142,12 @@ const ScatterGraph = React.memo(
                   visible: true,
                 });
               }
+              // Pinned (replay): keep labels exactly at their endpoints, which
+              // already move smoothly with the line. The vertical de-overlap
+              // nudge below reshuffles positions as endpoints shift frame-to-
+              // frame, so skip it to preserve positional affinity.
               const visible = lineLabels.filter((l) => l.visible);
-              if (visible.length > 1) {
+              if (visible.length > 1 && !pinLineLabels) {
                 const yRange = yScale.range();
                 const top = Math.min(yRange[0], yRange[1]) + LABEL_H;
                 const bottom = Math.max(yRange[0], yRange[1]) - LABEL_H;
@@ -1760,15 +1779,40 @@ const ScatterGraph = React.memo(
         },
       };
 
+      // ── Last layer: keep line labels in the foreground ──
+      // Line labels are created inside the rooflines layer, which must render
+      // *before* the dot groups so the roofline paths sit behind the points.
+      // That ordering would otherwise leave the labels painted under the scatter
+      // points and the overlay marks. Re-raise every `.line-label` to the end of
+      // the zoomGroup after all other layers have rendered (and on each zoom) so
+      // they always read as foreground. `.raise()` only reorders z-index — label
+      // x/y placement (and the hide-on-collision / vertical-nudge de-overlap in
+      // the rooflines layer) is untouched, so labels still never overlap one
+      // another. Mirrors GPUGraph, whose line-label layer is already rendered
+      // last. Selects overlay line labels (key `overlay-*`) too, so unofficial
+      // run overlays get the same foreground treatment.
+      const lineLabelForegroundLayer: CustomLayerConfig = {
+        type: 'custom',
+        key: 'line-label-foreground',
+        render: (zoomGroup) => {
+          zoomGroup.selectAll('.line-label').raise();
+        },
+        onZoom: (zoomGroup) => {
+          zoomGroup.selectAll('.line-label').raise();
+        },
+      };
+
       const result: LayerConfig<InferenceData>[] = [rooflineLayer, scatterLayer];
       if (overlayLayer) result.push(overlayLayer);
       result.push(speedOverlayLayer);
+      result.push(lineLabelForegroundLayer);
       return result;
     }, [
       rooflines,
       allPointLabelsByKey,
       showGradientLabels,
       showLineLabels,
+      pinLineLabels,
       showSpeedOverlay,
       showMinecraftOverlay,
       gradientColorByPoint,
diff --git a/packages/app/src/components/inference/ui/line-label-anchor.test.ts b/packages/app/src/components/inference/ui/line-label-anchor.test.ts
new file mode 100644
index 00000000..31686486
--- /dev/null
+++ b/packages/app/src/components/inference/ui/line-label-anchor.test.ts
@@ -0,0 +1,38 @@
+import { describe, expect, it } from 'vitest';
+
+import type { InferenceData } from '@/components/inference/types';
+
+import { pointNearestX } from './line-label-anchor';
+
+// Minimal InferenceData stand-ins — pointNearestX only reads `x`.
+const pt = (x: number, y: number): InferenceData => ({ x, y }) as InferenceData;
+
+describe('pointNearestX', () => {
+  it('returns the point whose x is closest to the target', () => {
+    const pts = [pt(0, 10), pt(5, 20), pt(10, 30)];
+    expect(pointNearestX(pts, 4).x).toBe(5);
+    expect(pointNearestX(pts, 1).x).toBe(0);
+    expect(pointNearestX(pts, 9).x).toBe(10);
+  });
+
+  it('keeps a stable anchor as the line shifts between frames', () => {
+    // An anchor stored at x=5 should resolve to whichever current point sits
+    // nearest x=5 — this is what keeps a replay label glued to its line.
+    const anchorX = 5;
+    const frameA = [pt(0, 10), pt(5, 22), pt(10, 30)];
+    const frameB = [pt(0, 12), pt(5, 18), pt(10, 26)];
+    expect(pointNearestX(frameA, anchorX)).toMatchObject({ x: 5, y: 22 });
+    expect(pointNearestX(frameB, anchorX)).toMatchObject({ x: 5, y: 18 });
+  });
+
+  it('clamps to the nearest endpoint when the anchor is out of range', () => {
+    const pts = [pt(2, 10), pt(4, 20), pt(6, 30)];
+    expect(pointNearestX(pts, -100).x).toBe(2);
+    expect(pointNearestX(pts, 100).x).toBe(6);
+  });
+
+  it('handles a single-point line', () => {
+    const pts = [pt(3, 7)];
+    expect(pointNearestX(pts, 999)).toMatchObject({ x: 3, y: 7 });
+  });
+});
diff --git a/packages/app/src/components/inference/ui/line-label-anchor.ts b/packages/app/src/components/inference/ui/line-label-anchor.ts
new file mode 100644
index 00000000..89a7cfcb
--- /dev/null
+++ b/packages/app/src/components/inference/ui/line-label-anchor.ts
@@ -0,0 +1,25 @@
+import type { InferenceData } from '@/components/inference/types';
+
+/**
+ * Find the point on a polyline whose x is closest to a target data-space x.
+ *
+ * Used by the pinned (replay) line-label path: an anchor is stored in data
+ * space so a label tracks the same spot along its line as the line animates,
+ * instead of jumping between discrete candidate positions on every frame. As
+ * the polyline's points shift between frames, resolving the anchor to the
+ * nearest current point keeps the label glued to its line.
+ *
+ * `pts` is assumed non-empty (callers guard with `pts.length >= 2`).
+ */
+export const pointNearestX = (pts: InferenceData[], targetX: number): InferenceData => {
+  let best = pts[0];
+  let bestDist = Math.abs(pts[0].x - targetX);
+  for (let i = 1; i < pts.length; i++) {
+    const dist = Math.abs(pts[i].x - targetX);
+    if (dist < bestDist) {
+      bestDist = dist;
+      best = pts[i];
+    }
+  }
+  return best;
+};