feat(web): automations detail page (definition viewer + trigger manager)

Vertical slice at /dashboard/[id]/automations/[automation_id]. Branches
in the orchestrator are: perms loading → skeleton, no-access → access
denied panel, bad id → not-found, fetch loading → skeleton, fetch
error → not-found, loaded → header + definition + triggers.

Route:
- page.tsx — server boundary; extracts both ids.
- automation-detail-content.tsx — client orchestrator.

Header:
- automation-detail-header.tsx — back link, name, status badge,
  description, pause/resume + delete actions. Delete navigates back to
  the list via a new onDeleted hook on DeleteAutomationDialog so the
  list page (where the row just vanishes) stays unaffected.
- automation-not-found.tsx — 404/403/NaN-id panel. We don't
  distinguish missing vs. forbidden in the UI.

Definition (read-only in v1):
- automation-definition-section.tsx — wrapper Card; renders goal +
  tags + execution defaults + inputs schema (if present) + plan.
- plan-step-card.tsx — one step (when, output_as, retries, timeout,
  params JSON).
- execution-summary.tsx — timeout / max_retries / backoff /
  concurrency + on_failure step count.
- inputs-schema-preview.tsx — formatted JSON of inputs.schema; only
  rendered when the definition declares inputs.

Triggers:
- automation-triggers-section.tsx — wrapper Card, "Add via chat" CTA
  (creation is intent-driven, same philosophy as automations).
- trigger-card.tsx — schedule + timezone + cron, last/next fire
  hints, static_inputs JSON, enable Switch and remove button.
- delete-trigger-dialog.tsx — confirm + mutation atom.

Shared:
- lib/describe-cron.ts — moved out of automation-triggers-summary.tsx
  so both list and detail can describe schedules consistently
  (daily/weekdays/weekly/monthly/hourly, raw cron fallback).

Loading:
- automation-detail-loading.tsx — same shell as the loaded view so the
  layout doesn't jump on data arrival.

RBAC: each interactive surface is independently gated
(canUpdate/canDelete/canCreate) so the orchestrator stays thin and the
component tree is self-documenting about what each action requires.

Out of scope (later PRs):
- Editing definition / trigger params (raw-JSON path) — PR5
- Run history — PR6

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

@@ -0,0 +1,86 @@
+"use client";
+import { ShieldAlert } from "lucide-react";
+import { useAutomation } from "@/hooks/use-automation";
+import { useAutomationPermissions } from "../hooks/use-automation-permissions";
+import { AutomationDefinitionSection } from "./components/automation-definition-section";
+import { AutomationDetailHeader } from "./components/automation-detail-header";
+import { AutomationDetailLoading } from "./components/automation-detail-loading";
+import { AutomationNotFound } from "./components/automation-not-found";
+import { AutomationTriggersSection } from "./components/automation-triggers-section";
+
+interface AutomationDetailContentProps {
+	searchSpaceId: number;
+	automationId: number;
+}
+
+/**
+ * Client orchestrator for one automation's detail view. Branches:
+ *   - permissions loading → skeleton
+ *   - no read permission → access denied panel
+ *   - bad id (NaN) → not-found panel
+ *   - detail fetching → skeleton
+ *   - detail error / null → not-found panel (we don't distinguish 404
+ *     from 403 in the UI)
+ *   - detail loaded → header + definition + triggers
+ *
+ * Each child component is gated independently on the relevant permission
+ * so the orchestrator stays thin.
+ */
+export function AutomationDetailContent({
+	searchSpaceId,
+	automationId,
+}: AutomationDetailContentProps) {
+	const perms = useAutomationPermissions();
+	const validId = Number.isInteger(automationId) && automationId > 0;
+	const { data: automation, isLoading, error } = useAutomation(validId ? automationId : undefined);
+
+	if (perms.loading) {
+		return <AutomationDetailLoading />;
+	}
+
+	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 (!validId) {
+		return <AutomationNotFound searchSpaceId={searchSpaceId} />;
+	}
+
+	if (isLoading) {
+		return <AutomationDetailLoading />;
+	}
+
+	if (error || !automation) {
+		return <AutomationNotFound searchSpaceId={searchSpaceId} error={error} />;
+	}
+
+	return (
+		<>
+			<AutomationDetailHeader
+				automation={automation}
+				searchSpaceId={searchSpaceId}
+				canUpdate={perms.canUpdate}
+				canDelete={perms.canDelete}
+			/>
+
+			<AutomationDefinitionSection definition={automation.definition} />
+
+			<AutomationTriggersSection
+				triggers={automation.triggers}
+				automationId={automation.id}
+				searchSpaceId={searchSpaceId}
+				canUpdate={perms.canUpdate}
+				canDelete={perms.canDelete}
+				canCreate={perms.canCreate}
+			/>
+		</>
+	);
+}

surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/automation-definition-section.tsx

@@ -0,0 +1,99 @@
+"use client";
+import { ListOrdered, Settings2, Tag, Target } from "lucide-react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import type { AutomationDefinition } from "@/contracts/types/automation.types";
+import { ExecutionSummary } from "./execution-summary";
+import { InputsSchemaPreview } from "./inputs-schema-preview";
+import { PlanStepCard } from "./plan-step-card";
+
+interface AutomationDefinitionSectionProps {
+	definition: AutomationDefinition;
+}
+
+/**
+ * The Definition card. Read-only in v1 — editing definitions happens via
+ * chat (re-run create_automation with a refined intent) or, later, via
+ * the raw-JSON path. Layout is top-down:
+ *   goal → tags → execution defaults → inputs schema (if any) → plan
+ *
+ * The schema_version is rendered as a small badge next to the section
+ * title so it's discoverable but doesn't fight for attention.
+ */
+export function AutomationDefinitionSection({ definition }: AutomationDefinitionSectionProps) {
+	const hasTags = definition.metadata.tags.length > 0;
+	const hasInputs = !!definition.inputs;
+
+	return (
+		<Card>
+			<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
+				<CardTitle className="text-base font-semibold">Definition</CardTitle>
+				<span className="text-xs font-mono text-muted-foreground border border-border/60 rounded px-1.5 py-0.5">
+					v{definition.schema_version}
+				</span>
+			</CardHeader>
+			<CardContent className="space-y-6">
+				{definition.goal && (
+					<Field icon={Target} label="Goal">
+						<p className="text-sm text-foreground">{definition.goal}</p>
+					</Field>
+				)}
+
+				{hasTags && (
+					<Field icon={Tag} label="Tags">
+						<div className="flex flex-wrap gap-1.5">
+							{definition.metadata.tags.map((tag) => (
+								<span
+									key={tag}
+									className="inline-flex items-center rounded-md bg-muted px-2 py-0.5 text-xs text-muted-foreground"
+								>
+									{tag}
+								</span>
+							))}
+						</div>
+					</Field>
+				)}
+
+				<Field icon={Settings2} label="Execution defaults">
+					<ExecutionSummary execution={definition.execution} />
+				</Field>
+
+				{hasInputs && (
+					<Field icon={Settings2} label="Inputs schema">
+						{definition.inputs && <InputsSchemaPreview inputs={definition.inputs} />}
+					</Field>
+				)}
+
+				<Field
+					icon={ListOrdered}
+					label={`Plan · ${definition.plan.length} step${definition.plan.length === 1 ? "" : "s"}`}
+				>
+					<div className="space-y-2">
+						{definition.plan.map((step, idx) => (
+							<PlanStepCard key={step.step_id} step={step} index={idx} />
+						))}
+					</div>
+				</Field>
+			</CardContent>
+		</Card>
+	);
+}
+
+function Field({
+	icon: Icon,
+	label,
+	children,
+}: {
+	icon: typeof Target;
+	label: string;
+	children: React.ReactNode;
+}) {
+	return (
+		<div className="space-y-2">
+			<div className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground uppercase tracking-wider">
+				<Icon className="h-3.5 w-3.5" aria-hidden />
+				{label}
+			</div>
+			{children}
+		</div>
+	);
+}

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

