fix(scatter): keep line labels in the foreground

Inference performance scatter charts create line labels inside the
rooflines layer, which renders before the dot groups so roofline paths
stay behind the points. That left the labels painted under the scatter
points and overlay marks. Add a trailing custom layer that re-raises
every `.line-label` to the end of the zoomGroup after all layers render
(and on zoom), so they always read as foreground — mirroring GPUGraph,
whose line-label layer already renders last.

`.raise()` only changes z-order; label placement and the existing
de-overlap (hide-on-collision for interactivity, vertical nudge for
TTFT/E2EL) are untouched, so labels still never overlap one another.
Selects overlay line labels (`overlay-*`) too, so unofficial-run
overlays get the same treatment.

Adds an E2E assertion that visible labels follow the dot groups in DOM
order.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: cquil11

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');

packages/app/src/components/inference/ui/ScatterGraph.tsx

@@ -1760,9 +1760,33 @@ 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,