feat(web): automations list page with status, pause/resume and delete

Vertical slice at /dashboard/[id]/automations. The page is read-only by
default; every action gates on backend automations:* permissions via a
co-located permissions hook so adding/removing surfaces stays a
one-file change.

Route:
- page.tsx — server boundary; extracts search_space_id.
- automations-content.tsx — client orchestrator (loading / no-access /
  error / empty / table branches).

Components (one concern per file):
- automations-header.tsx — title + count + "Create via chat" CTA.
- automations-table.tsx + automation-row.tsx — name/status/updated
  columns; row name links to detail (PR4).
- automation-status-badge.tsx — active / paused / archived pill.
- automation-row-actions.tsx — ⋯ menu with pause/resume + delete,
  gated on canUpdate / canDelete. Archived rows hide the toggle.
- delete-automation-dialog.tsx — destructive confirm; mentions FK
  cascade explicitly so users know triggers/runs go too.
- automations-empty-state.tsx — zero-state pointing to chat (creation
  is intent-driven via the create_automation HITL tool, not a form).
- automations-loading.tsx — skeleton rows in the same shell so the
  layout doesn't shift on data arrival.
- automation-triggers-summary.tsx — small cron-describer (daily,
  weekdays, weekly, monthly, hourly) + timezone for the detail page.
  Kept inline since v1 only registers schedule.

Hooks:
- use-automation-permissions.ts — single source of truth for the
  slice's canCreate/canRead/canUpdate/canDelete/canExecute gates,
  backed by myAccessAtom.

Pause/resume and delete reuse the PR2 mutation atoms, so list +
detail caches stay coherent without bespoke invalidation.

Out of scope (later PRs):
- detail route (definition viewer + triggers manager) — PR4
- raw JSON editor — PR5
- nav entry / sidebar wiring — small follow-up PR

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

@@ -0,0 +1,101 @@
+"use client";
+import { ShieldAlert } from "lucide-react";
+import { useAutomations } from "@/hooks/use-automations";
+import { AutomationsEmptyState } from "./components/automations-empty-state";
+import { AutomationsHeader } from "./components/automations-header";
+import { AutomationsTable } from "./components/automations-table";
+import { useAutomationPermissions } from "./hooks/use-automation-permissions";
+
+interface AutomationsContentProps {
+	searchSpaceId: number;
+}
+
+/**
+ * Client orchestrator for the automations list page. Pulls the active
+ * search space's first page (via ``useAutomations`` → ``automationsListAtom``)
+ * and the user's permissions, then decides between empty / loading / table.
+ *
+ * Read access is mandatory; anything else is hidden behind RBAC. The
+ * permissions hook is co-located in this slice so adding/removing
+ * surfaces is a one-file change.
+ */
+export function AutomationsContent({ searchSpaceId }: AutomationsContentProps) {
+	const { automations, total, loading, error } = useAutomations();
+	const perms = useAutomationPermissions();
+
+	if (perms.loading) {
+		// Permissions gate the entire page; defer everything until we know.
+		return (
+			<>
+				<AutomationsHeader searchSpaceId={searchSpaceId} total={0} loading canCreate={false} />
+				<AutomationsTable
+					automations={[]}
+					searchSpaceId={searchSpaceId}
+					loading
+					canUpdate={false}
+					canDelete={false}
+				/>
+			</>
+		);
+	}
+
+	if (!perms.canRead) {
+		return (
+			<div className="rounded-lg border border-border/60 bg-muted/20 px-6 py-12 text-center">
+				<ShieldAlert className="mx-auto h-10 w-10 text-muted-foreground" aria-hidden />
+				<h2 className="mt-3 text-base font-semibold text-foreground">Access denied</h2>
+				<p className="mt-1 text-sm text-muted-foreground max-w-md mx-auto">
+					You don't have permission to view automations in this search space.
+				</p>
+			</div>
+		);
+	}
+
+	if (error) {
+		return (
+			<>
+				<AutomationsHeader
+					searchSpaceId={searchSpaceId}
+					total={0}
+					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>
+			</>
+		);
+	}
+
+	if (!loading && automations.length === 0) {
+		return (
+			<>
+				<AutomationsHeader
+					searchSpaceId={searchSpaceId}
+					total={0}
+					loading={false}
+					canCreate={perms.canCreate}
+				/>
+				<AutomationsEmptyState searchSpaceId={searchSpaceId} canCreate={perms.canCreate} />
+			</>
+		);
+	}
+
+	return (
+		<>
+			<AutomationsHeader
+				searchSpaceId={searchSpaceId}
+				total={total}
+				loading={loading}
+				canCreate={perms.canCreate}
+			/>
+			<AutomationsTable
+				automations={automations}
+				searchSpaceId={searchSpaceId}
+				loading={loading}
+				canUpdate={perms.canUpdate}
+				canDelete={perms.canDelete}
+			/>
+		</>
+	);
+}

