From e2213e6491ddc4cc0a69248f68dae8ff2ca3b9ce Mon Sep 17 00:00:00 2001
From: Kyle Bernhardy <kyle@harperdb.io>
Date: Tue, 14 Jul 2026 20:54:32 -0600
Subject: [PATCH 1/3] feat(status): add KPI stat strip to the Health tab
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds a row of five stat tiles above the Health tab's panel grid — CPU
(p95, harper+user scopes summed), heap used, main-thread utilization,
error rate, and request p95 — so "is anything wrong right now?" reads at
a glance. Each tile shows the latest-bucket cluster value, a delta vs
the previous window of equal length (arrow + %, up-is-bad coloring), and
an axis-less inline-SVG sparkline of the current window; em-dash + no
delta when data is absent, skeletons while loading.

Tiles reuse useAnalyticsRecords + runPipeline: the current-window fetch
passes exactly the panels' arguments so it lands on their existing query
key (react-query dedupes to one POST); the shifted previous-window query
is the only new key — at most one extra get_analytics POST per metric
per window slide, and it shares the key prefix StatusTabs' in-flight
refresh guard scans. The error-rate tile projects 1 − total/count per
record under count-weighted-mean, which collapses algebraically to the
Σ-correct (Σcount − Σtotal)/Σcount — same arithmetic as the derived
error-rate panel.

Fixes #1457
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UZEaYdKFXuQw2Hf6XpPdEV
---
 .../status/analytics/tabs/HealthTab.tsx       |   8 +-
 .../analytics/tabs/kpi/KpiSparkline.tsx       |  72 ++++++
 .../status/analytics/tabs/kpi/KpiStrip.tsx    |  12 +
 .../analytics/tabs/kpi/KpiTile.test.tsx       | 216 ++++++++++++++++++
 .../status/analytics/tabs/kpi/KpiTile.tsx     |  65 ++++++
 .../status/analytics/tabs/kpi/kpiMath.test.ts | 116 ++++++++++
 .../status/analytics/tabs/kpi/kpiMath.ts      |  93 ++++++++
 .../analytics/tabs/kpi/kpiTiles.test.ts       |  79 +++++++
 .../status/analytics/tabs/kpi/kpiTiles.ts     | 148 ++++++++++++
 .../analytics/tabs/kpi/useKpiTileData.ts      |  82 +++++++
 10 files changed, 889 insertions(+), 2 deletions(-)
 create mode 100644 src/features/instance/status/analytics/tabs/kpi/KpiSparkline.tsx
 create mode 100644 src/features/instance/status/analytics/tabs/kpi/KpiStrip.tsx
 create mode 100644 src/features/instance/status/analytics/tabs/kpi/KpiTile.test.tsx
 create mode 100644 src/features/instance/status/analytics/tabs/kpi/KpiTile.tsx
 create mode 100644 src/features/instance/status/analytics/tabs/kpi/kpiMath.test.ts
 create mode 100644 src/features/instance/status/analytics/tabs/kpi/kpiMath.ts
 create mode 100644 src/features/instance/status/analytics/tabs/kpi/kpiTiles.test.ts
 create mode 100644 src/features/instance/status/analytics/tabs/kpi/kpiTiles.ts
 create mode 100644 src/features/instance/status/analytics/tabs/kpi/useKpiTileData.ts

