feat: speedtest visualization webview

packages/shared/src/index.ts

@@ -5,3 +5,6 @@ export * from "./ipc/protocol";
 export * from "./tasks/types";
 export * from "./tasks/utils";
 export * from "./tasks/api";
+
+// Speedtest API
+export { SpeedtestApi } from "./speedtest/api";

packages/shared/src/speedtest/api.ts

@@ -0,0 +1,11 @@
+import { defineCommand, defineNotification } from "../ipc/protocol";
+
+/**
+ * Speedtest webview IPC API.
+ */
+export const SpeedtestApi = {
+	/** Extension pushes JSON results to the webview */
+	data: defineNotification<string>("speedtest/data"),
+	/** Webview requests to open raw JSON in a text editor */
+	viewJson: defineCommand<string>("speedtest/viewJson"),
+} as const;

packages/speedtest/package.json

@@ -0,0 +1,21 @@
+{
+	"name": "@repo/speedtest",
+	"version": "1.0.0",
+	"description": "Coder Speedtest visualization webview",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"build": "vite build",
+		"dev": "vite build --watch",
+		"typecheck": "tsc --noEmit"
+	},
+	"dependencies": {
+		"@repo/shared": "workspace:*",
+		"@repo/webview-shared": "workspace:*"
+	},
+	"devDependencies": {
+		"@types/vscode-webview": "catalog:",
+		"typescript": "catalog:",
+		"vite": "catalog:"
+	}
+}

packages/speedtest/src/chart.ts

@@ -0,0 +1,208 @@
+/**
+ * Lightweight canvas line chart for speedtest results.
+ * No dependencies — uses Canvas 2D API with VS Code theme colors.
+ */
+
+export interface ChartPoint {
+	x: number;
+	y: number;
+	label: string;
+}
+
+export interface ChartData {
+	/** 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.
+ */
+export function renderLineChart(
+	canvas: HTMLCanvasElement,
+	data: ChartData,
+): ChartPoint[] {
+	const dpr = window.devicePixelRatio || 1;
+	const container = canvas.parentElement;
+	const { width, height } = container
+		? container.getBoundingClientRect()
+		: canvas.getBoundingClientRect();
+	canvas.width = width * dpr;
+	canvas.height = height * dpr;
+
+	const ctx = canvas.getContext("2d");
+	if (!ctx) {
+		return [];
+	}
+	ctx.scale(dpr, dpr);
+
+	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;
+
+	const s = getComputedStyle(document.documentElement);
+	const css = (prop: string) => s.getPropertyValue(prop).trim();
+	const fg =
+		css("--vscode-descriptionForeground") ||
+		css("--vscode-editor-foreground") ||
+		"#888";
+	const accent =
+		css("--vscode-charts-blue") ||
+		css("--vscode-terminal-ansiBlue") ||
+		"#3794ff";
+	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 ──
+
+	ctx.strokeStyle = grid;
+	ctx.lineWidth = 1;
+	ctx.fillStyle = fg;
+	ctx.textAlign = "right";
+	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 / Y_GRID_LINES) * maxVal).toFixed(0),
+			pad.left - 12,
+			y + 5,
+		);
+	}
+
+	ctx.strokeStyle = fg;
+	ctx.beginPath();
+	ctx.moveTo(pad.left, pad.top + plotH);
+	ctx.lineTo(pad.left + plotW, pad.top + plotH);
+	ctx.stroke();
+
+	ctx.textAlign = "center";
+	ctx.fillStyle = fg;
+	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);
+	}
+
+	ctx.font = `0.95em ${family}`;
+	ctx.fillText("Time", pad.left + plotW / 2, height - 4);
+	ctx.save();
+	ctx.translate(14, pad.top + plotH / 2);
+	ctx.rotate(-Math.PI / 2);
+	ctx.fillText("Mbps", 0, 0);
+	ctx.restore();
+
+	if (n === 0) {
+		return [];
+	}
+
+	// ── 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;
+	}
+
+	ctx.beginPath();
+	ctx.moveTo(firstPx, baseline);
+	for (let i = 0; i < n; i++) {
+		ctx.lineTo(xAt(i), yAt(data.values[i]));
+	}
+	ctx.lineTo(xAt(n - 1), baseline);
+	ctx.closePath();
+	const gradient = ctx.createLinearGradient(0, pad.top, 0, baseline);
+	gradient.addColorStop(0, accent + "18");
+	gradient.addColorStop(1, accent + "04");
+	ctx.fillStyle = gradient;
+	ctx.fill();
+
+	ctx.beginPath();
+	ctx.moveTo(xAt(0), yAt(data.values[0]));
+	for (let i = 1; i < n; i++) {
+		ctx.lineTo(xAt(i), yAt(data.values[i]));
+	}
+	ctx.strokeStyle = accent;
+	ctx.lineWidth = 2;
+	ctx.stroke();
+
+	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, DOT_RADIUS, 0, Math.PI * 2);
+			ctx.fillStyle = accent;
+			ctx.fill();
+		}
+		points.push({ x, y, label: data.pointLabels[i] });
+	}
+	return points;
+}

packages/speedtest/src/css.d.ts

@@ -0,0 +1 @@
+declare module "*.css";

packages/speedtest/src/index.css

@@ -0,0 +1,97 @@
+*,
+*::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);
+	font-size: var(--vscode-font-size);
+}
+
+.summary {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	gap: 16px 48px;
+	margin-bottom: 24px;
+	text-align: center;
+}
+
+.stat-label {
+	display: block;
+	font-size: 0.8em;
+	opacity: 0.6;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	margin-bottom: 4px;
+}
+
+.stat-value {
+	font-size: 1.8em;
+	font-weight: 600;
+}
+
+.stat-value small {
+	font-size: 0.55em;
+	font-weight: 400;
+	opacity: 0.7;
+}
+
+.chart-container {
+	position: relative;
+	height: 320px;
+	margin-bottom: 20px;
+}
+
+.chart-container canvas {
+	width: 100%;
+	height: 100%;
+}
+
+.actions {
+	display: flex;
+	justify-content: center;
+}
+
+button {
+	padding: 6px 16px;
+	border: 1px solid var(--vscode-button-border, transparent);
+	border-radius: 2px;
+	background: var(--vscode-button-secondaryBackground);
+	color: var(--vscode-button-secondaryForeground);
+	font: inherit;
+	cursor: pointer;
+}
+
+button:hover {
+	background: var(--vscode-button-secondaryHoverBackground);
+}
+
+.tooltip {
+	position: absolute;
+	padding: 4px 8px;
+	border-radius: 3px;
+	background: var(--vscode-editorHoverWidget-background);
+	border: 1px solid var(--vscode-editorHoverWidget-border);
+	color: var(--vscode-editorHoverWidget-foreground);
+	font-size: 0.9em;
+	white-space: nowrap;
+	pointer-events: none;
+	opacity: 0;
+	transition: opacity 0.1s;
+}
+
+.tooltip.visible {
+	opacity: 1;
+}
+
+.error {
+	color: var(--vscode-errorForeground);
+	text-align: center;
+}