surfsense_web/app/dashboard/[search_space_id]/automations/components/automation-row-actions.tsx

@@ -0,0 +1,98 @@
+"use client";
+import { useAtomValue } from "jotai";
+import { MoreHorizontal, Pause, Play, Trash2 } from "lucide-react";
+import { useState } from "react";
+import { updateAutomationMutationAtom } from "@/atoms/automations/automations-mutation.atoms";
+import { Button } from "@/components/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import type { AutomationSummary } from "@/contracts/types/automation.types";
+import { DeleteAutomationDialog } from "./delete-automation-dialog";
+
+interface AutomationRowActionsProps {
+	automation: AutomationSummary;
+	searchSpaceId: number;
+	canUpdate: boolean;
+	canDelete: boolean;
+}
+
+/**
+ * Three-dot menu on each row: pause/resume (if updatable) and delete
+ * (if deletable). The menu itself is hidden when the user has neither
+ * permission so we don't render an empty trigger.
+ */
+export function AutomationRowActions({
+	automation,
+	searchSpaceId,
+	canUpdate,
+	canDelete,
+}: AutomationRowActionsProps) {
+	const { mutateAsync: updateAutomation, isPending: updating } = useAtomValue(
+		updateAutomationMutationAtom
+	);
+	const [deleteOpen, setDeleteOpen] = useState(false);
+
+	if (!canUpdate && !canDelete) return null;
+
+	const nextStatus = automation.status === "active" ? "paused" : "active";
+	const pauseLabel = automation.status === "active" ? "Pause" : "Resume";
+	const PauseIcon = automation.status === "active" ? Pause : Play;
+	const canToggle = canUpdate && automation.status !== "archived";
+
+	async function handleTogglePause() {
+		await updateAutomation({
+			automationId: automation.id,
+			patch: { status: nextStatus },
+		});
+	}
+
+	return (
+		<>
+			<DropdownMenu>
+				<DropdownMenuTrigger asChild>
+					<Button
+						variant="ghost"
+						size="icon"
+						className="h-8 w-8"
+						aria-label={`Actions for ${automation.name}`}
+					>
+						<MoreHorizontal className="h-4 w-4" />
+					</Button>
+				</DropdownMenuTrigger>
+				<DropdownMenuContent align="end" className="w-40">
+					{canToggle && (
+						<DropdownMenuItem onSelect={handleTogglePause} disabled={updating}>
+							<PauseIcon className="mr-2 h-4 w-4" />
+							{pauseLabel}
+						</DropdownMenuItem>
+					)}
+					{canToggle && canDelete && <DropdownMenuSeparator />}
+					{canDelete && (
+						<DropdownMenuItem
+							onSelect={() => setDeleteOpen(true)}
+							className="text-destructive focus:text-destructive"
+						>
+							<Trash2 className="mr-2 h-4 w-4" />
+							Delete
+						</DropdownMenuItem>
+					)}
+				</DropdownMenuContent>
+			</DropdownMenu>
+
+			{canDelete && (
+				<DeleteAutomationDialog
+					open={deleteOpen}
+					onOpenChange={setDeleteOpen}
+					automationId={automation.id}
+					automationName={automation.name}
+					searchSpaceId={searchSpaceId}
+				/>
+			)}
+		</>
+	);
+}

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

