From 8bcdcd6c2d68a00693c6597e999ad5f8be490711 Mon Sep 17 00:00:00 2001
From: "blink-so[bot]" <211532188+blink-so[bot]@users.noreply.github.com>
Date: Tue, 17 Jun 2025 16:04:49 +0000
Subject: [PATCH 01/14] feat: migrate Alert component from MUI to shadcn

- Replace MUI Alert with shadcn-based implementation using class-variance-authority
- Maintain backward compatibility with existing Alert API (severity, dismissible, actions, onDismiss)
- Update AlertTitle imports across codebase to use new implementation
- Add proper Tailwind CSS styling with dark mode support
- Preserve accessibility features and smooth animations
- Support all existing severity levels: info, success, warning, error

Co-authored-by: jaaydenh <1858163+jaaydenh@users.noreply.github.com>
---
 site/src/components/Alert/Alert.tsx           | 105 ++++++++++++++----
 site/src/components/Alert/ErrorAlert.tsx      |   3 +-
 .../GitDeviceAuth/GitDeviceAuth.tsx           |   4 +-
 .../modules/provisioners/ProvisionerAlert.tsx |   8 +-
 .../ChangeWorkspaceVersionDialog.tsx          |   4 +-
 .../OverviewPage/OverviewPageView.tsx         |   4 +-
 site/src/pages/SetupPage/SetupPageView.tsx    |   3 +-
 site/src/pages/WorkspacePage/Workspace.tsx    |   3 +-
 8 files changed, 97 insertions(+), 37 deletions(-)

diff --git a/site/src/components/Alert/Alert.tsx b/site/src/components/Alert/Alert.tsx
index 2673cd9bc4f8a..0106173dad52f 100644
--- a/site/src/components/Alert/Alert.tsx
+++ b/site/src/components/Alert/Alert.tsx
@@ -1,22 +1,51 @@
-import MuiAlert, {
-	type AlertColor as MuiAlertColor,
-	type AlertProps as MuiAlertProps,
-} from "@mui/material/Alert";
 import Collapse from "@mui/material/Collapse";
+import { cva, type VariantProps } from "class-variance-authority";
 import { Button } from "components/Button/Button";
 import {
 	type FC,
+	forwardRef,
 	type PropsWithChildren,
 	type ReactNode,
 	useState,
 } from "react";
-export type AlertColor = MuiAlertColor;
+import { cn } from "utils/cn";
 
-export type AlertProps = MuiAlertProps & {
+const alertVariants = cva("relative w-full rounded-lg border p-4 text-left", {
+	variants: {
+		variant: {
+			default: "bg-surface-primary text-content-primary border-border-default",
+			info: "bg-blue-50 text-blue-900 border-blue-200 dark:bg-blue-950 dark:text-blue-100 dark:border-blue-800",
+			success:
+				"bg-green-50 text-green-900 border-green-200 dark:bg-green-950 dark:text-green-100 dark:border-green-800",
+			warning:
+				"bg-yellow-50 text-yellow-900 border-yellow-200 dark:bg-yellow-950 dark:text-yellow-100 dark:border-yellow-800",
+			error:
+				"bg-red-50 text-red-900 border-red-200 dark:bg-red-950 dark:text-red-100 dark:border-red-800",
+		},
+	},
+	defaultVariants: {
+		variant: "default",
+	},
+});
+
+// Map MUI severity to our variant
+const severityToVariant = {
+	info: "info",
+	success: "success",
+	warning: "warning",
+	error: "error",
+} as const;
+
+export type AlertColor = "info" | "success" | "warning" | "error";
+
+export type AlertProps = {
 	actions?: ReactNode;
 	dismissible?: boolean;
 	onDismiss?: () => void;
-};
+	severity?: AlertColor;
+	children?: ReactNode;
+	className?: string;
+} & VariantProps<typeof alertVariants>;
 
 export const Alert: FC<AlertProps> = ({
 	children,
@@ -24,7 +53,9 @@ export const Alert: FC<AlertProps> = ({
 	dismissible,
 	severity = "info",
 	onDismiss,
-	...alertProps
+	className,
+	variant,
+	...props
 }) => {
 	const [open, setOpen] = useState(true);
 
@@ -35,14 +66,21 @@ export const Alert: FC<AlertProps> = ({
 		return null;
 	}
 
+	// Use severity to determine variant if variant is not explicitly provided
+	const finalVariant =
+		variant ||
+		(severity in severityToVariant ? severityToVariant[severity] : "default");
+
 	return (
 		<Collapse in>
-			<MuiAlert
-				{...alertProps}
-				css={{ textAlign: "left" }}
-				severity={severity}
-				action={
-					<>
+			<div
+				role="alert"
+				className={cn(alertVariants({ variant: finalVariant }), className)}
+				{...props}
+			>
+				<div className="flex items-start justify-between">
+					<div className="flex-1">{children}</div>
+					<div className="flex items-center gap-2 ml-4">
 						{/* CTAs passed in by the consumer */}
 						{actions}
 
@@ -60,22 +98,43 @@ export const Alert: FC<AlertProps> = ({
 								Dismiss
 							</Button>
 						)}
-					</>
-				}
-			>
-				{children}
-			</MuiAlert>
+					</div>
+				</div>
+			</div>
 		</Collapse>
 	);
 };
 
 export const AlertDetail: FC<PropsWithChildren> = ({ children }) => {
 	return (
-		<span
-			css={(theme) => ({ color: theme.palette.text.secondary, fontSize: 13 })}
-			data-chromatic="ignore"
-		>
+		<span className="text-sm opacity-75" data-chromatic="ignore">
 			{children}
 		</span>
 	);
 };
+
+// Export AlertTitle and AlertDescription for compatibility
+export const AlertTitle = forwardRef<
+	HTMLHeadingElement,
+	React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+	<h5
+		ref={ref}
+		className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+		{...props}
+	/>
+));
+AlertTitle.displayName = "AlertTitle";
+
+export const AlertDescription = forwardRef<
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+	<div
+		ref={ref}
+		className={cn("text-sm [&_p]:leading-relaxed", className)}
+		{...props}
+	/>
+));
+
+AlertDescription.displayName = "AlertDescription";
diff --git a/site/src/components/Alert/ErrorAlert.tsx b/site/src/components/Alert/ErrorAlert.tsx
index 2a8da27e035ba..7129bbc07bfca 100644
--- a/site/src/components/Alert/ErrorAlert.tsx
+++ b/site/src/components/Alert/ErrorAlert.tsx
@@ -1,8 +1,7 @@
-import AlertTitle from "@mui/material/AlertTitle";
 import { getErrorDetail, getErrorMessage, getErrorStatus } from "api/errors";
 import type { FC } from "react";
 import { Link } from "../Link/Link";
-import { Alert, AlertDetail, type AlertProps } from "./Alert";
+import { Alert, AlertDetail, AlertTitle, type AlertProps } from "./Alert";
 
 type ErrorAlertProps = Readonly<
 	Omit<AlertProps, "severity" | "children"> & { error: unknown }
diff --git a/site/src/components/GitDeviceAuth/GitDeviceAuth.tsx b/site/src/components/GitDeviceAuth/GitDeviceAuth.tsx
index 7b3d8091abfeb..e8e74c1fe42a0 100644
--- a/site/src/components/GitDeviceAuth/GitDeviceAuth.tsx
+++ b/site/src/components/GitDeviceAuth/GitDeviceAuth.tsx
@@ -1,11 +1,11 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import AlertTitle from "@mui/material/AlertTitle";
+
 import CircularProgress from "@mui/material/CircularProgress";
 import Link from "@mui/material/Link";
 import type { ApiErrorResponse } from "api/errors";
 import type { ExternalAuthDevice } from "api/typesGenerated";
 import { isAxiosError } from "axios";
-import { Alert, AlertDetail } from "components/Alert/Alert";
+import { Alert, AlertDetail, AlertTitle } from "components/Alert/Alert";
 import { CopyButton } from "components/CopyButton/CopyButton";
 import { ExternalLinkIcon } from "lucide-react";
 import type { FC } from "react";
diff --git a/site/src/modules/provisioners/ProvisionerAlert.tsx b/site/src/modules/provisioners/ProvisionerAlert.tsx
index 2160b4e7b3ebf..ebadeb7593ae8 100644
--- a/site/src/modules/provisioners/ProvisionerAlert.tsx
+++ b/site/src/modules/provisioners/ProvisionerAlert.tsx
@@ -1,6 +1,10 @@
 import type { Theme } from "@emotion/react";
