refactor(automations): replace error and notice displays with Alert components

surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/run-details-panel.tsx

@@ -53,7 +53,11 @@ export function RunDetailsPanel({
 	const isTerminal = liveStatus !== "pending" && liveStatus !== "running";
 	// Defer the REST round-trip until the run can actually carry heavy
 	// fields — output/artifacts/error are only written at terminal mark.
-	const { data: run, isLoading, error } = useAutomationRun(automationId, runId, {
+	const {
+		data: run,
+		isLoading,
+		error,
+	} = useAutomationRun(automationId, runId, {
 		enabled: isTerminal,
 	});
 

surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/trigger-card.tsx

@@ -4,6 +4,7 @@ import { AlertCircle, CalendarClock, Clock, Pencil, Save, Trash2 } from "lucide-
 import { useState } from "react";
 import { updateTriggerMutationAtom } from "@/atoms/automations/automations-mutation.atoms";
 import { JsonView } from "@/components/json-view";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { Spinner } from "@/components/ui/spinner";
 import { Switch } from "@/components/ui/switch";
@@ -164,17 +165,19 @@ export function TriggerCard({ trigger, automationId, canUpdate, canDelete }: Tri
 							</div>
 
 							{issues.length > 0 && (
-								<div className="rounded-md border border-destructive/40 bg-destructive/5 px-3 py-2">
-									<div className="flex items-center gap-1.5 font-medium text-destructive mb-1">
-										<AlertCircle className="h-3 w-3" aria-hidden />
+								<Alert variant="destructive">
+									<AlertCircle aria-hidden />
+									<AlertTitle>
 										{issues.length === 1 ? "1 issue" : `${issues.length} issues`}
-									</div>
-									<ul className="space-y-0.5 text-destructive list-disc list-inside">
-										{issues.map((issue) => (
-											<li key={issue}>{issue}</li>
-										))}
-									</ul>
-								</div>
+									</AlertTitle>
+									<AlertDescription>
+										<ul className="list-inside list-disc">
+											{issues.map((issue) => (
+												<li key={issue}>{issue}</li>
+											))}
+										</ul>
+									</AlertDescription>
+								</Alert>
 							)}
 
 							<div className="flex items-center justify-end gap-2">

surfsense_web/app/dashboard/[search_space_id]/automations/automations-content.tsx

@@ -1,5 +1,6 @@
 "use client";
-import { ShieldAlert } from "lucide-react";
+import { AlertCircle, ShieldAlert } from "lucide-react";
+import { Alert, AlertDescription } from "@/components/ui/alert";
 import { useAutomations } from "@/hooks/use-automations";
 import { AutomationsEmptyState } from "./components/automations-empty-state";
 import { AutomationsHeader } from "./components/automations-header";
@@ -60,9 +61,10 @@ export function AutomationsContent({ searchSpaceId }: AutomationsContentProps) {
 					loading={false}
 					canCreate={perms.canCreate}
 				/>
-				<div className="rounded-lg border border-destructive/40 bg-destructive/5 px-6 py-8 text-center">
-					<p className="text-sm text-destructive">Couldn't load automations. {error.message}</p>
-				</div>
+				<Alert variant="destructive">
+					<AlertCircle aria-hidden />
+					<AlertDescription>Couldn't load automations. {error.message}</AlertDescription>
+				</Alert>
 			</>
 		);
 	}

surfsense_web/app/dashboard/[search_space_id]/automations/components/automations-empty-state.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { MessageSquarePlus, SquarePen, Workflow } from "lucide-react";
+import { Workflow } from "lucide-react";
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
 
@@ -28,16 +28,14 @@ export function AutomationsEmptyState({ searchSpaceId, canCreate }: AutomationsE
 			{canCreate ? (
 				<div className="mt-6 flex items-center justify-center gap-2 flex-wrap">
 					<Button asChild>
-						<Link href={`/dashboard/${searchSpaceId}/new-chat`}>
-							<MessageSquarePlus className="mr-2 h-4 w-4" />
-							Create via chat
-						</Link>
+						<Link href={`/dashboard/${searchSpaceId}/new-chat`}>Create via chat</Link>
 					</Button>
-					<Button asChild variant="outline">
-						<Link href={`/dashboard/${searchSpaceId}/automations/new`}>
-							<SquarePen className="mr-2 h-4 w-4" />
-							Create manually
-						</Link>
+					<Button
+						asChild
+						variant="ghost"
+						className="h-10 justify-start rounded-md bg-muted px-3 text-sm hover:bg-accent"
+					>
+						<Link href={`/dashboard/${searchSpaceId}/automations/new`}>Create manually</Link>
 					</Button>
 				</div>
 			) : (

surfsense_web/app/dashboard/[search_space_id]/automations/components/automations-header.tsx

@@ -1,5 +1,4 @@
 "use client";
-import { MessageSquarePlus, SquarePen } from "lucide-react";
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
 
@@ -41,17 +40,16 @@ export function AutomationsHeader({
 			</div>
 			{canCreate && showCreateCta && (
 				<div className="flex items-center gap-2">
-					<Button asChild size="sm" variant="outline">
-						<Link href={`/dashboard/${searchSpaceId}/automations/new`}>
-							<SquarePen className="mr-2 h-4 w-4" />
-							Create manually
-						</Link>
+					<Button
+						asChild
+						size="sm"
+						variant="ghost"
+						className="justify-start rounded-md bg-muted px-3 hover:bg-accent"
+					>
+						<Link href={`/dashboard/${searchSpaceId}/automations/new`}>Create manually</Link>
 					</Button>
 					<Button asChild size="sm">
-						<Link href={`/dashboard/${searchSpaceId}/new-chat`}>
-							<MessageSquarePlus className="mr-2 h-4 w-4" />
-							Create via chat
-						</Link>
+						<Link href={`/dashboard/${searchSpaceId}/new-chat`}>Create via chat</Link>
 					</Button>
 				</div>
 			)}

surfsense_web/app/dashboard/[search_space_id]/automations/components/builder/automation-builder-form.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { useAtomValue } from "jotai";
-import { Code2, LayoutList, Save } from "lucide-react";
+import { AlertCircle, Code2, LayoutList, Save } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useMemo, useState } from "react";
@@ -12,6 +12,7 @@ import {
 	updateAutomationMutationAtom,
 	updateTriggerMutationAtom,
 } from "@/atoms/automations/automations-mutation.atoms";
+import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Spinner } from "@/components/ui/spinner";
@@ -452,7 +453,12 @@ export function AutomationBuilderForm({
 				</div>
 			)}
 
-			{rootError && <p className="text-right text-xs text-destructive">{rootError}</p>}
+			{rootError && (
+				<Alert variant="destructive">
+					<AlertCircle aria-hidden />
+					<AlertDescription>{rootError}</AlertDescription>
+				</Alert>
+			)}
 
 			<div className="flex items-center justify-end gap-2">
 				<Button asChild type="button" variant="ghost" size="sm">

surfsense_web/app/dashboard/[search_space_id]/automations/components/builder/automation-model-fields.tsx

@@ -3,7 +3,7 @@
 import { TriangleAlert } from "lucide-react";
 import Link from "next/link";
 import { memo, useId } from "react";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Badge } from "@/components/ui/badge";
 import {
 	Select,
@@ -118,11 +118,11 @@ const ModelSelectField = memo(function ModelSelectField({
 	if (kind.options.length === 0) {
 		return (
 			<Field label={label}>
-				<Alert>
+				<Alert variant="warning">
 					<TriangleAlert aria-hidden />
-					<AlertTitle>No eligible models</AlertTitle>
-					<AlertDescription>
-						Automations need a premium or your own (BYOK) model. Set one up in{" "}
+					<AlertDescription className="block leading-5">
+						<span className="font-medium text-foreground">No eligible models.</span> Automations
+						need a premium or your own (BYOK) model. Set one up in{" "}
 						<Link href={rolesHref} className="font-medium underline underline-offset-2">
 							role settings
 						</Link>

surfsense_web/app/dashboard/[search_space_id]/automations/components/builder/json-mode-panel.tsx

@@ -1,6 +1,7 @@
 "use client";
-import { AlertCircle } from "lucide-react";
+import { AlertCircle, TriangleAlert } from "lucide-react";
 import { JsonView } from "@/components/json-view";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 
 interface JsonModePanelProps {
 	value: Record<string, unknown>;
@@ -19,9 +20,10 @@ export function JsonModePanel({ value, issues, notice, onChange }: JsonModePanel
 	return (
 		<div className="space-y-4">
 			{notice && (
-				<div className="rounded-md border border-amber-500/40 bg-amber-500/5 px-3 py-2 text-xs text-amber-700 dark:text-amber-400">
-					{notice}
-				</div>
+				<Alert variant="warning">
+					<TriangleAlert aria-hidden />
+					<AlertDescription>{notice}</AlertDescription>
+				</Alert>
 			)}
 
 			<div className="rounded-md border border-input bg-background px-3 py-2 max-h-144 overflow-auto">
@@ -34,17 +36,17 @@ export function JsonModePanel({ value, issues, notice, onChange }: JsonModePanel
 			</div>
 
 			{issues.length > 0 && (
-				<div className="rounded-md border border-destructive/40 bg-destructive/5 px-3 py-2">
-					<div className="flex items-center gap-1.5 text-xs font-medium text-destructive mb-1.5">
-						<AlertCircle className="h-3.5 w-3.5" aria-hidden />
-						{issues.length === 1 ? "1 issue" : `${issues.length} issues`}
-					</div>
-					<ul className="space-y-0.5 text-xs text-destructive list-disc list-inside">
-						{issues.map((issue) => (
-							<li key={issue}>{issue}</li>
-						))}
-					</ul>
-				</div>
+				<Alert variant="destructive">
+					<AlertCircle aria-hidden />
+					<AlertTitle>{issues.length === 1 ? "1 issue" : `${issues.length} issues`}</AlertTitle>
+					<AlertDescription>
+						<ul className="list-inside list-disc">
+							{issues.map((issue) => (
+								<li key={issue}>{issue}</li>
+							))}
+						</ul>
+					</AlertDescription>
+				</Alert>
 			)}
 		</div>
 	);