feat(web): unified json viewer/editor + edit existing automation

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

@@ -11,9 +11,8 @@ interface AutomationDefinitionSectionProps {
 }
 
 /**
- * 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:
+ * The Definition card. Read view; editing happens on the sibling /edit
+ * route (Edit button in the header). 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

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

@@ -1,6 +1,6 @@
 "use client";
 import { useAtomValue } from "jotai";
-import { ArrowLeft, Pause, Play, Trash2 } from "lucide-react";
+import { ArrowLeft, Pause, Pencil, Play, Trash2 } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useCallback, useState } from "react";
@@ -82,6 +82,14 @@ export function AutomationDetailHeader({
 					</div>
 
 					<div className="flex items-center gap-2 shrink-0">
+						{canUpdate && (
+							<Button asChild type="button" variant="outline" size="sm">
+								<Link href={`/dashboard/${searchSpaceId}/automations/${automation.id}/edit`}>
+									<Pencil className="mr-2 h-4 w-4" />
+									Edit
+								</Link>
+							</Button>
+						)}
 						{canToggle && (
 							<Button
 								type="button"

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

@@ -1,4 +1,5 @@
 "use client";
+import { JsonView } from "@/components/json-view";
 import type { Inputs } from "@/contracts/types/automation.types";
 
 interface InputsSchemaPreviewProps {
@@ -6,15 +7,15 @@ interface InputsSchemaPreviewProps {
 }
 
 /**
- * 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.
+ * Read-only 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>
+		<div className="rounded-md bg-muted/40 px-3 py-2 max-h-72 overflow-auto">
+			<JsonView src={inputs.schema} collapsed={2} />
+		</div>
 	);
 }

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

@@ -1,5 +1,6 @@
 "use client";
 import { ArrowRightCircle, GitCommitHorizontal } from "lucide-react";
+import { JsonView } from "@/components/json-view";
 import type { PlanStep } from "@/contracts/types/automation.types";
 
 interface PlanStepCardProps {
@@ -54,9 +55,9 @@ export function PlanStepCard({ step, index }: PlanStepCardProps) {
 						<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 className="rounded-md bg-muted/40 px-3 py-2 overflow-auto">
+						<JsonView src={step.params} collapsed={1} />
+					</div>
 				</div>
 			</div>
 		</div>

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

@@ -1,5 +1,6 @@
 "use client";
 import { AlertCircle, FileOutput, GitCommitHorizontal, Package, Settings2 } from "lucide-react";
+import { JsonView } from "@/components/json-view";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useAutomationRun } from "@/hooks/use-automation-runs";
 
@@ -109,8 +110,8 @@ function Section({
 
 function JsonBlock({ value }: { value: unknown }) {
 	return (
-		<pre className="rounded-md bg-muted/40 px-3 py-2 text-[11px] font-mono text-foreground overflow-x-auto whitespace-pre-wrap break-words max-h-64">
-			{JSON.stringify(value, null, 2)}
-		</pre>
+		<div className="rounded-md bg-muted/40 px-3 py-2 max-h-64 overflow-auto">
+			<JsonView src={value} collapsed={1} />
+		</div>
 	);
 }

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

@@ -3,6 +3,7 @@ import { useAtomValue } from "jotai";
 import { CalendarClock, Clock, Trash2 } from "lucide-react";
 import { useState } from "react";
 import { updateTriggerMutationAtom } from "@/atoms/automations/automations-mutation.atoms";
+import { JsonView } from "@/components/json-view";
 import { Button } from "@/components/ui/button";
 import { Switch } from "@/components/ui/switch";
 import type { Trigger } from "@/contracts/types/automation.types";
@@ -109,9 +110,9 @@ export function TriggerCard({ trigger, automationId, canUpdate, canDelete }: Tri
 					{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 className="rounded-md bg-muted/40 px-3 py-2 overflow-auto">
+								<JsonView src={trigger.static_inputs} collapsed={1} />
+							</div>
 						</div>
 					)}
 				</div>

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

@@ -0,0 +1,56 @@
+"use client";
+import { ShieldAlert } from "lucide-react";
+import { useAutomation } from "@/hooks/use-automation";
+import { useAutomationPermissions } from "../../hooks/use-automation-permissions";
+import { AutomationDetailLoading } from "../components/automation-detail-loading";
+import { AutomationNotFound } from "../components/automation-not-found";
+import { AutomationEditForm } from "./components/automation-edit-form";
+
+interface AutomationEditContentProps {
+	searchSpaceId: number;
+	automationId: number;
+}
+
+/**
+ * Client orchestrator for the edit route. Mirrors detail-content's branch
+ * structure but gates on ``canUpdate`` instead of ``canRead``: a user who
+ * can read but not update is bounced to the access-denied panel.
+ */
+export function AutomationEditContent({
+	searchSpaceId,
+	automationId,
+}: AutomationEditContentProps) {
+	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.canUpdate) {
+		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 edit 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 <AutomationEditForm automation={automation} searchSpaceId={searchSpaceId} />;
+}

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

