From 6481dd9f83dc9208ab60c1e60c80d743607d6524 Mon Sep 17 00:00:00 2001
From: Cascade Bot <bot@cascade.dev>
Date: Sun, 1 Mar 2026 11:24:05 +0000
Subject: [PATCH 1/5] feat(settings): replace dialog with full-screen agent
 definition editor

Replace the narrow AgentDefinitionFormDialog modal with a full-page
AgentDefinitionEditor component that follows the existing PromptEditor
pattern. The editor has three tabs: Definition (form fields), System
Prompt (prompt editing, edit mode only), and Raw JSON. Remove the
separate Prompts tab from the definitions page since prompt editing is
now integrated into the editor. Update AgentDefinitionsTable to accept
an onEdit callback instead of managing internal dialog state.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../settings/agent-definition-editor.tsx      | 932 ++++++++++++++++++
 .../settings/agent-definition-table.tsx       | 223 ++---
 web/src/components/settings/prompt-editor.tsx |   2 +-
 web/src/routes/settings/definitions.tsx       | 113 +--
 4 files changed, 1088 insertions(+), 182 deletions(-)
 create mode 100644 web/src/components/settings/agent-definition-editor.tsx

diff --git a/web/src/components/settings/agent-definition-editor.tsx b/web/src/components/settings/agent-definition-editor.tsx
new file mode 100644
index 00000000..97a9dc53
--- /dev/null
+++ b/web/src/components/settings/agent-definition-editor.tsx
@@ -0,0 +1,932 @@
+import type { AppRouter } from '@/../../src/api/router.js';
+import { Badge } from '@/components/ui/badge.js';
+import { Input } from '@/components/ui/input.js';
+import { Label } from '@/components/ui/label.js';
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from '@/components/ui/select.js';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs.js';
+import { Textarea } from '@/components/ui/textarea.js';
+import { trpc, trpcClient } from '@/lib/trpc.js';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import type { inferRouterOutputs } from '@trpc/server';
+import { useEffect, useState } from 'react';
+import { ReferencePanel } from './prompt-editor.js';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Types
+// ─────────────────────────────────────────────────────────────────────────────
+
+type RouterOutput = inferRouterOutputs<AppRouter>;
+type DefinitionRow = RouterOutput['agentDefinitions']['list'][number];
+type AgentDefinition = DefinitionRow['definition'];
+
+export interface AgentDefinitionEditorProps {
+	/** When provided, we are editing an existing definition. When undefined, we are creating a new one. */
+	existing?: DefinitionRow;
+	onClose: () => void;
+}
+
+interface SchemaData {
+	toolSetNames: readonly string[];
+	sdkToolsNames: readonly string[];
+	contextStepNames: readonly string[];
+	taskPromptBuilderNames: readonly string[];
+	gadgetBuilderNames: readonly string[];
+	compactionNames: readonly string[];
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Helper components (shared with form dialog)
+// ─────────────────────────────────────────────────────────────────────────────
+
+function Toggle({
+	checked,
+	onChange,
+	label,
+}: {
+	checked: boolean;
+	onChange: (v: boolean) => void;
+	label: string;
+}) {
+	return (
+		<div className="flex cursor-pointer select-none items-center gap-2">
+			<button
+				type="button"
+				role="switch"
+				aria-checked={checked}
+				aria-label={label}
+				onClick={() => onChange(!checked)}
+				className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${
+					checked ? 'bg-primary' : 'bg-input'
+				}`}
+			>
+				<span
+					className={`inline-block h-3.5 w-3.5 transform rounded-full bg-white shadow transition-transform ${
+						checked ? 'translate-x-4.5' : 'translate-x-0.5'
+					}`}
+				/>
+			</button>
+			<span className="text-sm">{label}</span>
+		</div>
+	);
+}
+
+function MultiSelectBadges({
+	available,
+	selected,
+	onChange,
+}: {
+	available: readonly string[];
+	selected: string[];
+	onChange: (v: string[]) => void;
+}) {
+	const toggle = (item: string) => {
+		if (selected.includes(item)) {
+			onChange(selected.filter((s) => s !== item));
+		} else {
+			onChange([...selected, item]);
+		}
+	};
+	return (
+		<div className="flex flex-wrap gap-1.5">
+			{available.map((item) => (
+				<button
+					key={item}
+					type="button"
+					onClick={() => toggle(item)}
+					className="focus:outline-none"
+				>
+					<Badge
+						variant={selected.includes(item) ? 'default' : 'outline'}
+						className="cursor-pointer text-xs hover:opacity-80"
+					>
+						{item}
+					</Badge>
+				</button>
+			))}
+		</div>
+	);
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Form section sub-components
+// ─────────────────────────────────────────────────────────────────────────────
+
+function IdentitySection({
+	def,
+	setIdentity,
+}: {
+	def: AgentDefinition;
+	setIdentity: (k: keyof AgentDefinition['identity'], v: string) => void;
+}) {
+	return (
+		<section className="space-y-3">
+			<h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
+				Identity
+			</h3>
+			<div className="grid grid-cols-2 gap-3">
+				<div className="space-y-1">
+					<Label htmlFor="ad-emoji">Emoji</Label>
+					<Input
+						id="ad-emoji"
+						value={def.identity.emoji}
+						onChange={(e) => setIdentity('emoji', e.target.value)}
+						placeholder="🤖"
+					/>
+				</div>
+				<div className="space-y-1">
+					<Label htmlFor="ad-label">Label</Label>
+					<Input
+						id="ad-label"
+						value={def.identity.label}
+						onChange={(e) => setIdentity('label', e.target.value)}
+						placeholder="My Agent"
+					/>
+				</div>
+			</div>
+			<div className="space-y-1">
+				<Label htmlFor="ad-roleHint">Role Hint</Label>
+				<Textarea
+					id="ad-roleHint"
+					value={def.identity.roleHint}
+					onChange={(e) => setIdentity('roleHint', e.target.value)}
+					rows={3}
+					placeholder="Describe the agent's role..."
+				/>
+			</div>
+			<div className="space-y-1">
+				<Label htmlFor="ad-initialMessage">Initial Message</Label>
+				<Textarea
+					id="ad-initialMessage"
+					value={def.identity.initialMessage}
+					onChange={(e) => setIdentity('initialMessage', e.target.value)}
+					rows={2}
+					placeholder="Starting message shown to the agent..."
+				/>
+			</div>
+		</section>
+	);
+}
+
+function CapabilitiesSection({
+	def,
+	setCap,
+}: {
+	def: AgentDefinition;
+	setCap: (k: keyof AgentDefinition['capabilities'], v: boolean) => void;
+}) {
+	return (
+		<section className="space-y-3">
+			<h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
+				Capabilities
+			</h3>
+			<div className="grid grid-cols-2 gap-2">
+				<Toggle
+					checked={def.capabilities.canEditFiles}
+					onChange={(v) => setCap('canEditFiles', v)}
+					label="Can Edit Files"
+				/>
+				<Toggle
+					checked={def.capabilities.canCreatePR}
+					onChange={(v) => setCap('canCreatePR', v)}
+					label="Can Create PR"
+				/>
+				<Toggle
+					checked={def.capabilities.canUpdateChecklists}
+					onChange={(v) => setCap('canUpdateChecklists', v)}
+					label="Can Update Checklists"
+				/>
+				<Toggle
+					checked={def.capabilities.isReadOnly}
+					onChange={(v) => setCap('isReadOnly', v)}
+					label="Is Read Only"
+				/>
+				<Toggle
+					checked={def.capabilities.canAccessEmail ?? false}
+					onChange={(v) => setCap('canAccessEmail', v)}
+					label="Can Access Email"
+				/>
+			</div>
+		</section>
+	);
+}
+
+function ToolsSection({
+	def,
+	setDef,
+	schema,
+}: {
+	def: AgentDefinition;
+	setDef: React.Dispatch<React.SetStateAction<AgentDefinition>>;
+	schema: SchemaData | undefined;
+}) {
+	return (
+		<section className="space-y-3">
+			<h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">Tools</h3>
+			<div className="space-y-2">
+				<Label>Tool Sets</Label>
+				{schema ? (
+					<MultiSelectBadges
+						available={schema.toolSetNames}
+						selected={def.tools.sets}
+						onChange={(sets) =>
+							setDef((d) => ({ ...d, tools: { ...d.tools, sets } }) as AgentDefinition)
+						}
+					/>
+				) : (
+					<div className="text-sm text-muted-foreground">Loading...</div>
+				)}
+			</div>
+			<div className="space-y-1">
+				<Label>SDK Tools</Label>
+				<Select
+					value={def.tools.sdkTools}
+					onValueChange={(v) =>
+						setDef((d) => ({ ...d, tools: { ...d.tools, sdkTools: v } }) as AgentDefinition)
+					}
+				>
+					<SelectTrigger className="w-full">
+						<SelectValue />
+					</SelectTrigger>
+					<SelectContent>
+						{(schema?.sdkToolsNames ?? ['all', 'readOnly']).map((n) => (
+							<SelectItem key={n} value={n}>
+								{n}
+							</SelectItem>
+						))}
+					</SelectContent>
+				</Select>
+			</div>
+		</section>
+	);
+}
+
+function StrategiesSection({
+	def,
+	setDef,
+	schema,
+}: {
+	def: AgentDefinition;
+	setDef: React.Dispatch<React.SetStateAction<AgentDefinition>>;
+	schema: SchemaData | undefined;
+}) {
+	return (
+		<section className="space-y-3">
+			<h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
+				Strategies
+			</h3>
+			<div className="space-y-2">
+				<Label>Context Pipeline</Label>
+				{schema ? (
+					<MultiSelectBadges
+						available={schema.contextStepNames}
+						selected={def.strategies.contextPipeline}
+						onChange={(contextPipeline) =>
+							setDef(
+								(d) =>
+									({ ...d, strategies: { ...d.strategies, contextPipeline } }) as AgentDefinition,
+							)
+						}
+					/>
+				) : (
+					<div className="text-sm text-muted-foreground">Loading...</div>
+				)}
+			</div>
+			<div className="grid grid-cols-2 gap-3">
+				<div className="space-y-1">
+					<Label>Task Prompt Builder</Label>
+					<Select
+						value={def.strategies.taskPromptBuilder}
+						onValueChange={(v) =>
+							setDef(
+								(d) =>
+									({
+										...d,
+										strategies: { ...d.strategies, taskPromptBuilder: v },
+									}) as AgentDefinition,
+							)
+						}
+					>
+						<SelectTrigger className="w-full">
+							<SelectValue />
+						</SelectTrigger>
+						<SelectContent>
+							{(schema?.taskPromptBuilderNames ?? []).map((n) => (
+								<SelectItem key={n} value={n}>
+									{n}
+								</SelectItem>
+							))}
+						</SelectContent>
+					</Select>
+				</div>
+				<div className="space-y-1">
+					<Label>Gadget Builder</Label>
+					<Select
+						value={def.strategies.gadgetBuilder}
+						onValueChange={(v) =>
+							setDef(
+								(d) =>
+									({ ...d, strategies: { ...d.strategies, gadgetBuilder: v } }) as AgentDefinition,
+							)
+						}
+					>
+						<SelectTrigger className="w-full">
+							<SelectValue />
+						</SelectTrigger>
+						<SelectContent>
+							{(schema?.gadgetBuilderNames ?? []).map((n) => (
+								<SelectItem key={n} value={n}>
+									{n}
+								</SelectItem>
+							))}
+						</SelectContent>
+					</Select>
+				</div>
+			</div>
+		</section>
+	);
+}
+
+function BackendSection({
+	def,
+	setBackend,
+}: {
+	def: AgentDefinition;
+	setBackend: (k: keyof AgentDefinition['backend'], v: unknown) => void;
+}) {
+	return (
+		<section className="space-y-3">
+			<h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
+				Backend
+			</h3>
+			<div className="grid grid-cols-2 gap-2">
+				<Toggle
+					checked={def.backend.enableStopHooks}
+					onChange={(v) => setBackend('enableStopHooks', v)}
+					label="Enable Stop Hooks"
+				/>
+				<Toggle
+					checked={def.backend.needsGitHubToken}
+					onChange={(v) => setBackend('needsGitHubToken', v)}
+					label="Needs GitHub Token"
+				/>
+				<Toggle
+					checked={def.backend.blockGitPush ?? false}
+					onChange={(v) => setBackend('blockGitPush', v)}
+					label="Block Git Push"
+				/>
+				<Toggle
+					checked={def.backend.requiresPR ?? false}
+					onChange={(v) => setBackend('requiresPR', v)}
+					label="Requires PR"
+				/>
+			</div>
+			<div className="grid grid-cols-2 gap-3">
+				<div className="space-y-1">
+					<Label>Pre-Execute Hook</Label>
+					<Select
+						value={def.backend.preExecute ?? '_none'}
+						onValueChange={(v) => setBackend('preExecute', v === '_none' ? undefined : v)}
+					>
+						<SelectTrigger className="w-full">
+							<SelectValue placeholder="None" />
+						</SelectTrigger>
+						<SelectContent>
+							<SelectItem value="_none">None</SelectItem>
+							<SelectItem value="postInitialPRComment">postInitialPRComment</SelectItem>
+						</SelectContent>
+					</Select>
+				</div>
+				<div className="space-y-1">
+					<Label>Post-Configure Hook</Label>
+					<Select
+						value={def.backend.postConfigure ?? '_none'}
+						onValueChange={(v) => setBackend('postConfigure', v === '_none' ? undefined : v)}
+					>
+						<SelectTrigger className="w-full">
+							<SelectValue placeholder="None" />
+						</SelectTrigger>
+						<SelectContent>
+							<SelectItem value="_none">None</SelectItem>
+							<SelectItem value="sequentialGadgetExecution">sequentialGadgetExecution</SelectItem>
+						</SelectContent>
+					</Select>
+				</div>
+			</div>
+		</section>
+	);
+}
+
+function TrailingMessageSection({
+	def,
+	setTrailing,
+}: {
+	def: AgentDefinition;
+	setTrailing: (k: string, v: boolean) => void;
+}) {
+	return (
+		<section className="space-y-3">
+			<h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
+				Trailing Message
+			</h3>
+			<div className="grid grid-cols-2 gap-2">
+				<Toggle
+					checked={def.trailingMessage?.includeDiagnostics ?? false}
+					onChange={(v) => setTrailing('includeDiagnostics', v)}
+					label="Include Diagnostics"
+				/>
+				<Toggle
+					checked={def.trailingMessage?.includeTodoProgress ?? false}
+					onChange={(v) => setTrailing('includeTodoProgress', v)}
+					label="Include Todo Progress"
+				/>
+				<Toggle
+					checked={def.trailingMessage?.includeGitStatus ?? false}
+					onChange={(v) => setTrailing('includeGitStatus', v)}
+					label="Include Git Status"
+				/>
+				<Toggle
+					checked={def.trailingMessage?.includePRStatus ?? false}
+					onChange={(v) => setTrailing('includePRStatus', v)}
+					label="Include PR Status"
+				/>
+				<Toggle
+					checked={def.trailingMessage?.includeReminder ?? false}
+					onChange={(v) => setTrailing('includeReminder', v)}
+					label="Include Reminder"
+				/>
+			</div>
+		</section>
+	);
+}
+
+function IntegrationsSection({
+	def,
+	setDef,
+}: {
+	def: AgentDefinition;
+	setDef: React.Dispatch<React.SetStateAction<AgentDefinition>>;
+}) {
+	const integrationOptions = ['pm', 'scm', 'email', 'sms'] as const;
+	return (
+		<section className="space-y-3">
+			<h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
+				Integrations
+			</h3>
+			<div className="space-y-2">
+				<Label>Required</Label>
+				<MultiSelectBadges
+					available={integrationOptions}
+					selected={def.integrations.required}
+					onChange={(required) =>
+						setDef(
+							(d) => ({ ...d, integrations: { ...d.integrations, required } }) as AgentDefinition,
+						)
+					}
+				/>
+			</div>
+			<div className="space-y-2">
+				<Label>Optional</Label>
+				<MultiSelectBadges
+					available={integrationOptions}
+					selected={def.integrations.optional}
+					onChange={(optional) =>
+						setDef(
+							(d) => ({ ...d, integrations: { ...d.integrations, optional } }) as AgentDefinition,
+						)
+					}
+				/>
+			</div>
+		</section>
+	);
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// System Prompt panel (edit mode only)
+// ─────────────────────────────────────────────────────────────────────────────
+
+function SystemPromptPanel({ agentType }: { agentType: string }) {
+	const queryClient = useQueryClient();
+	const [content, setContent] = useState('');
+	const [validationStatus, setValidationStatus] = useState<string | null>(null);
+
+	const definitionQuery = useQuery(trpc.agentDefinitions.get.queryOptions({ agentType }));
+	const defaultQuery = useQuery(trpc.prompts.getDefault.queryOptions({ agentType }));
+	const variablesQuery = useQuery(trpc.prompts.variables.queryOptions());
+	const partialsQuery = useQuery(trpc.prompts.listPartials.queryOptions());
+
+	const definition = definitionQuery.data?.definition;
+	const hasCustom = !!definition?.prompts?.systemPrompt;
+
+	useEffect(() => {
+		if (definition?.prompts?.systemPrompt) {
+			setContent(definition.prompts.systemPrompt);
+		} else if (defaultQuery.data) {
+			setContent(defaultQuery.data.content);
+		}
+	}, [definition?.prompts?.systemPrompt, defaultQuery.data]);
+
+	const saveMutation = useMutation({
+		mutationFn: async () => {
+			await trpcClient.agentDefinitions.updatePrompt.mutate({
+				agentType,
+				systemPrompt: content,
+			});
+		},
+		onSuccess: () => {
+			queryClient.invalidateQueries({
+				queryKey: trpc.agentDefinitions.get.queryOptions({ agentType }).queryKey,
+			});
+			queryClient.invalidateQueries({
+				queryKey: trpc.agentDefinitions.list.queryOptions().queryKey,
+			});
+			setValidationStatus('Saved.');
+		},
+	});
+
+	const resetMutation = useMutation({
+		mutationFn: async () => {
+			await trpcClient.agentDefinitions.resetPrompt.mutate({ agentType });
+		},
+		onSuccess: () => {
+			queryClient.invalidateQueries({
+				queryKey: trpc.agentDefinitions.get.queryOptions({ agentType }).queryKey,
+			});
+			queryClient.invalidateQueries({
+				queryKey: trpc.agentDefinitions.list.queryOptions().queryKey,
+			});
+			if (defaultQuery.data) {
+				setContent(defaultQuery.data.content);
+			}
+			setValidationStatus('Reset to default.');
+		},
+	});
+
+	const validateMutation = useMutation({
+		mutationFn: () => trpcClient.prompts.validate.mutate({ template: content }),
+		onSuccess: (result) => {
+			if (result.valid) {
+				setValidationStatus('Valid.');
+			} else {
+				setValidationStatus(`Invalid: ${result.error}`);
+			}
+		},
+	});
+
+	function loadDefault() {
+		if (defaultQuery.data) {
+			setContent(defaultQuery.data.content);
+			setValidationStatus(null);
+		}
+	}
+
+	return (
+		<div className="space-y-4">
+			<div className="flex items-center justify-between">
+				<div className="flex items-center gap-2">
+					<span className="text-sm text-muted-foreground">
+						System prompt for <span className="font-mono font-medium">{agentType}</span>
+					</span>
+					{hasCustom && <Badge>custom</Badge>}
+				</div>
+				<div className="flex gap-2">
+					<button
+						type="button"
+						onClick={() => resetMutation.mutate()}
+						disabled={!hasCustom || resetMutation.isPending}
+						className="inline-flex h-9 items-center rounded-md border border-input px-4 text-sm hover:bg-accent disabled:opacity-50"
+					>
+						Reset to Default
+					</button>
+					<button
+						type="button"
+						onClick={() => saveMutation.mutate()}
+						disabled={saveMutation.isPending}
+						className="inline-flex h-9 items-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
+					>
+						{saveMutation.isPending ? 'Saving...' : 'Save Prompt'}
+					</button>
+				</div>
+			</div>
+
+			<div className="grid grid-cols-3 gap-4">
+				<div className="col-span-2 space-y-2">
+					<textarea
+						value={content}
+						onChange={(e) => {
+							setContent(e.target.value);
+							setValidationStatus(null);
+						}}
+						className="w-full h-[500px] rounded-md border border-input bg-background px-3 py-2 text-sm font-mono resize-y focus:outline-none focus:ring-2 focus:ring-ring"
+						spellCheck={false}
+					/>
+					<div className="flex items-center gap-4">
+						<button
+							type="button"
+							onClick={loadDefault}
+							className="text-sm text-muted-foreground hover:text-foreground"
+						>
+							Load Default
+						</button>
+						<button
+							type="button"
+							onClick={() => validateMutation.mutate()}
+							disabled={validateMutation.isPending}
+							className="text-sm text-muted-foreground hover:text-foreground"
+						>
+							Validate
+						</button>
+						{validationStatus && (
+							<span
+								className={`text-sm ${
+									validationStatus.startsWith('Invalid')
+										? 'text-destructive'
+										: 'text-green-600 dark:text-green-400'
+								}`}
+							>
+								{validationStatus}
+							</span>
+						)}
+						{saveMutation.isError && (
+							<span className="text-sm text-destructive">{saveMutation.error.message}</span>
+						)}
+					</div>
+				</div>
+
+				<ReferencePanel variables={variablesQuery.data} partials={partialsQuery.data} />
+			</div>
+		</div>
+	);
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Default empty definition for "create" mode
+// ─────────────────────────────────────────────────────────────────────────────
+
+const EMPTY_DEFINITION: AgentDefinition = {
+	identity: { emoji: '🤖', label: '', roleHint: '', initialMessage: '' },
+	capabilities: {
+		canEditFiles: false,
+		canCreatePR: false,
+		canUpdateChecklists: false,
+		isReadOnly: true,
+		canAccessEmail: false,
+	},
+	tools: { sets: [], sdkTools: 'readOnly' },
+	strategies: {
+		contextPipeline: [],
+		taskPromptBuilder: 'workItem',
+		gadgetBuilder: 'workItem',
+	},
+	backend: { enableStopHooks: false, needsGitHubToken: false },
+	compaction: 'default',
+	hint: '',
+	trailingMessage: undefined,
+	integrations: { required: ['pm'], optional: [] },
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Main full-screen editor component
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function AgentDefinitionEditor({ existing, onClose }: AgentDefinitionEditorProps) {
+	const queryClient = useQueryClient();
+	const isEdit = !!existing;
+
+	const schemaQuery = useQuery(trpc.agentDefinitions.schema.queryOptions());
+	const schema = schemaQuery.data;
+
+	// ── local state ──────────────────────────────────────────────────────────
+	const [agentType, setAgentType] = useState(existing?.agentType ?? '');
+	const [def, setDef] = useState<AgentDefinition>(existing?.definition ?? EMPTY_DEFINITION);
+	const [jsonText, setJsonText] = useState(
+		existing
+			? JSON.stringify(existing.definition, null, 2)
+			: JSON.stringify(EMPTY_DEFINITION, null, 2),
+	);
+	const [jsonError, setJsonError] = useState<string | null>(null);
+	const [activeTab, setActiveTab] = useState('definition');
+
+	// ── helpers ───────────────────────────────────────────────────────────────
+	const queryKey = trpc.agentDefinitions.list.queryOptions().queryKey;
+
+	const onSuccess = () => {
+		queryClient.invalidateQueries({ queryKey });
+		onClose();
+	};
+
+	const createMutation = useMutation({
+		mutationFn: (params: { agentType: string; definition: AgentDefinition }) =>
+			trpcClient.agentDefinitions.create.mutate(params),
+		onSuccess,
+	});
+
+	const updateMutation = useMutation({
+		mutationFn: (params: { agentType: string; patch: AgentDefinition }) =>
+			trpcClient.agentDefinitions.update.mutate(params),
+		onSuccess,
+	});
+
+	const activeMutation = isEdit ? updateMutation : createMutation;
+
+	const handleTabChange = (tab: string) => {
+		if (tab === 'json' && activeTab === 'definition') {
+			setJsonText(JSON.stringify(def, null, 2));
+			setJsonError(null);
+		}
+		if (tab === 'definition' && activeTab === 'json') {
+			// sync json -> form silently
+			try {
+				const parsed = JSON.parse(jsonText) as AgentDefinition;
+				setDef(parsed);
+				setJsonError(null);
+			} catch {
+				// leave form as-is if JSON is invalid
+			}
+		}
+		setActiveTab(tab);
+	};
+
+	const handleSubmit = (e: React.FormEvent) => {
+		e.preventDefault();
+		let submission = def;
+		if (activeTab === 'json') {
+			try {
+				submission = JSON.parse(jsonText) as AgentDefinition;
+				setDef(submission);
+				setJsonError(null);
+			} catch (err) {
+				setJsonError((err as Error).message);
+				return;
+			}
+		}
+		if (isEdit) {
+			updateMutation.mutate({ agentType: existing.agentType, patch: submission });
+		} else {
+			createMutation.mutate({ agentType, definition: submission });
+		}
+	};
+
+	// ── field helpers ─────────────────────────────────────────────────────────
+	const setIdentity = (k: keyof AgentDefinition['identity'], v: string) =>
+		setDef((d) => ({ ...d, identity: { ...d.identity, [k]: v } }));
+
+	const setCap = (k: keyof AgentDefinition['capabilities'], v: boolean) =>
+		setDef((d) => ({ ...d, capabilities: { ...d.capabilities, [k]: v } }));
+
+	const setBackend = (k: keyof AgentDefinition['backend'], v: unknown) =>
+		setDef((d) => ({ ...d, backend: { ...d.backend, [k]: v } }));
+
+	const setTrailing = (k: string, v: boolean) =>
+		setDef((d) => ({ ...d, trailingMessage: { ...(d.trailingMessage ?? {}), [k]: v } }));
+
+	// ─────────────────────────────────────────────────────────────────────────
+	return (
+		<div className="space-y-6">
+			{/* Header */}
+			<div className="flex items-center justify-between">
+				<div>
+					<h2 className="text-xl font-bold">
+						{isEdit ? (
+							<>
+								{existing.definition.identity.emoji}{' '}
+								<span className="font-mono">{existing.agentType}</span>
+							</>
+						) : (
+							'New Agent Definition'
+						)}
+					</h2>
+					{isEdit && (
+						<p className="text-sm text-muted-foreground">{existing.definition.identity.label}</p>
+					)}
+				</div>
+				<div className="flex gap-2">
+					<button
+						type="button"
+						onClick={onClose}
+						className="inline-flex h-9 items-center rounded-md border border-input px-4 text-sm hover:bg-accent"
+					>
+						Cancel
+					</button>
+					{/* Save is only shown for Definition / Raw JSON tabs (not System Prompt which has its own save) */}
+					{activeTab !== 'prompt' && (
+						<button
+							type="button"
+							onClick={(e) => handleSubmit(e as unknown as React.FormEvent)}
+							disabled={activeMutation.isPending}
+							className="inline-flex h-9 items-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
+						>
+							{activeMutation.isPending ? 'Saving...' : isEdit ? 'Update' : 'Create'}
+						</button>
+					)}
+				</div>
+			</div>
+
+			{/* Agent Type input for create mode */}
+			{!isEdit && (
+				<div className="space-y-2">
+					<Label htmlFor="ad-agentType">Agent Type</Label>
+					<Input
+						id="ad-agentType"
+						value={agentType}
+						onChange={(e) => setAgentType(e.target.value)}
+						placeholder="e.g. implementation, review, debug"
+						required
+					/>
+				</div>
+			)}
+
+			{activeMutation.isError && (
+				<p className="text-sm text-destructive">{activeMutation.error.message}</p>
+			)}
+
+			{/* Tabs */}
+			<Tabs value={activeTab} onValueChange={handleTabChange}>
+				<TabsList>
+					<TabsTrigger value="definition">Definition</TabsTrigger>
+					{isEdit && <TabsTrigger value="prompt">System Prompt</TabsTrigger>}
+					<TabsTrigger value="json">Raw JSON</TabsTrigger>
+				</TabsList>
+
+				<TabsContent value="definition" className="space-y-6 pt-4">
+					<IdentitySection def={def} setIdentity={setIdentity} />
+					<CapabilitiesSection def={def} setCap={setCap} />
+					<ToolsSection def={def} setDef={setDef} schema={schema} />
+					<StrategiesSection def={def} setDef={setDef} schema={schema} />
+					<BackendSection def={def} setBackend={setBackend} />
+
+					<section className="space-y-3">
+						<h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
+							Compaction
+						</h3>
+						<div className="space-y-1">
+							<Label>Compaction Strategy</Label>
+							<Select
+								value={def.compaction}
+								onValueChange={(v) => setDef((d) => ({ ...d, compaction: v }) as AgentDefinition)}
+							>
+								<SelectTrigger className="w-full">
+									<SelectValue />
+								</SelectTrigger>
+								<SelectContent>
+									{(schema?.compactionNames ?? ['implementation', 'default']).map((n) => (
+										<SelectItem key={n} value={n}>
+											{n}
+										</SelectItem>
+									))}
+								</SelectContent>
+							</Select>
+						</div>
+					</section>
+
+					<section className="space-y-3">
+						<h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
+							Hint
+						</h3>
+						<div className="space-y-1">
+							<Label htmlFor="ad-hint">Hint Text</Label>
+							<Textarea
+								id="ad-hint"
+								value={def.hint}
+								onChange={(e) => setDef((d) => ({ ...d, hint: e.target.value }))}
+								rows={2}
+								placeholder="Optional hint shown in iteration messages..."
+							/>
+						</div>
+					</section>
+
+					<TrailingMessageSection def={def} setTrailing={setTrailing} />
+					<IntegrationsSection def={def} setDef={setDef} />
+				</TabsContent>
+
+				{isEdit && (
+					<TabsContent value="prompt" className="pt-4">
+						<SystemPromptPanel agentType={existing.agentType} />
+					</TabsContent>
+				)}
+
+				<TabsContent value="json" className="space-y-2 pt-4">
+					<p className="text-sm text-muted-foreground">
+						Edit the raw JSON. Changes here are applied when you save.
+					</p>
+					<Textarea
+						value={jsonText}
+						onChange={(e) => {
+							setJsonText(e.target.value);
+							setJsonError(null);
+						}}
+						rows={30}
+						className="font-mono text-xs"
+						spellCheck={false}
+					/>
+					{jsonError && <p className="text-sm text-destructive">JSON parse error: {jsonError}</p>}
+				</TabsContent>
+			</Tabs>
+		</div>
+	);
+}
diff --git a/web/src/components/settings/agent-definition-table.tsx b/web/src/components/settings/agent-definition-table.tsx
index 272c8ad4..d0413663 100644
--- a/web/src/components/settings/agent-definition-table.tsx
+++ b/web/src/components/settings/agent-definition-table.tsx
@@ -12,15 +12,20 @@ import { trpc, trpcClient } from '@/lib/trpc.js';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import type { inferRouterOutputs } from '@trpc/server';
 import { Pencil, RotateCcw, Trash2 } from 'lucide-react';
-import { useState } from 'react';
-import { AgentDefinitionFormDialog } from './agent-definition-form.js';
 
 type RouterOutput = inferRouterOutputs<AppRouter>;
 type DefinitionRow = RouterOutput['agentDefinitions']['list'][number];
 
-export function AgentDefinitionsTable({ definitions }: { definitions: DefinitionRow[] }) {
+export type { DefinitionRow };
+
+export function AgentDefinitionsTable({
+	definitions,
+	onEdit,
+}: {
+	definitions: DefinitionRow[];
+	onEdit: (def: DefinitionRow) => void;
+}) {
 	const queryClient = useQueryClient();
-	const [editDef, setEditDef] = useState<DefinitionRow | null>(null);
 
 	const queryKey = trpc.agentDefinitions.list.queryOptions().queryKey;
 
@@ -39,123 +44,113 @@ export function AgentDefinitionsTable({ definitions }: { definitions: Definition
 	});
 
 	return (
-		<>
-			<div className="overflow-hidden rounded-lg border border-border">
-				<Table>
-					<TableHeader>
+		<div className="overflow-hidden rounded-lg border border-border">
+			<Table>
+				<TableHeader>
+					<TableRow>
+						<TableHead>Emoji</TableHead>
+						<TableHead>Agent Type</TableHead>
+						<TableHead>Label</TableHead>
+						<TableHead>Capabilities</TableHead>
+						<TableHead>Type</TableHead>
+						<TableHead className="w-24" />
+					</TableRow>
+				</TableHeader>
+				<TableBody>
+					{definitions.length === 0 && (
 						<TableRow>
-							<TableHead>Emoji</TableHead>
-							<TableHead>Agent Type</TableHead>
-							<TableHead>Label</TableHead>
-							<TableHead>Capabilities</TableHead>
-							<TableHead>Type</TableHead>
-							<TableHead className="w-24" />
+							<TableCell colSpan={6} className="text-center text-muted-foreground py-8">
+								No agent definitions found
+							</TableCell>
 						</TableRow>
-					</TableHeader>
-					<TableBody>
-						{definitions.length === 0 && (
-							<TableRow>
-								<TableCell colSpan={6} className="text-center text-muted-foreground py-8">
-									No agent definitions found
-								</TableCell>
-							</TableRow>
-						)}
-						{definitions.map((row) => (
-							<TableRow key={row.agentType}>
-								<TableCell className="text-lg">{row.definition.identity.emoji}</TableCell>
-								<TableCell className="font-medium font-mono text-sm">{row.agentType}</TableCell>
-								<TableCell>{row.definition.identity.label}</TableCell>
-								<TableCell>
-									<div className="flex flex-wrap gap-1">
-										{row.definition.capabilities.canEditFiles && (
-											<Badge variant="secondary" className="text-xs">
-												edit files
-											</Badge>
-										)}
-										{row.definition.capabilities.canCreatePR && (
-											<Badge variant="secondary" className="text-xs">
-												create PR
-											</Badge>
-										)}
-										{row.definition.capabilities.canUpdateChecklists && (
-											<Badge variant="secondary" className="text-xs">
-												checklists
-											</Badge>
-										)}
-										{row.definition.capabilities.isReadOnly && (
-											<Badge variant="outline" className="text-xs">
-												read-only
-											</Badge>
-										)}
-										{row.definition.capabilities.canAccessEmail && (
-											<Badge variant="secondary" className="text-xs">
-												email
-											</Badge>
-										)}
-									</div>
-								</TableCell>
-								<TableCell>
-									{row.isBuiltin ? (
-										<Badge variant="default">Built-in</Badge>
-									) : (
-										<Badge variant="outline">Custom</Badge>
+					)}
+					{definitions.map((row) => (
+						<TableRow key={row.agentType}>
+							<TableCell className="text-lg">{row.definition.identity.emoji}</TableCell>
+							<TableCell className="font-medium font-mono text-sm">{row.agentType}</TableCell>
+							<TableCell>{row.definition.identity.label}</TableCell>
+							<TableCell>
+								<div className="flex flex-wrap gap-1">
+									{row.definition.capabilities.canEditFiles && (
+										<Badge variant="secondary" className="text-xs">
+											edit files
+										</Badge>
+									)}
+									{row.definition.capabilities.canCreatePR && (
+										<Badge variant="secondary" className="text-xs">
+											create PR
+										</Badge>
+									)}
+									{row.definition.capabilities.canUpdateChecklists && (
+										<Badge variant="secondary" className="text-xs">
+											checklists
+										</Badge>
+									)}
+									{row.definition.capabilities.isReadOnly && (
+										<Badge variant="outline" className="text-xs">
+											read-only
+										</Badge>
 									)}
-								</TableCell>
-								<TableCell>
-									<div className="flex gap-1">
+									{row.definition.capabilities.canAccessEmail && (
+										<Badge variant="secondary" className="text-xs">
+											email
+										</Badge>
+									)}
+								</div>
+							</TableCell>
+							<TableCell>
+								{row.isBuiltin ? (
+									<Badge variant="default">Built-in</Badge>
+								) : (
+									<Badge variant="outline">Custom</Badge>
+								)}
+							</TableCell>
+							<TableCell>
+								<div className="flex gap-1">
+									<button
+										type="button"
+										onClick={() => onEdit(row)}
+										className="p-1 text-muted-foreground hover:text-foreground"
+										title="Edit definition"
+									>
+										<Pencil className="h-4 w-4" />
+									</button>
+									{row.isBuiltin && (
 										<button
 											type="button"
-											onClick={() => setEditDef(row)}
+											onClick={() => {
+												if (confirm(`Reset "${row.agentType}" to its built-in default?`)) {
+													resetMutation.mutate(row.agentType);
+												}
+											}}
 											className="p-1 text-muted-foreground hover:text-foreground"
-											title="Edit definition"
+											title="Reset to default"
+											disabled={resetMutation.isPending}
 										>
-											<Pencil className="h-4 w-4" />
+											<RotateCcw className="h-4 w-4" />
 										</button>
-										{row.isBuiltin && (
-											<button
-												type="button"
-												onClick={() => {
-													if (confirm(`Reset "${row.agentType}" to its built-in default?`)) {
-														resetMutation.mutate(row.agentType);
-													}
-												}}
-												className="p-1 text-muted-foreground hover:text-foreground"
-												title="Reset to default"
-												disabled={resetMutation.isPending}
-											>
-												<RotateCcw className="h-4 w-4" />
-											</button>
-										)}
-										{!row.isBuiltin && (
-											<button
-												type="button"
-												onClick={() => {
-													if (confirm(`Delete custom definition "${row.agentType}"?`)) {
-														deleteMutation.mutate(row.agentType);
-													}
-												}}
-												className="p-1 text-muted-foreground hover:text-destructive"
-												title="Delete definition"
-												disabled={deleteMutation.isPending}
-											>
-												<Trash2 className="h-4 w-4" />
-											</button>
-										)}
-									</div>
-								</TableCell>
-							</TableRow>
-						))}
-					</TableBody>
-				</Table>
-			</div>
-
-			{editDef && (
-				<AgentDefinitionFormDialog
-					open={true}
-					onOpenChange={(open) => !open && setEditDef(null)}
-					existing={editDef}
-				/>
-			)}
-		</>
+									)}
+									{!row.isBuiltin && (
+										<button
+											type="button"
+											onClick={() => {
+												if (confirm(`Delete custom definition "${row.agentType}"?`)) {
+													deleteMutation.mutate(row.agentType);
+												}
+											}}
+											className="p-1 text-muted-foreground hover:text-destructive"
+											title="Delete definition"
+											disabled={deleteMutation.isPending}
+										>
+											<Trash2 className="h-4 w-4" />
+										</button>
+									)}
+								</div>
+							</TableCell>
+						</TableRow>
+					))}
+				</TableBody>
+			</Table>
+		</div>
 	);
 }
diff --git a/web/src/components/settings/prompt-editor.tsx b/web/src/components/settings/prompt-editor.tsx
index d548fc9b..ca58adca 100644
--- a/web/src/components/settings/prompt-editor.tsx
+++ b/web/src/components/settings/prompt-editor.tsx
@@ -294,7 +294,7 @@ function PartialEditor({ name, onClose }: { name: string; onClose: () => void })
 	);
 }
 
-function ReferencePanel({
+export function ReferencePanel({
 	variables,
 	partials,
 }: {
diff --git a/web/src/routes/settings/definitions.tsx b/web/src/routes/settings/definitions.tsx
index f5400bd6..c1ebd80b 100644
--- a/web/src/routes/settings/definitions.tsx
+++ b/web/src/routes/settings/definitions.tsx
@@ -1,5 +1,6 @@
-import { AgentDefinitionFormDialog } from '@/components/settings/agent-definition-form.js';
+import { AgentDefinitionEditor } from '@/components/settings/agent-definition-editor.js';
 import { AgentDefinitionsTable } from '@/components/settings/agent-definition-table.js';
+import type { DefinitionRow } from '@/components/settings/agent-definition-table.js';
 import { PromptEditor } from '@/components/settings/prompt-editor.js';
 import { Badge } from '@/components/ui/badge.js';
 import {
@@ -17,18 +18,38 @@ import { ArrowLeft, Pencil, Trash2 } from 'lucide-react';
 import { useState } from 'react';
 import { rootRoute } from '../__root.js';
 
-type Tab = 'definitions' | 'prompts' | 'partials';
-type EditTarget = { type: 'template'; agentType: string } | { type: 'partial'; name: string };
+type Tab = 'definitions' | 'partials';
+type EditTarget =
+	| { type: 'definition'; existing?: DefinitionRow }
+	| { type: 'partial'; name: string };
 
 function AgentDefinitionsPage() {
 	const [tab, setTab] = useState<Tab>('definitions');
-	const [createOpen, setCreateOpen] = useState(false);
 	const [editTarget, setEditTarget] = useState<EditTarget | null>(null);
 
 	const definitionsQuery = useQuery(trpc.agentDefinitions.list.queryOptions());
 
-	// When editing a prompt or partial, show the editor full-width
+	// When editing a definition or partial, show the editor full-width
 	if (editTarget) {
+		if (editTarget.type === 'definition') {
+			return (
+				<div className="space-y-4">
+					<button
+						type="button"
+						onClick={() => setEditTarget(null)}
+						className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground"
+					>
+						<ArrowLeft className="h-4 w-4" /> Back
+					</button>
+					<AgentDefinitionEditor
+						existing={editTarget.existing}
+						onClose={() => setEditTarget(null)}
+					/>
+				</div>
+			);
+		}
+
+		// type === 'partial' — keep existing PromptEditor flow
 		return (
 			<div className="space-y-4">
 				<button
@@ -38,7 +59,8 @@ function AgentDefinitionsPage() {
 				>
 					<ArrowLeft className="h-4 w-4" /> Back
 				</button>
-				<PromptEditor target={editTarget} onClose={() => setEditTarget(null)} />
+				{/* Lazy import to avoid circular dep — PromptEditor is still used for partials */}
+				<PartialEditorWrapper name={editTarget.name} onClose={() => setEditTarget(null)} />
 			</div>
 		);
 	}
@@ -55,7 +77,7 @@ function AgentDefinitionsPage() {
 				{tab === 'definitions' && (
 					<button
 						type="button"
-						onClick={() => setCreateOpen(true)}
+						onClick={() => setEditTarget({ type: 'definition' })}
 						className="inline-flex h-9 items-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground hover:bg-primary/90"
 					>
 						New Definition
@@ -65,7 +87,7 @@ function AgentDefinitionsPage() {
 
 			{/* Tab bar */}
 			<div className="flex gap-2 border-b border-border">
-				{(['definitions', 'prompts', 'partials'] as Tab[]).map((t) => (
+				{(['definitions', 'partials'] as Tab[]).map((t) => (
 					<button
 						key={t}
 						type="button"
@@ -76,7 +98,7 @@ function AgentDefinitionsPage() {
 								: 'border-transparent text-muted-foreground hover:text-foreground'
 						}`}
 					>
-						{t === 'definitions' ? 'Definitions' : t === 'prompts' ? 'Prompts' : 'Partials'}
+						{t === 'definitions' ? 'Definitions' : 'Partials'}
 					</button>
 				))}
 			</div>