@@ -0,0 +1,129 @@
+"use client";
+import { useAtomValue } from "jotai";
+import { ArrowLeft, Pause, Play, Trash2 } from "lucide-react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useCallback, useState } from "react";
+import { updateAutomationMutationAtom } from "@/atoms/automations/automations-mutation.atoms";
+import { Button } from "@/components/ui/button";
+import { Spinner } from "@/components/ui/spinner";
+import type { Automation } from "@/contracts/types/automation.types";
+import { AutomationStatusBadge } from "../../components/automation-status-badge";
+import { DeleteAutomationDialog } from "../../components/delete-automation-dialog";
+
+interface AutomationDetailHeaderProps {
+	automation: Automation;
+	searchSpaceId: number;
+	canUpdate: boolean;
+	canDelete: boolean;
+}
+
+/**
+ * Title bar for the detail page: back link, name, status badge,
+ * description, and the two destructive-ish primary actions (pause /
+ * resume + delete). Same mutation atoms as the list-row actions to
+ * keep caches coherent.
+ *
+ * Archived automations hide the pause/resume toggle (we don't unarchive
+ * here — that flow comes later if we need it).
+ */
+export function AutomationDetailHeader({
+	automation,
+	searchSpaceId,
+	canUpdate,
+	canDelete,
+}: AutomationDetailHeaderProps) {
+	const router = useRouter();
+	const { mutateAsync: updateAutomation, isPending: updating } = useAtomValue(
+		updateAutomationMutationAtom
+	);
+	const [deleteOpen, setDeleteOpen] = useState(false);
+
+	const canToggle = canUpdate && automation.status !== "archived";
+	const nextStatus = automation.status === "active" ? "paused" : "active";
+	const pauseLabel = automation.status === "active" ? "Pause" : "Resume";
+	const PauseIcon = automation.status === "active" ? Pause : Play;
+
+	const handleDeleted = useCallback(() => {
+		router.push(`/dashboard/${searchSpaceId}/automations`);
+	}, [router, searchSpaceId]);
+
+	async function handleTogglePause() {
+		await updateAutomation({
+			automationId: automation.id,
+			patch: { status: nextStatus },
+		});
+	}
+
+	return (
+		<>
+			<div className="space-y-3">
+				<Button asChild variant="ghost" size="sm" className="-ml-2 h-auto px-2 py-1">
+					<Link
+						href={`/dashboard/${searchSpaceId}/automations`}
+						className="text-xs text-muted-foreground"
+					>
+						<ArrowLeft className="mr-1.5 h-3.5 w-3.5" />
+						Back to automations
+					</Link>
+				</Button>
+
+				<div className="flex items-start justify-between gap-4 flex-wrap">
+					<div className="space-y-2 min-w-0 flex-1">
+						<div className="flex items-center gap-3 flex-wrap">
+							<h1 className="text-xl md:text-2xl font-semibold text-foreground break-words">
+								{automation.name}
+							</h1>
+							<AutomationStatusBadge status={automation.status} />
+						</div>
+						{automation.description && (
+							<p className="text-sm text-muted-foreground max-w-3xl">{automation.description}</p>
+						)}
+					</div>
+
+					<div className="flex items-center gap-2 shrink-0">
+						{canToggle && (
+							<Button
+								type="button"
+								variant="outline"
+								size="sm"
+								onClick={handleTogglePause}
+								disabled={updating}
+							>
+								{updating ? (
+									<Spinner size="xs" className="mr-2" />
+								) : (
+									<PauseIcon className="mr-2 h-4 w-4" />
+								)}
+								{pauseLabel}
+							</Button>
+						)}
+						{canDelete && (
+							<Button
+								type="button"
+								variant="outline"
+								size="sm"
+								onClick={() => setDeleteOpen(true)}
+								className="text-destructive hover:text-destructive hover:bg-destructive/10"
+							>
+								<Trash2 className="mr-2 h-4 w-4" />
+								Delete
+							</Button>
+						)}
+					</div>
+				</div>
+			</div>
+
+			{canDelete && (
+				<DeleteAutomationDialog
+					open={deleteOpen}
+					onOpenChange={setDeleteOpen}
+					automationId={automation.id}
+					automationName={automation.name}
+					searchSpaceId={searchSpaceId}
+					onDeleted={handleDeleted}
+				/>
+			)}
+		</>
+	);
+}

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

