Sep 17, 2025 · May 23, 2025 · May 23, 2025 · May 23, 2025 · May 23, 2025 · May 23, 2025
diff --git a/.vscode/settings.json b/.vscode/settings.json
 }
 },

 "tailwindCSS.classFunctions": ["cva", "cn"],
 "[css][html][markdown][yaml]": {
 "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
diff --git a/site/src/components/Alert/ErrorAlert.tsx b/site/src/components/Alert/ErrorAlert.tsx
 import { Link } from "../Link/Link";
 import { Alert, AlertDetail, type AlertProps } from "./Alert";

 export const ErrorAlert: FC<
 type ErrorAlertProps = Readonly<
 Omit<AlertProps, "severity" | "children"> & { error: unknown }
 > = ({ error, ...alertProps }) => {
 >;

 export const ErrorAlert: FC<ErrorAlertProps> = ({ error, ...alertProps }) => {
 const message = getErrorMessage(error, "Something went wrong.");
 const detail = getErrorDetail(error);
 const status = getErrorStatus(error);
diff --git a/site/src/components/Badge/Badge.stories.tsx b/site/src/components/Badge/Badge.stories.tsx
 },
 };

 export const Destructive: Story = {
 args: {
 variant: "destructive",
 },
 };

 export const Info: Story = {
 args: {
 variant: "info",
 },
 };

 export const Green: Story = {
 args: {
 variant: "green",
 },
 };

 export const SmallWithIcon: Story = {
 args: {
 variant: "default",
diff --git a/site/src/components/Badge/Badge.tsx b/site/src/components/Badge/Badge.tsx
 destructive:
 "border border-solid border-border-destructive bg-surface-red text-highlight-red shadow",
 green:
 "border border-solid border-surface-green bg-surface-green text-highlight-green shadow",
 info: "border border-solid border-surface-sky bg-surface-sky text-highlight-sky shadow",
 "border border-solid border-border-green bg-surface-green text-highlight-green shadow",
 info: "border border-solid border-border-sky bg-surface-sky text-highlight-sky shadow",
 },
 size: {
 xs: "text-2xs font-regular h-5 [&_svg]:hidden rounded px-1.5",
 defaultVariants: {
 variant: "default",
 size: "md",
 border: "solid",
 border: "none",
 hover: false,
 },
 },
diff --git a/site/src/components/Latency/Latency.stories.tsx b/site/src/components/Latency/Latency.stories.tsx
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { screen, userEvent, within } from "storybook/test";
 import { Latency } from "./Latency";

 const meta: Meta<typeof Latency> = {
 isLoading: true,
 },
 };

 export const NoLatency: Story = {
 args: {
 latency: undefined,
 },

 play: async ({ canvasElement }) => {
 const canvas = within(canvasElement);
 const tooltipTrigger = canvas.getByLabelText(/Latency not available/i);
 await userEvent.hover(tooltipTrigger);

 // Need to await getting the tooltip because the tooltip doesn't open
 // immediately on hover
 await screen.findByRole("tooltip", { name: /Latency not available/i });
 },
 };
diff --git a/site/src/components/Latency/Latency.tsx b/site/src/components/Latency/Latency.tsx
 import { useTheme } from "@emotion/react";
 import CircularProgress from "@mui/material/CircularProgress";
 import Tooltip from "@mui/material/Tooltip";
 import { visuallyHidden } from "@mui/utils";
 import { Abbr } from "components/Abbr/Abbr";
 import { CircleHelpIcon } from "lucide-react";
 import type { FC } from "react";
 import { cn } from "utils/cn";
 import { getLatencyColor } from "utils/latency";

 interface LatencyProps {
 latency?: number;
 isLoading?: boolean;
 size?: number;
 className?: string;
 iconClassName?: string;
 }

 export const Latency: FC<LatencyProps> = ({
 latency,
 isLoading,
 size = 14,
 className,
 iconClassName,
 }) => {
 const theme = useTheme();
 // Always use the no latency color for loading.
 const color = getLatencyColor(theme, isLoading ? undefined : latency);

 if (isLoading) {
 return (
 <Tooltip title="Loading latency...">
 <CircularProgress size={size} className="ml-auto" style={{ color }} />
 <Tooltip title="Loading latency..." className={className}>
 <CircularProgress
 className={cn("!size-icon-xs", iconClassName)}
 style={{ color }}
 />
 </Tooltip>
 );
 }

 if (!latency) {
 const notAvailableText = "Latency not available";
 return (
 <Tooltip title={notAvailableText}>
 <>
 <span css={{ ...visuallyHidden }}>{notAvailableText}</span>

 <CircleHelpIcon className="ml-auto size-icon-sm" style={{ color }} />
 </>
 <Tooltip title="Latency not available" className={className}>
 <CircleHelpIcon
 className={cn("!size-icon-sm", iconClassName)}
 style={{ color }}
 />
 </Tooltip>
 );
 }

 return (
 <div className="ml-autotext-sm" style={{ color }}>
 <spancss={{ ...visuallyHidden }}>Latency: </span>
 <div className={cn("text-sm", className)} style={{ color }}>
 <spanclassName="sr-only">Latency: </span>
 {latency.toFixed(0)}
 <Abbr title="milliseconds">ms</Abbr>
 </div>
diff --git a/site/src/hooks/useEmbeddedMetadata.ts b/site/src/hooks/useEmbeddedMetadata.ts
 manager.getMetadata,
 );

 // biome-ignore lint/correctness/useExhaustiveDependencies(manager.clearMetadataByKey): baked into containing hook
 conststableMetadataResult=useMemo<UseEmbeddedMetadataResult>(()=>{
 return{
 metadata,
 clearMetadataByKey:manager.clearMetadataByKey,
 };
 },[metadata]);
 },[manager,metadata]);

 returnstableMetadataResult;
 };
