diff --git a/web/src/components/settings/agent-definition-form.tsx b/web/src/components/settings/agent-definition-editor.tsx
similarity index 61%
rename from web/src/components/settings/agent-definition-form.tsx
rename to web/src/components/settings/agent-definition-editor.tsx
index 152ccab1..a1f12ac1 100644
--- a/web/src/components/settings/agent-definition-form.tsx
+++ b/web/src/components/settings/agent-definition-editor.tsx
@@ -1,6 +1,5 @@
 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 {
@@ -15,7 +14,8 @@ 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';
+import { useEffect, useState } from 'react';
+import { ReferencePanel } from './prompt-editor.js';
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Types
@@ -25,10 +25,10 @@ type RouterOutput = inferRouterOutputs<AppRouter>;
 type DefinitionRow = RouterOutput['agentDefinitions']['list'][number];
 type AgentDefinition = DefinitionRow['definition'];
 
-interface AgentDefinitionFormDialogProps {
-	open: boolean;
-	onOpenChange: (open: boolean) => void;
+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 {
@@ -41,7 +41,7 @@ interface SchemaData {
 }
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Helper components
+// Helper components (shared with form dialog)
 // ─────────────────────────────────────────────────────────────────────────────
 
 function Toggle({
@@ -506,6 +506,164 @@ function IntegrationsSection({
 	);
 }
 
+// ─────────────────────────────────────────────────────────────────────────────
+// 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
 // ─────────────────────────────────────────────────────────────────────────────
@@ -533,21 +691,14 @@ const EMPTY_DEFINITION: AgentDefinition = {
 };
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Main component
+// Hook — encapsulates all editor state and mutations
 // ─────────────────────────────────────────────────────────────────────────────
 
-export function AgentDefinitionFormDialog({
-	open,
-	onOpenChange,
-	existing,
-}: AgentDefinitionFormDialogProps) {
+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(
@@ -556,14 +707,12 @@ export function AgentDefinitionFormDialog({
 			: 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 [agentTypeError, setAgentTypeError] = useState<string | null>(null);
+	const [activeTab, setActiveTab] = useState('definition');
 
 	const onSuccess = () => {
 		queryClient.invalidateQueries({ queryKey });
-		onOpenChange(false);
+		onClose();
 	};
 
 	const createMutation = useMutation({
@@ -581,187 +730,255 @@ export function AgentDefinitionFormDialog({
 	const activeMutation = isEdit ? updateMutation : createMutation;
 
 	const handleTabChange = (tab: string) => {
-		if (tab === 'json' && activeTab === 'form') {
+		if (tab === 'json' && activeTab === 'definition') {
 			setJsonText(JSON.stringify(def, null, 2));
 			setJsonError(null);
+		} else if (tab === 'definition' && activeTab === 'json') {
+			try {
+				setDef(JSON.parse(jsonText) as AgentDefinition);
+				setJsonError(null);
+			} catch (err) {
+				setJsonError((err as Error).message);
+				return; // keep user on JSON tab so they can fix the error
+			}
 		}
 		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 handleSave = () => {
+		if (!isEdit && !agentType.trim()) {
+			setAgentTypeError('Agent type is required.');
+			return;
 		}
-	};
 
-	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
+				setDef(submission);
 				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 });
+		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);
+
+	const updateAgentType = (value: string) => {
+		setAgentType(value);
+		if (agentTypeError) setAgentTypeError(null);
+	};
+
+	return {
+		isEdit,
+		agentType,
+		setAgentType: updateAgentType,
+		def,
+		setDef,
+		jsonText,
+		setJsonText,
+		jsonError,
+		clearJsonError,
+		agentTypeError,
+		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,
+		agentTypeError,
+		activeTab,
+		activeMutation,
+		handleTabChange,
+		handleSave,
+		setIdentity,
+		setCap,
+		setBackend,
+		setTrailing,
+	} = useDefinitionEditor(existing, onClose);
+
 	// ─────────────────────────────────────────────────────────────────────────
 	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>
+		<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>
 					)}
-
-					<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">
+				</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={() => 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"
+							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"
 						>
 							{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>
+				</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"
+						className={agentTypeError ? 'border-destructive' : ''}
+					/>
+					{agentTypeError && <p className="text-sm text-destructive">{agentTypeError}</p>}
+				</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);
+							clearJsonError();
+						}}
+						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..d021cca5 100644
--- a/web/src/components/settings/prompt-editor.tsx
+++ b/web/src/components/settings/prompt-editor.tsx
@@ -4,177 +4,15 @@ 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 };
-
 interface PromptEditorProps {
-	target: EditTarget;
+	target: { name: string };
 	onClose: () => void;
 }
 
 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('');
@@ -294,7 +132,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..6ccd1b50 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'
 		return (
 			<div className="space-y-4">
 				<button
@@ -38,7 +59,7 @@ function AgentDefinitionsPage() {
 				>
 					<ArrowLeft className="h-4 w-4" /> Back
 				</button>
-				<PromptEditor target={editTarget} onClose={() => setEditTarget(null)} />
+				<PromptEditor target={{ name: editTarget.name }} onClose={() => setEditTarget(null)} />
 			</div>
 		);
 	}
@@ -55,7 +76,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 +86,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 +97,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 +116,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,59 +132,9 @@ 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>;
-	}
-
-	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>
-	);
-}
+// ─────────────────────────────────────────────────────────────────────────────
+// Partials tab
+// ─────────────────────────────────────────────────────────────────────────────
 
 function PartialsTab({ onEdit }: { onEdit: (name: string) => void }) {
 	const queryClient = useQueryClient();