@@ -0,0 +1,121 @@
+"use client";
+import { useAtomValue } from "jotai";
+import { AlertCircle, ArrowLeft, Save } from "lucide-react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { updateAutomationMutationAtom } from "@/atoms/automations/automations-mutation.atoms";
+import { JsonView } from "@/components/json-view";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Spinner } from "@/components/ui/spinner";
+import {
+	type Automation,
+	automationUpdateRequest,
+} from "@/contracts/types/automation.types";
+
+interface AutomationEditFormProps {
+	automation: Automation;
+	searchSpaceId: number;
+}
+
+/**
+ * Edit-existing-automation form. Surfaces the four mutable fields
+ * (name, description, status, definition) as one editable JSON tree;
+ * triggers stay on the detail page where they have their own management
+ * UI. Validates with the same Zod schema the API expects, then PATCHes
+ * the changed shape back.
+ */
+export function AutomationEditForm({ automation, searchSpaceId }: AutomationEditFormProps) {
+	const router = useRouter();
+	const { mutateAsync: updateAutomation, isPending } = useAtomValue(updateAutomationMutationAtom);
+	const detailHref = `/dashboard/${searchSpaceId}/automations/${automation.id}`;
+
+	const [value, setValue] = useState(() => ({
+		name: automation.name,
+		description: automation.description ?? null,
+		status: automation.status,
+		definition: automation.definition,
+	}));
+	const [issues, setIssues] = useState<string[]>([]);
+
+	async function handleSave() {
+		setIssues([]);
+		const result = automationUpdateRequest.safeParse(value);
+		if (!result.success) {
+			setIssues(
+				result.error.issues.map((issue) => `${issue.path.join(".") || "(root)"}: ${issue.message}`)
+			);
+			return;
+		}
+		try {
+			await updateAutomation({ automationId: automation.id, patch: result.data });
+			router.push(detailHref);
+		} catch (err) {
+			setIssues([(err as Error).message ?? "Update failed"]);
+		}
+	}
+
+	return (
+		<>
+			<div className="space-y-3">
+				<Button asChild variant="ghost" size="sm" className="-ml-2 h-auto px-2 py-1">
+					<Link href={detailHref} className="text-xs text-muted-foreground">
+						<ArrowLeft className="mr-1.5 h-3.5 w-3.5" />
+						Back to automation
+					</Link>
+				</Button>
+				<div>
+					<h1 className="text-xl md:text-2xl font-semibold text-foreground break-words">
+						Edit automation
+					</h1>
+					<p className="text-sm text-muted-foreground mt-1">{automation.name}</p>
+				</div>
+			</div>
+
+			<Card className="border-border/60 bg-accent">
+				<CardHeader className="pb-4">
+					<CardTitle className="text-base font-semibold">Definition</CardTitle>
+				</CardHeader>
+				<CardContent className="space-y-4">
+					<div className="rounded-md border border-input bg-background px-3 py-2 max-h-[36rem] overflow-auto">
+						<JsonView
+							src={value}
+							editable
+							onChange={(next) => setValue(next as typeof value)}
+							collapsed={false}
+						/>
+					</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>
+					)}
+
+					<div className="flex items-center justify-end gap-2">
+						<Button asChild type="button" variant="ghost" size="sm">
+							<Link href={detailHref}>Cancel</Link>
+						</Button>
+						<Button type="button" onClick={handleSave} disabled={isPending} size="sm">
+							{isPending ? (
+								<Spinner size="xs" className="mr-2" />
+							) : (
+								<Save className="mr-2 h-4 w-4" />
+							)}
+							Save changes
+						</Button>
+					</div>
+				</CardContent>
+			</Card>
+		</>
+	);
+}

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

@@ -0,0 +1,18 @@
+import { AutomationEditContent } from "./automation-edit-content";
+
+export default async function AutomationEditPage({
+	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">
+			<AutomationEditContent
+				searchSpaceId={Number(search_space_id)}
+				automationId={Number(automation_id)}
+			/>
+		</div>
+	);
+}

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

@@ -1,9 +1,10 @@
 "use client";
 import { useAtomValue } from "jotai";
-import { AlertCircle, Code, FileJson, Save } from "lucide-react";
+import { AlertCircle, FileJson, Save } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { createAutomationMutationAtom } from "@/atoms/automations/automations-mutation.atoms";
+import { JsonView } from "@/components/json-view";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Spinner } from "@/components/ui/spinner";
@@ -17,45 +18,24 @@ interface AutomationJsonFormProps {
 /**
  * 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
+ *   edit tree → 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.
+ * ``search_space_id`` is injected here rather than required in the edited
+ * tree — 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 [value, setValue] = useState<Record<string, unknown>>(
+		() => DEFAULT_AUTOMATION_TEMPLATE as Record<string, unknown>
+	);
 	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 payload = { ...value, search_space_id: searchSpaceId };
 		const result = automationCreateRequest.safeParse(payload);
 		if (!result.success) {
 			setIssues(
@@ -76,25 +56,21 @@ export function AutomationJsonForm({ searchSpaceId }: AutomationJsonFormProps) {
 
 	return (
 		<Card className="border-border/60 bg-accent">
-			<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
+			<CardHeader className="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"
-				/>
+				<div className="rounded-md border border-input bg-background px-3 py-2 max-h-[32rem] overflow-auto">
+					<JsonView
+						src={value}
+						editable
+						onChange={(next) => setValue(next as Record<string, unknown>)}
+						collapsed={false}
+					/>
+				</div>
 
 				{hasIssues && (
 					<div className="rounded-md border border-destructive/40 bg-destructive/5 px-3 py-2">