feat(web): create automation via raw JSON

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

@@ -1,5 +1,5 @@
 "use client";
-import { MessageSquarePlus, Workflow } from "lucide-react";
+import { FileJson, MessageSquarePlus, Workflow } from "lucide-react";
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
 
@@ -26,12 +26,20 @@ export function AutomationsEmptyState({ searchSpaceId, canCreate }: AutomationsE
 				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>
+				<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>
+					</Button>
+					<Button asChild variant="outline">
+						<Link href={`/dashboard/${searchSpaceId}/automations/new`}>
+							<FileJson className="mr-2 h-4 w-4" />
+							Create via JSON
+						</Link>
+					</Button>
+				</div>
 			) : (
 				<p className="mt-6 text-xs text-muted-foreground">
 					You don't have permission to create automations in this search space.

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

@@ -1,5 +1,5 @@
 "use client";
-import { MessageSquarePlus } from "lucide-react";
+import { FileJson, MessageSquarePlus } from "lucide-react";
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
 
@@ -39,12 +39,20 @@ export function AutomationsHeader({
 				)}
 			</div>
 			{canCreate && showCreateCta && (
-				<Button asChild size="sm">
-					<Link href={`/dashboard/${searchSpaceId}/new-chat`}>
-						<MessageSquarePlus className="mr-2 h-4 w-4" />
-						Create via chat
-					</Link>
-				</Button>
+				<div className="flex items-center gap-2">
+					<Button asChild size="sm" variant="outline">
+						<Link href={`/dashboard/${searchSpaceId}/automations/new`}>
+							<FileJson className="mr-2 h-4 w-4" />
+							Create via JSON
+						</Link>
+					</Button>
+					<Button asChild size="sm">
+						<Link href={`/dashboard/${searchSpaceId}/new-chat`}>
+							<MessageSquarePlus className="mr-2 h-4 w-4" />
+							Create via chat
+						</Link>
+					</Button>
+				</div>
 			)}
 		</div>
 	);

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

@@ -0,0 +1,42 @@
+"use client";
+import { ShieldAlert } from "lucide-react";
+import { useAutomationPermissions } from "../hooks/use-automation-permissions";
+import { AutomationJsonForm } from "./components/automation-json-form";
+import { AutomationNewHeader } from "./components/automation-new-header";
+
+interface AutomationNewContentProps {
+	searchSpaceId: number;
+}
+
+/**
+ * Orchestrator for the raw-JSON create route. Gates on
+ * ``automations:create`` so users who can't create don't even see the
+ * form; same panel as the detail page's access-denied state for
+ * consistency.
+ */
+export function AutomationNewContent({ searchSpaceId }: AutomationNewContentProps) {
+	const perms = useAutomationPermissions();
+
+	if (perms.loading) {
+		return <div className="h-32 rounded-md border border-border/60 bg-muted/10 animate-pulse" />;
+	}
+
+	if (!perms.canCreate) {
+		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 create automations in this search space.
+				</p>
+			</div>
+		);
+	}
+
+	return (
+		<>
+			<AutomationNewHeader searchSpaceId={searchSpaceId} />
+			<AutomationJsonForm searchSpaceId={searchSpaceId} />
+		</>
+	);
+}

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

