feat: add network check command with results webview (#1002)

Adds a "Coder: Network Check" command that runs `coder netcheck` and renders
the report in a dedicated webview panel, reachable from the command palette
and the My Workspaces view menu.

- Panel shows an overall health banner, warnings, a connectivity summary
  (UDP, IPv4/IPv6, NAT mapping, hairpinning, port mapping), per-region
  DERP/STUN latencies, and local interfaces.
- A View JSON action exposes the raw report; parse failures keep it reachable.
- Slow-connection status bar tooltip links to the network check alongside the
  latency test; the click stays on the per-workspace ping.
- Speed test reuses the extracted one-shot panel plumbing (showResultPanel,
  runDiagnosticCli) instead of duplicating it.
- Telemetry records netcheck severity and bounded counts after the panel shows.

Closes #348

Author: EhabY

CHANGELOG.md

@@ -7,6 +7,18 @@
 
 ## Unreleased
 
+### Added
+
+- New **Coder: Network Check** command to run
+  [`coder netcheck`](https://coder.com/docs/reference/cli/netcheck) from the
+  command palette or the My Workspaces view menu. The report opens in a panel
+  with an overall health banner, any warnings, a connectivity summary (UDP,
+  IPv4/IPv6, NAT mapping, hairpinning, port mapping), per-region DERP/STUN
+  results with latencies, and local interfaces. A View JSON action exposes the
+  raw output. When a slow connection is detected, the network status bar
+  tooltip also links to the network check alongside the latency test, for a
+  deployment-wide view of the network path.
+
 ### Fixed
 
 - Propagate VS Code's proxy settings (`http.proxy`, `http.noProxy`, and

package.json

@@ -439,6 +439,11 @@
 				"title": "Speed Test Workspace",
 				"category": "Coder"
 			},
+			{
+				"command": "coder.netcheck",
+				"title": "Network Check",
+				"category": "Coder"
+			},
 			{
 				"command": "coder.supportBundle",
 				"title": "Create Support Bundle",
@@ -534,6 +539,10 @@
 					"command": "coder.speedTest",
 					"when": "coder.authenticated"
 				},
+				{
+					"command": "coder.netcheck",
+					"when": "coder.authenticated"
+				},
 				{
 					"command": "coder.supportBundle",
 					"when": "coder.authenticated"
@@ -622,6 +631,10 @@
 					"command": "coder.logout",
 					"when": "coder.authenticated && view == myWorkspaces"
 				},
+				{
+					"command": "coder.netcheck",
+					"when": "coder.authenticated && view == myWorkspaces"
+				},
 				{
 					"command": "coder.switchDeployment",
 					"when": "coder.authenticated && view == myWorkspaces"

packages/netcheck/package.json

@@ -0,0 +1,21 @@
+{
+	"name": "@repo/netcheck",
+	"version": "1.0.0",
+	"description": "Coder network check report 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/netcheck/src/connectivity.ts

@@ -0,0 +1,96 @@
+import { regionName } from "./regions";
+
+import type { NetcheckConnectivity, NetcheckReport } from "@repo/shared";
+
+/** Maps to a `tone-*` CSS class so color lives in the stylesheet, not here. */
+export type Tone = "good" | "bad" | "warn" | "neutral";
+
+export interface ConnectivityItem {
+	label: string;
+	value: string;
+	tone: Tone;
+}
+
+type Outcome = [value: string, tone: Tone];
+
+/** Connectivity facts derived from the embedded tailscale netcheck probe. */
+export function buildConnectivityItems(
+	report: NetcheckReport,
+): ConnectivityItem[] {
+	const probe = report.derp.netcheck;
+	if (!probe) {
+		return [];
+	}
+
+	// Tones: bad = real problem, warn = works but suboptimal, neutral = optional.
+	const items: ConnectivityItem[] = [
+		boolItem("UDP", probe.UDP, {
+			true: ["Reachable", "good"],
+			false: ["Blocked", "bad"],
+		}),
+		boolItem("IPv4", probe.IPv4, {
+			true: ["Yes", "good"],
+			false: ["No", "warn"],
+		}),
+		boolItem("IPv6", probe.IPv6, {
+			true: ["Yes", "good"],
+			false: ["No", "neutral"],
+		}),
+		boolItem("NAT mapping", probe.MappingVariesByDestIP, {
+			true: ["Varies by destination (hard NAT)", "warn"],
+			false: ["Consistent (easy NAT)", "good"],
+		}),
+		boolItem("Hairpinning", probe.HairPinning, {
+			true: ["Supported", "good"],
+			false: ["Not supported", "neutral"],
+		}),
+		portMappingItem(probe),
+	];
+
+	const preferred = preferredRegionName(report);
+	if (preferred) {
+		items.push({ label: "Preferred relay", value: preferred, tone: "good" });
+	}
+	return items;
+}
+
+/** Renders a boolean probe field; a missing value is a neutral "Unknown". */
+function boolItem(
+	label: string,
+	state: boolean | null | undefined,
+	cases: { true: Outcome; false: Outcome },
+): ConnectivityItem {
+	if (typeof state !== "boolean") {
+		return { label, value: "Unknown", tone: "neutral" };
+	}
+	const [value, tone] = state ? cases.true : cases.false;
+	return { label, value, tone };
+}
+
+function portMappingItem(probe: NetcheckConnectivity): ConnectivityItem {
+	const fields = [
+		[probe.UPnP, "UPnP"],
+		[probe.PMP, "NAT-PMP"],
+		[probe.PCP, "PCP"],
+	] as const;
+	const detected = fields.filter(([on]) => on).map(([, name]) => name);
+	if (detected.length > 0) {
+		return { label: "Port mapping", value: detected.join(", "), tone: "good" };
+	}
+	// A null field means "could not determine", so report "None detected" only
+	// once a protocol was actually probed.
+	const probed = fields.some(([on]) => typeof on === "boolean");
+	return {
+		label: "Port mapping",
+		value: probed ? "None detected" : "Unknown",
+		tone: "neutral",
+	};
+}
+
+function preferredRegionName(report: NetcheckReport): string | undefined {
+	const id = report.derp.netcheck?.PreferredDERP;
+	if (!id) {
+		return undefined;
+	}
+	return regionName(report.derp.regions[String(id)], id);
+}

packages/netcheck/src/css.d.ts

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

packages/netcheck/src/format.ts

@@ -0,0 +1,35 @@
+export type TriState = "yes" | "no" | "unknown";
+
+const NANOS_PER_MS = 1_000_000;
+
+/** Below this, show one decimal; at or above, round to whole ms. */
+const DECIMAL_PRECISION_BELOW_MS = 100;
+
+export function nanosToMs(nanos: number): number {
+	return nanos / NANOS_PER_MS;
+}
+
+export function formatLatency(ms: number | undefined): string {
+	if (ms === undefined) {
+		return "—";
+	}
+	if (ms < 1) {
+		return "<1 ms";
+	}
+	if (ms < DECIMAL_PRECISION_BELOW_MS) {
+		return `${ms.toFixed(1)} ms`;
+	}
+	return `${Math.round(ms)} ms`;
+}
+
+/** Renders a STUN/relay capability result for a table cell. */
+export function formatTriState(value: TriState): string {
+	switch (value) {
+		case "yes":
+			return "Yes";
+		case "no":
+			return "Failed";
+		case "unknown":
+			return "—";
+	}
+}

packages/netcheck/src/health.ts

@@ -0,0 +1,84 @@
+import { regionName } from "./regions";
+
+import type {
+	NetcheckReport,
+	NetcheckSectionHealth,
+	NetcheckSeverity,
+} from "@repo/shared";
+
+export interface Issue {
+	kind: "error" | "warning";
+	code?: string;
+	message: string;
+}
+
+const SEVERITY_LABEL = {
+	ok: "Healthy",
+	warning: "Warning",
+	error: "Error",
+} as const satisfies Record<NetcheckSeverity, string>;
+
+const BANNER_TITLE = {
+	ok: "Network is healthy",
+	warning: "Network has warnings",
+	error: "Network problems detected",
+} as const satisfies Record<NetcheckSeverity, string>;
+
+const SECTION_STATUS = {
+	ok: "healthy",
+	warning: "warning",
+	error: "error",
+} as const satisfies Record<NetcheckSeverity, string>;
+
+export function severityLabel(severity: NetcheckSeverity): string {
+	return SEVERITY_LABEL[severity];
+}
+
+export function bannerTitle(severity: NetcheckSeverity): string {
+	return BANNER_TITLE[severity];
+}
+
+/** One-line status for a report section, e.g. "2 warnings" or "healthy". */
+export function sectionSummary(section: NetcheckSectionHealth): string {
+	const count = section.warnings.length;
+	if (section.severity === "warning" && count > 0) {
+		return `${count} warning${count === 1 ? "" : "s"}`;
+	}
+	return SECTION_STATUS[section.severity];
+}
+
+/** Section errors first, then warnings, so the most severe issues lead. */
+export function collectIssues(report: NetcheckReport): Issue[] {
+	const errors: Issue[] = [];
+	const warnings: Issue[] = [];
+	const addSection = (section: NetcheckSectionHealth) => {
+		if (section.error) {
+			errors.push({ kind: "error", message: section.error });
+		}
+		for (const warning of section.warnings) {
+			warnings.push({
+				kind: "warning",
+				message: warning.message,
+				...(warning.code ? { code: warning.code } : {}),
+			});
+		}
+	};
+	addSection(report.derp);
+	if (report.derp.netcheck_err) {
+		errors.push({ kind: "error", message: report.derp.netcheck_err });
+	}
+	for (const [key, region] of Object.entries(report.derp.regions)) {
+		const name = regionName(region, Number(key));
+		// Region warnings are already in the section list; list only errors.
+		if (region.error) {
+			errors.push({ kind: "error", message: `${name}: ${region.error}` });
+		} else if (region.severity === "error") {
+			errors.push({
+				kind: "error",
+				message: `${name}: a node failed its health check`,
+			});
+		}
+	}
+	addSection(report.interfaces);
+	return [...errors, ...warnings];
+}