@@ -0,0 +1,42 @@
+"use client";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+
+/**
+ * Skeleton for the detail page. Same shell as the loaded view (header +
+ * two stacked cards) so the layout doesn't jump on data arrival.
+ */
+export function AutomationDetailLoading() {
+	return (
+		<div className="space-y-6">
+			<div className="space-y-3">
+				<Skeleton className="h-4 w-32" />
+				<div className="flex items-center gap-3">
+					<Skeleton className="h-7 w-64" />
+					<Skeleton className="h-5 w-16 rounded-md" />
+				</div>
+				<Skeleton className="h-4 w-96" />
+			</div>
+
+			<Card>
+				<CardHeader>
+					<Skeleton className="h-5 w-32" />
+				</CardHeader>
+				<CardContent className="space-y-4">
+					<Skeleton className="h-4 w-3/4" />
+					<Skeleton className="h-4 w-1/2" />
+					<Skeleton className="h-24 w-full" />
+				</CardContent>
+			</Card>
+
+			<Card>
+				<CardHeader>
+					<Skeleton className="h-5 w-24" />
+				</CardHeader>
+				<CardContent>
+					<Skeleton className="h-20 w-full" />
+				</CardContent>
+			</Card>
+		</div>
+	);
+}

surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/automation-not-found.tsx

@@ -0,0 +1,34 @@
+"use client";
+import { ArrowLeft, FileWarning } from "lucide-react";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+
+interface AutomationNotFoundProps {
+	searchSpaceId: number;
+	error?: Error | null;
+}
+
+/**
+ * Rendered when the detail fetch fails (404 / 403 / network) or the id
+ * is not a number. We don't distinguish "missing" from "forbidden" in the
+ * UI on purpose — leaking that an id exists you can't read is worse than
+ * a vague message.
+ */
+export function AutomationNotFound({ searchSpaceId, error }: AutomationNotFoundProps) {
+	return (
+		<div className="rounded-lg border border-border/60 bg-muted/20 px-6 py-12 text-center">
+			<FileWarning className="mx-auto h-10 w-10 text-muted-foreground" aria-hidden />
+			<h2 className="mt-3 text-base font-semibold text-foreground">Automation not found</h2>
+			<p className="mt-1 text-sm text-muted-foreground max-w-md mx-auto">
+				This automation doesn't exist or you don't have access to it.
+				{error?.message ? ` (${error.message})` : null}
+			</p>
+			<Button asChild variant="outline" size="sm" className="mt-6">
+				<Link href={`/dashboard/${searchSpaceId}/automations`}>
+					<ArrowLeft className="mr-2 h-4 w-4" />
+					Back to automations
+				</Link>
+			</Button>
+		</div>
+	);
+}

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