@@ -0,0 +1,61 @@
+"use client";
+import Link from "next/link";
+import { TableCell, TableRow } from "@/components/ui/table";
+import type { AutomationSummary } from "@/contracts/types/automation.types";
+import { formatRelativeDate } from "@/lib/format-date";
+import { AutomationRowActions } from "./automation-row-actions";
+import { AutomationStatusBadge } from "./automation-status-badge";
+
+interface AutomationRowProps {
+	automation: AutomationSummary;
+	searchSpaceId: number;
+	canUpdate: boolean;
+	canDelete: boolean;
+}
+
+/**
+ * One row in the automations table. The name links to the detail page;
+ * actions are gated by ``canUpdate`` / ``canDelete``. Trigger summary
+ * is intentionally left to the detail page — list responses don't
+ * include triggers and we want to avoid N+1 detail fetches.
+ */
+export function AutomationRow({
+	automation,
+	searchSpaceId,
+	canUpdate,
+	canDelete,
+}: AutomationRowProps) {
+	return (
+		<TableRow className="border-b border-border/60 hover:bg-muted/40">
+			<TableCell className="px-4 md:px-6 py-3 border-r border-border/60">
+				<div className="flex flex-col gap-0.5 min-w-0">
+					<Link
+						href={`/dashboard/${searchSpaceId}/automations/${automation.id}`}
+						className="text-sm font-medium text-foreground hover:underline truncate"
+					>
+						{automation.name}
+					</Link>
+					{automation.description && (
+						<span className="text-xs text-muted-foreground line-clamp-1">
+							{automation.description}
+						</span>
+					)}
+				</div>
+			</TableCell>
+			<TableCell className="px-4 py-3 border-r border-border/60 w-32">
+				<AutomationStatusBadge status={automation.status} />
+			</TableCell>
+			<TableCell className="hidden md:table-cell px-4 py-3 border-r border-border/60 w-40 text-xs text-muted-foreground">
+				{formatRelativeDate(automation.updated_at)}
+			</TableCell>
+			<TableCell className="px-4 md:px-6 py-3 w-16 text-right">
+				<AutomationRowActions
+					automation={automation}
+					searchSpaceId={searchSpaceId}
+					canUpdate={canUpdate}
+					canDelete={canDelete}
+				/>
+			</TableCell>
+		</TableRow>
+	);
+}

surfsense_web/app/dashboard/[search_space_id]/automations/components/automation-status-badge.tsx

@@ -0,0 +1,49 @@
+"use client";
+import { Archive, CircleDot, Pause } from "lucide-react";
+import type { AutomationStatus } from "@/contracts/types/automation.types";
+import { cn } from "@/lib/utils";
+
+interface AutomationStatusBadgeProps {
+	status: AutomationStatus;
+	className?: string;
+}
+
+// Color + icon per status. Active = green, paused = amber, archived = muted.
+const STATUS_STYLES: Record<
+	AutomationStatus,
+	{ label: string; icon: typeof CircleDot; classes: string }
+> = {
+	active: {
+		label: "Active",
+		icon: CircleDot,
+		classes:
+			"bg-emerald-50 text-emerald-700 border border-emerald-200 dark:bg-emerald-950/40 dark:text-emerald-300 dark:border-emerald-900/50",
+	},
+	paused: {
+		label: "Paused",
+		icon: Pause,
+		classes:
+			"bg-amber-50 text-amber-700 border border-amber-200 dark:bg-amber-950/40 dark:text-amber-300 dark:border-amber-900/50",
+	},
+	archived: {
+		label: "Archived",
+		icon: Archive,
+		classes: "bg-muted text-muted-foreground border border-border/60",
+	},
+};
+
+export function AutomationStatusBadge({ status, className }: AutomationStatusBadgeProps) {
+	const { label, icon: Icon, classes } = STATUS_STYLES[status];
+	return (
+		<span
+			className={cn(
+				"inline-flex items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium",
+				classes,
+				className
+			)}
+		>
+			<Icon className="h-3 w-3" aria-hidden />
+			{label}
+		</span>
+	);
+}