-import AlertTitle from "@mui/material/AlertTitle";
-import { Alert, type AlertColor, AlertDetail } from "components/Alert/Alert";
+import {
+	Alert,
+	type AlertColor,
+	AlertDetail,
+	AlertTitle,
+} from "components/Alert/Alert";
 import { ProvisionerTag } from "modules/provisioners/ProvisionerTag";
 import type { FC } from "react";
 export enum AlertVariant {
diff --git a/site/src/modules/workspaces/WorkspaceMoreActions/ChangeWorkspaceVersionDialog.tsx b/site/src/modules/workspaces/WorkspaceMoreActions/ChangeWorkspaceVersionDialog.tsx
index ecedc5aef6b5f..3f06933dc04d3 100644
--- a/site/src/modules/workspaces/WorkspaceMoreActions/ChangeWorkspaceVersionDialog.tsx
+++ b/site/src/modules/workspaces/WorkspaceMoreActions/ChangeWorkspaceVersionDialog.tsx
@@ -1,11 +1,11 @@
 import { css } from "@emotion/css";
-import AlertTitle from "@mui/material/AlertTitle";
+
 import Autocomplete from "@mui/material/Autocomplete";
 import CircularProgress from "@mui/material/CircularProgress";
 import TextField from "@mui/material/TextField";
 import { templateVersions } from "api/queries/templates";
 import type { TemplateVersion, Workspace } from "api/typesGenerated";
-import { Alert } from "components/Alert/Alert";
+import { Alert, AlertTitle } from "components/Alert/Alert";
 import { Avatar } from "components/Avatar/Avatar";
 import { AvatarData } from "components/Avatar/AvatarData";
 import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog";
diff --git a/site/src/pages/DeploymentSettingsPage/OverviewPage/OverviewPageView.tsx b/site/src/pages/DeploymentSettingsPage/OverviewPage/OverviewPageView.tsx
index c43d77efe92e2..10d850f05271d 100644
--- a/site/src/pages/DeploymentSettingsPage/OverviewPage/OverviewPageView.tsx
+++ b/site/src/pages/DeploymentSettingsPage/OverviewPage/OverviewPageView.tsx
@@ -1,4 +1,4 @@
-import AlertTitle from "@mui/material/AlertTitle";
+
 import type {
 	DAUsResponse,
 	Experiment,
@@ -15,7 +15,7 @@ import { Stack } from "components/Stack/Stack";
 import type { FC } from "react";
 import { useDeploymentOptions } from "utils/deployOptions";
 import { docs } from "utils/docs";
-import { Alert } from "../../../components/Alert/Alert";
+import { Alert, AlertTitle } from "../../../components/Alert/Alert";
 import OptionsTable from "../OptionsTable";
 import { UserEngagementChart } from "./UserEngagementChart";
 
diff --git a/site/src/pages/SetupPage/SetupPageView.tsx b/site/src/pages/SetupPage/SetupPageView.tsx
index 28e750bfb31dc..15dee54c0ab60 100644
--- a/site/src/pages/SetupPage/SetupPageView.tsx
+++ b/site/src/pages/SetupPage/SetupPageView.tsx
@@ -1,4 +1,3 @@
-import AlertTitle from "@mui/material/AlertTitle";
 import Autocomplete from "@mui/material/Autocomplete";
 import Checkbox from "@mui/material/Checkbox";
 import Link from "@mui/material/Link";
@@ -7,7 +6,7 @@ import TextField from "@mui/material/TextField";
 import { countries } from "api/countriesGenerated";
 import type * as TypesGen from "api/typesGenerated";
 import { isAxiosError } from "axios";
-import { Alert, AlertDetail } from "components/Alert/Alert";
+import { Alert, AlertDetail, AlertTitle } from "components/Alert/Alert";
 import { Button } from "components/Button/Button";
 import { ExternalImage } from "components/ExternalImage/ExternalImage";
 import { FormFields, VerticalForm } from "components/Form/Form";
diff --git a/site/src/pages/WorkspacePage/Workspace.tsx b/site/src/pages/WorkspacePage/Workspace.tsx
index 83b8a6397104c..e41fe2b7624b3 100644
--- a/site/src/pages/WorkspacePage/Workspace.tsx
+++ b/site/src/pages/WorkspacePage/Workspace.tsx
@@ -1,6 +1,5 @@
-import AlertTitle from "@mui/material/AlertTitle";
 import type * as TypesGen from "api/typesGenerated";
-import { Alert, AlertDetail } from "components/Alert/Alert";
+import { Alert, AlertDetail, AlertTitle } from "components/Alert/Alert";
 import { SidebarIconButton } from "components/FullPageLayout/Sidebar";
 import { useSearchParamsKey } from "hooks/useSearchParamsKey";
 import { BlocksIcon, HistoryIcon } from "lucide-react";

From c90d70c43ec21c3f73c504553da660eaa7e6c516 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden@coder.com>
Date: Wed, 18 Jun 2025 21:41:11 +0000
Subject: [PATCH 02/14] fix: cleanup

---
 site/src/components/Alert/Alert.tsx           | 101 +++++++-----------
 site/src/components/Alert/ErrorAlert.tsx      |   2 +-
 .../OverviewPage/OverviewPageView.tsx         |   1 -
 3 files changed, 42 insertions(+), 62 deletions(-)

diff --git a/site/src/components/Alert/Alert.tsx b/site/src/components/Alert/Alert.tsx
index 0106173dad52f..c609ea1dbba7a 100644
--- a/site/src/components/Alert/Alert.tsx
+++ b/site/src/components/Alert/Alert.tsx
@@ -1,4 +1,3 @@
-import Collapse from "@mui/material/Collapse";
 import { cva, type VariantProps } from "class-variance-authority";
 import { Button } from "components/Button/Button";
 import {
@@ -10,23 +9,23 @@ import {
 } from "react";
 import { cn } from "utils/cn";
 
-const alertVariants = cva("relative w-full rounded-lg border p-4 text-left", {
-	variants: {
-		variant: {
-			default: "bg-surface-primary text-content-primary border-border-default",
-			info: "bg-blue-50 text-blue-900 border-blue-200 dark:bg-blue-950 dark:text-blue-100 dark:border-blue-800",
-			success:
-				"bg-green-50 text-green-900 border-green-200 dark:bg-green-950 dark:text-green-100 dark:border-green-800",
-			warning:
-				"bg-yellow-50 text-yellow-900 border-yellow-200 dark:bg-yellow-950 dark:text-yellow-100 dark:border-yellow-800",
-			error:
-				"bg-red-50 text-red-900 border-red-200 dark:bg-red-950 dark:text-red-100 dark:border-red-800",
+const alertVariants = cva(
+	"relative w-full rounded-lg border border-solid p-4 text-left",
+	{
+		variants: {
+			variant: {
+				default: "border-border-default",
+				info: "border-surface-sky",
+				success: "border-surface-green",
+				warning: "border-border-warning",
+				error: "border-border-destructive",
+			},
 		},
-	},
-	defaultVariants: {
-		variant: "default",
-	},
-});
+		defaultVariants: {
+			variant: "default",
+		},
+	}
+)
 
 // Map MUI severity to our variant
 const severityToVariant = {
@@ -59,9 +58,6 @@ export const Alert: FC<AlertProps> = ({
 }) => {
 	const [open, setOpen] = useState(true);
 
-	// Can't only rely on MUI's hiding behavior inside flex layouts, because even
-	// though MUI will make a dismissed alert have zero height, the alert will
-	// still behave as a flex child and introduce extra row/column gaps
 	if (!open) {
 		return null;
 	}
@@ -72,36 +68,33 @@ export const Alert: FC<AlertProps> = ({
 		(severity in severityToVariant ? severityToVariant[severity] : "default");
 
 	return (
-		<Collapse in>
-			<div
-				role="alert"
-				className={cn(alertVariants({ variant: finalVariant }), className)}
-				{...props}
-			>
-				<div className="flex items-start justify-between">
-					<div className="flex-1">{children}</div>
-					<div className="flex items-center gap-2 ml-4">
-						{/* CTAs passed in by the consumer */}
-						{actions}
+		<div
+			role="alert"
+			className={cn(alertVariants({ variant: finalVariant }), className)}
+			{...props}
+		>
+			<div className="flex items-start justify-between text-sm">
+				<div className="flex-1">{children}</div>
+				<div className="flex items-center gap-2 ml-4">
+					{/* CTAs passed in by the consumer */}
+					{actions}
 
-						{/* close CTA */}
-						{dismissible && (
-							<Button
-								variant="subtle"
-								size="sm"
-								onClick={() => {
-									setOpen(false);
-									onDismiss?.();
-								}}
-								data-testid="dismiss-banner-btn"
-							>
-								Dismiss
-							</Button>
-						)}
-					</div>
+					{dismissible && (
+						<Button
+							variant="subtle"
+							size="sm"
+							onClick={() => {
+								setOpen(false);
+								onDismiss?.();
+							}}
+							data-testid="dismiss-banner-btn"
+						>
+							Dismiss
+						</Button>
+					)}
 				</div>
 			</div>
-		</Collapse>
+		</div>
 	);
 };
 
@@ -124,17 +117,5 @@ export const AlertTitle = forwardRef<
 		{...props}
 	/>
 ));
-AlertTitle.displayName = "AlertTitle";
-
-export const AlertDescription = forwardRef<
-	HTMLDivElement,
-	React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-	<div
-		ref={ref}
-		className={cn("text-sm [&_p]:leading-relaxed", className)}
-		{...props}
-	/>
-));
 
-AlertDescription.displayName = "AlertDescription";
+AlertTitle.displayName = "AlertTitle";
diff --git a/site/src/components/Alert/ErrorAlert.tsx b/site/src/components/Alert/ErrorAlert.tsx
index 7129bbc07bfca..1d1408ae70500 100644
--- a/site/src/components/Alert/ErrorAlert.tsx
+++ b/site/src/components/Alert/ErrorAlert.tsx
@@ -1,7 +1,7 @@
 import { getErrorDetail, getErrorMessage, getErrorStatus } from "api/errors";
 import type { FC } from "react";
 import { Link } from "../Link/Link";
-import { Alert, AlertDetail, AlertTitle, type AlertProps } from "./Alert";
+import { Alert, AlertDetail, type AlertProps, AlertTitle } from "./Alert";
 
 type ErrorAlertProps = Readonly<
 	Omit<AlertProps, "severity" | "children"> & { error: unknown }
diff --git a/site/src/pages/DeploymentSettingsPage/OverviewPage/OverviewPageView.tsx b/site/src/pages/DeploymentSettingsPage/OverviewPage/OverviewPageView.tsx
index 10d850f05271d..46ced42e8c504 100644
--- a/site/src/pages/DeploymentSettingsPage/OverviewPage/OverviewPageView.tsx
+++ b/site/src/pages/DeploymentSettingsPage/OverviewPage/OverviewPageView.tsx
@@ -1,4 +1,3 @@
-
 import type {
 	DAUsResponse,
 	Experiment,

From 07b9b570d9718edd866e88ac687aed7536f41723 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden@coder.com>
Date: Fri, 20 Jun 2025 12:37:39 +0000
Subject: [PATCH 03/14] fix: update color

---
 site/src/components/Alert/Alert.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/components/Alert/Alert.tsx b/site/src/components/Alert/Alert.tsx
index c609ea1dbba7a..c42476ffdd36f 100644
--- a/site/src/components/Alert/Alert.tsx
+++ b/site/src/components/Alert/Alert.tsx
@@ -15,7 +15,7 @@ const alertVariants = cva(
 		variants: {
 			variant: {
 				default: "border-border-default",
-				info: "border-surface-sky",
+				info: "border-highlight-sky",
 				success: "border-surface-green",
 				warning: "border-border-warning",
 				error: "border-border-destructive",

From c36c9bd4f7577a5dafcebe7b7929c9900a208ca1 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden@coder.com>
Date: Fri, 5 Dec 2025 15:45:52 +0000
Subject: [PATCH 04/14] chore: cleanup

---
 site/src/components/Alert/Alert.tsx           | 65 +++++++++++++------
 site/src/components/Badge/Badge.tsx           |  2 +-
 .../GitDeviceAuth/GitDeviceAuth.tsx           |  1 -
 .../ChangeWorkspaceVersionDialog.tsx          |  1 -
 .../WorkspaceNotifications/Notifications.tsx  |  2 +-
 ...orkspaceParametersPageViewExperimental.tsx |  2 +-
 .../WorkspaceSchedulePage.tsx                 |  2 +-
 site/tailwind.config.js                       |  2 +-
 8 files changed, 50 insertions(+), 27 deletions(-)

diff --git a/site/src/components/Alert/Alert.tsx b/site/src/components/Alert/Alert.tsx
index c42476ffdd36f..6392f98b46d45 100644
--- a/site/src/components/Alert/Alert.tsx
+++ b/site/src/components/Alert/Alert.tsx
@@ -1,5 +1,12 @@
 import { cva, type VariantProps } from "class-variance-authority";
 import { Button } from "components/Button/Button";
+import {
+	CircleAlertIcon,
+	CircleCheckIcon,
+	InfoIcon,
+	TriangleAlertIcon,
+	XIcon,
+} from "lucide-react";
 import {
 	type FC,
 	forwardRef,
@@ -14,20 +21,19 @@ const alertVariants = cva(
 	{
 		variants: {
 			variant: {
-				default: "border-border-default",
-				info: "border-highlight-sky",
-				success: "border-surface-green",
-				warning: "border-border-warning",
-				error: "border-border-destructive",
+				default: "border-border-default bg-surface-secondary",
+				info: "border-border-pending bg-surface-secondary",
+				success: "border-border-green bg-surface-green",
+				warning: "border-border-warning bg-surface-orange",
+				error: "border-border-destructive bg-surface-red",
 			},
 		},
 		defaultVariants: {
 			variant: "default",
 		},
-	}
-)
+	},
+);
 
-// Map MUI severity to our variant
 const severityToVariant = {
 	info: "info",
 	success: "success",
@@ -35,6 +41,14 @@ const severityToVariant = {
 	error: "error",
 } as const;
 
+const variantIcons = {
+	default: { icon: InfoIcon, className: "text-content-secondary" },
+	info: { icon: InfoIcon, className: "text-highlight-sky" },
+	success: { icon: CircleCheckIcon, className: "text-content-success" },
+	warning: { icon: TriangleAlertIcon, className: "text-content-warning" },
+	error: { icon: CircleAlertIcon, className: "text-content-destructive" },
+} as const;
+
 export type AlertColor = "info" | "success" | "warning" | "error";
 
 export type AlertProps = {
@@ -67,29 +81,40 @@ export const Alert: FC<AlertProps> = ({
 		variant ||
 		(severity in severityToVariant ? severityToVariant[severity] : "default");
 
+	const { icon: Icon, className: iconClassName } = variantIcons[finalVariant];
+
 	return (
 		<div
 			role="alert"
 			className={cn(alertVariants({ variant: finalVariant }), className)}
 			{...props}
 		>
-			<div className="flex items-start justify-between text-sm">
-				<div className="flex-1">{children}</div>
-				<div className="flex items-center gap-2 ml-4">
-					{/* CTAs passed in by the consumer */}
+			<div className="flex items-start justify-between gap-4 text-sm">
+				<div className="flex flex-row items-start gap-3">
+					<Icon
+						className={cn(
+							"size-icon-sm mt-1",
+							iconClassName,
+						)}
+					/>
+					<div className="flex-1">{children}</div>
+				</div>
+				<div className="flex items-start gap-2">
 					{actions}
 
 					{dismissible && (
 						<Button
 							variant="subtle"
-							size="sm"
+							size="icon"
+							className="mt-px !size-auto !min-w-0 !p-0"
 							onClick={() => {
 								setOpen(false);
 								onDismiss?.();
 							}}
 							data-testid="dismiss-banner-btn"
+							aria-label="Dismiss"
 						>
-							Dismiss
+							<XIcon className="!size-icon-sm !p-0" />
 						</Button>
 					)}
 				</div>
@@ -100,22 +125,22 @@ export const Alert: FC<AlertProps> = ({
 
 export const AlertDetail: FC<PropsWithChildren> = ({ children }) => {
 	return (
-		<span className="text-sm opacity-75" data-chromatic="ignore">
+		<span className="m-0 text-sm" data-chromatic="ignore">
 			{children}
 		</span>
 	);
 };
 
-// Export AlertTitle and AlertDescription for compatibility
 export const AlertTitle = forwardRef<
 	HTMLHeadingElement,
 	React.HTMLAttributes<HTMLHeadingElement>
 >(({ className, ...props }, ref) => (
-	<h5
+	<h1
 		ref={ref}
-		className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+		className={cn(
+			"m-0 mb-1 text-sm font-medium",
+			className,
+		)}
 		{...props}
 	/>
 ));
-
-AlertTitle.displayName = "AlertTitle";
diff --git a/site/src/components/Badge/Badge.tsx b/site/src/components/Badge/Badge.tsx
index ca6a08eb6040a..317f1e04e481a 100644
--- a/site/src/components/Badge/Badge.tsx
+++ b/site/src/components/Badge/Badge.tsx
@@ -24,7 +24,7 @@ const badgeVariants = cva(
 					"border border-solid border-border-destructive bg-surface-red text-highlight-red shadow",
 				green:
 					"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",
+				info: "border border-solid border-border-pending bg-surface-sky text-highlight-sky shadow",
 			},
 			size: {
 				xs: "text-2xs font-regular h-5 [&_svg]:hidden rounded px-1.5",
diff --git a/site/src/components/GitDeviceAuth/GitDeviceAuth.tsx b/site/src/components/GitDeviceAuth/GitDeviceAuth.tsx
index e8e74c1fe42a0..41faa5f878cf4 100644
--- a/site/src/components/GitDeviceAuth/GitDeviceAuth.tsx
+++ b/site/src/components/GitDeviceAuth/GitDeviceAuth.tsx
@@ -1,5 +1,4 @@
 import type { Interpolation, Theme } from "@emotion/react";
-
 import CircularProgress from "@mui/material/CircularProgress";
 import Link from "@mui/material/Link";
 import type { ApiErrorResponse } from "api/errors";
diff --git a/site/src/modules/workspaces/WorkspaceMoreActions/ChangeWorkspaceVersionDialog.tsx b/site/src/modules/workspaces/WorkspaceMoreActions/ChangeWorkspaceVersionDialog.tsx
index 3f06933dc04d3..2a0d89878d0a1 100644
--- a/site/src/modules/workspaces/WorkspaceMoreActions/ChangeWorkspaceVersionDialog.tsx
+++ b/site/src/modules/workspaces/WorkspaceMoreActions/ChangeWorkspaceVersionDialog.tsx
@@ -1,5 +1,4 @@
 import { css } from "@emotion/css";
-
 import Autocomplete from "@mui/material/Autocomplete";
 import CircularProgress from "@mui/material/CircularProgress";
 import TextField from "@mui/material/TextField";
diff --git a/site/src/pages/WorkspacePage/WorkspaceNotifications/Notifications.tsx b/site/src/pages/WorkspacePage/WorkspaceNotifications/Notifications.tsx
index 308a763716969..b2989fab130db 100644
--- a/site/src/pages/WorkspacePage/WorkspaceNotifications/Notifications.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceNotifications/Notifications.tsx
@@ -105,7 +105,7 @@ const NotificationItem: FC<NotificationItemProps> = ({ notification }) => {
 };
 
 export const NotificationActionButton: FC<ButtonProps> = (props) => {
-	return <Button variant="outline" size="sm" {...props} />;
+	return <Button variant="default" size="sm" {...props} />;
 };
 
 const styles = {
diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageViewExperimental.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageViewExperimental.tsx
index 54bf0907da752..43f3304eb95fc 100644
--- a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageViewExperimental.tsx
+++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageViewExperimental.tsx
@@ -120,7 +120,7 @@ export const WorkspaceParametersPageViewExperimental: FC<
 
 			{hasIncompatibleParameters && (
 				<Alert severity="error">
-					<p className="text-lg leading-tight font-bold m-0">
+					<p className="text-lg leading-normal font-bold m-0">
 						Workspace update blocked
 					</p>
 					<p className="mb-0">
diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx
index 6e429f433b0f5..a080fb4a52460 100644
--- a/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx
+++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx
@@ -109,7 +109,7 @@ const WorkspaceSchedulePage: FC = () => {
 						>
 							Prebuilt Workspaces Scheduling
 						</Link>
-						documentation page.
+						{" "}documentation page.
 					</Alert>
 				) : (
 					<WorkspaceScheduleForm
diff --git a/site/tailwind.config.js b/site/tailwind.config.js
index d7293ee2d6501..59a269f042058 100644
--- a/site/tailwind.config.js
+++ b/site/tailwind.config.js
@@ -59,7 +59,7 @@ module.exports = {
 					DEFAULT: "hsl(var(--border-default))",
 					warning: "hsl(var(--border-warning))",
 					green: "hsl(var(--border-green))",
-					sky: "hsl(var(--border-sky))",
+					pending: "hsl(var(--border-sky))",
 					destructive: "hsl(var(--border-destructive))",
 					success: "hsl(var(--border-success))",
 					hover: "hsl(var(--border-hover))",

From 83eb68c58cc5f7fb12aecd9908a4422353298611 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden@coder.com>
Date: Fri, 5 Dec 2025 15:46:56 +0000
Subject: [PATCH 05/14] fix: format

---
 site/src/components/Alert/Alert.tsx                  | 12 ++----------
 .../WorkspaceSchedulePage/WorkspaceSchedulePage.tsx  |  4 ++--
 2 files changed, 4 insertions(+), 12 deletions(-)

diff --git a/site/src/components/Alert/Alert.tsx b/site/src/components/Alert/Alert.tsx
index 6392f98b46d45..e1831ac50890d 100644
--- a/site/src/components/Alert/Alert.tsx
+++ b/site/src/components/Alert/Alert.tsx
@@ -91,12 +91,7 @@ export const Alert: FC<AlertProps> = ({
 		>
 			<div className="flex items-start justify-between gap-4 text-sm">
 				<div className="flex flex-row items-start gap-3">
-					<Icon
-						className={cn(
-							"size-icon-sm mt-1",
-							iconClassName,
-						)}
-					/>
+					<Icon className={cn("size-icon-sm mt-1", iconClassName)} />
 					<div className="flex-1">{children}</div>
 				</div>
 				<div className="flex items-start gap-2">
@@ -137,10 +132,7 @@ export const AlertTitle = forwardRef<
 >(({ className, ...props }, ref) => (
 	<h1
 		ref={ref}
-		className={cn(
-			"m-0 mb-1 text-sm font-medium",
-			className,
-		)}
+		className={cn("m-0 mb-1 text-sm font-medium", className)}
 		{...props}
 	/>
 ));
diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx
index a080fb4a52460..f801dfa279ecf 100644
--- a/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx
+++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx
@@ -108,8 +108,8 @@ const WorkspaceSchedulePage: FC = () => {
 							rel="noreferrer"
 						>
 							Prebuilt Workspaces Scheduling
-						</Link>
-						{" "}documentation page.
+						</Link>{" "}
+						documentation page.
 					</Alert>
 				) : (
 					<WorkspaceScheduleForm

From 1e2ed7f8a390bad23404dd66e6b9a4eb30ec131f Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden@coder.com>
Date: Thu, 18 Dec 2025 12:29:59 +0000
Subject: [PATCH 06/14] chore: update alert styles

---
 site/src/components/Alert/Alert.stories.tsx   | 34 +++++++++
 site/src/components/Alert/Alert.tsx           | 72 ++++++++++++-------
 .../modules/provisioners/ProvisionerAlert.tsx | 32 +++++----
 site/src/pages/WorkspacePage/Workspace.tsx    |  2 +-
 4 files changed, 98 insertions(+), 42 deletions(-)

diff --git a/site/src/components/Alert/Alert.stories.tsx b/site/src/components/Alert/Alert.stories.tsx
index e122c0c07c5a6..979a0b6a9a5a8 100644
--- a/site/src/components/Alert/Alert.stories.tsx
+++ b/site/src/components/Alert/Alert.stories.tsx
@@ -54,3 +54,37 @@ export const WarningWithActionAndDismiss: Story = {
 		severity: "warning",
 	},
 };
+
+export const Info: Story = {
+	args: {
+		children: "This is an informational message",
+		severity: "info",
+	},
+};
+
+export const ErrorSeverity: Story = {
+	args: {
+		children: "This is an error message",
+		severity: "error",
+	},
+};
+
+export const WarningProminent: Story = {
+	args: {
+		children:
+			"This is a high risk warning. Use this design only for high risk warnings.",
+		severity: "warning",
+		prominent: true,
+		dismissible: true,
+	},
+};
+
+export const ErrorProminent: Story = {
+	args: {
+		children:
+			"This is a crucial error. Use this design only for crucial errors.",
+		severity: "error",
+		prominent: true,
+		dismissible: true,
+	},
+};
diff --git a/site/src/components/Alert/Alert.tsx b/site/src/components/Alert/Alert.tsx
index e1831ac50890d..019d5907de399 100644
--- a/site/src/components/Alert/Alert.tsx
+++ b/site/src/components/Alert/Alert.tsx
@@ -1,4 +1,4 @@
-import { cva, type VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
 import { Button } from "components/Button/Button";
 import {
 	CircleAlertIcon,
@@ -20,29 +20,53 @@ const alertVariants = cva(
 	"relative w-full rounded-lg border border-solid p-4 text-left",
 	{
 		variants: {
-			variant: {
-				default: "border-border-default bg-surface-secondary",
-				info: "border-border-pending bg-surface-secondary",
-				success: "border-border-green bg-surface-green",
-				warning: "border-border-warning bg-surface-orange",
-				error: "border-border-destructive bg-surface-red",
+			severity: {
+				info: "",
+				success: "",
+				warning: "",
+				error: "",
+			},
+			prominent: {
+				true: "",
+				false: "",
 			},
 		},
+		compoundVariants: [
+			// Non-prominent: all severities use neutral border and background
+			{
+				prominent: false,
+				className: "border-border-default bg-surface-secondary",
+			},
+			// Prominent: colored border and tinted background based on severity
+			{
+				severity: "info",
+				prominent: true,
+				className: "border-border-pending bg-surface-secondary",
+			},
+			{
+				severity: "success",
+				prominent: true,
+				className: "border-border-green bg-surface-green",
+			},
+			{
+				severity: "warning",
+				prominent: true,
+				className: "border-border-warning bg-surface-orange",
+			},
+			{
+				severity: "error",
+				prominent: true,
+				className: "border-border-destructive bg-surface-red",
+			},
+		],
 		defaultVariants: {
-			variant: "default",
+			severity: "info",
+			prominent: false,
 		},
 	},
 );
 
-const severityToVariant = {
-	info: "info",
-	success: "success",
-	warning: "warning",
-	error: "error",
-} as const;
-
-const variantIcons = {
-	default: { icon: InfoIcon, className: "text-content-secondary" },
+const severityIcons = {
 	info: { icon: InfoIcon, className: "text-highlight-sky" },
 	success: { icon: CircleCheckIcon, className: "text-content-success" },
 	warning: { icon: TriangleAlertIcon, className: "text-content-warning" },
@@ -56,18 +80,19 @@ export type AlertProps = {
 	dismissible?: boolean;
 	onDismiss?: () => void;
 	severity?: AlertColor;
+	prominent?: boolean;
 	children?: ReactNode;
 	className?: string;
-} & VariantProps<typeof alertVariants>;
+};
 
 export const Alert: FC<AlertProps> = ({
 	children,
 	actions,
 	dismissible,
 	severity = "info",
+	prominent = false,
 	onDismiss,
 	className,
-	variant,
 	...props
 }) => {
 	const [open, setOpen] = useState(true);
@@ -76,17 +101,12 @@ export const Alert: FC<AlertProps> = ({
 		return null;
 	}
 
-	// Use severity to determine variant if variant is not explicitly provided
-	const finalVariant =
-		variant ||
-		(severity in severityToVariant ? severityToVariant[severity] : "default");
-
-	const { icon: Icon, className: iconClassName } = variantIcons[finalVariant];
+	const { icon: Icon, className: iconClassName } = severityIcons[severity];
 
 	return (
 		<div
 			role="alert"
-			className={cn(alertVariants({ variant: finalVariant }), className)}
+			className={cn(alertVariants({ severity, prominent }), className)}
 			{...props}
 		>
 			<div className="flex items-start justify-between gap-4 text-sm">
diff --git a/site/src/modules/provisioners/ProvisionerAlert.tsx b/site/src/modules/provisioners/ProvisionerAlert.tsx
index ebadeb7593ae8..298b785887038 100644
--- a/site/src/modules/provisioners/ProvisionerAlert.tsx
+++ b/site/src/modules/provisioners/ProvisionerAlert.tsx
@@ -1,4 +1,3 @@
-import type { Theme } from "@emotion/react";
 import {
 	Alert,
 	type AlertColor,
@@ -7,6 +6,8 @@ import {
 } from "components/Alert/Alert";
 import { ProvisionerTag } from "modules/provisioners/ProvisionerTag";
 import type { FC } from "react";
+import { cn } from "utils/cn";
+
 export enum AlertVariant {
 	// Alerts are usually styled with a full rounded border and meant to use as a visually distinct element of the page.
 	// The Standalone variant conforms to this styling.
@@ -25,20 +26,21 @@ interface ProvisionerAlertProps {
 	variant?: AlertVariant;
 }
 
-const getAlertStyles = (variant: AlertVariant, severity: AlertColor) => {
-	switch (variant) {
-		case AlertVariant.Inline:
-			return {
-				css: (theme: Theme) => ({
-					borderRadius: 0,
-					border: 0,
-					borderBottom: `1px solid ${theme.palette.divider}`,
-					borderLeft: `2px solid ${theme.palette[severity].main}`,
-				}),
-			};
-		default:
-			return {};
+const severityBorderColors: Record<AlertColor, string> = {
+	info: "border-l-highlight-sky",
+	success: "border-l-content-success",
+	warning: "border-l-content-warning",
+	error: "border-l-content-destructive",
+};
+
+const getAlertClassName = (variant: AlertVariant, severity: AlertColor) => {
+	if (variant === AlertVariant.Inline) {
+		return cn(
+			"rounded-none border-0 border-b border-l-2 border-solid border-b-border-default",
+			severityBorderColors[severity],
+		);
 	}
+	return undefined;
 };
 
 export const ProvisionerAlert: FC<ProvisionerAlertProps> = ({
@@ -49,7 +51,7 @@ export const ProvisionerAlert: FC<ProvisionerAlertProps> = ({
 	variant = AlertVariant.Standalone,
 }) => {
 	return (
-		<Alert severity={severity} {...getAlertStyles(variant, severity)}>
+		<Alert severity={severity} className={getAlertClassName(variant, severity)}>
 			<AlertTitle>{title}</AlertTitle>
 			<AlertDetail>
 				<div>{detail}</div>
diff --git a/site/src/pages/WorkspacePage/Workspace.tsx b/site/src/pages/WorkspacePage/Workspace.tsx
index e41fe2b7624b3..d4883aeb66000 100644
--- a/site/src/pages/WorkspacePage/Workspace.tsx
+++ b/site/src/pages/WorkspacePage/Workspace.tsx
@@ -199,7 +199,7 @@ export const Workspace: FC<WorkspaceProps> = ({
 						)}
 
 						{!workspace.health.healthy && (
-							<Alert severity="warning">
+							<Alert severity="warning" prominent>
 								<AlertTitle>Workspace is unhealthy</AlertTitle>
 								<AlertDetail>
 									<p>

From 87707fb5ea71846c1dce63a37a8065b96c9277c4 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden@coder.com>
Date: Thu, 18 Dec 2025 12:45:17 +0000
Subject: [PATCH 07/14] chore: set prominent alerts

---
 site/src/components/GitDeviceAuth/GitDeviceAuth.tsx           | 4 +++-
 site/src/modules/resources/WildcardHostnameWarning.tsx        | 1 +
 .../ClassicParameterFlowDeprecationWarning.tsx                | 2 +-
 .../workspaces/WorkspaceMoreActions/DownloadLogsDialog.tsx    | 2 +-
 site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx      | 2 +-
 .../src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx | 2 +-
 .../NotificationsPage/NotificationEvents.tsx                  | 2 ++
 site/src/pages/HealthPage/AccessURLPage.tsx                   | 1 +
 site/src/pages/HealthPage/DERPPage.tsx                        | 1 +
 site/src/pages/HealthPage/DERPRegionPage.tsx                  | 1 +
 site/src/pages/HealthPage/DatabasePage.tsx                    | 1 +
 site/src/pages/HealthPage/ProvisionerDaemonsPage.tsx          | 2 +-
 site/src/pages/HealthPage/WebsocketPage.tsx                   | 4 ++--
 site/src/pages/HealthPage/WorkspaceProxyPage.tsx              | 3 ++-
 site/src/pages/LoginPage/SignInForm.tsx                       | 2 +-
 site/src/pages/SetupPage/SetupPageView.tsx                    | 2 +-
 site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.tsx  | 2 ++
 site/src/pages/WorkspacePage/Workspace.tsx                    | 2 +-
 site/src/pages/WorkspacePage/WorkspaceDeletedBanner.tsx       | 2 +-
 .../WorkspaceParametersPage/WorkspaceParametersForm.tsx       | 2 +-
 .../WorkspaceParametersPageViewExperimental.tsx               | 4 ++--
 21 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/site/src/components/GitDeviceAuth/GitDeviceAuth.tsx b/site/src/components/GitDeviceAuth/GitDeviceAuth.tsx
index 41faa5f878cf4..6fca3c52d59d0 100644
--- a/site/src/components/GitDeviceAuth/GitDeviceAuth.tsx
+++ b/site/src/components/GitDeviceAuth/GitDeviceAuth.tsx
@@ -101,7 +101,9 @@ export const GitDeviceAuth: FC<GitDeviceAuthProps> = ({
 				break;
 			case DeviceExchangeError.AccessDenied:
 				status = (
-					<Alert severity="error">Access to the Git provider was denied.</Alert>
+					<Alert severity="error" prominent>
+						Access to the Git provider was denied.
+					</Alert>
 				);
 				break;
 			default:
diff --git a/site/src/modules/resources/WildcardHostnameWarning.tsx b/site/src/modules/resources/WildcardHostnameWarning.tsx
index 2210575ae430f..e9aa9d3ad8334 100644
--- a/site/src/modules/resources/WildcardHostnameWarning.tsx
+++ b/site/src/modules/resources/WildcardHostnameWarning.tsx
@@ -40,6 +40,7 @@ export const WildcardHostnameWarning: FC<WildcardHostnameWarningProps> = ({
 	return (
 		<Alert
 			severity="warning"
+			prominent
 			className={
 				hasResources
 					? "rounded-none border-0 border-l-2 border-l-warning border-b-divider"
diff --git a/site/src/modules/workspaces/ClassicParameterFlowDeprecationWarning/ClassicParameterFlowDeprecationWarning.tsx b/site/src/modules/workspaces/ClassicParameterFlowDeprecationWarning/ClassicParameterFlowDeprecationWarning.tsx
index d6afd3be464bf..9e808bc48c09e 100644
--- a/site/src/modules/workspaces/ClassicParameterFlowDeprecationWarning/ClassicParameterFlowDeprecationWarning.tsx
+++ b/site/src/modules/workspaces/ClassicParameterFlowDeprecationWarning/ClassicParameterFlowDeprecationWarning.tsx
@@ -16,7 +16,7 @@ export const ClassicParameterFlowDeprecationWarning: FC<
 	}
 
 	return (
-		<Alert severity="warning" className="mb-2">
+		<Alert severity="warning" className="mb-2" prominent>
 			<div>
 				This template is using the classic parameter flow, which will be{" "}
 				<strong>deprecated</strong> and removed in a future release. Please
diff --git a/site/src/modules/workspaces/WorkspaceMoreActions/DownloadLogsDialog.tsx b/site/src/modules/workspaces/WorkspaceMoreActions/DownloadLogsDialog.tsx
index 4a825ee6c3b68..95d54555592cd 100644
--- a/site/src/modules/workspaces/WorkspaceMoreActions/DownloadLogsDialog.tsx
+++ b/site/src/modules/workspaces/WorkspaceMoreActions/DownloadLogsDialog.tsx
@@ -146,7 +146,7 @@ export const DownloadLogsDialog: FC<DownloadLogsDialogProps> = ({
 					</p>
 
 					{!isWorkspaceHealthy && isLoadingFiles && (
-						<Alert severity="warning">
+						<Alert severity="warning" prominent>
 							Your workspace is unhealthy. Some logs may be unavailable for
 							download.
 						</Alert>
diff --git a/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx b/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx
index e3528e9b707be..bd0fcd9db56e6 100644
--- a/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx
+++ b/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx
@@ -428,7 +428,7 @@ const fillNameAndDisplayWithFilename = async (
 
 const ProvisionerWarning: FC = () => {
 	return (
-		<Alert severity="warning" css={{ marginBottom: 16 }}>
+		<Alert severity="warning" css={{ marginBottom: 16 }} prominent>
 			This organization does not have any provisioners. Before you create a
 			template, you&apos;ll need to configure a provisioner.{" "}
 			<Link href={docs("/admin/provisioners#organization-scoped-provisioners")}>
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
index f27ab1df3cbbc..ec5eadcefddca 100644
--- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
@@ -520,7 +520,7 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
 							</hgroup>
 							<div className="flex flex-col gap-4">
 								{Boolean(error) && !hasAllRequiredExternalAuth && (
-									<Alert severity="error">
+									<Alert severity="error" prominent>
 										To create a workspace using this template, please connect to
 										all required external authentication providers listed below.
 									</Alert>
diff --git a/site/src/pages/DeploymentSettingsPage/NotificationsPage/NotificationEvents.tsx b/site/src/pages/DeploymentSettingsPage/NotificationsPage/NotificationEvents.tsx
index d116718be1898..95fe96a2accf0 100644
--- a/site/src/pages/DeploymentSettingsPage/NotificationsPage/NotificationEvents.tsx
+++ b/site/src/pages/DeploymentSettingsPage/NotificationsPage/NotificationEvents.tsx
@@ -69,6 +69,7 @@ export const NotificationEvents: FC<NotificationEventsProps> = ({
 			{hasWebhookNotifications && !isWebhookConfigured && (
 				<Alert
 					severity="warning"
+					prominent
 					actions={
 						<Button variant="subtle" size="sm" asChild>
 							<a
@@ -88,6 +89,7 @@ export const NotificationEvents: FC<NotificationEventsProps> = ({
 			{hasSMTPNotifications && !isSMTPConfigured && (
 				<Alert
 					severity="warning"
+					prominent
 					actions={
 						<Button variant="subtle" size="sm" asChild>
 							<a
diff --git a/site/src/pages/HealthPage/AccessURLPage.tsx b/site/src/pages/HealthPage/AccessURLPage.tsx
index 2d9e4ed7a0f0f..c279acce427a6 100644
--- a/site/src/pages/HealthPage/AccessURLPage.tsx
+++ b/site/src/pages/HealthPage/AccessURLPage.tsx
@@ -39,6 +39,7 @@ const AccessURLPage = () => {
 							actions={<HealthMessageDocsLink {...warning} />}
 							key={warning.code}
 							severity="warning"
+							prominent
 						>
 							{warning.message}
 						</Alert>
diff --git a/site/src/pages/HealthPage/DERPPage.tsx b/site/src/pages/HealthPage/DERPPage.tsx
index 3a913f23e05d5..36e0e922a7a53 100644
--- a/site/src/pages/HealthPage/DERPPage.tsx
+++ b/site/src/pages/HealthPage/DERPPage.tsx
@@ -67,6 +67,7 @@ const DERPPage: FC = () => {
 							actions={<HealthMessageDocsLink {...warning} />}
 							key={warning.code}
 							severity="warning"
+							prominent
 						>
 							{warning.message}
 						</Alert>
diff --git a/site/src/pages/HealthPage/DERPRegionPage.tsx b/site/src/pages/HealthPage/DERPRegionPage.tsx
index bc0830fbf5fb8..a3aaea54259d7 100644
--- a/site/src/pages/HealthPage/DERPRegionPage.tsx
+++ b/site/src/pages/HealthPage/DERPRegionPage.tsx
@@ -81,6 +81,7 @@ const DERPRegionPage: FC = () => {
 							actions={<HealthMessageDocsLink {...warning} />}
 							key={warning.code}
 							severity="warning"
+							prominent
 						>
 							{warning.message}
 						</Alert>
diff --git a/site/src/pages/HealthPage/DatabasePage.tsx b/site/src/pages/HealthPage/DatabasePage.tsx
index 7837b5aae9b8c..8724ab34a3ffe 100644
--- a/site/src/pages/HealthPage/DatabasePage.tsx
+++ b/site/src/pages/HealthPage/DatabasePage.tsx
@@ -37,6 +37,7 @@ const DatabasePage = () => {
 							actions={<HealthMessageDocsLink {...warning} />}
 							key={warning.code}
 							severity="warning"
+							prominent
 						>
 							{warning.message}
 						</Alert>
diff --git a/site/src/pages/HealthPage/ProvisionerDaemonsPage.tsx b/site/src/pages/HealthPage/ProvisionerDaemonsPage.tsx
index 19a2a0f9f43de..b0a7aafcb0624 100644
--- a/site/src/pages/HealthPage/ProvisionerDaemonsPage.tsx
+++ b/site/src/pages/HealthPage/ProvisionerDaemonsPage.tsx
@@ -30,7 +30,7 @@ const ProvisionerDaemonsPage: FC = () => {
 			</Header>
 
 			<Main>
-				{daemons.error && <Alert severity="error">{daemons.error}</Alert>}
+				{daemons.error && <Alert severity="error" prominent>{daemons.error}</Alert>}
 				{daemons.warnings.map((warning) => {
 					return (
 						<Alert
diff --git a/site/src/pages/HealthPage/WebsocketPage.tsx b/site/src/pages/HealthPage/WebsocketPage.tsx
index d91e1cfca6634..bff6be74e0d95 100644
--- a/site/src/pages/HealthPage/WebsocketPage.tsx
+++ b/site/src/pages/HealthPage/WebsocketPage.tsx
@@ -38,11 +38,11 @@ const WebsocketPage = () => {
 			</Header>
 
 			<Main>
-				{websocket.error && <Alert severity="error">{websocket.error}</Alert>}
+				{websocket.error && <Alert severity="error" prominent>{websocket.error}</Alert>}
 
 				{websocket.warnings.map((warning) => {
 					return (
-						<Alert key={warning.code} severity="warning">
+						<Alert key={warning.code} severity="warning" prominent>
 							{warning.message}
 						</Alert>
 					);
diff --git a/site/src/pages/HealthPage/WorkspaceProxyPage.tsx b/site/src/pages/HealthPage/WorkspaceProxyPage.tsx
index e80786e1dffa0..8b72c0b320952 100644
--- a/site/src/pages/HealthPage/WorkspaceProxyPage.tsx
+++ b/site/src/pages/HealthPage/WorkspaceProxyPage.tsx
@@ -42,7 +42,7 @@ const WorkspaceProxyPage: FC = () => {
 
 			<Main>
 				{workspace_proxy.error && (
-					<Alert severity="error">{workspace_proxy.error}</Alert>
+					<Alert severity="error" prominent>{workspace_proxy.error}</Alert>
 				)}
 				{workspace_proxy.warnings.map((warning) => {
 					return (
@@ -50,6 +50,7 @@ const WorkspaceProxyPage: FC = () => {
 							actions={<HealthMessageDocsLink {...warning} />}
 							key={warning.code}
 							severity="warning"
+							prominent
 						>
 							{warning.message}
 						</Alert>
diff --git a/site/src/pages/LoginPage/SignInForm.tsx b/site/src/pages/LoginPage/SignInForm.tsx
index 8bee2fb7405ab..476ebd6b735fa 100644
--- a/site/src/pages/LoginPage/SignInForm.tsx
+++ b/site/src/pages/LoginPage/SignInForm.tsx
@@ -114,7 +114,7 @@ export const SignInForm: FC<SignInFormProps> = ({
 			)}
 
 			{!passwordEnabled && !oAuthEnabled && (
-				<Alert severity="error">No authentication methods configured!</Alert>
+				<Alert severity="error" prominent>No authentication methods configured!</Alert>
 			)}
 		</div>
 	);
diff --git a/site/src/pages/SetupPage/SetupPageView.tsx b/site/src/pages/SetupPage/SetupPageView.tsx
index 15dee54c0ab60..754345c180950 100644
--- a/site/src/pages/SetupPage/SetupPageView.tsx
+++ b/site/src/pages/SetupPage/SetupPageView.tsx
@@ -351,7 +351,7 @@ export const SetupPageView: FC<SetupPageViewProps> = ({
 					)}
 
 					{isAxiosError(error) && error.response?.data?.message && (
-						<Alert severity="error">
+						<Alert severity="error" prominent>
 							<AlertTitle>{error.response.data.message}</AlertTitle>
 							{error.response.data.detail && (
 								<AlertDetail>
diff --git a/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.tsx b/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.tsx
index c1d95e6d49470..b6d2f0d825f4e 100644
--- a/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.tsx
+++ b/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.tsx
@@ -174,6 +174,7 @@ export const WorkspaceBuildPageView: FC<WorkspaceBuildPageViewProps> = ({
 					{build.transition === "delete" && build.job.status === "failed" && (
 						<Alert
 							severity="error"
+							prominent
 							className="rounded-none border-0 border-b border-solid border-border"
 						>
 							<div>
@@ -190,6 +191,7 @@ export const WorkspaceBuildPageView: FC<WorkspaceBuildPageViewProps> = ({
 					{build?.job?.logs_overflowed && (
 						<Alert
 							severity="warning"
+							prominent
 							className="rounded-none border-0 border-b border-solid border-border"
 						>
 							Provisioner logs exceeded the max size of 1MB. Will not continue
diff --git a/site/src/pages/WorkspacePage/Workspace.tsx b/site/src/pages/WorkspacePage/Workspace.tsx
index d4883aeb66000..cc9a4190dc076 100644
--- a/site/src/pages/WorkspacePage/Workspace.tsx
+++ b/site/src/pages/WorkspacePage/Workspace.tsx
@@ -192,7 +192,7 @@ export const Workspace: FC<WorkspaceProps> = ({
 						)}
 
 						{workspace.latest_build.job.error && (
-							<Alert severity="error">
+							<Alert severity="error" prominent>
 								<AlertTitle>Workspace build failed</AlertTitle>
 								<AlertDetail>{workspace.latest_build.job.error}</AlertDetail>
 							</Alert>
diff --git a/site/src/pages/WorkspacePage/WorkspaceDeletedBanner.tsx b/site/src/pages/WorkspacePage/WorkspaceDeletedBanner.tsx
index dee02d4a2aa98..1ec9e887b9eb0 100644
--- a/site/src/pages/WorkspacePage/WorkspaceDeletedBanner.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceDeletedBanner.tsx
@@ -16,7 +16,7 @@ export const WorkspaceDeletedBanner: FC<WorkspaceDeletedBannerProps> = ({
 	);
 
 	return (
-		<Alert severity="warning" actions={NewWorkspaceButton}>
+		<Alert severity="warning" prominent actions={NewWorkspaceButton}>
 			This workspace has been deleted and cannot be edited.
 		</Alert>
 	);
diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersForm.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersForm.tsx
index 68dc6e65b7595..3f0026d8dc890 100644
--- a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersForm.tsx
+++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersForm.tsx
@@ -84,7 +84,7 @@ export const WorkspaceParametersForm: FC<WorkspaceParameterFormProps> = ({
 	return (
 		<>
 			{disabled && (
-				<Alert severity="warning">
+				<Alert severity="warning" prominent>
 					The template for this workspace requires automatic updates. Update the
 					workspace to edit parameters.
 				</Alert>
diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageViewExperimental.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageViewExperimental.tsx
index 43f3304eb95fc..bdb6bfd38235b 100644
--- a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageViewExperimental.tsx
+++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageViewExperimental.tsx
@@ -112,14 +112,14 @@ export const WorkspaceParametersPageViewExperimental: FC<
 	return (
 		<>
 			{disabled && (
-				<Alert severity="warning" className="mb-8">
+				<Alert severity="warning" className="mb-8" prominent>
 					The template for this workspace requires automatic updates. Update the
 					workspace to edit parameters.
 				</Alert>
 			)}
 
 			{hasIncompatibleParameters && (
-				<Alert severity="error">
+				<Alert severity="error" prominent>
 					<p className="text-lg leading-normal font-bold m-0">
 						Workspace update blocked
 					</p>

From 512b91377b78d115aa8217278dcb89662933ba84 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden@coder.com>
Date: Thu, 18 Dec 2025 15:51:03 +0000
Subject: [PATCH 08/14] fix: format

---
 site/src/pages/HealthPage/ProvisionerDaemonsPage.tsx | 6 +++++-
 site/src/pages/HealthPage/WebsocketPage.tsx          | 6 +++++-
 site/src/pages/HealthPage/WorkspaceProxyPage.tsx     | 4 +++-
 site/src/pages/LoginPage/SignInForm.tsx              | 4 +++-
 4 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/site/src/pages/HealthPage/ProvisionerDaemonsPage.tsx b/site/src/pages/HealthPage/ProvisionerDaemonsPage.tsx
index b0a7aafcb0624..32fb7f01eca60 100644
--- a/site/src/pages/HealthPage/ProvisionerDaemonsPage.tsx
+++ b/site/src/pages/HealthPage/ProvisionerDaemonsPage.tsx
@@ -30,7 +30,11 @@ const ProvisionerDaemonsPage: FC = () => {
 			</Header>
 
 			<Main>
-				{daemons.error && <Alert severity="error" prominent>{daemons.error}</Alert>}
+				{daemons.error && (
+					<Alert severity="error" prominent>
+						{daemons.error}
+					</Alert>
+				)}
 				{daemons.warnings.map((warning) => {
 					return (
 						<Alert
diff --git a/site/src/pages/HealthPage/WebsocketPage.tsx b/site/src/pages/HealthPage/WebsocketPage.tsx
index bff6be74e0d95..8917381fc9e3e 100644
--- a/site/src/pages/HealthPage/WebsocketPage.tsx
+++ b/site/src/pages/HealthPage/WebsocketPage.tsx
@@ -38,7 +38,11 @@ const WebsocketPage = () => {
 			</Header>
 
 			<Main>
-				{websocket.error && <Alert severity="error" prominent>{websocket.error}</Alert>}
+				{websocket.error && (
+					<Alert severity="error" prominent>
+						{websocket.error}
+					</Alert>
+				)}
 
 				{websocket.warnings.map((warning) => {
 					return (
diff --git a/site/src/pages/HealthPage/WorkspaceProxyPage.tsx b/site/src/pages/HealthPage/WorkspaceProxyPage.tsx
index 8b72c0b320952..29dfff0472c1d 100644
--- a/site/src/pages/HealthPage/WorkspaceProxyPage.tsx
+++ b/site/src/pages/HealthPage/WorkspaceProxyPage.tsx
@@ -42,7 +42,9 @@ const WorkspaceProxyPage: FC = () => {
 
 			<Main>
 				{workspace_proxy.error && (
-					<Alert severity="error" prominent>{workspace_proxy.error}</Alert>
+					<Alert severity="error" prominent>
+						{workspace_proxy.error}
+					</Alert>
 				)}
 				{workspace_proxy.warnings.map((warning) => {
 					return (
diff --git a/site/src/pages/LoginPage/SignInForm.tsx b/site/src/pages/LoginPage/SignInForm.tsx
index 476ebd6b735fa..c70873586dc85 100644
--- a/site/src/pages/LoginPage/SignInForm.tsx
+++ b/site/src/pages/LoginPage/SignInForm.tsx
@@ -114,7 +114,9 @@ export const SignInForm: FC<SignInFormProps> = ({
 			)}
 
 			{!passwordEnabled && !oAuthEnabled && (
-				<Alert severity="error" prominent>No authentication methods configured!</Alert>
+				<Alert severity="error" prominent>
+					No authentication methods configured!
+				</Alert>
 			)}
 		</div>
 	);

From 152b011510499899e04d1c91f6a01407af661403 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden@coder.com>
Date: Thu, 18 Dec 2025 15:51:18 +0000
Subject: [PATCH 09/14] chore: make error alert use prominent errors

---
 site/src/components/Alert/ErrorAlert.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/components/Alert/ErrorAlert.tsx b/site/src/components/Alert/ErrorAlert.tsx
index 1d1408ae70500..04da586f829e3 100644
--- a/site/src/components/Alert/ErrorAlert.tsx
+++ b/site/src/components/Alert/ErrorAlert.tsx
@@ -17,7 +17,7 @@ export const ErrorAlert: FC<ErrorAlertProps> = ({ error, ...alertProps }) => {
 	const shouldDisplayDetail = message !== detail;
 
 	return (
-		<Alert severity="error" {...alertProps}>
+		<Alert severity="error" prominent {...alertProps}>
 			{
 				// When the error is a Forbidden response we include a link for the user to
 				// go back to a known viewable page.

From d2ff5f0056dce8f9cf06ef1dbbdc19ae79aac83f Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden@coder.com>
Date: Thu, 18 Dec 2025 17:38:40 +0000
Subject: [PATCH 10/14] chore: improvements

---
 site/src/components/Alert/Alert.tsx                 | 13 +++----------
 .../TemplateVersionEditor.tsx                       |  1 +
 2 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/site/src/components/Alert/Alert.tsx b/site/src/components/Alert/Alert.tsx
index 019d5907de399..a76551e62fd11 100644
--- a/site/src/components/Alert/Alert.tsx
+++ b/site/src/components/Alert/Alert.tsx
@@ -32,21 +32,14 @@ const alertVariants = cva(
 			},
 		},
 		compoundVariants: [
-			// Non-prominent: all severities use neutral border and background
 			{
 				prominent: false,
 				className: "border-border-default bg-surface-secondary",
 			},
-			// Prominent: colored border and tinted background based on severity
-			{
-				severity: "info",
-				prominent: true,
-				className: "border-border-pending bg-surface-secondary",
-			},
 			{
 				severity: "success",
 				prominent: true,
-				className: "border-border-green bg-surface-green",
+				className: "border-border-success bg-surface-green",
 			},
 			{
 				severity: "warning",
@@ -114,14 +107,14 @@ export const Alert: FC<AlertProps> = ({
 					<Icon className={cn("size-icon-sm mt-1", iconClassName)} />
 					<div className="flex-1">{children}</div>
 				</div>
-				<div className="flex items-start gap-2">
+				<div className="flex items-center gap-2">
 					{actions}
 
 					{dismissible && (
 						<Button
 							variant="subtle"
 							size="icon"
-							className="mt-px !size-auto !min-w-0 !p-0"
+							className="!size-auto !min-w-0 !p-0"
 							onClick={() => {
 								setOpen(false);
 								onDismiss?.();
diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
index 93ed0219890d7..bc7c9e70fb6d8 100644
--- a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
+++ b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
@@ -334,6 +334,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 						>
 							<Alert
 								severity="success"
+								prominent
 								dismissible
 								actions={
 									<Button

From cd272e9d4f7859eedbc3e7ccd088d60dbe20064a Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden@coder.com>
Date: Thu, 18 Dec 2025 18:10:56 +0000
Subject: [PATCH 11/14] fix: better icon alignment

---
 site/src/components/Alert/Alert.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/components/Alert/Alert.tsx b/site/src/components/Alert/Alert.tsx
index a76551e62fd11..e2359b3ddbaf4 100644
--- a/site/src/components/Alert/Alert.tsx
+++ b/site/src/components/Alert/Alert.tsx
@@ -104,7 +104,7 @@ export const Alert: FC<AlertProps> = ({
 		>
 			<div className="flex items-start justify-between gap-4 text-sm">
 				<div className="flex flex-row items-start gap-3">
-					<Icon className={cn("size-icon-sm mt-1", iconClassName)} />
+					<Icon className={cn("size-icon-sm mt-[3px]", iconClassName)} />
 					<div className="flex-1">{children}</div>
 				</div>
 				<div className="flex items-center gap-2">

From 29719ed28a5f4aa799d1db91bb59d4c01925b4a6 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden@coder.com>
Date: Thu, 18 Dec 2025 19:45:42 +0000
Subject: [PATCH 12/14] fix: update terminal alerts for tailwind

---
 .../src/pages/TerminalPage/TerminalAlerts.tsx | 28 ++++++++++++-------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/site/src/pages/TerminalPage/TerminalAlerts.tsx b/site/src/pages/TerminalPage/TerminalAlerts.tsx
index 6a06a76964128..ed40a1ce1fe52 100644
--- a/site/src/pages/TerminalPage/TerminalAlerts.tsx
+++ b/site/src/pages/TerminalPage/TerminalAlerts.tsx
@@ -1,8 +1,13 @@
 import Link from "@mui/material/Link";
 import type { WorkspaceAgent } from "api/typesGenerated";
-import { Alert, type AlertProps } from "components/Alert/Alert";
+import {
+	Alert,
+	type AlertColor,
+	type AlertProps,
+} from "components/Alert/Alert";
 import { Button } from "components/Button/Button";
 import { type FC, useEffect, useRef, useState } from "react";
+import { cn } from "utils/cn";
 import { docs } from "utils/docs";
 import type { ConnectionStatus } from "./types";
 
@@ -153,19 +158,22 @@ const LoadedScriptsAlert: FC = () => {
 	);
 };
 
+const severityBorderColors: Record<AlertColor, string> = {
+	info: "border-l-highlight-sky",
+	success: "border-l-content-success",
+	warning: "border-l-content-warning",
+	error: "border-l-content-destructive",
+};
+
 const TerminalAlert: FC<AlertProps> = (props) => {
+	const severity = props.severity ?? "info";
 	return (
 		<Alert
 			{...props}
-			css={(theme) => ({
-				borderRadius: 0,
-				borderWidth: 0,
-				borderBottomWidth: 1,
-				borderBottomColor: theme.palette.divider,
-				backgroundColor: theme.palette.background.paper,
-				borderLeft: `3px solid ${theme.palette[props.severity!].light}`,
-				marginBottom: 1,
-			})}
+			className={cn(
+				"rounded-none border-0 border-b border-l-[3px] border-b-border-default bg-surface-primary mb-px",
+				severityBorderColors[severity],
+			)}
 		/>
 	);
 };

From 528bb232b61ebf7decfa5e89c7d4b32783a9e3a9 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden@coder.com>
Date: Thu, 18 Dec 2025 20:22:50 +0000
Subject: [PATCH 13/14] fix: small fixes

---
 site/src/components/Alert/Alert.tsx           |  2 +-
 .../src/pages/TerminalPage/TerminalAlerts.tsx |  2 +-
 site/src/pages/WorkspacePage/Workspace.tsx    | 20 +++++++++----------
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/site/src/components/Alert/Alert.tsx b/site/src/components/Alert/Alert.tsx
index e2359b3ddbaf4..6db0a99ff2d13 100644
--- a/site/src/components/Alert/Alert.tsx
+++ b/site/src/components/Alert/Alert.tsx
@@ -102,7 +102,7 @@ export const Alert: FC<AlertProps> = ({
 			className={cn(alertVariants({ severity, prominent }), className)}
 			{...props}
 		>
-			<div className="flex items-start justify-between gap-4 text-sm">
+			<div className="flex items-center justify-between gap-4 text-sm">
 				<div className="flex flex-row items-start gap-3">
 					<Icon className={cn("size-icon-sm mt-[3px]", iconClassName)} />
 					<div className="flex-1">{children}</div>
diff --git a/site/src/pages/TerminalPage/TerminalAlerts.tsx b/site/src/pages/TerminalPage/TerminalAlerts.tsx
index ed40a1ce1fe52..43f875d79eed0 100644
--- a/site/src/pages/TerminalPage/TerminalAlerts.tsx
+++ b/site/src/pages/TerminalPage/TerminalAlerts.tsx
@@ -171,7 +171,7 @@ const TerminalAlert: FC<AlertProps> = (props) => {
 		<Alert
 			{...props}
 			className={cn(
-				"rounded-none border-0 border-b border-l-[3px] border-b-border-default bg-surface-primary mb-px",
+				"rounded-none border-0 border-b border-l-[3px] border-b-border-default bg-surface-primary mb-px [&>div]:items-center",
 				severityBorderColors[severity],
 			)}
 		/>
diff --git a/site/src/pages/WorkspacePage/Workspace.tsx b/site/src/pages/WorkspacePage/Workspace.tsx
index cc9a4190dc076..3f6569d14d102 100644
--- a/site/src/pages/WorkspacePage/Workspace.tsx
+++ b/site/src/pages/WorkspacePage/Workspace.tsx
@@ -1,6 +1,7 @@
 import type * as TypesGen from "api/typesGenerated";
 import { Alert, AlertDetail, AlertTitle } from "components/Alert/Alert";
 import { SidebarIconButton } from "components/FullPageLayout/Sidebar";
+import { Link } from "components/Link/Link";
 import { useSearchParamsKey } from "hooks/useSearchParamsKey";
 import { BlocksIcon, HistoryIcon } from "lucide-react";
 import { ProvisionerStatusAlert } from "modules/provisioners/ProvisionerStatusAlert";
@@ -207,7 +208,15 @@ export const Workspace: FC<WorkspaceProps> = ({
 										{workspace.health.failing_agents.length > 1
 											? `${workspace.health.failing_agents.length} agents are unhealthy`
 											: "1 agent is unhealthy"}
-										.
+										.{" "}
+										{troubleshootingURL && (
+											<Link
+												href={troubleshootingURL}
+												target="_blank"
+											>
+												View docs to troubleshoot
+											</Link>
+										)}
 									</p>
 									{hasActions && (
 										<div className="flex items-center gap-2">
@@ -218,15 +227,6 @@ export const Workspace: FC<WorkspaceProps> = ({
 													Restart
 												</NotificationActionButton>
 											)}
-											{troubleshootingURL && (
-												<NotificationActionButton
-													onClick={() =>
-														window.open(troubleshootingURL, "_blank")
-													}
-												>
-													Troubleshooting
-												</NotificationActionButton>
-											)}
 										</div>
 									)}
 								</AlertDetail>

From a5a2179c76562fafe7cd44129fd0e55146223eac Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden@coder.com>
Date: Thu, 18 Dec 2025 20:35:12 +0000
Subject: [PATCH 14/14] fix: format

---
 site/src/pages/WorkspacePage/Workspace.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/site/src/pages/WorkspacePage/Workspace.tsx b/site/src/pages/WorkspacePage/Workspace.tsx
index 3f6569d14d102..79d17098945b6 100644
--- a/site/src/pages/WorkspacePage/Workspace.tsx
+++ b/site/src/pages/WorkspacePage/Workspace.tsx
@@ -210,10 +210,7 @@ export const Workspace: FC<WorkspaceProps> = ({
 											: "1 agent is unhealthy"}
 										.{" "}
 										{troubleshootingURL && (
-											<Link
-												href={troubleshootingURL}
-												target="_blank"
-											>
+											<Link href={troubleshootingURL} target="_blank">
 												View docs to troubleshoot
 											</Link>
 										)}