@@ -95,16 +117,15 @@ function AgentDefinitionsPage() {
 						</div>
 					)}
 
-					{definitionsQuery.data && <AgentDefinitionsTable definitions={definitionsQuery.data} />}
-
-					<AgentDefinitionFormDialog open={createOpen} onOpenChange={setCreateOpen} />
+					{definitionsQuery.data && (
+						<AgentDefinitionsTable
+							definitions={definitionsQuery.data}
+							onEdit={(def) => setEditTarget({ type: 'definition', existing: def })}
+						/>
+					)}
 				</>
 			)}
 
-			{tab === 'prompts' && (
-				<TemplatesTab onEdit={(agentType) => setEditTarget({ type: 'template', agentType })} />
-			)}
-
 			{tab === 'partials' && (
 				<PartialsTab onEdit={(name) => setEditTarget({ type: 'partial', name })} />
 			)}
@@ -112,60 +133,18 @@ function AgentDefinitionsPage() {
 	);
 }
 
-function TemplatesTab({ onEdit }: { onEdit: (agentType: string) => void }) {
-	const agentTypesQuery = useQuery(trpc.agentDefinitions.knownTypes.queryOptions());
-	const definitionsQuery = useQuery(trpc.agentDefinitions.list.queryOptions());
-
-	if (agentTypesQuery.isLoading) {
-		return <div className="py-4 text-muted-foreground">Loading...</div>;
-	}
+// ─────────────────────────────────────────────────────────────────────────────
+// Partial editor wrapper — renders the PromptEditor for partials inline
+// ─────────────────────────────────────────────────────────────────────────────
 
-	const agentTypes = agentTypesQuery.data ?? [];
-	const definitions = definitionsQuery.data ?? [];
-	const customPrompts = new Set(
-		definitions
-			.filter((d) => d.definition.prompts?.systemPrompt || d.definition.prompts?.taskPrompt)
-			.map((d) => d.agentType),
-	);
-
-	return (
-		<div className="overflow-hidden rounded-lg border border-border">
-			<Table>
-				<TableHeader>
-					<TableRow>
-						<TableHead>Agent Type</TableHead>
-						<TableHead>Status</TableHead>
-						<TableHead className="w-20" />
-					</TableRow>
-				</TableHeader>
-				<TableBody>
-					{agentTypes.map((type) => (
-						<TableRow key={type}>
-							<TableCell className="font-medium">{type}</TableCell>
-							<TableCell>
-								{customPrompts.has(type) ? (
-									<Badge>custom</Badge>
-								) : (
-									<Badge variant="outline">default</Badge>
-								)}
-							</TableCell>
-							<TableCell>
-								<button
-									type="button"
-									onClick={() => onEdit(type)}
-									className="p-1 text-muted-foreground hover:text-foreground"
-								>
-									<Pencil className="h-4 w-4" />
-								</button>
-							</TableCell>
-						</TableRow>
-					))}
-				</TableBody>
-			</Table>
-		</div>
-	);
+function PartialEditorWrapper({ name, onClose }: { name: string; onClose: () => void }) {
+	return <PromptEditor target={{ type: 'partial', name }} onClose={onClose} />;
 }
 
+// ─────────────────────────────────────────────────────────────────────────────
+// Partials tab
+// ─────────────────────────────────────────────────────────────────────────────
+
 function PartialsTab({ onEdit }: { onEdit: (name: string) => void }) {
 	const queryClient = useQueryClient();
 	const partialsQuery = useQuery(trpc.prompts.listPartials.queryOptions());

From b21348a8b97574d4b28170640e93d6021a3d9b09 Mon Sep 17 00:00:00 2001
From: Cascade Bot <bot@cascade.dev>
Date: Sun, 1 Mar 2026 11:25:52 +0000
Subject: [PATCH 2/5] refactor(settings): extract useDefinitionEditor hook to
 reduce complexity

Extract the editor state and mutations into a dedicated hook so the
AgentDefinitionEditor component stays within the complexity limit.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../settings/agent-definition-editor.tsx      | 91 +++++++++++++------
 1 file changed, 64 insertions(+), 27 deletions(-)

diff --git a/web/src/components/settings/agent-definition-editor.tsx b/web/src/components/settings/agent-definition-editor.tsx
index 97a9dc53..3c4c9940 100644
--- a/web/src/components/settings/agent-definition-editor.tsx
+++ b/web/src/components/settings/agent-definition-editor.tsx
@@ -691,17 +691,14 @@ const EMPTY_DEFINITION: AgentDefinition = {
 };
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Main full-screen editor component
+// Hook — encapsulates all editor state and mutations
 // ─────────────────────────────────────────────────────────────────────────────
 
-export function AgentDefinitionEditor({ existing, onClose }: AgentDefinitionEditorProps) {
+function useDefinitionEditor(existing: DefinitionRow | undefined, onClose: () => void) {
 	const queryClient = useQueryClient();
 	const isEdit = !!existing;
+	const queryKey = trpc.agentDefinitions.list.queryOptions().queryKey;
 
-	const schemaQuery = useQuery(trpc.agentDefinitions.schema.queryOptions());
-	const schema = schemaQuery.data;
-
-	// ── local state ──────────────────────────────────────────────────────────
 	const [agentType, setAgentType] = useState(existing?.agentType ?? '');
 	const [def, setDef] = useState<AgentDefinition>(existing?.definition ?? EMPTY_DEFINITION);
 	const [jsonText, setJsonText] = useState(
@@ -712,9 +709,6 @@ export function AgentDefinitionEditor({ existing, onClose }: AgentDefinitionEdit
 	const [jsonError, setJsonError] = useState<string | null>(null);
 	const [activeTab, setActiveTab] = useState('definition');
 
-	// ── helpers ───────────────────────────────────────────────────────────────
-	const queryKey = trpc.agentDefinitions.list.queryOptions().queryKey;
-
 	const onSuccess = () => {
 		queryClient.invalidateQueries({ queryKey });
 		onClose();
@@ -738,12 +732,9 @@ export function AgentDefinitionEditor({ existing, onClose }: AgentDefinitionEdit
 		if (tab === 'json' && activeTab === 'definition') {
 			setJsonText(JSON.stringify(def, null, 2));
 			setJsonError(null);
-		}
-		if (tab === 'definition' && activeTab === 'json') {
-			// sync json -> form silently
+		} else if (tab === 'definition' && activeTab === 'json') {
 			try {
-				const parsed = JSON.parse(jsonText) as AgentDefinition;
-				setDef(parsed);
+				setDef(JSON.parse(jsonText) as AgentDefinition);
 				setJsonError(null);
 			} catch {
 				// leave form as-is if JSON is invalid
@@ -752,8 +743,7 @@ export function AgentDefinitionEditor({ existing, onClose }: AgentDefinitionEdit
 		setActiveTab(tab);
 	};
 
-	const handleSubmit = (e: React.FormEvent) => {
-		e.preventDefault();
+	const handleSave = () => {
 		let submission = def;
 		if (activeTab === 'json') {
 			try {
@@ -765,26 +755,73 @@ export function AgentDefinitionEditor({ existing, onClose }: AgentDefinitionEdit
 				return;
 			}
 		}
-		if (isEdit) {
+		if (isEdit && existing) {
 			updateMutation.mutate({ agentType: existing.agentType, patch: submission });
 		} else {
 			createMutation.mutate({ agentType, definition: submission });
 		}
 	};
 
-	// ── field helpers ─────────────────────────────────────────────────────────
 	const setIdentity = (k: keyof AgentDefinition['identity'], v: string) =>
 		setDef((d) => ({ ...d, identity: { ...d.identity, [k]: v } }));
-
 	const setCap = (k: keyof AgentDefinition['capabilities'], v: boolean) =>
 		setDef((d) => ({ ...d, capabilities: { ...d.capabilities, [k]: v } }));
-
 	const setBackend = (k: keyof AgentDefinition['backend'], v: unknown) =>
 		setDef((d) => ({ ...d, backend: { ...d.backend, [k]: v } }));
-
 	const setTrailing = (k: string, v: boolean) =>
 		setDef((d) => ({ ...d, trailingMessage: { ...(d.trailingMessage ?? {}), [k]: v } }));
 
+	const clearJsonError = () => setJsonError(null);
+
+	return {
+		isEdit,
+		agentType,
+		setAgentType,
+		def,
+		setDef,
+		jsonText,
+		setJsonText,
+		jsonError,
+		clearJsonError,
+		activeTab,
+		activeMutation,
+		handleTabChange,
+		handleSave,
+		setIdentity,
+		setCap,
+		setBackend,
+		setTrailing,
+	};
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Main full-screen editor component
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function AgentDefinitionEditor({ existing, onClose }: AgentDefinitionEditorProps) {
+	const schemaQuery = useQuery(trpc.agentDefinitions.schema.queryOptions());
+	const schema = schemaQuery.data;
+
+	const {
+		isEdit,
+		agentType,
+		setAgentType,
+		def,
+		setDef,
+		jsonText,
+		setJsonText,
+		jsonError,
+		clearJsonError,
+		activeTab,
+		activeMutation,
+		handleTabChange,
+		handleSave,
+		setIdentity,
+		setCap,
+		setBackend,
+		setTrailing,
+	} = useDefinitionEditor(existing, onClose);
+
 	// ─────────────────────────────────────────────────────────────────────────
 	return (
 		<div className="space-y-6">
@@ -794,15 +831,15 @@ export function AgentDefinitionEditor({ existing, onClose }: AgentDefinitionEdit
 					<h2 className="text-xl font-bold">
 						{isEdit ? (
 							<>
-								{existing.definition.identity.emoji}{' '}
-								<span className="font-mono">{existing.agentType}</span>
+								{existing?.definition.identity.emoji}{' '}
+								<span className="font-mono">{existing?.agentType}</span>
 							</>
 						) : (
 							'New Agent Definition'
 						)}
 					</h2>
 					{isEdit && (
-						<p className="text-sm text-muted-foreground">{existing.definition.identity.label}</p>
+						<p className="text-sm text-muted-foreground">{existing?.definition.identity.label}</p>
 					)}
 				</div>
 				<div className="flex gap-2">
@@ -817,7 +854,7 @@ export function AgentDefinitionEditor({ existing, onClose }: AgentDefinitionEdit
 					{activeTab !== 'prompt' && (
 						<button
 							type="button"
-							onClick={(e) => handleSubmit(e as unknown as React.FormEvent)}
+							onClick={handleSave}
 							disabled={activeMutation.isPending}
 							className="inline-flex h-9 items-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
 						>
@@ -906,7 +943,7 @@ export function AgentDefinitionEditor({ existing, onClose }: AgentDefinitionEdit
 
 				{isEdit && (
 					<TabsContent value="prompt" className="pt-4">
-						<SystemPromptPanel agentType={existing.agentType} />
+						<SystemPromptPanel agentType={existing?.agentType ?? ''} />
 					</TabsContent>
 				)}
 
@@ -918,7 +955,7 @@ export function AgentDefinitionEditor({ existing, onClose }: AgentDefinitionEdit
 						value={jsonText}
 						onChange={(e) => {
 							setJsonText(e.target.value);
-							setJsonError(null);
+							clearJsonError();
 						}}
 						rows={30}
 						className="font-mono text-xs"

From 634a4be56a9cc4a54327692dd98cb5d1cfaacdf8 Mon Sep 17 00:00:00 2001
From: Cascade Bot <bot@cascade.dev>
Date: Sun, 1 Mar 2026 11:37:42 +0000
Subject: [PATCH 3/5] fix: address PR review feedback - remove dead code and
 add isDirty tracking

- Delete agent-definition-form.tsx (no longer imported)
- Remove TemplateEditor component and template variant from prompt-editor.tsx
- Add isDirty state tracking to SystemPromptPanel
- Inline PartialEditorWrapper in definitions.tsx

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 .../settings/agent-definition-editor.tsx      |   5 +
 .../settings/agent-definition-form.tsx        | 767 ------------------
 web/src/components/settings/prompt-editor.tsx | 162 +---
 web/src/routes/settings/definitions.tsx       |  16 +-
 4 files changed, 11 insertions(+), 939 deletions(-)
 delete mode 100644 web/src/components/settings/agent-definition-form.tsx

diff --git a/web/src/components/settings/agent-definition-editor.tsx b/web/src/components/settings/agent-definition-editor.tsx
index 3c4c9940..224a4fc6 100644
--- a/web/src/components/settings/agent-definition-editor.tsx
+++ b/web/src/components/settings/agent-definition-editor.tsx
@@ -514,6 +514,7 @@ function SystemPromptPanel({ agentType }: { agentType: string }) {
 	const queryClient = useQueryClient();
 	const [content, setContent] = useState('');
 	const [validationStatus, setValidationStatus] = useState<string | null>(null);
+	const [isDirty, setIsDirty] = useState(false);
 
 	const definitionQuery = useQuery(trpc.agentDefinitions.get.queryOptions({ agentType }));
 	const defaultQuery = useQuery(trpc.prompts.getDefault.queryOptions({ agentType }));
@@ -545,6 +546,7 @@ function SystemPromptPanel({ agentType }: { agentType: string }) {
 			queryClient.invalidateQueries({
 				queryKey: trpc.agentDefinitions.list.queryOptions().queryKey,
 			});
+			setIsDirty(false);
 			setValidationStatus('Saved.');
 		},
 	});
@@ -563,6 +565,7 @@ function SystemPromptPanel({ agentType }: { agentType: string }) {
 			if (defaultQuery.data) {
 				setContent(defaultQuery.data.content);
 			}
+			setIsDirty(false);
 			setValidationStatus('Reset to default.');
 		},
 	});
@@ -581,6 +584,7 @@ function SystemPromptPanel({ agentType }: { agentType: string }) {
 	function loadDefault() {
 		if (defaultQuery.data) {
 			setContent(defaultQuery.data.content);
+			setIsDirty(true);
 			setValidationStatus(null);
 		}
 	}
@@ -620,6 +624,7 @@ function SystemPromptPanel({ agentType }: { agentType: string }) {
 						value={content}
 						onChange={(e) => {
 							setContent(e.target.value);
+							setIsDirty(true);
 							setValidationStatus(null);
 						}}
 						className="w-full h-[500px] rounded-md border border-input bg-background px-3 py-2 text-sm font-mono resize-y focus:outline-none focus:ring-2 focus:ring-ring"
diff --git a/web/src/components/settings/agent-definition-form.tsx b/web/src/components/settings/agent-definition-form.tsx
deleted file mode 100644
index 152ccab1..00000000
--- a/web/src/components/settings/agent-definition-form.tsx
+++ /dev/null
@@ -1,767 +0,0 @@
-import type { AppRouter } from '@/../../src/api/router.js';
-import { Badge } from '@/components/ui/badge.js';
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog.js';
-import { Input } from '@/components/ui/input.js';
-import { Label } from '@/components/ui/label.js';
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from '@/components/ui/select.js';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs.js';
-import { Textarea } from '@/components/ui/textarea.js';
-import { trpc, trpcClient } from '@/lib/trpc.js';
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import type { inferRouterOutputs } from '@trpc/server';
-import { useState } from 'react';
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Types
-// ─────────────────────────────────────────────────────────────────────────────
-
-type RouterOutput = inferRouterOutputs<AppRouter>;
-type DefinitionRow = RouterOutput['agentDefinitions']['list'][number];
-type AgentDefinition = DefinitionRow['definition'];
-
-interface AgentDefinitionFormDialogProps {
-	open: boolean;
-	onOpenChange: (open: boolean) => void;
-	existing?: DefinitionRow;
-}
-
-interface SchemaData {
-	toolSetNames: readonly string[];
-	sdkToolsNames: readonly string[];
-	contextStepNames: readonly string[];
-	taskPromptBuilderNames: readonly string[];
-	gadgetBuilderNames: readonly string[];
-	compactionNames: readonly string[];
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Helper components
-// ─────────────────────────────────────────────────────────────────────────────
-
-function Toggle({
-	checked,
-	onChange,
-	label,
-}: {
-	checked: boolean;
-	onChange: (v: boolean) => void;
-	label: string;
-}) {
-	return (
-		<div className="flex cursor-pointer select-none items-center gap-2">
-			<button
-				type="button"
-				role="switch"
-				aria-checked={checked}
-				aria-label={label}
-				onClick={() => onChange(!checked)}
-				className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${
-					checked ? 'bg-primary' : 'bg-input'
-				}`}
-			>
-				<span
-					className={`inline-block h-3.5 w-3.5 transform rounded-full bg-white shadow transition-transform ${
-						checked ? 'translate-x-4.5' : 'translate-x-0.5'
-					}`}
-				/>
-			</button>
-			<span className="text-sm">{label}</span>
-		</div>
-	);
-}
-
-function MultiSelectBadges({
-	available,
-	selected,
-	onChange,
-}: {
-	available: readonly string[];
-	selected: string[];
-	onChange: (v: string[]) => void;
-}) {
-	const toggle = (item: string) => {
-		if (selected.includes(item)) {
-			onChange(selected.filter((s) => s !== item));
-		} else {
-			onChange([...selected, item]);
-		}
-	};
-	return (
-		<div className="flex flex-wrap gap-1.5">
-			{available.map((item) => (
-				<button
-					key={item}
-					type="button"
-					onClick={() => toggle(item)}
-					className="focus:outline-none"
-				>
-					<Badge
-						variant={selected.includes(item) ? 'default' : 'outline'}
-						className="cursor-pointer text-xs hover:opacity-80"
-					>
-						{item}
-					</Badge>
-				</button>
-			))}
-		</div>
-	);
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Form section sub-components
-// ─────────────────────────────────────────────────────────────────────────────
-
-function IdentitySection({
-	def,
-	setIdentity,
-}: {
-	def: AgentDefinition;
-	setIdentity: (k: keyof AgentDefinition['identity'], v: string) => void;
-}) {
-	return (
-		<section className="space-y-3">
-			<h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
-				Identity
-			</h3>
-			<div className="grid grid-cols-2 gap-3">
-				<div className="space-y-1">
-					<Label htmlFor="ad-emoji">Emoji</Label>
-					<Input
-						id="ad-emoji"
-						value={def.identity.emoji}
-						onChange={(e) => setIdentity('emoji', e.target.value)}
-						placeholder="🤖"
-					/>
-				</div>
-				<div className="space-y-1">
-					<Label htmlFor="ad-label">Label</Label>
-					<Input
-						id="ad-label"
-						value={def.identity.label}
-						onChange={(e) => setIdentity('label', e.target.value)}
-						placeholder="My Agent"
-					/>
-				</div>
-			</div>
-			<div className="space-y-1">
-				<Label htmlFor="ad-roleHint">Role Hint</Label>
-				<Textarea
-					id="ad-roleHint"
-					value={def.identity.roleHint}
-					onChange={(e) => setIdentity('roleHint', e.target.value)}
-					rows={3}
-					placeholder="Describe the agent's role..."
-				/>
-			</div>
-			<div className="space-y-1">
-				<Label htmlFor="ad-initialMessage">Initial Message</Label>
-				<Textarea
-					id="ad-initialMessage"
-					value={def.identity.initialMessage}
-					onChange={(e) => setIdentity('initialMessage', e.target.value)}
-					rows={2}
-					placeholder="Starting message shown to the agent..."
-				/>
-			</div>
-		</section>
-	);
-}
-
-function CapabilitiesSection({
-	def,
-	setCap,
-}: {
-	def: AgentDefinition;
-	setCap: (k: keyof AgentDefinition['capabilities'], v: boolean) => void;
-}) {
-	return (
-		<section className="space-y-3">
-			<h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
-				Capabilities
-			</h3>
-			<div className="grid grid-cols-2 gap-2">
-				<Toggle
-					checked={def.capabilities.canEditFiles}
-					onChange={(v) => setCap('canEditFiles', v)}
-					label="Can Edit Files"
-				/>
-				<Toggle
-					checked={def.capabilities.canCreatePR}
-					onChange={(v) => setCap('canCreatePR', v)}
-					label="Can Create PR"
-				/>
-				<Toggle
-					checked={def.capabilities.canUpdateChecklists}
-					onChange={(v) => setCap('canUpdateChecklists', v)}
-					label="Can Update Checklists"
-				/>
-				<Toggle
-					checked={def.capabilities.isReadOnly}
-					onChange={(v) => setCap('isReadOnly', v)}
-					label="Is Read Only"
-				/>
-				<Toggle
-					checked={def.capabilities.canAccessEmail ?? false}
-					onChange={(v) => setCap('canAccessEmail', v)}
-					label="Can Access Email"
-				/>
-			</div>
-		</section>
-	);
-}
-
-function ToolsSection({
-	def,
-	setDef,
-	schema,
-}: {
-	def: AgentDefinition;
-	setDef: React.Dispatch<React.SetStateAction<AgentDefinition>>;
-	schema: SchemaData | undefined;
-}) {
-	return (
-		<section className="space-y-3">
-			<h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">Tools</h3>
-			<div className="space-y-2">
-				<Label>Tool Sets</Label>
-				{schema ? (
-					<MultiSelectBadges
-						available={schema.toolSetNames}
-						selected={def.tools.sets}
-						onChange={(sets) =>
-							setDef((d) => ({ ...d, tools: { ...d.tools, sets } }) as AgentDefinition)
-						}
-					/>
-				) : (
-					<div className="text-sm text-muted-foreground">Loading...</div>
-				)}
-			</div>
-			<div className="space-y-1">
-				<Label>SDK Tools</Label>
-				<Select
-					value={def.tools.sdkTools}
-					onValueChange={(v) =>
-						setDef((d) => ({ ...d, tools: { ...d.tools, sdkTools: v } }) as AgentDefinition)
-					}
-				>
-					<SelectTrigger className="w-full">
-						<SelectValue />
-					</SelectTrigger>
-					<SelectContent>
-						{(schema?.sdkToolsNames ?? ['all', 'readOnly']).map((n) => (
-							<SelectItem key={n} value={n}>
-								{n}
-							</SelectItem>
-						))}
-					</SelectContent>
-				</Select>
-			</div>
-		</section>
-	);
-}
-
-function StrategiesSection({
-	def,
-	setDef,
-	schema,
-}: {
-	def: AgentDefinition;
-	setDef: React.Dispatch<React.SetStateAction<AgentDefinition>>;
-	schema: SchemaData | undefined;
-}) {
-	return (
-		<section className="space-y-3">
-			<h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
-				Strategies
-			</h3>
-			<div className="space-y-2">
-				<Label>Context Pipeline</Label>
-				{schema ? (
-					<MultiSelectBadges
-						available={schema.contextStepNames}
-						selected={def.strategies.contextPipeline}
-						onChange={(contextPipeline) =>
-							setDef(
-								(d) =>
-									({ ...d, strategies: { ...d.strategies, contextPipeline } }) as AgentDefinition,
-							)
-						}
-					/>
-				) : (
-					<div className="text-sm text-muted-foreground">Loading...</div>
-				)}
-			</div>
-			<div className="grid grid-cols-2 gap-3">
-				<div className="space-y-1">
-					<Label>Task Prompt Builder</Label>
-					<Select
-						value={def.strategies.taskPromptBuilder}
-						onValueChange={(v) =>
-							setDef(
-								(d) =>
-									({
-										...d,
-										strategies: { ...d.strategies, taskPromptBuilder: v },
-									}) as AgentDefinition,
-							)
-						}
-					>
-						<SelectTrigger className="w-full">
-							<SelectValue />
-						</SelectTrigger>
-						<SelectContent>
-							{(schema?.taskPromptBuilderNames ?? []).map((n) => (
-								<SelectItem key={n} value={n}>
-									{n}
-								</SelectItem>
-							))}
-						</SelectContent>
-					</Select>
-				</div>
-				<div className="space-y-1">
-					<Label>Gadget Builder</Label>
-					<Select
-						value={def.strategies.gadgetBuilder}
-						onValueChange={(v) =>
-							setDef(
-								(d) =>
-									({ ...d, strategies: { ...d.strategies, gadgetBuilder: v } }) as AgentDefinition,
-							)
-						}
-					>
-						<SelectTrigger className="w-full">
-							<SelectValue />
-						</SelectTrigger>
-						<SelectContent>
-							{(schema?.gadgetBuilderNames ?? []).map((n) => (
-								<SelectItem key={n} value={n}>
-									{n}
-								</SelectItem>
-							))}
-						</SelectContent>
-					</Select>
-				</div>
-			</div>
-		</section>
-	);
-}
-
-function BackendSection({
-	def,
-	setBackend,
-}: {
-	def: AgentDefinition;
-	setBackend: (k: keyof AgentDefinition['backend'], v: unknown) => void;
-}) {
-	return (
-		<section className="space-y-3">
-			<h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
-				Backend
-			</h3>
-			<div className="grid grid-cols-2 gap-2">
-				<Toggle
-					checked={def.backend.enableStopHooks}
-					onChange={(v) => setBackend('enableStopHooks', v)}
-					label="Enable Stop Hooks"
-				/>
-				<Toggle
-					checked={def.backend.needsGitHubToken}
-					onChange={(v) => setBackend('needsGitHubToken', v)}
-					label="Needs GitHub Token"
-				/>
-				<Toggle
-					checked={def.backend.blockGitPush ?? false}
-					onChange={(v) => setBackend('blockGitPush', v)}
-					label="Block Git Push"
-				/>
-				<Toggle
-					checked={def.backend.requiresPR ?? false}
-					onChange={(v) => setBackend('requiresPR', v)}
-					label="Requires PR"
-				/>
-			</div>
-			<div className="grid grid-cols-2 gap-3">
-				<div className="space-y-1">
-					<Label>Pre-Execute Hook</Label>
-					<Select
-						value={def.backend.preExecute ?? '_none'}
-						onValueChange={(v) => setBackend('preExecute', v === '_none' ? undefined : v)}
-					>
-						<SelectTrigger className="w-full">
-							<SelectValue placeholder="None" />
-						</SelectTrigger>
-						<SelectContent>
-							<SelectItem value="_none">None</SelectItem>
-							<SelectItem value="postInitialPRComment">postInitialPRComment</SelectItem>
-						</SelectContent>
-					</Select>
-				</div>
-				<div className="space-y-1">
-					<Label>Post-Configure Hook</Label>
-					<Select
-						value={def.backend.postConfigure ?? '_none'}
-						onValueChange={(v) => setBackend('postConfigure', v === '_none' ? undefined : v)}
-					>
-						<SelectTrigger className="w-full">
-							<SelectValue placeholder="None" />
-						</SelectTrigger>
-						<SelectContent>
-							<SelectItem value="_none">None</SelectItem>
-							<SelectItem value="sequentialGadgetExecution">sequentialGadgetExecution</SelectItem>
-						</SelectContent>
-					</Select>
-				</div>
-			</div>
-		</section>
-	);
-}
-
-function TrailingMessageSection({
-	def,
-	setTrailing,
-}: {
-	def: AgentDefinition;
-	setTrailing: (k: string, v: boolean) => void;
-}) {
-	return (
-		<section className="space-y-3">
-			<h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
-				Trailing Message
-			</h3>
-			<div className="grid grid-cols-2 gap-2">
-				<Toggle
-					checked={def.trailingMessage?.includeDiagnostics ?? false}
-					onChange={(v) => setTrailing('includeDiagnostics', v)}
-					label="Include Diagnostics"
-				/>
-				<Toggle
-					checked={def.trailingMessage?.includeTodoProgress ?? false}
-					onChange={(v) => setTrailing('includeTodoProgress', v)}
-					label="Include Todo Progress"
-				/>
-				<Toggle
-					checked={def.trailingMessage?.includeGitStatus ?? false}
-					onChange={(v) => setTrailing('includeGitStatus', v)}
-					label="Include Git Status"
-				/>
-				<Toggle
-					checked={def.trailingMessage?.includePRStatus ?? false}
-					onChange={(v) => setTrailing('includePRStatus', v)}
-					label="Include PR Status"
-				/>
-				<Toggle
-					checked={def.trailingMessage?.includeReminder ?? false}
-					onChange={(v) => setTrailing('includeReminder', v)}
-					label="Include Reminder"
-				/>
-			</div>
-		</section>
-	);
-}
-
-function IntegrationsSection({
-	def,
-	setDef,
-}: {
-	def: AgentDefinition;
-	setDef: React.Dispatch<React.SetStateAction<AgentDefinition>>;
-}) {
-	const integrationOptions = ['pm', 'scm', 'email', 'sms'] as const;
-	return (
-		<section className="space-y-3">
-			<h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
-				Integrations
-			</h3>
-			<div className="space-y-2">
-				<Label>Required</Label>
-				<MultiSelectBadges
-					available={integrationOptions}
-					selected={def.integrations.required}
-					onChange={(required) =>
-						setDef(
-							(d) => ({ ...d, integrations: { ...d.integrations, required } }) as AgentDefinition,
-						)
-					}
-				/>
-			</div>
-			<div className="space-y-2">
-				<Label>Optional</Label>
-				<MultiSelectBadges
-					available={integrationOptions}
-					selected={def.integrations.optional}
-					onChange={(optional) =>
-						setDef(
-							(d) => ({ ...d, integrations: { ...d.integrations, optional } }) as AgentDefinition,
-						)
-					}
-				/>
-			</div>
-		</section>
-	);
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Default empty definition for "create" mode
-// ─────────────────────────────────────────────────────────────────────────────
-
-const EMPTY_DEFINITION: AgentDefinition = {
-	identity: { emoji: '🤖', label: '', roleHint: '', initialMessage: '' },
-	capabilities: {
-		canEditFiles: false,
-		canCreatePR: false,
-		canUpdateChecklists: false,
-		isReadOnly: true,
-		canAccessEmail: false,
-	},
-	tools: { sets: [], sdkTools: 'readOnly' },
-	strategies: {
-		contextPipeline: [],
-		taskPromptBuilder: 'workItem',
-		gadgetBuilder: 'workItem',
-	},
-	backend: { enableStopHooks: false, needsGitHubToken: false },
-	compaction: 'default',
-	hint: '',
-	trailingMessage: undefined,
-	integrations: { required: ['pm'], optional: [] },
-};
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Main component
-// ─────────────────────────────────────────────────────────────────────────────
-
-export function AgentDefinitionFormDialog({
-	open,
-	onOpenChange,
-	existing,
-}: AgentDefinitionFormDialogProps) {
-	const queryClient = useQueryClient();
-	const isEdit = !!existing;
-
-	const schemaQuery = useQuery(trpc.agentDefinitions.schema.queryOptions());
-	const schema = schemaQuery.data;
-
-	// ── local state ──────────────────────────────────────────────────────────
-	const [agentType, setAgentType] = useState(existing?.agentType ?? '');
-	const [def, setDef] = useState<AgentDefinition>(existing?.definition ?? EMPTY_DEFINITION);
-	const [jsonText, setJsonText] = useState(
-		existing
-			? JSON.stringify(existing.definition, null, 2)
-			: JSON.stringify(EMPTY_DEFINITION, null, 2),
-	);
-	const [jsonError, setJsonError] = useState<string | null>(null);
-	const [activeTab, setActiveTab] = useState('form');
-
-	// ── helpers ───────────────────────────────────────────────────────────────
-	const queryKey = trpc.agentDefinitions.list.queryOptions().queryKey;
-
-	const onSuccess = () => {
-		queryClient.invalidateQueries({ queryKey });
-		onOpenChange(false);
-	};
-
-	const createMutation = useMutation({
-		mutationFn: (params: { agentType: string; definition: AgentDefinition }) =>
-			trpcClient.agentDefinitions.create.mutate(params),
-		onSuccess,
-	});
-
-	const updateMutation = useMutation({
-		mutationFn: (params: { agentType: string; patch: AgentDefinition }) =>
-			trpcClient.agentDefinitions.update.mutate(params),
-		onSuccess,
-	});
-
-	const activeMutation = isEdit ? updateMutation : createMutation;
-
-	const handleTabChange = (tab: string) => {
-		if (tab === 'json' && activeTab === 'form') {
-			setJsonText(JSON.stringify(def, null, 2));
-			setJsonError(null);
-		}
-		setActiveTab(tab);
-	};
-
-	const syncJsonToForm = () => {
-		try {
-			const parsed = JSON.parse(jsonText) as AgentDefinition;
-			setDef(parsed);
-			setJsonError(null);
-			return true;
-		} catch (e) {
-			setJsonError((e as Error).message);
-			return false;
-		}
-	};
-
-	const handleSubmit = (e: React.FormEvent) => {
-		e.preventDefault();
-		let submission = def;
-		if (activeTab === 'json') {
-			try {
-				submission = JSON.parse(jsonText) as AgentDefinition;
-				setDef(submission); // sync form state for UI
-				setJsonError(null);
-			} catch (err) {
-				setJsonError((err as Error).message);
-				return;
-			}
-		}
-		// Use submission directly instead of relying on def from closure
-		if (isEdit) {
-			updateMutation.mutate({ agentType: existing?.agentType as string, patch: submission });
-		} else {
-			createMutation.mutate({ agentType, definition: submission });
-		}
-	};
-
-	// ── field helpers ─────────────────────────────────────────────────────────
-	const setIdentity = (k: keyof AgentDefinition['identity'], v: string) =>
-		setDef((d) => ({ ...d, identity: { ...d.identity, [k]: v } }));
-
-	const setCap = (k: keyof AgentDefinition['capabilities'], v: boolean) =>
-		setDef((d) => ({ ...d, capabilities: { ...d.capabilities, [k]: v } }));
-
-	const setBackend = (k: keyof AgentDefinition['backend'], v: unknown) =>
-		setDef((d) => ({ ...d, backend: { ...d.backend, [k]: v } }));
-
-	const setTrailing = (k: string, v: boolean) =>
-		setDef((d) => ({ ...d, trailingMessage: { ...(d.trailingMessage ?? {}), [k]: v } }));
-
-	// ─────────────────────────────────────────────────────────────────────────
-	return (
-		<Dialog key={existing?.agentType ?? 'create'} open={open} onOpenChange={onOpenChange}>
-			<DialogContent className="max-h-[90vh] max-w-2xl overflow-y-auto">
-				<DialogHeader>
-					<DialogTitle>
-						{isEdit ? `Edit Definition: ${existing.agentType}` : 'New Agent Definition'}
-					</DialogTitle>
-				</DialogHeader>
-
-				<form onSubmit={handleSubmit} className="space-y-4">
-					{!isEdit && (
-						<div className="space-y-2">
-							<Label htmlFor="ad-agentType">Agent Type</Label>
-							<Input
-								id="ad-agentType"
-								value={agentType}
-								onChange={(e) => setAgentType(e.target.value)}
-								placeholder="e.g. implementation, review, debug"
-								required
-							/>
-						</div>
-					)}
-
-					<Tabs value={activeTab} onValueChange={handleTabChange}>
-						<TabsList>
-							<TabsTrigger value="form">Form</TabsTrigger>
-							<TabsTrigger value="json">Raw JSON</TabsTrigger>
-						</TabsList>
-
-						<TabsContent value="form" className="space-y-6 pt-2">
-							<IdentitySection def={def} setIdentity={setIdentity} />
-							<CapabilitiesSection def={def} setCap={setCap} />
-							<ToolsSection def={def} setDef={setDef} schema={schema} />
-							<StrategiesSection def={def} setDef={setDef} schema={schema} />
-							<BackendSection def={def} setBackend={setBackend} />
-
-							<section className="space-y-3">
-								<h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
-									Compaction
-								</h3>
-								<div className="space-y-1">
-									<Label>Compaction Strategy</Label>
-									<Select
-										value={def.compaction}
-										onValueChange={(v) =>
-											setDef((d) => ({ ...d, compaction: v }) as AgentDefinition)
-										}
-									>
-										<SelectTrigger className="w-full">
-											<SelectValue />
-										</SelectTrigger>
-										<SelectContent>
-											{(schema?.compactionNames ?? ['implementation', 'default']).map((n) => (
-												<SelectItem key={n} value={n}>
-													{n}
-												</SelectItem>
-											))}
-										</SelectContent>
-									</Select>
-								</div>
-							</section>
-
-							<section className="space-y-3">
-								<h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
-									Hint
-								</h3>
-								<div className="space-y-1">
-									<Label htmlFor="ad-hint">Hint Text</Label>
-									<Textarea
-										id="ad-hint"
-										value={def.hint}
-										onChange={(e) => setDef((d) => ({ ...d, hint: e.target.value }))}
-										rows={2}
-										placeholder="Optional hint shown in iteration messages..."
-									/>
-								</div>
-							</section>
-
-							<TrailingMessageSection def={def} setTrailing={setTrailing} />
-							<IntegrationsSection def={def} setDef={setDef} />
-						</TabsContent>
-
-						<TabsContent value="json" className="space-y-2 pt-2">
-							<p className="text-sm text-muted-foreground">
-								Edit the raw JSON. Changes here are applied when you save.
-							</p>
-							<Textarea
-								value={jsonText}
-								onChange={(e) => {
-									setJsonText(e.target.value);
-									setJsonError(null);
-								}}
-								rows={20}
-								className="font-mono text-xs"
-								spellCheck={false}
-							/>
-							{jsonError && (
-								<p className="text-sm text-destructive">JSON parse error: {jsonError}</p>
-							)}
-						</TabsContent>
-					</Tabs>
-
-					<div className="flex justify-end gap-2 pt-2">
-						<button
-							type="button"
-							onClick={() => onOpenChange(false)}
-							className="inline-flex h-9 items-center rounded-md border border-input px-4 text-sm hover:bg-accent"
-						>
-							Cancel
-						</button>
-						<button
-							type="submit"
-							disabled={activeMutation.isPending}
-							className="inline-flex h-9 items-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
-						>
-							{activeMutation.isPending ? 'Saving...' : isEdit ? 'Update' : 'Create'}
-						</button>
-					</div>
-
-					{activeMutation.isError && (
-						<p className="text-sm text-destructive">{activeMutation.error.message}</p>
-					)}
-					{activeMutation.isSuccess && (
-						<p className="text-sm text-green-600">Saved successfully.</p>
-					)}
-				</form>
-			</DialogContent>
-		</Dialog>
-	);
-}
diff --git a/web/src/components/settings/prompt-editor.tsx b/web/src/components/settings/prompt-editor.tsx
index ca58adca..9812d1ec 100644
--- a/web/src/components/settings/prompt-editor.tsx
+++ b/web/src/components/settings/prompt-editor.tsx
@@ -4,7 +4,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { ChevronDown, ChevronRight } from 'lucide-react';
 import { useEffect, useState } from 'react';
 
-type EditTarget = { type: 'template'; agentType: string } | { type: 'partial'; name: string };
+type EditTarget = { type: 'partial'; name: string };
 
 interface PromptEditorProps {
 	target: EditTarget;
@@ -12,169 +12,9 @@ interface PromptEditorProps {
 }
 
 export function PromptEditor({ target, onClose }: PromptEditorProps) {
-	if (target.type === 'template') {
-		return <TemplateEditor agentType={target.agentType} onClose={onClose} />;
-	}
 	return <PartialEditor name={target.name} onClose={onClose} />;
 }
 
-function TemplateEditor({ agentType, onClose }: { agentType: string; onClose: () => void }) {
-	const queryClient = useQueryClient();
-	const [content, setContent] = useState('');
-	const [validationStatus, setValidationStatus] = useState<string | null>(null);
-	const [isDirty, setIsDirty] = useState(false);
-
-	// Fetch current prompt from agent definition
-	const definitionQuery = useQuery(trpc.agentDefinitions.get.queryOptions({ agentType }));
-	const defaultQuery = useQuery(trpc.prompts.getDefault.queryOptions({ agentType }));
-	const variablesQuery = useQuery(trpc.prompts.variables.queryOptions());
-	const partialsQuery = useQuery(trpc.prompts.listPartials.queryOptions());
-
-	const definition = definitionQuery.data?.definition;
-	const hasCustom = !!definition?.prompts?.systemPrompt;
-
-	useEffect(() => {
-		if (definition?.prompts?.systemPrompt) {
-			setContent(definition.prompts.systemPrompt);
-		} else if (defaultQuery.data) {
-			setContent(defaultQuery.data.content);
-		}
-	}, [definition?.prompts?.systemPrompt, defaultQuery.data]);
-
-	const saveMutation = useMutation({
-		mutationFn: async () => {
-			await trpcClient.agentDefinitions.updatePrompt.mutate({
-				agentType,
-				systemPrompt: content,
-			});
-		},
-		onSuccess: () => {
-			queryClient.invalidateQueries({
-				queryKey: trpc.agentDefinitions.get.queryOptions({ agentType }).queryKey,
-			});
-			queryClient.invalidateQueries({
-				queryKey: trpc.agentDefinitions.list.queryOptions().queryKey,
-			});
-			setIsDirty(false);
-			setValidationStatus('Saved.');
-		},
-	});
-
-	const resetMutation = useMutation({
-		mutationFn: async () => {
-			await trpcClient.agentDefinitions.resetPrompt.mutate({ agentType });
-		},
-		onSuccess: () => {
-			queryClient.invalidateQueries({
-				queryKey: trpc.agentDefinitions.get.queryOptions({ agentType }).queryKey,
-			});
-			queryClient.invalidateQueries({
-				queryKey: trpc.agentDefinitions.list.queryOptions().queryKey,
-			});
-			if (defaultQuery.data) {
-				setContent(defaultQuery.data.content);
-			}
-			setIsDirty(false);
-			setValidationStatus('Reset to default.');
-		},
-	});
-
-	const validateMutation = useMutation({
-		mutationFn: () => trpcClient.prompts.validate.mutate({ template: content }),
-		onSuccess: (result) => {
-			if (result.valid) {
-				setValidationStatus('Valid.');
-			} else {
-				setValidationStatus(`Invalid: ${result.error}`);
-			}
-		},
-	});
-
-	function loadDefault() {
-		if (defaultQuery.data) {
-			setContent(defaultQuery.data.content);
-			setIsDirty(true);
-		}
-	}
-
-	return (
-		<div className="space-y-4">
-			<div className="flex items-center justify-between">
-				<h2 className="text-xl font-bold">
-					Prompt: {agentType}
-					{hasCustom && <Badge className="ml-2">custom</Badge>}
-				</h2>
-				<div className="flex gap-2">
-					<button
-						type="button"
-						onClick={() => resetMutation.mutate()}
-						disabled={!hasCustom || resetMutation.isPending}
-						className="inline-flex h-9 items-center rounded-md border border-input px-4 text-sm hover:bg-accent disabled:opacity-50"
-					>
-						Reset to Default
-					</button>
-					<button
-						type="button"
-						onClick={() => saveMutation.mutate()}
-						disabled={saveMutation.isPending}
-						className="inline-flex h-9 items-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
-					>
-						{saveMutation.isPending ? 'Saving...' : 'Save'}
-					</button>
-				</div>
-			</div>
-
-			<div className="grid grid-cols-3 gap-4">
-				<div className="col-span-2 space-y-2">
-					<textarea
-						value={content}
-						onChange={(e) => {
-							setContent(e.target.value);
-							setIsDirty(true);
-							setValidationStatus(null);
-						}}
-						className="w-full h-[600px] rounded-md border border-input bg-background px-3 py-2 text-sm font-mono resize-y focus:outline-none focus:ring-2 focus:ring-ring"
-						spellCheck={false}
-					/>
-					<div className="flex items-center gap-4">
-						<button
-							type="button"
-							onClick={loadDefault}
-							className="text-sm text-muted-foreground hover:text-foreground"
-						>
-							Load Default
-						</button>
-						<button
-							type="button"
-							onClick={() => validateMutation.mutate()}
-							disabled={validateMutation.isPending}
-							className="text-sm text-muted-foreground hover:text-foreground"
-						>
-							Validate
-						</button>
-						{validationStatus && (
-							<span
-								className={`text-sm ${
-									validationStatus.startsWith('Invalid')
-										? 'text-destructive'
-										: 'text-green-600 dark:text-green-400'
-								}`}
-							>
-								{validationStatus}
-							</span>
-						)}
-						{saveMutation.isError && (
-							<span className="text-sm text-destructive">{saveMutation.error.message}</span>
-						)}
-					</div>
-				</div>
-
-				<ReferencePanel variables={variablesQuery.data} partials={partialsQuery.data} />
-			</div>
-		</div>
-	);
-}
-
 function PartialEditor({ name, onClose }: { name: string; onClose: () => void }) {
 	const queryClient = useQueryClient();
 	const [content, setContent] = useState('');
diff --git a/web/src/routes/settings/definitions.tsx b/web/src/routes/settings/definitions.tsx
index c1ebd80b..99cdbad2 100644
--- a/web/src/routes/settings/definitions.tsx
+++ b/web/src/routes/settings/definitions.tsx
@@ -49,7 +49,7 @@ function AgentDefinitionsPage() {
 			);
 		}
 
-		// type === 'partial' — keep existing PromptEditor flow
+		// type === 'partial'
 		return (
 			<div className="space-y-4">
 				<button
@@ -59,8 +59,10 @@ function AgentDefinitionsPage() {
 				>
 					<ArrowLeft className="h-4 w-4" /> Back
 				</button>
-				{/* Lazy import to avoid circular dep — PromptEditor is still used for partials */}
-				<PartialEditorWrapper name={editTarget.name} onClose={() => setEditTarget(null)} />
+				<PromptEditor
+					target={{ type: 'partial', name: editTarget.name }}
+					onClose={() => setEditTarget(null)}
+				/>
 			</div>
 		);
 	}
@@ -133,14 +135,6 @@ function AgentDefinitionsPage() {
 	);
 }
 
-// ─────────────────────────────────────────────────────────────────────────────
-// Partial editor wrapper — renders the PromptEditor for partials inline
-// ─────────────────────────────────────────────────────────────────────────────
-
-function PartialEditorWrapper({ name, onClose }: { name: string; onClose: () => void }) {
-	return <PromptEditor target={{ type: 'partial', name }} onClose={onClose} />;
-}
-
 // ─────────────────────────────────────────────────────────────────────────────
 // Partials tab
 // ─────────────────────────────────────────────────────────────────────────────

From cfdf932f5296a7194d0005b43a0e5e66455a201e Mon Sep 17 00:00:00 2001
From: Cascade Bot <bot@cascade.dev>
Date: Sun, 1 Mar 2026 11:53:39 +0000
Subject: [PATCH 4/5] fix: address remaining code review concerns

- Add guard in handleSave to prevent saving with empty agentType in create mode
- Remove no-op `required` attribute from Agent Type input (not in a <form>)
- Remove dead `isDirty` state from SystemPromptPanel (was set but never read)
- Show JSON parse error and keep user on JSON tab when switching to Definition
  tab with invalid JSON, instead of silently swallowing the error

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../components/settings/agent-definition-editor.tsx | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/web/src/components/settings/agent-definition-editor.tsx b/web/src/components/settings/agent-definition-editor.tsx
index 224a4fc6..176d4571 100644
--- a/web/src/components/settings/agent-definition-editor.tsx
+++ b/web/src/components/settings/agent-definition-editor.tsx
@@ -514,7 +514,6 @@ function SystemPromptPanel({ agentType }: { agentType: string }) {
 	const queryClient = useQueryClient();
 	const [content, setContent] = useState('');
 	const [validationStatus, setValidationStatus] = useState<string | null>(null);
-	const [isDirty, setIsDirty] = useState(false);
 
 	const definitionQuery = useQuery(trpc.agentDefinitions.get.queryOptions({ agentType }));
 	const defaultQuery = useQuery(trpc.prompts.getDefault.queryOptions({ agentType }));
@@ -546,7 +545,6 @@ function SystemPromptPanel({ agentType }: { agentType: string }) {
 			queryClient.invalidateQueries({
 				queryKey: trpc.agentDefinitions.list.queryOptions().queryKey,
 			});
-			setIsDirty(false);
 			setValidationStatus('Saved.');
 		},
 	});
@@ -565,7 +563,6 @@ function SystemPromptPanel({ agentType }: { agentType: string }) {
 			if (defaultQuery.data) {
 				setContent(defaultQuery.data.content);
 			}
-			setIsDirty(false);
 			setValidationStatus('Reset to default.');
 		},
 	});
@@ -584,7 +581,6 @@ function SystemPromptPanel({ agentType }: { agentType: string }) {
 	function loadDefault() {
 		if (defaultQuery.data) {
 			setContent(defaultQuery.data.content);
-			setIsDirty(true);
 			setValidationStatus(null);
 		}
 	}
@@ -624,7 +620,6 @@ function SystemPromptPanel({ agentType }: { agentType: string }) {
 						value={content}
 						onChange={(e) => {
 							setContent(e.target.value);
-							setIsDirty(true);
 							setValidationStatus(null);
 						}}
 						className="w-full h-[500px] rounded-md border border-input bg-background px-3 py-2 text-sm font-mono resize-y focus:outline-none focus:ring-2 focus:ring-ring"
@@ -741,14 +736,17 @@ function useDefinitionEditor(existing: DefinitionRow | undefined, onClose: () =>
 			try {
 				setDef(JSON.parse(jsonText) as AgentDefinition);
 				setJsonError(null);
-			} catch {
-				// leave form as-is if JSON is invalid
+			} catch (err) {
+				setJsonError((err as Error).message);
+				return; // keep user on JSON tab so they can fix the error
 			}
 		}
 		setActiveTab(tab);
 	};
 
 	const handleSave = () => {
+		if (!isEdit && !agentType.trim()) return;
+
 		let submission = def;
 		if (activeTab === 'json') {
 			try {
@@ -878,7 +876,6 @@ export function AgentDefinitionEditor({ existing, onClose }: AgentDefinitionEdit
 						value={agentType}
 						onChange={(e) => setAgentType(e.target.value)}
 						placeholder="e.g. implementation, review, debug"
-						required
 					/>
 				</div>
 			)}

From 84609860950aa73a4b3c1cd1f521d1d2703f4770 Mon Sep 17 00:00:00 2001
From: Cascade Bot <bot@cascade.dev>
Date: Sun, 1 Mar 2026 12:15:41 +0000
Subject: [PATCH 5/5] fix: add inline error for empty agent type and simplify
 EditTarget

- Show inline error message when user tries to save with empty agent type
  in create mode, instead of silently bailing out
- Highlight the input field with destructive border on validation error
- Clear the error when user starts typing
- Remove vestigial `type` discriminator from single-variant EditTarget type

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../settings/agent-definition-editor.tsx        | 17 +++++++++++++++--
 web/src/components/settings/prompt-editor.tsx   |  4 +---
 web/src/routes/settings/definitions.tsx         |  5 +----
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/web/src/components/settings/agent-definition-editor.tsx b/web/src/components/settings/agent-definition-editor.tsx
index 176d4571..a1f12ac1 100644
--- a/web/src/components/settings/agent-definition-editor.tsx
+++ b/web/src/components/settings/agent-definition-editor.tsx
@@ -707,6 +707,7 @@ function useDefinitionEditor(existing: DefinitionRow | undefined, onClose: () =>
 			: JSON.stringify(EMPTY_DEFINITION, null, 2),
 	);
 	const [jsonError, setJsonError] = useState<string | null>(null);
+	const [agentTypeError, setAgentTypeError] = useState<string | null>(null);
 	const [activeTab, setActiveTab] = useState('definition');
 
 	const onSuccess = () => {
@@ -745,7 +746,10 @@ function useDefinitionEditor(existing: DefinitionRow | undefined, onClose: () =>
 	};
 
 	const handleSave = () => {
-		if (!isEdit && !agentType.trim()) return;
+		if (!isEdit && !agentType.trim()) {
+			setAgentTypeError('Agent type is required.');
+			return;
+		}
 
 		let submission = def;
 		if (activeTab === 'json') {
@@ -776,16 +780,22 @@ function useDefinitionEditor(existing: DefinitionRow | undefined, onClose: () =>
 
 	const clearJsonError = () => setJsonError(null);
 
+	const updateAgentType = (value: string) => {
+		setAgentType(value);
+		if (agentTypeError) setAgentTypeError(null);
+	};
+
 	return {
 		isEdit,
 		agentType,
-		setAgentType,
+		setAgentType: updateAgentType,
 		def,
 		setDef,
 		jsonText,
 		setJsonText,
 		jsonError,
 		clearJsonError,
+		agentTypeError,
 		activeTab,
 		activeMutation,
 		handleTabChange,
@@ -815,6 +825,7 @@ export function AgentDefinitionEditor({ existing, onClose }: AgentDefinitionEdit
 		setJsonText,
 		jsonError,
 		clearJsonError,
+		agentTypeError,
 		activeTab,
 		activeMutation,
 		handleTabChange,
@@ -876,7 +887,9 @@ export function AgentDefinitionEditor({ existing, onClose }: AgentDefinitionEdit
 						value={agentType}
 						onChange={(e) => setAgentType(e.target.value)}
 						placeholder="e.g. implementation, review, debug"
+						className={agentTypeError ? 'border-destructive' : ''}
 					/>
+					{agentTypeError && <p className="text-sm text-destructive">{agentTypeError}</p>}
 				</div>
 			)}
 
diff --git a/web/src/components/settings/prompt-editor.tsx b/web/src/components/settings/prompt-editor.tsx
index 9812d1ec..d021cca5 100644
--- a/web/src/components/settings/prompt-editor.tsx
+++ b/web/src/components/settings/prompt-editor.tsx
@@ -4,10 +4,8 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { ChevronDown, ChevronRight } from 'lucide-react';
 import { useEffect, useState } from 'react';
 
-type EditTarget = { type: 'partial'; name: string };
-
 interface PromptEditorProps {
-	target: EditTarget;
+	target: { name: string };
 	onClose: () => void;
 }
 
diff --git a/web/src/routes/settings/definitions.tsx b/web/src/routes/settings/definitions.tsx
index 99cdbad2..6ccd1b50 100644
--- a/web/src/routes/settings/definitions.tsx
+++ b/web/src/routes/settings/definitions.tsx
@@ -59,10 +59,7 @@ function AgentDefinitionsPage() {
 				>
 					<ArrowLeft className="h-4 w-4" /> Back
 				</button>
-				<PromptEditor
-					target={{ type: 'partial', name: editTarget.name }}
-					onClose={() => setEditTarget(null)}
-				/>
+				<PromptEditor target={{ name: editTarget.name }} onClose={() => setEditTarget(null)} />
 			</div>
 		);
 	}