From b9df4c938f481a96bbb05336f7761c9b0fa0df7e Mon Sep 17 00:00:00 2001
From: Oseltamivir <58582368+Oseltamivir@users.noreply.github.com>
Date: Fri, 31 Jul 2026 10:36:13 +0800
Subject: [PATCH 1/6] feat: explain clipped inference chart lines
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add dashed Pareto continuations and boundary arrows for cost and TTFT limits.
Show bilingual clipped-point details for official and unofficial-run series.
Cover official, overlay, and dismissal behavior with unit and Cypress tests.

中文：为成本与 TTFT 显示上限增加 Pareto 曲线虚线延伸和边界箭头，并为正式数据与 unofficial run 提供双语截断说明及测试。
---
 .../e2e/chart-overflow-continuation.cy.ts     | 161 ++++++++
 .../inference/hooks/useChartData.ts           |  73 ++--
 .../app/src/components/inference/types.ts     |  16 +
 .../components/inference/ui/ChartDisplay.tsx  |  22 +-
 .../components/inference/ui/ScatterGraph.tsx  | 370 +++++++++++++++++-
 .../src/components/inference/utils.test.ts    |  71 +++-
 .../app/src/components/inference/utils.ts     |  82 +++-
 .../utils/overflowContinuations.test.ts       |  87 ++++
 .../inference/utils/overflowContinuations.ts  | 101 +++++
 .../src/components/ui/d3-chart-wrapper.tsx    |   3 +
 .../app/src/lib/d3-chart/D3Chart/D3Chart.tsx  |   2 +
 .../app/src/lib/d3-chart/D3Chart/types.ts     |   2 +
 12 files changed, 921 insertions(+), 69 deletions(-)
 create mode 100644 packages/app/cypress/e2e/chart-overflow-continuation.cy.ts
 create mode 100644 packages/app/src/components/inference/utils/overflowContinuations.test.ts
 create mode 100644 packages/app/src/components/inference/utils/overflowContinuations.ts

diff --git a/packages/app/cypress/e2e/chart-overflow-continuation.cy.ts b/packages/app/cypress/e2e/chart-overflow-continuation.cy.ts
new file mode 100644
index 000000000..63f43e423
--- /dev/null
+++ b/packages/app/cypress/e2e/chart-overflow-continuation.cy.ts
@@ -0,0 +1,161 @@
+/**
+ * Intentional cost/TTFT clipping must read as a deliberate chart boundary,
+ * not as a mysteriously truncated benchmark line. Covers both official rows
+ * and the mandatory `?unofficialrun=` overlay path.
+ */
+const MODEL_DISPLAY = 'DeepSeek-V4-Pro';
+const MODEL_DB = 'dsv4';
+const RUN_DATE = '2026-07-30';
+const OVERLAY_RUN_ID = '99900000055';
+const OVERLAY_BRANCH = 'test/chart-overflow-continuation';
+const OVERLAY_RUN_URL = `https://github.com/SemiAnalysisAI/InferenceX/actions/runs/${OVERLAY_RUN_ID}`;
+
+const metrics = (interactivity: number, ttft: number, tputPerGpu: number) => ({
+  median_intvty: interactivity,
+  median_itl: 1 / interactivity,
+  median_ttft: ttft,
+  p99_ttft: ttft * 1.1,
+  median_e2el: ttft + 20,
+  p99_e2el: ttft + 25,
+  median_tpot: 1 / interactivity,
+  p99_tpot: 1 / interactivity,
+  tput_per_gpu: tputPerGpu,
+  input_tput_per_gpu: tputPerGpu * 0.8,
+  output_tput_per_gpu: tputPerGpu * 0.2,
+});
+
+const row = (
+  id: number,
+  conc: number,
+  interactivity: number,
+  ttft: number,
+  tputPerGpu: number,
+  runUrl: string | null,
+) => ({
+  id: runUrl ? 0 : id,
+  hardware: 'b200',
+  framework: 'vllm',
+  model: MODEL_DB,
+  precision: 'fp4',
+  spec_method: 'none',
+  disagg: false,
+  is_multinode: false,
+  prefill_tp: 8,
+  decode_tp: 8,
+  num_prefill_gpu: 8,
+  num_decode_gpu: 8,
+  isl: 8192,
+  osl: 1024,
+  conc,
+  offload_mode: 'off',
+  benchmark_type: 'single_turn',
+  image: 'vllm/vllm-openai:test',
+  metrics: metrics(interactivity, ttft, tputPerGpu),
+  workers: null,
+  date: RUN_DATE,
+  run_url: runUrl,
+});
+
+// C=1 exceeds $5/M, C=1024 exceeds 60s TTFT, and C=512 is the
+// sole in-bounds point. The complete lower-left cost frontier crosses the
+// visible region on both sides, so the chart should draw two continuations.
+const rows = (runUrl: string | null) => [
+  row(910001, 1, 162.6, 0.35, 80, runUrl),
+  row(910002, 512, 55.7, 36.28, 3887, runUrl),
+  row(910003, 1024, 41.45, 69.65, 4486, runUrl),
+];
+
+const availability = [
+  {
+    model: MODEL_DB,
+    isl: 8192,
+    osl: 1024,
+    precision: 'fp4',
+    hardware: 'b200',
+    framework: 'vllm',
+    spec_method: 'none',
+    disagg: false,
+    benchmark_type: 'single_turn',
+    date: RUN_DATE,
+  },
+];
+
+const visitOverflowChart = (withOverlay: boolean) => {
+  cy.intercept('GET', '/api/v1/availability', { body: availability }).as('availability');
+  cy.intercept('GET', '/api/v1/benchmarks*', { body: rows(null) }).as('benchmarks');
+  if (withOverlay) {
+    cy.intercept('GET', '/api/unofficial-run*', {
+      body: {
+        runInfos: [
+          {
+            id: Number(OVERLAY_RUN_ID),
+            name: OVERLAY_BRANCH,
+            branch: OVERLAY_BRANCH,
+            sha: 'abc055',
+            createdAt: `${RUN_DATE}T00:00:00Z`,
+            url: OVERLAY_RUN_URL,
+            conclusion: 'success',
+            status: 'completed',
+            isNonMainBranch: true,
+          },
+        ],
+        benchmarks: rows(OVERLAY_RUN_URL),
+        evaluations: [],
+      },
+    }).as('unofficialRun');
+  }
+
+  const overlayParam = withOverlay ? `&unofficialrun=${OVERLAY_RUN_ID}` : '';
+  cy.visit(
+    `/inference?g_model=${MODEL_DISPLAY}&g_rundate=${RUN_DATE}&i_seq=8k%2F1k&i_metric=y_costh&i_xmode=ttft&i_optimal=0${overlayParam}`,
+    {
+      onBeforeLoad(win) {
+        win.localStorage.setItem('inferencex-star-modal-dismissed', String(Date.now()));
+      },
+    },
+  );
+  cy.wait('@benchmarks');
+  if (withOverlay) cy.wait('@unofficialRun');
+  cy.get('[data-testid="chart-overflow-notice"]').should('be.visible');
+};
+
+describe('Chart overflow continuations', () => {
+  it('draws official dashed arrows and explains both active display limits', () => {
+    visitOverflowChart(false);
+
+    cy.get('[data-testid="official-overflow-continuation"]')
+      .should('have.length', 2)
+      .each(($continuation) => {
+        cy.wrap($continuation)
+          .find('.overflow-continuation-line')
+          .should('have.attr', 'stroke-dasharray');
+        cy.wrap($continuation).find('.overflow-continuation-arrow').should('exist');
+      });
+
+    cy.get('[data-testid="chart-overflow-notice"]')
+      .should('contain.text', '2 points outside chart limits')
+      .click();
+    cy.get('[data-testid="chart-overflow-popover"]')
+      .should('contain.text', '1 point above $5/M is hidden.')
+      .and('contain.text', '1 point beyond 60s TTFT is hidden.')
+      .and('contain.text', 'Dashed arrows show where the Pareto line continues');
+  });
+
+  it('draws overlay continuations and removes them when that run is dismissed', () => {
+    visitOverflowChart(true);
+
+    cy.get('[data-testid="overlay-overflow-continuation"]').should('have.length', 2);
+    cy.get('[data-testid="chart-overflow-notice"]').should(
+      'contain.text',
+      '4 points outside chart limits',
+    );
+
+    cy.get(`[aria-label="Dismiss ${OVERLAY_BRANCH}"]`).click();
+    cy.get('[data-testid="overlay-overflow-continuation"]').should('not.exist');
+    cy.get('[data-testid="official-overflow-continuation"]').should('have.length', 2);
+    cy.get('[data-testid="chart-overflow-notice"]').should(
+      'contain.text',
+      '2 points outside chart limits',
+    );
+  });
+});
diff --git a/packages/app/src/components/inference/hooks/useChartData.ts b/packages/app/src/components/inference/hooks/useChartData.ts
index a96cc9ffd..c64d1fc1b 100644
--- a/packages/app/src/components/inference/hooks/useChartData.ts
+++ b/packages/app/src/components/inference/hooks/useChartData.ts
@@ -12,7 +12,7 @@ import type {
   RenderableGraph,
   YAxisMetricKey,
 } from '@/components/inference/types';
-import { filterDataByCostLimit } from '@/components/inference/utils';
+import { partitionChartDataByLimits } from '@/components/inference/utils';
 import {
   parseComparisonEntry,
   resolveComparisonEntries,
@@ -494,33 +494,12 @@ export function useChartData(
           );
         }
 
-        filteredData = filterDataByCostLimit(filteredData, chartDefinition, selectedYAxisMetric);
-
-        // For AGENTIC workloads only: when the user is NOT viewing the
-        // e2e latency chart, mark each point with whether it sits on the
-        // (e2e_latency, y) Pareto frontier for its (hwKey, precision,
-        // date) group. The chart still renders every point as scatter —
-        // only e2e-Pareto winners feed the roofline (ScatterGraph honors
-        // the flag). Prevents benchmark-hacking the TTFT / interactivity
-        // line by tanking decode (or vice versa) without hiding the
-        // non-optimal configs from view.
-        //
-        // Fixed-seq workloads keep the existing per-axis Pareto since
-        // there's no separate session-level notion of total latency —
-        // their e2e IS the request latency, so a TTFT hack there reads
-        // honestly on e2e too. The anti-hack constraint is specifically
-        // about multi-turn agentic where TTFT measures a tiny fraction
-        // of the user-visible session time.
-        const isAgentic = selectedSequence === Sequence.AgenticTraces;
-        const e2eParetoSet =
-          isAgentic && selectedXAxisMode !== 'e2e'
-            ? e2eParetoIds(filteredData, selectedYAxisMetric, selectedPercentile)
-            : null;
-
-        // Filter to points that have the selected metric, then remap x/y
+        // Filter to points that have the selected metric, then remap x/y.
+        // Intentional cost/TTFT outliers are partitioned only after this step
+        // so ScatterGraph can retain them for dashed boundary continuations.
         const hasMetric = filteredData.some((d) => metricKey in d);
         const isTtftX = typeof xAxisField === 'string' && xAxisField.endsWith('_ttft');
-        const processedData = hasMetric
+        const mappedData = hasMetric
           ? filteredData
               .filter((d) => metricKey in d)
               .map((d: InferenceData) => {
@@ -532,36 +511,46 @@ export function useChartData(
                 // d.x would otherwise mask the regression).
                 const xCandidate = (d as Partial<AggDataEntry>)[xAxisField];
                 const xValue = typeof xCandidate === 'number' ? xCandidate : d.x;
-                const isOnE2eFrontier =
-                  e2eParetoSet === null
-                    ? undefined
-                    : isPersistedBenchmarkId(d.id) && e2eParetoSet.has(d.id);
                 return {
                   ...d,
                   x: xValue,
                   y: yValue,
                   roof,
-                  isOnE2eFrontier,
                 };
               })
-              // When TTFT is on the x-axis, apply the latency limit to filter
-              // overload outliers (fixed-seq conc=2048 rows with TTFT > 60s that
-              // compress all real data to the far left). Skip for agentic — long
-              // TTFTs there reflect real workloads (multi-turn, big prompts).
-              .filter(
-                (d) =>
-                  !isTtftX ||
-                  isAgentic ||
-                  !chartDefinition.y_latency_limit ||
-                  d.x <= chartDefinition.y_latency_limit,
-              )
           : [];
 
+        // For AGENTIC workloads only: when the user is NOT viewing the
+        // e2e latency chart, mark each point with whether it sits on the
+        // (e2e_latency, y) Pareto frontier for its (hwKey, precision,
+        // date) group. Include clipped points in this seed so official and
+        // unofficial continuation lines preserve the same anti-hacking rule.
+        const isAgentic = selectedSequence === Sequence.AgenticTraces;
+        const e2eParetoSet =
+          isAgentic && selectedXAxisMode !== 'e2e'
+            ? e2eParetoIds(mappedData, selectedYAxisMetric, selectedPercentile)
+            : null;
+        const stampedData = mappedData.map((d) => ({
+          ...d,
+          isOnE2eFrontier:
+            e2eParetoSet === null
+              ? undefined
+              : isPersistedBenchmarkId(d.id) && e2eParetoSet.has(d.id),
+        }));
+
+        const { data: processedData, clippedData } = partitionChartDataByLimits(
+          stampedData,
+          chartDefinition,
+          selectedYAxisMetric,
+          { isTtftX, isAgentic },
+        );
+
         return {
           model: selectedModel,
           sequence: selectedSequence,
           chartDefinition,
           data: processedData,
+          clippedData,
         };
       },
     );
diff --git a/packages/app/src/components/inference/types.ts b/packages/app/src/components/inference/types.ts
index 907903c13..27fd4e54a 100644
--- a/packages/app/src/components/inference/types.ts
+++ b/packages/app/src/components/inference/types.ts
@@ -317,6 +317,18 @@ export interface InferenceData extends Partial<Omit<AggDataEntry, AggDataConflic
   measuredJPerInputToken?: { y: number; roof: boolean };
 }
 
+/** Why a chart-ready point was intentionally excluded from the visible plot. */
+export type ChartClipReason = 'cost' | 'latency';
+
+/**
+ * A filtered point retained only so the chart can explain that its Pareto
+ * curve continues beyond an intentional display limit.
+ */
+export interface ClippedInferenceData {
+  point: InferenceData;
+  reasons: ChartClipReason[];
+}
+
 /**
  * Keys of InferenceData that have the roofline metric structure ({y, roof}).
  */
@@ -494,6 +506,7 @@ export interface RenderableGraph {
   sequence: string;
   chartDefinition: ChartDefinition;
   data: InferenceData[];
+  clippedData?: ClippedInferenceData[];
 }
 /**
  * Props for the {@link ScatterGraph} component.
@@ -510,6 +523,8 @@ export interface RenderableGraph {
 export interface OverlayData {
   /** The data points to overlay */
   data: InferenceData[];