@@ -0,0 +1,75 @@
+"use client";
+import { CalendarClock, MessageSquarePlus } from "lucide-react";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import type { Trigger } from "@/contracts/types/automation.types";
+import { TriggerCard } from "./trigger-card";
+
+interface AutomationTriggersSectionProps {
+	triggers: Trigger[];
+	automationId: number;
+	searchSpaceId: number;
+	canUpdate: boolean;
+	canDelete: boolean;
+	canCreate: boolean;
+}
+
+/**
+ * The Triggers card. Lists each attached trigger with its own enable
+ * toggle and remove button. Adding a new trigger is intent-driven (via
+ * chat) for v1 — same philosophy as creating an automation, so the
+ * empty/add CTA links to a new chat rather than opening a form.
+ */
+export function AutomationTriggersSection({
+	triggers,
+	automationId,
+	searchSpaceId,
+	canUpdate,
+	canDelete,
+	canCreate,
+}: AutomationTriggersSectionProps) {
+	return (
+		<Card>
+			<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
+				<div className="space-y-1">
+					<CardTitle className="text-base font-semibold">Triggers</CardTitle>
+					<p className="text-xs text-muted-foreground">
+						When this automation fires. v1 supports scheduled triggers only.
+					</p>
+				</div>
+				{canCreate && (
+					<Button asChild variant="outline" size="sm">
+						<Link href={`/dashboard/${searchSpaceId}/new-chat`}>
+							<MessageSquarePlus className="mr-2 h-4 w-4" />
+							Add via chat
+						</Link>
+					</Button>
+				)}
+			</CardHeader>
+			<CardContent>
+				{triggers.length === 0 ? (
+					<div className="rounded-md border border-dashed border-border/60 bg-muted/20 px-4 py-8 text-center">
+						<CalendarClock className="mx-auto h-8 w-8 text-muted-foreground" aria-hidden />
+						<p className="mt-2 text-sm font-medium text-foreground">No triggers attached</p>
+						<p className="mt-1 text-xs text-muted-foreground">
+							This automation can still be invoked, but nothing will fire it on its own.
+						</p>
+					</div>
+				) : (
+					<div className="space-y-3">
+						{triggers.map((trigger) => (
+							<TriggerCard
+								key={trigger.id}
+								trigger={trigger}
+								automationId={automationId}
+								canUpdate={canUpdate}
+								canDelete={canDelete}
+							/>
+						))}
+					</div>
+				)}
+			</CardContent>
+		</Card>
+	);
+}

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

@@ -0,0 +1,80 @@
+"use client";
+import { useAtomValue } from "jotai";
+import { useState } from "react";
+import { removeTriggerMutationAtom } 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 DeleteTriggerDialogProps {
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+	automationId: number;
+	triggerId: number;
+	triggerLabel: string;
+}
+
+/**
+ * Confirm + detach one trigger from its automation. The automation itself
+ * is untouched; only this trigger row is removed. The mutation atom
+ * invalidates the parent automation detail so the page rerenders.
+ */
+export function DeleteTriggerDialog({
+	open,
+	onOpenChange,
+	automationId,
+	triggerId,
+	triggerLabel,
+}: DeleteTriggerDialogProps) {
+	const { mutateAsync: removeTrigger } = useAtomValue(removeTriggerMutationAtom);
+	const [submitting, setSubmitting] = useState(false);
+
+	async function handleConfirm() {
+		setSubmitting(true);
+		try {
+			await removeTrigger({ automationId, triggerId });
+			onOpenChange(false);
+		} finally {
+			setSubmitting(false);
+		}
+	}
+
+	return (
+		<AlertDialog open={open} onOpenChange={onOpenChange}>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>Remove this trigger?</AlertDialogTitle>
+					<AlertDialogDescription>
+						<span className="font-medium text-foreground">{triggerLabel}</span> will be detached.
+						The automation itself stays, but it won't fire on this trigger anymore.
+					</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" />
+								Removing…
+							</span>
+						) : (
+							"Remove"
+						)}
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+}

surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/execution-summary.tsx

@@ -0,0 +1,37 @@
+"use client";
+import type { Execution } from "@/contracts/types/automation.types";
+
+interface ExecutionSummaryProps {
+	execution: Execution;
+}
+
+/**
+ * Compact view of an automation's execution defaults (wall-clock cap,
+ * retries, backoff, concurrency, on_failure presence). Per-step overrides
+ * are shown inside each PlanStepCard, not here.
+ */
+export function ExecutionSummary({ execution }: ExecutionSummaryProps) {
+	return (
+		<dl className="grid grid-cols-2 md:grid-cols-4 gap-x-6 gap-y-2 text-xs">
+			<Item label="Timeout" value={`${execution.timeout_seconds}s`} />
+			<Item label="Max retries" value={String(execution.max_retries)} />
+			<Item label="Retry backoff" value={execution.retry_backoff} />
+			<Item label="Concurrency" value={execution.concurrency} />
+			{execution.on_failure.length > 0 && (
+				<Item
+					label="On failure"
+					value={`${execution.on_failure.length} step${execution.on_failure.length === 1 ? "" : "s"}`}
+				/>
+			)}
+		</dl>
+	);
+}
+
+function Item({ label, value }: { label: string; value: string }) {
+	return (
+		<div className="flex flex-col gap-0.5 min-w-0">
+			<dt className="text-muted-foreground">{label}</dt>
+			<dd className="text-foreground font-medium truncate">{value}</dd>
+		</div>
+	);
+}

surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/inputs-schema-preview.tsx

@@ -0,0 +1,20 @@
+"use client";
+import type { Inputs } from "@/contracts/types/automation.types";
+
+interface InputsSchemaPreviewProps {
+	inputs: Inputs;
+}
+
+/**
+ * Read-only JSON preview of an automation's accepted-inputs schema.
+ * Most automations don't define inputs (defaults are baked into the
+ * trigger's static_inputs), so the parent skips rendering this card
+ * when ``inputs`` is null.
+ */
+export function InputsSchemaPreview({ inputs }: InputsSchemaPreviewProps) {
+	return (
+		<pre className="rounded-md bg-muted/40 px-3 py-2 text-xs font-mono text-foreground overflow-x-auto whitespace-pre-wrap break-words max-h-72">
+			{JSON.stringify(inputs.schema, null, 2)}
+		</pre>
+	);
+}

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

@@ -0,0 +1,73 @@
+"use client";
+import { ArrowRightCircle, GitCommitHorizontal } from "lucide-react";
+import type { PlanStep } from "@/contracts/types/automation.types";
+
+interface PlanStepCardProps {
+	step: PlanStep;
+	index: number;
+}
+
+/**
+ * Read-only view of one plan step. Renders the step_id + action prominently,
+ * then a definition list of the per-step knobs, and finally the params as
+ * formatted JSON. Editable mode is out of scope here — definition edits live
+ * on the (future) raw-JSON path.
+ */
+export function PlanStepCard({ step, index }: PlanStepCardProps) {
+	return (
+		<div className="rounded-md border border-border/60 bg-background overflow-hidden">
+			<div className="flex items-center gap-2 px-4 py-2 border-b border-border/60 bg-muted/30">
+				<span className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground">
+					{index + 1}
+				</span>
+				<span className="text-sm font-medium text-foreground">{step.step_id}</span>
+				<ArrowRightCircle className="h-3.5 w-3.5 text-muted-foreground" aria-hidden />
+				<span className="text-xs font-mono text-muted-foreground">{step.action}</span>
+			</div>
+
+			<div className="px-4 py-3 space-y-3">
+				{(step.when ||
+					step.output_as ||
+					step.max_retries != null ||
+					step.timeout_seconds != null) && (
+					<dl className="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-1.5 text-xs">
+						{step.when && (
+							<DefRow label="When" value={<code className="font-mono">{step.when}</code>} />
+						)}
+						{step.output_as && (
+							<DefRow
+								label="Output as"
+								value={<code className="font-mono">{step.output_as}</code>}
+							/>
+						)}
+						{step.max_retries != null && (
+							<DefRow label="Max retries" value={String(step.max_retries)} />
+						)}
+						{step.timeout_seconds != null && (
+							<DefRow label="Timeout" value={`${step.timeout_seconds}s`} />
+						)}
+					</dl>
+				)}
+
+				<div>
+					<div className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground mb-1.5">
+						<GitCommitHorizontal className="h-3.5 w-3.5" aria-hidden />
+						Params
+					</div>
+					<pre className="rounded-md bg-muted/40 px-3 py-2 text-xs font-mono text-foreground overflow-x-auto whitespace-pre-wrap break-words">
+						{JSON.stringify(step.params, null, 2)}
+					</pre>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+function DefRow({ label, value }: { label: string; value: React.ReactNode }) {
+	return (
+		<div className="flex items-baseline gap-2 min-w-0">
+			<dt className="text-muted-foreground shrink-0">{label}:</dt>
+			<dd className="text-foreground min-w-0 truncate">{value}</dd>
+		</div>
+	);
+}

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

@@ -0,0 +1,152 @@
+"use client";
+import { useAtomValue } from "jotai";
+import { CalendarClock, Clock, Trash2 } from "lucide-react";
+import { useState } from "react";
+import { updateTriggerMutationAtom } from "@/atoms/automations/automations-mutation.atoms";
+import { Button } from "@/components/ui/button";
+import { Switch } from "@/components/ui/switch";
+import type { Trigger } from "@/contracts/types/automation.types";
+import { formatRelativeDate } from "@/lib/format-date";
+import { describeCron } from "../../lib/describe-cron";
+import { DeleteTriggerDialog } from "./delete-trigger-dialog";
+
+interface TriggerCardProps {
+	trigger: Trigger;
+	automationId: number;
+	canUpdate: boolean;
+	canDelete: boolean;
+}
+
+/**
+ * One trigger row in the Triggers section of the detail page. Renders:
+ *   - type icon + human-readable schedule + timezone
+ *   - last_fired_at / next_fire_at hints
+ *   - static_inputs as formatted JSON (when present)
+ *   - enable toggle + remove button (each gated independently)
+ *
+ * Editing params (cron, timezone, static_inputs) lives behind the future
+ * raw-JSON path; this card stays read-only-except-for-toggle for v1.
+ */
+export function TriggerCard({ trigger, automationId, canUpdate, canDelete }: TriggerCardProps) {
+	const { mutateAsync: updateTrigger, isPending: updating } =
+		useAtomValue(updateTriggerMutationAtom);
+	const [deleteOpen, setDeleteOpen] = useState(false);
+
+	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) : trigger.type;
+	const triggerLabel = cron ? `${human} · ${tz}` : trigger.type;
+	const hasStaticInputs = Object.keys(trigger.static_inputs ?? {}).length > 0;
+
+	async function handleToggle(checked: boolean) {
+		await updateTrigger({
+			automationId,
+			triggerId: trigger.id,
+			patch: { enabled: checked },
+		});
+	}
+
+	return (
+		<>
+			<div className="rounded-md border border-border/60 bg-background overflow-hidden">
+				<div className="flex items-center justify-between gap-4 px-4 py-3 border-b border-border/60">
+					<div className="flex items-center gap-3 min-w-0">
+						<CalendarClock className="h-4 w-4 text-muted-foreground shrink-0" aria-hidden />
+						<div className="min-w-0">
+							<div className="flex items-center gap-2 text-sm">
+								<span className="font-medium text-foreground">{human}</span>
+								<span className="text-muted-foreground">· {tz}</span>
+							</div>
+							{cron && <code className="text-xs font-mono text-muted-foreground">{cron}</code>}
+						</div>
+					</div>
+
+					<div className="flex items-center gap-2 shrink-0">
+						{canUpdate && (
+							<div className="flex items-center gap-2">
+								<span className="text-xs text-muted-foreground">
+									{trigger.enabled ? "Enabled" : "Off"}
+								</span>
+								<Switch
+									checked={trigger.enabled}
+									onCheckedChange={handleToggle}
+									disabled={updating}
+									aria-label={trigger.enabled ? "Disable trigger" : "Enable trigger"}
+								/>
+							</div>
+						)}
+						{canDelete && (
+							<Button
+								variant="ghost"
+								size="icon"
+								className="h-8 w-8 text-muted-foreground hover:text-destructive"
+								onClick={() => setDeleteOpen(true)}
+								aria-label="Remove trigger"
+							>
+								<Trash2 className="h-4 w-4" />
+							</Button>
+						)}
+					</div>
+				</div>
+
+				<div className="px-4 py-3 space-y-3 text-xs">
+					{(trigger.last_fired_at || trigger.next_fire_at) && (
+						<dl className="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-1.5">
+							{trigger.next_fire_at && (
+								<TimeRow label="Next fire" iso={trigger.next_fire_at} highlight={trigger.enabled} />
+							)}
+							{trigger.last_fired_at && <TimeRow label="Last fired" iso={trigger.last_fired_at} />}
+						</dl>
+					)}
+
+					{hasStaticInputs && (
+						<div>
+							<div className="text-muted-foreground mb-1">Static inputs</div>
+							<pre className="rounded-md bg-muted/40 px-3 py-2 font-mono text-foreground overflow-x-auto whitespace-pre-wrap break-words">
+								{JSON.stringify(trigger.static_inputs, null, 2)}
+							</pre>
+						</div>
+					)}
+				</div>
+			</div>
+
+			{canDelete && (
+				<DeleteTriggerDialog
+					open={deleteOpen}
+					onOpenChange={setDeleteOpen}
+					automationId={automationId}
+					triggerId={trigger.id}
+					triggerLabel={triggerLabel}
+				/>
+			)}
+		</>
+	);
+}
+
+function TimeRow({
+	label,
+	iso,
+	highlight = false,
+}: {
+	label: string;
+	iso: string;
+	highlight?: boolean;
+}) {
+	return (
+		<div className="flex items-baseline gap-2 min-w-0">
+			<dt className="text-muted-foreground shrink-0 inline-flex items-center gap-1">
+				<Clock className="h-3 w-3" aria-hidden />
+				{label}:
+			</dt>
+			<dd
+				className={
+					highlight
+						? "text-foreground font-medium min-w-0 truncate"
+						: "text-muted-foreground min-w-0 truncate"
+				}
+			>
+				{formatRelativeDate(iso)}
+			</dd>
+		</div>
+	);
+}

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

@@ -0,0 +1,18 @@
+import { AutomationDetailContent } from "./automation-detail-content";
+
+export default async function AutomationDetailPage({
+	params,
+}: {
+	params: Promise<{ search_space_id: string; automation_id: string }>;
+}) {
+	const { search_space_id, automation_id } = await params;
+
+	return (
+		<div className="w-full space-y-6">
+			<AutomationDetailContent
+				searchSpaceId={Number(search_space_id)}
+				automationId={Number(automation_id)}
+			/>
+		</div>
+	);
+}

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

@@ -1,6 +1,7 @@
 "use client";
 import { CalendarClock, Pause } from "lucide-react";
 import type { Trigger } from "@/contracts/types/automation.types";
+import { describeCron } from "../lib/describe-cron";
 
 interface AutomationTriggersSummaryProps {
 	triggers: Trigger[];
@@ -49,72 +50,3 @@ export function AutomationTriggersSummary({ triggers }: AutomationTriggersSummar
 
 	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/delete-automation-dialog.tsx

@@ -20,6 +20,12 @@ interface DeleteAutomationDialogProps {
 	automationId: number;
 	automationName: string;
 	searchSpaceId: number;
+	/**
+	 * Fired after a successful delete, before the dialog closes. The detail
+	 * page uses this to navigate back to the list (the row simply vanishes
+	 * on the list page so no callback is needed there).
+	 */
+	onDeleted?: () => void;
 }
 
 /**
@@ -33,6 +39,7 @@ export function DeleteAutomationDialog({
 	automationId,
 	automationName,
 	searchSpaceId,
+	onDeleted,
 }: DeleteAutomationDialogProps) {
 	const { mutateAsync: deleteAutomation } = useAtomValue(deleteAutomationMutationAtom);
 	const [submitting, setSubmitting] = useState(false);
@@ -41,6 +48,7 @@ export function DeleteAutomationDialog({
 		setSubmitting(true);
 		try {
 			await deleteAutomation({ automationId, searchSpaceId });
+			onDeleted?.();
 			onOpenChange(false);
 		} finally {
 			setSubmitting(false);

surfsense_web/app/dashboard/[search_space_id]/automations/lib/describe-cron.ts

@@ -0,0 +1,66 @@
+/**
+ * Minimal cron describer for the 5-field patterns the SurfSense drafter LLM
+ * actually produces (daily, weekdays, weekly, monthly, hourly). Falls back
+ * to the raw expression when unrecognized so the user still sees something
+ * honest instead of a guess.
+ *
+ * Lives in the automations slice because it's a UI display concern with no
+ * consumers outside it. If reuse grows, lift to ``lib/cron-describe.ts``.
+ */
+
+const DAY_NAMES = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+
+export 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 ("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")}`;
+}