diff --git a/src/features/instance/status/analytics/tabs/HealthTab.tsx b/src/features/instance/status/analytics/tabs/HealthTab.tsx
index 645c6b483..c3e15710e 100644
--- a/src/features/instance/status/analytics/tabs/HealthTab.tsx
+++ b/src/features/instance/status/analytics/tabs/HealthTab.tsx
@@ -1,3 +1,4 @@
+import { KpiStrip } from './kpi/KpiStrip';
 import { MetricPanel } from './MetricPanel';
 
 const METRICS = [
@@ -10,8 +11,11 @@ const METRICS = [
 
 export function HealthTab() {
 	return (
-		<div className="grid grid-cols-1 xl:grid-cols-2 gap-4">
-			{METRICS.map((m) => <MetricPanel key={m} metric={m} />)}
+		<div className="flex flex-col gap-4">
+			<KpiStrip />
+			<div className="grid grid-cols-1 xl:grid-cols-2 gap-4">
+				{METRICS.map((m) => <MetricPanel key={m} metric={m} />)}
+			</div>
 		</div>
 	);
 }
diff --git a/src/features/instance/status/analytics/tabs/kpi/KpiSparkline.tsx b/src/features/instance/status/analytics/tabs/kpi/KpiSparkline.tsx
new file mode 100644
index 000000000..82238228a
--- /dev/null
+++ b/src/features/instance/status/analytics/tabs/kpi/KpiSparkline.tsx
@@ -0,0 +1,72 @@
+import type { KpiPoint } from './kpiMath';
+
+interface Props {
+	points: KpiPoint[];
+	/** Full current-window bounds, so a half-empty window draws half a line
+	 *  instead of stretching the data to fill the tile. */
+	xDomain: [number, number];
+}
+
+const VIEW_W = 120;
+const VIEW_H = 32;
+/** Inset so the stroke isn't clipped at the extremes. */
+const PAD_Y = 2;
+
+/** Axis-less inline-SVG sparkline for the KPI tiles. Decorative only
+ *  (aria-hidden) — the tile's value + delta carry the information. Drawn in
+ *  the muted de-emphasis hue with the final segment in the accent chart hue
+ *  so "now" reads at a glance in both themes. */
+export function KpiSparkline({ points, xDomain }: Props) {
+	if (points.length < 2) { return <div className="h-8" aria-hidden="true" />; }
+
+	const [x0, x1] = xDomain;
+	const xSpan = x1 - x0 || 1;
+	let yMin = Infinity;
+	let yMax = -Infinity;
+	for (const p of points) {
+		if (p.y < yMin) { yMin = p.y; }
+		if (p.y > yMax) { yMax = p.y; }
+	}
+	// Flat series: center the line rather than dividing by zero.
+	const ySpan = yMax - yMin || 1;
+
+	const toXY = (p: KpiPoint): [number, number] => [
+		((p.x - x0) / xSpan) * VIEW_W,
+		yMax === yMin
+			? VIEW_H / 2
+			: PAD_Y + (1 - (p.y - yMin) / ySpan) * (VIEW_H - 2 * PAD_Y),
+	];
+
+	const coords = points.map(toXY);
+	const toPath = (cs: [number, number][]): string =>
+		cs.map(([x, y], i) => `${i === 0 ? 'M' : 'L'}${x.toFixed(2)},${y.toFixed(2)}`).join(' ');
+
+	return (
+		<svg
+			viewBox={`0 0 ${VIEW_W} ${VIEW_H}`}
+			preserveAspectRatio="none"
+			className="h-8 w-full text-muted-foreground/60"
+			aria-hidden="true"
+			focusable="false"
+		>
+			<path
+				d={toPath(coords.slice(0, -1))}
+				fill="none"
+				stroke="currentColor"
+				strokeWidth={1.5}
+				vectorEffect="non-scaling-stroke"
+				strokeLinejoin="round"
+				strokeLinecap="round"
+			/>
+			<path
+				d={toPath(coords.slice(-2))}
+				fill="none"
+				stroke="var(--chart-node-1)"
+				strokeWidth={1.5}
+				vectorEffect="non-scaling-stroke"
+				strokeLinejoin="round"
+				strokeLinecap="round"
+			/>
+		</svg>
+	);
+}
diff --git a/src/features/instance/status/analytics/tabs/kpi/KpiStrip.tsx b/src/features/instance/status/analytics/tabs/kpi/KpiStrip.tsx
new file mode 100644
index 000000000..06494642d
--- /dev/null
+++ b/src/features/instance/status/analytics/tabs/kpi/KpiStrip.tsx
@@ -0,0 +1,12 @@
+import { KpiTile } from './KpiTile';
+import { KPI_TILES } from './kpiTiles';
+
+/** The Health tab's at-a-glance vitals row: five stat tiles above the panel
+ *  grid (see kpiTiles.ts for the metric definitions). */
+export function KpiStrip() {
+	return (
+		<div className="grid grid-cols-2 gap-4 sm:grid-cols-3 xl:grid-cols-5" data-testid="kpi-strip">
+			{KPI_TILES.map((def) => <KpiTile key={def.id} def={def} />)}
+		</div>
+	);
+}
diff --git a/src/features/instance/status/analytics/tabs/kpi/KpiTile.test.tsx b/src/features/instance/status/analytics/tabs/kpi/KpiTile.test.tsx
new file mode 100644
index 000000000..f4e1efa4e
--- /dev/null
+++ b/src/features/instance/status/analytics/tabs/kpi/KpiTile.test.tsx
@@ -0,0 +1,216 @@
+/** @vitest-environment jsdom */
+import type { InstanceClientIdConfig, InstanceTypeConfig } from '@/config/instanceClientConfig';
+import { getRawAnalyticsQueryOptions } from '@/integrations/api/instance/status/getAnalytics';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { render, screen, waitFor } from '@testing-library/react';
+import type { ReactNode } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { AnalyticsProvider } from '../../context/AnalyticsContext';
+import { useAnalyticsRecords } from '../../hooks/useAnalyticsRecords';
+import { KpiSparkline } from './KpiSparkline';
+import { KpiStrip } from './KpiStrip';
+import { KpiTile } from './KpiTile';
+import { KPI_TILES } from './kpiTiles';
+
+// Window under test: [240s, 360s], so the previous window is [120s, 240s]
+// and the label math yields "2m".
+const START = 240_000;
+const END = 360_000;
+const BUCKET = 60_000;
+
+const durationTile = KPI_TILES.find((t) => t.id === 'p95-duration')!;
+
+interface PostBody {
+	metric: string;
+	start_time: number;
+	end_time: number;
+}
+
+function makeInstanceParams(
+	handler: (body: PostBody) => unknown[] | Promise<unknown[]>,
+): InstanceClientIdConfig & InstanceTypeConfig {
+	const post = vi.fn(async (_url: string, body: PostBody) => ({ data: await handler(body) }));
+	return {
+		instanceClient: { post } as never,
+		entityId: 'inst-A' as never,
+		entityType: 'instance',
+	};
+}
+
+function makeWrapper(instanceParams: InstanceClientIdConfig & InstanceTypeConfig): {
+	Wrapper: ({ children }: { children: ReactNode }) => ReactNode;
+	client: QueryClient;
+} {
+	const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+	const Wrapper = ({ children }: { children: ReactNode }) => (
+		<QueryClientProvider client={client}>
+			<AnalyticsProvider
+				value={{
+					timeRange: { startTime: START, endTime: END },
+					bucketMs: BUCKET,
+					instanceParams,
+				}}
+			>
+				{children}
+			</AnalyticsProvider>
+		</QueryClientProvider>
+	);
+	return { Wrapper, client };
+}
+
+const CUR_ROWS = [
+	{ time: 300_000, node: 'n1', period: 60_000, path: '/a', count: 100, p95: 10 },
+	{ time: 360_000, node: 'n1', period: 60_000, path: '/a', count: 100, p95: 20 },
+];
+const PREV_ROWS = [
+	{ time: 180_000, node: 'n1', period: 60_000, path: '/a', count: 100, p95: 10 },
+];
+
+/** Current window → CUR_ROWS, previous window → PREV_ROWS. */
+function twoWindowHandler(body: PostBody): unknown[] {
+	return body.start_time === START ? CUR_ROWS : PREV_ROWS;
+}
+
+describe('KpiTile', () => {
+	it('renders the latest-bucket value and the delta vs the previous window', async () => {
+		const params = makeInstanceParams(twoWindowHandler);
+		const { Wrapper } = makeWrapper(params);
+		render(<KpiTile def={durationTile} />, { wrapper: Wrapper });
+
+		// Latest bucket p95 = 20 → "20.0 ms"; window means 15 vs 10 → +50%.
+		await waitFor(() => expect(screen.getByText('20.0 ms')).toBeTruthy());
+		expect(screen.getByLabelText('up +50.0% vs previous 2m')).toBeTruthy();
+		expect(screen.getByText('+50.0%')).toBeTruthy();
+	});
+
+	it('shows an em-dash and no delta when data is absent', async () => {
+		const params = makeInstanceParams(() => []);
+		const { Wrapper } = makeWrapper(params);
+		render(<KpiTile def={durationTile} />, { wrapper: Wrapper });
+
+		await waitFor(() => expect(screen.getByText('—')).toBeTruthy());
+		expect(screen.queryByText(/vs prev/)).toBeNull();
+	});
+
+	it('shows the value but no delta when only the previous window is empty', async () => {
+		const params = makeInstanceParams((body) => (body.start_time === START ? CUR_ROWS : []));
+		const { Wrapper } = makeWrapper(params);
+		render(<KpiTile def={durationTile} />, { wrapper: Wrapper });
+
+		await waitFor(() => expect(screen.getByText('20.0 ms')).toBeTruthy());
+		expect(screen.queryByText(/vs prev/)).toBeNull();
+	});
+
+	it('renders a labeled loading skeleton while the current window is in flight', () => {
+		const params = makeInstanceParams(() => new Promise<unknown[]>(() => {}));
+		const { Wrapper } = makeWrapper(params);
+		render(<KpiTile def={durationTile} />, { wrapper: Wrapper });
+
+		const status = screen.getByRole('status');
+		expect(status.getAttribute('aria-label')).toBe(`Loading ${durationTile.label}`);
+	});
+
+	it("keys the current window on the panels' query-key convention and the previous window on a shifted copy", async () => {
+		const params = makeInstanceParams(twoWindowHandler);
+		const { Wrapper, client } = makeWrapper(params);
+		render(<KpiTile def={durationTile} />, { wrapper: Wrapper });
+		await waitFor(() => expect(screen.getByText('20.0 ms')).toBeTruthy());
+
+		const keys = client.getQueryCache().getAll().map((q) => JSON.stringify(q.queryKey));
+		// Exactly what MetricPanel's useAnalyticsRecords would key for this
+		// metric + window — byte-identical, so react-query dedupes the POST.
+		const panelKey = JSON.stringify(
+			getRawAnalyticsQueryOptions({
+				metric: durationTile.metric,
+				startTime: START,
+				endTime: END,
+				instanceParams: params,
+				bucketMs: BUCKET,
+			}).queryKey,
+		);
+		const previousKey = JSON.stringify(
+			getRawAnalyticsQueryOptions({
+				metric: durationTile.metric,
+				startTime: START - (END - START),
+				endTime: START,
+				instanceParams: params,
+				bucketMs: BUCKET,
+			}).queryKey,
+		);
+		expect(keys).toContain(panelKey);
+		expect(keys).toContain(previousKey);
+		expect(panelKey).not.toBe(previousKey);
+		expect(keys).toHaveLength(2);
+	});
+
+	it('dedupes the current-window POST with a mounted panel hook — one extra POST total', async () => {
+		const params = makeInstanceParams(twoWindowHandler);
+		const { Wrapper } = makeWrapper(params);
+
+		// Stand-in for MetricPanel's fetch: same metric/window/bucket args
+		// (requiredFields does not participate in the query key).
+		function PanelProbe() {
+			useAnalyticsRecords({
+				metric: durationTile.metric,
+				startTime: START,
+				endTime: END,
+				instanceParams: params,
+				bucketMs: BUCKET,
+				requiredFields: ['p95'],
+			});
+			return null;
+		}
+
+		render(
+			<>
+				<PanelProbe />
+				<KpiTile def={durationTile} />
+			</>,
+			{ wrapper: Wrapper },
+		);
+		await waitFor(() => expect(screen.getByText('20.0 ms')).toBeTruthy());
+
+		const post = params.instanceClient.post as unknown as ReturnType<typeof vi.fn>;
+		const bodies = post.mock.calls.map((c) => c[1] as PostBody);
+		// One POST for the shared current window, one for the previous window.
+		expect(bodies.filter((b) => b.start_time === START && b.end_time === END)).toHaveLength(1);
+		expect(bodies).toHaveLength(2);
+	});
+});
+
+describe('KpiSparkline', () => {
+	it('centers a flat series instead of dividing by zero', () => {
+		const { container } = render(
+			<KpiSparkline points={[{ x: 0, y: 5 }, { x: 100, y: 5 }]} xDomain={[0, 100]} />,
+		);
+		const paths = container.querySelectorAll('path');
+		expect(paths.length).toBe(2);
+		for (const d of [...paths].map((p) => p.getAttribute('d') ?? '')) {
+			// VIEW_H / 2 = 16 for every y coordinate.
+			expect(d.match(/,(\d+\.\d+)/g)?.every((m) => m === ',16.00')).toBe(true);
+		}
+	});
+
+	it('renders no svg with fewer than 2 points', () => {
+		const { container } = render(<KpiSparkline points={[{ x: 0, y: 5 }]} xDomain={[0, 100]} />);
+		expect(container.querySelector('svg')).toBeNull();
+	});
+});
+
+describe('KpiStrip', () => {
+	it('renders all five tiles with identical treatment (symmetry audit)', async () => {
+		const params = makeInstanceParams(() => []);
+		const { Wrapper } = makeWrapper(params);
+		render(<KpiStrip />, { wrapper: Wrapper });
+
+		// Every tile resolves to the same absent-data state: em-dash, no delta.
+		await waitFor(() => expect(screen.getAllByText('—')).toHaveLength(KPI_TILES.length));
+		for (const def of KPI_TILES) {
+			expect(screen.getByText(def.label)).toBeTruthy();
+		}
+		expect(screen.queryByText(/vs prev/)).toBeNull();
+		// 5 metrics × (current + previous window) POSTs, nothing more.
+		const post = params.instanceClient.post as unknown as ReturnType<typeof vi.fn>;
+		expect(post.mock.calls).toHaveLength(KPI_TILES.length * 2);
+	});
+});
diff --git a/src/features/instance/status/analytics/tabs/kpi/KpiTile.tsx b/src/features/instance/status/analytics/tabs/kpi/KpiTile.tsx
new file mode 100644
index 000000000..5935c1a7d
--- /dev/null
+++ b/src/features/instance/status/analytics/tabs/kpi/KpiTile.tsx
@@ -0,0 +1,65 @@
+import { Card } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+import { formatValue } from '@/lib/formatValue';
+import { ArrowDown, ArrowUp, Minus } from 'lucide-react';
+import { formatWindowLabel, type KpiDelta } from './kpiMath';
+import { KpiSparkline } from './KpiSparkline';
+import type { KpiTileDef } from './kpiTiles';
+import { useKpiTileData } from './useKpiTileData';
+
+/** One stat tile: label, latest-bucket value, delta vs the previous window,
+ *  current-window sparkline. Data absent → em-dash value, no delta, empty
+ *  sparkline; loading → skeleton. */
+export function KpiTile({ def }: { def: KpiTileDef }) {
+	const { latest, delta, sparkPoints, isLoading, timeRange, windowMs } = useKpiTileData(def);
+
+	return (
+		<Card className="gap-2 py-4">
+			<div className="flex min-w-0 flex-col gap-1 px-4">
+				<div className="truncate text-xs text-muted-foreground">{def.label}</div>
+				{isLoading
+					? (
+						<div role="status" aria-live="polite" aria-label={`Loading ${def.label}`} className="flex flex-col gap-2">
+							<Skeleton className="h-7 w-20" />
+							<Skeleton className="h-4 w-24" />
+							<Skeleton className="h-8 w-full" />
+						</div>
+					)
+					: (
+						<>
+							<div className="text-2xl font-semibold leading-tight">
+								{formatValue(latest, def.formatter)}
+							</div>
+							<DeltaRow delta={latest === null ? null : delta} windowMs={windowMs} />
+							<KpiSparkline points={sparkPoints} xDomain={[timeRange.startTime, timeRange.endTime]} />
+						</>
+					)}
+			</div>
+		</Card>
+	);
+}
+
+/** Delta line under the value. All strip vitals are up-is-bad (see
+ *  kpiTiles.ts), so up wears destructive and down wears green. Height is
+ *  reserved when the delta is unavailable so the five tiles stay aligned. */
+function DeltaRow({ delta, windowMs }: { delta: KpiDelta | null; windowMs: number }) {
+	if (!delta) { return <div className="h-4" aria-hidden="true" />; }
+	const windowLabel = formatWindowLabel(windowMs);
+	const pctText = `${delta.pct >= 0 ? '+' : ''}${delta.pct.toFixed(1)}%`;
+	const color = delta.direction === 'up'
+		? 'text-destructive'
+		: delta.direction === 'down'
+		? 'text-green'
+		: 'text-muted-foreground';
+	const Icon = delta.direction === 'up' ? ArrowUp : delta.direction === 'down' ? ArrowDown : Minus;
+	return (
+		<div
+			className="flex h-4 items-center gap-1 text-xs"
+			aria-label={`${delta.direction} ${pctText} vs previous ${windowLabel}`}
+		>
+			<Icon className={`size-3 shrink-0 ${color}`} aria-hidden="true" />
+			<span className={`font-medium ${color}`}>{pctText}</span>
+			<span className="truncate text-muted-foreground">vs prev {windowLabel}</span>
+		</div>
+	);
+}
diff --git a/src/features/instance/status/analytics/tabs/kpi/kpiMath.test.ts b/src/features/instance/status/analytics/tabs/kpi/kpiMath.test.ts
new file mode 100644
index 000000000..a8e8e3c81
--- /dev/null
+++ b/src/features/instance/status/analytics/tabs/kpi/kpiMath.test.ts
@@ -0,0 +1,116 @@
+import { describe, expect, it } from 'vitest';
+import type { SeriesData } from '../../types/analytics';
+import { collapseSeries, computeDelta, formatWindowLabel, latestValue, windowMean } from './kpiMath';
+
+function seriesData(series: { key: string; points: { x: number; y: number | null }[] }[]): SeriesData {
+	return { series: series.map((s) => ({ ...s, label: s.key })) };
+}
+
+describe('collapseSeries', () => {
+	it('sums multiple series per bucket (CPU harper + user scopes)', () => {
+		const data = seriesData([
+			{ key: 'harper', points: [{ x: 1, y: 0.2 }, { x: 2, y: 0.3 }] },
+			{ key: 'user', points: [{ x: 1, y: 0.1 }, { x: 2, y: 0.2 }] },
+		]);
+		expect(collapseSeries(data, 'sum')).toEqual([
+			{ x: 1, y: expect.closeTo(0.3, 10) },
+			{ x: 2, y: 0.5 },
+		]);
+	});
+
+	it('means multiple series per bucket', () => {
+		const data = seriesData([
+			{ key: 'a', points: [{ x: 1, y: 10 }] },
+			{ key: 'b', points: [{ x: 1, y: 30 }] },
+		]);
+		expect(collapseSeries(data, 'mean')).toEqual([{ x: 1, y: 20 }]);
+	});
+
+	it('drops null ys and omits buckets with no finite value', () => {
+		const data = seriesData([
+			{ key: 'a', points: [{ x: 1, y: null }, { x: 2, y: 4 }, { x: 3, y: Number.NaN }] },
+		]);
+		expect(collapseSeries(data, 'mean')).toEqual([{ x: 2, y: 4 }]);
+	});
+
+	it('sorts output by time even when series points interleave', () => {
+		const data = seriesData([
+			{ key: 'a', points: [{ x: 3, y: 3 }, { x: 1, y: 1 }] },
+			{ key: 'b', points: [{ x: 2, y: 2 }] },
+		]);
+		expect(collapseSeries(data, 'mean').map((p) => p.x)).toEqual([1, 2, 3]);
+	});
+
+	it('returns [] for empty series data', () => {
+		expect(collapseSeries(seriesData([]), 'sum')).toEqual([]);
+	});
+});
+
+describe('latestValue / windowMean', () => {
+	it('latestValue reads the last (most recent) bucket', () => {
+		expect(latestValue([{ x: 1, y: 5 }, { x: 2, y: 7 }])).toBe(7);
+	});
+
+	it('both return null on an empty window', () => {
+		expect(latestValue([])).toBeNull();
+		expect(windowMean([])).toBeNull();
+	});
+
+	it('windowMean is the plain mean of bucket values', () => {
+		expect(windowMean([{ x: 1, y: 10 }, { x: 2, y: 20 }, { x: 3, y: 30 }])).toBe(20);
+	});
+});
+
+describe('computeDelta', () => {
+	it('is null when either window has no data', () => {
+		expect(computeDelta(null, 10)).toBeNull();
+		expect(computeDelta(10, null)).toBeNull();
+		expect(computeDelta(null, null)).toBeNull();
+	});
+
+	it('computes signed relative change with direction', () => {
+		expect(computeDelta(15, 10)).toEqual({ pct: 50, direction: 'up' });
+		expect(computeDelta(5, 10)).toEqual({ pct: -50, direction: 'down' });
+	});
+
+	it('previous=0, current=0 → flat 0% (a real "still zero" reading)', () => {
+		expect(computeDelta(0, 0)).toEqual({ pct: 0, direction: 'flat' });
+	});
+
+	it('previous=0 with nonzero current → null (relative change undefined)', () => {
+		expect(computeDelta(5, 0)).toBeNull();
+	});
+
+	it('uses |previous| so a negative baseline keeps the sign of the change', () => {
+		expect(computeDelta(-5, -10)).toEqual({ pct: 50, direction: 'up' });
+	});
+
+	it('treats sub-epsilon changes as flat', () => {
+		const d = computeDelta(10.000001, 10);
+		expect(d?.direction).toBe('flat');
+	});
+
+	it('rejects non-finite inputs', () => {
+		expect(computeDelta(Infinity, 10)).toBeNull();
+		expect(computeDelta(10, Number.NaN)).toBeNull();
+	});
+});
+
+describe('formatWindowLabel', () => {
+	const MIN = 60_000;
+	const HOUR = 60 * MIN;
+	const DAY = 24 * HOUR;
+
+	it('formats the shipped presets compactly', () => {
+		expect(formatWindowLabel(HOUR)).toBe('1h');
+		expect(formatWindowLabel(6 * HOUR)).toBe('6h');
+		expect(formatWindowLabel(DAY)).toBe('24h');
+		expect(formatWindowLabel(7 * DAY)).toBe('7d');
+		expect(formatWindowLabel(30 * DAY)).toBe('30d');
+	});
+
+	it('falls back to minutes for irregular windows', () => {
+		expect(formatWindowLabel(2 * MIN)).toBe('2m');
+		expect(formatWindowLabel(90 * MIN)).toBe('90m');
+	});
+});
diff --git a/src/features/instance/status/analytics/tabs/kpi/kpiMath.ts b/src/features/instance/status/analytics/tabs/kpi/kpiMath.ts
new file mode 100644
index 000000000..8e6f6fd80
--- /dev/null
+++ b/src/features/instance/status/analytics/tabs/kpi/kpiMath.ts
@@ -0,0 +1,93 @@
+// Pure math for the Health-tab KPI stat strip: collapse a pipeline SeriesData
+// into one cluster-level point list, then reduce it to the tile's headline
+// (latest bucket), window aggregate (mean of buckets), and the delta vs the
+// previous window. Kept free of React/query imports so it unit-tests plain.
+
+import type { SeriesData } from '../../types/analytics';
+
+export interface KpiPoint {
+	x: number;
+	y: number;
+}
+
+/** How multi-series pipeline output folds into the tile's single line.
+ *  `sum` is for breakdowns whose parts add up to a meaningful total (CPU
+ *  harper + user scopes); `mean` for everything else (and a no-op for
+ *  single-series field specs). */
+export type KpiCombine = 'sum' | 'mean';
+
+/** Collapse cluster-aggregate SeriesData into one point per time bucket.
+ *  Non-finite ys are dropped; a bucket with no finite value across all
+ *  series is omitted entirely (the sparkline connects across it). */
+export function collapseSeries(data: SeriesData, combine: KpiCombine): KpiPoint[] {
+	const byX = new Map<number, number[]>();
+	for (const s of data.series) {
+		for (const p of s.points) {
+			if (typeof p.y === 'number' && Number.isFinite(p.y)) {
+				let ys = byX.get(p.x);
+				if (!ys) {
+					ys = [];
+					byX.set(p.x, ys);
+				}
+				ys.push(p.y);
+			}
+		}
+	}
+	return [...byX.entries()]
+		.sort((a, b) => a[0] - b[0])
+		.map(([x, ys]) => {
+			const total = ys.reduce((a, b) => a + b, 0);
+			return { x, y: combine === 'sum' ? total : total / ys.length };
+		});
+}
+
+/** Headline value: the most recent bucket's y. Null when the window is empty. */
+export function latestValue(points: KpiPoint[]): number | null {
+	return points.length > 0 ? points[points.length - 1].y : null;
+}
+
+/** Window aggregate feeding the delta: plain mean of the bucket values.
+ *  Buckets are period-spaced, so this approximates the time-mean without
+ *  re-weighting. Null when the window is empty. */
+export function windowMean(points: KpiPoint[]): number | null {
+	if (points.length === 0) { return null; }
+	return points.reduce((a, p) => a + p.y, 0) / points.length;
+}
+
+export interface KpiDelta {
+	/** Relative change in percent: (current − previous) / |previous| × 100. */
+	pct: number;
+	direction: 'up' | 'down' | 'flat';
+}
+
+/** |pct| below this renders as 'flat' — a ±0.0% arrow is noise, not signal. */
+const FLAT_EPSILON_PCT = 0.05;
+
+/** Delta of the current window vs the previous window of equal length.
+ *  Returns null when either window has no data, or when previous === 0 with
+ *  a nonzero current (relative change is undefined — the tile shows no
+ *  delta rather than an infinity). previous === current === 0 is a real
+ *  "still zero" reading and reports flat 0%. */
+export function computeDelta(current: number | null, previous: number | null): KpiDelta | null {
+	if (current === null || previous === null) { return null; }
+	if (!Number.isFinite(current) || !Number.isFinite(previous)) { return null; }
+	if (previous === 0) {
+		return current === 0 ? { pct: 0, direction: 'flat' } : null;
+	}
+	const pct = ((current - previous) / Math.abs(previous)) * 100;
+	const direction = Math.abs(pct) < FLAT_EPSILON_PCT ? 'flat' : pct > 0 ? 'up' : 'down';
+	return { pct, direction };
+}
+
+const MIN = 60_000;
+const HOUR = 60 * MIN;
+const DAY = 24 * HOUR;
+
+/** Compact window-length label for the delta caption ("vs prev 6h").
+ *  Whole hours up to 48h stay in hours so the 24h preset reads "24h";
+ *  longer whole-day windows read in days; anything else rounds to minutes. */
+export function formatWindowLabel(durationMs: number): string {
+	if (durationMs % HOUR === 0 && durationMs <= 48 * HOUR) { return `${durationMs / HOUR}h`; }
+	if (durationMs % DAY === 0) { return `${durationMs / DAY}d`; }
+	return `${Math.max(1, Math.round(durationMs / MIN))}m`;
+}
diff --git a/src/features/instance/status/analytics/tabs/kpi/kpiTiles.test.ts b/src/features/instance/status/analytics/tabs/kpi/kpiTiles.test.ts
new file mode 100644
index 000000000..1f628b4ae
--- /dev/null
+++ b/src/features/instance/status/analytics/tabs/kpi/kpiTiles.test.ts
@@ -0,0 +1,79 @@
+import { describe, expect, it } from 'vitest';
+import { runPipeline } from '../../pipeline/pipeline';
+import type { AnalyticsDataPoint, TimeRange } from '../../types/analytics';
+import { collapseSeries } from './kpiMath';
+import { KPI_TILES } from './kpiTiles';
+
+const WINDOW: TimeRange = { startTime: 0, endTime: 600_000 };
+
+describe('KPI_TILES', () => {
+	it('defines the five vitals symmetrically (id, label, metric, spec, combine, formatter)', () => {
+		expect(KPI_TILES).toHaveLength(5);
+		expect(KPI_TILES.map((t) => t.id)).toEqual(['cpu', 'memory', 'main-thread', 'error-rate', 'p95-duration']);
+		expect(new Set(KPI_TILES.map((t) => t.metric)).size).toBe(5);
+		for (const t of KPI_TILES) {
+			expect(t.label.length).toBeGreaterThan(0);
+			expect(t.metric.length).toBeGreaterThan(0);
+			expect(['sum', 'mean']).toContain(t.combine);
+			expect(t.formatter.length).toBeGreaterThan(0);
+			expect(t.spec.aggregator).toBeDefined();
+			// Confidence suppression would blank a tile on quiet windows — the
+			// tiles show whatever data exists and let the panels do the gating.
+			expect(t.spec.confidence).toBeUndefined();
+		}
+	});
+
+	it('error-rate tile is Σ-correct (Σcount−Σtotal)/Σcount, not mean-of-ratios', () => {
+		// Canonical ratio-of-ratios fixture from pipeline/derived/error-rate.ts:
+		// Σ-correct answer ≈ 0.0188; the mean-of-ratios bug would report 0.455.
+		const def = KPI_TILES.find((t) => t.id === 'error-rate')!;
+		const records: AnalyticsDataPoint[] = [
+			{ time: 60_000, node: 'n1', period: 60_000, count: 1000, total: 990 },
+			{ time: 60_000, node: 'n1', period: 60_000, count: 10, total: 1 },
+		];
+		const points = collapseSeries(runPipeline(def.spec, records, WINDOW, []), def.combine);
+		expect(points).toHaveLength(1);
+		expect(points[0].y).toBeCloseTo(19 / 1010, 10);
+	});
+
+	it('cpu tile sums the harper + user scopes into total process CPU', () => {
+		const def = KPI_TILES.find((t) => t.id === 'cpu')!;
+		const records: AnalyticsDataPoint[] = [
+			{ time: 60_000, node: 'n1', period: 60_000, path: 'harper', count: 50, p95: 0.3 },
+			{ time: 60_000, node: 'n1', period: 60_000, path: 'user', count: 50, p95: 0.2 },
+		];
+		const points = collapseSeries(runPipeline(def.spec, records, WINDOW, []), def.combine);
+		expect(points).toHaveLength(1);
+		expect(points[0].y).toBeCloseTo(0.5, 10);
+	});
+
+	it('memory tile reads the last heapUsed per node and means across nodes', () => {
+		const def = KPI_TILES.find((t) => t.id === 'memory')!;
+		const records: AnalyticsDataPoint[] = [
+			{ time: 60_000, node: 'n1', period: 60_000, heapUsed: 100 },
+			{ time: 60_000, node: 'n2', period: 60_000, heapUsed: 300 },
+		];
+		const points = collapseSeries(runPipeline(def.spec, records, WINDOW, []), def.combine);
+		expect(points).toEqual([{ x: 60_000, y: 200 }]);
+	});
+
+	it('main-thread tile projects active / (active + idle)', () => {
+		const def = KPI_TILES.find((t) => t.id === 'main-thread')!;
+		const records: AnalyticsDataPoint[] = [
+			{ time: 60_000, node: 'n1', period: 60_000, active: 25, idle: 75 },
+		];
+		const points = collapseSeries(runPipeline(def.spec, records, WINDOW, []), def.combine);
+		expect(points).toEqual([{ x: 60_000, y: 0.25 }]);
+	});
+
+	it('p95-duration tile count-weights p95 across paths', () => {
+		const def = KPI_TILES.find((t) => t.id === 'p95-duration')!;
+		const records: AnalyticsDataPoint[] = [
+			{ time: 60_000, node: 'n1', period: 60_000, path: '/a', count: 900, p95: 10 },
+			{ time: 60_000, node: 'n1', period: 60_000, path: '/b', count: 100, p95: 110 },
+		];
+		const points = collapseSeries(runPipeline(def.spec, records, WINDOW, []), def.combine);
+		expect(points).toHaveLength(1);
+		expect(points[0].y).toBeCloseTo(20, 10); // (900·10 + 100·110) / 1000
+	});
+});
diff --git a/src/features/instance/status/analytics/tabs/kpi/kpiTiles.ts b/src/features/instance/status/analytics/tabs/kpi/kpiTiles.ts
new file mode 100644
index 000000000..ee79799d0
--- /dev/null
+++ b/src/features/instance/status/analytics/tabs/kpi/kpiTiles.ts
@@ -0,0 +1,148 @@
+// Tile definitions for the Health-tab KPI stat strip. Each tile names the
+// Harper metric it queries (the SAME metric string the corresponding panel
+// uses, so the current-window fetch dedupes with the panel's query key) and
+// a cluster-aggregate MetricSpec run through the shared runPipeline.
+//
+// Every vital here is up-is-bad (more CPU / memory / utilization / errors /
+// latency is worse), so KpiTile colors all up-deltas destructive and all
+// down-deltas green — there is no per-tile polarity flag on purpose; add one
+// if a tile ever lands where up is good.
+
+import type { ValueFormatter } from '@/lib/formatValue';
+import type { MetricSpec } from '../../types/analytics';
+import type { KpiCombine } from './kpiMath';
+
+export interface KpiTileDef {
+	id: string;
+	label: string;
+	/** Harper get_analytics metric name — must match the panel's source
+	 *  metric verbatim so react-query dedupes the current-window POST. */
+	metric: string;
+	spec: MetricSpec;
+	combine: KpiCombine;
+	formatter: ValueFormatter;
+}
+
+/** Shared boilerplate for the tile specs; the interesting part of each tile
+ *  is its `series` + aggregators. title/description/tab/primitive are
+ *  required by MetricSpec but unused by the strip (no panel chrome). */
+function tileSpec(spec: Pick<MetricSpec, 'series' | 'aggregator'> & Partial<MetricSpec>): MetricSpec {
+	return {
+		title: '',
+		description: '',
+		tab: 'health',
+		primaryDimension: 'node',
+		timestamp: 'time',
+		bucket: { source: 'period-field', fallbackMs: 60000 },
+		primitive: 'line',
+		yAxis: { unit: '' },
+		...spec,
+	};
+}
+
+export const KPI_TILES: readonly KpiTileDef[] = [
+	{
+		id: 'cpu',
+		label: 'CPU (p95)',
+		metric: 'cpu-usage',
+		// Per-scope (harper/user) count-weighted p95 — the panel's exact
+		// aggregation — then the scope series are SUMMED per bucket so the
+		// tile reads as total process CPU, not a mean of the two scopes.
+		spec: tileSpec({
+			series: {
+				kind: 'groupBy',
+				dimension: 'path',
+				field: { field: 'p95', label: 'CPU %' },
+			},
+			aggregator: { temporal: 'count-weighted-mean', crossNode: 'count-weighted-mean' },
+		}),
+		combine: 'sum',
+		formatter: 'percent',
+	},
+	{
+		id: 'memory',
+		label: 'Heap used',
+		metric: 'memory',
+		// Matches the Process memory panel: gauge semantics (temporal 'last'),
+		// mean across nodes.
+		spec: tileSpec({
+			series: { kind: 'field', fields: [{ field: 'heapUsed', label: 'heap used' }] },
+			aggregator: { temporal: 'last', crossNode: 'mean' },
+		}),
+		combine: 'mean',
+		formatter: 'bytes-si',
+	},
+	{
+		id: 'main-thread',
+		label: 'Main thread',
+		metric: 'main-thread-utilization',
+		// active / (active + idle), mean/mean — the panel's default
+		// Utilization field projection.
+		spec: tileSpec({
+			series: {
+				kind: 'field',
+				fields: [{
+					field: {
+						kind: 'op',
+						op: '/',
+						left: { kind: 'ref', field: 'active' },
+						right: {
+							kind: 'op',
+							op: '+',
+							left: { kind: 'ref', field: 'active' },
+							right: { kind: 'ref', field: 'idle' },
+						},
+					},
+					label: 'utilization',
+				}],
+			},
+			aggregator: { temporal: 'mean', crossNode: 'mean' },
+		}),
+		combine: 'mean',
+		formatter: 'percent',
+	},
+	{
+		id: 'error-rate',
+		label: 'Error rate',
+		metric: 'success',
+		// Σ-correct error rate: per-record 1 − total/count, count-weighted-mean
+		// with weight = count collapses to (Σcount − Σtotal)/Σcount exactly —
+		// the same arithmetic as the derived error-rate panel, NOT the
+		// mean-of-ratios bug it documents.
+		spec: tileSpec({
+			series: {
+				kind: 'field',
+				fields: [{
+					field: {
+						kind: 'op',
+						op: '-',
+						left: { kind: 'const', value: 1 },
+						right: {
+							kind: 'op',
+							op: '/',
+							left: { kind: 'ref', field: 'total' },
+							right: { kind: 'ref', field: 'count' },
+						},
+					},
+					label: 'error rate',
+				}],
+			},
+			aggregator: { temporal: 'count-weighted-mean', crossNode: 'count-weighted-mean' },
+		}),
+		combine: 'mean',
+		formatter: 'percent',
+	},
+	{
+		id: 'p95-duration',
+		label: 'Request p95',
+		metric: 'duration',
+		// Count-weighted p95 across all paths and nodes — the duration
+		// panel's aggregators without its top-10 path split.
+		spec: tileSpec({
+			series: { kind: 'field', fields: [{ field: 'p95', label: 'p95 duration (ms)' }] },
+			aggregator: { temporal: 'count-weighted-mean', crossNode: 'count-weighted-mean' },
+		}),
+		combine: 'mean',
+		formatter: 'ms',
+	},
+];
diff --git a/src/features/instance/status/analytics/tabs/kpi/useKpiTileData.ts b/src/features/instance/status/analytics/tabs/kpi/useKpiTileData.ts
new file mode 100644
index 000000000..7fb670800
--- /dev/null
+++ b/src/features/instance/status/analytics/tabs/kpi/useKpiTileData.ts
@@ -0,0 +1,82 @@
+import { useMemo } from 'react';
+import { useAnalyticsContext } from '../../context/AnalyticsContext';
+import { useAnalyticsRecords } from '../../hooks/useAnalyticsRecords';
+import { runPipeline } from '../../pipeline/pipeline';
+import type { TimeRange } from '../../types/analytics';
+import { collapseSeries, computeDelta, type KpiDelta, type KpiPoint, latestValue, windowMean } from './kpiMath';
+import type { KpiTileDef } from './kpiTiles';
+
+export interface KpiTileData {
+	/** Latest-bucket cluster value; null when the window has no data (the
+	 *  tile renders an em-dash and no delta). */
+	latest: number | null;
+	/** Current-window mean vs previous-window mean; null while the previous
+	 *  window is loading, errored, empty, or the ratio is undefined. */
+	delta: KpiDelta | null;
+	/** Collapsed current-window points feeding the sparkline. */
+	sparkPoints: KpiPoint[];
+	/** Current-window fetch in flight — the tile shows its skeleton. */
+	isLoading: boolean;
+	timeRange: TimeRange;
+	windowMs: number;
+}
+
+/** Data for one KPI tile: the current window plus the previous window of
+ *  equal length, each through the shared spec pipeline.
+ *
+ *  Query accounting — the strip's dedupe contract (#1457): the
+ *  current-window call passes exactly the arguments MetricPanel passes
+ *  (same metric string, same context timeRange/bucketMs, no conditions), so
+ *  it lands on the panels' existing query key and react-query serves both
+ *  from one POST. The previous-window call is the only new key — at most
+ *  one extra POST per metric per window slide. Its key shares
+ *  ANALYTICS_QUERY_KEY_PREFIX + instanceId, so StatusTabs' in-flight
+ *  refresh guard covers it too. */
+export function useKpiTileData(def: KpiTileDef): KpiTileData {
+	const { timeRange, bucketMs, instanceParams } = useAnalyticsContext();
+	const windowMs = timeRange.endTime - timeRange.startTime;
+
+	const current = useAnalyticsRecords({
+		metric: def.metric,
+		startTime: timeRange.startTime,
+		endTime: timeRange.endTime,
+		instanceParams,
+		bucketMs,
+	});
+	const previous = useAnalyticsRecords({
+		metric: def.metric,
+		startTime: timeRange.startTime - windowMs,
+		endTime: timeRange.startTime,
+		instanceParams,
+		bucketMs,
+	});
+
+	const sparkPoints = useMemo<KpiPoint[]>(() => {
+		if (current.isError) { return []; }
+		return collapseSeries(
+			runPipeline(def.spec, current.data, timeRange, [], { snapToPeriod: true }),
+			def.combine,
+		);
+	}, [def, current.data, current.isError, timeRange]);
+
+	const previousMean = useMemo<number | null>(() => {
+		if (previous.isLoading || previous.isError) { return null; }
+		const prevRange: TimeRange = {
+			startTime: timeRange.startTime - windowMs,
+			endTime: timeRange.startTime,
+		};
+		return windowMean(collapseSeries(
+			runPipeline(def.spec, previous.data, prevRange, [], { snapToPeriod: true }),
+			def.combine,
+		));
+	}, [def, previous.data, previous.isLoading, previous.isError, timeRange.startTime, windowMs]);
+
+	return {
+		latest: latestValue(sparkPoints),
+		delta: computeDelta(windowMean(sparkPoints), previousMean),
+		sparkPoints,
+		isLoading: current.isLoading,
+		timeRange,
+		windowMs,
+	};
+}

From cda364e2b61334440a40695e2a5c38cb0751e8ed Mon Sep 17 00:00:00 2001
From: Kyle Bernhardy <kyle@harperdb.io>
Date: Tue, 14 Jul 2026 22:15:39 -0600
Subject: [PATCH 2/3] fix(status): correct KPI CPU scope summing,
 placeholder-phase deltas, and prev-window caching

- CPU tile: constrain the scope sum to the harper/user dims via a new
  includeDims on KpiTileDef. The profiler also emits per-hot-function-
  location cpu-usage records (>100 hits at one location) whose samples
  are already counted inside the harper/user scope totals, so summing
  every 'path' dim double-counted CPU on busy nodes. A bucket missing
  an expected scope now gaps instead of presenting a partial sum as
  the total.

- Delta: useAnalyticsRecords now exposes isPlaceholderData, and the
  tile only computes a fresh delta when BOTH windows hold settled
  (non-placeholder) data, holding the last settled delta otherwise.
  Previously each refresh tick had a settle-gap where keepPreviousData
  kept isLoading false while one side still held the older window's
  rows, so computeDelta paired mismatched windows and flipped the
  arrow through a bogus near-zero reading.

- Previous window: quantize its boundaries to the bucket grid so
  consecutive refresh ticks within one bucket share a query key and
  hit the staleTime-Infinity cache (the current-window args stay
  byte-identical to MetricPanel's). Corrected the dedupe comments to
  the honest accounting: the success/duration panels live on the
  unmounted Requests tab, so those two current-window fetches are real
  POSTs per tick that seed the cache for a Requests visit.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UZEaYdKFXuQw2Hf6XpPdEV
---
 .../analytics/hooks/useAnalyticsRecords.ts    |  7 ++
 .../tabs/__tests__/ConnectionsPanel.test.tsx  |  1 +
 .../tabs/__tests__/MetricPanel.test.tsx       |  1 +
 .../tabs/__tests__/StorageTab.test.tsx        |  2 +
 .../tabs/__tests__/tabs.smoke.test.tsx        |  3 +
 .../analytics/tabs/kpi/KpiTile.test.tsx       | 97 +++++++++++++++++++
 .../status/analytics/tabs/kpi/kpiMath.test.ts | 24 ++++-
 .../status/analytics/tabs/kpi/kpiMath.ts      | 32 ++++--
 .../analytics/tabs/kpi/kpiTiles.test.ts       | 32 +++++-
 .../status/analytics/tabs/kpi/kpiTiles.ts     | 24 ++++-
 .../analytics/tabs/kpi/useKpiTileData.ts      | 58 ++++++++---
 11 files changed, 251 insertions(+), 30 deletions(-)

diff --git a/src/features/instance/status/analytics/hooks/useAnalyticsRecords.ts b/src/features/instance/status/analytics/hooks/useAnalyticsRecords.ts
index 5f92516e9..d1042bbf8 100644
--- a/src/features/instance/status/analytics/hooks/useAnalyticsRecords.ts
+++ b/src/features/instance/status/analytics/hooks/useAnalyticsRecords.ts
@@ -30,6 +30,12 @@ export interface UseAnalyticsRecordsResult {
 	fieldKeys: Set<string>;
 	/** Subset of `requiredFields` that did not appear on any row. */
 	missingFields: string[];
+	/** True while `data` is the previous window's rows held by
+	 *  `keepPreviousData` during an in-flight window change — the rows do
+	 *  NOT belong to the requested [startTime, endTime]. Consumers that
+	 *  pair `data` with the requested window (CSV export filenames,
+	 *  previous-vs-current deltas) must gate on this. */
+	isPlaceholderData: boolean;
 	refetch: () => void;
 }
 
@@ -132,6 +138,7 @@ export function useAnalyticsRecords({
 		isEmpty: data.length === 0,
 		fieldKeys,
 		missingFields,
+		isPlaceholderData: query.isPlaceholderData,
 		refetch: query.refetch,
 	};
 }
diff --git a/src/features/instance/status/analytics/tabs/__tests__/ConnectionsPanel.test.tsx b/src/features/instance/status/analytics/tabs/__tests__/ConnectionsPanel.test.tsx
index a840c9f94..d7b1aa226 100644
--- a/src/features/instance/status/analytics/tabs/__tests__/ConnectionsPanel.test.tsx
+++ b/src/features/instance/status/analytics/tabs/__tests__/ConnectionsPanel.test.tsx
@@ -31,6 +31,7 @@ function makeResult(overrides: Partial<HookResult> = {}): HookResult {
 		isEmpty: true,
 		fieldKeys: new Set(),
 		missingFields: [],
+		isPlaceholderData: false,
 		refetch: vi.fn(),
 		...overrides,
 	};
diff --git a/src/features/instance/status/analytics/tabs/__tests__/MetricPanel.test.tsx b/src/features/instance/status/analytics/tabs/__tests__/MetricPanel.test.tsx
index 889a5d684..a7194a800 100644
--- a/src/features/instance/status/analytics/tabs/__tests__/MetricPanel.test.tsx
+++ b/src/features/instance/status/analytics/tabs/__tests__/MetricPanel.test.tsx
@@ -24,6 +24,7 @@ function setHookResult(overrides: Partial<ReturnType<typeof useAnalyticsRecords>
 		isEmpty: true,
 		fieldKeys: new Set(),
 		missingFields: [],
+		isPlaceholderData: false,
 		refetch: vi.fn(),
 		...overrides,
 	});
diff --git a/src/features/instance/status/analytics/tabs/__tests__/StorageTab.test.tsx b/src/features/instance/status/analytics/tabs/__tests__/StorageTab.test.tsx
index d30d55676..7088de4fc 100644
--- a/src/features/instance/status/analytics/tabs/__tests__/StorageTab.test.tsx
+++ b/src/features/instance/status/analytics/tabs/__tests__/StorageTab.test.tsx
@@ -49,6 +49,7 @@ function setHookResult(rows: ReturnType<typeof makeTableSizeRows>) {
 		isEmpty: rows.length === 0,
 		fieldKeys: new Set(['size', 'database', 'table']),
 		missingFields: [],
+		isPlaceholderData: false,
 		refetch: vi.fn(),
 	});
 }