surfsense_web/app/dashboard/[search_space_id]/automations/components/automation-triggers-summary.tsx

@@ -0,0 +1,120 @@
+"use client";
+import { CalendarClock, Pause } from "lucide-react";
+import type { Trigger } from "@/contracts/types/automation.types";
+
+interface AutomationTriggersSummaryProps {
+	triggers: Trigger[];
+}
+
+/**
+ * One-line summary of an automation's triggers for the list view.
+ *
+ * v1 only registers ``schedule`` so this stays compact:
+ *   - 0 triggers → "No triggers"
+ *   - 1 schedule trigger → "Mon–Fri at 09:00 · UTC" + disabled badge if off
+ *   - >1 → "N triggers"
+ *
+ * The detail page renders the full per-trigger editor.
+ */
+export function AutomationTriggersSummary({ triggers }: AutomationTriggersSummaryProps) {
+	if (triggers.length === 0) {
+		return <span className="text-xs text-muted-foreground">No triggers</span>;
+	}
+
+	if (triggers.length > 1) {
+		return <span className="text-xs text-muted-foreground">{triggers.length} triggers</span>;
+	}
+
+	const [trigger] = triggers;
+
+	if (trigger.type === "schedule") {
+		const cron = typeof trigger.params.cron === "string" ? trigger.params.cron : undefined;
+		const tz = typeof trigger.params.timezone === "string" ? trigger.params.timezone : "UTC";
+		const human = cron ? describeCron(cron) : "Schedule";
+
+		return (
+			<span className="inline-flex items-center gap-1.5 text-xs">
+				<CalendarClock className="h-3.5 w-3.5 text-muted-foreground" aria-hidden />
+				<span className="text-foreground">{human}</span>
+				<span className="text-muted-foreground">· {tz}</span>
+				{!trigger.enabled && (
+					<span className="inline-flex items-center gap-1 rounded-md border border-border/60 px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
+						<Pause className="h-2.5 w-2.5" aria-hidden />
+						Off
+					</span>
+				)}
+			</span>
+		);
+	}
+
+	return <span className="text-xs text-muted-foreground capitalize">{trigger.type}</span>;
+}
+
+// ----------------------------------------------------------------------------
+// Minimal cron describer for the common 5-field patterns SurfSense automations
+// surface today. Falls back to the raw expression when unrecognized so the user
+// still sees something honest instead of a guess.
+//
+// Kept inline (not a library) because:
+//   - v1 only needs to recognize a small set of patterns produced by the
+//     drafter LLM (hourly/daily/weekdays/weekly/monthly).
+//   - All current consumers live in this slice. If reuse grows, lift to
+//     ``lib/cron-describe.ts``.
+// ----------------------------------------------------------------------------
+
+const DAY_NAMES = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+
+function describeCron(cron: string): string {
+	const parts = cron.trim().split(/\s+/);
+	if (parts.length !== 5) return cron;
+
+	const [minute, hour, dom, month, dow] = parts;
+
+	// Daily at H:MM (matches the very common "0 9 * * *")
+	if (month === "*" && dom === "*" && dow === "*" && /^\d+$/.test(minute) && /^\d+$/.test(hour)) {
+		return `Daily at ${formatTime(hour, minute)}`;
+	}
+
+	// Weekdays at H:MM ("0 9 * * 1-5")
+	if (month === "*" && dom === "*" && dow === "1-5" && /^\d+$/.test(minute) && /^\d+$/.test(hour)) {
+		return `Mon–Fri at ${formatTime(hour, minute)}`;
+	}
+
+	// Specific weekday(s) ("0 9 * * 1" or "0 9 * * 1,3,5")
+	if (
+		month === "*" &&
+		dom === "*" &&
+		/^\d+$/.test(minute) &&
+		/^\d+$/.test(hour) &&
+		/^[\d,]+$/.test(dow)
+	) {
+		const days = dow
+			.split(",")
+			.map((d) => DAY_NAMES[Number(d) % 7])
+			.filter(Boolean)
+			.join(", ");
+		if (days) return `${days} at ${formatTime(hour, minute)}`;
+	}
+
+	// Monthly on day N ("0 9 1 * *")
+	if (
+		month === "*" &&
+		dow === "*" &&
+		/^\d+$/.test(dom) &&
+		/^\d+$/.test(hour) &&
+		/^\d+$/.test(minute)
+	) {
+		return `Day ${dom} of each month at ${formatTime(hour, minute)}`;
+	}
+
+	// Hourly ("0 * * * *")
+	if (month === "*" && dom === "*" && dow === "*" && hour === "*" && /^\d+$/.test(minute)) {
+		return minute === "0" ? "Every hour" : `Every hour at :${minute.padStart(2, "0")}`;
+	}
+
+	return cron;
+}
+
+function formatTime(hour: string, minute: string): string {
+	return `${hour.padStart(2, "0")}:${minute.padStart(2, "0")}`;
+}

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