@@ -0,0 +1,122 @@
+"use client";
+import { useAtomValue } from "jotai";
+import { AlertCircle, Code, FileJson, Save } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { createAutomationMutationAtom } from "@/atoms/automations/automations-mutation.atoms";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Spinner } from "@/components/ui/spinner";
+import { automationCreateRequest } from "@/contracts/types/automation.types";
+import { DEFAULT_AUTOMATION_TEMPLATE } from "@/lib/automations/default-template";
+
+interface AutomationJsonFormProps {
+	searchSpaceId: number;
+}
+
+/**
+ * Raw-JSON create form. Lets power users skip the chat drafter when they
+ * already know the shape they want. Flow:
+ *   parse JSON → inject search_space_id → Zod validate → POST → navigate
+ *
+ * ``search_space_id`` is injected here rather than required in the pasted
+ * payload — the user shouldn't have to know their numeric id, and it
+ * keeps the template copy-paste-friendly across search spaces.
+ */
+export function AutomationJsonForm({ searchSpaceId }: AutomationJsonFormProps) {
+	const router = useRouter();
+	const { mutateAsync: createAutomation, isPending } = useAtomValue(createAutomationMutationAtom);
+	const [text, setText] = useState(() => JSON.stringify(DEFAULT_AUTOMATION_TEMPLATE, null, 2));
+	const [issues, setIssues] = useState<string[]>([]);
+
+	function handleFormat() {
+		try {
+			const parsed = JSON.parse(text);
+			setText(JSON.stringify(parsed, null, 2));
+			setIssues([]);
+		} catch (err) {
+			setIssues([`Cannot format — not valid JSON: ${(err as Error).message}`]);
+		}
+	}
+
+	async function handleSubmit() {
+		setIssues([]);
+
+		let parsed: unknown;
+		try {
+			parsed = JSON.parse(text);
+		} catch (err) {
+			setIssues([`Invalid JSON: ${(err as Error).message}`]);
+			return;
+		}
+
+		if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed)) {
+			setIssues(["Root must be a JSON object."]);
+			return;
+		}
+
+		const payload = { ...(parsed as Record<string, unknown>), search_space_id: searchSpaceId };
+		const result = automationCreateRequest.safeParse(payload);
+		if (!result.success) {
+			setIssues(
+				result.error.issues.map((issue) => `${issue.path.join(".") || "(root)"}: ${issue.message}`)
+			);
+			return;
+		}
+
+		try {
+			const created = await createAutomation(result.data);
+			router.push(`/dashboard/${searchSpaceId}/automations/${created.id}`);
+		} catch (err) {
+			setIssues([(err as Error).message ?? "Submit failed"]);
+		}
+	}
+
+	const hasIssues = issues.length > 0;
+
+	return (
+		<Card>
+			<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
+				<CardTitle className="text-base font-semibold inline-flex items-center gap-2">
+					<FileJson className="h-4 w-4 text-muted-foreground" aria-hidden />
+					Definition + triggers
+				</CardTitle>
+				<Button type="button" variant="outline" size="sm" onClick={handleFormat}>
+					<Code className="mr-2 h-3.5 w-3.5" />
+					Format
+				</Button>
+			</CardHeader>
+			<CardContent className="space-y-4">
+				<textarea
+					value={text}
+					onChange={(e) => setText(e.target.value)}
+					spellCheck={false}
+					rows={24}
+					className="w-full rounded-md border border-input bg-background px-3 py-2 text-xs font-mono text-foreground shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring resize-y min-h-[16rem]"
+					aria-label="Automation JSON"
+				/>
+
+				{hasIssues && (
+					<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>
+				)}
+
+				<div className="flex items-center justify-end gap-2">
+					<Button type="button" onClick={handleSubmit} disabled={isPending} size="sm">
+						{isPending ? <Spinner size="xs" className="mr-2" /> : <Save className="mr-2 h-4 w-4" />}
+						Create automation
+					</Button>
+				</div>
+			</CardContent>
+		</Card>
+	);
+}

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

@@ -0,0 +1,42 @@
+"use client";
+import { ArrowLeft, MessageSquarePlus } from "lucide-react";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+
+interface AutomationNewHeaderProps {
+	searchSpaceId: number;
+}
+
+export function AutomationNewHeader({ searchSpaceId }: AutomationNewHeaderProps) {
+	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-1">
+					<h1 className="text-xl md:text-2xl font-semibold text-foreground">
+						New automation · raw JSON
+					</h1>
+					<p className="text-sm text-muted-foreground max-w-2xl">
+						Paste an ``AutomationCreate`` payload and submit. Validated against the schema before
+						save. Prefer natural language? Use chat instead.
+					</p>
+				</div>
+				<Button asChild variant="outline" size="sm">
+					<Link href={`/dashboard/${searchSpaceId}/new-chat`}>
+						<MessageSquarePlus className="mr-2 h-4 w-4" />
+						Switch to chat
+					</Link>
+				</Button>
+			</div>
+		</div>
+	);
+}

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

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

surfsense_web/lib/automations/default-template.ts

@@ -0,0 +1,44 @@
+/**
+ * Minimal valid ``AutomationCreate`` skeleton used to seed the raw-JSON
+ * create form. ``search_space_id`` is omitted on purpose — the form
+ * injects it from the route so users never have to know their id.
+ *
+ * The shape matches the Pydantic ``AutomationCreate`` model less the
+ * search_space_id field; Zod validates the merged payload before submit.
+ */
+export const DEFAULT_AUTOMATION_TEMPLATE = {
+	name: "My automation",
+	description: null,
+	definition: {
+		name: "My automation",
+		goal: null,
+		plan: [
+			{
+				step_id: "step_1",
+				action: "agent_task",
+				params: {
+					query: "Summarize new docs added to folder 12 since the last run.",
+				},
+			},
+		],
+		execution: {
+			timeout_seconds: 600,
+			max_retries: 2,
+			retry_backoff: "exponential",
+			concurrency: "drop_if_running",
+			on_failure: [],
+		},
+		metadata: { tags: [] },
+	},
+	triggers: [
+		{
+			type: "schedule",
+			params: {
+				cron: "0 9 * * 1-5",
+				timezone: "UTC",
+			},
+			static_inputs: {},
+			enabled: true,
+		},
+	],
+} as const;