@@ -63,6 +64,7 @@ describe('StorageTab', () => {
 			isEmpty: true,
 			fieldKeys: new Set(),
 			missingFields: [],
+			isPlaceholderData: false,
 			refetch: vi.fn(),
 		});
 		const { container } = render(
diff --git a/src/features/instance/status/analytics/tabs/__tests__/tabs.smoke.test.tsx b/src/features/instance/status/analytics/tabs/__tests__/tabs.smoke.test.tsx
index bcd1b9944..3c09843f5 100644
--- a/src/features/instance/status/analytics/tabs/__tests__/tabs.smoke.test.tsx
+++ b/src/features/instance/status/analytics/tabs/__tests__/tabs.smoke.test.tsx
@@ -29,6 +29,7 @@ function happyState() {
 		isEmpty: false,
 		fieldKeys: new Set(['count', 'mean', 'period', 'p50', 'p95', 'p99']),
 		missingFields: [],
+		isPlaceholderData: false,
 		refetch: vi.fn(),
 	});
 }
@@ -42,6 +43,7 @@ function loadingState() {
 		isEmpty: true,
 		fieldKeys: new Set(),
 		missingFields: [],
+		isPlaceholderData: false,
 		refetch: vi.fn(),
 	});
 }
@@ -55,6 +57,7 @@ function emptyMissingFieldsState(missing: string[]) {
 		isEmpty: true,
 		fieldKeys: new Set(),
 		missingFields: missing,
+		isPlaceholderData: false,
 		refetch: vi.fn(),
 	});
 }