@@ -0,0 +1,42 @@
+"use client";
+import { MessageSquarePlus, Workflow } from "lucide-react";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+
+interface AutomationsEmptyStateProps {
+	searchSpaceId: number;
+	canCreate: boolean;
+}
+
+/**
+ * Zero-state for the automations list. The primary CTA points to a new
+ * chat — creation happens via the ``create_automation`` HITL tool, not a
+ * "new automation" form. We surface the chat path explicitly so users
+ * don't go hunting for an "add" button that doesn't exist.
+ */
+export function AutomationsEmptyState({ searchSpaceId, canCreate }: AutomationsEmptyStateProps) {
+	return (
+		<div className="rounded-lg border border-dashed border-border/60 bg-muted/20 px-6 py-12 text-center">
+			<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-muted text-muted-foreground">
+				<Workflow className="h-6 w-6" aria-hidden />
+			</div>
+			<h3 className="mt-4 text-base font-semibold text-foreground">No automations yet</h3>
+			<p className="mt-1 text-sm text-muted-foreground max-w-md mx-auto">
+				Automations let SurfSense run agent tasks on a schedule. Describe what you want in chat and
+				SurfSense drafts the automation for your approval.
+			</p>
+			{canCreate ? (
+				<Button asChild className="mt-6">
+					<Link href={`/dashboard/${searchSpaceId}/new-chat`}>
+						<MessageSquarePlus className="mr-2 h-4 w-4" />
+						Create via chat
+					</Link>
+				</Button>
+			) : (
+				<p className="mt-6 text-xs text-muted-foreground">
+					You don't have permission to create automations in this search space.
+				</p>
+			)}
+		</div>
+	);
+}

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

@@ -0,0 +1,44 @@
+"use client";
+import { MessageSquarePlus } from "lucide-react";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+
+interface AutomationsHeaderProps {
+	searchSpaceId: number;
+	total: number;
+	loading: boolean;
+	canCreate: boolean;
+}
+
+/**
+ * Page header: title + count + "Create via chat" CTA. Creation is intent-driven
+ * (the create_automation tool runs inside chat with a HITL approval card), so
+ * the CTA links to a new chat rather than opening a form.
+ */
+export function AutomationsHeader({
+	searchSpaceId,
+	total,
+	loading,
+	canCreate,
+}: AutomationsHeaderProps) {
+	return (
+		<div className="flex items-center justify-between gap-4 flex-wrap">
+			<div className="flex items-baseline gap-3">
+				<h1 className="text-xl md:text-2xl font-semibold text-foreground">Automations</h1>
+				{!loading && (
+					<span className="text-sm text-muted-foreground">
+						{total} {total === 1 ? "automation" : "automations"}
+					</span>
+				)}
+			</div>
+			{canCreate && (
+				<Button asChild size="sm">
+					<Link href={`/dashboard/${searchSpaceId}/new-chat`}>
+						<MessageSquarePlus className="mr-2 h-4 w-4" />
+						Create via chat
+					</Link>
+				</Button>
+			)}
+		</div>
+	);
+}

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