+  /** Overlay points hidden by the same display limits as official data. */
+  clippedData?: ClippedInferenceData[];
   /** Hardware configuration for the overlay data (may have different hardware types) */
   hardwareConfig: HardwareConfig;
   /** Fallback label — branch of the first loaded run. Used when {@link getRunForRow} is absent
@@ -529,6 +544,7 @@ export interface ScatterGraphProps {
   chartId: string;
   modelLabel: string;
   data: InferenceData[];
+  clippedData?: ClippedInferenceData[];
   xLabel: string;
   yLabel: string;
   chartDefinition: ChartDefinition;
diff --git a/packages/app/src/components/inference/ui/ChartDisplay.tsx b/packages/app/src/components/inference/ui/ChartDisplay.tsx
index 6329df644..3f7543f3b 100644
--- a/packages/app/src/components/inference/ui/ChartDisplay.tsx
+++ b/packages/app/src/components/inference/ui/ChartDisplay.tsx
@@ -14,7 +14,7 @@ import type {
   OverlayData,
   TrendDataPoint,
 } from '@/components/inference/types';
-import { processOverlayChartData } from '@/components/inference/utils';
+import { processOverlayChartDataWithClipping } from '@/components/inference/utils';
 import {
   isRunComparisonEntry,
   makeRunComparisonEntry,
@@ -310,7 +310,7 @@ export default function ChartDisplay() {
 
       const effectiveXMetric = chartType === 'e2e' ? selectedE2eXAxisMetric : selectedXAxisMetric;
       const isAgentic = sequenceKind(selectedSequence) === 'agentic';
-      const processed = processOverlayChartData(
+      const processed = processOverlayChartDataWithClipping(
         rawData.data,
         chartType,
         selectedYAxisMetric,
@@ -324,22 +324,30 @@ export default function ChartDisplay() {
         },
       );
 
-      let overlayPoints = processed;
+      let overlayPoints = processed.data;
+      let clippedOverlayPoints = processed.clippedData;
       if (compareGpuPair?.length === 2) {
-        overlayPoints = processed.filter((p) =>
+        overlayPoints = overlayPoints.filter((p) =>
           hardwareKeyMatchesAnyBase(String(p.hwKey), compareGpuPair),
         );
+        clippedOverlayPoints = clippedOverlayPoints.filter(({ point }) =>
+          hardwareKeyMatchesAnyBase(String(point.hwKey), compareGpuPair),
+        );
       }
 
-      if (overlayPoints.length === 0) return null;
+      if (overlayPoints.length === 0 && clippedOverlayPoints.length === 0) return null;
 
-      const keySet = new Set(overlayPoints.map((p) => String(p.hwKey)));
+      const keySet = new Set([
+        ...overlayPoints.map((p) => String(p.hwKey)),
+        ...clippedOverlayPoints.map(({ point }) => String(point.hwKey)),
+      ]);
       const hardwareConfigFiltered = Object.fromEntries(
         Object.entries(rawData.hardwareConfig).filter(([k]) => keySet.has(k)),
       ) as HardwareConfig;
 
       return {
         data: overlayPoints,
+        clippedData: clippedOverlayPoints,
         hardwareConfig: hardwareConfigFiltered,
         label: unofficialRunInfo.branch,
         runUrl: unofficialRunInfo.url,
@@ -547,6 +555,7 @@ export default function ChartDisplay() {
       sequence: selectedSequence,
       chartDefinition,
       data: [] as InferenceData[],
+      clippedData: [],
     }));
   }, [graphs, overlayDataByChartType, selectedModel, selectedSequence]);
 
@@ -745,6 +754,7 @@ export default function ChartDisplay() {
                           chartId={`chart-${graphIndex}`}
                           modelLabel={graph.model}
                           data={graph.data}
+                          clippedData={graph.clippedData}
                           xLabel={graph.chartDefinition.x_label}
                           yLabel={metricLabel(graph.chartDefinition, selectedYAxisMetric, locale)}
                           chartDefinition={graph.chartDefinition}
diff --git a/packages/app/src/components/inference/ui/ScatterGraph.tsx b/packages/app/src/components/inference/ui/ScatterGraph.tsx
index 39cc8838f..21e1f8964 100644
--- a/packages/app/src/components/inference/ui/ScatterGraph.tsx
+++ b/packages/app/src/components/inference/ui/ScatterGraph.tsx
@@ -2,6 +2,7 @@
 
 import { track } from '@/lib/analytics';
 import * as d3 from 'd3';
+import { ArrowUpRight } from 'lucide-react';
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 
 import { GRADIENT_NUDGE_EVENT } from '@/lib/nudges/registry';
@@ -14,6 +15,7 @@ import {
   labelOpacityForHover,
 } from '@/components/inference/ui/line-label-visibility';
 import ChartLegend from '@/components/ui/chart-legend';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { useUnofficialRun } from '@/components/unofficial-run-provider';
 import { getHardwareConfig, getModelSortIndex } from '@/lib/constants';
 import {
@@ -57,6 +59,7 @@ import { e2eRestrictedSeed } from '@/components/inference/utils/e2eFrontier';
 import { type RooflineDirection, getSpeedOverlayCorners } from '@/lib/speed-overlay';
 import type {
   ChartDefinition,
+  ClippedInferenceData,
   InferenceData,
   ScatterGraphProps,
 } from '@/components/inference/types';
@@ -88,6 +91,10 @@ import {
 } from '@/components/inference/utils/knownIssueAnnotations';
 import { matchesQuickFilters } from '@/components/inference/utils/quickFilters';
 import { changelogConfigToHwKey } from '@/components/inference/utils/changelogFormatters';
+import {
+  buildFrontierContinuations,
+  projectContinuationToBounds,
+} from '@/components/inference/utils/overflowContinuations';
 
 // Greedy label-collision avoidance.
 // Each candidate is the y-position of the FIRST baseline (relative to point
@@ -242,6 +249,7 @@ const pointLabelText = (d: InferenceData, advanced: boolean): string =>
 
 // Referentially stable "no overlay data" result (see processedOverlayData).
 const EMPTY_OVERLAY_DATA: InferenceData[] = [];
+const EMPTY_CLIPPED_DATA: ClippedInferenceData[] = [];
 
 function setsEqual<T>(a: Set<T>, b: Set<T>): boolean {
   if (a.size !== b.size) return false;
@@ -256,6 +264,17 @@ type LegendPointsTarget =
   | { kind: 'official'; hwKey: string }
   | { kind: 'overlay'; runIndex: number; runId: number; branch: string };
 
+interface OverflowContinuationEntry {
+  key: string;
+  source: 'official' | 'overlay';
+  hw: string;
+  precision: string;
+  runIndex?: number;
+  from: InferenceData;
+  toward: InferenceData;
+  reasons: ClippedInferenceData['reasons'];
+}
+
 // Scale configs are recomputed from the visible points on every render, but a
 // legend / precision toggle usually leaves the actual domain untouched (x-min
 // is pinned at 0; extremes are owned by a handful of points). Comparing by
@@ -306,6 +325,8 @@ const lineLabelText = (
   return includePrecision ? `${base} ${getPrecisionLabel(precision as Precision)}` : base;
 };
 
+const pointCountEn = (count: number) => `${count} ${count === 1 ? 'point' : 'points'}`;
+
 const SCATTER_STRINGS = {
   en: {
     logScale: 'Log Scale',
@@ -316,6 +337,17 @@ const SCATTER_STRINGS = {
     gradientLabels: 'Gradient Labels',
     lineLabels: 'Line Labels',
     resetFilter: 'Reset filter',
+    overflowTitle: 'Why the line stops',
+    overflowMixed: (count: number) => `${pointCountEn(count)} outside chart limits`,
+    overflowCost: (count: number, limit: number) => `${pointCountEn(count)} above $${limit}/M`,
+    overflowLatency: (count: number, limit: number) =>
+      `${pointCountEn(count)} beyond ${limit}s TTFT`,
+    overflowCostDetail: (count: number, limit: number) =>
+      `${pointCountEn(count)} above $${limit}/M ${count === 1 ? 'is' : 'are'} hidden.`,
+    overflowLatencyDetail: (count: number, limit: number) =>
+      `${pointCountEn(count)} beyond ${limit}s TTFT ${count === 1 ? 'is' : 'are'} hidden.`,
+    overflowExplanation:
+      'Dashed arrows show where the Pareto line continues beyond the displayed range.',
   },
   zh: {
     logScale: '对数缩放',
@@ -326,6 +358,14 @@ const SCATTER_STRINGS = {
     gradientLabels: '渐变标签',
     lineLabels: '曲线标签',
     resetFilter: '重置筛选',
+    overflowTitle: '曲线为何在此停止',
+    overflowMixed: (count: number) => `${count} 个点超出图表显示范围`,
+    overflowCost: (count: number, limit: number) => `${count} 个点高于 $${limit}/M`,
+    overflowLatency: (count: number, limit: number) => `${count} 个点的 TTFT 超过 ${limit}s`,
+    overflowCostDetail: (count: number, limit: number) => `${count} 个点高于 $${limit}/M，已隐藏。`,
+    overflowLatencyDetail: (count: number, limit: number) =>
+      `${count} 个点的 TTFT 超过 ${limit}s，已隐藏。`,
+    overflowExplanation: '虚线箭头表示 Pareto 曲线仍在图表显示范围外延续。',
   },
 } as const;
 
@@ -334,6 +374,7 @@ const ScatterGraph = React.memo(
     chartId,
     modelLabel,
     data,
+    clippedData = EMPTY_CLIPPED_DATA,
     xLabel,
     yLabel,
     chartDefinition,
@@ -759,6 +800,142 @@ const ScatterGraph = React.memo(
       );
     }, [overlayData, selectedPrecisions, quickFilters, activeOverlayHwTypes]);
 
+    const processedOverlayClippedData = useMemo(() => {
+      if (!overlayData?.clippedData) return EMPTY_CLIPPED_DATA;
+      return overlayData.clippedData.filter(
+        ({ point }) =>
+          selectedPrecisions.includes(point.precision) &&
+          matchesQuickFilters(point, quickFilters) &&
+          activeOverlayHwTypes.has(String(point.hwKey)),
+      );
+    }, [overlayData, selectedPrecisions, quickFilters, activeOverlayHwTypes]);
+
+    const officialOverflowContinuations = useMemo((): OverflowContinuationEntry[] => {
+      interface Bucket {
+        hw: string;
+        precision: string;
+        visible: InferenceData[];
+        clipped: ClippedInferenceData[];
+      }
+      const buckets = new Map<string, Bucket>();
+      const getBucket = (point: InferenceData) => {
+        const key = `${point.hwKey}|${point.precision}|${point.date}`;
+        let bucket = buckets.get(key);
+        if (!bucket) {
+          bucket = {
+            hw: String(point.hwKey),
+            precision: point.precision,
+            visible: [],
+            clipped: [],
+          };
+          buckets.set(key, bucket);
+        }
+        return { key, bucket };
+      };
+      for (const point of data) getBucket(point).bucket.visible.push(point);
+      for (const entry of clippedData) getBucket(entry.point).bucket.clipped.push(entry);
+
+      const rooflineKey = `${selectedYAxisMetric}_roofline` as keyof ChartDefinition;
+      const direction = chartDefinition[rooflineKey] as ParetoDirection | undefined;
+      if (!direction) return [];
+
+      const result: OverflowContinuationEntry[] = [];
+      for (const [bucketKey, bucket] of buckets) {
+        buildFrontierContinuations(bucket.visible, bucket.clipped, direction).forEach(
+          (continuation, index) => {
+            result.push({
+              key: `official-${bucketKey}-${index}`,
+              source: 'official',
+              hw: bucket.hw,
+              precision: bucket.precision,
+              ...continuation,
+            });
+          },
+        );
+      }
+      return result;
+    }, [data, clippedData, selectedYAxisMetric, chartDefinition]);
+
+    const overlayOverflowContinuations = useMemo((): OverflowContinuationEntry[] => {
+      interface Bucket {
+        hw: string;
+        precision: string;
+        runIndex: number;
+        visible: InferenceData[];
+        clipped: ClippedInferenceData[];
+      }
+      const buckets = new Map<string, Bucket>();
+      const getBucket = (point: InferenceData) => {
+        const runIndex = overlayRunIndex(point.run_url ?? null, runIndexByUrl);
+        const key = `${point.hwKey}|${point.precision}|${point.date}|run${runIndex}`;
+        let bucket = buckets.get(key);
+        if (!bucket) {
+          bucket = {
+            hw: String(point.hwKey),
+            precision: point.precision,
+            runIndex,
+            visible: [],
+            clipped: [],
+          };
+          buckets.set(key, bucket);
+        }
+        return { key, bucket };
+      };
+      for (const point of processedOverlayData) getBucket(point).bucket.visible.push(point);
+      for (const entry of processedOverlayClippedData) {
+        getBucket(entry.point).bucket.clipped.push(entry);
+      }
+
+      const rooflineKey = `${selectedYAxisMetric}_roofline` as keyof ChartDefinition;
+      const direction = chartDefinition[rooflineKey] as ParetoDirection | undefined;
+      if (!direction) return [];
+
+      const result: OverflowContinuationEntry[] = [];
+      for (const [bucketKey, bucket] of buckets) {
+        buildFrontierContinuations(bucket.visible, bucket.clipped, direction).forEach(
+          (continuation, index) => {
+            result.push({
+              key: `overlay-${bucketKey}-${index}`,
+              source: 'overlay',
+              hw: bucket.hw,
+              precision: bucket.precision,
+              runIndex: bucket.runIndex,
+              ...continuation,
+            });
+          },
+        );
+      }
+      return result;
+    }, [
+      processedOverlayData,
+      processedOverlayClippedData,
+      selectedYAxisMetric,
+      chartDefinition,
+      runIndexByUrl,
+    ]);
+
+    const activeOfficialClippedData = useMemo(
+      () =>
+        clippedData.filter(
+          ({ point }) =>
+            selectedPrecisions.includes(point.precision) &&
+            effectiveActiveHwTypes.has(String(point.hwKey)),
+        ),
+      [clippedData, selectedPrecisions, effectiveActiveHwTypes],
+    );
+    const activeClippedData = useMemo(
+      () => [...activeOfficialClippedData, ...processedOverlayClippedData],
+      [activeOfficialClippedData, processedOverlayClippedData],
+    );
+    const overflowCounts = useMemo(
+      () => ({
+        total: activeClippedData.length,
+        cost: activeClippedData.filter(({ reasons }) => reasons.includes('cost')).length,
+        latency: activeClippedData.filter(({ reasons }) => reasons.includes('latency')).length,
+      }),
+      [activeClippedData],
+    );
+
     // Warning annotations for visible series (official + unofficial overlay)
     // with known upstream issues. Drawn as an SVG layer (box + arrow to the
     // affected line) so PNG exports carry the warning.
@@ -1062,7 +1239,7 @@ const ScatterGraph = React.memo(
 
     // --- Legend hover highlight ---
     const isRooflineVisible = useCallback(
-      (el: SVGPathElement) => {
+      (el: SVGElement) => {
         const hw = el.dataset.hwKey;
         const prec = el.dataset.precision;
         if (hw === null || hw === undefined || prec === null || prec === undefined) return false;
@@ -1123,10 +1300,12 @@ const ScatterGraph = React.memo(
           .style('opacity', (d) =>
             isPointVisible(d) ? (String(d.hwKey) === hwKey ? 1 : 0.15) : 0,
           );
-        root.selectAll<SVGPathElement, unknown>('.roofline-path').style('opacity', function () {
-          if (!isRooflineVisible(this)) return 0;
-          return this.dataset.hwKey === hwKey ? null : '0.15';
-        });
+        root
+          .selectAll<SVGElement, unknown>('.roofline-path, .official-overflow-continuation')
+          .style('opacity', function () {
+            if (!isRooflineVisible(this)) return 0;
+            return this.dataset.hwKey === hwKey ? null : '0.15';
+          });
         root
           .selectAll<SVGGElement, unknown>('.parallelism-label, .line-label')
           .style('opacity', function () {
@@ -1143,9 +1322,11 @@ const ScatterGraph = React.memo(
       root
         .selectAll<SVGGElement, InferenceData>('.dot-group')
         .style('opacity', (d) => (isPointVisible(d) ? 1 : 0));
-      root.selectAll<SVGPathElement, unknown>('.roofline-path').style('opacity', function () {
-        return isRooflineVisible(this) ? 1 : 0;
-      });
+      root
+        .selectAll<SVGElement, unknown>('.roofline-path, .official-overflow-continuation')
+        .style('opacity', function () {
+          return isRooflineVisible(this) ? 1 : 0;
+        });
       root
         .selectAll<SVGGElement, unknown>('.parallelism-label, .line-label')
         .style('opacity', function () {
@@ -2429,6 +2610,102 @@ const ScatterGraph = React.memo(
         },
       };
 
+      // ── Intentional clipping: dashed Pareto continuation + boundary arrow ──
+      const drawOverflowContinuations = (
+        zoomGroup: d3.Selection<SVGGElement, unknown, null, undefined>,
+        ctx: RenderContext,
+        xScale: ContinuousScale,
+        yScale: ContinuousScale,
+      ) => {
+        const ir = interactionRef.current;
+        const entries = [...officialOverflowContinuations, ...overlayOverflowContinuations]
+          .map((entry) => {
+            const geometry = projectContinuationToBounds(
+              entry,
+              xScale,
+              yScale,
+              ctx.width,
+              ctx.height,
+            );
+            return geometry ? { ...entry, geometry } : null;
+          })
+          .filter((entry): entry is NonNullable<typeof entry> => entry !== null);
+
+        const layer = zoomGroup
+          .selectAll<SVGGElement, unknown>('.overflow-continuations-layer')
+          .data([null])
+          .join('g')
+          .attr('class', 'overflow-continuations-layer')
+          .attr('pointer-events', 'none');
+
+        const groups = layer
+          .selectAll<SVGGElement, (typeof entries)[number]>('.overflow-continuation')
+          .data(entries, (entry) => entry.key)
+          .join((enter) => {
+            const group = enter.append('g');
+            group.append('line').attr('class', 'overflow-continuation-line');
+            group
+              .append('path')
+              .attr('class', 'overflow-continuation-arrow')
+              .attr('d', 'M 0 0 L -9 -4.5 L -9 4.5 Z');
+            return group;
+          })
+          .attr('class', (entry) => `overflow-continuation ${entry.source}-overflow-continuation`)
+          .attr('data-testid', (entry) => `${entry.source}-overflow-continuation`)
+          .attr('data-hw-key', (entry) => entry.hw)
+          .attr('data-precision', (entry) => entry.precision)
+          .attr('data-clip-reasons', (entry) => entry.reasons.join(','))
+          .style('transition', 'opacity 150ms ease')
+          .style('opacity', (entry) =>
+            entry.source === 'overlay' ||
+            (ir.effectiveActiveHwTypes.has(entry.hw) &&
+              ir.selectedPrecisions.includes(entry.precision))
+              ? 1
+              : 0,
+          );
+
+        groups.each(function (entry) {
+          const color =
+            entry.source === 'overlay'
+              ? overlayRunColor(entry.runIndex ?? 0)
+              : ir.getCssColor(ir.resolveColor(entry.hw));
+          const { geometry } = entry;
+          const group = d3.select(this);
+          group
+            .select<SVGLineElement>('.overflow-continuation-line')
+            .attr('x1', geometry.x1)
+            .attr('y1', geometry.y1)
+            .attr('x2', geometry.x2)
+            .attr('y2', geometry.y2)
+            .attr('stroke', color)
+            .attr('stroke-width', 2.25)
+            .attr('stroke-dasharray', '6 5')
+            .attr('stroke-linecap', 'round');
+          group
+            .select<SVGPathElement>('.overflow-continuation-arrow')
+            .attr('transform', `translate(${geometry.x2},${geometry.y2}) rotate(${geometry.angle})`)
+            .attr('fill', color);
+        });
+      };
+      const overflowContinuationLayer: CustomLayerConfig = {
+        type: 'custom',
+        key: 'overflow-continuations',
+        render: (zoomGroup, ctx) =>
+          drawOverflowContinuations(
+            zoomGroup,
+            ctx,
+            ctx.xScale as ContinuousScale,
+            ctx.yScale as ContinuousScale,
+          ),
+        onZoom: (zoomGroup, ctx) =>
+          drawOverflowContinuations(
+            zoomGroup,
+            ctx,
+            ctx.newXScale as ContinuousScale,
+            ctx.newYScale as ContinuousScale,
+          ),
+      };
+
       // ── Known-issue annotations: warning box + arrow to the affected line ──
       const drawKnownIssues = (
         ctx: RenderContext,
@@ -2478,7 +2755,7 @@ const ScatterGraph = React.memo(
 
       const result: LayerConfig<InferenceData>[] = [rooflineLayer, scatterLayer];
       if (overlayLayer) result.push(overlayLayer);
-      result.push(speedOverlayLayer, knownIssueLayer);
+      result.push(overflowContinuationLayer, speedOverlayLayer, knownIssueLayer);
       return result;
       // Interaction state (visibility, colors, precision shapes, known-issue
       // annotations) is deliberately NOT a dependency: layer closures read it
@@ -2502,6 +2779,8 @@ const ScatterGraph = React.memo(
       overlayData,
       processedOverlayData,
       overlayRooflines,
+      officialOverflowContinuations,
+      overlayOverflowContinuations,
       unofficialRunInfos,
       runIndexByUrl,
       hardwareConfig,
@@ -2695,6 +2974,22 @@ const ScatterGraph = React.memo(
         }
       });
 
+      zoomGroup
+        .selectAll<SVGGElement, unknown>('.official-overflow-continuation')
+        .each(function () {
+          const hw = this.dataset.hwKey;
+          const precision = this.dataset.precision;
+          if (!hw || !precision) return;
+          const visible =
+            ir.effectiveActiveHwTypes.has(hw) && ir.selectedPrecisions.includes(precision);
+          const color = ir.getCssColor(ir.resolveColor(hw));
+          d3.select(this)
+            .style('opacity', visible ? 1 : 0)
+            .select('.overflow-continuation-line')
+            .attr('stroke', color);
+          d3.select(this).select('.overflow-continuation-arrow').attr('fill', color);
+        });
+
       // Parallelism / line labels: visibility via data attributes (mirrors
       // handleLegendHoverEnd). Placement-level updates happen below.
       zoomGroup
@@ -2761,7 +3056,9 @@ const ScatterGraph = React.memo(
       if (overlayData) return;
       const svg = chartRef.current?.getSvgElement?.();
       if (!svg) return;
-      d3.select(svg).selectAll('.unofficial-overlay-pt, .overlay-roofline-path').remove();
+      d3.select(svg)
+        .selectAll('.unofficial-overlay-pt, .overlay-roofline-path, .overlay-overflow-continuation')
+        .remove();
     }, [overlayData]);
 
     // Dismiss tooltip on filter changes
@@ -2784,6 +3081,15 @@ const ScatterGraph = React.memo(
       }
     }, [effectiveActiveHwTypes, selectedPrecisions, activeOverlayHwTypes]);
 
+    const costLimit = chartDefinition.y_cost_limit ?? 0;
+    const latencyLimit = chartDefinition.y_latency_limit ?? 0;
+    const overflowSummary =
+      overflowCounts.cost > 0 && overflowCounts.latency > 0
+        ? legendT.overflowMixed(overflowCounts.total)
+        : overflowCounts.cost > 0
+          ? legendT.overflowCost(overflowCounts.cost, costLimit)
+          : legendT.overflowLatency(overflowCounts.latency, latencyLimit);
+
     // --- Empty state ---
     if (data.length === 0 && !overlayData?.data?.length) {
       return (
@@ -2852,6 +3158,50 @@ const ScatterGraph = React.memo(
               </div>
             ) : undefined
           }
+          plotOverlay={
+            overflowCounts.total > 0 ? (
+              <div className="no-export absolute right-3 top-7 z-20">
+                <Popover
+                  onOpenChange={(open) => {
+                    if (!open) return;
+                    track('inference_clipped_points_notice_opened', {
+                      chartType: chartDefinition.chartType,
+                      costPoints: overflowCounts.cost,
+                      latencyPoints: overflowCounts.latency,
+                    });
+                  }}
+                >
+                  <PopoverTrigger asChild>
+                    <button
+                      type="button"
+                      data-testid="chart-overflow-notice"
+                      className="bg-background/95 text-amber-700 dark:text-amber-300 border-amber-500/40 hover:bg-amber-50 dark:hover:bg-amber-950/40 flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium shadow-sm backdrop-blur"
+                      aria-label={`${legendT.overflowTitle}: ${overflowSummary}`}
+                    >
+                      <ArrowUpRight className="size-3.5" aria-hidden="true" />
+                      {overflowSummary}
+                    </button>
+                  </PopoverTrigger>
+                  <PopoverContent
+                    align="end"
+                    className="w-72 text-sm"
+                    data-testid="chart-overflow-popover"
+                  >
+                    <p className="font-semibold">{legendT.overflowTitle}</p>
+                    <div className="text-muted-foreground mt-2 space-y-1">
+                      {overflowCounts.cost > 0 && (
+                        <p>{legendT.overflowCostDetail(overflowCounts.cost, costLimit)}</p>
+                      )}
+                      {overflowCounts.latency > 0 && (
+                        <p>{legendT.overflowLatencyDetail(overflowCounts.latency, latencyLimit)}</p>
+                      )}
+                      <p>{legendT.overflowExplanation}</p>
+                    </div>
+                  </PopoverContent>
+                </Popover>
+              </div>
+            ) : undefined
+          }
           legendElement={
             <ChartLegend
               variant="sidebar"
diff --git a/packages/app/src/components/inference/utils.test.ts b/packages/app/src/components/inference/utils.test.ts
index 8345f5239..e171a4971 100644
--- a/packages/app/src/components/inference/utils.test.ts
+++ b/packages/app/src/components/inference/utils.test.ts
@@ -1,7 +1,12 @@
 import { describe, it, expect } from 'vitest';
 
 import type { ChartDefinition, InferenceData } from '@/components/inference/types';
-import { filterDataByCostLimit, processOverlayChartData } from '@/components/inference/utils';
+import {
+  filterDataByCostLimit,
+  partitionChartDataByLimits,
+  processOverlayChartData,
+  processOverlayChartDataWithClipping,
+} from '@/components/inference/utils';
 
 // ---------------------------------------------------------------------------
 // fixture factories
@@ -130,6 +135,42 @@ describe('filterDataByCostLimit', () => {
   });
 });
 
+describe('partitionChartDataByLimits', () => {
+  it('retains cost and TTFT outliers with explicit reasons while preserving boundary points', () => {
+    const costOutlier = pt({ x: 10, y: 6 });
+    const ttftOutlier = pt({ x: 61, y: 1 });
+    const both = pt({ x: 70, y: 7 });
+    const boundary = pt({ x: 60, y: 5 });
+
+    const result = partitionChartDataByLimits(
+      [costOutlier, ttftOutlier, both, boundary],
+      chartDef({ y_cost_limit: 5, y_latency_limit: 60 }),
+      'y_costh',
+      { isTtftX: true, isAgentic: false },
+    );
+
+    expect(result.data).toEqual([boundary]);
+    expect(result.clippedData).toEqual([
+      { point: costOutlier, reasons: ['cost'] },
+      { point: ttftOutlier, reasons: ['latency'] },
+      { point: both, reasons: ['cost', 'latency'] },
+    ]);
+  });
+
+  it('does not apply fixed-sequence TTFT clipping to agentic points', () => {
+    const point = pt({ x: 500, y: 1 });
+    const result = partitionChartDataByLimits(
+      [point],
+      chartDef({ y_latency_limit: 60 }),
+      'y_tpPerGpu',
+      { isTtftX: true, isAgentic: true },
+    );
+
+    expect(result.data).toEqual([point]);
+    expect(result.clippedData).toEqual([]);
+  });
+});
+
 // ===========================================================================
 // processOverlayChartData
 // ===========================================================================
@@ -261,6 +302,34 @@ describe('processOverlayChartData', () => {
     expect(result[0].y).toBe(0.5);
   });
 
+  it('retains clipped unofficial-run points for the overflow continuation path', () => {
+    const visible = pt({
+      costh: { y: 0.5, roof: false },
+      median_intvty: 10,
+      run_url: 'https://github.com/SemiAnalysisAI/InferenceX/actions/runs/123',
+    } as any);
+    const clipped = pt({
+      costh: { y: 100, roof: false },
+      median_intvty: 20,
+      run_url: 'https://github.com/SemiAnalysisAI/InferenceX/actions/runs/123',
+    } as any);
+
+    const result = processOverlayChartDataWithClipping(
+      [visible, clipped],
+      'interactivity',
+      'y_costh',
+      null,
+    );
+
+    expect(result.data).toHaveLength(1);
+    expect(result.clippedData).toEqual([
+      {
+        point: expect.objectContaining({ x: 20, y: 100, run_url: clipped.run_url }),
+        reasons: ['cost'],
+      },
+    ]);
+  });
+
   // Regression: overlay points must sit on the SAME x column as the official run.
   // useChartData plots agentic interactivity at withPercentile('median_intvty',
   // selectedPercentile) (e.g. p90_intvty). The overlay previously ignored the
diff --git a/packages/app/src/components/inference/utils.ts b/packages/app/src/components/inference/utils.ts
index e88e5b0da..46f65adae 100644
--- a/packages/app/src/components/inference/utils.ts
+++ b/packages/app/src/components/inference/utils.ts
@@ -8,7 +8,12 @@ import chartDefinitions from '@/components/inference/inference-chart-config.json
 import { e2eFrontierWinners } from '@/components/inference/utils/e2eFrontier';
 import { resolveXAxisField } from '@/components/inference/utils/resolveXAxisField';
 
-import type { ChartDefinition, InferenceData, YAxisMetricKey } from './types';
+import type { ChartDefinition, ClippedInferenceData, InferenceData, YAxisMetricKey } from './types';
+
+export interface ProcessedChartData {
+  data: InferenceData[];
+  clippedData: ClippedInferenceData[];
+}
 
 /**
  * Filters data points based on cost limits defined in the chart definition.
@@ -66,6 +71,41 @@ export const filterDataByCostLimit = (
   });
 };
 
+/**
+ * Partition already-remapped chart points without discarding the outliers.
+ * The visible array preserves the existing chart behavior; clippedData gives
+ * ScatterGraph enough context to draw and explain a boundary continuation.
+ */
+export function partitionChartDataByLimits(
+  data: InferenceData[],
+  chartDefinition: ChartDefinition,
+  selectedYAxisMetric: string,
+  options: { isTtftX: boolean; isAgentic: boolean },
+): ProcessedChartData {
+  const costLimitApplies =
+    selectedYAxisMetric.includes('cost') &&
+    selectedYAxisMetric !== 'y_costUser' &&
+    chartDefinition.y_cost_limit !== undefined;
+  const latencyLimitApplies =
+    options.isTtftX && !options.isAgentic && chartDefinition.y_latency_limit !== undefined;
+
+  const visible: InferenceData[] = [];
+  const clippedData: ClippedInferenceData[] = [];
+
+  for (const point of data) {
+    const reasons: ClippedInferenceData['reasons'] = [];
+    if (costLimitApplies && point.y > chartDefinition.y_cost_limit!) reasons.push('cost');
+    if (latencyLimitApplies && point.x > chartDefinition.y_latency_limit!) {
+      reasons.push('latency');
+    }
+
+    if (reasons.length > 0) clippedData.push({ point, reasons });
+    else visible.push(point);
+  }
+
+  return { data: visible, clippedData };
+}
+
 /**
  * Process overlay (unofficial run) data to match the same pipeline as official data.
  *
@@ -90,8 +130,32 @@ export function processOverlayChartData(
     restrictToE2eFrontier?: boolean;
   },
 ): InferenceData[] {
+  return processOverlayChartDataWithClipping(
+    data,
+    chartType,
+    selectedYAxisMetric,
+    selectedXAxisMetric,
+    options,
+  ).data;
+}
+
+/**
+ * Overlay processor variant that retains intentionally clipped points for the
+ * dashed boundary-continuation layer.
+ */
+export function processOverlayChartDataWithClipping(
+  data: InferenceData[],
+  chartType: 'e2e' | 'interactivity',
+  selectedYAxisMetric: string,
+  selectedXAxisMetric: string | null,
+  options?: {
+    isAgentic?: boolean;
+    selectedPercentile?: string;
+    restrictToE2eFrontier?: boolean;
+  },
+): ProcessedChartData {
   const chartDef = (chartDefinitions as ChartDefinition[]).find((d) => d.chartType === chartType);
-  if (!chartDef) return [];
+  if (!chartDef) return { data: [], clippedData: [] };
 
   const metricKey = selectedYAxisMetric.replace('y_', '') as YAxisMetricKey;
   const isAgentic = options?.isAgentic === true;
@@ -114,12 +178,7 @@ export function processOverlayChartData(
       const yValue = (d[metricKey] as { y: number })?.y ?? d.y;
       const xValue = (d as any)[xAxisField] ?? d.x;
       return { ...d, x: xValue, y: yValue };
-    })
-    .filter(
-      (d) => !isTtftX || isAgentic || !chartDef.y_latency_limit || d.x <= chartDef.y_latency_limit,
-    );
-
-  const costFiltered = filterDataByCostLimit(processedData, chartDef, selectedYAxisMetric);
+    });
 
   // Anti-benchmark-hacking parity: on agentic charts whose x-axis is NOT the
   // natural e2e latency, the official roofline is restricted to configs that
