refactor: improve speedtest chart accuracy and responsiveness

- Time-proportional x-axis with dashed leader line from t=0
- Uniform tick labels with smart unit selection (s/m/h) that scale
  from seconds to hours
- Dynamic y-axis padding based on measured label width
- Binary search hit-test with crosshair-snap for dense data
- ResizeObserver debounced via requestAnimationFrame
- Tooltip clamped to container bounds
- General cleanup: named constants, single-pass data prep, responsive
  layout, safer error handling, input validation, missing dependency

Author: EhabY

packages/speedtest/package.json

@@ -10,6 +10,7 @@
 		"typecheck": "tsc --noEmit"
 	},
 	"dependencies": {
+		"@repo/shared": "workspace:*",
 		"@repo/webview-shared": "workspace:*"
 	},
 	"devDependencies": {

packages/speedtest/src/chart.ts

@@ -10,11 +10,47 @@ export interface ChartPoint {
 }
 
 export interface ChartData {
-	labels: string[];
+	/** Time positions for each data point (used for proportional x-spacing) */
+	xValues: number[];
 	values: number[];
 	pointLabels: string[];
 }
 
+/** Points above this count are drawn as a line only (no dots). */
+export const DOT_THRESHOLD = 20;
+
+const DOT_RADIUS = 4;
+const MIN_TICK_SPACING = 48;
+const LEADER_OPACITY = 0.4;
+const Y_GRID_LINES = 5;
+const Y_HEADROOM = 1.1;
+
+/** Pick a "nice" step size that is >= the raw step. */
+const NICE_STEPS = [
+	1, 2, 5, 10, 15, 20, 30, 60, 120, 300, 600, 900, 1800, 3600,
+];
+
+function niceStep(raw: number): number {
+	return NICE_STEPS.find((s) => s >= raw) ?? Math.ceil(raw / 3600) * 3600;
+}
+
+/** Build a tick formatter that uses a single unit for the entire axis. */
+function tickFormatter(step: number): (t: number) => string {
+	if (step >= 3600) {
+		return (t) => {
+			const h = t / 3600;
+			return `${Number.isInteger(h) ? h : h.toFixed(1)}h`;
+		};
+	}
+	if (step >= 60) {
+		return (t) => {
+			const m = t / 60;
+			return `${Number.isInteger(m) ? m : m.toFixed(1)}m`;
+		};
+	}
+	return (t) => `${t}s`;
+}
+
 /**
  * Draw a line chart on the given canvas and return hit-test positions.
  */
@@ -36,17 +72,11 @@ export function renderLineChart(
 	}
 	ctx.scale(dpr, dpr);
 
-	const pad = { top: 24, right: 24, bottom: 52, left: 72 };
-	const plotW = width - pad.left - pad.right;
-	const plotH = height - pad.top - pad.bottom;
-	const maxVal = Math.max(...data.values, 1) * 1.1;
 	const n = data.values.length;
+	const maxVal = Math.max(...data.values, 1) * Y_HEADROOM;
+	const maxX = n > 0 ? data.xValues[n - 1] : 1;
+	const xRange = maxX || 1;
 
-	// Coordinate helpers
-	const xAt = (i: number) => pad.left + (i / Math.max(n - 1, 1)) * plotW;
-	const yAt = (v: number) => pad.top + plotH - (v / maxVal) * plotH;
-
-	// Read VS Code theme
 	const s = getComputedStyle(document.documentElement);
 	const css = (prop: string) => s.getPropertyValue(prop).trim();
 	const fg =
@@ -60,55 +90,55 @@ export function renderLineChart(
 	const grid = css("--vscode-editorWidget-border") || "rgba(128,128,128,0.15)";
 	const family = css("--vscode-font-family") || "sans-serif";
 
+	ctx.font = `1em ${family}`;
+	const yLabelWidth = ctx.measureText(maxVal.toFixed(0)).width;
+	const pad = {
+		top: 24,
+		right: 24,
+		bottom: 52,
+		left: Math.max(48, yLabelWidth + 24),
+	};
+	const plotW = width - pad.left - pad.right;
+	const plotH = height - pad.top - pad.bottom;
+
+	const tAt = (t: number) => pad.left + (t / xRange) * plotW;
+	const xAt = (i: number) => tAt(data.xValues[i]);
+	const yAt = (v: number) => pad.top + plotH - (v / maxVal) * plotH;
+
 	// ── Axes ──
 
-	// Y-axis grid lines and labels
 	ctx.strokeStyle = grid;
 	ctx.lineWidth = 1;
 	ctx.fillStyle = fg;
-	ctx.font = `1em ${family}`;
 	ctx.textAlign = "right";
-	for (let i = 0; i <= 5; i++) {
-		const y = yAt((i / 5) * maxVal);
+	for (let i = 0; i <= Y_GRID_LINES; i++) {
+		const y = yAt((i / Y_GRID_LINES) * maxVal);
 		ctx.beginPath();
 		ctx.moveTo(pad.left, y);
 		ctx.lineTo(pad.left + plotW, y);
 		ctx.stroke();
-		ctx.fillText(((i / 5) * maxVal).toFixed(0), pad.left - 12, y + 5);
+		ctx.fillText(
+			((i / Y_GRID_LINES) * maxVal).toFixed(0),
+			pad.left - 12,
+			y + 5,
+		);
 	}
 
-	// Bottom axis line
 	ctx.strokeStyle = fg;
 	ctx.beginPath();
 	ctx.moveTo(pad.left, pad.top + plotH);
 	ctx.lineTo(pad.left + plotW, pad.top + plotH);
 	ctx.stroke();
 
-	// X-axis labels (auto-thinned, deduped)
 	ctx.textAlign = "center";
 	ctx.fillStyle = fg;
-	const maxLabels = Math.floor(plotW / 60);
-	const step = Math.max(1, Math.ceil(n / maxLabels));
-	let lastDrawnLabel = "";
-	let lastDrawnX = -Infinity;
-	for (let i = 0; i < n; i += step) {
-		if (data.labels[i] !== lastDrawnLabel) {
-			ctx.fillText(data.labels[i], xAt(i), height - pad.bottom + 24);
-			lastDrawnLabel = data.labels[i];
-			lastDrawnX = xAt(i);
-		}
-	}
-	const last = n - 1;
-	if (
-		last > 0 &&
-		last % step !== 0 &&
-		data.labels[last] !== lastDrawnLabel &&
-		xAt(last) - lastDrawnX > 50
-	) {
-		ctx.fillText(data.labels[last], xAt(last), height - pad.bottom + 24);
+	const maxTicks = Math.max(1, Math.floor(plotW / MIN_TICK_SPACING));
+	const tickStep = niceStep(xRange / maxTicks);
+	const formatTick = tickFormatter(tickStep);
+	for (let t = 0; t <= maxX; t += tickStep) {
+		ctx.fillText(formatTick(t), tAt(t), height - pad.bottom + 24);
 	}
 
-	// Axis titles
 	ctx.font = `0.95em ${family}`;
 	ctx.fillText("Time", pad.left + plotW / 2, height - 4);
 	ctx.save();
@@ -124,10 +154,23 @@ export function renderLineChart(
 	// ── Series ──
 
 	const baseline = pad.top + plotH;
+	const firstPx = xAt(0);
+
+	if (data.xValues[0] > 0) {
+		ctx.beginPath();
+		ctx.moveTo(tAt(0), baseline);
+		ctx.lineTo(firstPx, yAt(data.values[0]));
+		ctx.setLineDash([4, 4]);
+		ctx.strokeStyle = accent;
+		ctx.lineWidth = 1;
+		ctx.globalAlpha = LEADER_OPACITY;
+		ctx.stroke();
+		ctx.setLineDash([]);
+		ctx.globalAlpha = 1;
+	}
 
-	// Fill area
 	ctx.beginPath();
-	ctx.moveTo(xAt(0), baseline);
+	ctx.moveTo(firstPx, baseline);
 	for (let i = 0; i < n; i++) {
 		ctx.lineTo(xAt(i), yAt(data.values[i]));
 	}
@@ -139,7 +182,6 @@ export function renderLineChart(
 	ctx.fillStyle = gradient;
 	ctx.fill();
 
-	// Line
 	ctx.beginPath();
 	ctx.moveTo(xAt(0), yAt(data.values[0]));
 	for (let i = 1; i < n; i++) {
@@ -149,15 +191,14 @@ export function renderLineChart(
 	ctx.lineWidth = 2;
 	ctx.stroke();
 
-	// Dots and hit-test positions
-	const showDots = n <= 50;
+	const showDots = n <= DOT_THRESHOLD;
 	const points: ChartPoint[] = [];
 	for (let i = 0; i < n; i++) {
 		const x = xAt(i);
 		const y = yAt(data.values[i]);
 		if (showDots) {
 			ctx.beginPath();
-			ctx.arc(x, y, 4, 0, Math.PI * 2);
+			ctx.arc(x, y, DOT_RADIUS, 0, Math.PI * 2);
 			ctx.fillStyle = accent;
 			ctx.fill();
 		}

packages/speedtest/src/index.css

@@ -1,6 +1,13 @@
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
 body {
 	margin: 0;
 	padding: 24px;
+	min-width: 360px;
 	background: var(--vscode-editor-background);
 	color: var(--vscode-editor-foreground);
 	font-family: var(--vscode-font-family);
@@ -9,12 +16,11 @@ body {
 
 .summary {
 	display: flex;
+	flex-wrap: wrap;
 	justify-content: center;
-	gap: 48px;
+	gap: 16px 48px;
 	margin-bottom: 24px;
 	text-align: center;
-	/* Offset to align with the chart plot area (matches canvas left padding) */
-	padding-left: 48px;
 }
 
 .stat-label {
@@ -39,7 +45,6 @@ body {
 
 .chart-container {
 	position: relative;
-	min-width: 400px;
 	height: 320px;
 	margin-bottom: 20px;
 }
@@ -52,7 +57,6 @@ body {
 .actions {
 	display: flex;
 	justify-content: center;
-	padding-left: 48px;
 }
 
 button {
@@ -79,7 +83,6 @@ button:hover {
 	font-size: 0.9em;
 	white-space: nowrap;
 	pointer-events: none;
-	transform: translateX(-50%);
 	opacity: 0;
 	transition: opacity 0.1s;
 }