@@ -0,0 +1,36 @@
+"use client";
+import { Skeleton } from "@/components/ui/skeleton";
+import { TableCell, TableRow } from "@/components/ui/table";
+
+const ROW_KEYS = ["sk-1", "sk-2", "sk-3"];
+
+/**
+ * Skeleton rows for the automations table. Number of rows is fixed since
+ * we don't know the count ahead of time and three placeholders is enough
+ * to communicate "loading" without flashing too much chrome.
+ */
+export function AutomationsLoadingRows() {
+	return (
+		<>
+			{ROW_KEYS.map((key) => (
+				<TableRow key={key} className="border-b border-border/60 hover:bg-transparent">
+					<TableCell className="px-4 md:px-6 py-3 border-r border-border/60">
+						<div className="flex flex-col gap-1.5">
+							<Skeleton className="h-4 w-40" />
+							<Skeleton className="h-3 w-56" />
+						</div>
+					</TableCell>
+					<TableCell className="px-4 py-3 border-r border-border/60 w-32">
+						<Skeleton className="h-5 w-16 rounded-md" />
+					</TableCell>
+					<TableCell className="hidden md:table-cell px-4 py-3 border-r border-border/60 w-40">
+						<Skeleton className="h-3 w-20" />
+					</TableCell>
+					<TableCell className="px-4 md:px-6 py-3 w-16">
+						<Skeleton className="h-8 w-8 rounded-md ml-auto" />
+					</TableCell>
+				</TableRow>
+			))}
+		</>
+	);
+}

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