diff --git a/src/features/instance/status/analytics/tabs/kpi/KpiTile.test.tsx b/src/features/instance/status/analytics/tabs/kpi/KpiTile.test.tsx
index f4e1efa4e..e5d1a42a1 100644
--- a/src/features/instance/status/analytics/tabs/kpi/KpiTile.test.tsx
+++ b/src/features/instance/status/analytics/tabs/kpi/KpiTile.test.tsx
@@ -176,6 +176,103 @@ describe('KpiTile', () => {
 		expect(bodies.filter((b) => b.start_time === START && b.end_time === END)).toHaveLength(1);
 		expect(bodies).toHaveLength(2);
 	});
+
+	it('holds the last settled delta while a window slide is in flight (placeholder phase)', async () => {
+		// Slide one bucket forward: current [300s, 420s], quantized previous
+		// [180s, 300s]. The new previous settles immediately while the new
+		// current stays gated — the exact phase where pairing placeholder
+		// current data (old window) with fresh previous data flips the delta
+		// through a bogus near-zero reading.
+		const START2 = START + BUCKET;
+		const END2 = END + BUCKET;
+		const CUR2_ROWS = [
+			{ time: 360_000, node: 'n1', period: 60_000, path: '/a', count: 100, p95: 20 },
+			{ time: 420_000, node: 'n1', period: 60_000, path: '/a', count: 100, p95: 40 },
+		];
+		// Mean 15 — equal to the old current window's mean, so a mismatched
+		// pair would compute a flat +0.0% delta.
+		const PREV2_ROWS = [
+			{ time: 240_000, node: 'n1', period: 60_000, path: '/a', count: 100, p95: 15 },
+		];
+		let releaseCurrent!: () => void;
+		const currentGate = new Promise<void>((resolve) => {
+			releaseCurrent = resolve;
+		});
+		const params = makeInstanceParams(async (body) => {
+			if (body.end_time === END2) {
+				await currentGate;
+				return CUR2_ROWS;
+			}
+			if (body.end_time === START2) { return PREV2_ROWS; }
+			return twoWindowHandler(body);
+		});
+		const { client } = makeWrapper(params);
+		const tile = (start: number, end: number) => (
+			<QueryClientProvider client={client}>
+				<AnalyticsProvider
+					value={{ timeRange: { startTime: start, endTime: end }, bucketMs: BUCKET, instanceParams: params }}
+				>
+					<KpiTile def={durationTile} />
+				</AnalyticsProvider>
+			</QueryClientProvider>
+		);
+		const { rerender } = render(tile(START, END));
+		await waitFor(() => expect(screen.getByText('+50.0%')).toBeTruthy());
+
+		rerender(tile(START2, END2));
+		// Wait until the new previous window has settled; the current window
+		// is still placeholder data from the old window.
+		const prev2Key = getRawAnalyticsQueryOptions({
+			metric: durationTile.metric,
+			startTime: START2 - (END - START),
+			endTime: START2,
+			instanceParams: params,
+			bucketMs: BUCKET,
+		}).queryKey;
+		await waitFor(() => expect(client.getQueryState(prev2Key)?.status).toBe('success'));
+		// Held delta from the last settled pair — not the mismatched +0.0%.
+		expect(screen.getByText('+50.0%')).toBeTruthy();
+		expect(screen.queryByText('+0.0%')).toBeNull();
+
+		releaseCurrent();
+		// Both sides settled: fresh pair, means 30 vs 15 → +100%.
+		await waitFor(() => expect(screen.getByText('40.0 ms')).toBeTruthy());
+		expect(screen.getByText('+100.0%')).toBeTruthy();
+	});
+
+	it('quantizes the previous-window key to the bucket grid so ticks within one bucket cache-hit', async () => {
+		const params = makeInstanceParams(() => []);
+		const { client } = makeWrapper(params);
+		const post = params.instanceClient.post as unknown as ReturnType<typeof vi.fn>;
+		const bodies = () => post.mock.calls.map((c) => c[1] as PostBody);
+		const tile = (start: number, end: number) => (
+			<QueryClientProvider client={client}>
+				<AnalyticsProvider
+					value={{ timeRange: { startTime: start, endTime: end }, bucketMs: BUCKET, instanceParams: params }}
+				>
+					<KpiTile def={durationTile} />
+				</AnalyticsProvider>
+			</QueryClientProvider>
+		);
+
+		// Unaligned window [250s, 370s] → previous quantized to [120s, 240s].
+		const { rerender } = render(tile(250_000, 370_000));
+		await waitFor(() => expect(bodies()).toHaveLength(2));
+		expect(bodies()).toContainEqual(expect.objectContaining({ start_time: 120_000, end_time: 240_000 }));
+
+		// A refresh tick within the same bucket ([280s, 400s] still floors to
+		// 240s) re-fetches only the current window; the previous-window key is
+		// unchanged and served from the staleTime-Infinity cache.
+		rerender(tile(280_000, 400_000));
+		await waitFor(() => expect(bodies()).toHaveLength(3));
+		expect(bodies().filter((b) => b.end_time === 240_000)).toHaveLength(1);
+
+		// Crossing a bucket boundary ([310s, 430s] floors to 300s) issues a
+		// fresh previous-window POST for [180s, 300s].
+		rerender(tile(310_000, 430_000));
+		await waitFor(() => expect(bodies()).toHaveLength(5));
+		expect(bodies()).toContainEqual(expect.objectContaining({ start_time: 180_000, end_time: 300_000 }));
+	});
 });
 
 describe('KpiSparkline', () => {
diff --git a/src/features/instance/status/analytics/tabs/kpi/kpiMath.test.ts b/src/features/instance/status/analytics/tabs/kpi/kpiMath.test.ts
index a8e8e3c81..b1a013aa9 100644
--- a/src/features/instance/status/analytics/tabs/kpi/kpiMath.test.ts
+++ b/src/features/instance/status/analytics/tabs/kpi/kpiMath.test.ts
@@ -2,7 +2,7 @@ import { describe, expect, it } from 'vitest';
 import type { SeriesData } from '../../types/analytics';
 import { collapseSeries, computeDelta, formatWindowLabel, latestValue, windowMean } from './kpiMath';
 
-function seriesData(series: { key: string; points: { x: number; y: number | null }[] }[]): SeriesData {
+function seriesData(series: { key: string; dim?: string; points: { x: number; y: number | null }[] }[]): SeriesData {
 	return { series: series.map((s) => ({ ...s, label: s.key })) };
 }
 
@@ -44,6 +44,28 @@ describe('collapseSeries', () => {
 	it('returns [] for empty series data', () => {
 		expect(collapseSeries(seriesData([]), 'sum')).toEqual([]);
 	});
+
+	it('includeDims excludes series outside the declared total', () => {
+		const data = seriesData([
+			{ key: 'harper', dim: 'harper', points: [{ x: 1, y: 0.2 }] },
+			{ key: 'user', dim: 'user', points: [{ x: 1, y: 0.1 }] },
+			// Profiler hot-location series — already counted inside the scopes.
+			{ key: '/some/fn', dim: '/some/fn', points: [{ x: 1, y: 0.15 }] },
+		]);
+		expect(collapseSeries(data, 'sum', ['harper', 'user'])).toEqual([
+			{ x: 1, y: expect.closeTo(0.3, 10) },
+		]);
+	});
+
+	it('includeDims gaps a bucket missing an expected dim instead of summing partially', () => {
+		const data = seriesData([
+			{ key: 'harper', dim: 'harper', points: [{ x: 1, y: 0.2 }, { x: 2, y: 0.4 }] },
+			{ key: 'user', dim: 'user', points: [{ x: 1, y: 0.1 }] },
+		]);
+		expect(collapseSeries(data, 'sum', ['harper', 'user'])).toEqual([
+			{ x: 1, y: expect.closeTo(0.3, 10) },
+		]);
+	});
 });
 
 describe('latestValue / windowMean', () => {
diff --git a/src/features/instance/status/analytics/tabs/kpi/kpiMath.ts b/src/features/instance/status/analytics/tabs/kpi/kpiMath.ts
index 8e6f6fd80..1273008f3 100644
--- a/src/features/instance/status/analytics/tabs/kpi/kpiMath.ts
+++ b/src/features/instance/status/analytics/tabs/kpi/kpiMath.ts
@@ -18,24 +18,36 @@ export type KpiCombine = 'sum' | 'mean';
 
 /** Collapse cluster-aggregate SeriesData into one point per time bucket.
  *  Non-finite ys are dropped; a bucket with no finite value across all
- *  series is omitted entirely (the sparkline connects across it). */
-export function collapseSeries(data: SeriesData, combine: KpiCombine): KpiPoint[] {
-	const byX = new Map<number, number[]>();
-	for (const s of data.series) {
+ *  series is omitted entirely (the sparkline connects across it).
+ *
+ *  `includeDims` declares the exact dimension values that constitute the
+ *  tile's total: series whose `dim` is not listed are excluded (e.g. the
+ *  profiler's per-hot-function-location cpu-usage records, whose samples are
+ *  already counted inside the harper/user scope totals), and a bucket
+ *  missing any listed dim is omitted rather than collapsed into a partial
+ *  value presented as the total. */
+export function collapseSeries(data: SeriesData, combine: KpiCombine, includeDims?: readonly string[]): KpiPoint[] {
+	const series = includeDims
+		? data.series.filter((s) => s.dim !== undefined && includeDims.includes(s.dim))
+		: data.series;
+	const byX = new Map<number, { ys: number[]; dims: Set<string> }>();
+	for (const s of series) {
 		for (const p of s.points) {
 			if (typeof p.y === 'number' && Number.isFinite(p.y)) {
-				let ys = byX.get(p.x);
-				if (!ys) {
-					ys = [];
-					byX.set(p.x, ys);
+				let bucket = byX.get(p.x);
+				if (!bucket) {
+					bucket = { ys: [], dims: new Set() };
+					byX.set(p.x, bucket);
 				}
-				ys.push(p.y);
+				bucket.ys.push(p.y);
+				if (s.dim !== undefined) { bucket.dims.add(s.dim); }
 			}
 		}
 	}
 	return [...byX.entries()]
+		.filter(([, { dims }]) => !includeDims || dims.size === includeDims.length)
 		.sort((a, b) => a[0] - b[0])
-		.map(([x, ys]) => {
+		.map(([x, { ys }]) => {
 			const total = ys.reduce((a, b) => a + b, 0);
 			return { x, y: combine === 'sum' ? total : total / ys.length };
 		});
diff --git a/src/features/instance/status/analytics/tabs/kpi/kpiTiles.test.ts b/src/features/instance/status/analytics/tabs/kpi/kpiTiles.test.ts
index 1f628b4ae..55727c287 100644
--- a/src/features/instance/status/analytics/tabs/kpi/kpiTiles.test.ts
+++ b/src/features/instance/status/analytics/tabs/kpi/kpiTiles.test.ts
@@ -42,8 +42,38 @@ describe('KPI_TILES', () => {
 			{ time: 60_000, node: 'n1', period: 60_000, path: 'harper', count: 50, p95: 0.3 },
 			{ time: 60_000, node: 'n1', period: 60_000, path: 'user', count: 50, p95: 0.2 },
 		];
-		const points = collapseSeries(runPipeline(def.spec, records, WINDOW, []), def.combine);
+		const points = collapseSeries(runPipeline(def.spec, records, WINDOW, []), def.combine, def.includeDims);
+		expect(points).toHaveLength(1);
+		expect(points[0].y).toBeCloseTo(0.5, 10);
+	});
+
+	it('cpu tile excludes hot-function-location records from the scope sum', () => {
+		const def = KPI_TILES.find((t) => t.id === 'cpu')!;
+		const records: AnalyticsDataPoint[] = [
+			{ time: 60_000, node: 'n1', period: 60_000, path: 'harper', count: 50, p95: 0.3 },
+			{ time: 60_000, node: 'n1', period: 60_000, path: 'user', count: 50, p95: 0.2 },
+			// Profiler hot-location record (>100 hits at one code location):
+			// its samples are already counted in the harper/user totals, so
+			// summing its series would double-count CPU on busy nodes.
+			{ time: 60_000, node: 'n1', period: 60_000, path: '/app/resources.js:42', count: 120, p95: 0.25 },
+		];
+		const points = collapseSeries(runPipeline(def.spec, records, WINDOW, []), def.combine, def.includeDims);
+		expect(points).toHaveLength(1);
+		expect(points[0].y).toBeCloseTo(0.5, 10);
+	});
+
+	it('cpu tile gaps a bucket missing one scope instead of reporting a partial sum as the total', () => {
+		const def = KPI_TILES.find((t) => t.id === 'cpu')!;
+		const records: AnalyticsDataPoint[] = [
+			{ time: 60_000, node: 'n1', period: 60_000, path: 'harper', count: 50, p95: 0.3 },
+			{ time: 60_000, node: 'n1', period: 60_000, path: 'user', count: 50, p95: 0.2 },
+			// Second bucket only has the harper scope — harper-alone is not
+			// total process CPU, so the bucket must gap, not read as 0.4.
+			{ time: 120_000, node: 'n1', period: 60_000, path: 'harper', count: 50, p95: 0.4 },
+		];
+		const points = collapseSeries(runPipeline(def.spec, records, WINDOW, []), def.combine, def.includeDims);
 		expect(points).toHaveLength(1);
+		expect(points[0].x).toBe(60_000);
 		expect(points[0].y).toBeCloseTo(0.5, 10);
 	});
 
diff --git a/src/features/instance/status/analytics/tabs/kpi/kpiTiles.ts b/src/features/instance/status/analytics/tabs/kpi/kpiTiles.ts
index ee79799d0..c9687d503 100644
--- a/src/features/instance/status/analytics/tabs/kpi/kpiTiles.ts
+++ b/src/features/instance/status/analytics/tabs/kpi/kpiTiles.ts
@@ -1,7 +1,14 @@
 // Tile definitions for the Health-tab KPI stat strip. Each tile names the
 // Harper metric it queries (the SAME metric string the corresponding panel
-// uses, so the current-window fetch dedupes with the panel's query key) and
-// a cluster-aggregate MetricSpec run through the shared runPipeline.
+// uses, so the current-window key matches the panel's query key) and a
+// cluster-aggregate MetricSpec run through the shared runPipeline.
+//
+// The key match only dedupes the POST when that panel is mounted (or its
+// window is still cached): cpu-usage / memory / main-thread-utilization
+// panels live on the Health tab alongside the strip, but success and
+// duration panels live on the Requests tab — while Health is shown those
+// two current-window fetches are real POSTs (which seed the cache for a
+// Requests visit). See useKpiTileData for the full per-tick accounting.
 //
 // Every vital here is up-is-bad (more CPU / memory / utilization / errors /
 // latency is worse), so KpiTile colors all up-deltas destructive and all
@@ -16,10 +23,16 @@ export interface KpiTileDef {
 	id: string;
 	label: string;
 	/** Harper get_analytics metric name — must match the panel's source
-	 *  metric verbatim so react-query dedupes the current-window POST. */
+	 *  metric verbatim so the current-window query key coincides with the
+	 *  panel's (deduped when that panel is mounted, shared cache otherwise). */
 	metric: string;
 	spec: MetricSpec;
 	combine: KpiCombine;
+	/** For groupBy specs whose dimension carries extra values beyond the
+	 *  ones that add up to the tile's total: the exact dims to collapse.
+	 *  Passed through to collapseSeries — other dims are excluded and a
+	 *  bucket missing any listed dim gaps instead of summing partially. */
+	includeDims?: readonly string[];
 	formatter: ValueFormatter;
 }
 
@@ -48,6 +61,10 @@ export const KPI_TILES: readonly KpiTileDef[] = [
 		// Per-scope (harper/user) count-weighted p95 — the panel's exact
 		// aggregation — then the scope series are SUMMED per bucket so the
 		// tile reads as total process CPU, not a mean of the two scopes.
+		// includeDims pins the sum to those two scopes: the profiler also
+		// emits per-hot-function-location cpu-usage records (>100 hits at
+		// one location) whose samples are ALREADY counted in the harper/user
+		// totals — summing every 'path' dim would double-count them.
 		spec: tileSpec({
 			series: {
 				kind: 'groupBy',
@@ -57,6 +74,7 @@ export const KPI_TILES: readonly KpiTileDef[] = [
 			aggregator: { temporal: 'count-weighted-mean', crossNode: 'count-weighted-mean' },
 		}),
 		combine: 'sum',
+		includeDims: ['harper', 'user'],
 		formatter: 'percent',
 	},
 	{
diff --git a/src/features/instance/status/analytics/tabs/kpi/useKpiTileData.ts b/src/features/instance/status/analytics/tabs/kpi/useKpiTileData.ts
index 7fb670800..d18cd1239 100644
--- a/src/features/instance/status/analytics/tabs/kpi/useKpiTileData.ts
+++ b/src/features/instance/status/analytics/tabs/kpi/useKpiTileData.ts
@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useMemo, useRef } from 'react';
 import { useAnalyticsContext } from '../../context/AnalyticsContext';
 import { useAnalyticsRecords } from '../../hooks/useAnalyticsRecords';
 import { runPipeline } from '../../pipeline/pipeline';
@@ -11,7 +11,10 @@ export interface KpiTileData {
 	 *  tile renders an em-dash and no delta). */
 	latest: number | null;
 	/** Current-window mean vs previous-window mean; null while the previous
-	 *  window is loading, errored, empty, or the ratio is undefined. */
+	 *  window is loading, errored, empty, or the ratio is undefined. Only
+	 *  recomputed when BOTH windows hold settled (non-placeholder) data —
+	 *  while a window slide is in flight the last settled delta is held, so
+	 *  a mismatched current/previous pair never flips the arrow. */
 	delta: KpiDelta | null;
 	/** Collapsed current-window points feeding the sparkline. */
 	sparkPoints: KpiPoint[];
@@ -24,17 +27,29 @@ export interface KpiTileData {
 /** Data for one KPI tile: the current window plus the previous window of
  *  equal length, each through the shared spec pipeline.
  *
- *  Query accounting — the strip's dedupe contract (#1457): the
+ *  Query accounting (#1457), per refresh tick while Health is shown: the
  *  current-window call passes exactly the arguments MetricPanel passes
  *  (same metric string, same context timeRange/bucketMs, no conditions), so
- *  it lands on the panels' existing query key and react-query serves both
- *  from one POST. The previous-window call is the only new key — at most
- *  one extra POST per metric per window slide. Its key shares
+ *  it lands on the panels' query key — deduped for the three metrics whose
+ *  panels are mounted on Health (cpu-usage, memory,
+ *  main-thread-utilization), but a real POST for success and duration,
+ *  whose panels live on the (unmounted) Requests tab; those fetches seed
+ *  the cache for a Requests visit. The previous-window keys are quantized
+ *  to the bucket grid below, so they only re-fetch (5 POSTs) when the
+ *  sliding window crosses a bucket boundary — consecutive ticks within one
+ *  bucket hit the staleTime-Infinity cache. Every key shares
  *  ANALYTICS_QUERY_KEY_PREFIX + instanceId, so StatusTabs' in-flight
- *  refresh guard covers it too. */
+ *  refresh guard covers them all. */
 export function useKpiTileData(def: KpiTileDef): KpiTileData {
 	const { timeRange, bucketMs, instanceParams } = useAnalyticsContext();
 	const windowMs = timeRange.endTime - timeRange.startTime;
+	// The previous window is historical, so its exact boundaries are
+	// cosmetic — quantize them to the bucket grid so every tick within one
+	// bucket produces the same query key (a cache hit, not a POST). The
+	// current window must NOT be quantized: its args must stay byte-identical
+	// to MetricPanel's for the key to coincide.
+	const prevEnd = Math.floor(timeRange.startTime / bucketMs) * bucketMs;
+	const prevStart = prevEnd - windowMs;
 
 	const current = useAnalyticsRecords({
 		metric: def.metric,
@@ -45,8 +60,8 @@ export function useKpiTileData(def: KpiTileDef): KpiTileData {
 	});
 	const previous = useAnalyticsRecords({
 		metric: def.metric,
-		startTime: timeRange.startTime - windowMs,
-		endTime: timeRange.startTime,
+		startTime: prevStart,
+		endTime: prevEnd,
 		instanceParams,
 		bucketMs,
 	});
@@ -56,24 +71,37 @@ export function useKpiTileData(def: KpiTileDef): KpiTileData {
 		return collapseSeries(
 			runPipeline(def.spec, current.data, timeRange, [], { snapToPeriod: true }),
 			def.combine,
+			def.includeDims,
 		);
 	}, [def, current.data, current.isError, timeRange]);
 
 	const previousMean = useMemo<number | null>(() => {
 		if (previous.isLoading || previous.isError) { return null; }
-		const prevRange: TimeRange = {
-			startTime: timeRange.startTime - windowMs,
-			endTime: timeRange.startTime,
-		};
+		const prevRange: TimeRange = { startTime: prevStart, endTime: prevEnd };
 		return windowMean(collapseSeries(
 			runPipeline(def.spec, previous.data, prevRange, [], { snapToPeriod: true }),
 			def.combine,
+			def.includeDims,
 		));
-	}, [def, previous.data, previous.isLoading, previous.isError, timeRange.startTime, windowMs]);
+	}, [def, previous.data, previous.isLoading, previous.isError, prevStart, prevEnd]);
+
+	// keepPreviousData keeps isLoading false while `data` still holds the
+	// OLDER window's rows during a window slide, so a delta computed then
+	// would pair mismatched windows (one side settles before the other) and
+	// flip the arrow through a bogus near-zero reading. Only compute a fresh
+	// delta from a settled pair; hold the last one otherwise.
+	const lastSettledDelta = useRef<KpiDelta | null>(null);
+	let delta: KpiDelta | null;
+	if (current.isPlaceholderData || previous.isPlaceholderData) {
+		delta = lastSettledDelta.current;
+	} else {
+		delta = computeDelta(windowMean(sparkPoints), previousMean);
+		lastSettledDelta.current = delta;
+	}
 
 	return {
 		latest: latestValue(sparkPoints),
-		delta: computeDelta(windowMean(sparkPoints), previousMean),
+		delta,
 		sparkPoints,
 		isLoading: current.isLoading,
 		timeRange,

From 8dcb269c7e981b47a3cbbbd03b9cba0159c6c1df Mon Sep 17 00:00:00 2001
From: Kyle Bernhardy <kyle@harperdb.io>
Date: Tue, 14 Jul 2026 22:23:04 -0600
Subject: [PATCH 3/3] fix(status): unsign zero-rounding deltas, role=img on
 delta row, skip empty sparkline path (review)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UZEaYdKFXuQw2Hf6XpPdEV
---
 .../analytics/tabs/kpi/KpiSparkline.tsx       | 24 ++++++++++++-------
 .../analytics/tabs/kpi/KpiTile.test.tsx       |  4 +++-
 .../status/analytics/tabs/kpi/KpiTile.tsx     |  7 +++++-
 3 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/src/features/instance/status/analytics/tabs/kpi/KpiSparkline.tsx b/src/features/instance/status/analytics/tabs/kpi/KpiSparkline.tsx
index 82238228a..f89a6080c 100644
--- a/src/features/instance/status/analytics/tabs/kpi/KpiSparkline.tsx
+++ b/src/features/instance/status/analytics/tabs/kpi/KpiSparkline.tsx
@@ -49,15 +49,21 @@ export function KpiSparkline({ points, xDomain }: Props) {
 			aria-hidden="true"
 			focusable="false"
 		>
-			<path
-				d={toPath(coords.slice(0, -1))}
-				fill="none"
-				stroke="currentColor"
-				strokeWidth={1.5}
-				vectorEffect="non-scaling-stroke"
-				strokeLinejoin="round"
-				strokeLinecap="round"
-			/>
+			{
+				/* Two points = only the accent segment below; a one-coord path
+			    would be an invisible MoveTo-only element. */
+			}
+			{points.length > 2 && (
+				<path
+					d={toPath(coords.slice(0, -1))}
+					fill="none"
+					stroke="currentColor"
+					strokeWidth={1.5}
+					vectorEffect="non-scaling-stroke"
+					strokeLinejoin="round"
+					strokeLinecap="round"
+				/>
+			)}
 			<path
 				d={toPath(coords.slice(-2))}
 				fill="none"
diff --git a/src/features/instance/status/analytics/tabs/kpi/KpiTile.test.tsx b/src/features/instance/status/analytics/tabs/kpi/KpiTile.test.tsx
index e5d1a42a1..2a0b10191 100644
--- a/src/features/instance/status/analytics/tabs/kpi/KpiTile.test.tsx
+++ b/src/features/instance/status/analytics/tabs/kpi/KpiTile.test.tsx
@@ -281,7 +281,9 @@ describe('KpiSparkline', () => {
 			<KpiSparkline points={[{ x: 0, y: 5 }, { x: 100, y: 5 }]} xDomain={[0, 100]} />,
 		);
 		const paths = container.querySelectorAll('path');
-		expect(paths.length).toBe(2);
+		// Two points render only the accent segment (the base path would be a
+		// MoveTo-only element).
+		expect(paths.length).toBe(1);
 		for (const d of [...paths].map((p) => p.getAttribute('d') ?? '')) {
 			// VIEW_H / 2 = 16 for every y coordinate.
 			expect(d.match(/,(\d+\.\d+)/g)?.every((m) => m === ',16.00')).toBe(true);
diff --git a/src/features/instance/status/analytics/tabs/kpi/KpiTile.tsx b/src/features/instance/status/analytics/tabs/kpi/KpiTile.tsx
index 5935c1a7d..5fc96e931 100644
--- a/src/features/instance/status/analytics/tabs/kpi/KpiTile.tsx
+++ b/src/features/instance/status/analytics/tabs/kpi/KpiTile.tsx
@@ -45,7 +45,11 @@ export function KpiTile({ def }: { def: KpiTileDef }) {
 function DeltaRow({ delta, windowMs }: { delta: KpiDelta | null; windowMs: number }) {
 	if (!delta) { return <div className="h-4" aria-hidden="true" />; }
 	const windowLabel = formatWindowLabel(windowMs);
-	const pctText = `${delta.pct >= 0 ? '+' : ''}${delta.pct.toFixed(1)}%`;
+	// Unsign a pct that ROUNDS to zero — "+0.0%" reads as a real move.
+	const rounded = delta.pct.toFixed(1);
+	const pctText = rounded === '0.0' || rounded === '-0.0'
+		? '0.0%'
+		: `${delta.pct >= 0 ? '+' : ''}${rounded}%`;
 	const color = delta.direction === 'up'
 		? 'text-destructive'
 		: delta.direction === 'down'
@@ -54,6 +58,7 @@ function DeltaRow({ delta, windowMs }: { delta: KpiDelta | null; windowMs: numbe
 	const Icon = delta.direction === 'up' ? ArrowUp : delta.direction === 'down' ? ArrowDown : Minus;
 	return (
 		<div
+			role="img"
 			className="flex h-4 items-center gap-1 text-xs"
 			aria-label={`${delta.direction} ${pctText} vs previous ${windowLabel}`}
 		>