@@ -132,7 +191,7 @@ export function processOverlayChartData(
   // path, which draws those rooflines unrestricted).
   if (options?.restrictToE2eFrontier) {
     const byRun = new Map<string, InferenceData[]>();
-    for (const p of costFiltered) {
+    for (const p of processedData) {
       const runKey = p.run_url ?? '';
       let bucket = byRun.get(runKey);
       if (!bucket) {
@@ -149,5 +208,8 @@ export function processOverlayChartData(
     }
   }
 
-  return costFiltered;
+  return partitionChartDataByLimits(processedData, chartDef, selectedYAxisMetric, {
+    isTtftX,
+    isAgentic,
+  });
 }
diff --git a/packages/app/src/components/inference/utils/overflowContinuations.test.ts b/packages/app/src/components/inference/utils/overflowContinuations.test.ts
new file mode 100644
index 000000000..0f0b80617
--- /dev/null
+++ b/packages/app/src/components/inference/utils/overflowContinuations.test.ts
@@ -0,0 +1,87 @@
+import { describe, expect, it } from 'vitest';
+
+import type { ClippedInferenceData, InferenceData } from '../types';
+import { buildFrontierContinuations, projectContinuationToBounds } from './overflowContinuations';
+
+const point = (x: number, y: number): InferenceData =>
+  ({
+    x,
+    y,
+    hwKey: 'b200_dynamo-vllm',
+    precision: 'fp4',
+    date: '2026-07-30',
+    tp: 8,
+    conc: x,
+    tpPerGpu: { y, roof: false },
+    tpPerMw: { y, roof: false },
+    costh: { y, roof: false },
+    costn: { y, roof: false },
+    costr: { y, roof: false },
+    costhi: { y, roof: false },
+    costni: { y, roof: false },
+    costri: { y, roof: false },
+  }) as InferenceData;
+
+const identity = (value: number) => value;
+
+describe('buildFrontierContinuations', () => {
+  it('returns both crossings when one visible point sits between two clipped frontier regions', () => {
+    const costClipped = point(5, 8);
+    const visible = point(40, 1);
+    const latencyClipped = point(90, 0.5);
+    const clipped: ClippedInferenceData[] = [
+      { point: costClipped, reasons: ['cost'] },
+      { point: latencyClipped, reasons: ['latency'] },
+    ];
+
+    const result = buildFrontierContinuations([visible], clipped, 'lower_left');
+
+    expect(result).toHaveLength(2);
+    expect(result.map((entry) => entry.toward)).toEqual([costClipped, latencyClipped]);
+    expect(result.map((entry) => entry.reasons)).toEqual([['cost'], ['latency']]);
+  });
+
+  it('does not imply a continuation to a clipped point that is not on the full frontier', () => {
+    const visibleA = point(10, 5);
+    const visibleB = point(20, 4);
+    const dominatedClipped = point(30, 6);
+
+    const result = buildFrontierContinuations(
+      [visibleA, visibleB],
+      [{ point: dominatedClipped, reasons: ['latency'] }],
+      'lower_left',
+    );
+
+    expect(result).toEqual([]);
+  });
+});
+
+describe('projectContinuationToBounds', () => {
+  it('ends a rightward ray just inside the plot boundary', () => {
+    const result = projectContinuationToBounds(
+      { from: point(40, 50), toward: point(140, 60) },
+      identity,
+      identity,
+      100,
+      100,
+      5,
+    );
+
+    expect(result).not.toBeNull();
+    expect(result!.x2).toBeCloseTo(95.02, 1);
+    expect(result!.y2).toBeCloseTo(55.5, 1);
+    expect(result!.angle).toBeCloseTo(5.71, 1);
+  });
+
+  it('returns null when the visible anchor has been panned outside the viewport', () => {
+    const result = projectContinuationToBounds(
+      { from: point(-1, 50), toward: point(20, 50) },
+      identity,
+      identity,
+      100,
+      100,
+    );
+
+    expect(result).toBeNull();
+  });
+});
diff --git a/packages/app/src/components/inference/utils/overflowContinuations.ts b/packages/app/src/components/inference/utils/overflowContinuations.ts
new file mode 100644
index 000000000..85f0b2af1
--- /dev/null
+++ b/packages/app/src/components/inference/utils/overflowContinuations.ts
@@ -0,0 +1,101 @@
+import { paretoFrontForDirection, type ParetoDirection } from '@/lib/chart-utils';
+
+import type { ClippedInferenceData, InferenceData } from '../types';
+import { e2eRestrictedSeed } from './e2eFrontier';
+
+export interface FrontierContinuation {
+  from: InferenceData;
+  toward: InferenceData;
+  reasons: ClippedInferenceData['reasons'];
+}
+
+export interface ProjectedContinuation {
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+  angle: number;
+}
+
+/**
+ * Find transitions where a complete Pareto frontier crosses from a visible
+ * point into an intentionally clipped point. A single visible point can yield
+ * two continuations when hidden frontier points exist on both sides.
+ */
+export function buildFrontierContinuations(
+  visible: InferenceData[],
+  clipped: ClippedInferenceData[],
+  direction: ParetoDirection,
+): FrontierContinuation[] {
+  if (visible.length === 0 || clipped.length === 0) return [];
+
+  const visibleSet = new Set(visible);
+  const clippedByPoint = new Map(clipped.map((entry) => [entry.point, entry]));
+  const allPoints = [...visible, ...clipped.map((entry) => entry.point)];
+  const frontier = paretoFrontForDirection(direction)(e2eRestrictedSeed(allPoints)).toSorted(
+    (a, b) => a.x - b.x,
+  );
+  const result: FrontierContinuation[] = [];
+
+  for (let index = 0; index < frontier.length - 1; index++) {
+    const left = frontier[index];
+    const right = frontier[index + 1];
+    const leftVisible = visibleSet.has(left);
+    const rightVisible = visibleSet.has(right);
+    if (leftVisible === rightVisible) continue;
+
+    const from = leftVisible ? left : right;
+    const toward = leftVisible ? right : left;
+    const clippedEntry = clippedByPoint.get(toward);
+    if (!clippedEntry) continue;
+    result.push({ from, toward, reasons: clippedEntry.reasons });
+  }
+
+  return result;
+}
+
+/**
+ * Project a data-space continuation ray to the plot boundary. The endpoint is
+ * inset slightly so the arrowhead remains inside the chart clip path.
+ */
+export function projectContinuationToBounds(
+  continuation: Pick<FrontierContinuation, 'from' | 'toward'>,
+  xScale: (value: number) => number,
+  yScale: (value: number) => number,
+  width: number,
+  height: number,
+  inset = 7,
+): ProjectedContinuation | null {
+  const x1 = xScale(continuation.from.x);
+  const y1 = yScale(continuation.from.y);
+  const targetX = xScale(continuation.toward.x);
+  const targetY = yScale(continuation.toward.y);
+  if (![x1, y1, targetX, targetY].every(Number.isFinite)) return null;
+  if (x1 < 0 || x1 > width || y1 < 0 || y1 > height) return null;
+
+  const dx = targetX - x1;
+  const dy = targetY - y1;
+  const length = Math.hypot(dx, dy);
+  if (length === 0) return null;
+
+  const candidates: number[] = [];
+  if (dx > 0) candidates.push((width - x1) / dx);
+  else if (dx < 0) candidates.push((0 - x1) / dx);
+  if (dy > 0) candidates.push((height - y1) / dy);
+  else if (dy < 0) candidates.push((0 - y1) / dy);
+  const boundaryT = Math.min(...candidates.filter((value) => value > 0));
+  if (!Number.isFinite(boundaryT)) return null;
+
+  const boundaryX = x1 + dx * boundaryT;
+  const boundaryY = y1 + dy * boundaryT;
+  const unitX = dx / length;
+  const unitY = dy / length;
+
+  return {
+    x1,
+    y1,
+    x2: boundaryX - unitX * inset,
+    y2: boundaryY - unitY * inset,
+    angle: (Math.atan2(dy, dx) * 180) / Math.PI,
+  };
+}
diff --git a/packages/app/src/components/ui/d3-chart-wrapper.tsx b/packages/app/src/components/ui/d3-chart-wrapper.tsx
index 44013b1bf..580b85d15 100644
--- a/packages/app/src/components/ui/d3-chart-wrapper.tsx
+++ b/packages/app/src/components/ui/d3-chart-wrapper.tsx
@@ -52,6 +52,7 @@ export interface D3ChartWrapperProps {
   ) => void;
   legendElement: React.ReactNode;
   noDataOverlay?: React.ReactNode;
+  plotOverlay?: React.ReactNode;
   caption?: React.ReactNode;
   instructions?: string;
   testId?: string;
@@ -70,6 +71,7 @@ export function D3ChartWrapper({
   hideTooltipElements,
   legendElement,
   noDataOverlay,
+  plotOverlay,
   caption,
   instructions = 'Shift+Scroll to zoom • Drag to pan • Double-click to reset • Click a point to pin tooltip',
   testId,
@@ -113,6 +115,7 @@ export function D3ChartWrapper({
                 computeTooltipPosition. */}
             <PortalTooltip tooltipRef={tooltipRef} pinned={Boolean(pinnedPoint)} />
             {noDataOverlay}
+            {plotOverlay}
           </div>
           <p className="no-export text-xs text-muted-foreground text-center mt-2">{instructions}</p>
           <div className="overflow-hidden max-h-0">
diff --git a/packages/app/src/lib/d3-chart/D3Chart/D3Chart.tsx b/packages/app/src/lib/d3-chart/D3Chart/D3Chart.tsx
index 2a18b9cdc..1eb65be19 100644
--- a/packages/app/src/lib/d3-chart/D3Chart/D3Chart.tsx
+++ b/packages/app/src/lib/d3-chart/D3Chart/D3Chart.tsx
@@ -35,6 +35,7 @@ function D3ChartInner<T>(
     transitionDuration,
     legendElement,
     noDataOverlay,
+    plotOverlay,
     caption,
     onRender,
   }: D3ChartProps<T>,
@@ -149,6 +150,7 @@ function D3ChartInner<T>(
       grabCursor={grabCursor}
       legendElement={legendElement}
       noDataOverlay={noDataOverlay}
+      plotOverlay={plotOverlay}
       caption={caption}
     />
   );
diff --git a/packages/app/src/lib/d3-chart/D3Chart/types.ts b/packages/app/src/lib/d3-chart/D3Chart/types.ts
index 9aff5161b..a9448ad12 100644
--- a/packages/app/src/lib/d3-chart/D3Chart/types.ts
+++ b/packages/app/src/lib/d3-chart/D3Chart/types.ts
@@ -269,6 +269,8 @@ export interface D3ChartProps<T = any> {
   transitionDuration?: number;
   legendElement?: React.ReactNode;
   noDataOverlay?: React.ReactNode;
+  /** React content positioned over the plot SVG (for notices and controls). */
+  plotOverlay?: React.ReactNode;
   caption?: React.ReactNode;
 
   /** Called after all layers render. Useful for one-off DOM manipulations. */

From a679c6d0d88e0bb4934daf18111712032ebc3b1e Mon Sep 17 00:00:00 2001
From: Oseltamivir <58582368+Oseltamivir@users.noreply.github.com>
Date: Fri, 31 Jul 2026 10:52:29 +0800
Subject: [PATCH 2/6] fix: keep overflow arrows compact
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Preserve the existing chart domain and cap clipped Pareto continuations at 96 pixels.
Move clipped-point counts from the corner popover onto each series arrow.
Count all hidden points covered by the displayed cost or TTFT limit.

中文：保留现有图表坐标范围，将截断的 Pareto 延伸线限制为 96 像素，并把隐藏点数量和成本或 TTFT 上限直接标注在各曲线箭头旁。
---
 .../e2e/chart-overflow-continuation.cy.ts     |  45 +++---
 .../components/inference/ui/ScatterGraph.tsx  | 131 +++++-------------
 .../utils/overflowContinuations.test.ts       |  41 ++++++
 .../inference/utils/overflowContinuations.ts  |  41 ++++--
 .../src/components/ui/d3-chart-wrapper.tsx    |   3 -
 .../app/src/lib/d3-chart/D3Chart/D3Chart.tsx  |   2 -
 .../app/src/lib/d3-chart/D3Chart/types.ts     |   2 -
 7 files changed, 135 insertions(+), 130 deletions(-)

diff --git a/packages/app/cypress/e2e/chart-overflow-continuation.cy.ts b/packages/app/cypress/e2e/chart-overflow-continuation.cy.ts
index 63f43e423..a4ef5f293 100644
--- a/packages/app/cypress/e2e/chart-overflow-continuation.cy.ts
+++ b/packages/app/cypress/e2e/chart-overflow-continuation.cy.ts
@@ -116,46 +116,55 @@ const visitOverflowChart = (withOverlay: boolean) => {
   );
   cy.wait('@benchmarks');
   if (withOverlay) cy.wait('@unofficialRun');
-  cy.get('[data-testid="chart-overflow-notice"]').should('be.visible');
+  cy.get('[data-testid="scatter-graph"]').should('be.visible');
 };
 
 describe('Chart overflow continuations', () => {
-  it('draws official dashed arrows and explains both active display limits', () => {
+  it('keeps the original domain and draws compact labeled arrows toward clipped points', () => {
     visitOverflowChart(false);
 
+    cy.get('.x-axis .tick text').then(($ticks) => {
+      const values = [...$ticks].map((tick) => Number(tick.textContent));
+      expect(Math.max(...values)).to.eq(40);
+    });
+
     cy.get('[data-testid="official-overflow-continuation"]')
       .should('have.length', 2)
       .each(($continuation) => {
         cy.wrap($continuation)
           .find('.overflow-continuation-line')
-          .should('have.attr', 'stroke-dasharray');
+          .then(($line) => {
+            expect($line).to.have.attr('stroke-dasharray');
+            const x1 = Number($line.attr('x1'));
+            const y1 = Number($line.attr('y1'));
+            const x2 = Number($line.attr('x2'));
+            const y2 = Number($line.attr('y2'));
+            expect(Math.hypot(x2 - x1, y2 - y1)).to.be.at.most(96.01);
+          });
         cy.wrap($continuation).find('.overflow-continuation-arrow').should('exist');
+        cy.wrap($continuation)
+          .find('[data-testid="overflow-continuation-label"]')
+          .should('be.visible');
       });
 
-    cy.get('[data-testid="chart-overflow-notice"]')
-      .should('contain.text', '2 points outside chart limits')
-      .click();
-    cy.get('[data-testid="chart-overflow-popover"]')
-      .should('contain.text', '1 point above $5/M is hidden.')
-      .and('contain.text', '1 point beyond 60s TTFT is hidden.')
-      .and('contain.text', 'Dashed arrows show where the Pareto line continues');
+    cy.get('[data-testid="overflow-continuation-label"]')
+      .should('have.length', 2)
+      .then(($labels) => {
+        const labels = [...$labels].map((label) => label.textContent);
+        expect(labels).to.have.members(['1 point > $5/M', '1 point > 60s TTFT']);
+      });
+    cy.get('[data-testid="chart-overflow-notice"]').should('not.exist');
   });
 
   it('draws overlay continuations and removes them when that run is dismissed', () => {
     visitOverflowChart(true);
 
     cy.get('[data-testid="overlay-overflow-continuation"]').should('have.length', 2);
-    cy.get('[data-testid="chart-overflow-notice"]').should(
-      'contain.text',
-      '4 points outside chart limits',
-    );
+    cy.get('[data-testid="overflow-continuation-label"]').should('have.length', 4);
 
     cy.get(`[aria-label="Dismiss ${OVERLAY_BRANCH}"]`).click();
     cy.get('[data-testid="overlay-overflow-continuation"]').should('not.exist');
     cy.get('[data-testid="official-overflow-continuation"]').should('have.length', 2);
-    cy.get('[data-testid="chart-overflow-notice"]').should(
-      'contain.text',
-      '2 points outside chart limits',
-    );
+    cy.get('[data-testid="overflow-continuation-label"]').should('have.length', 2);
   });
 });
diff --git a/packages/app/src/components/inference/ui/ScatterGraph.tsx b/packages/app/src/components/inference/ui/ScatterGraph.tsx
index 21e1f8964..3aa3f6e2c 100644
--- a/packages/app/src/components/inference/ui/ScatterGraph.tsx
+++ b/packages/app/src/components/inference/ui/ScatterGraph.tsx
@@ -2,7 +2,6 @@
 
 import { track } from '@/lib/analytics';
 import * as d3 from 'd3';
-import { ArrowUpRight } from 'lucide-react';
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 
 import { GRADIENT_NUDGE_EVENT } from '@/lib/nudges/registry';
@@ -15,7 +14,6 @@ import {
   labelOpacityForHover,
 } from '@/components/inference/ui/line-label-visibility';
 import ChartLegend from '@/components/ui/chart-legend';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { useUnofficialRun } from '@/components/unofficial-run-provider';
 import { getHardwareConfig, getModelSortIndex } from '@/lib/constants';
 import {
@@ -273,6 +271,7 @@ interface OverflowContinuationEntry {
   from: InferenceData;
   toward: InferenceData;
   reasons: ClippedInferenceData['reasons'];
+  hiddenPointCount: number;
 }
 
 // Scale configs are recomputed from the visible points on every render, but a
@@ -337,17 +336,9 @@ const SCATTER_STRINGS = {
     gradientLabels: 'Gradient Labels',
     lineLabels: 'Line Labels',
     resetFilter: 'Reset filter',
-    overflowTitle: 'Why the line stops',
-    overflowMixed: (count: number) => `${pointCountEn(count)} outside chart limits`,
-    overflowCost: (count: number, limit: number) => `${pointCountEn(count)} above $${limit}/M`,
-    overflowLatency: (count: number, limit: number) =>
-      `${pointCountEn(count)} beyond ${limit}s TTFT`,
-    overflowCostDetail: (count: number, limit: number) =>
-      `${pointCountEn(count)} above $${limit}/M ${count === 1 ? 'is' : 'are'} hidden.`,
-    overflowLatencyDetail: (count: number, limit: number) =>
-      `${pointCountEn(count)} beyond ${limit}s TTFT ${count === 1 ? 'is' : 'are'} hidden.`,
-    overflowExplanation:
-      'Dashed arrows show where the Pareto line continues beyond the displayed range.',
+    overflowMixed: (count: number) => `${pointCountEn(count)} clipped`,
+    overflowCost: (count: number, limit: number) => `${pointCountEn(count)} > $${limit}/M`,
+    overflowLatency: (count: number, limit: number) => `${pointCountEn(count)} > ${limit}s TTFT`,
   },
   zh: {
     logScale: '对数缩放',
@@ -358,14 +349,9 @@ const SCATTER_STRINGS = {
     gradientLabels: '渐变标签',
     lineLabels: '曲线标签',
     resetFilter: '重置筛选',
-    overflowTitle: '曲线为何在此停止',
-    overflowMixed: (count: number) => `${count} 个点超出图表显示范围`,
-    overflowCost: (count: number, limit: number) => `${count} 个点高于 $${limit}/M`,
-    overflowLatency: (count: number, limit: number) => `${count} 个点的 TTFT 超过 ${limit}s`,
-    overflowCostDetail: (count: number, limit: number) => `${count} 个点高于 $${limit}/M，已隐藏。`,
-    overflowLatencyDetail: (count: number, limit: number) =>
-      `${count} 个点的 TTFT 超过 ${limit}s，已隐藏。`,
-    overflowExplanation: '虚线箭头表示 Pareto 曲线仍在图表显示范围外延续。',
+    overflowMixed: (count: number) => `${count} 个点已截断`,
+    overflowCost: (count: number, limit: number) => `${count} 个点 > $${limit}/M`,
+    overflowLatency: (count: number, limit: number) => `${count} 个点 > ${limit}s TTFT`,
   },
 } as const;
 
@@ -432,6 +418,8 @@ const ScatterGraph = React.memo(
     } = useInference();
     const locale = useLocale();
     const legendT = SCATTER_STRINGS[locale];
+    const costLimit = chartDefinition.y_cost_limit ?? 0;
+    const latencyLimit = chartDefinition.y_latency_limit ?? 0;
 
     const {
       isUnofficialRun,
@@ -914,28 +902,6 @@ const ScatterGraph = React.memo(
       runIndexByUrl,
     ]);
 
-    const activeOfficialClippedData = useMemo(
-      () =>
-        clippedData.filter(
-          ({ point }) =>
-            selectedPrecisions.includes(point.precision) &&
-            effectiveActiveHwTypes.has(String(point.hwKey)),
-        ),
-      [clippedData, selectedPrecisions, effectiveActiveHwTypes],
-    );
-    const activeClippedData = useMemo(
-      () => [...activeOfficialClippedData, ...processedOverlayClippedData],
-      [activeOfficialClippedData, processedOverlayClippedData],
-    );
-    const overflowCounts = useMemo(
-      () => ({
-        total: activeClippedData.length,
-        cost: activeClippedData.filter(({ reasons }) => reasons.includes('cost')).length,
-        latency: activeClippedData.filter(({ reasons }) => reasons.includes('latency')).length,
-      }),
-      [activeClippedData],
-    );
-
     // Warning annotations for visible series (official + unofficial overlay)
     // with known upstream issues. Drawn as an SVG layer (box + arrow to the
     // affected line) so PNG exports carry the warning.
@@ -2610,7 +2576,7 @@ const ScatterGraph = React.memo(
         },
       };
 
-      // ── Intentional clipping: dashed Pareto continuation + boundary arrow ──
+      // ── Intentional clipping: short dashed Pareto continuation + arrow ──
       const drawOverflowContinuations = (
         zoomGroup: d3.Selection<SVGGElement, unknown, null, undefined>,
         ctx: RenderContext,
@@ -2648,6 +2614,7 @@ const ScatterGraph = React.memo(
               .append('path')
               .attr('class', 'overflow-continuation-arrow')
               .attr('d', 'M 0 0 L -9 -4.5 L -9 4.5 Z');
+            group.append('text').attr('class', 'overflow-continuation-label');
             return group;
           })
           .attr('class', (entry) => `overflow-continuation ${entry.source}-overflow-continuation`)
@@ -2655,6 +2622,7 @@ const ScatterGraph = React.memo(
           .attr('data-hw-key', (entry) => entry.hw)
           .attr('data-precision', (entry) => entry.precision)
           .attr('data-clip-reasons', (entry) => entry.reasons.join(','))
+          .attr('data-hidden-point-count', (entry) => entry.hiddenPointCount)
           .style('transition', 'opacity 150ms ease')
           .style('opacity', (entry) =>
             entry.source === 'overlay' ||
@@ -2671,6 +2639,13 @@ const ScatterGraph = React.memo(
               : ir.getCssColor(ir.resolveColor(entry.hw));
           const { geometry } = entry;
           const group = d3.select(this);
+          const label =
+            entry.reasons.includes('cost') && entry.reasons.includes('latency')
+              ? legendT.overflowMixed(entry.hiddenPointCount)
+              : entry.reasons.includes('cost')
+                ? legendT.overflowCost(entry.hiddenPointCount, costLimit)
+                : legendT.overflowLatency(entry.hiddenPointCount, latencyLimit);
+          const pointsRight = geometry.x2 >= geometry.x1;
           group
             .select<SVGLineElement>('.overflow-continuation-line')
             .attr('x1', geometry.x1)
@@ -2685,6 +2660,21 @@ const ScatterGraph = React.memo(
             .select<SVGPathElement>('.overflow-continuation-arrow')
             .attr('transform', `translate(${geometry.x2},${geometry.y2}) rotate(${geometry.angle})`)
             .attr('fill', color);
+          group
+            .attr('aria-label', label)
+            .select<SVGTextElement>('.overflow-continuation-label')
+            .attr('data-testid', 'overflow-continuation-label')
+            .attr('x', geometry.x2 + (pointsRight ? -12 : 12))
+            .attr('y', Math.max(12, Math.min(ctx.height - 4, geometry.y2 - 9)))
+            .attr('text-anchor', pointsRight ? 'end' : 'start')
+            .attr('fill', color)
+            .attr('stroke', ir.getCssColor('--background'))
+            .attr('stroke-width', 4)
+            .attr('stroke-linejoin', 'round')
+            .attr('paint-order', 'stroke')
+            .attr('font-size', 11.5)
+            .attr('font-weight', 600)
+            .text(label);
         });
       };
       const overflowContinuationLayer: CustomLayerConfig = {
@@ -3081,15 +3071,6 @@ const ScatterGraph = React.memo(
       }
     }, [effectiveActiveHwTypes, selectedPrecisions, activeOverlayHwTypes]);
 
-    const costLimit = chartDefinition.y_cost_limit ?? 0;
-    const latencyLimit = chartDefinition.y_latency_limit ?? 0;
-    const overflowSummary =
-      overflowCounts.cost > 0 && overflowCounts.latency > 0
-        ? legendT.overflowMixed(overflowCounts.total)
-        : overflowCounts.cost > 0
-          ? legendT.overflowCost(overflowCounts.cost, costLimit)
-          : legendT.overflowLatency(overflowCounts.latency, latencyLimit);
-
     // --- Empty state ---
     if (data.length === 0 && !overlayData?.data?.length) {
       return (
@@ -3158,50 +3139,6 @@ const ScatterGraph = React.memo(
               </div>
             ) : undefined
           }
-          plotOverlay={
-            overflowCounts.total > 0 ? (
-              <div className="no-export absolute right-3 top-7 z-20">
-                <Popover
-                  onOpenChange={(open) => {
-                    if (!open) return;
-                    track('inference_clipped_points_notice_opened', {
-                      chartType: chartDefinition.chartType,
-                      costPoints: overflowCounts.cost,
-                      latencyPoints: overflowCounts.latency,
-                    });
-                  }}
-                >
-                  <PopoverTrigger asChild>
-                    <button
-                      type="button"
-                      data-testid="chart-overflow-notice"
-                      className="bg-background/95 text-amber-700 dark:text-amber-300 border-amber-500/40 hover:bg-amber-50 dark:hover:bg-amber-950/40 flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium shadow-sm backdrop-blur"
-                      aria-label={`${legendT.overflowTitle}: ${overflowSummary}`}
-                    >
-                      <ArrowUpRight className="size-3.5" aria-hidden="true" />
-                      {overflowSummary}
-                    </button>
-                  </PopoverTrigger>
-                  <PopoverContent
-                    align="end"
-                    className="w-72 text-sm"
-                    data-testid="chart-overflow-popover"
-                  >
-                    <p className="font-semibold">{legendT.overflowTitle}</p>
-                    <div className="text-muted-foreground mt-2 space-y-1">
-                      {overflowCounts.cost > 0 && (
-                        <p>{legendT.overflowCostDetail(overflowCounts.cost, costLimit)}</p>
-                      )}
-                      {overflowCounts.latency > 0 && (
-                        <p>{legendT.overflowLatencyDetail(overflowCounts.latency, latencyLimit)}</p>
-                      )}
-                      <p>{legendT.overflowExplanation}</p>
-                    </div>
-                  </PopoverContent>
-                </Popover>
-              </div>
-            ) : undefined
-          }
           legendElement={
             <ChartLegend
               variant="sidebar"
diff --git a/packages/app/src/components/inference/utils/overflowContinuations.test.ts b/packages/app/src/components/inference/utils/overflowContinuations.test.ts
index 0f0b80617..4fd55d0f3 100644
--- a/packages/app/src/components/inference/utils/overflowContinuations.test.ts
+++ b/packages/app/src/components/inference/utils/overflowContinuations.test.ts
@@ -39,6 +39,33 @@ describe('buildFrontierContinuations', () => {
     expect(result).toHaveLength(2);
     expect(result.map((entry) => entry.toward)).toEqual([costClipped, latencyClipped]);
     expect(result.map((entry) => entry.reasons)).toEqual([['cost'], ['latency']]);
+    expect(result.map((entry) => entry.hiddenPointCount)).toEqual([1, 1]);
+  });
+
+  it('counts consecutive clipped frontier points behind one continuation', () => {
+    const visible = point(10, 5);
+    const clippedA = point(20, 4);
+    const clippedB = point(30, 3);
+    const dominatedClipped = point(25, 6);
+
+    const result = buildFrontierContinuations(
+      [visible],
+      [
+        { point: clippedA, reasons: ['latency'] },
+        { point: clippedB, reasons: ['latency'] },
+        { point: dominatedClipped, reasons: ['latency'] },
+      ],
+      'lower_left',
+    );
+
+    expect(result).toEqual([
+      expect.objectContaining({
+        from: visible,
+        toward: clippedA,
+        reasons: ['latency'],
+        hiddenPointCount: 3,
+      }),
+    ]);
   });
 
   it('does not imply a continuation to a clipped point that is not on the full frontier', () => {
@@ -73,6 +100,20 @@ describe('projectContinuationToBounds', () => {
     expect(result!.angle).toBeCloseTo(5.71, 1);
   });
 
+  it('caps a distant continuation instead of crossing the whole plot', () => {
+    const result = projectContinuationToBounds(
+      { from: point(10, 50), toward: point(1000, 50) },
+      identity,
+      identity,
+      800,
+      100,
+    );
+
+    expect(result).not.toBeNull();
+    expect(result!.x2 - result!.x1).toBe(96);
+    expect(result!.y2).toBe(result!.y1);
+  });
+
   it('returns null when the visible anchor has been panned outside the viewport', () => {
     const result = projectContinuationToBounds(
       { from: point(-1, 50), toward: point(20, 50) },
diff --git a/packages/app/src/components/inference/utils/overflowContinuations.ts b/packages/app/src/components/inference/utils/overflowContinuations.ts
index 85f0b2af1..9dcb13abc 100644
--- a/packages/app/src/components/inference/utils/overflowContinuations.ts
+++ b/packages/app/src/components/inference/utils/overflowContinuations.ts
@@ -7,6 +7,7 @@ export interface FrontierContinuation {
   from: InferenceData;
   toward: InferenceData;
   reasons: ClippedInferenceData['reasons'];
+  hiddenPointCount: number;
 }
 
 export interface ProjectedContinuation {
@@ -19,7 +20,7 @@ export interface ProjectedContinuation {
 
 /**
  * Find transitions where a complete Pareto frontier crosses from a visible
- * point into an intentionally clipped point. A single visible point can yield
+ * point into an intentionally clipped run. A single visible point can yield
  * two continuations when hidden frontier points exist on both sides.
  */
 export function buildFrontierContinuations(
@@ -48,15 +49,37 @@ export function buildFrontierContinuations(
     const toward = leftVisible ? right : left;
     const clippedEntry = clippedByPoint.get(toward);
     if (!clippedEntry) continue;
-    result.push({ from, toward, reasons: clippedEntry.reasons });
+
+    const step = leftVisible ? 1 : -1;
+    let cursor = leftVisible ? index + 1 : index;
+    const reasons = new Set<ClippedInferenceData['reasons'][number]>();
+    while (cursor >= 0 && cursor < frontier.length && !visibleSet.has(frontier[cursor])) {
+      const hiddenEntry = clippedByPoint.get(frontier[cursor]);
+      if (hiddenEntry) {
+        hiddenEntry.reasons.forEach((reason) => reasons.add(reason));
+      }
+      cursor += step;
+    }
+    const hiddenPointCount = clipped.filter((entry) =>
+      entry.reasons.some((reason) => reasons.has(reason)),
+    ).length;
+
+    result.push({
+      from,
+      toward,
+      reasons: [...reasons],
+      hiddenPointCount,
+    });
   }
 
   return result;
 }
 
 /**
- * Project a data-space continuation ray to the plot boundary. The endpoint is
- * inset slightly so the arrowhead remains inside the chart clip path.
+ * Project a data-space continuation toward the next clipped Pareto point.
+ * The segment is capped in screen space so a distant outlier cannot create a
+ * line across the whole chart. If the plot boundary is closer, the endpoint
+ * is inset slightly so the arrowhead remains inside the clip path.
  */
 export function projectContinuationToBounds(
   continuation: Pick<FrontierContinuation, 'from' | 'toward'>,
@@ -65,6 +88,7 @@ export function projectContinuationToBounds(
   width: number,
   height: number,
   inset = 7,
+  maxLength = 96,
 ): ProjectedContinuation | null {
   const x1 = xScale(continuation.from.x);
   const y1 = yScale(continuation.from.y);
@@ -86,16 +110,17 @@ export function projectContinuationToBounds(
   const boundaryT = Math.min(...candidates.filter((value) => value > 0));
   if (!Number.isFinite(boundaryT)) return null;
 
-  const boundaryX = x1 + dx * boundaryT;
-  const boundaryY = y1 + dy * boundaryT;
   const unitX = dx / length;
   const unitY = dy / length;
+  const boundaryDistance = length * boundaryT;
+  const segmentLength = Math.min(maxLength, boundaryDistance - inset);
+  if (segmentLength <= 0) return null;
 
   return {
     x1,
     y1,
-    x2: boundaryX - unitX * inset,
-    y2: boundaryY - unitY * inset,
+    x2: x1 + unitX * segmentLength,
+    y2: y1 + unitY * segmentLength,
     angle: (Math.atan2(dy, dx) * 180) / Math.PI,
   };
 }
diff --git a/packages/app/src/components/ui/d3-chart-wrapper.tsx b/packages/app/src/components/ui/d3-chart-wrapper.tsx
index 580b85d15..44013b1bf 100644
--- a/packages/app/src/components/ui/d3-chart-wrapper.tsx
+++ b/packages/app/src/components/ui/d3-chart-wrapper.tsx
@@ -52,7 +52,6 @@ export interface D3ChartWrapperProps {
   ) => void;
   legendElement: React.ReactNode;
   noDataOverlay?: React.ReactNode;
-  plotOverlay?: React.ReactNode;
   caption?: React.ReactNode;
   instructions?: string;
   testId?: string;
@@ -71,7 +70,6 @@ export function D3ChartWrapper({
   hideTooltipElements,
   legendElement,
   noDataOverlay,
-  plotOverlay,
   caption,
   instructions = 'Shift+Scroll to zoom • Drag to pan • Double-click to reset • Click a point to pin tooltip',
   testId,
@@ -115,7 +113,6 @@ export function D3ChartWrapper({
                 computeTooltipPosition. */}
             <PortalTooltip tooltipRef={tooltipRef} pinned={Boolean(pinnedPoint)} />
             {noDataOverlay}
-            {plotOverlay}
           </div>
           <p className="no-export text-xs text-muted-foreground text-center mt-2">{instructions}</p>
           <div className="overflow-hidden max-h-0">
diff --git a/packages/app/src/lib/d3-chart/D3Chart/D3Chart.tsx b/packages/app/src/lib/d3-chart/D3Chart/D3Chart.tsx
index 1eb65be19..2a18b9cdc 100644
--- a/packages/app/src/lib/d3-chart/D3Chart/D3Chart.tsx
+++ b/packages/app/src/lib/d3-chart/D3Chart/D3Chart.tsx
@@ -35,7 +35,6 @@ function D3ChartInner<T>(
     transitionDuration,
     legendElement,
     noDataOverlay,
-    plotOverlay,
     caption,
     onRender,
   }: D3ChartProps<T>,
@@ -150,7 +149,6 @@ function D3ChartInner<T>(
       grabCursor={grabCursor}
       legendElement={legendElement}
       noDataOverlay={noDataOverlay}
-      plotOverlay={plotOverlay}
       caption={caption}
     />
   );
diff --git a/packages/app/src/lib/d3-chart/D3Chart/types.ts b/packages/app/src/lib/d3-chart/D3Chart/types.ts
index a9448ad12..9aff5161b 100644
--- a/packages/app/src/lib/d3-chart/D3Chart/types.ts
+++ b/packages/app/src/lib/d3-chart/D3Chart/types.ts
@@ -269,8 +269,6 @@ export interface D3ChartProps<T = any> {
   transitionDuration?: number;
   legendElement?: React.ReactNode;
   noDataOverlay?: React.ReactNode;
-  /** React content positioned over the plot SVG (for notices and controls). */
-  plotOverlay?: React.ReactNode;
   caption?: React.ReactNode;
 
   /** Called after all layers render. Useful for one-off DOM manipulations. */

From 17f2c51a0eff2b27bd571d6506a9780928194f9e Mon Sep 17 00:00:00 2001
From: adibarra <93070681+adibarra@users.noreply.github.com>
Date: Thu, 30 Jul 2026 23:41:02 -0500
Subject: [PATCH 3/6] fix: interpolate and layer overflow continuations
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

中文：使用样条插值绘制图表越界延长线，将虚线置于主曲线后方，并保持缩放、标签位置与主题描边正确。
---
 .../e2e/chart-overflow-continuation.cy.ts     | 126 +++++++++++++--
 .../components/inference/ui/ScatterGraph.tsx  | 143 ++++++++++++++----
 .../utils/overflowContinuations.test.ts       |  58 ++-----
 .../inference/utils/overflowContinuations.ts  |  72 ++-------
 4 files changed, 247 insertions(+), 152 deletions(-)

diff --git a/packages/app/cypress/e2e/chart-overflow-continuation.cy.ts b/packages/app/cypress/e2e/chart-overflow-continuation.cy.ts
index a4ef5f293..f912949a6 100644
--- a/packages/app/cypress/e2e/chart-overflow-continuation.cy.ts
+++ b/packages/app/cypress/e2e/chart-overflow-continuation.cy.ts
@@ -56,11 +56,13 @@ const row = (
   run_url: runUrl,
 });
 
-// C=1 exceeds $5/M, C=1024 exceeds 60s TTFT, and C=512 is the
-// sole in-bounds point. The complete lower-left cost frontier crosses the
+// C=1 and C=2 exceed $5/M, C=1024 exceeds 60s TTFT, while C=256
+// and C=512 stay in bounds. The complete lower-left cost frontier crosses the
 // visible region on both sides, so the chart should draw two continuations.
 const rows = (runUrl: string | null) => [
   row(910001, 1, 162.6, 0.35, 80, runUrl),
+  row(910004, 2, 140, 0.6, 85, runUrl),
+  row(910005, 256, 70, 30, 2708, runUrl),
   row(910002, 512, 55.7, 36.28, 3887, runUrl),
   row(910003, 1024, 41.45, 69.65, 4486, runUrl),
 ];
@@ -120,7 +122,7 @@ const visitOverflowChart = (withOverlay: boolean) => {
 };
 
 describe('Chart overflow continuations', () => {
-  it('keeps the original domain and draws compact labeled arrows toward clipped points', () => {
+  it('keeps the original domain and interpolates labeled paths toward clipped points', () => {
     visitOverflowChart(false);
 
     cy.get('.x-axis .tick text').then(($ticks) => {
@@ -133,28 +135,128 @@ describe('Chart overflow continuations', () => {
       .each(($continuation) => {
         cy.wrap($continuation)
           .find('.overflow-continuation-line')
-          .then(($line) => {
-            expect($line).to.have.attr('stroke-dasharray');
-            const x1 = Number($line.attr('x1'));
-            const y1 = Number($line.attr('y1'));
-            const x2 = Number($line.attr('x2'));
-            const y2 = Number($line.attr('y2'));
-            expect(Math.hypot(x2 - x1, y2 - y1)).to.be.at.most(96.01);
+          .should(($path) => {
+            expect($path).to.have.attr('clip-path');
+            expect($path).to.have.attr('fill', 'none');
+            expect($path).to.have.attr('stroke-dasharray');
+            expect(($path[0] as unknown as SVGPathElement).getTotalLength()).to.be.greaterThan(0);
+            if ($continuation.attr('data-clip-reasons') === 'cost') {
+              expect($path.attr('d')).to.include('C');
+            }
+          });
+        cy.wrap($continuation)
+          .find('.overflow-continuation-arrow')
+          .then(($arrow) => {
+            const transform = $arrow.attr('transform') ?? '';
+            const arrowY = Number(/translate\([^,]+,(?<y>[^)]+)\)/u.exec(transform)?.groups?.y);
+            cy.wrap($continuation)
+              .find('[data-testid="overflow-continuation-label"]')
+              .should(($label) => {
+                expect(Number($label.attr('y'))).to.be.greaterThan(arrowY);
+              });
           });
-        cy.wrap($continuation).find('.overflow-continuation-arrow').should('exist');
         cy.wrap($continuation)
           .find('[data-testid="overflow-continuation-label"]')
           .should('be.visible');
       });
 
+    cy.get('[data-testid="official-overflow-continuation"]')
+      .first()
+      .then(($continuation) => {
+        const svg = ($continuation[0] as unknown as SVGGElement).ownerSVGElement!;
+        const overflowLayer = svg.querySelector('.overflow-continuations-layer')!;
+        const rooflinesLayer = svg.querySelector('.rooflines-layer')!;
+        expect(
+          overflowLayer.compareDocumentPosition(rooflinesLayer) & Node.DOCUMENT_POSITION_FOLLOWING,
+        ).to.be.greaterThan(0);
+      });
+
     cy.get('[data-testid="overflow-continuation-label"]')
       .should('have.length', 2)
       .then(($labels) => {
         const labels = [...$labels].map((label) => label.textContent);
-        expect(labels).to.have.members(['1 point > $5/M', '1 point > 60s TTFT']);
+        expect(labels).to.have.members(['2 points > $5/M', '1 point > 60s TTFT']);
       });
+
+    cy.document().then((document) => {
+      const background = getComputedStyle(document.documentElement)
+        .getPropertyValue('--background')
+        .trim();
+      cy.get('[data-testid="overflow-continuation-label"]')
+        .first()
+        .should('have.attr', 'stroke', background);
+    });
+    cy.get('button[aria-label^="Switch theme"]').click();
+    cy.document().then((document) => {
+      const background = getComputedStyle(document.documentElement)
+        .getPropertyValue('--background')
+        .trim();
+      cy.get('[data-testid="overflow-continuation-label"]')
+        .first()
+        .should('have.attr', 'stroke', background);
+    });
     cy.get('[data-testid="chart-overflow-notice"]').should('not.exist');
   });
+  it('keeps spline paths rendered through panning and zooming', () => {
+    visitOverflowChart(false);
+
+    cy.get('[data-testid="scatter-graph"] svg').then(($svg) => {
+      const svg = $svg[0];
+      const bounds = svg.getBoundingClientRect();
+      const startX = bounds.x + bounds.width / 2;
+      const startY = bounds.y + bounds.height / 2;
+      svg.dispatchEvent(
+        new MouseEvent('mousedown', {
+          clientX: startX,
+          clientY: startY,
+          button: 0,
+          bubbles: true,
+          cancelable: true,
+          view: window,
+        }),
+      );
+      window.dispatchEvent(
+        new MouseEvent('mousemove', {
+          clientX: startX + 300,
+          clientY: startY,
+          buttons: 1,
+          bubbles: true,
+          cancelable: true,
+          view: window,
+        }),
+      );
+      window.dispatchEvent(
+        new MouseEvent('mouseup', {
+          clientX: startX + 300,
+          clientY: startY,
+          button: 0,
+          bubbles: true,
+          cancelable: true,
+          view: window,
+        }),
+      );
+      for (let index = 0; index < 3; index++) {
+        svg.dispatchEvent(
+          new WheelEvent('wheel', {
+            deltaY: -240,
+            clientX: startX,
+            clientY: startY,
+            shiftKey: true,
+            bubbles: true,
+            cancelable: true,
+          }),
+        );
+      }
+    });
+
+    cy.get('[data-testid="official-overflow-continuation"]').each(($continuation) => {
+      expect($continuation.attr('display')).not.to.eq('none');
+      cy.wrap($continuation)
+        .find('.overflow-continuation-line')
+        .should('have.attr', 'd')
+        .and('not.be.empty');
+    });
+  });
 
   it('draws overlay continuations and removes them when that run is dismissed', () => {
     visitOverflowChart(true);
diff --git a/packages/app/src/components/inference/ui/ScatterGraph.tsx b/packages/app/src/components/inference/ui/ScatterGraph.tsx
index 3aa3f6e2c..7e74edbdf 100644
--- a/packages/app/src/components/inference/ui/ScatterGraph.tsx
+++ b/packages/app/src/components/inference/ui/ScatterGraph.tsx
@@ -89,10 +89,7 @@ import {
 } from '@/components/inference/utils/knownIssueAnnotations';
 import { matchesQuickFilters } from '@/components/inference/utils/quickFilters';
 import { changelogConfigToHwKey } from '@/components/inference/utils/changelogFormatters';
-import {
-  buildFrontierContinuations,
-  projectContinuationToBounds,
-} from '@/components/inference/utils/overflowContinuations';
+import { buildFrontierContinuations } from '@/components/inference/utils/overflowContinuations';
 
 // Greedy label-collision avoidance.
 // Each candidate is the y-position of the FIRST baseline (relative to point
@@ -270,10 +267,62 @@ interface OverflowContinuationEntry {
   runIndex?: number;
   from: InferenceData;
   toward: InferenceData;
+  points: InferenceData[];
   reasons: ClippedInferenceData['reasons'];
   hiddenPointCount: number;
 }
 
+interface CurvedContinuationGeometry {
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+  angle: number;
+}
+
+/** Find the last visible point and tangent on an interpolated SVG path. */
+function visibleContinuationEndpoint(
+  path: SVGPathElement,
+  width: number,
+  height: number,
+  inset = 7,
+): CurvedContinuationGeometry | null {
+  const totalLength = path.getTotalLength();
+  const start = path.getPointAtLength(0);
+  if (
+    !Number.isFinite(totalLength) ||
+    totalLength === 0 ||
+    start.x < 0 ||
+    start.x > width ||
+    start.y < 0 ||
+    start.y > height
+  ) {
+    return null;
+  }
+
+  let endpointLength = totalLength;
+  let length = Math.min(2, totalLength);
+  while (length > 0) {
+    const point = path.getPointAtLength(length);
+    if (point.x < 0 || point.x > width || point.y < 0 || point.y > height) {
+      endpointLength = Math.max(0, length - inset);
+      break;
+    }
+    if (length === totalLength) break;
+    length = Math.min(length + 2, totalLength);
+  }
+
+  const end = path.getPointAtLength(endpointLength);
+  const tangentStart = path.getPointAtLength(Math.max(0, endpointLength - 2));
+  return {
+    x1: start.x,
+    y1: start.y,
+    x2: end.x,
+    y2: end.y,
+    angle: (Math.atan2(end.y - tangentStart.y, end.x - tangentStart.x) * 180) / Math.PI,
+  };
+}
+
 // Scale configs are recomputed from the visible points on every render, but a
 // legend / precision toggle usually leaves the actual domain untouched (x-min
 // is pinned at 0; extremes are owned by a handful of points). Comparing by
@@ -2576,7 +2625,7 @@ const ScatterGraph = React.memo(
         },
       };
 
-      // ── Intentional clipping: short dashed Pareto continuation + arrow ──
+      // ── Intentional clipping: interpolated dashed Pareto continuation + arrow ──
       const drawOverflowContinuations = (
         zoomGroup: d3.Selection<SVGGElement, unknown, null, undefined>,
         ctx: RenderContext,
@@ -2584,18 +2633,7 @@ const ScatterGraph = React.memo(
         yScale: ContinuousScale,
       ) => {
         const ir = interactionRef.current;
-        const entries = [...officialOverflowContinuations, ...overlayOverflowContinuations]
-          .map((entry) => {
-            const geometry = projectContinuationToBounds(
-              entry,
-              xScale,
-              yScale,
-              ctx.width,
-              ctx.height,
-            );
-            return geometry ? { ...entry, geometry } : null;
-          })
-          .filter((entry): entry is NonNullable<typeof entry> => entry !== null);
+        const entries = [...officialOverflowContinuations, ...overlayOverflowContinuations];
 
         const layer = zoomGroup
           .selectAll<SVGGElement, unknown>('.overflow-continuations-layer')
@@ -2603,13 +2641,23 @@ const ScatterGraph = React.memo(
           .join('g')
           .attr('class', 'overflow-continuations-layer')
           .attr('pointer-events', 'none');
+        const rooflinesLayer = zoomGroup.select<SVGGElement>('.rooflines-layer').node();
+        const layerNode = layer.node();
+        if (rooflinesLayer && layerNode && layerNode.nextSibling !== rooflinesLayer) {
+          layerNode.parentNode?.insertBefore(layerNode, rooflinesLayer);
+        }
 
         const groups = layer
           .selectAll<SVGGElement, (typeof entries)[number]>('.overflow-continuation')
           .data(entries, (entry) => entry.key)
           .join((enter) => {
             const group = enter.append('g');
-            group.append('line').attr('class', 'overflow-continuation-line');
+            group
+              .append('clipPath')
+              .attr('class', 'overflow-continuation-clip')
+              .attr('clipPathUnits', 'userSpaceOnUse')
+              .append('rect');
+            group.append('path').attr('class', 'overflow-continuation-line');
             group
               .append('path')
               .attr('class', 'overflow-continuation-arrow')
@@ -2632,40 +2680,68 @@ const ScatterGraph = React.memo(
               : 0,
           );
 
-        groups.each(function (entry) {
+        groups.each(function (entry, index) {
           const color =
             entry.source === 'overlay'
               ? overlayRunColor(entry.runIndex ?? 0)
               : ir.getCssColor(ir.resolveColor(entry.hw));
-          const { geometry } = entry;
           const group = d3.select(this);
+          const pointsRight = entry.toward.x >= entry.from.x;
+          const anchorX = xScale(entry.from.x);
+          const clipId = `${chartId}-overflow-continuation-${entry.source}-${index}`;
+          group
+            .select<SVGClipPathElement>('.overflow-continuation-clip')
+            .attr('id', clipId)
+            .select('rect')
+            .attr('x', pointsRight ? anchorX : 0)
+            .attr('y', 0)
+            .attr('width', pointsRight ? Math.max(0, ctx.width - anchorX) : Math.max(0, anchorX))
+            .attr('height', ctx.height);
+          const lineGenerator = d3
+            .line<InferenceData>()
+            .x((point) => xScale(point.x))
+            .y((point) => yScale(point.y))
+            .curve(d3.curveMonotoneX);
+          const continuationPath = group
+            .select<SVGPathElement>('.overflow-continuation-line')
+            .attr('d', lineGenerator(entry.points) ?? '')
+            .attr('clip-path', `url(#${clipId})`)
+            .attr('fill', 'none')
+            .attr('stroke', color)
+            .attr('stroke-width', 2.25)
+            .attr('stroke-dasharray', '6 5')
+            .attr('stroke-linecap', 'round');
+          const pathNode = continuationPath.node();
+          const geometry = pathNode
+            ? visibleContinuationEndpoint(pathNode, ctx.width, ctx.height)
+            : null;
+          group.attr('display', null);
+          if (!geometry) {
+            group
+              .selectAll<SVGElement, unknown>(
+                '.overflow-continuation-arrow, .overflow-continuation-label',
+              )
+              .attr('display', 'none');
+            return;
+          }
           const label =
             entry.reasons.includes('cost') && entry.reasons.includes('latency')
               ? legendT.overflowMixed(entry.hiddenPointCount)
               : entry.reasons.includes('cost')
                 ? legendT.overflowCost(entry.hiddenPointCount, costLimit)
                 : legendT.overflowLatency(entry.hiddenPointCount, latencyLimit);
-          const pointsRight = geometry.x2 >= geometry.x1;
-          group
-            .select<SVGLineElement>('.overflow-continuation-line')
-            .attr('x1', geometry.x1)
-            .attr('y1', geometry.y1)
-            .attr('x2', geometry.x2)
-            .attr('y2', geometry.y2)
-            .attr('stroke', color)
-            .attr('stroke-width', 2.25)
-            .attr('stroke-dasharray', '6 5')
-            .attr('stroke-linecap', 'round');
           group
             .select<SVGPathElement>('.overflow-continuation-arrow')
+            .attr('display', null)
             .attr('transform', `translate(${geometry.x2},${geometry.y2}) rotate(${geometry.angle})`)
             .attr('fill', color);
           group
             .attr('aria-label', label)
             .select<SVGTextElement>('.overflow-continuation-label')
+            .attr('display', null)
             .attr('data-testid', 'overflow-continuation-label')
             .attr('x', geometry.x2 + (pointsRight ? -12 : 12))
-            .attr('y', Math.max(12, Math.min(ctx.height - 4, geometry.y2 - 9)))
+            .attr('y', Math.max(12, Math.min(ctx.height - 4, geometry.y2 + 18)))
             .attr('text-anchor', pointsRight ? 'end' : 'start')
             .attr('fill', color)
             .attr('stroke', ir.getCssColor('--background'))
@@ -2979,6 +3055,9 @@ const ScatterGraph = React.memo(
             .attr('stroke', color);
           d3.select(this).select('.overflow-continuation-arrow').attr('fill', color);
         });
+      zoomGroup
+        .selectAll<SVGTextElement, unknown>('.overflow-continuation-label')
+        .attr('stroke', ir.getCssColor('--background'));
 
       // Parallelism / line labels: visibility via data attributes (mirrors
       // handleLegendHoverEnd). Placement-level updates happen below.
diff --git a/packages/app/src/components/inference/utils/overflowContinuations.test.ts b/packages/app/src/components/inference/utils/overflowContinuations.test.ts
index 4fd55d0f3..ccb566269 100644
--- a/packages/app/src/components/inference/utils/overflowContinuations.test.ts
+++ b/packages/app/src/components/inference/utils/overflowContinuations.test.ts
@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest';
 
 import type { ClippedInferenceData, InferenceData } from '../types';
-import { buildFrontierContinuations, projectContinuationToBounds } from './overflowContinuations';
+import { buildFrontierContinuations } from './overflowContinuations';
 
 const point = (x: number, y: number): InferenceData =>
   ({
@@ -22,8 +22,6 @@ const point = (x: number, y: number): InferenceData =>
     costri: { y, roof: false },
   }) as InferenceData;
 
-const identity = (value: number) => value;
-
 describe('buildFrontierContinuations', () => {
   it('returns both crossings when one visible point sits between two clipped frontier regions', () => {
     const costClipped = point(5, 8);
@@ -40,16 +38,21 @@ describe('buildFrontierContinuations', () => {
     expect(result.map((entry) => entry.toward)).toEqual([costClipped, latencyClipped]);
     expect(result.map((entry) => entry.reasons)).toEqual([['cost'], ['latency']]);
     expect(result.map((entry) => entry.hiddenPointCount)).toEqual([1, 1]);
+    expect(result.map((entry) => entry.points)).toEqual([
+      [visible, costClipped],
+      [visible, latencyClipped],
+    ]);
   });
 
-  it('counts consecutive clipped frontier points behind one continuation', () => {
+  it('interpolates through consecutive clipped frontier points', () => {
+    const controlPoint = point(5, 6);
     const visible = point(10, 5);
     const clippedA = point(20, 4);
     const clippedB = point(30, 3);
     const dominatedClipped = point(25, 6);
 
     const result = buildFrontierContinuations(
-      [visible],
+      [controlPoint, visible],
       [
         { point: clippedA, reasons: ['latency'] },
         { point: clippedB, reasons: ['latency'] },
@@ -62,6 +65,7 @@ describe('buildFrontierContinuations', () => {
       expect.objectContaining({
         from: visible,
         toward: clippedA,
+        points: [controlPoint, visible, clippedA, clippedB],
         reasons: ['latency'],
         hiddenPointCount: 3,
       }),
@@ -82,47 +86,3 @@ describe('buildFrontierContinuations', () => {
     expect(result).toEqual([]);
   });
 });
-
-describe('projectContinuationToBounds', () => {
-  it('ends a rightward ray just inside the plot boundary', () => {
-    const result = projectContinuationToBounds(
-      { from: point(40, 50), toward: point(140, 60) },
-      identity,
-      identity,
-      100,
-      100,
-      5,
-    );
-
-    expect(result).not.toBeNull();
-    expect(result!.x2).toBeCloseTo(95.02, 1);
-    expect(result!.y2).toBeCloseTo(55.5, 1);
-    expect(result!.angle).toBeCloseTo(5.71, 1);
-  });
-
-  it('caps a distant continuation instead of crossing the whole plot', () => {
-    const result = projectContinuationToBounds(
-      { from: point(10, 50), toward: point(1000, 50) },
-      identity,
-      identity,
-      800,
-      100,
-    );
-
-    expect(result).not.toBeNull();
-    expect(result!.x2 - result!.x1).toBe(96);
-    expect(result!.y2).toBe(result!.y1);
-  });
-
-  it('returns null when the visible anchor has been panned outside the viewport', () => {
-    const result = projectContinuationToBounds(
-      { from: point(-1, 50), toward: point(20, 50) },
-      identity,
-      identity,
-      100,
-      100,
-    );
-
-    expect(result).toBeNull();
-  });
-});
diff --git a/packages/app/src/components/inference/utils/overflowContinuations.ts b/packages/app/src/components/inference/utils/overflowContinuations.ts
index 9dcb13abc..84dd519ee 100644
--- a/packages/app/src/components/inference/utils/overflowContinuations.ts
+++ b/packages/app/src/components/inference/utils/overflowContinuations.ts
@@ -6,18 +6,11 @@ import { e2eRestrictedSeed } from './e2eFrontier';
 export interface FrontierContinuation {
   from: InferenceData;
   toward: InferenceData;
+  points: InferenceData[];
   reasons: ClippedInferenceData['reasons'];
   hiddenPointCount: number;
 }
 
-export interface ProjectedContinuation {
-  x1: number;
-  y1: number;
-  x2: number;
-  y2: number;
-  angle: number;
-}
-
 /**
  * Find transitions where a complete Pareto frontier crosses from a visible
  * point into an intentionally clipped run. A single visible point can yield
@@ -53,8 +46,11 @@ export function buildFrontierContinuations(
     const step = leftVisible ? 1 : -1;
     let cursor = leftVisible ? index + 1 : index;
     const reasons = new Set<ClippedInferenceData['reasons'][number]>();
+    const hiddenPoints: InferenceData[] = [];
     while (cursor >= 0 && cursor < frontier.length && !visibleSet.has(frontier[cursor])) {
-      const hiddenEntry = clippedByPoint.get(frontier[cursor]);
+      const hiddenPoint = frontier[cursor];
+      hiddenPoints.push(hiddenPoint);
+      const hiddenEntry = clippedByPoint.get(hiddenPoint);
       if (hiddenEntry) {
         hiddenEntry.reasons.forEach((reason) => reasons.add(reason));
       }
@@ -64,9 +60,17 @@ export function buildFrontierContinuations(
       entry.reasons.some((reason) => reasons.has(reason)),
     ).length;
 
+    const controlIndex = leftVisible ? index - 1 : index + 2;
+    const controlPoint = frontier[controlIndex];
+    const points =
+      controlPoint && visibleSet.has(controlPoint)
+        ? [controlPoint, from, ...hiddenPoints]
+        : [from, ...hiddenPoints];
+
     result.push({
       from,
       toward,
+      points,
       reasons: [...reasons],
       hiddenPointCount,
     });
@@ -74,53 +78,3 @@ export function buildFrontierContinuations(
 
   return result;
 }
-
-/**
- * Project a data-space continuation toward the next clipped Pareto point.
- * The segment is capped in screen space so a distant outlier cannot create a
- * line across the whole chart. If the plot boundary is closer, the endpoint
- * is inset slightly so the arrowhead remains inside the clip path.
- */
-export function projectContinuationToBounds(
-  continuation: Pick<FrontierContinuation, 'from' | 'toward'>,
-  xScale: (value: number) => number,
-  yScale: (value: number) => number,
-  width: number,
-  height: number,
-  inset = 7,
-  maxLength = 96,
-): ProjectedContinuation | null {
-  const x1 = xScale(continuation.from.x);
-  const y1 = yScale(continuation.from.y);
-  const targetX = xScale(continuation.toward.x);
-  const targetY = yScale(continuation.toward.y);
-  if (![x1, y1, targetX, targetY].every(Number.isFinite)) return null;
-  if (x1 < 0 || x1 > width || y1 < 0 || y1 > height) return null;
-
-  const dx = targetX - x1;
-  const dy = targetY - y1;
-  const length = Math.hypot(dx, dy);
-  if (length === 0) return null;
-
-  const candidates: number[] = [];
-  if (dx > 0) candidates.push((width - x1) / dx);
-  else if (dx < 0) candidates.push((0 - x1) / dx);
-  if (dy > 0) candidates.push((height - y1) / dy);
-  else if (dy < 0) candidates.push((0 - y1) / dy);
-  const boundaryT = Math.min(...candidates.filter((value) => value > 0));
-  if (!Number.isFinite(boundaryT)) return null;
-
-  const unitX = dx / length;
-  const unitY = dy / length;
-  const boundaryDistance = length * boundaryT;
-  const segmentLength = Math.min(maxLength, boundaryDistance - inset);
-  if (segmentLength <= 0) return null;
-
-  return {
-    x1,
-    y1,
-    x2: x1 + unitX * segmentLength,
-    y2: y1 + unitY * segmentLength,
-    angle: (Math.atan2(dy, dx) * 180) / Math.PI,
-  };
-}

From 93c169f29c15c09ffc01087247690d6543a78437 Mon Sep 17 00:00:00 2001
From: adibarra <93070681+adibarra@users.noreply.github.com>
Date: Thu, 30 Jul 2026 23:50:08 -0500
Subject: [PATCH 4/6] fix: constrain overflow splines in ttft
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

中文：限制 TTFT 图表越界样条的可见长度，避免预测线横跨整张图表，并保持标签位于图表边界内。
---
 .../e2e/chart-overflow-continuation.cy.ts     |  8 ++
 .../components/inference/ui/ScatterGraph.tsx  | 75 +++++++++++--------
 2 files changed, 53 insertions(+), 30 deletions(-)

diff --git a/packages/app/cypress/e2e/chart-overflow-continuation.cy.ts b/packages/app/cypress/e2e/chart-overflow-continuation.cy.ts
index f912949a6..acff9c56f 100644
--- a/packages/app/cypress/e2e/chart-overflow-continuation.cy.ts
+++ b/packages/app/cypress/e2e/chart-overflow-continuation.cy.ts
@@ -144,6 +144,14 @@ describe('Chart overflow continuations', () => {
               expect($path.attr('d')).to.include('C');
             }
           });
+        cy.wrap($continuation)
+          .find('.overflow-continuation-clip path')
+          .should(($clip) => {
+            const radius = Number(
+              /A(?<radius>[^,]+),/u.exec($clip.attr('d') ?? '')?.groups?.radius,
+            );
+            expect(radius).to.be.at.most(96.1);
+          });
         cy.wrap($continuation)
           .find('.overflow-continuation-arrow')
           .then(($arrow) => {
diff --git a/packages/app/src/components/inference/ui/ScatterGraph.tsx b/packages/app/src/components/inference/ui/ScatterGraph.tsx
index 7e74edbdf..915ed05d1 100644
--- a/packages/app/src/components/inference/ui/ScatterGraph.tsx
+++ b/packages/app/src/components/inference/ui/ScatterGraph.tsx
@@ -280,40 +280,48 @@ interface CurvedContinuationGeometry {
   angle: number;
 }
 
-/** Find the last visible point and tangent on an interpolated SVG path. */
+/** Find a compact endpoint on an interpolated path, starting at its visible frontier point. */
 function visibleContinuationEndpoint(
   path: SVGPathElement,
+  anchorX: number,
   width: number,
   height: number,
   inset = 7,
+  maxLength = 96,
 ): CurvedContinuationGeometry | null {
   const totalLength = path.getTotalLength();
-  const start = path.getPointAtLength(0);
-  if (
-    !Number.isFinite(totalLength) ||
-    totalLength === 0 ||
-    start.x < 0 ||
-    start.x > width ||
-    start.y < 0 ||
-    start.y > height
-  ) {
-    return null;
+  if (!Number.isFinite(totalLength) || totalLength === 0) return null;
+
+  const pathStart = path.getPointAtLength(0);
+  const pathEnd = path.getPointAtLength(totalLength);
+  const ascending = pathEnd.x >= pathStart.x;
+  let lowerLength = 0;
+  let upperLength = totalLength;
+  for (let iteration = 0; iteration < 24; iteration++) {
+    const midpoint = (lowerLength + upperLength) / 2;
+    const midpointX = path.getPointAtLength(midpoint).x;
+    if (midpointX < anchorX === ascending) lowerLength = midpoint;
+    else upperLength = midpoint;
   }
 
-  let endpointLength = totalLength;
-  let length = Math.min(2, totalLength);
-  while (length > 0) {
+  const anchorLength = (lowerLength + upperLength) / 2;
+  const start = path.getPointAtLength(anchorLength);
+  if (start.x < 0 || start.x > width || start.y < 0 || start.y > height) return null;
+
+  let endpointLength = Math.min(totalLength, anchorLength + maxLength);
+  let length = Math.min(anchorLength + 2, endpointLength);
+  while (length > anchorLength) {
     const point = path.getPointAtLength(length);
     if (point.x < 0 || point.x > width || point.y < 0 || point.y > height) {
-      endpointLength = Math.max(0, length - inset);
+      endpointLength = Math.max(anchorLength, length - inset);
       break;
     }
-    if (length === totalLength) break;
-    length = Math.min(length + 2, totalLength);
+    if (length === endpointLength) break;
+    length = Math.min(length + 2, endpointLength);
   }
 
   const end = path.getPointAtLength(endpointLength);
-  const tangentStart = path.getPointAtLength(Math.max(0, endpointLength - 2));
+  const tangentStart = path.getPointAtLength(Math.max(anchorLength, endpointLength - 2));
   return {
     x1: start.x,
     y1: start.y,
@@ -2656,7 +2664,7 @@ const ScatterGraph = React.memo(
               .append('clipPath')
               .attr('class', 'overflow-continuation-clip')
               .attr('clipPathUnits', 'userSpaceOnUse')
-              .append('rect');
+              .append('path');
             group.append('path').attr('class', 'overflow-continuation-line');
             group
               .append('path')
@@ -2688,15 +2696,9 @@ const ScatterGraph = React.memo(
           const group = d3.select(this);
           const pointsRight = entry.toward.x >= entry.from.x;
           const anchorX = xScale(entry.from.x);
+          const anchorY = yScale(entry.from.y);
           const clipId = `${chartId}-overflow-continuation-${entry.source}-${index}`;
-          group
-            .select<SVGClipPathElement>('.overflow-continuation-clip')
-            .attr('id', clipId)
-            .select('rect')
-            .attr('x', pointsRight ? anchorX : 0)
-            .attr('y', 0)
-            .attr('width', pointsRight ? Math.max(0, ctx.width - anchorX) : Math.max(0, anchorX))
-            .attr('height', ctx.height);
+          group.select<SVGClipPathElement>('.overflow-continuation-clip').attr('id', clipId);
           const lineGenerator = d3
             .line<InferenceData>()
             .x((point) => xScale(point.x))
@@ -2713,8 +2715,20 @@ const ScatterGraph = React.memo(
             .attr('stroke-linecap', 'round');
           const pathNode = continuationPath.node();
           const geometry = pathNode
-            ? visibleContinuationEndpoint(pathNode, ctx.width, ctx.height)
+            ? visibleContinuationEndpoint(pathNode, anchorX, ctx.width, ctx.height)
             : null;
+          const clipRadius = geometry
+            ? Math.min(96, Math.max(0.1, Math.hypot(geometry.x2 - anchorX, geometry.y2 - anchorY)))
+            : 96;
+          group
+            .select<SVGClipPathElement>('.overflow-continuation-clip')
+            .select('path')
+            .attr(
+              'd',
+              `M${anchorX},${anchorY - clipRadius}A${clipRadius},${clipRadius} 0 0 ${
+                pointsRight ? 1 : 0
+              } ${anchorX},${anchorY + clipRadius}L${anchorX},${anchorY}Z`,
+            );
           group.attr('display', null);
           if (!geometry) {
             group
@@ -2730,6 +2744,7 @@ const ScatterGraph = React.memo(
               : entry.reasons.includes('cost')
                 ? legendT.overflowCost(entry.hiddenPointCount, costLimit)
                 : legendT.overflowLatency(entry.hiddenPointCount, latencyLimit);
+          const labelToRight = geometry.x2 < ctx.width / 2;
           group
             .select<SVGPathElement>('.overflow-continuation-arrow')
             .attr('display', null)
@@ -2740,9 +2755,9 @@ const ScatterGraph = React.memo(
             .select<SVGTextElement>('.overflow-continuation-label')
             .attr('display', null)
             .attr('data-testid', 'overflow-continuation-label')
-            .attr('x', geometry.x2 + (pointsRight ? -12 : 12))
+            .attr('x', geometry.x2 + (labelToRight ? 12 : -12))
             .attr('y', Math.max(12, Math.min(ctx.height - 4, geometry.y2 + 18)))
-            .attr('text-anchor', pointsRight ? 'end' : 'start')
+            .attr('text-anchor', labelToRight ? 'start' : 'end')
             .attr('fill', color)
             .attr('stroke', ir.getCssColor('--background'))
             .attr('stroke-width', 4)

From 5e363712bffcdf7d8a84e858461712571ba16a0e Mon Sep 17 00:00:00 2001
From: adibarra <93070681+adibarra@users.noreply.github.com>
Date: Fri, 31 Jul 2026 00:23:05 -0500
Subject: [PATCH 5/6] fix: clarify overflow cost label unit
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

中文：将越界成本标签单位从 /M 明确为 /Mtok，并同步中英文界面及回归测试。
---
 packages/app/cypress/e2e/chart-overflow-continuation.cy.ts | 2 +-
 packages/app/src/components/inference/ui/ScatterGraph.tsx  | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/app/cypress/e2e/chart-overflow-continuation.cy.ts b/packages/app/cypress/e2e/chart-overflow-continuation.cy.ts
index acff9c56f..99484b932 100644
--- a/packages/app/cypress/e2e/chart-overflow-continuation.cy.ts
+++ b/packages/app/cypress/e2e/chart-overflow-continuation.cy.ts
@@ -183,7 +183,7 @@ describe('Chart overflow continuations', () => {
       .should('have.length', 2)
       .then(($labels) => {
         const labels = [...$labels].map((label) => label.textContent);
-        expect(labels).to.have.members(['2 points > $5/M', '1 point > 60s TTFT']);
+        expect(labels).to.have.members(['2 points > $5/Mtok', '1 point > 60s TTFT']);
       });
 
     cy.document().then((document) => {
diff --git a/packages/app/src/components/inference/ui/ScatterGraph.tsx b/packages/app/src/components/inference/ui/ScatterGraph.tsx
index 915ed05d1..4dd46202c 100644
--- a/packages/app/src/components/inference/ui/ScatterGraph.tsx
+++ b/packages/app/src/components/inference/ui/ScatterGraph.tsx
@@ -394,7 +394,7 @@ const SCATTER_STRINGS = {
     lineLabels: 'Line Labels',
     resetFilter: 'Reset filter',
     overflowMixed: (count: number) => `${pointCountEn(count)} clipped`,
-    overflowCost: (count: number, limit: number) => `${pointCountEn(count)} > $${limit}/M`,
+    overflowCost: (count: number, limit: number) => `${pointCountEn(count)} > $${limit}/Mtok`,
     overflowLatency: (count: number, limit: number) => `${pointCountEn(count)} > ${limit}s TTFT`,
   },
   zh: {
@@ -407,7 +407,7 @@ const SCATTER_STRINGS = {
     lineLabels: '曲线标签',
     resetFilter: '重置筛选',
     overflowMixed: (count: number) => `${count} 个点已截断`,
-    overflowCost: (count: number, limit: number) => `${count} 个点 > $${limit}/M`,
+    overflowCost: (count: number, limit: number) => `${count} 个点 > $${limit}/Mtok`,
     overflowLatency: (count: number, limit: number) => `${count} 个点 > ${limit}s TTFT`,
   },
 } as const;

From 8d05a25f45459331496a3b920bc2d6d46e9d6c25 Mon Sep 17 00:00:00 2001
From: adibarra <93070681+adibarra@users.noreply.github.com>
Date: Fri, 31 Jul 2026 00:25:41 -0500
Subject: [PATCH 6/6] fix: correct overflow counts and labels
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

中文：按箭头方向统计越界点，并确保底部箭头的标签保持在箭头下方。
---
 .../src/components/inference/ui/ScatterGraph.tsx |  2 +-
 .../utils/overflowContinuations.test.ts          | 16 ++++++++++++++++
 .../inference/utils/overflowContinuations.ts     | 10 ++++++++--
 3 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/packages/app/src/components/inference/ui/ScatterGraph.tsx b/packages/app/src/components/inference/ui/ScatterGraph.tsx
index 4dd46202c..7fa4eb46d 100644
--- a/packages/app/src/components/inference/ui/ScatterGraph.tsx
+++ b/packages/app/src/components/inference/ui/ScatterGraph.tsx
@@ -2756,7 +2756,7 @@ const ScatterGraph = React.memo(
             .attr('display', null)
             .attr('data-testid', 'overflow-continuation-label')
             .attr('x', geometry.x2 + (labelToRight ? 12 : -12))
-            .attr('y', Math.max(12, Math.min(ctx.height - 4, geometry.y2 + 18)))
+            .attr('y', Math.max(12, geometry.y2 + 18))
             .attr('text-anchor', labelToRight ? 'start' : 'end')
             .attr('fill', color)
             .attr('stroke', ir.getCssColor('--background'))
diff --git a/packages/app/src/components/inference/utils/overflowContinuations.test.ts b/packages/app/src/components/inference/utils/overflowContinuations.test.ts
index ccb566269..82f8c434b 100644
--- a/packages/app/src/components/inference/utils/overflowContinuations.test.ts
+++ b/packages/app/src/components/inference/utils/overflowContinuations.test.ts
@@ -44,6 +44,22 @@ describe('buildFrontierContinuations', () => {
     ]);
   });
 
+  it('counts clipped points only on the continuation side', () => {
+    const costClipped = point(10, 8);
+    const visible = point(40, 4);
+    const latencyClipped = point(90, 2);
+    const mixedClipped = point(100, 1);
+    const clipped: ClippedInferenceData[] = [
+      { point: costClipped, reasons: ['cost'] },
+      { point: latencyClipped, reasons: ['latency'] },
+      { point: mixedClipped, reasons: ['cost', 'latency'] },
+    ];
+
+    const result = buildFrontierContinuations([visible], clipped, 'lower_left');
+
+    expect(result.map((entry) => entry.hiddenPointCount)).toEqual([1, 2]);
+  });
+
   it('interpolates through consecutive clipped frontier points', () => {
     const controlPoint = point(5, 6);
     const visible = point(10, 5);
diff --git a/packages/app/src/components/inference/utils/overflowContinuations.ts b/packages/app/src/components/inference/utils/overflowContinuations.ts
index 84dd519ee..65874e299 100644
--- a/packages/app/src/components/inference/utils/overflowContinuations.ts
+++ b/packages/app/src/components/inference/utils/overflowContinuations.ts
@@ -56,8 +56,14 @@ export function buildFrontierContinuations(
       }
       cursor += step;
     }
-    const hiddenPointCount = clipped.filter((entry) =>
-      entry.reasons.some((reason) => reasons.has(reason)),
+    const xDirection = Math.sign(toward.x - from.x);
+    const yDirection = Math.sign(toward.y - from.y);
+    const hiddenPointCount = clipped.filter(
+      (entry) =>
+        entry.reasons.some((reason) => reasons.has(reason)) &&
+        (xDirection === 0
+          ? Math.sign(entry.point.y - from.y) === yDirection
+          : Math.sign(entry.point.x - from.x) === xDirection),
     ).length;
 
     const controlIndex = leftVisible ? index - 1 : index + 2;