@@ -0,0 +1,73 @@
+"use client";
+import { Activity, CalendarDays, Workflow } from "lucide-react";
+import { Table, TableBody, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import type { AutomationSummary } from "@/contracts/types/automation.types";
+import { AutomationRow } from "./automation-row";
+import { AutomationsLoadingRows } from "./automations-loading";
+
+interface AutomationsTableProps {
+	automations: AutomationSummary[];
+	searchSpaceId: number;
+	loading: boolean;
+	canUpdate: boolean;
+	canDelete: boolean;
+}
+
+/**
+ * Table shell + header. Rows render below — loading state renders skeleton
+ * rows in the same shell so the layout doesn't shift on data arrival.
+ */
+export function AutomationsTable({
+	automations,
+	searchSpaceId,
+	loading,
+	canUpdate,
+	canDelete,
+}: AutomationsTableProps) {
+	return (
+		<div className="rounded-lg border border-border/60 bg-accent overflow-hidden">
+			<Table className="table-fixed w-full">
+				<TableHeader>
+					<TableRow className="hover:bg-transparent border-b border-border/60">
+						<TableHead className="px-4 md:px-6 border-r border-border/60">
+							<span className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground/70">
+								<Workflow size={14} className="opacity-60 text-muted-foreground" />
+								Name
+							</span>
+						</TableHead>
+						<TableHead className="border-r border-border/60 w-32">
+							<span className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground/70">
+								<Activity size={14} className="opacity-60 text-muted-foreground" />
+								Status
+							</span>
+						</TableHead>
+						<TableHead className="hidden md:table-cell border-r border-border/60 w-40">
+							<span className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground/70">
+								<CalendarDays size={14} className="opacity-60 text-muted-foreground" />
+								Updated
+							</span>
+						</TableHead>
+						<TableHead className="px-4 md:px-6 w-16">
+							<span className="sr-only">Actions</span>
+						</TableHead>
+					</TableRow>
+				</TableHeader>
+				<TableBody>
+					{loading ? (
+						<AutomationsLoadingRows />
+					) : (
+						automations.map((automation) => (
+							<AutomationRow
+								key={automation.id}
+								automation={automation}
+								searchSpaceId={searchSpaceId}
+								canUpdate={canUpdate}
+								canDelete={canDelete}
+							/>
+						))
+					)}
+				</TableBody>
+			</Table>
+		</div>
+	);
+}

surfsense_web/app/dashboard/[search_space_id]/automations/components/delete-automation-dialog.tsx

@@ -0,0 +1,80 @@
+"use client";
+import { useAtomValue } from "jotai";
+import { useState } from "react";
+import { deleteAutomationMutationAtom } from "@/atoms/automations/automations-mutation.atoms";
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Spinner } from "@/components/ui/spinner";
+
+interface DeleteAutomationDialogProps {
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+	automationId: number;
+	automationName: string;
+	searchSpaceId: number;
+}
+
+/**
+ * Confirm + delete one automation. FK cascade on the backend wipes attached
+ * triggers and runs, so we mention it explicitly. List re-fetch is handled
+ * by the mutation atom's onSuccess.
+ */
+export function DeleteAutomationDialog({
+	open,
+	onOpenChange,
+	automationId,
+	automationName,
+	searchSpaceId,
+}: DeleteAutomationDialogProps) {
+	const { mutateAsync: deleteAutomation } = useAtomValue(deleteAutomationMutationAtom);
+	const [submitting, setSubmitting] = useState(false);
+
+	async function handleConfirm() {
+		setSubmitting(true);
+		try {
+			await deleteAutomation({ automationId, searchSpaceId });
+			onOpenChange(false);
+		} finally {
+			setSubmitting(false);
+		}
+	}
+
+	return (
+		<AlertDialog open={open} onOpenChange={onOpenChange}>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>Delete this automation?</AlertDialogTitle>
+					<AlertDialogDescription>
+						<span className="font-medium text-foreground">{automationName}</span> and all of its
+						triggers and run history will be removed. This cannot be undone.
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel disabled={submitting}>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={handleConfirm}
+						disabled={submitting}
+						className="bg-destructive text-white hover:bg-destructive/90"
+					>
+						{submitting ? (
+							<span className="inline-flex items-center gap-2">
+								<Spinner size="xs" />
+								Deleting…
+							</span>
+						) : (
+							"Delete"
+						)}
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+}

surfsense_web/app/dashboard/[search_space_id]/automations/hooks/use-automation-permissions.ts

@@ -0,0 +1,37 @@
+"use client";
+import { useAtomValue } from "jotai";
+import { useMemo } from "react";
+import { canPerform, myAccessAtom } from "@/atoms/members/members-query.atoms";
+
+/**
+ * Centralized RBAC gates for the automations slice. Co-located with the
+ * route so adding/removing surfaces stays a one-file change. Backed by
+ * the same ``myAccessAtom`` the rest of the app uses; owners short-circuit
+ * to ``true`` for every action.
+ *
+ * Mirrors backend permissions in ``app.db.permissions`` (automations:*).
+ */
+export interface AutomationPermissions {
+	loading: boolean;
+	canCreate: boolean;
+	canRead: boolean;
+	canUpdate: boolean;
+	canDelete: boolean;
+	canExecute: boolean;
+}
+
+export function useAutomationPermissions(): AutomationPermissions {
+	const { data: access, isLoading } = useAtomValue(myAccessAtom);
+
+	return useMemo(
+		() => ({
+			loading: isLoading,
+			canCreate: canPerform(access, "automations:create"),
+			canRead: canPerform(access, "automations:read"),
+			canUpdate: canPerform(access, "automations:update"),
+			canDelete: canPerform(access, "automations:delete"),
+			canExecute: canPerform(access, "automations:execute"),
+		}),
+		[access, isLoading]
+	);
+}

surfsense_web/app/dashboard/[search_space_id]/automations/page.tsx

@@ -0,0 +1,15 @@
+import { AutomationsContent } from "./automations-content";
+
+export default async function AutomationsPage({
+	params,
+}: {
+	params: Promise<{ search_space_id: string }>;
+}) {
+	const { search_space_id } = await params;
+
+	return (
+		<div className="w-full space-y-6">
+			<AutomationsContent searchSpaceId={Number(search_space_id)} />
+		</div>
+	);
+}