From eabbfb8c6777f0f50d62c2cba1954347d5fbfc64 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Wed, 3 Jun 2026 00:45:45 +0530
Subject: [PATCH] refactor(automations): replace error and notice displays with
 Alert components

---
 .../components/run-details-panel.tsx          |  6 +++-
 .../components/trigger-card.tsx               | 23 +++++++------
 .../automations/automations-content.tsx       | 10 +++---
 .../components/automations-empty-state.tsx    | 18 +++++------
 .../components/automations-header.tsx         | 18 +++++------
 .../builder/automation-builder-form.tsx       | 10 ++++--
 .../builder/automation-model-fields.tsx       | 10 +++---
 .../components/builder/json-mode-panel.tsx    | 32 ++++++++++---------
 .../layout/ui/sidebar/SidebarSection.tsx      |  4 +--
 .../new-chat/chat-example-prompts.tsx         |  2 +-
 .../tool-ui/automation/create-automation.tsx  | 27 +++++++++-------
 11 files changed, 88 insertions(+), 72 deletions(-)

diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/run-details-panel.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/run-details-panel.tsx
index 1a54ac0e5..ab82589dc 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/run-details-panel.tsx
+++ b/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,
 	});
 
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/trigger-card.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/trigger-card.tsx
index 681877523..1b3c9786f 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/trigger-card.tsx
+++ b/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">
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/automations-content.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/automations-content.tsx
index 756221d38..3a9532f1c 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/automations-content.tsx
+++ b/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>
 			</>
 		);
 	}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/components/automations-empty-state.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/components/automations-empty-state.tsx
index cc54c5e94..b2e7b2532 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/components/automations-empty-state.tsx
+++ b/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>
 			) : (
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/components/automations-header.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/components/automations-header.tsx
index 137727f60..5c1fcb507 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/components/automations-header.tsx
+++ b/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>
 			)}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/components/builder/automation-builder-form.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/components/builder/automation-builder-form.tsx
index 39904dfa0..117b7bfe8 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/components/builder/automation-builder-form.tsx
+++ b/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">
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/components/builder/automation-model-fields.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/components/builder/automation-model-fields.tsx
index 8ca8d839c..6fd0581cd 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/components/builder/automation-model-fields.tsx
+++ b/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>
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/components/builder/json-mode-panel.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/components/builder/json-mode-panel.tsx
index 1f25f8a61..9ff64d499 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/components/builder/json-mode-panel.tsx
+++ b/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>
 	);
diff --git a/surfsense_web/components/layout/ui/sidebar/SidebarSection.tsx b/surfsense_web/components/layout/ui/sidebar/SidebarSection.tsx
index 99162dddf..c041dec86 100644
--- a/surfsense_web/components/layout/ui/sidebar/SidebarSection.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/SidebarSection.tsx
@@ -39,12 +39,12 @@ export function SidebarSection({
 				className
 			)}
 		>
-			<div className="flex items-center group/section shrink-0 px-2 py-1">
+			<div className="flex items-center group/section shrink-0 px-4 py-1">
 				<CollapsibleTrigger className="flex items-center gap-1 text-xs font-medium text-muted-foreground hover:text-accent-foreground transition-colors min-w-0">
 					<span className="truncate">{title}</span>
 					<ChevronRight
 						className={cn(
-							"h-3.5 w-3.5 shrink-0 transition-transform duration-200",
+							"h-3.5 w-3.5 shrink-0 transition-[color,opacity,transform] duration-200 opacity-100 md:opacity-0 md:group-hover/section:opacity-100",
 							isOpen && "rotate-90"
 						)}
 					/>
diff --git a/surfsense_web/components/new-chat/chat-example-prompts.tsx b/surfsense_web/components/new-chat/chat-example-prompts.tsx
index f36247f37..f969aa61b 100644
--- a/surfsense_web/components/new-chat/chat-example-prompts.tsx
+++ b/surfsense_web/components/new-chat/chat-example-prompts.tsx
@@ -108,4 +108,4 @@ export function ChatExamplePrompts({ onSelect }: ChatExamplePromptsProps) {
 			) : null}
 		</div>
 	);
-}
+}
\ No newline at end of file
diff --git a/surfsense_web/components/tool-ui/automation/create-automation.tsx b/surfsense_web/components/tool-ui/automation/create-automation.tsx
index d4cc0ec4d..24e9d66bd 100644
--- a/surfsense_web/components/tool-ui/automation/create-automation.tsx
+++ b/surfsense_web/components/tool-ui/automation/create-automation.tsx
@@ -12,6 +12,7 @@ import {
 import { activeSearchSpaceIdAtom } from "@/atoms/search-spaces/search-space-query.atoms";
 import { JsonView } from "@/components/json-view";
 import { TextShimmerLoader } from "@/components/prompt-kit/loader";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { automationCreateRequest } from "@/contracts/types/automation.types";
 import type { HitlDecision, InterruptResult } from "@/features/chat-messages/hitl";
@@ -351,19 +352,21 @@ function JsonEditor({ initialValue, onSave, onCancel }: JsonEditorProps) {
 				/>
 			</div>
 			{issues.length > 0 && (
-				<div className="rounded-md border border-destructive/30 bg-destructive/5 px-3 py-2">
-					<div className="flex items-center gap-1.5 text-xs font-medium text-destructive">
-						<AlertCircle className="h-3.5 w-3.5" aria-hidden />
+				<Alert variant="destructive">
+					<AlertCircle aria-hidden />
+					<AlertTitle>
 						{issues.length} issue{issues.length === 1 ? "" : "s"}
-					</div>
-					<ul className="mt-1.5 space-y-0.5 text-xs text-destructive/90 list-disc list-inside">
-						{issues.map((issue) => (
-							<li key={issue} className="font-mono">
-								{issue}
-							</li>
-						))}
-					</ul>
-				</div>
+					</AlertTitle>
+					<AlertDescription>
+						<ul className="list-inside list-disc">
+							{issues.map((issue) => (
+								<li key={issue} className="font-mono">
+									{issue}
+								</li>
+							))}
+						</ul>
+					</AlertDescription>
+				</Alert>
 			)}
 			<div className="flex items-center justify-end gap-2">
 				<Button type="button" variant="ghost" size="sm" onClick={onCancel}>