From 40dc961024d8ec0d1117439b003883c9f6f6d583 Mon Sep 17 00:00:00 2001
From: Tracy Johnson <tracy@coder.com>
Date: Thu, 13 Aug 2026 15:26:26 +0000
Subject: [PATCH 1/6] feat(site/src/modules/dashboard/Navbar): replace proxy
 emoji with latency radio icon in trigger

---
 .../dashboard/Navbar/ProxyMenu.stories.tsx    | 34 +++++++++++++++++++
 .../modules/dashboard/Navbar/ProxyMenu.tsx    | 15 +++++---
 2 files changed, 44 insertions(+), 5 deletions(-)

diff --git a/site/src/modules/dashboard/Navbar/ProxyMenu.stories.tsx b/site/src/modules/dashboard/Navbar/ProxyMenu.stories.tsx
index 4a25ef96059..12c6d73a365 100644
--- a/site/src/modules/dashboard/Navbar/ProxyMenu.stories.tsx
+++ b/site/src/modules/dashboard/Navbar/ProxyMenu.stories.tsx
@@ -103,6 +103,40 @@ type Story = StoryObj<typeof ProxyMenu>;
 
 export const Closed: Story = {};
 
+export const ClosedWarningLatency: Story = {
+	args: {
+		proxyContextValue: {
+			...defaultProxyContextValue,
+			proxyLatencies: {
+				...MockProxyLatencies,
+				[MockWorkspaceProxies[0].id]: {
+					accurate: true,
+					latencyMS: 224,
+					at: new Date(),
+					nextHopProtocol: "h2",
+				},
+			},
+		},
+	},
+};
+
+export const ClosedCriticalLatency: Story = {
+	args: {
+		proxyContextValue: {
+			...defaultProxyContextValue,
+			proxyLatencies: {
+				...MockProxyLatencies,
+				[MockWorkspaceProxies[0].id]: {
+					accurate: true,
+					latencyMS: 471,
+					at: new Date(),
+					nextHopProtocol: "h2",
+				},
+			},
+		},
+	},
+};
+
 export const Opened: Story = {
 	play: async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
diff --git a/site/src/modules/dashboard/Navbar/ProxyMenu.tsx b/site/src/modules/dashboard/Navbar/ProxyMenu.tsx
index 85d9e37ff80..9d8c738a177 100644
--- a/site/src/modules/dashboard/Navbar/ProxyMenu.tsx
+++ b/site/src/modules/dashboard/Navbar/ProxyMenu.tsx
@@ -1,3 +1,4 @@
+import { RadioIcon } from "lucide-react";
 import { type FC, useState } from "react";
 import { Link } from "react-router";
 import { toast } from "sonner";
@@ -19,6 +20,7 @@ import { Latency } from "#/components/Latency/Latency";
 import { Skeleton } from "#/components/Skeleton/Skeleton";
 import type { ProxyContextValue } from "#/contexts/ProxyContext";
 import { useAuthenticated } from "#/hooks/useAuthenticated";
+import { getLatencyColor } from "#/utils/latency";
 import { sortProxiesByLatency } from "./proxyUtils";
 
 interface ProxyMenuProps {
@@ -80,14 +82,17 @@ export const ProxyMenu: FC<ProxyMenuProps> = ({ proxyContextValue }) => {
 
 					{selectedProxy ? (
 						<>
-							<ExternalImage
-								// Empty alt text used because we don't want to double up on
-								// screen reader announcements from visually-hidden span
-								alt=""
-								src={selectedProxy.icon_url}
+							<RadioIcon
+								aria-hidden="true"
+								className={getLatencyColor(
+									proxyLatencyLoading(selectedProxy)
+										? undefined
+										: latencies?.[selectedProxy.id]?.latencyMS,
+								)}
 							/>
 
 							<Latency
+								className="text-content-primary"
 								latency={latencies?.[selectedProxy.id]?.latencyMS}
 								isLoading={proxyLatencyLoading(selectedProxy)}
 							/>

From 3fd39bd9c162da8d8928ccf0b9e45886a6486723 Mon Sep 17 00:00:00 2001
From: Tracy Johnson <tracy@coder.com>
Date: Thu, 13 Aug 2026 16:00:50 +0000
Subject: [PATCH 2/6] chore(site/src/modules/dashboard/Navbar): right-align
 ProxyMenu story trigger to match navbar placement

---
 site/src/modules/dashboard/Navbar/ProxyMenu.stories.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/site/src/modules/dashboard/Navbar/ProxyMenu.stories.tsx b/site/src/modules/dashboard/Navbar/ProxyMenu.stories.tsx
index 12c6d73a365..6ede1795eee 100644
--- a/site/src/modules/dashboard/Navbar/ProxyMenu.stories.tsx
+++ b/site/src/modules/dashboard/Navbar/ProxyMenu.stories.tsx
@@ -80,7 +80,9 @@ const meta: Meta<typeof ProxyMenu> = {
 	decorators: [
 		(Story) => (
 			<AuthProvider>
-				<Story />
+				<div className="flex justify-end">
+					<Story />
+				</div>
 			</AuthProvider>
 		),
 		withDesktopViewport,

From 529e478ff93db102364ae71b2b6d0b63aad83616 Mon Sep 17 00:00:00 2001
From: Tracy Johnson <tracy@coder.com>
Date: Thu, 13 Aug 2026 16:35:37 +0000
Subject: [PATCH 3/6] feat(site/src/modules/dashboard/Navbar): use latency
 radio icon in mobile proxy settings row

---
 site/src/modules/dashboard/Navbar/MobileMenu.tsx | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/site/src/modules/dashboard/Navbar/MobileMenu.tsx b/site/src/modules/dashboard/Navbar/MobileMenu.tsx
index 661341830c7..bfd97e76ac3 100644
--- a/site/src/modules/dashboard/Navbar/MobileMenu.tsx
+++ b/site/src/modules/dashboard/Navbar/MobileMenu.tsx
@@ -2,6 +2,7 @@ import {
 	ChevronRightIcon,
 	CircleHelpIcon,
 	MenuIcon,
+	RadioIcon,
 	XIcon,
 } from "lucide-react";
 import { type FC, useState } from "react";
@@ -26,6 +27,7 @@ import { ExternalImage } from "#/components/ExternalImage/ExternalImage";
 import { Latency } from "#/components/Latency/Latency";
 import type { ProxyContextValue } from "#/contexts/ProxyContext";
 import { cn } from "#/utils/cn";
+import { getLatencyColor } from "#/utils/latency";
 import {
 	AdminSettingsItems,
 	type AdminSettingsPermissions,
@@ -132,12 +134,16 @@ const ProxySettingsSub: FC<ProxySettingsSubProps> = ({ proxyContextValue }) => {
 				>
 					Workspace proxy settings:
 					<span className="leading-none flex items-center gap-1">
-						<ExternalImage
-							className="size-4"
-							src={selectedProxy.icon_url}
-							alt={selectedProxy.name}
+						<RadioIcon
+							aria-hidden="true"
+							className={cn("size-4", getLatencyColor(latency?.latencyMS))}
 						/>
-						{latency && <Latency latency={latency.latencyMS} />}
+						{latency && (
+							<Latency
+								className="text-content-primary"
+								latency={latency.latencyMS}
+							/>
+						)}
 					</span>
 					<ChevronRightIcon
 						className={cn("ml-auto", open ? "rotate-90" : "")}

From c1a5ea34130261939cefe92eb3ad713be7abfe7e Mon Sep 17 00:00:00 2001
From: Tracy Johnson <tracy@coder.com>
Date: Thu, 13 Aug 2026 18:40:54 +0000
Subject: [PATCH 4/6] fix(site/src/modules/dashboard/Navbar): address review
 feedback on latency icon states

- Restore proxy name in the mobile proxy row's accessible name via an
  sr-only span, matching the desktop trigger.
- Apply the text-content-primary override only when a latency value is
  shown, so the unknown-latency CircleHelpIcon keeps its muted color.
- Add a ClosedNoLatency story covering the unknown icon color state.
---
 site/src/modules/dashboard/Navbar/MobileMenu.tsx    |  3 +++
 .../modules/dashboard/Navbar/ProxyMenu.stories.tsx  | 13 +++++++++++++
 site/src/modules/dashboard/Navbar/ProxyMenu.tsx     |  6 +++++-
 3 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/site/src/modules/dashboard/Navbar/MobileMenu.tsx b/site/src/modules/dashboard/Navbar/MobileMenu.tsx
index bfd97e76ac3..a1936347734 100644
--- a/site/src/modules/dashboard/Navbar/MobileMenu.tsx
+++ b/site/src/modules/dashboard/Navbar/MobileMenu.tsx
@@ -134,6 +134,9 @@ const ProxySettingsSub: FC<ProxySettingsSubProps> = ({ proxyContextValue }) => {
 				>
 					Workspace proxy settings:
 					<span className="leading-none flex items-center gap-1">
+						<span className="sr-only">
+							Latency for {selectedProxy.display_name || selectedProxy.name}
+						</span>
 						<RadioIcon
 							aria-hidden="true"
 							className={cn("size-4", getLatencyColor(latency?.latencyMS))}
diff --git a/site/src/modules/dashboard/Navbar/ProxyMenu.stories.tsx b/site/src/modules/dashboard/Navbar/ProxyMenu.stories.tsx
index 6ede1795eee..831f45bf527 100644
--- a/site/src/modules/dashboard/Navbar/ProxyMenu.stories.tsx
+++ b/site/src/modules/dashboard/Navbar/ProxyMenu.stories.tsx
@@ -139,6 +139,19 @@ export const ClosedCriticalLatency: Story = {
 	},
 };
 
+export const ClosedNoLatency: Story = {
+	args: {
+		proxyContextValue: {
+			...defaultProxyContextValue,
+			proxyLatencies: Object.fromEntries(
+				Object.entries(MockProxyLatencies).filter(
+					([id]) => id !== MockWorkspaceProxies[0].id,
+				),
+			),
+		},
+	},
+};
+
 export const Opened: Story = {
 	play: async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
diff --git a/site/src/modules/dashboard/Navbar/ProxyMenu.tsx b/site/src/modules/dashboard/Navbar/ProxyMenu.tsx
index 9d8c738a177..35aae882128 100644
--- a/site/src/modules/dashboard/Navbar/ProxyMenu.tsx
+++ b/site/src/modules/dashboard/Navbar/ProxyMenu.tsx
@@ -92,7 +92,11 @@ export const ProxyMenu: FC<ProxyMenuProps> = ({ proxyContextValue }) => {
 							/>
 
 							<Latency
-								className="text-content-primary"
+								className={
+									latencies?.[selectedProxy.id]?.latencyMS
+										? "text-content-primary"
+										: undefined
+								}
 								latency={latencies?.[selectedProxy.id]?.latencyMS}
 								isLoading={proxyLatencyLoading(selectedProxy)}
 							/>

From 4c229e9efaff6e242f8a752250ec6963d69a8c0b Mon Sep 17 00:00:00 2001
From: Tracy Johnson <tracy@coder.com>
Date: Thu, 13 Aug 2026 19:08:55 +0000
Subject: [PATCH 5/6] fix(site/src/modules/dashboard/Navbar): announce
 unavailable latency and cover mobile icon states

- Render Latency unconditionally in the mobile proxy row so screen
  readers hear "Latency not available" instead of silence, matching
  the desktop trigger.
- Add warning, critical, and no-latency MobileMenu stories mirroring
  the desktop trigger coverage.
---
 .../dashboard/Navbar/MobileMenu.stories.tsx   | 79 +++++++++++++++----
 .../modules/dashboard/Navbar/MobileMenu.tsx   | 10 +--
 2 files changed, 68 insertions(+), 21 deletions(-)

diff --git a/site/src/modules/dashboard/Navbar/MobileMenu.stories.tsx b/site/src/modules/dashboard/Navbar/MobileMenu.stories.tsx
index 00193cdcbc0..d8391c1f958 100644
--- a/site/src/modules/dashboard/Navbar/MobileMenu.stories.tsx
+++ b/site/src/modules/dashboard/Navbar/MobileMenu.stories.tsx
@@ -11,6 +11,22 @@ import {
 } from "#/testHelpers/entities";
 import { MobileMenu } from "./MobileMenu";
 
+const defaultProxyContextValue = {
+	latenciesLoaded: true,
+	proxy: {
+		preferredPathAppURL: "",
+		preferredWildcardHostname: "",
+		proxy: MockPrimaryWorkspaceProxy,
+	},
+	isLoading: false,
+	isFetched: true,
+	setProxy: fn(),
+	clearProxy: fn(),
+	refetchProxyLatencies: fn(),
+	proxyLatencies: MockProxyLatencies,
+	proxies: MockWorkspaceProxies,
+};
+
 const meta: Meta<typeof MobileMenu> = {
 	title: "modules/dashboard/MobileMenu",
 	parameters: {
@@ -21,21 +37,7 @@ const meta: Meta<typeof MobileMenu> = {
 	},
 	component: MobileMenu,
 	args: {
-		proxyContextValue: {
-			latenciesLoaded: true,
-			proxy: {
-				preferredPathAppURL: "",
-				preferredWildcardHostname: "",
-				proxy: MockPrimaryWorkspaceProxy,
-			},
-			isLoading: false,
-			isFetched: true,
-			setProxy: fn(),
-			clearProxy: fn(),
-			refetchProxyLatencies: fn(),
-			proxyLatencies: MockProxyLatencies,
-			proxies: MockWorkspaceProxies,
-		},
+		proxyContextValue: defaultProxyContextValue,
 		user: MockUserOwner,
 		supportLinks: MockSupportLinks,
 		onSignOut: fn(),
@@ -105,6 +107,53 @@ export const ProxySettings: Story = {
 	},
 };
 
+export const ProxyWarningLatency: Story = {
+	args: {
+		proxyContextValue: {
+			...defaultProxyContextValue,
+			proxyLatencies: {
+				...MockProxyLatencies,
+				[MockPrimaryWorkspaceProxy.id]: {
+					accurate: true,
+					latencyMS: 224,
+					at: new Date(),
+					nextHopProtocol: "h2",
+				},
+			},
+		},
+	},
+};
+
+export const ProxyCriticalLatency: Story = {
+	args: {
+		proxyContextValue: {
+			...defaultProxyContextValue,
+			proxyLatencies: {
+				...MockProxyLatencies,
+				[MockPrimaryWorkspaceProxy.id]: {
+					accurate: true,
+					latencyMS: 471,
+					at: new Date(),
+					nextHopProtocol: "h2",
+				},
+			},
+		},
+	},
+};
+
+export const ProxyNoLatency: Story = {
+	args: {
+		proxyContextValue: {
+			...defaultProxyContextValue,
+			proxyLatencies: Object.fromEntries(
+				Object.entries(MockProxyLatencies).filter(
+					([id]) => id !== MockPrimaryWorkspaceProxy.id,
+				),
+			),
+		},
+	},
+};
+
 export const UserSettings: Story = {
 	play: async ({ canvasElement }) => {
 		const user = userEvent.setup();
diff --git a/site/src/modules/dashboard/Navbar/MobileMenu.tsx b/site/src/modules/dashboard/Navbar/MobileMenu.tsx
index a1936347734..2fde7a40758 100644
--- a/site/src/modules/dashboard/Navbar/MobileMenu.tsx
+++ b/site/src/modules/dashboard/Navbar/MobileMenu.tsx
@@ -141,12 +141,10 @@ const ProxySettingsSub: FC<ProxySettingsSubProps> = ({ proxyContextValue }) => {
 							aria-hidden="true"
 							className={cn("size-4", getLatencyColor(latency?.latencyMS))}
 						/>
-						{latency && (
-							<Latency
-								className="text-content-primary"
-								latency={latency.latencyMS}
-							/>
-						)}
+						<Latency
+							className={latency ? "text-content-primary" : undefined}
+							latency={latency?.latencyMS}
+						/>
 					</span>
 					<ChevronRightIcon
 						className={cn("ml-auto", open ? "rotate-90" : "")}

From 0ceeed37fa938a7614a7fb32c92196a59682616a Mon Sep 17 00:00:00 2001
From: Tracy Johnson <tracy@coder.com>
Date: Thu, 13 Aug 2026 19:38:56 +0000
Subject: [PATCH 6/6] fix(site/src/modules/dashboard/Navbar): gate mobile
 latency color override on latencyMS

---
 site/src/modules/dashboard/Navbar/MobileMenu.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/site/src/modules/dashboard/Navbar/MobileMenu.tsx b/site/src/modules/dashboard/Navbar/MobileMenu.tsx
index 2fde7a40758..b8bd979a74b 100644
--- a/site/src/modules/dashboard/Navbar/MobileMenu.tsx
+++ b/site/src/modules/dashboard/Navbar/MobileMenu.tsx
@@ -142,7 +142,9 @@ const ProxySettingsSub: FC<ProxySettingsSubProps> = ({ proxyContextValue }) => {
 							className={cn("size-4", getLatencyColor(latency?.latencyMS))}
 						/>
 						<Latency
-							className={latency ? "text-content-primary" : undefined}
+							className={
+								latency?.latencyMS ? "text-content-primary" : undefined
+							}
 							latency={latency?.latencyMS}
 						/>
 					</span>