diff --git a/site/src/index.css b/site/src/index.css
 --surface-purple:25191%95%;
 --border-default:2406%90%;
 --border-success:14276%36%;
 --border-sky:20390%40%;
 --border-green:13882%82%;
 --border-warning:30.66,97.16%,72.35%;
 --border-destructive:084%60%;
 --border-hover:2405%34%;
 --border-success:14276%36%;
 --border-warning:30.66,97.16%,72.35%;
 --border-destructive:091%71%;
 --border-sky:19490%62%;
 --border-green:14377%87%;
 --border-hover:240,5%,34%;
 --overlay-default:24010%4%/80%;
 --highlight-purple:25295%85%;
diff --git a/site/src/modules/dashboard/Navbar/MobileMenu.tsx b/site/src/modules/dashboard/Navbar/MobileMenu.tsx
 <img className="w-4 h-4" src={p.icon_url} alt={p.name} />
 {p.display_name || p.name}
 {latency ? (
 <Latency latency={latency.latencyMS} />
 <LatencyclassName="ml-auto"latency={latency.latencyMS} />
 ) : (
 <CircleHelpIcon className="ml-auto" />
 )}
diff --git a/site/src/modules/dashboard/Navbar/ProxyMenu.tsx b/site/src/modules/dashboard/Navbar/ProxyMenu.tsx
 <Latency
 latency={latencies?.[selectedProxy.id]?.latencyMS}
 isLoading={proxyLatencyLoading(selectedProxy)}
 size={24}
 />
 </>
 ) : (
 {proxy.display_name}

 <Latency
 className="ml-auto"
 latency={latencies?.[proxy.id]?.latencyMS}
 isLoading={proxyLatencyLoading(proxy)}
 />
diff --git a/site/src/modules/resources/AgentLogs/AgentLogs.stories.tsx b/site/src/modules/resources/AgentLogs/AgentLogs.stories.tsx
 sources: MockSources,
 logs: MockLogs,
 height: MockLogs.length * AGENT_LOG_LINE_HEIGHT,
 overflowed: false,
 },
 parameters: {
 layout: "fullscreen",
 export default meta;
 type Story = StoryObj<typeof AgentLogs>;

 const Default: Story = {};
 exportconst Default: Story = {};

 export { Default as AgentLogs };
 export const Overflowed: Story = {
 args: {
 className: "max-h-[420px]",
 overflowed: true,
 },
 };
Original file line number	Diff line number	Diff line change
Expand Up		@@ -54,6 +54,7 @@
		}
		},

		"tailwindCSS.classFunctions": ["cva", "cn"],
		"[css][html][markdown][yaml]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
		},
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -4,9 +4,11 @@ import type { FC } from "react";
		import { Link } from "../Link/Link";
		import { Alert, AlertDetail, type AlertProps } from "./Alert";

		export const ErrorAlert: FC<
		type ErrorAlertProps = Readonly<
		Omit<AlertProps, "severity" \| "children"> & { error: unknown }
		> = ({ error, ...alertProps }) => {
		>;

		export const ErrorAlert: FC<ErrorAlertProps> = ({ error, ...alertProps }) => {
		const message = getErrorMessage(error, "Something went wrong.");
		const detail = getErrorDetail(error);
		const status = getErrorStatus(error);
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -21,6 +21,24 @@ export const Warning: Story = {
		},
		};

		export const Destructive: Story = {
		args: {
		variant: "destructive",
		},
		};

		export const Info: Story = {
		args: {
		variant: "info",
		},
		};

		export const Green: Story = {
		args: {
		variant: "green",
		},
		};
Comment on lines +24 to +40 Copy link ContributorAuthor buenos-nachosSep 10, 2025 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. Some of our styling for the`Badge` component was jacked, and we just never caught it because we never made stories for the variants

		export const SmallWithIcon: Story = {
		args: {
		variant: "default",
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -23,8 +23,8 @@ const badgeVariants = cva(
		destructive:
		"border border-solid border-border-destructive bg-surface-red text-highlight-red shadow",
		green:
		"border border-solid border-surface-green bg-surface-green text-highlight-green shadow",
		info: "border border-solid border-surface-sky bg-surface-sky text-highlight-sky shadow",
		"border border-solid border-border-green bg-surface-green text-highlight-green shadow",
		info: "border border-solid border-border-sky bg-surface-sky text-highlight-sky shadow",
		},
		size: {
		xs: "text-2xs font-regular h-5 [&_svg]:hidden rounded px-1.5",
Expand All		@@ -50,7 +50,7 @@ const badgeVariants = cva(
		defaultVariants: {
		variant: "default",
		size: "md",
		border: "solid",
		border: "none",
		hover: false,
		},
		},
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,4 +1,5 @@
		import type { Meta, StoryObj } from "@storybook/react-vite";
		import { screen, userEvent, within } from "storybook/test";
		import { Latency } from "./Latency";

		const meta: Meta<typeof Latency> = {
Expand DownExpand Up		@@ -32,3 +33,19 @@ export const Loading: Story = {
		isLoading: true,
		},
		};

		export const NoLatency: Story = {
		args: {
		latency: undefined,
		},

		play: async ({ canvasElement }) => {
		const canvas = within(canvasElement);
		const tooltipTrigger = canvas.getByLabelText(/Latency not available/i);
		await userEvent.hover(tooltipTrigger);

		// Need to await getting the tooltip because the tooltip doesn't open
		// immediately on hover
		await screen.findByRole("tooltip", { name: /Latency not available/i });
		},
		};
Original file line number	Diff line number	Diff line change
		@@ -1,51 +1,54 @@
		import { useTheme } from "@emotion/react";
		import CircularProgress from "@mui/material/CircularProgress";
		import Tooltip from "@mui/material/Tooltip";
		import { visuallyHidden } from "@mui/utils";
		import { Abbr } from "components/Abbr/Abbr";
		import { CircleHelpIcon } from "lucide-react";
		import type { FC } from "react";
		import { cn } from "utils/cn";
		import { getLatencyColor } from "utils/latency";

		interface LatencyProps {
		latency?: number;
		isLoading?: boolean;
		size?: number;
		className?: string;
		iconClassName?: string;
		}

		export const Latency: FC<LatencyProps> = ({
		latency,
		isLoading,
		size = 14,
		className,
		iconClassName,
		}) => {
		const theme = useTheme();
		// Always use the no latency color for loading.
		const color = getLatencyColor(theme, isLoading ? undefined : latency);

		if (isLoading) {
		return (
		<Tooltip title="Loading latency...">
		<CircularProgress size={size} className="ml-auto" style={{ color }} />
		<Tooltip title="Loading latency..." className={className}>
		<CircularProgress
		className={cn("!size-icon-xs", iconClassName)}
		style={{ color }}
		/>
		</Tooltip>
		);
		}

		if (!latency) {
		const notAvailableText = "Latency not available";
		return (
		<Tooltip title={notAvailableText}>
		<>
		<span css={{ ...visuallyHidden }}>{notAvailableText}</span>

		<CircleHelpIcon className="ml-auto size-icon-sm" style={{ color }} />
		</>
		<Tooltip title="Latency not available" className={className}>
		<CircleHelpIcon
		className={cn("!size-icon-sm", iconClassName)}
		style={{ color }}
		/>
		</Tooltip>
		);
		}

		return (
		<div className="ml-autotext-sm" style={{ color }}>
		<spancss={{ ...visuallyHidden }}>Latency: </span>
		<div className={cn("text-sm", className)} style={{ color }}>
		<spanclassName="sr-only">Latency: </span>
		{latency.toFixed(0)}
		<Abbr title="milliseconds">ms</Abbr>
		</div>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -229,13 +229,12 @@ export function makeUseEmbeddedMetadata(
		manager.getMetadata,
		);

		// biome-ignore lint/correctness/useExhaustiveDependencies(manager.clearMetadataByKey): baked into containing hook
		conststableMetadataResult=useMemo<UseEmbeddedMetadataResult>(()=>{
		return{
		metadata,
		clearMetadataByKey:manager.clearMetadataByKey,
		};
		},[metadata]);
		},[manager,metadata]);
buenos-nachos marked this conversation as resolved. Show resolvedHide resolved

		returnstableMetadataResult;
		};
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -32,6 +32,8 @@
		--surface-purple:25191%95%;
		--border-default:2406%90%;
		--border-success:14276%36%;
		--border-sky:20390%40%;
		--border-green:13882%82%;
		--border-warning:30.66,97.16%,72.35%;
		--border-destructive:084%60%;
		--border-hover:2405%34%;
Expand DownExpand Up		@@ -75,6 +77,8 @@
		--border-success:14276%36%;
		--border-warning:30.66,97.16%,72.35%;
		--border-destructive:091%71%;
		--border-sky:19490%62%;
		--border-green:14377%87%;
		--border-hover:240,5%,34%;
		--overlay-default:24010%4%/80%;
		--highlight-purple:25295%85%;
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -162,7 +162,7 @@ const ProxySettingsSub: FC<ProxySettingsSubProps> = ({ proxyContextValue }) => {
		<img className="w-4 h-4" src={p.icon_url} alt={p.name} />
		{p.display_name \|\| p.name}
		{latency ? (
		<Latency latency={latency.latencyMS} />
		<LatencyclassName="ml-auto"latency={latency.latencyMS} />
		) : (
		<CircleHelpIcon className="ml-auto" />
		)}
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -92,7 +92,6 @@ export const ProxyMenu: FC<ProxyMenuProps> = ({ proxyContextValue }) => {
		<Latency
		latency={latencies?.[selectedProxy.id]?.latencyMS}
		isLoading={proxyLatencyLoading(selectedProxy)}
		size={24}
		/>
		</>
		) : (
Expand DownExpand Up		@@ -191,6 +190,7 @@ export const ProxyMenu: FC<ProxyMenuProps> = ({ proxyContextValue }) => {
		{proxy.display_name}

		<Latency
		className="ml-auto"
		latency={latencies?.[proxy.id]?.latencyMS}
		isLoading={proxyLatencyLoading(proxy)}
		/>
Expand Down