first commit

packages/admin/tests/components/CapabilityConsentDialog.test.tsx

@@ -0,0 +1,256 @@
+import * as React from "react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render } from "vitest-browser-react";
+
+import { CapabilityConsentDialog } from "../../src/components/CapabilityConsentDialog";
+
+describe("CapabilityConsentDialog", () => {
+	let onConfirm: ReturnType<typeof vi.fn>;
+	let onCancel: ReturnType<typeof vi.fn>;
+
+	beforeEach(() => {
+		onConfirm = vi.fn();
+		onCancel = vi.fn();
+	});
+
+	it("renders dialog with plugin name and capabilities", async () => {
+		const screen = await render(
+			<CapabilityConsentDialog
+				pluginName="SEO Helper"
+				capabilities={["read:content", "write:content"]}
+				onConfirm={onConfirm}
+				onCancel={onCancel}
+			/>,
+		);
+
+		await expect
+			.element(screen.getByText("SEO Helper requires the following permissions:"))
+			.toBeInTheDocument();
+		await expect.element(screen.getByText("Read your content")).toBeInTheDocument();
+		await expect
+			.element(screen.getByText("Create, update, and delete content"))
+			.toBeInTheDocument();
+	});
+
+	it("shows 'Plugin Permissions' title for fresh install", async () => {
+		const screen = await render(
+			<CapabilityConsentDialog
+				pluginName="Test"
+				capabilities={["read:content"]}
+				onConfirm={onConfirm}
+				onCancel={onCancel}
+			/>,
+		);
+
+		await expect.element(screen.getByText("Plugin Permissions")).toBeInTheDocument();
+	});
+
+	it("shows 'Review New Permissions' title for update with new capabilities", async () => {
+		const screen = await render(
+			<CapabilityConsentDialog
+				pluginName="Test"
+				capabilities={["read:content", "write:content"]}
+				newCapabilities={["write:content"]}
+				onConfirm={onConfirm}
+				onCancel={onCancel}
+			/>,
+		);
+
+		await expect.element(screen.getByText("Review New Permissions")).toBeInTheDocument();
+		await expect
+			.element(screen.getByText("Test is requesting additional permissions:"))
+			.toBeInTheDocument();
+	});
+
+	it("marks new capabilities with NEW badge", async () => {
+		const screen = await render(
+			<CapabilityConsentDialog
+				pluginName="Test"
+				capabilities={["read:content", "write:content", "network:fetch"]}
+				newCapabilities={["network:fetch"]}
+				onConfirm={onConfirm}
+				onCancel={onCancel}
+			/>,
+		);
+
+		// The NEW badge should appear for network:fetch (exact match to avoid matching "New" in header)
+		const newBadges = screen.getByText("NEW", { exact: true }).all();
+		expect(newBadges.length).toBeGreaterThanOrEqual(1);
+	});
+
+	it("shows 'Accept & Install' button for fresh install", async () => {
+		const screen = await render(
+			<CapabilityConsentDialog
+				pluginName="Test"
+				capabilities={["read:content"]}
+				onConfirm={onConfirm}
+				onCancel={onCancel}
+			/>,
+		);
+
+		await expect.element(screen.getByText("Accept & Install")).toBeInTheDocument();
+	});
+
+	it("shows 'Accept & Update' button for update", async () => {
+		const screen = await render(
+			<CapabilityConsentDialog
+				pluginName="Test"
+				capabilities={["read:content"]}
+				newCapabilities={["read:content"]}
+				onConfirm={onConfirm}
+				onCancel={onCancel}
+			/>,
+		);
+
+		await expect.element(screen.getByText("Accept & Update")).toBeInTheDocument();
+	});
+
+	it("calls onConfirm when confirm button is clicked", async () => {
+		const screen = await render(
+			<CapabilityConsentDialog
+				pluginName="Test"
+				capabilities={["read:content"]}
+				onConfirm={onConfirm}
+				onCancel={onCancel}
+			/>,
+		);
+
+		await screen.getByText("Accept & Install").click();
+		expect(onConfirm).toHaveBeenCalledOnce();
+	});
+
+	it("calls onCancel when cancel button is clicked", async () => {
+		const screen = await render(
+			<CapabilityConsentDialog
+				pluginName="Test"
+				capabilities={["read:content"]}
+				onConfirm={onConfirm}
+				onCancel={onCancel}
+			/>,
+		);
+
+		await screen.getByText("Cancel").click();
+		expect(onCancel).toHaveBeenCalledOnce();
+	});
+
+	it("shows warning banner for 'warn' audit verdict", async () => {
+		const screen = await render(
+			<CapabilityConsentDialog
+				pluginName="Test"
+				capabilities={["read:content"]}
+				auditVerdict="warn"
+				onConfirm={onConfirm}
+				onCancel={onCancel}
+			/>,
+		);
+
+		await expect
+			.element(screen.getByText("Security audit flagged potential concerns with this plugin."))
+			.toBeInTheDocument();
+	});
+
+	it("shows danger banner for 'fail' audit verdict", async () => {
+		const screen = await render(
+			<CapabilityConsentDialog
+				pluginName="Test"
+				capabilities={["read:content"]}
+				auditVerdict="fail"
+				onConfirm={onConfirm}
+				onCancel={onCancel}
+			/>,
+		);
+
+		await expect
+			.element(screen.getByText("Security audit flagged this plugin as potentially unsafe."))
+			.toBeInTheDocument();
+	});
+
+	it("shows no audit banner for 'pass' verdict", async () => {
+		const screen = await render(
+			<CapabilityConsentDialog
+				pluginName="Test"
+				capabilities={["read:content"]}
+				auditVerdict="pass"
+				onConfirm={onConfirm}
+				onCancel={onCancel}
+			/>,
+		);
+
+		const warnText = screen.getByText(
+			"Security audit flagged potential concerns with this plugin.",
+		);
+		await expect.element(warnText).not.toBeInTheDocument();
+	});
+
+	it("shows pending state during install", async () => {
+		const screen = await render(
+			<CapabilityConsentDialog
+				pluginName="Test"
+				capabilities={["read:content"]}
+				isPending={true}
+				onConfirm={onConfirm}
+				onCancel={onCancel}
+			/>,
+		);
+
+		await expect.element(screen.getByText("Installing...")).toBeInTheDocument();
+	});
+
+	it("shows pending state during update", async () => {
+		const screen = await render(
+			<CapabilityConsentDialog
+				pluginName="Test"
+				capabilities={["read:content"]}
+				newCapabilities={["read:content"]}
+				isPending={true}
+				onConfirm={onConfirm}
+				onCancel={onCancel}
+			/>,
+		);
+
+		await expect.element(screen.getByText("Updating...")).toBeInTheDocument();
+	});
+
+	it("appends allowed hosts for network:fetch", async () => {
+		const screen = await render(
+			<CapabilityConsentDialog
+				pluginName="Test"
+				capabilities={["network:fetch"]}
+				allowedHosts={["api.example.com"]}
+				onConfirm={onConfirm}
+				onCancel={onCancel}
+			/>,
+		);
+
+		await expect
+			.element(screen.getByText("Make network requests to: api.example.com"))
+			.toBeInTheDocument();
+	});
+
+	it("renders raw capability string for unknown capabilities", async () => {
+		const screen = await render(
+			<CapabilityConsentDialog
+				pluginName="Test"
+				capabilities={["custom:magic"]}
+				onConfirm={onConfirm}
+				onCancel={onCancel}
+			/>,
+		);
+
+		await expect.element(screen.getByText("custom:magic")).toBeInTheDocument();
+	});
+
+	it("has correct dialog role and aria attributes", async () => {
+		const screen = await render(
+			<CapabilityConsentDialog
+				pluginName="Test"
+				capabilities={["read:content"]}
+				onConfirm={onConfirm}
+				onCancel={onCancel}
+			/>,
+		);
+
+		const dialog = screen.getByRole("dialog");
+		await expect.element(dialog).toBeInTheDocument();
+	});
+});

packages/admin/tests/components/ContentEditor.test.tsx

@@ -0,0 +1,376 @@
+import * as React from "react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render } from "vitest-browser-react";
+
+import {
+	ContentEditor,
+	type FieldDescriptor,
+	type ContentEditorProps,
+} from "../../src/components/ContentEditor";
+import type { ContentItem } from "../../src/lib/api";
+
+// Mock child components that have complex dependencies
+vi.mock("../../src/components/PortableTextEditor", () => ({
+	PortableTextEditor: ({ placeholder }: any) => (
+		<div data-testid="portable-text-editor">{placeholder}</div>
+	),
+}));
+
+vi.mock("../../src/components/RevisionHistory", () => ({
+	RevisionHistory: () => <div data-testid="revision-history">Revision History</div>,
+}));
+
+vi.mock("../../src/components/TaxonomySidebar", () => ({
+	TaxonomySidebar: () => <div data-testid="taxonomy-sidebar">Taxonomy</div>,
+}));
+
+vi.mock("../../src/components/MediaPickerModal", () => ({
+	MediaPickerModal: () => null,
+}));
+
+vi.mock("../../src/components/editor/DocumentOutline", () => ({
+	DocumentOutline: () => <div data-testid="doc-outline">Outline</div>,
+}));
+
+vi.mock("@tanstack/react-router", async () => {
+	const actual = await vi.importActual("@tanstack/react-router");
+	return {
+		...actual,
+		Link: ({ children, ...props }: any) => <a {...props}>{children}</a>,
+	};
+});
+
+vi.mock("../../src/lib/api", async () => {
+	const actual = await vi.importActual("../../src/lib/api");
+	return {
+		...actual,
+		getPreviewUrl: vi.fn().mockResolvedValue({ url: "https://example.com/preview" }),
+	};
+});
+
+const defaultFields: Record<string, FieldDescriptor> = {
+	title: { kind: "string", label: "Title", required: true },
+	body: { kind: "string", label: "Body" },
+};
+
+const MOVE_TO_TRASH_PATTERN = /Move to Trash/i;
+
+function makeItem(overrides: Partial<ContentItem> = {}): ContentItem {
+	return {
+		id: "item-1",
+		type: "posts",
+		slug: "my-post",
+		status: "draft",
+		data: { title: "My Post", body: "Some content" },
+		authorId: null,
+		createdAt: "2025-01-15T10:30:00Z",
+		updatedAt: "2025-01-15T10:30:00Z",
+		publishedAt: null,
+		scheduledAt: null,
+		liveRevisionId: null,
+		draftRevisionId: null,
+		...overrides,
+	};
+}
+
+function renderEditor(props: Partial<ContentEditorProps> = {}) {
+	const defaultProps: ContentEditorProps = {
+		collection: "posts",
+		collectionLabel: "Post",
+		fields: defaultFields,
+		isNew: true,
+		onSave: vi.fn(),
+		...props,
+	};
+	return render(<ContentEditor {...defaultProps} />);
+}
+
+describe("ContentEditor", () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+	});
+
+	describe("slug generation", () => {
+		it("auto-generates slug from title for new items", async () => {
+			const screen = await renderEditor({ isNew: true });
+			const titleInput = screen.getByLabelText("Title");
+			await titleInput.fill("Hello World Post");
+
+			const slugInput = screen.getByLabelText("Slug");
+			await expect.element(slugInput).toHaveValue("hello-world-post");
+		});
+
+		it("slug accepts manual override", async () => {
+			const screen = await renderEditor({ isNew: true });
+			const slugInput = screen.getByLabelText("Slug");
+			await slugInput.fill("custom-slug");
+			await expect.element(slugInput).toHaveValue("custom-slug");
+
+			// After manual edit, typing in title should NOT update slug
+			const titleInput = screen.getByLabelText("Title");
+			await titleInput.fill("New Title");
+			await expect.element(slugInput).toHaveValue("custom-slug");
+		});
+
+		it("slug is editable for new items", async () => {
+			const screen = await renderEditor({ isNew: true });
+			const slugInput = screen.getByLabelText("Slug");
+			await expect.element(slugInput).toBeEnabled();
+		});
+	});
+
+	describe("field rendering", () => {
+		it("renders string fields as text inputs", async () => {
+			const screen = await renderEditor({
+				fields: { title: { kind: "string", label: "Title" } },
+			});
+			const input = screen.getByLabelText("Title");
+			await expect.element(input).toBeInTheDocument();
+		});
+
+		it("renders boolean fields as switches", async () => {
+			const screen = await renderEditor({
+				fields: { featured: { kind: "boolean", label: "Featured" } },
+			});
+			const toggle = screen.getByRole("switch");
+			await expect.element(toggle).toBeInTheDocument();
+		});
+
+		it("renders number fields as number inputs", async () => {
+			const screen = await renderEditor({
+				fields: { order: { kind: "number", label: "Order" } },
+			});
+			const input = screen.getByLabelText("Order");
+			await expect.element(input).toHaveAttribute("type", "number");
+		});
+	});
+
+	describe("saving", () => {
+		it("save form calls onSave with formData including slug", async () => {
+			const onSave = vi.fn();
+			const screen = await renderEditor({ isNew: true, onSave });
+
+			const titleInput = screen.getByLabelText("Title");
+			await titleInput.fill("Test Title");
+
+			const saveBtn = screen.getByRole("button", { name: "Save" });
+			await saveBtn.click();
+
+			expect(onSave).toHaveBeenCalledWith(
+				expect.objectContaining({
+					data: expect.objectContaining({ title: "Test Title" }),
+					slug: "test-title",
+					bylines: [],
+				}),
+			);
+		});
+
+		it("SaveButton shows correct dirty state for new items", async () => {
+			const screen = await renderEditor({ isNew: true });
+			// New items are always dirty
+			const saveBtn = screen.getByRole("button", { name: "Save" });
+			await expect.element(saveBtn).toBeEnabled();
+		});
+
+		it("SaveButton is disabled (Saved) for existing item with no changes", async () => {
+			const item = makeItem();
+			const screen = await renderEditor({ isNew: false, item });
+			const savedBtn = screen.getByRole("button", { name: "Saved" });
+			await expect.element(savedBtn).toBeDisabled();
+		});
+	});
+
+	describe("delete", () => {
+		it("shows delete button for existing items", async () => {
+			const item = makeItem();
+			const onDelete = vi.fn();
+			const screen = await renderEditor({ isNew: false, item, onDelete });
+			const deleteBtn = screen.getByRole("button", { name: MOVE_TO_TRASH_PATTERN });
+			await expect.element(deleteBtn).toBeInTheDocument();
+		});
+
+		it("delete button opens confirmation dialog and confirming calls onDelete", async () => {
+			const item = makeItem();
+			const onDelete = vi.fn();
+			const screen = await renderEditor({ isNew: false, item, onDelete });
+
+			// Click the delete trigger button
+			const deleteBtn = screen.getByRole("button", { name: MOVE_TO_TRASH_PATTERN });
+			await deleteBtn.click();
+
+			// Dialog should appear with "Move to Trash?" title
+			await expect.element(screen.getByText("Move to Trash?")).toBeInTheDocument();
+
+			// There are multiple "Move to Trash" buttons - click the last one (the dialog confirm)
+			const allBtns = document.querySelectorAll("button");
+			const trashBtns = [...allBtns].filter((b) => b.textContent?.trim() === "Move to Trash");
+			if (trashBtns[1]) {
+				trashBtns[1].click();
+			}
+
+			await vi.waitFor(() => {
+				expect(onDelete).toHaveBeenCalled();
+			});
+		});
+
+		it("does not show delete button for new items", async () => {
+			const screen = await renderEditor({ isNew: true });
+			await expect
+				.element(screen.getByText("Move to Trash"), { timeout: 100 })
+				.not.toBeInTheDocument();
+		});
+	});
+
+	describe("publish actions", () => {
+		it("shows Publish button for draft items", async () => {
+			const item = makeItem({ status: "draft" });
+			const onPublish = vi.fn();
+			const screen = await renderEditor({ isNew: false, item, onPublish });
+			const publishBtn = screen.getByRole("button", { name: "Publish" });
+			await expect.element(publishBtn).toBeInTheDocument();
+		});
+
+		it("publish button calls onPublish", async () => {
+			const item = makeItem({ status: "draft" });
+			const onPublish = vi.fn();
+			const screen = await renderEditor({ isNew: false, item, onPublish });
+			const publishBtn = screen.getByRole("button", { name: "Publish" });
+			await publishBtn.click();
+			expect(onPublish).toHaveBeenCalled();
+		});
+
+		it("shows Unpublish for published items with supportsDrafts", async () => {
+			const item = makeItem({
+				status: "published",
+				liveRevisionId: "rev-1",
+				draftRevisionId: "rev-1",
+			});
+			const onUnpublish = vi.fn();
+			const screen = await renderEditor({
+				isNew: false,
+				item,
+				onUnpublish,
+				supportsDrafts: true,
+			});
+			const unpublishBtn = screen.getByRole("button", { name: "Unpublish" });
+			await expect.element(unpublishBtn).toBeInTheDocument();
+		});
+
+		it("unpublish button calls onUnpublish", async () => {
+			const item = makeItem({
+				status: "published",
+				liveRevisionId: "rev-1",
+				draftRevisionId: "rev-1",
+			});
+			const onUnpublish = vi.fn();
+			const screen = await renderEditor({
+				isNew: false,
+				item,
+				onUnpublish,
+				supportsDrafts: true,
+			});
+			const unpublishBtn = screen.getByRole("button", { name: "Unpublish" });
+			await unpublishBtn.click();
+			expect(onUnpublish).toHaveBeenCalled();
+		});
+	});
+
+	describe("distraction-free mode", () => {
+		it("toggle adds fixed class for distraction-free mode", async () => {
+			const screen = await renderEditor({ isNew: true });
+			const enterBtn = screen.getByRole("button", { name: "Enter distraction-free mode" });
+			await enterBtn.click();
+
+			// The form should now have the fixed inset-0 class
+			const form = document.querySelector("form");
+			expect(form?.classList.toString()).toContain("fixed");
+		});
+
+		it("escape exits distraction-free mode", async () => {
+			const screen = await renderEditor({ isNew: true });
+			const enterBtn = screen.getByRole("button", { name: "Enter distraction-free mode" });
+			await enterBtn.click();
+
+			// Verify we're in distraction-free mode
+			let form = document.querySelector("form");
+			expect(form?.classList.toString()).toContain("fixed");
+
+			// Press Escape
+			document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
+
+			// Wait for the state to update
+			await vi.waitFor(() => {
+				form = document.querySelector("form");
+				expect(form?.classList.toString()).not.toContain("fixed");
+			});
+		});
+	});
+
+	describe("scheduler", () => {
+		it("shows scheduler when Schedule for later is clicked", async () => {
+			const item = makeItem({ status: "draft" });
+			const onSchedule = vi.fn();
+			const screen = await renderEditor({ isNew: false, item, onSchedule });
+
+			const scheduleBtn = screen.getByRole("button", { name: "Schedule for later" });
+			await scheduleBtn.click();
+
+			// Should now show the datetime input
+			await expect.element(screen.getByLabelText("Schedule for")).toBeInTheDocument();
+			// And a Schedule submit button
+			await expect.element(screen.getByRole("button", { name: "Schedule" })).toBeInTheDocument();
+		});
+
+		it("shows Publish button for scheduled items", async () => {
+			const item = makeItem({ status: "scheduled", scheduledAt: "2026-06-01T12:00:00Z" });
+			const onPublish = vi.fn();
+			const screen = await renderEditor({ isNew: false, item, onPublish });
+
+			const publishBtn = screen.getByRole("button", { name: "Publish" });
+			await expect.element(publishBtn).toBeInTheDocument();
+		});
+
+		it("publish button on scheduled item calls onPublish", async () => {
+			const item = makeItem({ status: "scheduled", scheduledAt: "2026-06-01T12:00:00Z" });
+			const onPublish = vi.fn();
+			const screen = await renderEditor({ isNew: false, item, onPublish });
+
+			const publishBtn = screen.getByRole("button", { name: "Publish" });
+			await publishBtn.click();
+			expect(onPublish).toHaveBeenCalled();
+		});
+
+		it("shows Unschedule button in sidebar for scheduled items", async () => {
+			const item = makeItem({ status: "scheduled", scheduledAt: "2026-06-01T12:00:00Z" });
+			const onUnschedule = vi.fn();
+			const screen = await renderEditor({ isNew: false, item, onUnschedule });
+
+			// Unschedule should be in the sidebar, not in the header
+			const unscheduleBtn = screen.getByRole("button", { name: "Unschedule" });
+			await expect.element(unscheduleBtn).toBeInTheDocument();
+		});
+
+		it("unschedule button calls onUnschedule", async () => {
+			const item = makeItem({ status: "scheduled", scheduledAt: "2026-06-01T12:00:00Z" });
+			const onUnschedule = vi.fn();
+			const screen = await renderEditor({ isNew: false, item, onUnschedule });
+
+			const unscheduleBtn = screen.getByRole("button", { name: "Unschedule" });
+			await unscheduleBtn.click();
+			expect(onUnschedule).toHaveBeenCalled();
+		});
+	});
+
+	describe("heading", () => {
+		it("shows 'New Post' heading for new items", async () => {
+			const screen = await renderEditor({ isNew: true, collectionLabel: "Post" });
+			await expect.element(screen.getByText("New Post")).toBeInTheDocument();
+		});
+
+		it("shows 'Edit Post' heading for existing items", async () => {
+			const item = makeItem();
+			const screen = await renderEditor({ isNew: false, item, collectionLabel: "Post" });
+			await expect.element(screen.getByText("Edit Post")).toBeInTheDocument();
+		});
+	});
+});

packages/admin/tests/components/ContentList.test.tsx

@@ -0,0 +1,407 @@
+import * as React from "react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render } from "vitest-browser-react";
+
+import { ContentList } from "../../src/components/ContentList";
+import type { ContentItem, TrashedContentItem } from "../../src/lib/api";
+
+const NO_RESULTS_PATTERN = /No results for/;
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const NO_POSTS_YET_REGEX = /No posts yet/;
+const MOVE_TO_TRASH_CONFIRMATION_REGEX = /Move "Post" to trash/;
+const PERMANENT_DELETE_CONFIRMATION_REGEX = /Permanently delete "Old Post"/;
+
+vi.mock("@tanstack/react-router", async () => {
+	const actual = await vi.importActual("@tanstack/react-router");
+	return {
+		...actual,
+		Link: ({
+			children,
+			to,
+			params: _params,
+			...props
+		}: {
+			children: React.ReactNode;
+			to?: string;
+			params?: Record<string, string>;
+			[key: string]: unknown;
+		}) => (
+			<a href={typeof to === "string" ? to : "#"} {...props}>
+				{children}
+			</a>
+		),
+	};
+});
+
+function makeItem(overrides: Partial<ContentItem> = {}): ContentItem {
+	return {
+		id: "item_01",
+		type: "posts",
+		slug: "hello-world",
+		status: "draft",
+		data: { title: "Hello World" },
+		authorId: "user_01",
+		createdAt: "2025-01-01T00:00:00Z",
+		updatedAt: "2025-01-02T00:00:00Z",
+		publishedAt: null,
+		scheduledAt: null,
+		liveRevisionId: null,
+		draftRevisionId: "rev_01",
+		...overrides,
+	};
+}
+
+function makeTrashedItem(overrides: Partial<TrashedContentItem> = {}): TrashedContentItem {
+	return {
+		...makeItem(),
+		deletedAt: "2025-01-03T00:00:00Z",
+		...overrides,
+	};
+}
+
+const defaultProps = {
+	collection: "posts",
+	collectionLabel: "Posts",
+	items: [] as ContentItem[],
+};
+
+describe("ContentList", () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+	});
+
+	describe("rendering items", () => {
+		it("renders items in table with data.title", async () => {
+			const items = [makeItem({ id: "1", data: { title: "My Post" } })];
+			const screen = await render(<ContentList {...defaultProps} items={items} />);
+			await expect.element(screen.getByText("My Post")).toBeInTheDocument();
+		});
+
+		it("falls back to data.name when title is missing", async () => {
+			const items = [makeItem({ id: "1", data: { name: "Named Item" } })];
+			const screen = await render(<ContentList {...defaultProps} items={items} />);
+			await expect.element(screen.getByText("Named Item")).toBeInTheDocument();
+		});
+
+		it("falls back to slug when title and name are missing", async () => {
+			const items = [makeItem({ id: "1", slug: "my-slug", data: {} })];
+			const screen = await render(<ContentList {...defaultProps} items={items} />);
+			await expect.element(screen.getByText("my-slug")).toBeInTheDocument();
+		});
+
+		it("falls back to id when title, name, and slug are missing", async () => {
+			const items = [makeItem({ id: "item_xyz", slug: null, data: {} })];
+			const screen = await render(<ContentList {...defaultProps} items={items} />);
+			await expect.element(screen.getByText("item_xyz")).toBeInTheDocument();
+		});
+
+		it("renders multiple items", async () => {
+			const items = [
+				makeItem({ id: "1", data: { title: "First" } }),
+				makeItem({ id: "2", data: { title: "Second" } }),
+				makeItem({ id: "3", data: { title: "Third" } }),
+			];
+			const screen = await render(<ContentList {...defaultProps} items={items} />);
+			await expect.element(screen.getByText("First")).toBeInTheDocument();
+			await expect.element(screen.getByText("Second")).toBeInTheDocument();
+			await expect.element(screen.getByText("Third")).toBeInTheDocument();
+		});
+	});
+
+	describe("empty states", () => {
+		it("shows empty message for All tab", async () => {
+			const screen = await render(<ContentList {...defaultProps} items={[]} />);
+			await expect.element(screen.getByText(NO_POSTS_YET_REGEX)).toBeInTheDocument();
+			await expect.element(screen.getByText("Create your first one")).toBeInTheDocument();
+		});
+
+		it("shows empty trash message in Trash tab", async () => {
+			const screen = await render(<ContentList {...defaultProps} items={[]} trashedItems={[]} />);
+			// Switch to Trash tab
+			await screen.getByText("Trash").click();
+			await expect.element(screen.getByText("Trash is empty")).toBeInTheDocument();
+		});
+	});
+
+	describe("tab switching", () => {
+		it("defaults to All tab", async () => {
+			const items = [makeItem()];
+			const screen = await render(<ContentList {...defaultProps} items={items} />);
+			// Items should be visible (All tab active)
+			await expect.element(screen.getByText("Hello World")).toBeInTheDocument();
+		});
+
+		it("switches to Trash tab", async () => {
+			const trashed = [
+				makeTrashedItem({
+					id: "t1",
+					data: { title: "Deleted Post" },
+				}),
+			];
+			const screen = await render(
+				<ContentList {...defaultProps} items={[makeItem()]} trashedItems={trashed} />,
+			);
+			await screen.getByText("Trash").click();
+			await expect.element(screen.getByText("Deleted Post")).toBeInTheDocument();
+		});
+
+		it("shows trash count badge when items are trashed", async () => {
+			const screen = await render(
+				<ContentList {...defaultProps} items={[]} trashedItems={[]} trashedCount={42} />,
+			);
+			await expect.element(screen.getByText("42")).toBeInTheDocument();
+		});
+	});
+
+	describe("status badges", () => {
+		it("shows draft status", async () => {
+			const items = [makeItem({ id: "1", status: "draft" })];
+			const screen = await render(<ContentList {...defaultProps} items={items} />);
+			await expect.element(screen.getByText("draft")).toBeInTheDocument();
+		});
+
+		it("shows published status", async () => {
+			const items = [makeItem({ id: "1", status: "published" })];
+			const screen = await render(<ContentList {...defaultProps} items={items} />);
+			await expect.element(screen.getByText("published")).toBeInTheDocument();
+		});
+
+		it("shows pending badge when draftRevisionId differs from liveRevisionId", async () => {
+			const items = [
+				makeItem({
+					id: "1",
+					status: "published",
+					draftRevisionId: "rev_draft",
+					liveRevisionId: "rev_live",
+				}),
+			];
+			const screen = await render(<ContentList {...defaultProps} items={items} />);
+			await expect.element(screen.getByText("pending")).toBeInTheDocument();
+		});
+
+		it("does not show pending badge when revisions match", async () => {
+			const items = [
+				makeItem({
+					id: "1",
+					status: "published",
+					draftRevisionId: "rev_same",
+					liveRevisionId: "rev_same",
+				}),
+			];
+			const screen = await render(<ContentList {...defaultProps} items={items} />);
+			expect(screen.getByText("pending").query()).toBeNull();
+		});
+	});
+
+	describe("delete confirmation", () => {
+		it("shows delete confirmation dialog with item title", async () => {
+			const onDelete = vi.fn();
+			const items = [makeItem({ id: "item_1", data: { title: "Post" } })];
+			const screen = await render(
+				<ContentList {...defaultProps} items={items} onDelete={onDelete} />,
+			);
+
+			// Click trash icon button to open the confirmation dialog
+			await screen.getByRole("button", { name: "Move Post to trash" }).click();
+
+			// Dialog should appear with confirmation text
+			await expect.element(screen.getByText("Move to Trash?")).toBeInTheDocument();
+			await expect.element(screen.getByText(MOVE_TO_TRASH_CONFIRMATION_REGEX)).toBeInTheDocument();
+			// Confirm and Cancel buttons should be visible
+			await expect
+				.element(screen.getByRole("button", { name: "Move to Trash" }))
+				.toBeInTheDocument();
+			await expect.element(screen.getByRole("button", { name: "Cancel" })).toBeInTheDocument();
+		});
+	});
+
+	describe("permanent delete", () => {
+		it("shows permanent delete dialog with item title", async () => {
+			const onPermanentDelete = vi.fn();
+			const trashed = [
+				makeTrashedItem({
+					id: "t1",
+					data: { title: "Old Post" },
+				}),
+			];
+			const screen = await render(
+				<ContentList
+					{...defaultProps}
+					items={[]}
+					trashedItems={trashed}
+					onPermanentDelete={onPermanentDelete}
+				/>,
+			);
+
+			// Switch to trash tab
+			await screen.getByText("Trash").click();
+
+			// Click permanent delete trigger button
+			await screen.getByRole("button", { name: "Permanently delete Old Post" }).click();
+
+			// Dialog should appear with correct text
+			await expect.element(screen.getByText("Delete Permanently?")).toBeInTheDocument();
+			await expect
+				.element(screen.getByText(PERMANENT_DELETE_CONFIRMATION_REGEX))
+				.toBeInTheDocument();
+			await expect
+				.element(screen.getByRole("button", { name: "Delete Permanently" }))
+				.toBeInTheDocument();
+		});
+	});
+
+	describe("restore", () => {
+		it("calls onRestore when restore button is clicked", async () => {
+			const onRestore = vi.fn();
+			const trashed = [
+				makeTrashedItem({
+					id: "t1",
+					data: { title: "Restorable" },
+				}),
+			];
+			const screen = await render(
+				<ContentList {...defaultProps} items={[]} trashedItems={trashed} onRestore={onRestore} />,
+			);
+
+			await screen.getByText("Trash").click();
+			await screen.getByRole("button", { name: "Restore Restorable" }).click();
+
+			expect(onRestore).toHaveBeenCalledWith("t1");
+		});
+	});
+
+	describe("duplicate", () => {
+		it("calls onDuplicate when duplicate button is clicked", async () => {
+			const onDuplicate = vi.fn();
+			const items = [makeItem({ id: "item_1", data: { title: "Copyable" } })];
+			const screen = await render(
+				<ContentList {...defaultProps} items={items} onDuplicate={onDuplicate} />,
+			);
+
+			await screen.getByRole("button", { name: "Duplicate Copyable" }).click();
+
+			expect(onDuplicate).toHaveBeenCalledWith("item_1");
+		});
+	});
+
+	describe("load more", () => {
+		it("shows Load More button when hasMore is true", async () => {
+			const onLoadMore = vi.fn();
+			const items = [makeItem()];
+			const screen = await render(
+				<ContentList {...defaultProps} items={items} hasMore={true} onLoadMore={onLoadMore} />,
+			);
+			await expect.element(screen.getByRole("button", { name: "Load More" })).toBeInTheDocument();
+		});
+
+		it("does not show Load More when hasMore is false", async () => {
+			const items = [makeItem()];
+			const screen = await render(<ContentList {...defaultProps} items={items} hasMore={false} />);
+			expect(screen.getByRole("button", { name: "Load More" }).query()).toBeNull();
+		});
+
+		it("calls onLoadMore when Load More is clicked", async () => {
+			const onLoadMore = vi.fn();
+			const items = [makeItem()];
+			const screen = await render(
+				<ContentList {...defaultProps} items={items} hasMore={true} onLoadMore={onLoadMore} />,
+			);
+
+			await screen.getByRole("button", { name: "Load More" }).click();
+
+			expect(onLoadMore).toHaveBeenCalledOnce();
+		});
+	});
+
+	describe("header", () => {
+		it("shows collection label as heading", async () => {
+			const screen = await render(<ContentList {...defaultProps} collectionLabel="Articles" />);
+			await expect.element(screen.getByRole("heading", { name: "Articles" })).toBeInTheDocument();
+		});
+
+		it("shows Add New link", async () => {
+			const screen = await render(<ContentList {...defaultProps} />);
+			await expect.element(screen.getByText("Add New")).toBeInTheDocument();
+		});
+	});
+
+	describe("search", () => {
+		it("shows search input when items exist", async () => {
+			const items = [makeItem({ id: "1", data: { title: "Post" } })];
+			const screen = await render(<ContentList {...defaultProps} items={items} />);
+			await expect
+				.element(screen.getByRole("searchbox", { name: "Search posts" }))
+				.toBeInTheDocument();
+		});
+
+		it("hides search input when no items", async () => {
+			const screen = await render(<ContentList {...defaultProps} items={[]} />);
+			expect(screen.getByRole("searchbox").query()).toBeNull();
+		});
+
+		it("filters items by title", async () => {
+			const items = [
+				makeItem({ id: "1", data: { title: "Alpha post" } }),
+				makeItem({ id: "2", data: { title: "Beta post" } }),
+				makeItem({ id: "3", data: { title: "Gamma post" } }),
+			];
+			const screen = await render(<ContentList {...defaultProps} items={items} />);
+
+			await screen.getByRole("searchbox").fill("beta");
+
+			await expect.element(screen.getByText("Beta post")).toBeInTheDocument();
+			expect(screen.getByText("Alpha post").query()).toBeNull();
+			expect(screen.getByText("Gamma post").query()).toBeNull();
+		});
+
+		it("shows no results message when search has no matches", async () => {
+			const items = [makeItem({ id: "1", data: { title: "Hello" } })];
+			const screen = await render(<ContentList {...defaultProps} items={items} />);
+
+			await screen.getByRole("searchbox").fill("zzzzz");
+
+			await expect.element(screen.getByText(NO_RESULTS_PATTERN)).toBeInTheDocument();
+		});
+	});
+
+	describe("pagination", () => {
+		it("shows pagination when items exceed page size", async () => {
+			const items = Array.from({ length: 25 }, (_, i) =>
+				makeItem({ id: `item_${i}`, data: { title: `Post ${i}` } }),
+			);
+			const screen = await render(<ContentList {...defaultProps} items={items} />);
+
+			await expect.element(screen.getByText("1 / 2")).toBeInTheDocument();
+			await expect.element(screen.getByRole("button", { name: "Next page" })).toBeInTheDocument();
+		});
+
+		it("does not show pagination when items fit on one page", async () => {
+			const items = [makeItem({ id: "1", data: { title: "Post" } })];
+			const screen = await render(<ContentList {...defaultProps} items={items} />);
+			expect(screen.getByRole("button", { name: "Next page" }).query()).toBeNull();
+		});
+
+		it("navigates between pages", async () => {
+			const items = Array.from({ length: 25 }, (_, i) =>
+				makeItem({ id: `item_${i}`, data: { title: `Post ${i}` } }),
+			);
+			const screen = await render(<ContentList {...defaultProps} items={items} />);
+
+			// Page 1 should show Post 0
+			await expect.element(screen.getByText("Post 0")).toBeInTheDocument();
+
+			// Go to page 2
+			await screen.getByRole("button", { name: "Next page" }).click();
+
+			await expect.element(screen.getByText("2 / 2")).toBeInTheDocument();
+			// Post 20 should be on page 2
+			await expect.element(screen.getByText("Post 20")).toBeInTheDocument();
+			// Post 0 should not be visible
+			expect(screen.getByText("Post 0").query()).toBeNull();
+		});
+	});
+});

packages/admin/tests/components/ContentTypeEditor.test.tsx

@@ -0,0 +1,513 @@
+import * as React from "react";
+import { describe, it, expect, vi } from "vitest";
+import { render } from "vitest-browser-react";
+
+import {
+	ContentTypeEditor,
+	type ContentTypeEditorProps,
+} from "../../src/components/ContentTypeEditor";
+import type { SchemaCollectionWithFields, SchemaField } from "../../src/lib/api";
+
+// Regexes hoisted to module scope to avoid recompilation per call
+const EDIT_TITLE_RE = /Edit Title field/i;
+const EDIT_BODY_RE = /Edit Body field/i;
+const URL_PATTERN_SLUG_RE = /must include.*\{slug\}/i;
+
+// Mock tanstack router — Link renders as <a>, useNavigate is a no-op
+vi.mock("@tanstack/react-router", async () => {
+	const actual = await vi.importActual("@tanstack/react-router");
+	return {
+		...actual,
+		Link: ({ children, ...props }: any) => <a {...props}>{children}</a>,
+		useNavigate: () => vi.fn(),
+	};
+});
+
+// Mock FieldEditor — just expose open state via data attribute
+vi.mock("../../src/components/FieldEditor", () => ({
+	FieldEditor: ({ open }: { open: boolean }) =>
+		open ? <div data-testid="field-editor-dialog">Field Editor</div> : null,
+}));
+
+const DELETE_FIELD_BUTTON_PATTERN = /Delete Title field/i;
+
+function makeField(overrides: Partial<SchemaField> = {}): SchemaField {
+	return {
+		id: "field-1",
+		collectionId: "col-1",
+		slug: "title",
+		label: "Title",
+		type: "string",
+		columnType: "TEXT",
+		required: false,
+		unique: false,
+		searchable: false,
+		sortOrder: 0,
+		createdAt: "2025-01-01T00:00:00Z",
+		...overrides,
+	};
+}
+
+function makeCollection(
+	overrides: Partial<SchemaCollectionWithFields> = {},
+): SchemaCollectionWithFields {
+	return {
+		id: "col-1",
+		slug: "posts",
+		label: "Posts",
+		labelSingular: "Post",
+		description: "Blog posts",
+		supports: ["drafts"],
+		fields: [],
+		hasSeo: false,
+		commentsEnabled: false,
+		commentsModeration: "first_time",
+		commentsClosedAfterDays: 90,
+		commentsAutoApproveUsers: true,
+		createdAt: "2025-01-01T00:00:00Z",
+		updatedAt: "2025-01-01T00:00:00Z",
+		...overrides,
+	};
+}
+
+const noop = () => {};
+
+function defaultProps(overrides: Partial<ContentTypeEditorProps> = {}): ContentTypeEditorProps {
+	return {
+		onSave: noop,
+		onAddField: noop,
+		onUpdateField: noop,
+		onDeleteField: noop,
+		onReorderFields: noop,
+		...overrides,
+	};
+}
+
+const DRAFTS_CHECKBOX_REGEX = /Drafts/i;
+const REVISIONS_CHECKBOX_REGEX = /Revisions/i;
+const SAVE_CHANGES_BUTTON_REGEX = /Save Changes/i;
+const CREATE_CONTENT_TYPE_BUTTON_REGEX = /Create Content Type/i;
+const EDIT_FIELD_BUTTON_REGEX = /Edit .* field/i;
+const DELETE_FIELD_BUTTON_REGEX = /Delete .* field/i;
+const ADD_FIELD_BUTTON_REGEX = /Add Field/i;
+const SAVING_BUTTON_REGEX = /Saving/i;
+const CODE_DEFINED_MSG_REGEX = /This collection is defined in code/i;
+const SYSTEM_FIELDS_REGEX = /6 system \+ 2 custom fields/;
+
+describe("ContentTypeEditor", () => {
+	// ---- Title for new vs edit mode ----
+
+	it("shows 'New Content Type' title when isNew", async () => {
+		const screen = await render(<ContentTypeEditor {...defaultProps()} isNew />);
+		await expect.element(screen.getByText("New Content Type")).toBeInTheDocument();
+	});
+
+	it("shows collection label as title when editing", async () => {
+		const collection = makeCollection({ label: "Articles" });
+		const screen = await render(<ContentTypeEditor {...defaultProps()} collection={collection} />);
+		await expect.element(screen.getByText("Articles")).toBeInTheDocument();
+	});
+
+	// ---- Auto-slug from label when isNew ----
+
+	it("auto-generates slug from label when isNew", async () => {
+		const screen = await render(<ContentTypeEditor {...defaultProps()} isNew />);
+
+		const labelInput = screen.getByLabelText("Label (Plural)");
+		await labelInput.fill("Blog Posts");
+
+		// The slug input should auto-populate from the label
+		const slugInput = screen.getByLabelText("Slug");
+		await expect.element(slugInput).toHaveValue("blog_posts");
+	});
+
+	// ---- Slug disabled when editing ----
+
+	it("does not show slug input when editing existing collection", async () => {
+		const collection = makeCollection();
+		const screen = await render(<ContentTypeEditor {...defaultProps()} collection={collection} />);
+
+		// Slug input is only rendered when isNew, so it shouldn't exist
+		const slugInput = screen.getByLabelText("Slug");
+		await expect.element(slugInput).not.toBeInTheDocument();
+	});
+
+	// ---- Supports checkboxes toggle correctly ----
+
+	it("toggles support checkboxes", async () => {
+		const collection = makeCollection({ supports: ["drafts"] });
+		const screen = await render(<ContentTypeEditor {...defaultProps()} collection={collection} />);
+
+		// "Drafts" should be checked initially
+		const draftsCheckbox = screen.getByRole("checkbox", { name: DRAFTS_CHECKBOX_REGEX });
+		await expect.element(draftsCheckbox).toBeChecked();
+
+		// "Revisions" should not be checked
+		const revisionsCheckbox = screen.getByRole("checkbox", { name: REVISIONS_CHECKBOX_REGEX });
+		await expect.element(revisionsCheckbox).not.toBeChecked();
+
+		// Toggle revisions on
+		await revisionsCheckbox.click();
+		await expect.element(revisionsCheckbox).toBeChecked();
+
+		// Toggle drafts off
+		await draftsCheckbox.click();
+		await expect.element(draftsCheckbox).not.toBeChecked();
+	});
+
+	// ---- Save button disabled when no changes ----
+
+	it("save button is disabled when no changes have been made", async () => {
+		const collection = makeCollection();
+		const screen = await render(<ContentTypeEditor {...defaultProps()} collection={collection} />);
+
+		const saveButton = screen.getByRole("button", { name: SAVE_CHANGES_BUTTON_REGEX });
+		await expect.element(saveButton).toBeDisabled();
+	});
+
+	// ---- Save button enabled after changing a field ----
+
+	it("save button is enabled after changing label", async () => {
+		const collection = makeCollection({ label: "Posts" });
+		const screen = await render(<ContentTypeEditor {...defaultProps()} collection={collection} />);
+
+		const labelInput = screen.getByLabelText("Label (Plural)");
+		await labelInput.fill("Articles");
+
+		const saveButton = screen.getByRole("button", { name: SAVE_CHANGES_BUTTON_REGEX });
+		await expect.element(saveButton).toBeEnabled();
+	});
+
+	// ---- onSave called with correct input shape ----
+
+	it("calls onSave with correct input when creating new collection", async () => {
+		const onSave = vi.fn();
+		const screen = await render(<ContentTypeEditor {...defaultProps({ onSave })} isNew />);
+
+		await screen.getByLabelText("Label (Plural)").fill("Articles");
+		await screen.getByLabelText("Label (Singular)").fill("Article");
+
+		const createButton = screen.getByRole("button", { name: CREATE_CONTENT_TYPE_BUTTON_REGEX });
+		await createButton.click();
+
+		expect(onSave).toHaveBeenCalledWith({
+			slug: "articles",
+			label: "Articles",
+			labelSingular: "Article",
+			description: undefined,
+			urlPattern: undefined,
+			supports: ["drafts"], // default
+			hasSeo: false,
+		});
+	});
+
+	it("calls onSave with correct input when editing existing collection", async () => {
+		const onSave = vi.fn();
+		const collection = makeCollection({ label: "Posts", supports: ["drafts"] });
+		const screen = await render(
+			<ContentTypeEditor {...defaultProps({ onSave })} collection={collection} />,
+		);
+
+		await screen.getByLabelText("Label (Plural)").fill("Articles");
+
+		const saveButton = screen.getByRole("button", { name: SAVE_CHANGES_BUTTON_REGEX });
+		await saveButton.click();
+
+		expect(onSave).toHaveBeenCalledWith({
+			label: "Articles",
+			labelSingular: "Post",
+			description: "Blog posts",
+			urlPattern: undefined,
+			supports: ["drafts"],
+			hasSeo: false,
+			commentsEnabled: false,
+			commentsModeration: "first_time",
+			commentsClosedAfterDays: 90,
+			commentsAutoApproveUsers: true,
+		});
+	});
+
+	// ---- Field list displays existing fields with type and badges ----
+
+	it("displays custom fields with type and badges", async () => {
+		const fields: SchemaField[] = [
+			makeField({ slug: "title", label: "Title", type: "string", required: true, unique: true }),
+			makeField({
+				id: "field-2",
+				slug: "body",
+				label: "Body",
+				type: "portableText",
+				searchable: true,
+			}),
+		];
+		const collection = makeCollection({ fields });
+
+		const screen = await render(<ContentTypeEditor {...defaultProps()} collection={collection} />);
+
+		// Verify fields render by checking their edit buttons (unique aria-labels)
+		await expect.element(screen.getByRole("button", { name: EDIT_TITLE_RE })).toBeInTheDocument();
+		await expect.element(screen.getByRole("button", { name: EDIT_BODY_RE })).toBeInTheDocument();
+
+		// Badges — use exact: true to avoid matching system field descriptions like "Unique identifier"
+		await expect.element(screen.getByText("Required", { exact: true })).toBeInTheDocument();
+		await expect.element(screen.getByText("Unique", { exact: true })).toBeInTheDocument();
+		await expect.element(screen.getByText("Searchable", { exact: true })).toBeInTheDocument();
+	});
+
+	// ---- System fields always shown ----
+
+	it("shows system fields section", async () => {
+		const collection = makeCollection();
+		const screen = await render(<ContentTypeEditor {...defaultProps()} collection={collection} />);
+
+		await expect.element(screen.getByText("System Fields")).toBeInTheDocument();
+		// System fields show descriptions — use those as unambiguous locators
+		await expect.element(screen.getByText("Unique identifier (ULID)")).toBeInTheDocument();
+		await expect.element(screen.getByText("URL-friendly identifier")).toBeInTheDocument();
+		await expect.element(screen.getByText("draft, published, or archived")).toBeInTheDocument();
+		await expect.element(screen.getByText("When the entry was created")).toBeInTheDocument();
+		await expect.element(screen.getByText("When the entry was last modified")).toBeInTheDocument();
+		await expect.element(screen.getByText("When the entry was published")).toBeInTheDocument();
+	});
+
+	// ---- Add field button opens FieldEditor dialog ----
+
+	it("opens FieldEditor dialog when Add Field is clicked", async () => {
+		const collection = makeCollection();
+		const screen = await render(<ContentTypeEditor {...defaultProps()} collection={collection} />);
+
+		// Field editor should not be visible initially
+		const dialog = screen.getByTestId("field-editor-dialog");
+		await expect.element(dialog).not.toBeInTheDocument();
+
+		// Click Add Field
+		const addButton = screen.getByRole("button", { name: ADD_FIELD_BUTTON_REGEX });
+		await addButton.click();
+
+		// Dialog should now be visible
+		await expect.element(screen.getByTestId("field-editor-dialog")).toBeInTheDocument();
+	});
+
+	// ---- Delete field with confirm dialog calls onDeleteField ----
+
+	it("calls onDeleteField when delete is confirmed via dialog", async () => {
+		const onDeleteField = vi.fn();
+
+		const fields = [makeField({ slug: "title", label: "Title" })];
+		const collection = makeCollection({ fields });
+
+		const screen = await render(
+			<ContentTypeEditor {...defaultProps({ onDeleteField })} collection={collection} />,
+		);
+
+		const deleteButton = screen.getByRole("button", { name: DELETE_FIELD_BUTTON_PATTERN });
+		await deleteButton.click();
+
+		// ConfirmDialog should appear
+		await expect.element(screen.getByText("Delete Field?")).toBeInTheDocument();
+
+		// Direct DOM click to bypass Base UI inert overlay
+		screen.getByRole("button", { name: "Delete" }).element().click();
+
+		expect(onDeleteField).toHaveBeenCalledWith("title");
+	});
+
+	it("does not call onDeleteField when delete dialog is cancelled", async () => {
+		const onDeleteField = vi.fn();
+
+		const fields = [makeField({ slug: "title", label: "Title" })];
+		const collection = makeCollection({ fields });
+
+		const screen = await render(
+			<ContentTypeEditor {...defaultProps({ onDeleteField })} collection={collection} />,
+		);
+
+		const deleteButton = screen.getByRole("button", { name: DELETE_FIELD_BUTTON_REGEX });
+		await deleteButton.click();
+
+		// ConfirmDialog should appear
+		await expect.element(screen.getByText("Delete Field?")).toBeInTheDocument();
+
+		// Direct DOM click to bypass Base UI inert overlay
+		screen.getByRole("button", { name: "Cancel" }).element().click();
+
+		expect(onDeleteField).not.toHaveBeenCalled();
+	});
+
+	// ---- Code-source collections show disabled inputs and info banner ----
+
+	it("shows info banner and disables inputs for code-source collections", async () => {
+		const collection = makeCollection({ source: "code" });
+		const screen = await render(<ContentTypeEditor {...defaultProps()} collection={collection} />);
+
+		// Info banner text
+		await expect.element(screen.getByText(CODE_DEFINED_MSG_REGEX)).toBeInTheDocument();
+
+		// Label inputs should be disabled
+		const labelInput = screen.getByLabelText("Label (Plural)");
+		await expect.element(labelInput).toBeDisabled();
+
+		const singularInput = screen.getByLabelText("Label (Singular)");
+		await expect.element(singularInput).toBeDisabled();
+
+		// Description uses InputArea — locate via placeholder
+		const descInput = screen.getByPlaceholder("A brief description of this content type");
+		await expect.element(descInput).toBeDisabled();
+
+		// Save button should not exist for code-source collections
+		const saveButton = screen.getByRole("button", { name: SAVE_CHANGES_BUTTON_REGEX });
+		await expect.element(saveButton).not.toBeInTheDocument();
+
+		// Add Field button should not exist
+		const addFieldButton = screen.getByRole("button", { name: ADD_FIELD_BUTTON_REGEX });
+		await expect.element(addFieldButton).not.toBeInTheDocument();
+	});
+
+	it("hides edit and delete buttons on fields for code-source collections", async () => {
+		const fields = [makeField({ slug: "title", label: "Title" })];
+		const collection = makeCollection({ source: "code", fields });
+		const screen = await render(<ContentTypeEditor {...defaultProps()} collection={collection} />);
+
+		const editButton = screen.getByRole("button", { name: EDIT_FIELD_BUTTON_REGEX });
+		await expect.element(editButton).not.toBeInTheDocument();
+
+		const deleteButton = screen.getByRole("button", { name: DELETE_FIELD_BUTTON_REGEX });
+		await expect.element(deleteButton).not.toBeInTheDocument();
+	});
+
+	// ---- Empty field list shows "No custom fields yet" ----
+
+	it("shows empty state when collection has no custom fields", async () => {
+		const collection = makeCollection({ fields: [] });
+		const screen = await render(<ContentTypeEditor {...defaultProps()} collection={collection} />);
+
+		await expect.element(screen.getByText("No custom fields yet")).toBeInTheDocument();
+		await expect
+			.element(screen.getByText("Add fields to define the structure of your content"))
+			.toBeInTheDocument();
+	});
+
+	// ---- Fields section hidden for new collections ----
+
+	it("does not show fields section when creating new collection", async () => {
+		const screen = await render(<ContentTypeEditor {...defaultProps()} isNew />);
+
+		const fieldsHeading = screen.getByRole("heading", { name: "Fields" });
+		await expect.element(fieldsHeading).not.toBeInTheDocument();
+	});
+
+	// ---- isSaving shows saving state ----
+
+	it("shows 'Saving...' when isSaving is true", async () => {
+		const collection = makeCollection();
+		const screen = await render(
+			<ContentTypeEditor {...defaultProps()} collection={collection} isSaving />,
+		);
+
+		// The button text should show "Saving..." — but button is disabled because no changes
+		// We need changes for the button to render enabled with saving text
+		// Actually the button shows "Saving..." text regardless, it's just also disabled
+		const saveButton = screen.getByRole("button", { name: SAVING_BUTTON_REGEX });
+		await expect.element(saveButton).toBeInTheDocument();
+	});
+
+	// ---- URL Pattern field ----
+
+	it("shows URL Pattern input", async () => {
+		const collection = makeCollection();
+		const screen = await render(<ContentTypeEditor {...defaultProps()} collection={collection} />);
+
+		const input = screen.getByLabelText("URL Pattern");
+		await expect.element(input).toBeInTheDocument();
+		await expect.element(input).toHaveValue("");
+	});
+
+	it("populates URL Pattern from collection", async () => {
+		const collection = makeCollection({ urlPattern: "/blog/{slug}" });
+		const screen = await render(<ContentTypeEditor {...defaultProps()} collection={collection} />);
+
+		const input = screen.getByLabelText("URL Pattern");
+		await expect.element(input).toHaveValue("/blog/{slug}");
+	});
+
+	it("includes urlPattern in onSave when set", async () => {
+		const onSave = vi.fn();
+		const collection = makeCollection();
+		const screen = await render(
+			<ContentTypeEditor {...defaultProps({ onSave })} collection={collection} />,
+		);
+
+		await screen.getByLabelText("URL Pattern").fill("/blog/{slug}");
+
+		const saveButton = screen.getByRole("button", { name: SAVE_CHANGES_BUTTON_REGEX });
+		await saveButton.click();
+
+		expect(onSave).toHaveBeenCalledWith(expect.objectContaining({ urlPattern: "/blog/{slug}" }));
+	});
+
+	it("shows validation error when pattern lacks {slug}", async () => {
+		const collection = makeCollection();
+		const screen = await render(<ContentTypeEditor {...defaultProps()} collection={collection} />);
+
+		await screen.getByLabelText("URL Pattern").fill("/blog/broken");
+
+		await expect.element(screen.getByText(URL_PATTERN_SLUG_RE)).toBeInTheDocument();
+	});
+
+	it("disables save button when pattern lacks {slug}", async () => {
+		const collection = makeCollection();
+		const screen = await render(<ContentTypeEditor {...defaultProps()} collection={collection} />);
+
+		await screen.getByLabelText("URL Pattern").fill("/blog/broken");
+
+		const saveButton = screen.getByRole("button", { name: SAVE_CHANGES_BUTTON_REGEX });
+		await expect.element(saveButton).toBeDisabled();
+	});
+
+	it("enables save button when pattern includes {slug}", async () => {
+		const collection = makeCollection();
+		const screen = await render(<ContentTypeEditor {...defaultProps()} collection={collection} />);
+
+		await screen.getByLabelText("URL Pattern").fill("/blog/{slug}");
+
+		const saveButton = screen.getByRole("button", { name: SAVE_CHANGES_BUTTON_REGEX });
+		await expect.element(saveButton).toBeEnabled();
+	});
+
+	it("allows empty URL Pattern (field is optional)", async () => {
+		const onSave = vi.fn();
+		const collection = makeCollection({ label: "Posts" });
+		const screen = await render(
+			<ContentTypeEditor {...defaultProps({ onSave })} collection={collection} />,
+		);
+
+		// Change label to enable save (urlPattern empty is fine)
+		await screen.getByLabelText("Label (Plural)").fill("Articles");
+
+		const saveButton = screen.getByRole("button", { name: SAVE_CHANGES_BUTTON_REGEX });
+		await expect.element(saveButton).toBeEnabled();
+		await saveButton.click();
+
+		expect(onSave).toHaveBeenCalledWith(expect.objectContaining({ urlPattern: undefined }));
+	});
+
+	it("disables URL Pattern input for code-source collections", async () => {
+		const collection = makeCollection({ source: "code", urlPattern: "/blog/{slug}" });
+		const screen = await render(<ContentTypeEditor {...defaultProps()} collection={collection} />);
+
+		const input = screen.getByLabelText("URL Pattern");
+		await expect.element(input).toBeDisabled();
+	});
+
+	it("shows field count in header", async () => {
+		const fields = [
+			makeField({ slug: "title", label: "Title" }),
+			makeField({ id: "field-2", slug: "body", label: "Body" }),
+		];
+		const collection = makeCollection({ fields });
+		const screen = await render(<ContentTypeEditor {...defaultProps()} collection={collection} />);
+
+		// Should show "6 system + 2 custom fields"
+		await expect.element(screen.getByText(SYSTEM_FIELDS_REGEX)).toBeInTheDocument();
+	});
+});

packages/admin/tests/components/ContentTypeList.test.tsx

@@ -0,0 +1,225 @@
+import * as React from "react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render } from "vitest-browser-react";
+
+import { ContentTypeList } from "../../src/components/ContentTypeList";
+import type { SchemaCollection, OrphanedTable } from "../../src/lib/api";
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const NO_CONTENT_TYPES_REGEX = /No content types yet/;
+
+vi.mock("@tanstack/react-router", async () => {
+	const actual = await vi.importActual("@tanstack/react-router");
+	return {
+		...actual,
+		Link: ({
+			children,
+			to,
+			params: _params,
+			...props
+		}: {
+			children: React.ReactNode;
+			to?: string;
+			params?: Record<string, string>;
+			[key: string]: unknown;
+		}) => (
+			<a href={typeof to === "string" ? to : "#"} {...props}>
+				{children}
+			</a>
+		),
+	};
+});
+
+function makeCollection(overrides: Partial<SchemaCollection> = {}): SchemaCollection {
+	return {
+		id: "col_01",
+		slug: "posts",
+		label: "Posts",
+		labelSingular: "Post",
+		supports: ["drafts", "revisions"],
+		source: "dashboard",
+		createdAt: "2025-01-01T00:00:00Z",
+		updatedAt: "2025-01-02T00:00:00Z",
+		...overrides,
+	};
+}
+
+function makeOrphan(overrides: Partial<OrphanedTable> = {}): OrphanedTable {
+	return {
+		slug: "legacy_posts",
+		tableName: "ec_legacy_posts",
+		rowCount: 42,
+		...overrides,
+	};
+}
+
+describe("ContentTypeList", () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+	});
+
+	describe("rendering collections", () => {
+		it("displays collections with labels and slugs", async () => {
+			const collections = [
+				makeCollection({ id: "1", slug: "articles", label: "Articles" }),
+				makeCollection({ id: "2", slug: "landing_pages", label: "Landing Pages" }),
+			];
+			const screen = await render(<ContentTypeList collections={collections} />);
+			await expect.element(screen.getByText("Articles", { exact: true })).toBeInTheDocument();
+			await expect.element(screen.getByText("Landing Pages", { exact: true })).toBeInTheDocument();
+			await expect.element(screen.getByText("articles", { exact: true })).toBeInTheDocument();
+			await expect.element(screen.getByText("landing_pages", { exact: true })).toBeInTheDocument();
+		});
+
+		it("shows 'Code' badge for code-source collections", async () => {
+			const collections = [makeCollection({ id: "1", source: "code" })];
+			const screen = await render(<ContentTypeList collections={collections} />);
+			await expect.element(screen.getByText("Code")).toBeInTheDocument();
+		});
+
+		it("shows 'Dashboard' badge for dashboard-source collections", async () => {
+			const collections = [makeCollection({ id: "1", source: "dashboard" })];
+			const screen = await render(<ContentTypeList collections={collections} />);
+			await expect.element(screen.getByText("Dashboard")).toBeInTheDocument();
+		});
+
+		it("shows feature badges from supports array", async () => {
+			const collections = [
+				makeCollection({
+					id: "1",
+					supports: ["drafts", "revisions", "preview", "search"],
+				}),
+			];
+			const screen = await render(<ContentTypeList collections={collections} />);
+			await expect.element(screen.getByText("drafts")).toBeInTheDocument();
+			await expect.element(screen.getByText("revisions")).toBeInTheDocument();
+			await expect.element(screen.getByText("preview")).toBeInTheDocument();
+			await expect.element(screen.getByText("search")).toBeInTheDocument();
+		});
+	});
+
+	describe("navigation", () => {
+		it("edit link navigates to /content-types/$slug", async () => {
+			const collections = [makeCollection({ id: "1", slug: "articles", label: "Articles" })];
+			const screen = await render(<ContentTypeList collections={collections} />);
+			const editLink = screen.getByRole("link", { name: "Edit Articles" });
+			await expect.element(editLink).toBeInTheDocument();
+		});
+
+		it("'New Content Type' link is present", async () => {
+			const screen = await render(<ContentTypeList collections={[]} />);
+			await expect.element(screen.getByText("New Content Type")).toBeInTheDocument();
+		});
+	});
+
+	describe("delete", () => {
+		it("delete button only shown for non-code-source collections", async () => {
+			const collections = [
+				makeCollection({ id: "1", slug: "from-code", label: "From Code", source: "code" }),
+				makeCollection({
+					id: "2",
+					slug: "from-dash",
+					label: "From Dashboard",
+					source: "dashboard",
+				}),
+			];
+			const screen = await render(<ContentTypeList collections={collections} />);
+			// Code-sourced should have no delete button
+			expect(screen.getByRole("button", { name: "Delete From Code" }).query()).toBeNull();
+			// Dashboard-sourced should have delete button
+			await expect
+				.element(screen.getByRole("button", { name: "Delete From Dashboard" }))
+				.toBeInTheDocument();
+		});
+
+		it("opens confirm dialog and calls onDelete after confirm", async () => {
+			const onDelete = vi.fn();
+			const collections = [
+				makeCollection({ id: "1", slug: "posts", label: "Posts", source: "dashboard" }),
+			];
+			const screen = await render(
+				<ContentTypeList collections={collections} onDelete={onDelete} />,
+			);
+
+			await screen.getByRole("button", { name: "Delete Posts" }).click();
+
+			// ConfirmDialog should appear
+			await expect.element(screen.getByText("Delete Content Type?")).toBeInTheDocument();
+
+			// Direct DOM click to bypass Base UI inert overlay
+			screen.getByRole("button", { name: "Delete" }).element().click();
+
+			expect(onDelete).toHaveBeenCalledWith("posts");
+		});
+
+		it("does not call onDelete when confirm dialog is cancelled", async () => {
+			const onDelete = vi.fn();
+			const collections = [
+				makeCollection({ id: "1", slug: "posts", label: "Posts", source: "dashboard" }),
+			];
+			const screen = await render(
+				<ContentTypeList collections={collections} onDelete={onDelete} />,
+			);
+
+			await screen.getByRole("button", { name: "Delete Posts" }).click();
+
+			// ConfirmDialog should appear
+			await expect.element(screen.getByText("Delete Content Type?")).toBeInTheDocument();
+
+			// Direct DOM click to bypass Base UI inert overlay
+			screen.getByRole("button", { name: "Cancel" }).element().click();
+
+			expect(onDelete).not.toHaveBeenCalled();
+		});
+	});
+
+	describe("orphaned tables", () => {
+		it("shows warning when orphanedTables has items", async () => {
+			const orphans = [makeOrphan({ slug: "old_content", rowCount: 15 })];
+			const screen = await render(<ContentTypeList collections={[]} orphanedTables={orphans} />);
+			await expect
+				.element(screen.getByText("Unregistered Content Tables Found"))
+				.toBeInTheDocument();
+			await expect.element(screen.getByText("old_content")).toBeInTheDocument();
+			await expect.element(screen.getByText("(15 items)")).toBeInTheDocument();
+		});
+
+		it("register button calls onRegisterOrphan", async () => {
+			const onRegisterOrphan = vi.fn();
+			const orphans = [makeOrphan({ slug: "legacy_data", rowCount: 5 })];
+			const screen = await render(
+				<ContentTypeList
+					collections={[]}
+					orphanedTables={orphans}
+					onRegisterOrphan={onRegisterOrphan}
+				/>,
+			);
+
+			await screen.getByRole("button", { name: "Register" }).click();
+
+			expect(onRegisterOrphan).toHaveBeenCalledWith("legacy_data");
+		});
+
+		it("does not show orphan warning when orphanedTables is empty", async () => {
+			const screen = await render(<ContentTypeList collections={[]} orphanedTables={[]} />);
+			expect(screen.getByText("Unregistered Content Tables Found").query()).toBeNull();
+		});
+	});
+
+	describe("empty state", () => {
+		it("shows 'No content types yet' when no collections", async () => {
+			const screen = await render(<ContentTypeList collections={[]} />);
+			await expect.element(screen.getByText(NO_CONTENT_TYPES_REGEX)).toBeInTheDocument();
+		});
+	});
+
+	describe("loading state", () => {
+		it("shows loading message when isLoading is true", async () => {
+			const screen = await render(<ContentTypeList collections={[]} isLoading />);
+			await expect.element(screen.getByText("Loading collections...")).toBeInTheDocument();
+		});
+	});
+});

packages/admin/tests/components/FieldEditor.test.tsx

@@ -0,0 +1,347 @@
+import * as React from "react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render } from "vitest-browser-react";
+
+import { FieldEditor } from "../../src/components/FieldEditor";
+import type { SchemaField } from "../../src/lib/api";
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const FIELD_TYPE_REGEXES = [
+	/Short Text/,
+	/Long Text/,
+	/Number Decimal number/,
+	/Integer Whole number/,
+	/Boolean True\/false toggle/,
+	/Date & Time/,
+	/^Select Single choice/,
+	/Multi Select/,
+	/Rich Text/,
+	/Image/,
+	/^File File from/,
+	/Reference/,
+	/JSON/,
+	/Slug URL-friendly/,
+];
+
+const SHORT_TEXT_REGEX = /Short Text/;
+const LONG_TEXT_REGEX = /Long Text/;
+const BOOLEAN_REGEX = /Boolean/;
+const RICH_TEXT_REGEX = /Rich Text Rich text editor/;
+
+function makeField(overrides: Partial<SchemaField> = {}): SchemaField {
+	return {
+		id: "field_01",
+		collectionId: "col_01",
+		slug: "title",
+		label: "Title",
+		type: "string",
+		columnType: "TEXT",
+		required: true,
+		unique: false,
+		searchable: true,
+		sortOrder: 0,
+		createdAt: new Date().toISOString(),
+		...overrides,
+	};
+}
+
+// The kumo Dialog renders a `data-base-ui-inert` overlay that blocks pointer
+// events inside the dialog in Playwright's actionability checks. Assertions
+// (toBeInTheDocument, toHaveValue, etc.) work fine; only click() is blocked.
+//
+// Strategy:
+// - Type selection step: assert type buttons exist (no clicking needed)
+// - Config step: use edit mode (pass field prop) to go directly to config
+// - onSave/callbacks: use edit mode fields to test form submission
+
+describe("FieldEditor", () => {
+	const defaultProps = {
+		open: true,
+		onOpenChange: vi.fn(),
+		onSave: vi.fn(),
+	};
+
+	beforeEach(() => {
+		vi.clearAllMocks();
+	});
+
+	describe("type selection step", () => {
+		it("shows type selection grid when creating new field", async () => {
+			const screen = await render(<FieldEditor {...defaultProps} />);
+			await expect.element(screen.getByText("Add Field")).toBeInTheDocument();
+			await expect
+				.element(screen.getByRole("button", { name: SHORT_TEXT_REGEX }))
+				.toBeInTheDocument();
+			await expect
+				.element(screen.getByRole("button", { name: LONG_TEXT_REGEX }))
+				.toBeInTheDocument();
+			await expect.element(screen.getByRole("button", { name: BOOLEAN_REGEX })).toBeInTheDocument();
+			await expect
+				.element(screen.getByRole("button", { name: RICH_TEXT_REGEX }))
+				.toBeInTheDocument();
+		});
+
+		it("shows all 14 field types as buttons", async () => {
+			const screen = await render(<FieldEditor {...defaultProps} />);
+			// Each type renders as a button with label and description
+			for (const name of FIELD_TYPE_REGEXES) {
+				await expect.element(screen.getByRole("button", { name })).toBeInTheDocument();
+			}
+		});
+
+		it("does not show config form on initial render", async () => {
+			const screen = await render(<FieldEditor {...defaultProps} />);
+			// Label and Slug inputs should NOT be present in type selection step
+			expect(screen.getByLabelText("Label").query()).toBeNull();
+			expect(screen.getByLabelText("Slug").query()).toBeNull();
+		});
+	});
+
+	describe("config step (string field)", () => {
+		// Use a minimal string field to go directly to config step
+		const stringField = makeField({
+			slug: "",
+			label: "",
+			type: "string",
+			required: false,
+			unique: false,
+			searchable: false,
+		});
+
+		it("shows Configure Field title for string type", async () => {
+			const screen = await render(
+				<FieldEditor {...defaultProps} field={makeField({ type: "string" })} />,
+			);
+			await expect.element(screen.getByText("Edit Field")).toBeInTheDocument();
+		});
+
+		it("shows label and slug inputs", async () => {
+			const screen = await render(<FieldEditor {...defaultProps} field={stringField} />);
+			await expect.element(screen.getByLabelText("Label")).toBeInTheDocument();
+			await expect.element(screen.getByLabelText("Slug")).toBeInTheDocument();
+		});
+
+		it("shows searchable checkbox for string type", async () => {
+			const screen = await render(<FieldEditor {...defaultProps} field={stringField} />);
+			await expect.element(screen.getByText("Searchable")).toBeInTheDocument();
+		});
+
+		it("shows min/max length validation for string type", async () => {
+			const screen = await render(<FieldEditor {...defaultProps} field={stringField} />);
+			await expect.element(screen.getByText("Validation")).toBeInTheDocument();
+			await expect.element(screen.getByLabelText("Min Length")).toBeInTheDocument();
+			await expect.element(screen.getByLabelText("Max Length")).toBeInTheDocument();
+		});
+
+		it("shows pattern input for string type", async () => {
+			const screen = await render(<FieldEditor {...defaultProps} field={stringField} />);
+			await expect.element(screen.getByLabelText("Pattern (Regex)")).toBeInTheDocument();
+		});
+
+		it("shows required and unique checkboxes", async () => {
+			const screen = await render(<FieldEditor {...defaultProps} field={stringField} />);
+			await expect.element(screen.getByText("Required")).toBeInTheDocument();
+			await expect.element(screen.getByText("Unique")).toBeInTheDocument();
+		});
+	});
+
+	describe("config step (number field)", () => {
+		const numberField = makeField({
+			slug: "",
+			label: "",
+			type: "number",
+			required: false,
+			unique: false,
+			searchable: false,
+		});
+
+		it("shows min/max value for number type", async () => {
+			const screen = await render(<FieldEditor {...defaultProps} field={numberField} />);
+			await expect.element(screen.getByLabelText("Min Value")).toBeInTheDocument();
+			await expect.element(screen.getByLabelText("Max Value")).toBeInTheDocument();
+		});
+
+		it("does not show searchable for number type", async () => {
+			const screen = await render(<FieldEditor {...defaultProps} field={numberField} />);
+			expect(screen.getByText("Searchable").query()).toBeNull();
+		});
+
+		it("does not show pattern for number type", async () => {
+			const screen = await render(<FieldEditor {...defaultProps} field={numberField} />);
+			expect(screen.getByLabelText("Pattern (Regex)").query()).toBeNull();
+		});
+
+		it("does not show min/max length for number type", async () => {
+			const screen = await render(<FieldEditor {...defaultProps} field={numberField} />);
+			expect(screen.getByLabelText("Min Length").query()).toBeNull();
+			expect(screen.getByLabelText("Max Length").query()).toBeNull();
+		});
+	});
+
+	describe("config step (text field)", () => {
+		const textField = makeField({
+			slug: "",
+			label: "",
+			type: "text",
+			required: false,
+			unique: false,
+			searchable: false,
+		});
+
+		it("shows min/max length but no pattern for text type", async () => {
+			const screen = await render(<FieldEditor {...defaultProps} field={textField} />);
+			await expect.element(screen.getByLabelText("Min Length")).toBeInTheDocument();
+			await expect.element(screen.getByLabelText("Max Length")).toBeInTheDocument();
+			expect(screen.getByLabelText("Pattern (Regex)").query()).toBeNull();
+		});
+
+		it("shows searchable checkbox for text type", async () => {
+			const screen = await render(<FieldEditor {...defaultProps} field={textField} />);
+			await expect.element(screen.getByText("Searchable")).toBeInTheDocument();
+		});
+	});
+
+	describe("config step (select field)", () => {
+		const selectField = makeField({
+			slug: "",
+			label: "",
+			type: "select",
+			required: false,
+			unique: false,
+			searchable: false,
+		});
+
+		it("shows options textarea for select type", async () => {
+			const screen = await render(<FieldEditor {...defaultProps} field={selectField} />);
+			await expect.element(screen.getByText("Options (one per line)")).toBeInTheDocument();
+			// Textarea should have the placeholder
+			await expect.element(screen.getByPlaceholder("Option 1")).toBeInTheDocument();
+		});
+	});
+
+	describe("config step (multiSelect field)", () => {
+		const multiSelectField = makeField({
+			slug: "",
+			label: "",
+			type: "multiSelect",
+			required: false,
+			unique: false,
+			searchable: false,
+		});
+
+		it("shows options textarea for multi-select type", async () => {
+			const screen = await render(<FieldEditor {...defaultProps} field={multiSelectField} />);
+			await expect.element(screen.getByText("Options (one per line)")).toBeInTheDocument();
+			await expect.element(screen.getByPlaceholder("Option 1")).toBeInTheDocument();
+		});
+	});
+
+	describe("edit mode", () => {
+		const existingField = makeField({
+			validation: { maxLength: 200 },
+		});
+
+		it("skips type selection and shows config directly", async () => {
+			const screen = await render(<FieldEditor {...defaultProps} field={existingField} />);
+			await expect.element(screen.getByText("Edit Field")).toBeInTheDocument();
+			await expect.element(screen.getByLabelText("Label")).toHaveValue("Title");
+		});
+
+		it("disables slug input in edit mode", async () => {
+			const screen = await render(<FieldEditor {...defaultProps} field={existingField} />);
+			await expect.element(screen.getByLabelText("Slug")).toBeDisabled();
+		});
+
+		it("shows hint about slug immutability", async () => {
+			const screen = await render(<FieldEditor {...defaultProps} field={existingField} />);
+			await expect
+				.element(screen.getByText("Field slugs cannot be changed after creation"))
+				.toBeInTheDocument();
+		});
+
+		it("does not show Change button in edit mode", async () => {
+			const screen = await render(<FieldEditor {...defaultProps} field={existingField} />);
+			expect(screen.getByRole("button", { name: "Change" }).query()).toBeNull();
+		});
+
+		it("shows Update Field button instead of Add Field", async () => {
+			const screen = await render(<FieldEditor {...defaultProps} field={existingField} />);
+			await expect
+				.element(screen.getByRole("button", { name: "Update Field" }))
+				.toBeInTheDocument();
+		});
+
+		it("pre-populates validation values", async () => {
+			const screen = await render(<FieldEditor {...defaultProps} field={existingField} />);
+			await expect.element(screen.getByLabelText("Max Length")).toHaveValue(200);
+		});
+
+		it("pre-populates slug value", async () => {
+			const screen = await render(<FieldEditor {...defaultProps} field={existingField} />);
+			await expect.element(screen.getByLabelText("Slug")).toHaveValue("title");
+		});
+
+		it("pre-populates required checkbox", async () => {
+			const screen = await render(<FieldEditor {...defaultProps} field={existingField} />);
+			// The Required checkbox text should be present (the field has required: true)
+			await expect.element(screen.getByText("Required")).toBeInTheDocument();
+		});
+
+		it("does not auto-generate slug when editing label in edit mode", async () => {
+			const screen = await render(<FieldEditor {...defaultProps} field={existingField} />);
+			await screen.getByLabelText("Label").fill("New Label");
+			// Slug should remain "title", not change to "new_label"
+			await expect.element(screen.getByLabelText("Slug")).toHaveValue("title");
+		});
+
+		it("shows type indicator with field type info", async () => {
+			const screen = await render(<FieldEditor {...defaultProps} field={existingField} />);
+			await expect.element(screen.getByText("Short Text")).toBeInTheDocument();
+			await expect.element(screen.getByText("Single line text input")).toBeInTheDocument();
+		});
+	});
+
+	describe("saving state", () => {
+		it("shows Saving... when isSaving is true", async () => {
+			const field = makeField();
+			const screen = await render(<FieldEditor {...defaultProps} isSaving={true} field={field} />);
+			await expect.element(screen.getByText("Saving...")).toBeInTheDocument();
+		});
+
+		it("disables cancel button when saving", async () => {
+			const field = makeField();
+			const screen = await render(<FieldEditor {...defaultProps} isSaving={true} field={field} />);
+			await expect.element(screen.getByRole("button", { name: "Cancel" })).toBeDisabled();
+		});
+
+		it("disables update button when saving", async () => {
+			const field = makeField();
+			const screen = await render(<FieldEditor {...defaultProps} isSaving={true} field={field} />);
+			await expect.element(screen.getByRole("button", { name: "Saving..." })).toBeDisabled();
+		});
+	});
+
+	describe("button state", () => {
+		it("disables save button when label is empty", async () => {
+			const field = makeField({ slug: "test", label: "" });
+			const screen = await render(<FieldEditor {...defaultProps} field={field} />);
+			await expect.element(screen.getByRole("button", { name: "Update Field" })).toBeDisabled();
+		});
+
+		it("enables save button when label and slug are filled", async () => {
+			const field = makeField({ slug: "test", label: "Test" });
+			const screen = await render(<FieldEditor {...defaultProps} field={field} />);
+			await expect.element(screen.getByRole("button", { name: "Update Field" })).toBeEnabled();
+		});
+	});
+
+	describe("dialog closed", () => {
+		it("renders nothing visible when open is false", async () => {
+			const screen = await render(<FieldEditor {...defaultProps} open={false} />);
+			expect(screen.getByText("Add Field").query()).toBeNull();
+		});
+	});
+});

packages/admin/tests/components/Header.test.tsx

@@ -0,0 +1,106 @@
+import { Sidebar } from "@cloudflare/kumo";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import * as React from "react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render } from "vitest-browser-react";
+
+import { ThemeProvider } from "../../src/components/ThemeProvider";
+
+// Mock router
+vi.mock("@tanstack/react-router", async () => {
+	const actual = await vi.importActual("@tanstack/react-router");
+	return {
+		...actual,
+		Link: ({ children, to, ...props }: any) => (
+			<a href={to} {...props}>
+				{children}
+			</a>
+		),
+		useNavigate: () => vi.fn(),
+	};
+});
+
+// Mock API
+vi.mock("../../src/lib/api/client", async () => {
+	const actual = await vi.importActual("../../src/lib/api/client");
+	return {
+		...actual,
+		apiFetch: vi.fn().mockImplementation((url: string) => {
+			if (url.includes("/auth/me")) {
+				return Promise.resolve(
+					new Response(
+						JSON.stringify({
+							data: {
+								id: "1",
+								name: "Matt Kane",
+								email: "matt@test.com",
+								role: 50,
+							},
+						}),
+						{ status: 200 },
+					),
+				);
+			}
+			return Promise.resolve(new Response(JSON.stringify({ data: {} }), { status: 200 }));
+		}),
+	};
+});
+
+// Import after mocks
+const { Header } = await import("../../src/components/Header");
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const THEME_BUTTON_REGEX = /Theme:/;
+
+function TestWrapper({ children }: { children: React.ReactNode }) {
+	const qc = new QueryClient({
+		defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+	});
+	return (
+		<QueryClientProvider client={qc}>
+			<ThemeProvider defaultTheme="light">
+				<Sidebar.Provider defaultOpen>{children}</Sidebar.Provider>
+			</ThemeProvider>
+		</QueryClientProvider>
+	);
+}
+
+describe("Header", () => {
+	beforeEach(() => {
+		localStorage.clear();
+		document.documentElement.removeAttribute("data-mode");
+	});
+
+	it("theme toggle button is present", async () => {
+		const screen = await render(
+			<TestWrapper>
+				<Header />
+			</TestWrapper>,
+		);
+		// ThemeToggle renders a button with title containing "Theme:"
+		const themeButton = screen.getByTitle(THEME_BUTTON_REGEX);
+		await expect.element(themeButton).toBeInTheDocument();
+	});
+
+	it("displays user name when loaded", async () => {
+		const screen = await render(
+			<TestWrapper>
+				<Header />
+			</TestWrapper>,
+		);
+		// User data loads async via react-query
+		await expect.element(screen.getByText("Matt Kane")).toBeInTheDocument();
+	});
+
+	it("View Site link is present", async () => {
+		const screen = await render(
+			<TestWrapper>
+				<Header />
+			</TestWrapper>,
+		);
+		await expect.element(screen.getByText("View Site")).toBeInTheDocument();
+	});
+});

packages/admin/tests/components/LoginPage.test.tsx

@@ -0,0 +1,150 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import * as React from "react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render } from "vitest-browser-react";
+
+// Mock router
+vi.mock("@tanstack/react-router", async () => {
+	const actual = await vi.importActual("@tanstack/react-router");
+	return {
+		...actual,
+		Link: ({ children, to, ...props }: any) => (
+			<a href={to} {...props}>
+				{children}
+			</a>
+		),
+		useNavigate: () => vi.fn(),
+	};
+});
+
+// Mock API — keep a reference so tests can override fetchManifest
+const mockFetchManifest = vi.fn().mockResolvedValue({
+	authMode: "passkey",
+	collections: {},
+	plugins: {},
+	version: "1",
+	hash: "",
+});
+
+vi.mock("../../src/lib/api", async () => {
+	const actual = await vi.importActual("../../src/lib/api");
+	return {
+		...actual,
+		fetchManifest: (...args: unknown[]) => mockFetchManifest(...args),
+		apiFetch: vi
+			.fn()
+			.mockResolvedValue(new Response(JSON.stringify({ success: true }), { status: 200 })),
+	};
+});
+
+// Mock WebAuthn APIs so PasskeyLogin doesn't bail out
+Object.defineProperty(window, "PublicKeyCredential", {
+	value: function PublicKeyCredential() {},
+	writable: true,
+});
+
+// Import after mocks
+const { LoginPage } = await import("../../src/components/LoginPage");
+
+function QueryWrapper({ children }: { children: React.ReactNode }) {
+	const qc = new QueryClient({
+		defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+	});
+	return <QueryClientProvider client={qc}>{children}</QueryClientProvider>;
+}
+
+describe("LoginPage", () => {
+	beforeEach(() => {
+		// Clean URL params
+		window.history.replaceState({}, "", window.location.pathname);
+	});
+
+	it("shows passkey login button when authMode is passkey", async () => {
+		const screen = await render(
+			<QueryWrapper>
+				<LoginPage />
+			</QueryWrapper>,
+		);
+		await expect.element(screen.getByText("Sign in with Passkey")).toBeInTheDocument();
+	});
+
+	it("shows 'Sign in with email link' button", async () => {
+		const screen = await render(
+			<QueryWrapper>
+				<LoginPage />
+			</QueryWrapper>,
+		);
+		await expect.element(screen.getByText("Sign in with email link")).toBeInTheDocument();
+	});
+
+	it("clicking email link button switches to magic link form", async () => {
+		const screen = await render(
+			<QueryWrapper>
+				<LoginPage />
+			</QueryWrapper>,
+		);
+		const emailButton = screen.getByText("Sign in with email link");
+		await emailButton.click();
+		// Heading should change
+		await expect.element(screen.getByText("Sign in with email")).toBeInTheDocument();
+	});
+
+	it("magic link form has email input and submit button", async () => {
+		const screen = await render(
+			<QueryWrapper>
+				<LoginPage />
+			</QueryWrapper>,
+		);
+		// Switch to magic link
+		await screen.getByText("Sign in with email link").click();
+		// Check for email input (by placeholder)
+		await expect.element(screen.getByPlaceholder("you@example.com")).toBeInTheDocument();
+		// Check for submit button
+		await expect.element(screen.getByText("Send magic link")).toBeInTheDocument();
+	});
+
+	it("'Back to login' from magic link returns to passkey view", async () => {
+		const screen = await render(
+			<QueryWrapper>
+				<LoginPage />
+			</QueryWrapper>,
+		);
+		// Switch to magic link
+		await screen.getByText("Sign in with email link").click();
+		await expect.element(screen.getByText("Sign in with email")).toBeInTheDocument();
+		// Click back
+		await screen.getByText("Back to login").click();
+		// Should see passkey button again
+		await expect.element(screen.getByText("Sign in with Passkey")).toBeInTheDocument();
+	});
+
+	it("hides sign up link when signup is not enabled", async () => {
+		const screen = await render(
+			<QueryWrapper>
+				<LoginPage />
+			</QueryWrapper>,
+		);
+		// Wait for manifest to load (passkey button appears)
+		await expect.element(screen.getByText("Sign in with Passkey")).toBeInTheDocument();
+		// Sign up link should NOT be present
+		expect(screen.getByText("Sign up").query()).toBeNull();
+	});
+
+	it("shows sign up link when signup is enabled", async () => {
+		mockFetchManifest.mockResolvedValueOnce({
+			authMode: "passkey",
+			collections: {},
+			plugins: {},
+			version: "1",
+			hash: "",
+			signupEnabled: true,
+		});
+
+		const screen = await render(
+			<QueryWrapper>
+				<LoginPage />
+			</QueryWrapper>,
+		);
+		await expect.element(screen.getByText("Sign up")).toBeInTheDocument();
+	});
+});

packages/admin/tests/components/MarketplaceBrowse.test.tsx

@@ -0,0 +1,306 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import * as React from "react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render } from "vitest-browser-react";
+
+import type {
+	MarketplaceSearchResult,
+	MarketplacePluginSummary,
+} from "../../src/lib/api/marketplace";
+
+// Mock router
+const mockNavigate = vi.fn();
+vi.mock("@tanstack/react-router", async () => {
+	const actual = await vi.importActual("@tanstack/react-router");
+	return {
+		...actual,
+		Link: ({ children, to, params, ...props }: any) => {
+			const href = params?.pluginId ? to.replace("$pluginId", params.pluginId) : to;
+			return (
+				<a href={href} {...props}>
+					{children}
+				</a>
+			);
+		},
+		useNavigate: () => mockNavigate,
+	};
+});
+
+const mockSearchMarketplace = vi.fn<() => Promise<MarketplaceSearchResult>>();
+
+vi.mock("../../src/lib/api/marketplace", async () => {
+	const actual = await vi.importActual("../../src/lib/api/marketplace");
+	return {
+		...actual,
+		searchMarketplace: (...args: unknown[]) => mockSearchMarketplace(...(args as [])),
+	};
+});
+
+// Import after mocks
+const { MarketplaceBrowse } = await import("../../src/components/MarketplaceBrowse");
+
+function makePlugin(overrides: Partial<MarketplacePluginSummary> = {}): MarketplacePluginSummary {
+	return {
+		id: "test-plugin",
+		name: "Test Plugin",
+		description: "A test plugin for testing",
+		author: { name: "Test Author", verified: false },
+		capabilities: ["read:content"],
+		installCount: 1234,
+		createdAt: "2025-01-01T00:00:00Z",
+		updatedAt: "2025-02-01T00:00:00Z",
+		latestVersion: {
+			version: "1.0.0",
+			audit: { verdict: "pass", riskScore: 10 },
+		},
+		...overrides,
+	};
+}
+
+function Wrapper({ children }: { children: React.ReactNode }) {
+	const qc = new QueryClient({
+		defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+	});
+	return <QueryClientProvider client={qc}>{children}</QueryClientProvider>;
+}
+
+describe("MarketplaceBrowse", () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+		mockSearchMarketplace.mockResolvedValue({
+			items: [
+				makePlugin({
+					id: "seo-helper",
+					name: "SEO Helper",
+					description: "Improve your SEO",
+					author: { name: "Acme Inc", verified: true },
+					installCount: 5200,
+					capabilities: ["read:content", "write:content"],
+					latestVersion: {
+						version: "1.2.3",
+						audit: { verdict: "pass", riskScore: 10 },
+					},
+				}),
+				makePlugin({
+					id: "analytics",
+					name: "Analytics",
+					description: "Track page views",
+					author: { name: "DataCorp", verified: false },
+					installCount: 890,
+					capabilities: ["network:fetch"],
+					latestVersion: {
+						version: "2.0.0",
+						audit: { verdict: "warn", riskScore: 45 },
+					},
+				}),
+			],
+		});
+	});
+
+	it("renders marketplace header", async () => {
+		const screen = await render(
+			<Wrapper>
+				<MarketplaceBrowse />
+			</Wrapper>,
+		);
+		await expect.element(screen.getByText("Marketplace")).toBeInTheDocument();
+		await expect
+			.element(screen.getByText("Browse and install plugins to extend your site."))
+			.toBeInTheDocument();
+	});
+
+	it("displays plugin cards with names and authors", async () => {
+		const screen = await render(
+			<Wrapper>
+				<MarketplaceBrowse />
+			</Wrapper>,
+		);
+		await expect.element(screen.getByText("SEO Helper")).toBeInTheDocument();
+		await expect.element(screen.getByText("Acme Inc")).toBeInTheDocument();
+		await expect.element(screen.getByText("Analytics")).toBeInTheDocument();
+		await expect.element(screen.getByText("DataCorp")).toBeInTheDocument();
+	});
+
+	it("shows plugin descriptions", async () => {
+		const screen = await render(
+			<Wrapper>
+				<MarketplaceBrowse />
+			</Wrapper>,
+		);
+		await expect.element(screen.getByText("Improve your SEO")).toBeInTheDocument();
+		await expect.element(screen.getByText("Track page views")).toBeInTheDocument();
+	});
+
+	it("formats install counts (K for thousands)", async () => {
+		const screen = await render(
+			<Wrapper>
+				<MarketplaceBrowse />
+			</Wrapper>,
+		);
+		// 5200 → 5.2k
+		await expect.element(screen.getByText("5.2k")).toBeInTheDocument();
+		// 890 → 890
+		await expect.element(screen.getByText("890")).toBeInTheDocument();
+	});
+
+	it("shows permission count", async () => {
+		const screen = await render(
+			<Wrapper>
+				<MarketplaceBrowse />
+			</Wrapper>,
+		);
+		// SEO Helper has 2 capabilities
+		await expect.element(screen.getByText("2 permissions")).toBeInTheDocument();
+		// Analytics has 1 capability
+		await expect.element(screen.getByText("1 permission")).toBeInTheDocument();
+	});
+
+	it("shows audit badges", async () => {
+		const screen = await render(
+			<Wrapper>
+				<MarketplaceBrowse />
+			</Wrapper>,
+		);
+		// SEO Helper has "pass", Analytics has "warn"
+		await expect.element(screen.getByText("Pass")).toBeInTheDocument();
+		await expect.element(screen.getByText("Warn")).toBeInTheDocument();
+	});
+
+	it("shows 'Installed' badge for installed plugins", async () => {
+		const screen = await render(
+			<Wrapper>
+				<MarketplaceBrowse installedPluginIds={new Set(["seo-helper"])} />
+			</Wrapper>,
+		);
+		await expect.element(screen.getByText("Installed")).toBeInTheDocument();
+	});
+
+	it("shows empty state when no results", async () => {
+		mockSearchMarketplace.mockResolvedValue({ items: [] });
+		const screen = await render(
+			<Wrapper>
+				<MarketplaceBrowse />
+			</Wrapper>,
+		);
+		await expect.element(screen.getByText("No plugins found")).toBeInTheDocument();
+	});
+
+	it("shows error state with retry button", async () => {
+		mockSearchMarketplace.mockRejectedValue(new Error("Network timeout"));
+		const screen = await render(
+			<Wrapper>
+				<MarketplaceBrowse />
+			</Wrapper>,
+		);
+		await expect.element(screen.getByText("Unable to reach marketplace")).toBeInTheDocument();
+		await expect.element(screen.getByText("Network timeout")).toBeInTheDocument();
+		await expect.element(screen.getByText("Retry")).toBeInTheDocument();
+	});
+
+	it("has search input", async () => {
+		const screen = await render(
+			<Wrapper>
+				<MarketplaceBrowse />
+			</Wrapper>,
+		);
+		const searchInput = screen.getByPlaceholder("Search plugins...");
+		await expect.element(searchInput).toBeInTheDocument();
+	});
+
+	it("has sort dropdown with options", async () => {
+		const screen = await render(
+			<Wrapper>
+				<MarketplaceBrowse />
+			</Wrapper>,
+		);
+		const sortSelect = screen.getByRole("combobox", { name: "Sort plugins" });
+		await expect.element(sortSelect).toBeInTheDocument();
+	});
+
+	it("plugin cards link to detail page", async () => {
+		const screen = await render(
+			<Wrapper>
+				<MarketplaceBrowse />
+			</Wrapper>,
+		);
+		// Wait for cards to render
+		await expect.element(screen.getByText("SEO Helper")).toBeInTheDocument();
+		// The Link wraps the card, creating an <a> with the plugin detail path
+		const links = screen.getByRole("link").all();
+		const seoLink = links.find((l) => l.element().getAttribute("href")?.includes("seo-helper"));
+		expect(seoLink).toBeDefined();
+	});
+
+	it("shows plugin avatar when no icon URL", async () => {
+		mockSearchMarketplace.mockResolvedValue({
+			items: [makePlugin({ id: "no-icon", name: "Zeta Plugin", iconUrl: undefined })],
+		});
+		const screen = await render(
+			<Wrapper>
+				<MarketplaceBrowse />
+			</Wrapper>,
+		);
+		// The avatar shows the first letter — use exact match to avoid matching "Zeta Plugin"
+		await expect.element(screen.getByText("Z", { exact: true })).toBeInTheDocument();
+	});
+
+	it("shows version numbers on cards", async () => {
+		const screen = await render(
+			<Wrapper>
+				<MarketplaceBrowse />
+			</Wrapper>,
+		);
+		await expect.element(screen.getByText("v1.2.3")).toBeInTheDocument();
+		await expect.element(screen.getByText("v2.0.0")).toBeInTheDocument();
+	});
+
+	it("has capability filter dropdown", async () => {
+		const screen = await render(
+			<Wrapper>
+				<MarketplaceBrowse />
+			</Wrapper>,
+		);
+		const capabilitySelect = screen.getByRole("combobox", { name: "Filter by capability" });
+		await expect.element(capabilitySelect).toBeInTheDocument();
+		// Default option
+		await expect.element(screen.getByText("All capabilities")).toBeInTheDocument();
+	});
+
+	it("installed badge navigates to plugin manager on click", async () => {
+		const screen = await render(
+			<Wrapper>
+				<MarketplaceBrowse installedPluginIds={new Set(["seo-helper"])} />
+			</Wrapper>,
+		);
+		const badge = screen.getByText("Installed");
+		await expect.element(badge).toBeInTheDocument();
+		await badge.click();
+		expect(mockNavigate).toHaveBeenCalledWith({ to: "/plugins-manager" });
+	});
+
+	it("shows 'Load more' button when there are more pages", async () => {
+		mockSearchMarketplace.mockResolvedValue({
+			items: [makePlugin({ id: "plugin-1", name: "Plugin One" })],
+			nextCursor: "cursor-abc",
+		});
+		const screen = await render(
+			<Wrapper>
+				<MarketplaceBrowse />
+			</Wrapper>,
+		);
+		await expect.element(screen.getByText("Load more")).toBeInTheDocument();
+	});
+
+	it("does not show 'Load more' when there are no more pages", async () => {
+		mockSearchMarketplace.mockResolvedValue({
+			items: [makePlugin({ id: "plugin-1", name: "Plugin One" })],
+		});
+		const screen = await render(
+			<Wrapper>
+				<MarketplaceBrowse />
+			</Wrapper>,
+		);
+		await expect.element(screen.getByText("Plugin One")).toBeInTheDocument();
+		expect(screen.getByText("Load more").query()).toBeNull();
+	});
+});

packages/admin/tests/components/MarketplacePluginDetail.test.tsx

@@ -0,0 +1,418 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import * as React from "react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render } from "vitest-browser-react";
+
+import type { MarketplacePluginDetail as PluginDetailType } from "../../src/lib/api/marketplace";
+
+const INSTALL_RE = /Install/;
+
+// Mock router
+vi.mock("@tanstack/react-router", async () => {
+	const actual = await vi.importActual("@tanstack/react-router");
+	return {
+		...actual,
+		Link: ({ children, to, ...props }: any) => (
+			<a href={to} {...props}>
+				{children}
+			</a>
+		),
+		useNavigate: () => vi.fn(),
+	};
+});
+
+const mockFetchMarketplacePlugin = vi.fn<() => Promise<PluginDetailType>>();
+const mockInstallMarketplacePlugin = vi.fn<() => Promise<void>>();
+
+vi.mock("../../src/lib/api/marketplace", async () => {
+	const actual = await vi.importActual("../../src/lib/api/marketplace");
+	return {
+		...actual,
+		fetchMarketplacePlugin: (...args: unknown[]) => mockFetchMarketplacePlugin(...(args as [])),
+		installMarketplacePlugin: (...args: unknown[]) => mockInstallMarketplacePlugin(...(args as [])),
+	};
+});
+
+// Import after mocks
+const { MarketplacePluginDetail } = await import("../../src/components/MarketplacePluginDetail");
+
+function makePluginDetail(overrides: Partial<PluginDetailType> = {}): PluginDetailType {
+	return {
+		id: "seo-helper",
+		name: "SEO Helper",
+		description: "Improve your SEO with automatic meta tags",
+		author: { name: "Acme Inc", verified: true },
+		capabilities: ["read:content", "write:content"],
+		keywords: ["seo", "meta", "optimization"],
+		installCount: 5200,
+		license: "MIT",
+		repositoryUrl: "https://github.com/acme/seo-helper",
+		homepageUrl: "https://seo-helper.example.com",
+		createdAt: "2025-01-01T00:00:00Z",
+		updatedAt: "2025-02-01T00:00:00Z",
+		latestVersion: {
+			version: "2.1.0",
+			minEmDashVersion: "0.8.0",
+			bundleSize: 15360,
+			readme: "# SEO Helper\n\nThis plugin helps with SEO.",
+			audit: { verdict: "pass", riskScore: 5 },
+			publishedAt: "2025-02-01T00:00:00Z",
+		},
+		...overrides,
+	};
+}
+
+function Wrapper({ children }: { children: React.ReactNode }) {
+	const qc = new QueryClient({
+		defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+	});
+	return <QueryClientProvider client={qc}>{children}</QueryClientProvider>;
+}
+
+describe("MarketplacePluginDetail", () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+		mockFetchMarketplacePlugin.mockResolvedValue(makePluginDetail());
+		mockInstallMarketplacePlugin.mockResolvedValue(undefined);
+	});
+
+	it("displays plugin name and description", async () => {
+		const screen = await render(
+			<Wrapper>
+				<MarketplacePluginDetail pluginId="seo-helper" />
+			</Wrapper>,
+		);
+		// Name appears in header h1 and also in rendered README h1 — use first()
+		await expect
+			.element(screen.getByRole("heading", { name: "SEO Helper" }).first())
+			.toBeInTheDocument();
+		await expect
+			.element(screen.getByText("Improve your SEO with automatic meta tags"))
+			.toBeInTheDocument();
+	});
+
+	it("shows author name with verified badge", async () => {
+		const screen = await render(
+			<Wrapper>
+				<MarketplacePluginDetail pluginId="seo-helper" />
+			</Wrapper>,
+		);
+		await expect.element(screen.getByText("Acme Inc")).toBeInTheDocument();
+	});
+
+	it("shows version number", async () => {
+		const screen = await render(
+			<Wrapper>
+				<MarketplacePluginDetail pluginId="seo-helper" />
+			</Wrapper>,
+		);
+		// Wait for data to load — version appears in both header and sidebar
+		await expect.element(screen.getByText("Acme Inc")).toBeInTheDocument();
+		await expect.element(screen.getByText("v2.1.0").first()).toBeInTheDocument();
+	});
+
+	it("displays install count", async () => {
+		const screen = await render(
+			<Wrapper>
+				<MarketplacePluginDetail pluginId="seo-helper" />
+			</Wrapper>,
+		);
+		await expect.element(screen.getByText("5,200 installs")).toBeInTheDocument();
+	});
+
+	it("shows audit badge", async () => {
+		const screen = await render(
+			<Wrapper>
+				<MarketplacePluginDetail pluginId="seo-helper" />
+			</Wrapper>,
+		);
+		// Wait for data to load, then check audit badge (appears in stats bar and sidebar)
+		await expect.element(screen.getByText("Acme Inc")).toBeInTheDocument();
+		await expect.element(screen.getByText("Pass").first()).toBeInTheDocument();
+	});
+
+	it("shows license", async () => {
+		const screen = await render(
+			<Wrapper>
+				<MarketplacePluginDetail pluginId="seo-helper" />
+			</Wrapper>,
+		);
+		await expect.element(screen.getByText("MIT")).toBeInTheDocument();
+	});
+
+	it("shows source and website links", async () => {
+		const screen = await render(
+			<Wrapper>
+				<MarketplacePluginDetail pluginId="seo-helper" />
+			</Wrapper>,
+		);
+		await expect.element(screen.getByText("Source")).toBeInTheDocument();
+		await expect.element(screen.getByText("Website")).toBeInTheDocument();
+	});
+
+	it("renders README content", async () => {
+		const screen = await render(
+			<Wrapper>
+				<MarketplacePluginDetail pluginId="seo-helper" />
+			</Wrapper>,
+		);
+		// The markdown renderer should convert "# SEO Helper" and the paragraph
+		await expect.element(screen.getByText("This plugin helps with SEO.")).toBeInTheDocument();
+	});
+
+	it("shows permissions sidebar", async () => {
+		const screen = await render(
+			<Wrapper>
+				<MarketplacePluginDetail pluginId="seo-helper" />
+			</Wrapper>,
+		);
+		await expect.element(screen.getByText("Permissions")).toBeInTheDocument();
+		await expect.element(screen.getByText("Read your content")).toBeInTheDocument();
+		await expect
+			.element(screen.getByText("Create, update, and delete content"))
+			.toBeInTheDocument();
+	});
+
+	it("shows keywords", async () => {
+		const screen = await render(
+			<Wrapper>
+				<MarketplacePluginDetail pluginId="seo-helper" />
+			</Wrapper>,
+		);
+		await expect.element(screen.getByText("Keywords")).toBeInTheDocument();
+		// "seo" appears in multiple places (name, description, keyword) — use exact match
+		await expect.element(screen.getByText("seo", { exact: true })).toBeInTheDocument();
+		await expect.element(screen.getByText("meta", { exact: true })).toBeInTheDocument();
+		await expect.element(screen.getByText("optimization")).toBeInTheDocument();
+	});
+
+	it("shows audit summary with risk score", async () => {
+		const screen = await render(
+			<Wrapper>
+				<MarketplacePluginDetail pluginId="seo-helper" />
+			</Wrapper>,
+		);
+		await expect.element(screen.getByText("Security Audit")).toBeInTheDocument();
+		await expect.element(screen.getByText("Risk score: 5/100")).toBeInTheDocument();
+	});
+
+	it("shows version info with min emdash version", async () => {
+		const screen = await render(
+			<Wrapper>
+				<MarketplacePluginDetail pluginId="seo-helper" />
+			</Wrapper>,
+		);
+		await expect.element(screen.getByText("Version")).toBeInTheDocument();
+		await expect.element(screen.getByText("Requires EmDash 0.8.0")).toBeInTheDocument();
+	});
+
+	it("shows bundle size", async () => {
+		const screen = await render(
+			<Wrapper>
+				<MarketplacePluginDetail pluginId="seo-helper" />
+			</Wrapper>,
+		);
+		// 15360 bytes = 15.0 KB
+		await expect.element(screen.getByText("15.0 KB")).toBeInTheDocument();
+	});
+
+	it("shows Install button for non-installed plugin", async () => {
+		const screen = await render(
+			<Wrapper>
+				<MarketplacePluginDetail pluginId="seo-helper" />
+			</Wrapper>,
+		);
+		await expect.element(screen.getByRole("button", { name: INSTALL_RE })).toBeInTheDocument();
+	});
+
+	it("shows Installed badge for installed plugin", async () => {
+		const screen = await render(
+			<Wrapper>
+				<MarketplacePluginDetail
+					pluginId="seo-helper"
+					installedPluginIds={new Set(["seo-helper"])}
+				/>
+			</Wrapper>,
+		);
+		await expect.element(screen.getByText("Installed")).toBeInTheDocument();
+	});
+
+	it("opens consent dialog on Install click", async () => {
+		const screen = await render(
+			<Wrapper>
+				<MarketplacePluginDetail pluginId="seo-helper" />
+			</Wrapper>,
+		);
+		// Wait for data to load, then click Install button
+		const installBtn = screen.getByRole("button", { name: INSTALL_RE });
+		await expect.element(installBtn).toBeInTheDocument();
+		await installBtn.click();
+		// Consent dialog should appear
+		await expect.element(screen.getByText("Plugin Permissions")).toBeInTheDocument();
+		await expect
+			.element(screen.getByText("SEO Helper requires the following permissions:"))
+			.toBeInTheDocument();
+	});
+
+	it("shows error state when plugin fails to load", async () => {
+		mockFetchMarketplacePlugin.mockRejectedValue(new Error("Plugin not found"));
+		const screen = await render(
+			<Wrapper>
+				<MarketplacePluginDetail pluginId="nonexistent" />
+			</Wrapper>,
+		);
+		await expect.element(screen.getByText("Failed to load plugin")).toBeInTheDocument();
+		await expect.element(screen.getByText("Plugin not found")).toBeInTheDocument();
+		// "Back to marketplace" appears multiple times (header + error) — just check one
+		const backLinks = screen.getByText("Back to marketplace").all();
+		expect(backLinks.length).toBeGreaterThanOrEqual(1);
+	});
+
+	it("shows 'No detailed description' when no README", async () => {
+		mockFetchMarketplacePlugin.mockResolvedValue(
+			makePluginDetail({
+				latestVersion: {
+					version: "1.0.0",
+					bundleSize: 0,
+					publishedAt: "2025-01-01T00:00:00Z",
+				},
+			}),
+		);
+		const screen = await render(
+			<Wrapper>
+				<MarketplacePluginDetail pluginId="seo-helper" />
+			</Wrapper>,
+		);
+		await expect
+			.element(screen.getByText("No detailed description available."))
+			.toBeInTheDocument();
+	});
+
+	it("shows 'no special permissions' when capabilities empty", async () => {
+		mockFetchMarketplacePlugin.mockResolvedValue(makePluginDetail({ capabilities: [] }));
+		const screen = await render(
+			<Wrapper>
+				<MarketplacePluginDetail pluginId="seo-helper" />
+			</Wrapper>,
+		);
+		await expect
+			.element(screen.getByText("This plugin requires no special permissions."))
+			.toBeInTheDocument();
+	});
+
+	it("renders screenshots when present", async () => {
+		mockFetchMarketplacePlugin.mockResolvedValue(
+			makePluginDetail({
+				latestVersion: {
+					version: "2.1.0",
+					bundleSize: 15360,
+					screenshotUrls: [
+						"https://example.com/screenshot1.png",
+						"https://example.com/screenshot2.png",
+					],
+					audit: { verdict: "pass", riskScore: 5 },
+					publishedAt: "2025-02-01T00:00:00Z",
+				},
+			}),
+		);
+		const screen = await render(
+			<Wrapper>
+				<MarketplacePluginDetail pluginId="seo-helper" />
+			</Wrapper>,
+		);
+		await expect.element(screen.getByText("Screenshots")).toBeInTheDocument();
+		// Two screenshot images
+		const imgs = screen.getByRole("img").all();
+		const screenshotImgs = imgs.filter((img) =>
+			img.element().getAttribute("alt")?.startsWith("Screenshot"),
+		);
+		expect(screenshotImgs.length).toBe(2);
+	});
+
+	it("has back link to marketplace", async () => {
+		const screen = await render(
+			<Wrapper>
+				<MarketplacePluginDetail pluginId="seo-helper" />
+			</Wrapper>,
+		);
+		await expect.element(screen.getByText("Back to marketplace")).toBeInTheDocument();
+	});
+
+	it("shows plugin avatar when no icon URL", async () => {
+		mockFetchMarketplacePlugin.mockResolvedValue(makePluginDetail({ iconUrl: undefined }));
+		const screen = await render(
+			<Wrapper>
+				<MarketplacePluginDetail pluginId="seo-helper" />
+			</Wrapper>,
+		);
+		// First letter of "SEO Helper" is "S" — use exact match
+		await expect.element(screen.getByText("S", { exact: true })).toBeInTheDocument();
+	});
+
+	describe("XSS prevention in README rendering", () => {
+		async function renderWithReadme(readme: string) {
+			mockFetchMarketplacePlugin.mockResolvedValue(
+				makePluginDetail({
+					latestVersion: {
+						version: "1.0.0",
+						bundleSize: 0,
+						readme,
+						audit: { verdict: "pass", riskScore: 0 },
+						publishedAt: "2025-01-01T00:00:00Z",
+					},
+				}),
+			);
+			const screen = await render(
+				<Wrapper>
+					<MarketplacePluginDetail pluginId="seo-helper" />
+				</Wrapper>,
+			);
+			// Wait for data to load
+			await expect.element(screen.getByText("Acme Inc")).toBeInTheDocument();
+			return screen;
+		}
+
+		it("strips img tags with onerror handlers from link text", async () => {
+			const screen = await renderWithReadme(
+				"[<img src=x onerror=alert(document.cookie)>](https://example.com)",
+			);
+			// The prose div contains the rendered README markdown
+			const prose = screen.container.querySelector(".prose")!;
+			// No img element should exist in the rendered output
+			expect(prose.querySelectorAll("img[onerror]").length).toBe(0);
+			// The onerror text should be escaped (visible as text), not as an attribute
+			expect(prose.querySelectorAll("[onerror]").length).toBe(0);
+		});
+
+		it("strips attribute breakout via quotes in link text", async () => {
+			const screen = await renderWithReadme('[a" onmouseover="alert(1)](https://example.com)');
+			// The prose div contains the rendered README markdown
+			const prose = screen.container.querySelector(".prose")!;
+			// No element should have an onmouseover attribute
+			expect(prose.querySelectorAll("[onmouseover]").length).toBe(0);
+		});
+
+		it("strips raw script tags from README", async () => {
+			const screen = await renderWithReadme("Hello\n\n<script>alert('xss')</script>\n\nWorld");
+			expect(screen.container.querySelectorAll("script").length).toBe(0);
+			expect(screen.container.innerHTML).not.toContain("<script");
+		});
+
+		it("strips event handlers from raw HTML in README", async () => {
+			const screen = await renderWithReadme('<div onload="alert(1)">test</div>');
+			expect(screen.container.innerHTML).not.toContain("onload");
+		});
+
+		it("renders safe markdown content correctly", async () => {
+			const screen = await renderWithReadme(
+				"# Title\n\nA paragraph with **bold** and [a link](https://example.com).",
+			);
+			// The link text should be rendered as plain text within an anchor
+			await expect.element(screen.getByText("a link")).toBeInTheDocument();
+			const link = screen.container.querySelector('a[href="https://example.com"]');
+			expect(link).not.toBeNull();
+			expect(link?.getAttribute("target")).toBe("_blank");
+			expect(link?.getAttribute("rel")).toBe("noopener noreferrer");
+		});
+	});
+});

packages/admin/tests/components/MediaDetailPanel.test.tsx

@@ -0,0 +1,260 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import * as React from "react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render } from "vitest-browser-react";
+
+import { MediaDetailPanel } from "../../src/components/MediaDetailPanel";
+import type { MediaItem } from "../../src/lib/api";
+
+vi.mock("../../src/lib/api", async () => {
+	const actual = await vi.importActual("../../src/lib/api");
+	return {
+		...actual,
+		updateMedia: vi.fn().mockResolvedValue({}),
+		deleteMedia: vi.fn().mockResolvedValue({}),
+	};
+});
+
+// Import the mocked functions for assertions
+import { updateMedia, deleteMedia } from "../../src/lib/api";
+
+function QueryWrapper({ children }: { children: React.ReactNode }) {
+	const qc = new QueryClient({
+		defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+	});
+	return <QueryClientProvider client={qc}>{children}</QueryClientProvider>;
+}
+
+function renderPanel(props: Partial<React.ComponentProps<typeof MediaDetailPanel>> = {}) {
+	const defaultProps = {
+		item: null as MediaItem | null,
+		onClose: vi.fn(),
+		onDeleted: vi.fn(),
+		...props,
+	};
+	return render(
+		<QueryWrapper>
+			<MediaDetailPanel {...defaultProps} />
+		</QueryWrapper>,
+	);
+}
+
+function makeImageItem(overrides: Partial<MediaItem> = {}): MediaItem {
+	return {
+		id: "media-1",
+		filename: "photo.jpg",
+		mimeType: "image/jpeg",
+		url: "https://example.com/photo.jpg",
+		size: 204800,
+		width: 1920,
+		height: 1080,
+		alt: "A nice photo",
+		caption: "Photo caption",
+		createdAt: "2025-01-15T10:30:00Z",
+		...overrides,
+	};
+}
+
+function makePdfItem(overrides: Partial<MediaItem> = {}): MediaItem {
+	return {
+		id: "media-2",
+		filename: "document.pdf",
+		mimeType: "application/pdf",
+		url: "https://example.com/document.pdf",
+		size: 1048576,
+		createdAt: "2025-01-15T10:30:00Z",
+		...overrides,
+	};
+}
+
+describe("MediaDetailPanel", () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+	});
+
+	it("renders nothing when item is null", async () => {
+		const screen = await renderPanel({ item: null });
+		// The component returns null, so "Media Details" heading shouldn't exist
+		await expect
+			.element(screen.getByText("Media Details"), { timeout: 100 })
+			.not.toBeInTheDocument();
+	});
+
+	it("displays filename and file size", async () => {
+		const item = makeImageItem({ size: 204800 });
+		const screen = await renderPanel({ item });
+		// Filename is in a disabled input
+		const filenameInput = screen.getByLabelText("Filename");
+		await expect.element(filenameInput).toHaveValue("photo.jpg");
+		// 204800 bytes = 200 KB
+		await expect.element(screen.getByText("200 KB")).toBeInTheDocument();
+	});
+
+	it("displays dimensions for images", async () => {
+		const item = makeImageItem({ width: 1920, height: 1080 });
+		const screen = await renderPanel({ item });
+		await expect.element(screen.getByText("1920 × 1080")).toBeInTheDocument();
+	});
+
+	it("shows image preview for image mimeTypes", async () => {
+		const item = makeImageItem();
+		const screen = await renderPanel({ item });
+		const img = screen.getByAltText("A nice photo");
+		await expect.element(img).toBeInTheDocument();
+		await expect.element(img).toHaveAttribute("src", item.url);
+	});
+
+	it("does not show image preview for non-image mimeTypes", async () => {
+		const item = makePdfItem();
+		const screen = await renderPanel({ item });
+		// Should show the mime type text instead of img
+		await expect.element(screen.getByText("application/pdf")).toBeInTheDocument();
+	});
+
+	it("alt text input is editable", async () => {
+		const item = makeImageItem({ alt: "Initial alt" });
+		const screen = await renderPanel({ item });
+		const altInput = screen.getByLabelText("Alt Text");
+		await expect.element(altInput).toBeInTheDocument();
+		await altInput.fill("New alt text");
+		await expect.element(altInput).toHaveValue("New alt text");
+	});
+
+	it("shows caption textarea only for images", async () => {
+		const imageItem = makeImageItem();
+		const screen = await renderPanel({ item: imageItem });
+		// Caption textarea should exist for images - find by placeholder
+		const captionArea = screen.getByPlaceholder("Optional caption for display");
+		await expect.element(captionArea).toBeInTheDocument();
+		await expect.element(captionArea).toHaveValue("Photo caption");
+	});
+
+	it("hides caption textarea for non-images", async () => {
+		const pdfItem = makePdfItem();
+		const screen = await renderPanel({ item: pdfItem });
+		await expect
+			.element(screen.getByPlaceholder("Optional caption for display"), { timeout: 100 })
+			.not.toBeInTheDocument();
+	});
+
+	it("hides caption textarea for non-images", async () => {
+		const pdfItem = makePdfItem();
+		const screen = await renderPanel({ item: pdfItem });
+		await expect
+			.element(screen.getByLabelText("Caption"), { timeout: 100 })
+			.not.toBeInTheDocument();
+	});
+
+	it("filename input is disabled", async () => {
+		const item = makeImageItem();
+		const screen = await renderPanel({ item });
+		const filenameInput = screen.getByLabelText("Filename");
+		await expect.element(filenameInput).toBeDisabled();
+	});
+
+	it("save button is disabled when no changes", async () => {
+		const item = makeImageItem();
+		const screen = await renderPanel({ item });
+		const saveBtn = screen.getByRole("button", { name: "Save" });
+		await expect.element(saveBtn).toBeDisabled();
+	});
+
+	it("save button is enabled after changing alt text", async () => {
+		const item = makeImageItem({ alt: "Original" });
+		const screen = await renderPanel({ item });
+		const altInput = screen.getByLabelText("Alt Text");
+		await altInput.fill("Changed alt text");
+		const saveBtn = screen.getByRole("button", { name: "Save" });
+		await expect.element(saveBtn).toBeEnabled();
+	});
+
+	it("save calls updateMedia with correct payload", async () => {
+		const item = makeImageItem({ alt: "Old alt", caption: "Old caption" });
+		const screen = await renderPanel({ item });
+
+		const altInput = screen.getByLabelText("Alt Text");
+		await altInput.fill("New alt");
+
+		const saveBtn = screen.getByRole("button", { name: "Save" });
+		await saveBtn.click();
+
+		expect(updateMedia).toHaveBeenCalledWith("media-1", {
+			alt: "New alt",
+			caption: "Old caption",
+		});
+	});
+
+	it("delete with confirm calls deleteMedia and onClose + onDeleted", async () => {
+		const onClose = vi.fn();
+		const onDeleted = vi.fn();
+		const item = makeImageItem();
+
+		const screen = await renderPanel({ item, onClose, onDeleted });
+		const deleteBtn = screen.getByRole("button", { name: "Delete" });
+		await deleteBtn.click();
+
+		// ConfirmDialog should appear
+		await expect.element(screen.getByText("Delete Media?")).toBeInTheDocument();
+
+		// Direct DOM click to bypass Base UI inert overlay
+		const allDeleteBtns = screen.getByRole("button", { name: "Delete" }).all();
+		allDeleteBtns.at(-1)!.element().click();
+
+		// Wait for mutation to complete
+		await vi.waitFor(() => {
+			expect(deleteMedia).toHaveBeenCalledWith("media-1");
+			expect(onClose).toHaveBeenCalled();
+			expect(onDeleted).toHaveBeenCalled();
+		});
+	});
+
+	it("delete cancelled does not call deleteMedia", async () => {
+		const item = makeImageItem();
+
+		const screen = await renderPanel({ item });
+		const deleteBtn = screen.getByRole("button", { name: "Delete" });
+		await deleteBtn.click();
+
+		// ConfirmDialog should appear
+		await expect.element(screen.getByText("Delete Media?")).toBeInTheDocument();
+
+		// Direct DOM click to bypass Base UI inert overlay
+		screen.getByRole("button", { name: "Cancel" }).element().click();
+
+		expect(deleteMedia).not.toHaveBeenCalled();
+	});
+
+	it("escape key calls onClose", async () => {
+		const onClose = vi.fn();
+		const item = makeImageItem();
+		await renderPanel({ item, onClose });
+
+		await new Promise<void>((resolve) => {
+			window.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
+			resolve();
+		});
+
+		expect(onClose).toHaveBeenCalled();
+	});
+
+	it("form fields reset when item prop changes", async () => {
+		const item1 = makeImageItem({ id: "m1", alt: "Alt one", caption: "Cap one" });
+		const item2 = makeImageItem({ id: "m2", alt: "Alt two", caption: "Cap two" });
+
+		const screen = await renderPanel({ item: item1 });
+
+		// Verify item1 alt is shown
+		const altInput = screen.getByLabelText("Alt Text");
+		await expect.element(altInput).toHaveValue("Alt one");
+
+		// Rerender with item2
+		await screen.rerender(
+			<QueryWrapper>
+				<MediaDetailPanel item={item2} onClose={vi.fn()} onDeleted={vi.fn()} />
+			</QueryWrapper>,
+		);
+
+		// The alt text should now show item2's alt
+		await expect.element(screen.getByLabelText("Alt Text")).toHaveValue("Alt two");
+	});
+});

packages/admin/tests/components/MediaLibrary.test.tsx

@@ -0,0 +1,185 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import * as React from "react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render } from "vitest-browser-react";
+
+import { MediaLibrary } from "../../src/components/MediaLibrary";
+import type { MediaItem } from "../../src/lib/api";
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const UPLOAD_CTA_PATTERN = /Upload images, videos, and documents/;
+const UPLOAD_TO_LIBRARY_PATTERN = /Upload to Library/;
+const UPLOAD_FILES_PATTERN = /Upload Files/;
+
+vi.mock("../../src/lib/api", async () => {
+	const actual = await vi.importActual("../../src/lib/api");
+	return {
+		...actual,
+		fetchMediaProviders: vi.fn().mockResolvedValue([]),
+		fetchProviderMedia: vi.fn().mockResolvedValue({ items: [] }),
+		uploadToProvider: vi.fn().mockResolvedValue({}),
+		updateMedia: vi.fn().mockResolvedValue({}),
+		deleteMedia: vi.fn().mockResolvedValue({}),
+	};
+});
+
+function QueryWrapper({ children }: { children: React.ReactNode }) {
+	const qc = new QueryClient({
+		defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+	});
+	return <QueryClientProvider client={qc}>{children}</QueryClientProvider>;
+}
+
+function renderLibrary(props: Partial<React.ComponentProps<typeof MediaLibrary>> = {}) {
+	const defaultProps: React.ComponentProps<typeof MediaLibrary> = {
+		items: [],
+		isLoading: false,
+		onUpload: vi.fn(),
+		onSelect: vi.fn(),
+		onDelete: vi.fn(),
+		onItemUpdated: vi.fn(),
+		...props,
+	};
+	return render(
+		<QueryWrapper>
+			<MediaLibrary {...defaultProps} />
+		</QueryWrapper>,
+	);
+}
+
+function makeMediaItem(overrides: Partial<MediaItem> = {}): MediaItem {
+	return {
+		id: "media_01",
+		filename: "photo.jpg",
+		mimeType: "image/jpeg",
+		url: "https://example.com/photo.jpg",
+		size: 102400,
+		width: 800,
+		height: 600,
+		createdAt: "2025-01-01T00:00:00Z",
+		...overrides,
+	};
+}
+
+describe("MediaLibrary", () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+	});
+
+	describe("rendering items", () => {
+		it("displays media items in grid view by default", async () => {
+			const items = [
+				makeMediaItem({ id: "1", filename: "image1.jpg" }),
+				makeMediaItem({ id: "2", filename: "image2.jpg" }),
+			];
+			const screen = await renderLibrary({ items });
+			// Grid view is default — items render as buttons with alt text
+			await expect.element(screen.getByRole("button", { name: "Grid view" })).toBeInTheDocument();
+			// Images should be present via their img alt attributes
+			await expect.element(screen.getByAltText("image1.jpg")).toBeInTheDocument();
+			await expect.element(screen.getByAltText("image2.jpg")).toBeInTheDocument();
+		});
+
+		it("grid items show image thumbnails for image mimeTypes", async () => {
+			const items = [makeMediaItem({ id: "1", filename: "pic.jpg", mimeType: "image/jpeg" })];
+			const screen = await renderLibrary({ items });
+			const img = screen.getByAltText("pic.jpg");
+			await expect.element(img).toBeInTheDocument();
+			await expect.element(img).toHaveAttribute("src", "https://example.com/photo.jpg");
+		});
+	});
+
+	describe("view mode toggle", () => {
+		it("switches between grid and list view", async () => {
+			const items = [makeMediaItem({ id: "1", filename: "test.jpg" })];
+			const screen = await renderLibrary({ items });
+
+			// Default is grid
+			const listBtn = screen.getByRole("button", { name: "List view" });
+			await listBtn.click();
+
+			// In list view, filename appears in table cell
+			await expect.element(screen.getByText("test.jpg")).toBeInTheDocument();
+			// Table headers should be visible
+			await expect.element(screen.getByText("Filename")).toBeInTheDocument();
+			await expect.element(screen.getByText("Type")).toBeInTheDocument();
+			await expect.element(screen.getByText("Size")).toBeInTheDocument();
+		});
+	});
+
+	describe("upload", () => {
+		it("upload button triggers file input", async () => {
+			const screen = await renderLibrary();
+			// The upload button should be present
+			await expect
+				.element(screen.getByRole("button", { name: UPLOAD_TO_LIBRARY_PATTERN }))
+				.toBeInTheDocument();
+			// Hidden file input should exist
+			const fileInput = screen.getByLabelText("Upload files");
+			await expect.element(fileInput).toBeInTheDocument();
+		});
+	});
+
+	describe("item selection", () => {
+		it("clicking an item opens detail panel", async () => {
+			const items = [makeMediaItem({ id: "1", filename: "photo.jpg", alt: "A photo" })];
+			const screen = await renderLibrary({ items });
+
+			// Click the grid item button
+			await screen.getByRole("button", { name: "photo.jpg" }).click();
+
+			// MediaDetailPanel should open showing the item details
+			await expect.element(screen.getByText("Media Details")).toBeInTheDocument();
+		});
+	});
+
+	describe("empty state", () => {
+		it("shows upload CTA when no items", async () => {
+			const screen = await renderLibrary({ items: [] });
+			await expect.element(screen.getByText("No media yet")).toBeInTheDocument();
+			await expect.element(screen.getByText(UPLOAD_CTA_PATTERN)).toBeInTheDocument();
+			await expect
+				.element(screen.getByRole("button", { name: UPLOAD_FILES_PATTERN }))
+				.toBeInTheDocument();
+		});
+	});
+
+	describe("loading state", () => {
+		it("displays loading state", async () => {
+			const screen = await renderLibrary({ isLoading: true });
+			// When loading, neither empty state nor items are shown
+			expect(screen.getByText("No media yet").query()).toBeNull();
+		});
+	});
+
+	describe("list view details", () => {
+		it("list view shows table with filename and details", async () => {
+			const items = [
+				makeMediaItem({
+					id: "1",
+					filename: "document.pdf",
+					mimeType: "application/pdf",
+					size: 1048576,
+				}),
+			];
+			const screen = await renderLibrary({ items });
+
+			// Switch to list view
+			await screen.getByRole("button", { name: "List view" }).click();
+
+			await expect.element(screen.getByText("document.pdf")).toBeInTheDocument();
+			await expect.element(screen.getByText("application/pdf")).toBeInTheDocument();
+			await expect.element(screen.getByText("1 MB")).toBeInTheDocument();
+		});
+	});
+
+	describe("header", () => {
+		it("shows Media Library heading", async () => {
+			const screen = await renderLibrary();
+			await expect.element(screen.getByText("Media Library")).toBeInTheDocument();
+		});
+	});
+});

packages/admin/tests/components/MediaPickerModal.test.tsx

@@ -0,0 +1,293 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import * as React from "react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render } from "vitest-browser-react";
+
+import { MediaPickerModal } from "../../src/components/MediaPickerModal";
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const UPLOAD_BUTTON_REGEX = /Upload/;
+
+vi.mock("../../src/lib/api", async () => {
+	const actual = await vi.importActual("../../src/lib/api");
+	return {
+		...actual,
+		fetchMediaList: vi.fn().mockResolvedValue({
+			items: [
+				{
+					id: "m1",
+					filename: "photo.jpg",
+					mimeType: "image/jpeg",
+					url: "/media/photo.jpg",
+					size: 1024,
+					width: 800,
+					height: 600,
+					createdAt: "2024-01-01",
+				},
+				{
+					id: "m2",
+					filename: "landscape.png",
+					mimeType: "image/png",
+					url: "/media/landscape.png",
+					size: 2048,
+					width: 1200,
+					height: 800,
+					createdAt: "2024-01-02",
+				},
+			],
+		}),
+		fetchMediaProviders: vi.fn().mockResolvedValue([]),
+		fetchProviderMedia: vi.fn().mockResolvedValue({ items: [] }),
+		uploadMedia: vi.fn().mockResolvedValue({ id: "m3", filename: "new.jpg" }),
+		uploadToProvider: vi.fn().mockResolvedValue({}),
+		updateMedia: vi.fn().mockResolvedValue({}),
+	};
+});
+
+function QueryWrapper({ children }: { children: React.ReactNode }) {
+	const qc = new QueryClient({
+		defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+	});
+	return <QueryClientProvider client={qc}>{children}</QueryClientProvider>;
+}
+
+function renderModal(props: Partial<React.ComponentProps<typeof MediaPickerModal>> = {}) {
+	const defaultProps: React.ComponentProps<typeof MediaPickerModal> = {
+		open: true,
+		onOpenChange: vi.fn(),
+		onSelect: vi.fn(),
+		...props,
+	};
+	return render(
+		<QueryWrapper>
+			<MediaPickerModal {...defaultProps} />
+		</QueryWrapper>,
+	);
+}
+
+describe("MediaPickerModal", () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+	});
+
+	describe("displaying items", () => {
+		it("shows media items when open", async () => {
+			const screen = await renderModal({ open: true });
+			await expect.element(screen.getByRole("option", { name: "photo.jpg" })).toBeInTheDocument();
+			await expect
+				.element(screen.getByRole("option", { name: "landscape.png" }))
+				.toBeInTheDocument();
+		});
+
+		it("shows the modal title", async () => {
+			const screen = await renderModal({ title: "Pick an Image" });
+			await expect.element(screen.getByText("Pick an Image")).toBeInTheDocument();
+		});
+	});
+
+	describe("selection", () => {
+		it("single click selects item (highlighted)", async () => {
+			const screen = await renderModal();
+			const option = screen.getByRole("option", { name: "photo.jpg" });
+			await expect.element(option).toBeInTheDocument();
+
+			// Direct DOM click to bypass inert overlay
+			const btn = option.element().querySelector("button")!;
+			btn.click();
+
+			// Should show selected state via aria-selected
+			await expect.element(option).toHaveAttribute("aria-selected", "true");
+			// Footer should show selected filename in a <strong> tag
+			await expect.element(screen.getByRole("strong")).toBeInTheDocument();
+		});
+
+		it("double click selects and calls onSelect", async () => {
+			const onSelect = vi.fn();
+			const screen = await renderModal({ onSelect });
+
+			const option = screen.getByRole("option", { name: "photo.jpg" });
+			await expect.element(option).toBeInTheDocument();
+
+			// Use direct DOM dblclick to bypass inert overlay
+			const btn = option.element().querySelector("button")!;
+			btn.dispatchEvent(new MouseEvent("dblclick", { bubbles: true }));
+
+			expect(onSelect).toHaveBeenCalledWith(
+				expect.objectContaining({ id: "m1", filename: "photo.jpg" }),
+			);
+		});
+
+		it("Insert button disabled when nothing selected", async () => {
+			await renderModal();
+			// There are two Insert buttons — URL section and footer.
+			// The footer Insert is the last one and should be disabled.
+			await vi.waitFor(() => {
+				const allInsertBtns = document.querySelectorAll("button");
+				const insertBtns = [...allInsertBtns].filter((b) => b.textContent?.trim() === "Insert");
+				// The footer Insert (last one) should be disabled
+				const lastInsert = insertBtns.at(-1);
+				expect(lastInsert?.disabled).toBe(true);
+			});
+		});
+
+		it("Insert button enabled when item selected, calls onSelect", async () => {
+			const onSelect = vi.fn();
+			const screen = await renderModal({ onSelect });
+
+			// Select an item via direct DOM click
+			const option = screen.getByRole("option", { name: "photo.jpg" });
+			await expect.element(option).toBeInTheDocument();
+			const itemBtn = option.element().querySelector("button")!;
+			itemBtn.click();
+
+			// Wait for selection to register
+			await expect.element(option).toHaveAttribute("aria-selected", "true");
+
+			// Click the footer Insert button (last Insert button)
+			await vi.waitFor(() => {
+				const allInsertBtns = document.querySelectorAll("button");
+				const insertBtns = [...allInsertBtns].filter((b) => b.textContent?.trim() === "Insert");
+				const lastInsert = insertBtns.at(-1)!;
+				expect(lastInsert.disabled).toBe(false);
+				lastInsert.click();
+			});
+
+			expect(onSelect).toHaveBeenCalledWith(
+				expect.objectContaining({ id: "m1", filename: "photo.jpg" }),
+			);
+		});
+	});
+
+	describe("URL input", () => {
+		it("invalid URL shows error", async () => {
+			const screen = await renderModal();
+
+			// The URL input has aria-label "Image URL"
+			const urlInput = screen.getByLabelText("Image URL");
+			await expect.element(urlInput).toBeInTheDocument();
+
+			// Type an invalid URL — use direct DOM since we're inside a dialog
+			const inputEl = urlInput.element() as HTMLInputElement;
+			// Manually set value and trigger change
+			const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+				HTMLInputElement.prototype,
+				"value",
+			)!.set!;
+			nativeInputValueSetter.call(inputEl, "not-a-url");
+			inputEl.dispatchEvent(new Event("input", { bubbles: true }));
+			inputEl.dispatchEvent(new Event("change", { bubbles: true }));
+
+			// Click the URL Insert button (first Insert button)
+			await vi.waitFor(() => {
+				const urlInsert = [...document.querySelectorAll("button")].find(
+					(b) => b.textContent?.trim() === "Insert",
+				)!;
+				expect(urlInsert.disabled).toBe(false);
+				urlInsert.click();
+			});
+
+			await expect.element(screen.getByText("Please enter a valid URL")).toBeInTheDocument();
+		});
+
+		it("URL input: typing a URL and submitting triggers probe", async () => {
+			const onSelect = vi.fn();
+			const screen = await renderModal({ onSelect });
+
+			const urlInput = screen.getByLabelText("Image URL");
+			const inputEl = urlInput.element() as HTMLInputElement;
+			const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+				HTMLInputElement.prototype,
+				"value",
+			)!.set!;
+			nativeInputValueSetter.call(inputEl, "https://example.com/test.jpg");
+			inputEl.dispatchEvent(new Event("input", { bubbles: true }));
+			inputEl.dispatchEvent(new Event("change", { bubbles: true }));
+
+			// Click URL Insert button
+			await vi.waitFor(() => {
+				const urlInsert = [...document.querySelectorAll("button")].find(
+					(b) => b.textContent?.trim() === "Insert",
+				)!;
+				urlInsert.click();
+			});
+
+			// Image probe will fail in test env, so either onSelect called or error shown
+			await vi.waitFor(
+				() => {
+					const called = onSelect.mock.calls.length > 0;
+					const hasError =
+						document.body.textContent?.includes("Could not load image from URL") ?? false;
+					expect(called || hasError).toBe(true);
+				},
+				{ timeout: 3000 },
+			);
+		});
+	});
+
+	describe("cancel and close", () => {
+		it("Cancel closes modal", async () => {
+			const onOpenChange = vi.fn();
+			const screen = await renderModal({ onOpenChange });
+
+			await expect.element(screen.getByText("Select Image")).toBeInTheDocument();
+			// Direct DOM click to bypass inert overlay
+			const cancelEl = screen.getByText("Cancel").element();
+			const cancelBtn = cancelEl.closest("button")!;
+			cancelBtn.click();
+
+			expect(onOpenChange).toHaveBeenCalledWith(false);
+		});
+	});
+
+	describe("state reset", () => {
+		it("state resets when modal reopens", async () => {
+			const onSelect = vi.fn();
+			const onOpenChange = vi.fn();
+			const screen = await renderModal({ open: true, onSelect, onOpenChange });
+
+			// Select an item
+			const option = screen.getByRole("option", { name: "photo.jpg" });
+			await expect.element(option).toBeInTheDocument();
+			const btn = option.element().querySelector("button")!;
+			btn.click();
+
+			// Verify selection
+			await expect.element(option).toHaveAttribute("aria-selected", "true");
+
+			// Close modal
+			await screen.rerender(
+				<QueryWrapper>
+					<MediaPickerModal open={false} onOpenChange={onOpenChange} onSelect={onSelect} />
+				</QueryWrapper>,
+			);
+
+			// Reopen modal
+			await screen.rerender(
+				<QueryWrapper>
+					<MediaPickerModal open={true} onOpenChange={onOpenChange} onSelect={onSelect} />
+				</QueryWrapper>,
+			);
+
+			// Footer Insert should be disabled (no selection after reset)
+			await vi.waitFor(() => {
+				const allInsertBtns = document.querySelectorAll("button");
+				const insertBtns = [...allInsertBtns].filter((b) => b.textContent?.trim() === "Insert");
+				const lastInsert = insertBtns.at(-1);
+				expect(lastInsert?.disabled).toBe(true);
+			});
+		});
+	});
+
+	describe("upload", () => {
+		it("upload button and file input are present", async () => {
+			const screen = await renderModal();
+			await expect
+				.element(screen.getByRole("button", { name: UPLOAD_BUTTON_REGEX }))
+				.toBeInTheDocument();
+			await expect.element(screen.getByLabelText("Upload file")).toBeInTheDocument();
+		});
+	});
+});

packages/admin/tests/components/MenuEditor.test.tsx

@@ -0,0 +1,185 @@
+import { Toasty } from "@cloudflare/kumo";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import * as React from "react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render } from "vitest-browser-react";
+
+import { MenuEditor } from "../../src/components/MenuEditor";
+
+vi.mock("@tanstack/react-router", async () => {
+	const actual = await vi.importActual("@tanstack/react-router");
+	return {
+		...actual,
+		Link: ({
+			children,
+			to,
+			...props
+		}: {
+			children: React.ReactNode;
+			to?: string;
+			[key: string]: unknown;
+		}) => (
+			<a href={typeof to === "string" ? to : "#"} {...props}>
+				{children}
+			</a>
+		),
+		useParams: () => ({ name: "main-menu" }),
+		useNavigate: () => vi.fn(),
+	};
+});
+
+vi.mock("../../src/lib/api", async () => {
+	const actual = await vi.importActual("../../src/lib/api");
+	return {
+		...actual,
+		fetchMenu: vi.fn(),
+		createMenuItem: vi.fn().mockResolvedValue({ id: "3" }),
+		deleteMenuItem: vi.fn().mockResolvedValue(undefined),
+		updateMenuItem: vi.fn().mockResolvedValue({}),
+		reorderMenuItems: vi.fn().mockResolvedValue([]),
+	};
+});
+
+import * as api from "../../src/lib/api";
+
+const ADD_CUSTOM_LINK_REGEX = /Add Custom Link/;
+
+const defaultMenu = {
+	id: "menu1",
+	name: "main-menu",
+	label: "Main Menu",
+	created_at: "",
+	updated_at: "",
+	items: [
+		{
+			id: "1",
+			menu_id: "menu1",
+			parent_id: null,
+			sort_order: 0,
+			type: "custom",
+			reference_collection: null,
+			reference_id: null,
+			custom_url: "/",
+			label: "Home",
+			title_attr: null,
+			target: "_self",
+			css_classes: null,
+			created_at: "",
+		},
+		{
+			id: "2",
+			menu_id: "menu1",
+			parent_id: null,
+			sort_order: 1,
+			type: "custom",
+			reference_collection: null,
+			reference_id: null,
+			custom_url: "/about",
+			label: "About",
+			title_attr: null,
+			target: "_self",
+			css_classes: null,
+			created_at: "",
+		},
+	],
+};
+
+function Wrapper({ children }: { children: React.ReactNode }) {
+	const qc = new QueryClient({
+		defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+	});
+	return (
+		<Toasty>
+			<QueryClientProvider client={qc}>{children}</QueryClientProvider>
+		</Toasty>
+	);
+}
+
+describe("MenuEditor", () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+		vi.mocked(api.fetchMenu).mockResolvedValue(defaultMenu);
+	});
+
+	it("displays menu items in order", async () => {
+		const screen = await render(<MenuEditor />, { wrapper: Wrapper });
+
+		// Use exact: true to avoid matching "/about" which contains "About"
+		await expect.element(screen.getByText("Home")).toBeInTheDocument();
+		await expect.element(screen.getByText("About", { exact: true })).toBeInTheDocument();
+	});
+
+	it("add item button opens dialog with label and URL inputs", async () => {
+		const screen = await render(<MenuEditor />, { wrapper: Wrapper });
+
+		await expect.element(screen.getByRole("heading", { name: "Main Menu" })).toBeInTheDocument();
+		await screen.getByRole("button", { name: ADD_CUSTOM_LINK_REGEX }).click();
+
+		await expect.element(screen.getByLabelText("Label")).toBeInTheDocument();
+		await expect.element(screen.getByLabelText("URL")).toBeInTheDocument();
+	});
+
+	it("edit item opens dialog", async () => {
+		const screen = await render(<MenuEditor />, { wrapper: Wrapper });
+
+		await expect.element(screen.getByText("Home")).toBeInTheDocument();
+
+		const editButtons = screen.getByRole("button", { name: "Edit" });
+		await editButtons.first().click();
+
+		await expect
+			.element(screen.getByRole("heading", { name: "Edit Menu Item" }))
+			.toBeInTheDocument();
+	});
+
+	it("delete item fires immediately without confirmation dialog", async () => {
+		const screen = await render(<MenuEditor />, { wrapper: Wrapper });
+
+		await expect.element(screen.getByText("Home")).toBeInTheDocument();
+
+		// Delete buttons have aria-label="Delete"
+		const deleteBtn = screen.getByRole("button", { name: "Delete" });
+		await deleteBtn.first().click();
+
+		// No confirmation dialog should appear
+		expect(screen.getByText("Are you sure").query()).toBeNull();
+		expect(screen.getByText("Confirm").query()).toBeNull();
+	});
+
+	it("up/down reorder buttons — first item up disabled, last item down disabled", async () => {
+		const screen = await render(<MenuEditor />, { wrapper: Wrapper });
+
+		await expect.element(screen.getByText("Home")).toBeInTheDocument();
+
+		const disabledButtons = document.querySelectorAll("button[disabled]");
+		// At least 2: first item's up + last item's down
+		expect(disabledButtons.length).toBeGreaterThanOrEqual(2);
+	});
+
+	it("empty state when no items", async () => {
+		vi.mocked(api.fetchMenu).mockResolvedValue({
+			...defaultMenu,
+			items: [],
+		});
+
+		const screen = await render(<MenuEditor />, { wrapper: Wrapper });
+
+		await expect.element(screen.getByText("No menu items yet")).toBeInTheDocument();
+		await expect
+			.element(screen.getByText("Add links to build your navigation menu"))
+			.toBeInTheDocument();
+	});
+
+	it("shows menu label as heading", async () => {
+		const screen = await render(<MenuEditor />, { wrapper: Wrapper });
+
+		await expect.element(screen.getByRole("heading", { name: "Main Menu" })).toBeInTheDocument();
+	});
+
+	it("shows custom URLs for custom link items", async () => {
+		const screen = await render(<MenuEditor />, { wrapper: Wrapper });
+
+		await expect.element(screen.getByText("Home")).toBeInTheDocument();
+		await expect.element(screen.getByText("/about")).toBeInTheDocument();
+	});
+});

packages/admin/tests/components/MenuList.test.tsx

@@ -0,0 +1,144 @@
+import { Toasty } from "@cloudflare/kumo";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import * as React from "react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render } from "vitest-browser-react";
+
+import { MenuList } from "../../src/components/MenuList";
+
+vi.mock("@tanstack/react-router", async () => {
+	const actual = await vi.importActual("@tanstack/react-router");
+	return {
+		...actual,
+		Link: ({
+			children,
+			to,
+			...props
+		}: {
+			children: React.ReactNode;
+			to?: string;
+			[key: string]: unknown;
+		}) => (
+			<a href={typeof to === "string" ? to : "#"} {...props}>
+				{children}
+			</a>
+		),
+		useNavigate: () => vi.fn(),
+	};
+});
+
+vi.mock("../../src/lib/api", async () => {
+	const actual = await vi.importActual("../../src/lib/api");
+	return {
+		...actual,
+		fetchMenus: vi.fn(),
+		createMenu: vi.fn().mockResolvedValue({ name: "new-menu", label: "New Menu" }),
+		deleteMenu: vi.fn().mockResolvedValue(undefined),
+	};
+});
+
+import * as api from "../../src/lib/api";
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const MAIN_MENU_ITEMS_REGEX = /main.*3 items/;
+const FOOTER_MENU_ITEMS_REGEX = /footer.*1 items/;
+const DELETE_MENU_CONFIRMATION_REGEX = /Are you sure you want to delete this menu/;
+const CREATE_MENU_REGEX = /Create Menu/;
+
+function mockMenus() {
+	vi.mocked(api.fetchMenus).mockResolvedValue([
+		{
+			id: "m1",
+			name: "main",
+			label: "Main Menu",
+			itemCount: 3,
+			created_at: "",
+			updated_at: "",
+		},
+		{
+			id: "m2",
+			name: "footer",
+			label: "Footer Menu",
+			itemCount: 1,
+			created_at: "",
+			updated_at: "",
+		},
+	]);
+}
+
+function Wrapper({ children }: { children: React.ReactNode }) {
+	const qc = new QueryClient({
+		defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+	});
+	return (
+		<Toasty>
+			<QueryClientProvider client={qc}>{children}</QueryClientProvider>
+		</Toasty>
+	);
+}
+
+describe("MenuList", () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+		mockMenus();
+	});
+
+	it("displays list of menus with labels and item counts", async () => {
+		const screen = await render(<MenuList />, { wrapper: Wrapper });
+
+		await expect.element(screen.getByRole("heading", { name: "Main Menu" })).toBeInTheDocument();
+		await expect.element(screen.getByText(MAIN_MENU_ITEMS_REGEX)).toBeInTheDocument();
+		await expect.element(screen.getByRole("heading", { name: "Footer Menu" })).toBeInTheDocument();
+		await expect.element(screen.getByText(FOOTER_MENU_ITEMS_REGEX)).toBeInTheDocument();
+	});
+
+	it("Create Menu button opens dialog", async () => {
+		const screen = await render(<MenuList />, { wrapper: Wrapper });
+
+		await screen.getByRole("button", { name: CREATE_MENU_REGEX }).click();
+		await expect.element(screen.getByText("Create New Menu")).toBeInTheDocument();
+	});
+
+	it("create dialog has name and label inputs", async () => {
+		const screen = await render(<MenuList />, { wrapper: Wrapper });
+
+		await screen.getByRole("button", { name: CREATE_MENU_REGEX }).click();
+
+		await expect.element(screen.getByLabelText("Name")).toBeInTheDocument();
+		await expect.element(screen.getByLabelText("Label")).toBeInTheDocument();
+	});
+
+	it("delete button opens confirmation dialog", async () => {
+		const screen = await render(<MenuList />, { wrapper: Wrapper });
+
+		await expect.element(screen.getByRole("heading", { name: "Main Menu" })).toBeInTheDocument();
+
+		await screen.getByRole("button", { name: "Delete main menu" }).click();
+
+		await expect.element(screen.getByRole("heading", { name: "Delete Menu" })).toBeInTheDocument();
+		await expect.element(screen.getByText(DELETE_MENU_CONFIRMATION_REGEX)).toBeInTheDocument();
+	});
+
+	it("shows empty state when no menus", async () => {
+		vi.mocked(api.fetchMenus).mockResolvedValue([]);
+
+		const screen = await render(<MenuList />, { wrapper: Wrapper });
+
+		await expect.element(screen.getByText("No menus yet")).toBeInTheDocument();
+		await expect
+			.element(screen.getByText("Create your first navigation menu to get started"))
+			.toBeInTheDocument();
+	});
+
+	it("each menu has an Edit link", async () => {
+		const screen = await render(<MenuList />, { wrapper: Wrapper });
+
+		await expect.element(screen.getByRole("heading", { name: "Main Menu" })).toBeInTheDocument();
+
+		const editLinks = screen.getByText("Edit");
+		await expect.element(editLinks.first()).toBeInTheDocument();
+	});
+});

packages/admin/tests/components/PluginManager.test.tsx

@@ -0,0 +1,358 @@
+import { Toasty } from "@cloudflare/kumo";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import * as React from "react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render } from "vitest-browser-react";
+
+import type { PluginInfo, AdminManifest } from "../../src/lib/api";
+import type { PluginUpdateInfo } from "../../src/lib/api/marketplace";
+
+// Mock router
+vi.mock("@tanstack/react-router", async () => {
+	const actual = await vi.importActual("@tanstack/react-router");
+	return {
+		...actual,
+		Link: ({ children, to, ...props }: any) => (
+			<a href={to} {...props}>
+				{children}
+			</a>
+		),
+		useNavigate: () => vi.fn(),
+	};
+});
+
+const mockFetchPlugins = vi.fn<() => Promise<PluginInfo[]>>();
+const mockEnablePlugin = vi.fn();
+const mockDisablePlugin = vi.fn();
+
+vi.mock("../../src/lib/api", async () => {
+	const actual = await vi.importActual("../../src/lib/api");
+	return {
+		...actual,
+		fetchPlugins: (...args: unknown[]) => mockFetchPlugins(...(args as [])),
+		enablePlugin: (...args: unknown[]) => mockEnablePlugin(...(args as [])),
+		disablePlugin: (...args: unknown[]) => mockDisablePlugin(...(args as [])),
+	};
+});
+
+const mockCheckPluginUpdates = vi.fn<() => Promise<PluginUpdateInfo[]>>();
+const mockUpdateMarketplacePlugin = vi.fn<() => Promise<void>>();
+const mockUninstallMarketplacePlugin = vi.fn<() => Promise<void>>();
+
+vi.mock("../../src/lib/api/marketplace", async () => {
+	const actual = await vi.importActual("../../src/lib/api/marketplace");
+	return {
+		...actual,
+		checkPluginUpdates: (...args: unknown[]) => mockCheckPluginUpdates(...(args as [])),
+		updateMarketplacePlugin: (...args: unknown[]) => mockUpdateMarketplacePlugin(...(args as [])),
+		uninstallMarketplacePlugin: (...args: unknown[]) =>
+			mockUninstallMarketplacePlugin(...(args as [])),
+	};
+});
+
+// Import after mocks
+const { PluginManager } = await import("../../src/components/PluginManager");
+
+function makePlugin(overrides: Partial<PluginInfo> = {}): PluginInfo {
+	return {
+		id: "test-plugin",
+		name: "Test Plugin",
+		version: "1.0.0",
+		enabled: true,
+		status: "active",
+		capabilities: ["hooks"],
+		hasAdminPages: false,
+		hasDashboardWidgets: false,
+		hasHooks: true,
+		...overrides,
+	};
+}
+
+function makeManifest(overrides: Partial<AdminManifest> = {}): AdminManifest {
+	return {
+		version: "1.0.0",
+		hash: "abc",
+		collections: {},
+		plugins: {},
+		authMode: "passkey",
+		...overrides,
+	};
+}
+
+function Wrapper({ children }: { children: React.ReactNode }) {
+	const qc = new QueryClient({
+		defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+	});
+	return (
+		<QueryClientProvider client={qc}>
+			<Toasty>{children}</Toasty>
+		</QueryClientProvider>
+	);
+}
+
+describe("PluginManager", () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+		mockFetchPlugins.mockResolvedValue([
+			makePlugin({
+				id: "audit-log",
+				name: "Audit Log",
+				version: "1.0.0",
+				enabled: true,
+				hasAdminPages: true,
+				capabilities: ["hooks", "pages"],
+			}),
+			makePlugin({
+				id: "seo",
+				name: "SEO Helper",
+				version: "2.0.0",
+				enabled: false,
+				status: "inactive",
+				hasAdminPages: false,
+				capabilities: ["hooks"],
+			}),
+		]);
+		mockEnablePlugin.mockResolvedValue({});
+		mockDisablePlugin.mockResolvedValue({});
+		mockCheckPluginUpdates.mockResolvedValue([]);
+		mockUpdateMarketplacePlugin.mockResolvedValue(undefined);
+		mockUninstallMarketplacePlugin.mockResolvedValue(undefined);
+	});
+
+	it("displays plugin list with names and versions", async () => {
+		const screen = await render(
+			<Wrapper>
+				<PluginManager />
+			</Wrapper>,
+		);
+		await expect.element(screen.getByText("Audit Log")).toBeInTheDocument();
+		await expect.element(screen.getByText("v1.0.0")).toBeInTheDocument();
+		await expect.element(screen.getByText("SEO Helper")).toBeInTheDocument();
+		await expect.element(screen.getByText("v2.0.0")).toBeInTheDocument();
+	});
+
+	it("enabled plugins show toggle in on state", async () => {
+		const screen = await render(
+			<Wrapper>
+				<PluginManager />
+			</Wrapper>,
+		);
+		await expect.element(screen.getByText("Audit Log")).toBeInTheDocument();
+		const enableToggle = screen.getByRole("switch", { name: "Disable plugin" });
+		await expect.element(enableToggle).toBeInTheDocument();
+	});
+
+	it("disabled plugins show toggle in off state", async () => {
+		const screen = await render(
+			<Wrapper>
+				<PluginManager />
+			</Wrapper>,
+		);
+		await expect.element(screen.getByText("SEO Helper")).toBeInTheDocument();
+		const disableToggle = screen.getByRole("switch", { name: "Enable plugin" });
+		await expect.element(disableToggle).toBeInTheDocument();
+	});
+
+	it("settings link shown only for enabled plugins with admin pages", async () => {
+		const screen = await render(
+			<Wrapper>
+				<PluginManager />
+			</Wrapper>,
+		);
+		await expect.element(screen.getByText("Audit Log")).toBeInTheDocument();
+		const settingsButtons = screen.getByRole("button", { name: "Settings" }).all();
+		expect(settingsButtons.length).toBe(1);
+	});
+
+	it("expand/collapse shows plugin details", async () => {
+		const screen = await render(
+			<Wrapper>
+				<PluginManager />
+			</Wrapper>,
+		);
+		await expect.element(screen.getByText("Audit Log")).toBeInTheDocument();
+		const expandButtons = screen.getByRole("button", { name: "Expand details" }).all();
+		expect(expandButtons.length).toBeGreaterThan(0);
+		await expandButtons[0]!.click();
+		await expect.element(screen.getByText("Capabilities")).toBeInTheDocument();
+		await vi.waitFor(() => {
+			const badges = document.querySelectorAll(".inline-flex.items-center.rounded-md.bg-kumo-tint");
+			expect(badges.length).toBeGreaterThanOrEqual(2);
+		});
+	});
+
+	it("empty state when no plugins", async () => {
+		mockFetchPlugins.mockResolvedValue([]);
+		const screen = await render(
+			<Wrapper>
+				<PluginManager />
+			</Wrapper>,
+		);
+		await expect.element(screen.getByText("No plugins configured")).toBeInTheDocument();
+		await expect
+			.element(
+				screen.getByText("Add plugins to your astro.config.mjs to extend EmDash functionality."),
+			)
+			.toBeInTheDocument();
+	});
+
+	// -----------------------------------------------------------------------
+	// Marketplace features
+	// -----------------------------------------------------------------------
+
+	it("shows Marketplace link when manifest has marketplace URL", async () => {
+		const screen = await render(
+			<Wrapper>
+				<PluginManager
+					manifest={makeManifest({ marketplace: "https://marketplace.emdashcms.com" })}
+				/>
+			</Wrapper>,
+		);
+		await expect.element(screen.getByText("Audit Log")).toBeInTheDocument();
+		await expect.element(screen.getByText("Marketplace")).toBeInTheDocument();
+	});
+
+	it("hides Marketplace link when no marketplace configured", async () => {
+		const screen = await render(
+			<Wrapper>
+				<PluginManager manifest={makeManifest()} />
+			</Wrapper>,
+		);
+		await expect.element(screen.getByText("Audit Log")).toBeInTheDocument();
+		const marketplaceLink = screen.getByText("Marketplace");
+		await expect.element(marketplaceLink).not.toBeInTheDocument();
+	});
+
+	it("shows Marketplace badge on marketplace-installed plugins", async () => {
+		mockFetchPlugins.mockResolvedValue([
+			makePlugin({
+				id: "mp-plugin",
+				name: "Marketplace Plugin",
+				source: "marketplace",
+				marketplaceVersion: "1.2.0",
+			}),
+		]);
+		const screen = await render(
+			<Wrapper>
+				<PluginManager />
+			</Wrapper>,
+		);
+		await expect.element(screen.getByText("Marketplace Plugin")).toBeInTheDocument();
+		// Look for the "Marketplace" badge
+		const badges = screen.getByText("Marketplace").all();
+		// At least one should be the source badge on the card (not the nav link)
+		expect(badges.length).toBeGreaterThanOrEqual(1);
+	});
+
+	it("shows 'Check for updates' button when marketplace plugins exist", async () => {
+		mockFetchPlugins.mockResolvedValue([
+			makePlugin({
+				id: "mp-plugin",
+				name: "MP Plugin",
+				source: "marketplace",
+			}),
+		]);
+		const screen = await render(
+			<Wrapper>
+				<PluginManager />
+			</Wrapper>,
+		);
+		await expect.element(screen.getByText("Check for updates")).toBeInTheDocument();
+	});
+
+	it("hides 'Check for updates' button when no marketplace plugins", async () => {
+		mockFetchPlugins.mockResolvedValue([
+			makePlugin({ id: "config-plugin", name: "Config Plugin", source: "config" }),
+		]);
+		const screen = await render(
+			<Wrapper>
+				<PluginManager />
+			</Wrapper>,
+		);
+		await expect.element(screen.getByText("Config Plugin")).toBeInTheDocument();
+		const checkBtn = screen.getByText("Check for updates");
+		await expect.element(checkBtn).not.toBeInTheDocument();
+	});
+
+	it("shows marketplace source in expanded details", async () => {
+		mockFetchPlugins.mockResolvedValue([
+			makePlugin({
+				id: "mp-plugin",
+				name: "MP Plugin",
+				source: "marketplace",
+				marketplaceVersion: "1.5.0",
+			}),
+		]);
+		const screen = await render(
+			<Wrapper>
+				<PluginManager />
+			</Wrapper>,
+		);
+		await expect.element(screen.getByText("MP Plugin")).toBeInTheDocument();
+		// Expand
+		const expandBtn = screen.getByRole("button", { name: "Expand details" });
+		await expandBtn.click();
+		await expect
+			.element(screen.getByText("Installed from marketplace (v1.5.0)"))
+			.toBeInTheDocument();
+	});
+
+	it("shows uninstall button for marketplace plugins in expanded details", async () => {
+		mockFetchPlugins.mockResolvedValue([
+			makePlugin({
+				id: "mp-plugin",
+				name: "MP Plugin",
+				source: "marketplace",
+			}),
+		]);
+		const screen = await render(
+			<Wrapper>
+				<PluginManager />
+			</Wrapper>,
+		);
+		await expect.element(screen.getByText("MP Plugin")).toBeInTheDocument();
+		// Expand
+		const expandBtn = screen.getByRole("button", { name: "Expand details" });
+		await expandBtn.click();
+		await expect.element(screen.getByText("Uninstall")).toBeInTheDocument();
+	});
+
+	it("uninstall button opens confirmation dialog", async () => {
+		mockFetchPlugins.mockResolvedValue([
+			makePlugin({
+				id: "mp-plugin",
+				name: "MP Plugin",
+				source: "marketplace",
+			}),
+		]);
+		const screen = await render(
+			<Wrapper>
+				<PluginManager />
+			</Wrapper>,
+		);
+		await expect.element(screen.getByText("MP Plugin")).toBeInTheDocument();
+		const expandBtn = screen.getByRole("button", { name: "Expand details" });
+		await expandBtn.click();
+		await screen.getByText("Uninstall").click();
+		// Confirm dialog
+		await expect.element(screen.getByText("Uninstall MP Plugin?")).toBeInTheDocument();
+		await expect
+			.element(screen.getByText("This will remove the plugin and its bundle from your site."))
+			.toBeInTheDocument();
+		await expect.element(screen.getByText("Also delete plugin storage data")).toBeInTheDocument();
+	});
+
+	it("empty state mentions marketplace when configured", async () => {
+		mockFetchPlugins.mockResolvedValue([]);
+		const screen = await render(
+			<Wrapper>
+				<PluginManager
+					manifest={makeManifest({ marketplace: "https://marketplace.emdashcms.com" })}
+				/>
+			</Wrapper>,
+		);
+		await expect.element(screen.getByText("No plugins configured")).toBeInTheDocument();
+		// The empty state links to the marketplace
+		await expect.element(screen.getByText("marketplace", { exact: true })).toBeInTheDocument();
+	});
+});

packages/admin/tests/components/RevisionHistory.test.tsx

@@ -0,0 +1,486 @@
+import { Toasty } from "@cloudflare/kumo";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { userEvent } from "@vitest/browser/context";
+import * as React from "react";
+import { describe, it, expect, vi, beforeEach, type Mock } from "vitest";
+import { render } from "vitest-browser-react";
+
+import { RevisionHistory } from "../../src/components/RevisionHistory";
+import type { Revision, RevisionListResponse } from "../../src/lib/api";
+
+// Mock the API module
+vi.mock("../../src/lib/api", async () => {
+	const actual = await vi.importActual("../../src/lib/api");
+	return {
+		...actual,
+		fetchRevisions: vi.fn(),
+		restoreRevision: vi.fn(),
+	};
+});
+
+// Import mocked functions for test control
+import { fetchRevisions, restoreRevision } from "../../src/lib/api";
+
+const mockFetchRevisions = fetchRevisions as Mock;
+const mockRestoreRevision = restoreRevision as Mock;
+
+const REVISIONS_BUTTON_REGEX = /Revisions/i;
+const RESTORE_BUTTON_REGEX = /Restore this version/i;
+const TIME_REGEX_5_MINS = /5 mins ago/;
+const TIME_REGEX_3_HOURS = /3 hours ago/;
+
+function QueryWrapper({ children }: { children: React.ReactNode }) {
+	const qc = new QueryClient({
+		defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+	});
+	return (
+		<Toasty>
+			<QueryClientProvider client={qc}>{children}</QueryClientProvider>
+		</Toasty>
+	);
+}
+
+function makeRevision(overrides: Partial<Revision> = {}): Revision {
+	return {
+		id: "rev-1",
+		collection: "posts",
+		entryId: "entry-1",
+		data: { title: "Hello World", body: "Content here" },
+		authorId: "user-1",
+		createdAt: new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString(), // 2 hours ago
+		...overrides,
+	};
+}
+
+function makeRevisionList(revisions: Revision[]): RevisionListResponse {
+	return { items: revisions, total: revisions.length };
+}
+
+beforeEach(() => {
+	vi.resetAllMocks();
+});
+
+describe("RevisionHistory", () => {
+	// ---- Starts collapsed ----
+
+	it("starts collapsed with only header visible", async () => {
+		const screen = await render(
+			<QueryWrapper>
+				<RevisionHistory collection="posts" entryId="entry-1" />
+			</QueryWrapper>,
+		);
+
+		await expect.element(screen.getByText("Revisions")).toBeInTheDocument();
+		// The expanded content should not be visible
+		const noRevisionsText = screen.getByText("No revisions yet");
+		await expect.element(noRevisionsText).not.toBeInTheDocument();
+	});
+
+	// ---- Query only fires when expanded ----
+
+	it("does not fetch revisions until expanded", async () => {
+		await render(
+			<QueryWrapper>
+				<RevisionHistory collection="posts" entryId="entry-1" />
+			</QueryWrapper>,
+		);
+
+		// Should not have called fetchRevisions while collapsed
+		expect(mockFetchRevisions).not.toHaveBeenCalled();
+	});
+
+	it("fetches revisions when header is clicked to expand", async () => {
+		mockFetchRevisions.mockResolvedValue(makeRevisionList([]));
+
+		const screen = await render(
+			<QueryWrapper>
+				<RevisionHistory collection="posts" entryId="entry-1" />
+			</QueryWrapper>,
+		);
+
+		// Click header to expand
+		const header = screen.getByText("Revisions");
+		await header.click();
+
+		expect(mockFetchRevisions).toHaveBeenCalledWith("posts", "entry-1", { limit: 20 });
+	});
+
+	// ---- Shows loading state ----
+
+	it("shows loading state when expanded and fetching", async () => {
+		// Never resolve — keeps it in loading state
+		mockFetchRevisions.mockReturnValue(new Promise(() => {}));
+
+		const screen = await render(
+			<QueryWrapper>
+				<RevisionHistory collection="posts" entryId="entry-1" />
+			</QueryWrapper>,
+		);
+
+		await screen.getByRole("button", { name: REVISIONS_BUTTON_REGEX }).click();
+
+		// Loader renders an SVG spinner — verify the loading container is present
+		// and that none of the "loaded" states are showing
+		const emptyText = screen.getByText("No revisions yet");
+		await expect.element(emptyText).not.toBeInTheDocument();
+		const errorText = screen.getByText("Failed to load revisions");
+		await expect.element(errorText).not.toBeInTheDocument();
+	});
+
+	// ---- Shows revision list with relative times ----
+
+	it("shows revision list with relative times", async () => {
+		const revisions = [
+			makeRevision({
+				id: "rev-1",
+				createdAt: new Date(Date.now() - 5 * 60 * 1000).toISOString(), // 5 mins ago
+			}),
+			makeRevision({
+				id: "rev-2",
+				createdAt: new Date(Date.now() - 3 * 60 * 60 * 1000).toISOString(), // 3 hours ago
+			}),
+		];
+		mockFetchRevisions.mockResolvedValue(makeRevisionList(revisions));
+
+		const screen = await render(
+			<QueryWrapper>
+				<RevisionHistory collection="posts" entryId="entry-1" />
+			</QueryWrapper>,
+		);
+
+		await screen.getByText("Revisions").click();
+
+		await expect.element(screen.getByText(TIME_REGEX_5_MINS)).toBeInTheDocument();
+		await expect.element(screen.getByText(TIME_REGEX_3_HOURS)).toBeInTheDocument();
+	});
+
+	// ---- First revision has "Current" badge ----
+
+	it("shows 'Current' badge on the first (latest) revision", async () => {
+		const revisions = [
+			makeRevision({ id: "rev-1" }),
+			makeRevision({
+				id: "rev-2",
+				createdAt: new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString(),
+			}),
+		];
+		mockFetchRevisions.mockResolvedValue(makeRevisionList(revisions));
+
+		const screen = await render(
+			<QueryWrapper>
+				<RevisionHistory collection="posts" entryId="entry-1" />
+			</QueryWrapper>,
+		);
+
+		await screen.getByText("Revisions").click();
+
+		await expect.element(screen.getByText("Current")).toBeInTheDocument();
+	});
+
+	// ---- First revision does NOT have restore button ----
+
+	it("does not show restore button on the latest revision", async () => {
+		const revisions = [makeRevision({ id: "rev-1" })];
+		mockFetchRevisions.mockResolvedValue(makeRevisionList(revisions));
+
+		const screen = await render(
+			<QueryWrapper>
+				<RevisionHistory collection="posts" entryId="entry-1" />
+			</QueryWrapper>,
+		);
+
+		await screen.getByText("Revisions").click();
+
+		// Wait for revision to appear
+		await expect.element(screen.getByText("Current")).toBeInTheDocument();
+
+		// The restore button has title "Restore this version" — should not exist for latest
+		const restoreButton = screen.getByRole("button", { name: RESTORE_BUTTON_REGEX });
+		await expect.element(restoreButton).not.toBeInTheDocument();
+	});
+
+	// ---- Non-latest revisions have restore button ----
+
+	it("shows restore button on non-latest revisions", async () => {
+		const revisions = [
+			makeRevision({ id: "rev-1" }),
+			makeRevision({
+				id: "rev-2",
+				createdAt: new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString(),
+			}),
+		];
+		mockFetchRevisions.mockResolvedValue(makeRevisionList(revisions));
+
+		const screen = await render(
+			<QueryWrapper>
+				<RevisionHistory collection="posts" entryId="entry-1" />
+			</QueryWrapper>,
+		);
+
+		await screen.getByText("Revisions").click();
+
+		// Wait for revisions to load
+		await expect.element(screen.getByText("Current")).toBeInTheDocument();
+
+		// There should be a restore button for the non-latest revision
+		const restoreButton = screen.getByRole("button", { name: RESTORE_BUTTON_REGEX });
+		await expect.element(restoreButton).toBeInTheDocument();
+	});
+
+	// ---- Clicking revision toggles selection (shows content snapshot) ----
+
+	it("toggles content snapshot when clicking a revision", async () => {
+		const revisions = [makeRevision({ id: "rev-1", data: { title: "Latest content" } })];
+		mockFetchRevisions.mockResolvedValue(makeRevisionList(revisions));
+
+		const screen = await render(
+			<QueryWrapper>
+				<RevisionHistory collection="posts" entryId="entry-1" />
+			</QueryWrapper>,
+		);
+
+		await screen.getByText("Revisions").click();
+		await expect.element(screen.getByText("Current")).toBeInTheDocument();
+
+		// Content snapshot should not be visible initially
+		const snapshotLabel = screen.getByText("Content snapshot:");
+		await expect.element(snapshotLabel).not.toBeInTheDocument();
+
+		// Click the revision to select it
+		const revisionButton = screen.getByText("Current").element().closest("button")!;
+		await userEvent.click(revisionButton);
+
+		// Content snapshot should now be visible
+		await expect.element(screen.getByText("Content snapshot:")).toBeInTheDocument();
+
+		// Click again to deselect
+		await userEvent.click(revisionButton);
+
+		await expect.element(screen.getByText("Content snapshot:")).not.toBeInTheDocument();
+	});
+
+	// ---- Restore calls confirm() then restoreRevision ----
+
+	it("opens confirm dialog then restoreRevision when confirmed", async () => {
+		mockRestoreRevision.mockResolvedValue({});
+		const onRestored = vi.fn();
+
+		const revisions = [
+			makeRevision({ id: "rev-1" }),
+			makeRevision({
+				id: "rev-2",
+				createdAt: new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString(),
+			}),
+		];
+		mockFetchRevisions.mockResolvedValue(makeRevisionList(revisions));
+
+		const screen = await render(
+			<QueryWrapper>
+				<RevisionHistory collection="posts" entryId="entry-1" onRestored={onRestored} />
+			</QueryWrapper>,
+		);
+
+		await screen.getByText("Revisions").click();
+		await expect.element(screen.getByText("Current")).toBeInTheDocument();
+
+		// Click the restore button on the second revision
+		const restoreButton = screen.getByRole("button", { name: RESTORE_BUTTON_REGEX });
+		await restoreButton.click();
+
+		// ConfirmDialog should appear
+		await expect.element(screen.getByText("Restore Revision?")).toBeInTheDocument();
+
+		// Direct DOM click to bypass Base UI inert overlay
+		screen.getByRole("button", { name: "Restore" }).element().click();
+
+		await vi.waitFor(() => {
+			expect(mockRestoreRevision).toHaveBeenCalledWith("rev-2");
+		});
+	});
+
+	it("does not call restoreRevision when confirm dialog is cancelled", async () => {
+		const revisions = [
+			makeRevision({ id: "rev-1" }),
+			makeRevision({
+				id: "rev-2",
+				createdAt: new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString(),
+			}),
+		];
+		mockFetchRevisions.mockResolvedValue(makeRevisionList(revisions));
+
+		const screen = await render(
+			<QueryWrapper>
+				<RevisionHistory collection="posts" entryId="entry-1" />
+			</QueryWrapper>,
+		);
+
+		await screen.getByText("Revisions").click();
+		await expect.element(screen.getByText("Current")).toBeInTheDocument();
+
+		const restoreButton = screen.getByRole("button", { name: RESTORE_BUTTON_REGEX });
+		await restoreButton.click();
+
+		// ConfirmDialog should appear
+		await expect.element(screen.getByText("Restore Revision?")).toBeInTheDocument();
+
+		// Direct DOM click to bypass Base UI inert overlay
+		screen.getByRole("button", { name: "Cancel" }).element().click();
+
+		expect(mockRestoreRevision).not.toHaveBeenCalled();
+	});
+
+	// ---- Error state ----
+
+	it("shows error message when fetching revisions fails", async () => {
+		mockFetchRevisions.mockRejectedValue(new Error("Network error"));
+
+		const screen = await render(
+			<QueryWrapper>
+				<RevisionHistory collection="posts" entryId="entry-1" />
+			</QueryWrapper>,
+		);
+
+		await screen.getByText("Revisions").click();
+
+		await expect.element(screen.getByText("Failed to load revisions")).toBeInTheDocument();
+	});
+
+	// ---- Empty state ----
+
+	it("shows empty state when no revisions exist", async () => {
+		mockFetchRevisions.mockResolvedValue(makeRevisionList([]));
+
+		const screen = await render(
+			<QueryWrapper>
+				<RevisionHistory collection="posts" entryId="entry-1" />
+			</QueryWrapper>,
+		);
+
+		await screen.getByText("Revisions").click();
+
+		await expect.element(screen.getByText("No revisions yet")).toBeInTheDocument();
+	});
+
+	// ---- Collapse hides revision content ----
+
+	it("hides revision content when collapsed after expanding", async () => {
+		mockFetchRevisions.mockResolvedValue(makeRevisionList([]));
+
+		const screen = await render(
+			<QueryWrapper>
+				<RevisionHistory collection="posts" entryId="entry-1" />
+			</QueryWrapper>,
+		);
+
+		const headerButton = screen.getByRole("button", { name: REVISIONS_BUTTON_REGEX });
+
+		// Expand
+		await headerButton.click();
+		await expect.element(screen.getByText("No revisions yet")).toBeInTheDocument();
+
+		// Collapse
+		await headerButton.click();
+
+		// Content should be hidden
+		await expect.element(screen.getByText("No revisions yet")).not.toBeInTheDocument();
+	});
+
+	// ---- Shows total count in header ----
+
+	it("shows total count in header when revisions exist", async () => {
+		const revisions = [
+			makeRevision({ id: "rev-1" }),
+			makeRevision({
+				id: "rev-2",
+				createdAt: new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString(),
+			}),
+			makeRevision({
+				id: "rev-3",
+				createdAt: new Date(Date.now() - 48 * 60 * 60 * 1000).toISOString(),
+			}),
+		];
+		mockFetchRevisions.mockResolvedValue(makeRevisionList(revisions));
+
+		const screen = await render(
+			<QueryWrapper>
+				<RevisionHistory collection="posts" entryId="entry-1" />
+			</QueryWrapper>,
+		);
+
+		await screen.getByText("Revisions").click();
+
+		// Should show (3) next to "Revisions"
+		await expect.element(screen.getByText("(3)")).toBeInTheDocument();
+	});
+
+	// ---- Visual diff view ----
+
+	it("shows visual diff when selecting a non-latest revision", async () => {
+		const revisions = [
+			makeRevision({
+				id: "rev-1",
+				data: { title: "Updated Title", body: "Same body", newField: "added" },
+				createdAt: new Date(Date.now() - 1 * 60 * 60 * 1000).toISOString(),
+			}),
+			makeRevision({
+				id: "rev-2",
+				data: { title: "Original Title", body: "Same body", removed: "gone" },
+				createdAt: new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString(),
+			}),
+		];
+		mockFetchRevisions.mockResolvedValue(makeRevisionList(revisions));
+
+		const screen = await render(
+			<QueryWrapper>
+				<RevisionHistory collection="posts" entryId="entry-1" />
+			</QueryWrapper>,
+		);
+
+		await screen.getByText("Revisions").click();
+		await expect.element(screen.getByText("Current")).toBeInTheDocument();
+
+		// Click the second (non-latest) revision
+		const revisionButtons = screen.getByText("1 day ago").element().closest("button")!;
+		await userEvent.click(revisionButtons);
+
+		// Should show diff, not raw snapshot
+		await expect
+			.element(screen.getByText("from next revision", { exact: false }))
+			.toBeInTheDocument();
+
+		// Changed field values should appear in the diff
+		await expect.element(screen.getByText("Original Title")).toBeInTheDocument();
+		await expect.element(screen.getByText("Updated Title")).toBeInTheDocument();
+	});
+
+	it("shows raw snapshot for latest revision (no diff target)", async () => {
+		const revisions = [
+			makeRevision({
+				id: "rev-1",
+				data: { title: "Latest" },
+				createdAt: new Date(Date.now() - 1 * 60 * 60 * 1000).toISOString(),
+			}),
+			makeRevision({
+				id: "rev-2",
+				data: { title: "Older" },
+				createdAt: new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString(),
+			}),
+		];
+		mockFetchRevisions.mockResolvedValue(makeRevisionList(revisions));
+
+		const screen = await render(
+			<QueryWrapper>
+				<RevisionHistory collection="posts" entryId="entry-1" />
+			</QueryWrapper>,
+		);
+
+		await screen.getByText("Revisions").click();
+
+		// Click the latest revision
+		const latestButton = screen.getByText("Current").element().closest("button")!;
+		await userEvent.click(latestButton);
+
+		// Should show raw JSON snapshot, not diff
+		await expect.element(screen.getByText("Content snapshot:")).toBeInTheDocument();
+	});
+});

packages/admin/tests/components/SaveButton.test.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { describe, it, expect } from "vitest";
+import { render } from "vitest-browser-react";
+
+import { SaveButton } from "../../src/components/SaveButton";
+
+describe("SaveButton", () => {
+	it("shows 'Save' when dirty and not saving", async () => {
+		const screen = await render(<SaveButton isDirty={true} isSaving={false} />);
+		await expect.element(screen.getByText("Save")).toBeInTheDocument();
+		await expect.element(screen.getByRole("button")).toBeEnabled();
+	});
+
+	it("shows 'Saving...' when saving", async () => {
+		const screen = await render(<SaveButton isDirty={true} isSaving={true} />);
+		await expect.element(screen.getByText("Saving...")).toBeInTheDocument();
+		await expect.element(screen.getByRole("button")).toBeDisabled();
+	});
+
+	it("shows 'Saved' when not dirty and not saving", async () => {
+		const screen = await render(<SaveButton isDirty={false} isSaving={false} />);
+		await expect.element(screen.getByText("Saved")).toBeInTheDocument();
+		await expect.element(screen.getByRole("button")).toBeDisabled();
+	});
+
+	it("has aria-busy when saving", async () => {
+		const screen = await render(<SaveButton isDirty={true} isSaving={true} />);
+		await expect.element(screen.getByRole("button")).toHaveAttribute("aria-busy", "true");
+	});
+
+	it("does not have aria-busy when not saving", async () => {
+		const screen = await render(<SaveButton isDirty={true} isSaving={false} />);
+		await expect.element(screen.getByRole("button")).toHaveAttribute("aria-busy", "false");
+	});
+
+	it("has aria-live polite", async () => {
+		const screen = await render(<SaveButton isDirty={true} isSaving={false} />);
+		await expect.element(screen.getByRole("button")).toHaveAttribute("aria-live", "polite");
+	});
+
+	it("respects external disabled prop", async () => {
+		const screen = await render(<SaveButton isDirty={true} isSaving={false} disabled={true} />);
+		await expect.element(screen.getByRole("button")).toBeDisabled();
+	});
+});

packages/admin/tests/components/SectionPickerModal.test.tsx

@@ -0,0 +1,193 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import * as React from "react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render } from "vitest-browser-react";
+
+import type { Section, SectionCategory, SectionsResult } from "../../src/lib/api";
+
+const mockFetchSections = vi.fn<() => Promise<SectionsResult>>();
+const mockFetchSectionCategories = vi.fn<() => Promise<SectionCategory[]>>();
+
+vi.mock("../../src/lib/api", async () => {
+	const actual = await vi.importActual("../../src/lib/api");
+	return {
+		...actual,
+		fetchSections: (...args: unknown[]) => mockFetchSections(...(args as [])),
+		fetchSectionCategories: (...args: unknown[]) => mockFetchSectionCategories(...(args as [])),
+	};
+});
+
+// Import after mocks
+const { SectionPickerModal } = await import("../../src/components/SectionPickerModal");
+
+function makeSection(overrides: Partial<Section> = {}): Section {
+	return {
+		id: "sec_01",
+		slug: "hero",
+		title: "Hero Section",
+		description: "Main hero",
+		keywords: [],
+		content: [],
+		source: "theme",
+		createdAt: "2025-01-01T00:00:00Z",
+		updatedAt: "2025-01-02T00:00:00Z",
+		...overrides,
+	};
+}
+
+function Wrapper({ children }: { children: React.ReactNode }) {
+	const qc = new QueryClient({
+		defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+	});
+	return <QueryClientProvider client={qc}>{children}</QueryClientProvider>;
+}
+
+describe("SectionPickerModal", () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+		mockFetchSections.mockResolvedValue({
+			items: [
+				makeSection({
+					id: "sec_01",
+					slug: "hero",
+					title: "Hero Section",
+					description: "Main hero",
+					source: "theme",
+				}),
+				makeSection({
+					id: "sec_02",
+					slug: "cta",
+					title: "Call to Action",
+					description: "CTA block",
+					source: "user",
+				}),
+			],
+		});
+		mockFetchSectionCategories.mockResolvedValue([
+			{ id: "cat_1", slug: "layout", label: "Layout", sortOrder: 0 },
+			{ id: "cat_2", slug: "marketing", label: "Marketing", sortOrder: 1 },
+		]);
+	});
+
+	it("shows sections when open", async () => {
+		const screen = await render(
+			<Wrapper>
+				<SectionPickerModal open={true} onOpenChange={vi.fn()} onSelect={vi.fn()} />
+			</Wrapper>,
+		);
+		await expect.element(screen.getByText("Hero Section")).toBeInTheDocument();
+		await expect.element(screen.getByText("Call to Action")).toBeInTheDocument();
+	});
+
+	it("clicking a section calls onSelect and closes modal", async () => {
+		const onSelect = vi.fn();
+		const onOpenChange = vi.fn();
+		const screen = await render(
+			<Wrapper>
+				<SectionPickerModal open={true} onOpenChange={onOpenChange} onSelect={onSelect} />
+			</Wrapper>,
+		);
+		await expect.element(screen.getByText("Hero Section")).toBeInTheDocument();
+		// The Base UI dialog puts an inert overlay. Use direct DOM click to bypass it.
+		const heroEl = screen.getByText("Hero Section").element();
+		const button = heroEl.closest("button");
+		button!.click();
+		expect(onSelect).toHaveBeenCalledWith(
+			expect.objectContaining({ slug: "hero", title: "Hero Section" }),
+		);
+		expect(onOpenChange).toHaveBeenCalledWith(false);
+	});
+
+	it("search input filters results", async () => {
+		const screen = await render(
+			<Wrapper>
+				<SectionPickerModal open={true} onOpenChange={vi.fn()} onSelect={vi.fn()} />
+			</Wrapper>,
+		);
+		await expect.element(screen.getByText("Hero Section")).toBeInTheDocument();
+		const searchInput = screen.getByPlaceholder("Search sections...");
+		await searchInput.fill("cta");
+		// Search is debounced — wait for the query to fire
+		await vi.waitFor(() => {
+			expect(mockFetchSections).toHaveBeenCalledWith(expect.objectContaining({ search: "cta" }));
+		});
+	});
+
+	it("cancel button closes modal", async () => {
+		const onOpenChange = vi.fn();
+		const screen = await render(
+			<Wrapper>
+				<SectionPickerModal open={true} onOpenChange={onOpenChange} onSelect={vi.fn()} />
+			</Wrapper>,
+		);
+		await expect.element(screen.getByText("Insert Section")).toBeInTheDocument();
+		// Direct DOM click to bypass the inert overlay
+		const cancelEl = screen.getByText("Cancel").element();
+		cancelEl.click();
+		expect(onOpenChange).toHaveBeenCalledWith(false);
+	});
+
+	it("queries do not fire when closed", async () => {
+		await render(
+			<Wrapper>
+				<SectionPickerModal open={false} onOpenChange={vi.fn()} onSelect={vi.fn()} />
+			</Wrapper>,
+		);
+		// Wait a tick to let any queries that might fire settle
+		await new Promise((r) => setTimeout(r, 50));
+		expect(mockFetchSections).not.toHaveBeenCalled();
+		expect(mockFetchSectionCategories).not.toHaveBeenCalled();
+	});
+
+	it("state resets when modal reopens", async () => {
+		const onOpenChange = vi.fn();
+		const screen = await render(
+			<Wrapper>
+				<SectionPickerModal open={true} onOpenChange={onOpenChange} onSelect={vi.fn()} />
+			</Wrapper>,
+		);
+		// Type something in search
+		const searchInput = screen.getByPlaceholder("Search sections...");
+		await searchInput.fill("test");
+		// Close and reopen
+		await screen.rerender(
+			<Wrapper>
+				<SectionPickerModal open={false} onOpenChange={onOpenChange} onSelect={vi.fn()} />
+			</Wrapper>,
+		);
+		await screen.rerender(
+			<Wrapper>
+				<SectionPickerModal open={true} onOpenChange={onOpenChange} onSelect={vi.fn()} />
+			</Wrapper>,
+		);
+		// Search should be reset — the input should have an empty value
+		await vi.waitFor(() => {
+			const input = document.querySelector(
+				'input[placeholder="Search sections..."]',
+			) as HTMLInputElement | null;
+			expect(input?.value ?? "").toBe("");
+		});
+	});
+
+	it("shows empty state messaging when no sections match", async () => {
+		mockFetchSections.mockResolvedValue({ items: [] });
+		const screen = await render(
+			<Wrapper>
+				<SectionPickerModal open={true} onOpenChange={vi.fn()} onSelect={vi.fn()} />
+			</Wrapper>,
+		);
+		await expect.element(screen.getByText("No sections available")).toBeInTheDocument();
+	});
+
+	it("shows filtered empty state when search has no results", async () => {
+		mockFetchSections.mockResolvedValue({ items: [] });
+		const screen = await render(
+			<Wrapper>
+				<SectionPickerModal open={true} onOpenChange={vi.fn()} onSelect={vi.fn()} />
+			</Wrapper>,
+		);
+		const searchInput = screen.getByPlaceholder("Search sections...");
+		await searchInput.fill("nonexistent");
+		await expect.element(screen.getByText("No sections found")).toBeInTheDocument();
+	});
+});

packages/admin/tests/components/Sections.test.tsx

@@ -0,0 +1,203 @@
+import { Toasty } from "@cloudflare/kumo";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import * as React from "react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render } from "vitest-browser-react";
+
+import type { Section, SectionsResult } from "../../src/lib/api";
+
+// Mock router
+vi.mock("@tanstack/react-router", async () => {
+	const actual = await vi.importActual("@tanstack/react-router");
+	return {
+		...actual,
+		Link: ({ children, to, ...props }: any) => (
+			<a href={to} {...props}>
+				{children}
+			</a>
+		),
+		useNavigate: () => vi.fn(),
+	};
+});
+
+const mockFetchSections = vi.fn<() => Promise<SectionsResult>>();
+const mockCreateSection = vi.fn();
+const mockDeleteSection = vi.fn();
+
+vi.mock("../../src/lib/api", async () => {
+	const actual = await vi.importActual("../../src/lib/api");
+	return {
+		...actual,
+		fetchSections: (...args: unknown[]) => mockFetchSections(...(args as [])),
+		createSection: (...args: unknown[]) => mockCreateSection(...(args as [])),
+		deleteSection: (...args: unknown[]) => mockDeleteSection(...(args as [])),
+	};
+});
+
+// Import after mocks
+const { Sections } = await import("../../src/components/Sections");
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const DELETE_SECTION_MSG_REGEX = /This will permanently delete/;
+
+function makeSection(overrides: Partial<Section> = {}): Section {
+	return {
+		id: "sec_01",
+		slug: "hero",
+		title: "Hero Section",
+		description: "Main hero",
+		keywords: [],
+		content: [],
+		source: "theme",
+		createdAt: "2025-01-01T00:00:00Z",
+		updatedAt: "2025-01-02T00:00:00Z",
+		...overrides,
+	};
+}
+
+function Wrapper({ children }: { children: React.ReactNode }) {
+	const qc = new QueryClient({
+		defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+	});
+	return (
+		<QueryClientProvider client={qc}>
+			<Toasty>{children}</Toasty>
+		</QueryClientProvider>
+	);
+}
+
+describe("Sections", () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+		mockFetchSections.mockResolvedValue({
+			items: [
+				makeSection({
+					id: "sec_01",
+					slug: "hero",
+					title: "Hero Section",
+					description: "Main hero",
+					source: "theme",
+				}),
+				makeSection({
+					id: "sec_02",
+					slug: "cta",
+					title: "Call to Action",
+					description: "CTA block",
+					source: "user",
+				}),
+			],
+		});
+		mockCreateSection.mockResolvedValue(makeSection({ slug: "new-section" }));
+		mockDeleteSection.mockResolvedValue(undefined);
+	});
+
+	it("displays sections with titles and descriptions", async () => {
+		const screen = await render(
+			<Wrapper>
+				<Sections />
+			</Wrapper>,
+		);
+		await expect.element(screen.getByText("Hero Section")).toBeInTheDocument();
+		await expect.element(screen.getByText("Call to Action")).toBeInTheDocument();
+		await expect.element(screen.getByText("Main hero")).toBeInTheDocument();
+		await expect.element(screen.getByText("CTA block")).toBeInTheDocument();
+	});
+
+	it("create button opens dialog with title/slug form", async () => {
+		const screen = await render(
+			<Wrapper>
+				<Sections />
+			</Wrapper>,
+		);
+		await screen.getByText("New Section").click();
+		await expect.element(screen.getByText("Create Section")).toBeInTheDocument();
+		// Check form fields exist — InputArea uses label prop but may not be associated via aria
+		await expect.element(screen.getByLabelText("Title")).toBeInTheDocument();
+		await expect.element(screen.getByLabelText("Slug")).toBeInTheDocument();
+	});
+
+	it("auto-generates slug from title in create dialog", async () => {
+		const screen = await render(
+			<Wrapper>
+				<Sections />
+			</Wrapper>,
+		);
+		await screen.getByText("New Section").click();
+		const titleInput = screen.getByLabelText("Title");
+		await titleInput.fill("My Great Section");
+		// Slug should be auto-generated
+		await expect.element(screen.getByLabelText("Slug")).toHaveValue("my-great-section");
+	});
+
+	it("search input filters sections", async () => {
+		const screen = await render(
+			<Wrapper>
+				<Sections />
+			</Wrapper>,
+		);
+		const searchInput = screen.getByPlaceholder("Search sections...");
+		await searchInput.fill("hero");
+		// fetchSections will be called again with search param
+		expect(mockFetchSections).toHaveBeenCalledWith(expect.objectContaining({ search: "hero" }));
+	});
+
+	it("delete button opens confirmation dialog", async () => {
+		mockFetchSections.mockResolvedValue({
+			items: [
+				makeSection({
+					id: "sec_02",
+					slug: "cta",
+					title: "Call to Action",
+					description: "CTA block",
+					source: "user",
+				}),
+			],
+		});
+		const screen = await render(
+			<Wrapper>
+				<Sections />
+			</Wrapper>,
+		);
+		await expect.element(screen.getByText("Call to Action")).toBeInTheDocument();
+		// Click delete on the user section
+		const deleteButton = screen.getByTitle("Delete");
+		await deleteButton.click();
+		await expect.element(screen.getByText("Delete Section?")).toBeInTheDocument();
+		await expect.element(screen.getByText(DELETE_SECTION_MSG_REGEX)).toBeInTheDocument();
+	});
+
+	it("theme sections have disabled delete button", async () => {
+		mockFetchSections.mockResolvedValue({
+			items: [
+				makeSection({
+					id: "sec_01",
+					slug: "hero",
+					title: "Hero Section",
+					source: "theme",
+				}),
+			],
+		});
+		const screen = await render(
+			<Wrapper>
+				<Sections />
+			</Wrapper>,
+		);
+		await expect.element(screen.getByText("Hero Section")).toBeInTheDocument();
+		const deleteButton = screen.getByTitle("Cannot delete theme sections");
+		await expect.element(deleteButton).toBeDisabled();
+	});
+
+	it("each section has an edit button", async () => {
+		const screen = await render(
+			<Wrapper>
+				<Sections />
+			</Wrapper>,
+		);
+		await expect.element(screen.getByText("Hero Section")).toBeInTheDocument();
+		const editButtons = screen.getByText("Edit").all();
+		expect(editButtons.length).toBe(2);
+	});
+});

packages/admin/tests/components/Settings.test.tsx

@@ -0,0 +1,112 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import * as React from "react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render } from "vitest-browser-react";
+
+import type { AdminManifest } from "../../src/lib/api";
+
+// Mock router
+vi.mock("@tanstack/react-router", async () => {
+	const actual = await vi.importActual("@tanstack/react-router");
+	return {
+		...actual,
+		Link: ({ children, to, ...props }: any) => (
+			<a href={to} {...props}>
+				{children}
+			</a>
+		),
+		useNavigate: () => vi.fn(),
+	};
+});
+
+const mockFetchManifest = vi.fn<() => Promise<AdminManifest>>();
+
+vi.mock("../../src/lib/api", async () => {
+	const actual = await vi.importActual("../../src/lib/api");
+	return {
+		...actual,
+		fetchManifest: (...args: unknown[]) => mockFetchManifest(...(args as [])),
+	};
+});
+
+// Import after mocks
+const { Settings } = await import("../../src/components/Settings");
+
+const defaultManifest: AdminManifest = {
+	authMode: "passkey",
+	collections: {},
+	plugins: {},
+	version: "1",
+	hash: "",
+};
+
+function Wrapper({ children }: { children: React.ReactNode }) {
+	const qc = new QueryClient({
+		defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+	});
+	return <QueryClientProvider client={qc}>{children}</QueryClientProvider>;
+}
+
+describe("Settings", () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+		mockFetchManifest.mockResolvedValue(defaultManifest);
+	});
+
+	it("displays settings heading", async () => {
+		const screen = await render(
+			<Wrapper>
+				<Settings />
+			</Wrapper>,
+		);
+		await expect.element(screen.getByRole("heading", { name: "Settings" })).toBeInTheDocument();
+	});
+
+	it("shows links to General, Social, and SEO sub-pages", async () => {
+		const screen = await render(
+			<Wrapper>
+				<Settings />
+			</Wrapper>,
+		);
+		await expect.element(screen.getByText("General")).toBeInTheDocument();
+		await expect.element(screen.getByText("Social Links")).toBeInTheDocument();
+		await expect.element(screen.getByText("SEO")).toBeInTheDocument();
+	});
+
+	it("shows links to API Tokens and Email sub-pages", async () => {
+		const screen = await render(
+			<Wrapper>
+				<Settings />
+			</Wrapper>,
+		);
+		await expect.element(screen.getByText("API Tokens")).toBeInTheDocument();
+		await expect.element(screen.getByText("Email", { exact: true })).toBeInTheDocument();
+	});
+
+	it("security link shown when authMode is passkey", async () => {
+		mockFetchManifest.mockResolvedValue(defaultManifest);
+		const screen = await render(
+			<Wrapper>
+				<Settings />
+			</Wrapper>,
+		);
+		await expect.element(screen.getByText("Security")).toBeInTheDocument();
+		await expect.element(screen.getByText("Self-Signup Domains")).toBeInTheDocument();
+	});
+
+	it("security link hidden when authMode is not passkey", async () => {
+		mockFetchManifest.mockResolvedValue({
+			...defaultManifest,
+			authMode: "cloudflare-access",
+		});
+		const screen = await render(
+			<Wrapper>
+				<Settings />
+			</Wrapper>,
+		);
+		// Wait for the page to render by checking a link that's always visible
+		await expect.element(screen.getByText("General")).toBeInTheDocument();
+		expect(screen.getByText("Security").query()).toBeNull();
+		expect(screen.getByText("Self-Signup Domains").query()).toBeNull();
+	});
+});

packages/admin/tests/components/SetupWizard.test.tsx

@@ -0,0 +1,138 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import * as React from "react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render } from "vitest-browser-react";
+
+// Mock API
+vi.mock("../../src/lib/api/client", async () => {
+	const actual = await vi.importActual("../../src/lib/api/client");
+	return {
+		...actual,
+		apiFetch: vi.fn().mockImplementation((url: string) => {
+			if (url.includes("/setup/status")) {
+				return Promise.resolve(
+					new Response(JSON.stringify({ data: { needsSetup: true, authMode: "passkey" } }), {
+						status: 200,
+					}),
+				);
+			}
+			if (url.includes("/setup/admin")) {
+				return Promise.resolve(
+					new Response(JSON.stringify({ data: { success: true } }), { status: 200 }),
+				);
+			}
+			if (url.includes("/setup") && !url.includes("status")) {
+				return Promise.resolve(
+					new Response(JSON.stringify({ data: { success: true } }), { status: 200 }),
+				);
+			}
+			return Promise.resolve(new Response(JSON.stringify({ data: {} }), { status: 200 }));
+		}),
+	};
+});
+
+// Mock WebAuthn so PasskeyRegistration doesn't bail out
+Object.defineProperty(window, "PublicKeyCredential", {
+	value: function PublicKeyCredential() {},
+	writable: true,
+});
+
+// Import after mocks
+const { SetupWizard } = await import("../../src/components/SetupWizard");
+
+function QueryWrapper({ children }: { children: React.ReactNode }) {
+	const qc = new QueryClient({
+		defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+	});
+	return <QueryClientProvider client={qc}>{children}</QueryClientProvider>;
+}
+
+describe("SetupWizard", () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+	});
+
+	it("shows site setup step first with title input", async () => {
+		const screen = await render(
+			<QueryWrapper>
+				<SetupWizard />
+			</QueryWrapper>,
+		);
+		await expect.element(screen.getByText("Set up your site")).toBeInTheDocument();
+		await expect.element(screen.getByPlaceholder("My Awesome Blog")).toBeInTheDocument();
+	});
+
+	it("empty title prevents advancing and shows validation error", async () => {
+		const screen = await render(
+			<QueryWrapper>
+				<SetupWizard />
+			</QueryWrapper>,
+		);
+		// Wait for setup status to load
+		await expect.element(screen.getByText("Set up your site")).toBeInTheDocument();
+		// Click Continue without filling title
+		await screen.getByText("Continue →").click();
+		await expect.element(screen.getByText("Site title is required")).toBeInTheDocument();
+		// Should still be on site step
+		await expect.element(screen.getByText("Set up your site")).toBeInTheDocument();
+	});
+
+	it("filling title and clicking Next advances to admin step", async () => {
+		const screen = await render(
+			<QueryWrapper>
+				<SetupWizard />
+			</QueryWrapper>,
+		);
+		await expect.element(screen.getByText("Set up your site")).toBeInTheDocument();
+		// Fill in the title
+		await screen.getByPlaceholder("My Awesome Blog").fill("Test Site");
+		// Click continue
+		await screen.getByText("Continue →").click();
+		// Should advance to admin step
+		await expect.element(screen.getByText("Create your account")).toBeInTheDocument();
+	});
+
+	it("admin step shows email input", async () => {
+		const screen = await render(
+			<QueryWrapper>
+				<SetupWizard />
+			</QueryWrapper>,
+		);
+		await expect.element(screen.getByText("Set up your site")).toBeInTheDocument();
+		// Fill title and advance
+		await screen.getByPlaceholder("My Awesome Blog").fill("Test Site");
+		await screen.getByText("Continue →").click();
+		// Should see email input on admin step
+		await expect.element(screen.getByText("Create your account")).toBeInTheDocument();
+		await expect.element(screen.getByPlaceholder("you@example.com")).toBeInTheDocument();
+	});
+
+	it("empty email prevents advancing on admin step", async () => {
+		const screen = await render(
+			<QueryWrapper>
+				<SetupWizard />
+			</QueryWrapper>,
+		);
+		await expect.element(screen.getByText("Set up your site")).toBeInTheDocument();
+		// Fill title and advance
+		await screen.getByPlaceholder("My Awesome Blog").fill("Test Site");
+		await screen.getByText("Continue →").click();
+		await expect.element(screen.getByText("Create your account")).toBeInTheDocument();
+		// Click Continue without filling email
+		await screen.getByText("Continue →").click();
+		// Should show validation error
+		await expect.element(screen.getByText("Email is required")).toBeInTheDocument();
+	});
+
+	it("step indicator shows three steps", async () => {
+		const screen = await render(
+			<QueryWrapper>
+				<SetupWizard />
+			</QueryWrapper>,
+		);
+		await expect.element(screen.getByText("Set up your site")).toBeInTheDocument();
+		// Step indicator labels - use exact matching via role
+		await expect.element(screen.getByText("Account")).toBeInTheDocument();
+		await expect.element(screen.getByText("Passkey")).toBeInTheDocument();
+	});
+});

packages/admin/tests/components/SignupPage.test.tsx

@@ -0,0 +1,155 @@
+import * as React from "react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render } from "vitest-browser-react";
+
+// Mock router
+vi.mock("@tanstack/react-router", async () => {
+	const actual = await vi.importActual("@tanstack/react-router");
+	return {
+		...actual,
+		Link: ({ children, to, ...props }: any) => (
+			<a href={to} {...props}>
+				{children}
+			</a>
+		),
+		useNavigate: () => vi.fn(),
+	};
+});
+
+// Mock API
+const mockRequestSignup = vi.fn().mockResolvedValue({ success: true });
+const mockVerifySignupToken = vi
+	.fn()
+	.mockResolvedValue({ email: "test@example.com", role: 30, roleName: "Author" });
+
+vi.mock("../../src/lib/api", async () => {
+	const actual = await vi.importActual("../../src/lib/api");
+	return {
+		...actual,
+		requestSignup: (...args: unknown[]) => mockRequestSignup(...args),
+		verifySignupToken: (...args: unknown[]) => mockVerifySignupToken(...args),
+		hasAllowedDomains: vi.fn().mockResolvedValue(true),
+	};
+});
+
+// Mock WebAuthn so PasskeyRegistration doesn't bail out
+Object.defineProperty(window, "PublicKeyCredential", {
+	value: function PublicKeyCredential() {},
+	writable: true,
+});
+
+// Import after mocks
+const { SignupPage } = await import("../../src/components/SignupPage");
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const RESEND_COOLDOWN_REGEX = /Resend in \d+s/;
+
+describe("SignupPage", () => {
+	beforeEach(() => {
+		mockRequestSignup.mockClear();
+		mockVerifySignupToken.mockClear();
+		// Clean URL params
+		window.history.replaceState({}, "", window.location.pathname);
+	});
+
+	it("shows email input initially", async () => {
+		const screen = await render(<SignupPage />);
+		await expect.element(screen.getByText("Create an account")).toBeInTheDocument();
+		await expect.element(screen.getByPlaceholder("you@company.com")).toBeInTheDocument();
+	});
+
+	it("submit empty email shows validation error", async () => {
+		const screen = await render(<SignupPage />);
+		await screen.getByText("Continue").click();
+		await expect.element(screen.getByText("Email is required")).toBeInTheDocument();
+	});
+
+	it("submit invalid email (no dot) shows validation error", async () => {
+		const screen = await render(<SignupPage />);
+		const input = screen.getByPlaceholder("you@company.com");
+		// Use an email with @ but no dot - passes browser validation but fails component validation
+		await input.fill("test@nodot");
+		await screen.getByText("Continue").click();
+		await expect
+			.element(screen.getByText("Please enter a valid email address"))
+			.toBeInTheDocument();
+	});
+
+	it("submit valid email advances to check-email step", async () => {
+		const screen = await render(<SignupPage />);
+		const input = screen.getByPlaceholder("you@company.com");
+		await input.fill("test@example.com");
+		await screen.getByText("Continue").click();
+		// Should advance to check-email - use the h1 heading to disambiguate
+		await expect
+			.element(screen.getByRole("heading", { level: 1, name: "Check your email" }))
+			.toBeInTheDocument();
+	});
+
+	it("check-email step shows correct email", async () => {
+		const screen = await render(<SignupPage />);
+		await screen.getByPlaceholder("you@company.com").fill("test@example.com");
+		await screen.getByText("Continue").click();
+		await expect.element(screen.getByText("test@example.com")).toBeInTheDocument();
+	});
+
+	it("submit valid email advances to check-email step", async () => {
+		const screen = await render(<SignupPage />);
+		const input = screen.getByPlaceholder("you@company.com");
+		await input.fill("test@example.com");
+		await screen.getByText("Continue").click();
+		// Should advance to check-email - h2 inside the card is unique to this step
+		await expect.element(screen.getByText("We've sent a verification link to")).toBeInTheDocument();
+	});
+
+	it("check-email step shows correct email", async () => {
+		const screen = await render(<SignupPage />);
+		await screen.getByPlaceholder("you@company.com").fill("test@example.com");
+		await screen.getByText("Continue").click();
+		await expect.element(screen.getByText("test@example.com")).toBeInTheDocument();
+	});
+
+	it("resend button has cooldown timer", async () => {
+		mockRequestSignup.mockResolvedValue({ success: true });
+		const screen = await render(<SignupPage />);
+		await screen.getByPlaceholder("you@company.com").fill("test@example.com");
+		await screen.getByText("Continue").click();
+		// Should see resend button
+		await expect.element(screen.getByText("Resend email")).toBeInTheDocument();
+		// Click resend
+		await screen.getByText("Resend email").click();
+		// Should show cooldown text
+		await expect.element(screen.getByText(RESEND_COOLDOWN_REGEX)).toBeInTheDocument();
+	});
+
+	it("error step shows correct heading for token_expired", async () => {
+		mockVerifySignupToken.mockRejectedValue(
+			Object.assign(new Error("This link has expired"), { code: "token_expired" }),
+		);
+		// Navigate with token in URL
+		window.history.replaceState({}, "", "?token=expired-token");
+		const screen = await render(<SignupPage />);
+		await expect.element(screen.getByText("Link expired")).toBeInTheDocument();
+	});
+
+	it("error step shows correct heading for invalid_token", async () => {
+		mockVerifySignupToken.mockRejectedValue(
+			Object.assign(new Error("Invalid token"), { code: "invalid_token" }),
+		);
+		window.history.replaceState({}, "", "?token=bad-token");
+		const screen = await render(<SignupPage />);
+		await expect.element(screen.getByText("Invalid link")).toBeInTheDocument();
+	});
+
+	it("error step shows correct heading for user_exists", async () => {
+		mockVerifySignupToken.mockRejectedValue(
+			Object.assign(new Error("Account already exists"), { code: "user_exists" }),
+		);
+		window.history.replaceState({}, "", "?token=exists-token");
+		const screen = await render(<SignupPage />);
+		await expect.element(screen.getByText("Account exists")).toBeInTheDocument();
+	});
+});

packages/admin/tests/components/TaxonomyManager.test.tsx

@@ -0,0 +1,225 @@
+import { Toasty } from "@cloudflare/kumo";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import * as React from "react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render } from "vitest-browser-react";
+
+import { TaxonomyManager } from "../../src/components/TaxonomyManager";
+
+const taxonomyResponse = JSON.stringify({
+	data: {
+		taxonomies: [
+			{
+				id: "t1",
+				name: "categories",
+				label: "Categories",
+				labelSingular: "Category",
+				hierarchical: true,
+				collections: ["posts"],
+			},
+		],
+	},
+});
+
+const termsResponse = JSON.stringify({
+	data: {
+		terms: [
+			{
+				id: "1",
+				name: "tech",
+				slug: "tech",
+				label: "Technology",
+				parentId: null,
+				children: [],
+				count: 5,
+			},
+			{
+				id: "2",
+				name: "science",
+				slug: "science",
+				label: "Science",
+				parentId: null,
+				children: [],
+				count: 3,
+			},
+		],
+	},
+});
+
+vi.mock("../../src/lib/api/client.js", async () => {
+	const actual = await vi.importActual("../../src/lib/api/client.js");
+	return {
+		...actual,
+		apiFetch: vi.fn(),
+	};
+});
+
+import { apiFetch } from "../../src/lib/api/client.js";
+
+function mockApiFetch(overrideTerms?: string) {
+	vi.mocked(apiFetch).mockImplementation((url: string, init?: RequestInit) => {
+		const urlStr = typeof url === "string" ? url : "";
+		if (urlStr.includes("/terms") && (!init || !init.method || init.method === "GET")) {
+			return Promise.resolve(
+				new Response(overrideTerms ?? termsResponse, {
+					status: 200,
+					headers: { "Content-Type": "application/json" },
+				}),
+			);
+		}
+		if (urlStr.includes("/taxonomies") && (!init || !init.method || init.method === "GET")) {
+			return Promise.resolve(
+				new Response(taxonomyResponse, {
+					status: 200,
+					headers: { "Content-Type": "application/json" },
+				}),
+			);
+		}
+		return Promise.resolve(
+			new Response(JSON.stringify({ data: { success: true } }), {
+				status: 200,
+				headers: { "Content-Type": "application/json" },
+			}),
+		);
+	});
+}
+
+function Wrapper({ children }: { children: React.ReactNode }) {
+	const qc = new QueryClient({
+		defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+	});
+	return (
+		<Toasty>
+			<QueryClientProvider client={qc}>{children}</QueryClientProvider>
+		</Toasty>
+	);
+}
+
+const ADD_CATEGORY_BUTTON_REGEX = /Add Category/;
+const ADD_CATEGORY_HEADING_REGEX = /Add Category/;
+const EDIT_CATEGORY_HEADING_REGEX = /Edit Category/;
+const PARENT_SELECTOR_REGEX = /Parent/;
+const NO_CATEGORIES_REGEX = /No categories yet/;
+const DELETE_CATEGORY_HEADING_REGEX = /Delete Category/i;
+const DELETE_TECHNOLOGY_DESC_REGEX = /permanently delete "Technology"/;
+
+describe("TaxonomyManager", () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+		mockApiFetch();
+	});
+
+	it("displays taxonomy name as heading", async () => {
+		const screen = await render(<TaxonomyManager taxonomyName="categories" />, {
+			wrapper: Wrapper,
+		});
+
+		await expect.element(screen.getByRole("heading", { name: "Categories" })).toBeInTheDocument();
+	});
+
+	it("shows list of terms with labels", async () => {
+		const screen = await render(<TaxonomyManager taxonomyName="categories" />, {
+			wrapper: Wrapper,
+		});
+
+		// Use locators that target the specific label spans (font-medium class)
+		await expect.element(screen.getByText("Technology", { exact: true })).toBeInTheDocument();
+		// "Science" also appears in "(science)" slug, so target the font-medium span
+		await expect.element(screen.getByText("(science)")).toBeInTheDocument();
+	});
+
+	it("shows term slugs in parentheses", async () => {
+		const screen = await render(<TaxonomyManager taxonomyName="categories" />, {
+			wrapper: Wrapper,
+		});
+
+		await expect.element(screen.getByText("(tech)")).toBeInTheDocument();
+		await expect.element(screen.getByText("(science)")).toBeInTheDocument();
+	});
+
+	it("add button opens create dialog", async () => {
+		const screen = await render(<TaxonomyManager taxonomyName="categories" />, {
+			wrapper: Wrapper,
+		});
+
+		// Wait for content to load, then click the button
+		await expect.element(screen.getByRole("heading", { name: "Categories" })).toBeInTheDocument();
+
+		await screen.getByRole("button", { name: ADD_CATEGORY_BUTTON_REGEX }).click();
+
+		// Verify the dialog heading opened
+		await expect
+			.element(screen.getByRole("heading", { name: ADD_CATEGORY_HEADING_REGEX }))
+			.toBeInTheDocument();
+	});
+
+	it("create dialog has name, slug, and description inputs", async () => {
+		const screen = await render(<TaxonomyManager taxonomyName="categories" />, {
+			wrapper: Wrapper,
+		});
+
+		await expect.element(screen.getByRole("heading", { name: "Categories" })).toBeInTheDocument();
+
+		await screen.getByRole("button", { name: ADD_CATEGORY_BUTTON_REGEX }).click();
+
+		await expect.element(screen.getByLabelText("Name")).toBeInTheDocument();
+		await expect.element(screen.getByLabelText("Slug")).toBeInTheDocument();
+		// The InputArea uses "Description (optional)" as label
+		await expect.element(screen.getByText("Description (optional)")).toBeInTheDocument();
+	});
+
+	it("shows parent selector for hierarchical taxonomies", async () => {
+		const screen = await render(<TaxonomyManager taxonomyName="categories" />, {
+			wrapper: Wrapper,
+		});
+
+		await expect.element(screen.getByRole("heading", { name: "Categories" })).toBeInTheDocument();
+
+		await screen.getByRole("button", { name: ADD_CATEGORY_BUTTON_REGEX }).click();
+
+		await expect.element(screen.getByLabelText(PARENT_SELECTOR_REGEX)).toBeInTheDocument();
+	});
+
+	it("edit button opens dialog", async () => {
+		const screen = await render(<TaxonomyManager taxonomyName="categories" />, {
+			wrapper: Wrapper,
+		});
+
+		await expect.element(screen.getByText("Technology", { exact: true })).toBeInTheDocument();
+
+		await screen.getByRole("button", { name: "Edit Technology" }).click();
+
+		// Should open the edit dialog with "Edit Category" heading
+		await expect
+			.element(screen.getByRole("heading", { name: EDIT_CATEGORY_HEADING_REGEX }))
+			.toBeInTheDocument();
+	});
+
+	it("delete button opens confirm dialog", async () => {
+		const screen = await render(<TaxonomyManager taxonomyName="categories" />, {
+			wrapper: Wrapper,
+		});
+
+		await expect.element(screen.getByText("Technology", { exact: true })).toBeInTheDocument();
+
+		await screen.getByRole("button", { name: "Delete Technology" }).click();
+
+		// Should open a ConfirmDialog (not window.confirm)
+		await expect
+			.element(screen.getByRole("heading", { name: DELETE_CATEGORY_HEADING_REGEX }))
+			.toBeInTheDocument();
+		await expect.element(screen.getByText(DELETE_TECHNOLOGY_DESC_REGEX)).toBeInTheDocument();
+		await expect.element(screen.getByRole("button", { name: "Delete" })).toBeInTheDocument();
+		await expect.element(screen.getByRole("button", { name: "Cancel" })).toBeInTheDocument();
+	});
+
+	it("shows empty state when no terms", async () => {
+		mockApiFetch(JSON.stringify({ data: { terms: [] } }));
+
+		const screen = await render(<TaxonomyManager taxonomyName="categories" />, {
+			wrapper: Wrapper,
+		});
+
+		await expect.element(screen.getByText(NO_CATEGORIES_REGEX)).toBeInTheDocument();
+	});
+});

packages/admin/tests/components/ThemeToggle.test.tsx

@@ -0,0 +1,69 @@
+import * as React from "react";
+import { describe, it, expect, beforeEach } from "vitest";
+import { render } from "vitest-browser-react";
+
+import { ThemeProvider } from "../../src/components/ThemeProvider";
+import { ThemeToggle } from "../../src/components/ThemeToggle";
+
+function TestThemeToggle({ defaultTheme = "system" as "system" | "light" | "dark" }) {
+	return (
+		<ThemeProvider defaultTheme={defaultTheme}>
+			<ThemeToggle />
+		</ThemeProvider>
+	);
+}
+
+describe("ThemeToggle", () => {
+	beforeEach(() => {
+		localStorage.clear();
+		document.documentElement.removeAttribute("data-theme");
+	});
+
+	it("renders with system theme by default", async () => {
+		const screen = await render(<TestThemeToggle />);
+		const button = screen.getByRole("button");
+		await expect.element(button).toBeInTheDocument();
+		// System theme shows Monitor icon - check the title
+		await expect.element(button).toHaveAttribute("title", expect.stringContaining("System"));
+	});
+
+	it("cycles from system to light on click", async () => {
+		const screen = await render(<TestThemeToggle />);
+		const button = screen.getByRole("button");
+		await button.click();
+		await expect.element(button).toHaveAttribute("title", expect.stringContaining("Light"));
+	});
+
+	it("cycles through system -> light -> dark -> system", async () => {
+		const screen = await render(<TestThemeToggle />);
+		const button = screen.getByRole("button");
+
+		// Start: system
+		await expect.element(button).toHaveAttribute("title", expect.stringContaining("System"));
+
+		// Click 1: light
+		await button.click();
+		await expect.element(button).toHaveAttribute("title", expect.stringContaining("Light"));
+
+		// Click 2: dark
+		await button.click();
+		await expect.element(button).toHaveAttribute("title", expect.stringContaining("Dark"));
+
+		// Click 3: back to system
+		await button.click();
+		await expect.element(button).toHaveAttribute("title", expect.stringContaining("System"));
+	});
+
+	it("persists theme to localStorage", async () => {
+		const screen = await render(<TestThemeToggle />);
+		const button = screen.getByRole("button");
+		await button.click(); // system -> light
+		expect(localStorage.getItem("emdash-theme")).toBe("light");
+	});
+
+	it("starts with light theme when defaultTheme is light", async () => {
+		const screen = await render(<TestThemeToggle defaultTheme="light" />);
+		const button = screen.getByRole("button");
+		await expect.element(button).toHaveAttribute("title", expect.stringContaining("Light"));
+	});
+});

packages/admin/tests/components/WelcomeModal.test.tsx

@@ -0,0 +1,127 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import * as React from "react";
+import { describe, it, expect, vi } from "vitest";
+import { render } from "vitest-browser-react";
+
+import { WelcomeModal } from "../../src/components/WelcomeModal";
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const WELCOME_MESSAGE_REGEX = /Welcome to EmDash, Alice!/;
+const ADMIN_TEXT_REGEX = /As an administrator, you can invite other users/;
+
+vi.mock("../../src/lib/api/client", async () => {
+	const actual = await vi.importActual("../../src/lib/api/client");
+	return {
+		...actual,
+		apiFetch: vi
+			.fn()
+			.mockResolvedValue(new Response(JSON.stringify({ success: true }), { status: 200 })),
+	};
+});
+
+function QueryWrapper({ children }: { children: React.ReactNode }) {
+	const qc = new QueryClient({
+		defaultOptions: {
+			queries: { retry: false },
+			mutations: { retry: false },
+		},
+	});
+	return <QueryClientProvider client={qc}>{children}</QueryClientProvider>;
+}
+
+const noop = () => {};
+
+describe("WelcomeModal", () => {
+	it("shows 'Administrator' for role >= 50", async () => {
+		const screen = await render(
+			<QueryWrapper>
+				<WelcomeModal open={true} onClose={noop} userRole={50} />
+			</QueryWrapper>,
+		);
+		await expect.element(screen.getByText("Administrator", { exact: true })).toBeInTheDocument();
+	});
+
+	it("shows 'Editor' for role >= 40", async () => {
+		const screen = await render(
+			<QueryWrapper>
+				<WelcomeModal open={true} onClose={noop} userRole={40} />
+			</QueryWrapper>,
+		);
+		await expect.element(screen.getByText("Editor")).toBeInTheDocument();
+	});
+
+	it("shows 'Author' for role >= 30", async () => {
+		const screen = await render(
+			<QueryWrapper>
+				<WelcomeModal open={true} onClose={noop} userRole={30} />
+			</QueryWrapper>,
+		);
+		await expect.element(screen.getByText("Author")).toBeInTheDocument();
+	});
+
+	it("shows 'Contributor' for role >= 20", async () => {
+		const screen = await render(
+			<QueryWrapper>
+				<WelcomeModal open={true} onClose={noop} userRole={20} />
+			</QueryWrapper>,
+		);
+		await expect.element(screen.getByText("Contributor")).toBeInTheDocument();
+	});
+
+	it("shows 'Subscriber' for role < 20", async () => {
+		const screen = await render(
+			<QueryWrapper>
+				<WelcomeModal open={true} onClose={noop} userRole={10} />
+			</QueryWrapper>,
+		);
+		await expect.element(screen.getByText("Subscriber")).toBeInTheDocument();
+	});
+
+	it("shows first name from userName", async () => {
+		const screen = await render(
+			<QueryWrapper>
+				<WelcomeModal open={true} onClose={noop} userName="Alice Smith" userRole={30} />
+			</QueryWrapper>,
+		);
+		await expect.element(screen.getByText(WELCOME_MESSAGE_REGEX)).toBeInTheDocument();
+	});
+
+	it("'Get Started' button triggers dismiss mutation and calls onClose", async () => {
+		const onClose = vi.fn();
+		const screen = await render(
+			<QueryWrapper>
+				<WelcomeModal open={true} onClose={onClose} userRole={30} />
+			</QueryWrapper>,
+		);
+		const button = screen.getByText("Get Started").element().closest("button")!;
+		button.click();
+		// The mutation resolves and calls onClose
+		await vi.waitFor(() => {
+			expect(onClose).toHaveBeenCalled();
+		});
+	});
+
+	it("admin text shown only for role >= 50", async () => {
+		const screen = await render(
+			<QueryWrapper>
+				<WelcomeModal open={true} onClose={noop} userRole={50} />
+			</QueryWrapper>,
+		);
+		await expect.element(screen.getByText(ADMIN_TEXT_REGEX)).toBeInTheDocument();
+	});
+
+	it("admin text not shown for role < 50", async () => {
+		const screen = await render(
+			<QueryWrapper>
+				<WelcomeModal open={true} onClose={noop} userRole={40} />
+			</QueryWrapper>,
+		);
+		// Check that the admin invite text is NOT present
+		expect(screen.container.textContent).not.toContain(
+			"As an administrator, you can invite other users",
+		);
+	});
+});

packages/admin/tests/components/Widgets.test.tsx

@@ -0,0 +1,213 @@
+import { Toasty } from "@cloudflare/kumo";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import * as React from "react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render } from "vitest-browser-react";
+
+import { Widgets } from "../../src/components/Widgets";
+
+vi.mock("../../src/lib/api", async () => {
+	const actual = await vi.importActual("../../src/lib/api");
+	return {
+		...actual,
+		fetchWidgetAreas: vi.fn(),
+		fetchWidgetComponents: vi.fn(),
+		fetchMenus: vi.fn().mockResolvedValue([]),
+		createWidgetArea: vi.fn().mockResolvedValue({}),
+		deleteWidgetArea: vi.fn().mockResolvedValue(undefined),
+		deleteWidget: vi.fn().mockResolvedValue(undefined),
+		updateWidget: vi.fn().mockResolvedValue({}),
+		reorderWidgets: vi.fn().mockResolvedValue(undefined),
+	};
+});
+
+import * as api from "../../src/lib/api";
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const DELETE_WIDGET_AREA_MSG_REGEX = /This will delete the widget area and all its widgets/;
+const ADD_WIDGET_AREA_REGEX = /Add Widget Area/;
+
+function mockDefaults() {
+	vi.mocked(api.fetchWidgetAreas).mockResolvedValue([
+		{
+			id: "a1",
+			name: "sidebar",
+			label: "Sidebar",
+			description: "Main sidebar",
+			widgets: [
+				{ id: "w1", type: "content", title: "Recent Posts", sort_order: 0 },
+				{ id: "w2", type: "menu", title: "Quick Links", sort_order: 1 },
+			],
+		},
+	]);
+	vi.mocked(api.fetchWidgetComponents).mockResolvedValue([
+		{
+			id: "recent-posts",
+			label: "Recent Posts Widget",
+			description: "Shows recent posts",
+			props: {},
+		},
+	]);
+}
+
+function Wrapper({ children }: { children: React.ReactNode }) {
+	const qc = new QueryClient({
+		defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+	});
+	return (
+		<Toasty>
+			<QueryClientProvider client={qc}>{children}</QueryClientProvider>
+		</Toasty>
+	);
+}
+
+describe("Widgets", () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+		mockDefaults();
+	});
+
+	it("displays widget areas with labels", async () => {
+		const screen = await render(<Widgets />, { wrapper: Wrapper });
+
+		await expect.element(screen.getByRole("heading", { name: "Sidebar" })).toBeInTheDocument();
+		await expect.element(screen.getByText("Main sidebar")).toBeInTheDocument();
+	});
+
+	it("shows widgets within each area", async () => {
+		const screen = await render(<Widgets />, { wrapper: Wrapper });
+
+		// Widget titles are rendered in <span> elements. Use exact match to avoid
+		// matching the "Recent Posts Widget" component in the available widgets list.
+		await expect.element(screen.getByText("Quick Links")).toBeInTheDocument();
+		// Verify widget type badges
+		await expect.element(screen.getByText("(content)")).toBeInTheDocument();
+		await expect.element(screen.getByText("(menu)")).toBeInTheDocument();
+	});
+
+	it("create area button opens dialog with name/label/description form", async () => {
+		const screen = await render(<Widgets />, { wrapper: Wrapper });
+
+		await screen.getByRole("button", { name: ADD_WIDGET_AREA_REGEX }).click();
+
+		await expect
+			.element(screen.getByRole("heading", { name: "Create Widget Area" }))
+			.toBeInTheDocument();
+		await expect.element(screen.getByLabelText("Name")).toBeInTheDocument();
+		await expect.element(screen.getByLabelText("Label")).toBeInTheDocument();
+		await expect.element(screen.getByLabelText("Description")).toBeInTheDocument();
+	});
+
+	it("delete area shows confirmation dialog", async () => {
+		const screen = await render(<Widgets />, { wrapper: Wrapper });
+
+		await expect.element(screen.getByRole("heading", { name: "Sidebar" })).toBeInTheDocument();
+
+		// The area header has a delete button next to the area label.
+		// The WidgetAreaPanel header is a .p-4.border-b div with the label and a button.
+		// Find the button inside the panel header (the div that contains the heading "Sidebar")
+		const sidebarHeading = document.querySelector("h3");
+		expect(sidebarHeading).not.toBeNull();
+		// The delete button is a sibling of the div containing h3, within the .border-b parent
+		const headerContainer = sidebarHeading!.closest(".border-b");
+		expect(headerContainer).not.toBeNull();
+		const deleteBtn = headerContainer!.querySelector("button");
+		expect(deleteBtn).not.toBeNull();
+		(deleteBtn as HTMLButtonElement).click();
+
+		await expect
+			.element(screen.getByRole("heading", { name: "Delete Widget Area?" }))
+			.toBeInTheDocument();
+		await expect.element(screen.getByText(DELETE_WIDGET_AREA_MSG_REGEX)).toBeInTheDocument();
+	});
+
+	it("widget expand/collapse toggles editor form", async () => {
+		const screen = await render(<Widgets />, { wrapper: Wrapper });
+
+		await expect.element(screen.getByText("Quick Links")).toBeInTheDocument();
+
+		// Initially collapsed — editor form should not be visible
+		expect(screen.getByText("Save").query()).toBeNull();
+
+		// Click the widget title area to expand (it's a <button> wrapping the title)
+		const expandButtons = document.querySelectorAll("button.text-left");
+		expect(expandButtons.length).toBeGreaterThanOrEqual(1);
+		(expandButtons[0] as HTMLButtonElement).click();
+
+		// Now the editor should be visible with a Title field and Save button
+		await expect.element(screen.getByLabelText("Title")).toBeInTheDocument();
+		await expect.element(screen.getByText("Save")).toBeInTheDocument();
+	});
+
+	it("content widget editor shows portable text editor", async () => {
+		const screen = await render(<Widgets />, { wrapper: Wrapper });
+
+		// Wait for widget type badge to render — indicates widgets are loaded
+		await expect.element(screen.getByText("(content)")).toBeInTheDocument();
+
+		// Expand the first widget (content type — "Recent Posts")
+		const expandButtons = document.querySelectorAll("button.text-left");
+		expect(expandButtons.length).toBeGreaterThanOrEqual(1);
+		(expandButtons[0] as HTMLButtonElement).click();
+
+		// Content widget should show the Save button and Title input in the editor
+		await expect.element(screen.getByText("Save")).toBeInTheDocument();
+	});
+
+	it("menu widget editor shows menu select", async () => {
+		vi.mocked(api.fetchMenus).mockResolvedValue([
+			{
+				id: "m1",
+				name: "main-nav",
+				label: "Main Navigation",
+				itemCount: 3,
+				created_at: "2025-01-01T00:00:00Z",
+				updated_at: "2025-01-01T00:00:00Z",
+			},
+			{
+				id: "m2",
+				name: "footer",
+				label: "Footer Menu",
+				itemCount: 2,
+				created_at: "2025-01-01T00:00:00Z",
+				updated_at: "2025-01-01T00:00:00Z",
+			},
+		]);
+
+		const screen = await render(<Widgets />, { wrapper: Wrapper });
+
+		// Expand the second widget (menu type — "Quick Links")
+		await expect.element(screen.getByText("Quick Links")).toBeInTheDocument();
+		const expandButtons = document.querySelectorAll("button.text-left");
+		expect(expandButtons.length).toBeGreaterThanOrEqual(2);
+		(expandButtons[1] as HTMLButtonElement).click();
+
+		// Menu widget should show the Menu select
+		await expect.element(screen.getByLabelText("Menu")).toBeInTheDocument();
+	});
+
+	it("empty state when no widget areas", async () => {
+		vi.mocked(api.fetchWidgetAreas).mockResolvedValue([]);
+
+		const screen = await render(<Widgets />, { wrapper: Wrapper });
+
+		await expect
+			.element(screen.getByText("No widget areas yet. Create one to get started."))
+			.toBeInTheDocument();
+	});
+
+	it("shows available widget components panel", async () => {
+		const screen = await render(<Widgets />, { wrapper: Wrapper });
+
+		await expect
+			.element(screen.getByRole("heading", { name: "Available Widgets" }))
+			.toBeInTheDocument();
+		await expect.element(screen.getByText("Content Block")).toBeInTheDocument();
+		// Use exact text to avoid matching the widget type "(menu)" badge
+		await expect.element(screen.getByText("Display a navigation menu")).toBeInTheDocument();
+		await expect.element(screen.getByText("Shows recent posts")).toBeInTheDocument();
+	});
+});

packages/admin/tests/components/settings/AllowedDomainsSettings.test.tsx

@@ -0,0 +1,204 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { userEvent } from "@vitest/browser/context";
+import * as React from "react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render } from "vitest-browser-react";
+
+import { AllowedDomainsSettings } from "../../../src/components/settings/AllowedDomainsSettings";
+
+vi.mock("@tanstack/react-router", async () => {
+	const actual = await vi.importActual("@tanstack/react-router");
+	return {
+		...actual,
+		Link: ({ children, ...props }: any) => <a {...props}>{children}</a>,
+	};
+});
+
+const EXTERNAL_PROVIDER_MSG_REGEX = /User access is managed by an external provider/;
+const NO_DOMAINS_CONFIGURED_REGEX = /No domains configured/;
+
+const mockFetchManifest = vi.fn();
+const mockFetchAllowedDomains = vi.fn();
+const mockCreateAllowedDomain = vi.fn();
+const mockUpdateAllowedDomain = vi.fn();
+const mockDeleteAllowedDomain = vi.fn();
+
+vi.mock("../../../src/lib/api", async () => {
+	const actual = await vi.importActual("../../../src/lib/api");
+	return {
+		...actual,
+		fetchManifest: (...args: unknown[]) => mockFetchManifest(...args),
+		fetchAllowedDomains: (...args: unknown[]) => mockFetchAllowedDomains(...args),
+		createAllowedDomain: (...args: unknown[]) => mockCreateAllowedDomain(...args),
+		updateAllowedDomain: (...args: unknown[]) => mockUpdateAllowedDomain(...args),
+		deleteAllowedDomain: (...args: unknown[]) => mockDeleteAllowedDomain(...args),
+	};
+});
+
+function QueryWrapper({ children }: { children: React.ReactNode }) {
+	const qc = new QueryClient({
+		defaultOptions: {
+			queries: { retry: false },
+			mutations: { retry: false },
+		},
+	});
+	return <QueryClientProvider client={qc}>{children}</QueryClientProvider>;
+}
+
+beforeEach(() => {
+	vi.clearAllMocks();
+	mockFetchManifest.mockResolvedValue({
+		authMode: "passkey",
+		collections: {},
+		plugins: {},
+		version: "1",
+		hash: "",
+	});
+	mockFetchAllowedDomains.mockResolvedValue([]);
+	mockCreateAllowedDomain.mockResolvedValue({});
+	mockUpdateAllowedDomain.mockResolvedValue({});
+	mockDeleteAllowedDomain.mockResolvedValue({});
+});
+
+describe("AllowedDomainsSettings", () => {
+	it("shows domain management when authMode is passkey", async () => {
+		const screen = await render(
+			<QueryWrapper>
+				<AllowedDomainsSettings />
+			</QueryWrapper>,
+		);
+		await expect.element(screen.getByText("Self-Signup Domains")).toBeInTheDocument();
+		await expect.element(screen.getByText("Allowed Domains")).toBeInTheDocument();
+	});
+
+	it("shows info message when authMode is not passkey", async () => {
+		mockFetchManifest.mockResolvedValue({
+			authMode: "cloudflare-access",
+			collections: {},
+			plugins: {},
+			version: "1",
+			hash: "",
+		});
+		const screen = await render(
+			<QueryWrapper>
+				<AllowedDomainsSettings />
+			</QueryWrapper>,
+		);
+		await expect.element(screen.getByText(EXTERNAL_PROVIDER_MSG_REGEX)).toBeInTheDocument();
+	});
+
+	it("empty state shows 'No domains configured'", async () => {
+		const screen = await render(
+			<QueryWrapper>
+				<AllowedDomainsSettings />
+			</QueryWrapper>,
+		);
+		await expect.element(screen.getByText(NO_DOMAINS_CONFIGURED_REGEX)).toBeInTheDocument();
+	});
+
+	it("add domain form: toggles open, has domain input and role select", async () => {
+		const screen = await render(
+			<QueryWrapper>
+				<AllowedDomainsSettings />
+			</QueryWrapper>,
+		);
+		// Wait for data to load
+		await expect.element(screen.getByText("Add Domain")).toBeInTheDocument();
+		// Click Add Domain to show the form
+		const addButton = screen.getByText("Add Domain").element().closest("button")!;
+		await userEvent.click(addButton);
+		await expect.element(screen.getByLabelText("Domain")).toBeInTheDocument();
+		await expect.element(screen.getByLabelText("Default Role")).toBeInTheDocument();
+	});
+
+	it("add domain: submitting calls createAllowedDomain", async () => {
+		mockCreateAllowedDomain.mockResolvedValue({
+			domain: "example.com",
+			defaultRole: 30,
+			roleName: "Author",
+			enabled: true,
+			createdAt: "2025-01-01T00:00:00Z",
+		});
+		const screen = await render(
+			<QueryWrapper>
+				<AllowedDomainsSettings />
+			</QueryWrapper>,
+		);
+		// Open add form
+		await expect.element(screen.getByText("Add Domain")).toBeInTheDocument();
+		const addButton = screen.getByText("Add Domain").element().closest("button")!;
+		await userEvent.click(addButton);
+		// Fill in domain
+		const domainInput = screen.getByLabelText("Domain");
+		await userEvent.type(domainInput, "example.com");
+		// The form submit button also says "Add Domain" — click it
+		await expect.element(screen.getByText("Add Domain")).toBeInTheDocument();
+		const submitButton = screen.getByText("Add Domain").element().closest("button")!;
+		await userEvent.click(submitButton);
+		await vi.waitFor(() => {
+			expect(mockCreateAllowedDomain).toHaveBeenCalled();
+		});
+		expect(mockCreateAllowedDomain.mock.calls[0]![0]).toEqual({
+			domain: "example.com",
+			defaultRole: 30,
+		});
+	});
+
+	it("delete domain: confirmation dialog, confirm calls deleteAllowedDomain", async () => {
+		mockFetchAllowedDomains.mockResolvedValue([
+			{
+				domain: "test.com",
+				defaultRole: 30,
+				roleName: "Author",
+				enabled: true,
+				createdAt: "2025-01-01T00:00:00Z",
+			},
+		]);
+		mockDeleteAllowedDomain.mockResolvedValue({});
+		const screen = await render(
+			<QueryWrapper>
+				<AllowedDomainsSettings />
+			</QueryWrapper>,
+		);
+		// Wait for the domain to appear
+		await expect.element(screen.getByText("test.com")).toBeInTheDocument();
+		// Click delete button
+		const deleteButton = screen.getByLabelText("Delete test.com");
+		await deleteButton.click();
+		// Confirmation dialog should appear
+		await expect.element(screen.getByText("Remove Domain?")).toBeInTheDocument();
+		// Confirm deletion - Base UI overlays block pointer events, so click the element directly
+		const confirmButton = screen
+			.getByRole("button", { name: "Remove Domain" })
+			.element() as HTMLButtonElement;
+		confirmButton.click();
+		await vi.waitFor(() => {
+			expect(mockDeleteAllowedDomain).toHaveBeenCalled();
+		});
+		expect(mockDeleteAllowedDomain.mock.calls[0]![0]).toBe("test.com");
+	});
+
+	it("toggle enable/disable calls updateAllowedDomain", async () => {
+		mockFetchAllowedDomains.mockResolvedValue([
+			{
+				domain: "test.com",
+				defaultRole: 30,
+				roleName: "Author",
+				enabled: true,
+				createdAt: "2025-01-01T00:00:00Z",
+			},
+		]);
+		mockUpdateAllowedDomain.mockResolvedValue({});
+		const screen = await render(
+			<QueryWrapper>
+				<AllowedDomainsSettings />
+			</QueryWrapper>,
+		);
+		// Wait for the domain to appear
+		await expect.element(screen.getByText("test.com")).toBeInTheDocument();
+		// Find and click the switch toggle
+		const switchEl = screen.getByRole("switch");
+		await switchEl.click();
+		expect(mockUpdateAllowedDomain).toHaveBeenCalledWith("test.com", { enabled: false });
+	});
+});

packages/admin/tests/components/users/InviteUserModal.test.tsx

@@ -0,0 +1,85 @@
+import { userEvent } from "@vitest/browser/context";
+import * as React from "react";
+import { describe, it, expect, vi } from "vitest";
+import { render } from "vitest-browser-react";
+
+import { InviteUserModal } from "../../../src/components/users/InviteUserModal";
+
+const noop = () => {};
+
+describe("InviteUserModal", () => {
+	it("shows email input and role select when open", async () => {
+		const screen = await render(
+			<InviteUserModal open={true} onOpenChange={noop} onInvite={noop} />,
+		);
+		await expect.element(screen.getByLabelText("Email address")).toBeInTheDocument();
+		await expect.element(screen.getByLabelText("Role")).toBeInTheDocument();
+	});
+
+	it("default role is Author (30)", async () => {
+		const screen = await render(
+			<InviteUserModal open={true} onOpenChange={noop} onInvite={noop} />,
+		);
+		// The select should display "Author" as the selected value
+		await expect.element(screen.getByText("Author")).toBeInTheDocument();
+	});
+
+	it("submit calls onInvite with email and role", async () => {
+		const onInvite = vi.fn();
+		const screen = await render(
+			<InviteUserModal open={true} onOpenChange={noop} onInvite={onInvite} />,
+		);
+		const emailInput = screen.getByLabelText("Email address");
+		await userEvent.type(emailInput, "new@example.com");
+		const submitButton = screen.getByText("Send Invite").element().closest("button")!;
+		submitButton.click();
+		expect(onInvite).toHaveBeenCalledWith("new@example.com", 30);
+	});
+
+	it("submit button disabled when email is empty", async () => {
+		const screen = await render(
+			<InviteUserModal open={true} onOpenChange={noop} onInvite={noop} />,
+		);
+		const submitButton = screen.getByText("Send Invite").element().closest("button")!;
+		expect(submitButton.disabled).toBe(true);
+	});
+
+	it("submit button disabled when isSending", async () => {
+		const screen = await render(
+			<InviteUserModal open={true} isSending={true} onOpenChange={noop} onInvite={noop} />,
+		);
+		const submitButton = screen.getByText("Sending...").element().closest("button")!;
+		expect(submitButton.disabled).toBe(true);
+	});
+
+	it("shows error message when error prop provided", async () => {
+		const screen = await render(
+			<InviteUserModal
+				open={true}
+				error="Email already exists"
+				onOpenChange={noop}
+				onInvite={noop}
+			/>,
+		);
+		await expect.element(screen.getByText("Email already exists")).toBeInTheDocument();
+	});
+
+	it("form resets when modal opens", async () => {
+		const result = await render(
+			<InviteUserModal open={false} onOpenChange={noop} onInvite={noop} />,
+		);
+		// Open the modal - the effect should reset email to "" and role to 30
+		await result.rerender(<InviteUserModal open={true} onOpenChange={noop} onInvite={noop} />);
+		await expect.element(result.getByLabelText("Email address")).toHaveValue("");
+	});
+
+	it("cancel button closes modal", async () => {
+		const onOpenChange = vi.fn();
+		const screen = await render(
+			<InviteUserModal open={true} onOpenChange={onOpenChange} onInvite={noop} />,
+		);
+		const cancelButton = screen.getByText("Cancel").element().closest("button")!;
+		cancelButton.click();
+		expect(onOpenChange).toHaveBeenCalledWith(false);
+	});
+});

packages/admin/tests/components/users/UserDetail.test.tsx

@@ -0,0 +1,301 @@
+import { userEvent } from "@vitest/browser/context";
+import * as React from "react";
+import { describe, it, expect, vi } from "vitest";
+import { render } from "vitest-browser-react";
+
+import { UserDetail } from "../../../src/components/users/UserDetail";
+import type { UserDetail as UserDetailType } from "../../../src/lib/api";
+
+function makeUser(overrides: Partial<UserDetailType> = {}): UserDetailType {
+	return {
+		id: "user-1",
+		email: "test@example.com",
+		name: "Test User",
+		avatarUrl: null,
+		role: 30,
+		emailVerified: true,
+		disabled: false,
+		createdAt: "2025-01-01T00:00:00Z",
+		updatedAt: "2025-01-02T00:00:00Z",
+		lastLogin: "2025-01-02T00:00:00Z",
+		credentialCount: 1,
+		oauthProviders: [],
+		credentials: [
+			{
+				id: "cred-1",
+				name: "My Passkey",
+				deviceType: "multiDevice",
+				createdAt: "2025-01-01T00:00:00Z",
+				lastUsedAt: "2025-01-02T00:00:00Z",
+			},
+		],
+		oauthAccounts: [],
+		...overrides,
+	};
+}
+
+const noop = () => {};
+
+describe("UserDetail", () => {
+	it("returns null when not open", async () => {
+		const screen = await render(
+			<UserDetail
+				user={makeUser()}
+				isOpen={false}
+				onClose={noop}
+				onSave={noop}
+				onDisable={noop}
+				onEnable={noop}
+			/>,
+		);
+		// The dialog should not be in the DOM at all
+		expect(screen.container.innerHTML).toBe("");
+	});
+
+	it("shows loading skeleton when isLoading", async () => {
+		const screen = await render(
+			<UserDetail
+				user={null}
+				isLoading={true}
+				isOpen={true}
+				onClose={noop}
+				onSave={noop}
+				onDisable={noop}
+				onEnable={noop}
+			/>,
+		);
+		// Skeleton has the animate-pulse class
+		await expect.element(screen.getByRole("dialog")).toBeInTheDocument();
+		expect(screen.container.querySelector(".animate-pulse")).not.toBeNull();
+	});
+
+	it("shows 'User not found' when not loading and no user", async () => {
+		const screen = await render(
+			<UserDetail
+				user={null}
+				isLoading={false}
+				isOpen={true}
+				onClose={noop}
+				onSave={noop}
+				onDisable={noop}
+				onEnable={noop}
+			/>,
+		);
+		await expect.element(screen.getByText("User not found")).toBeInTheDocument();
+	});
+
+	it("displays user name, email, and role correctly", async () => {
+		const user = makeUser({ name: "Alice Smith", email: "alice@example.com", role: 40 });
+		const screen = await render(
+			<UserDetail
+				user={user}
+				isOpen={true}
+				onClose={noop}
+				onSave={noop}
+				onDisable={noop}
+				onEnable={noop}
+			/>,
+		);
+		// Name input
+		await expect.element(screen.getByLabelText("Name")).toHaveValue("Alice Smith");
+		// Email input
+		await expect.element(screen.getByLabelText("Email")).toHaveValue("alice@example.com");
+	});
+
+	it("escape key calls onClose", async () => {
+		const onClose = vi.fn();
+		await render(
+			<UserDetail
+				user={makeUser()}
+				isOpen={true}
+				onClose={onClose}
+				onSave={noop}
+				onDisable={noop}
+				onEnable={noop}
+			/>,
+		);
+		await userEvent.keyboard("{Escape}");
+		expect(onClose).toHaveBeenCalled();
+	});
+
+	it("backdrop click calls onClose", async () => {
+		const onClose = vi.fn();
+		const screen = await render(
+			<UserDetail
+				user={makeUser()}
+				isOpen={true}
+				onClose={onClose}
+				onSave={noop}
+				onDisable={noop}
+				onEnable={noop}
+			/>,
+		);
+		// The backdrop is the first child (aria-hidden div)
+		const backdrop = screen.container.querySelector("[aria-hidden='true']") as HTMLElement;
+		expect(backdrop).not.toBeNull();
+		backdrop.click();
+		expect(onClose).toHaveBeenCalled();
+	});
+
+	it("save button disabled when no changes", async () => {
+		const screen = await render(
+			<UserDetail
+				user={makeUser()}
+				isOpen={true}
+				onClose={noop}
+				onSave={noop}
+				onDisable={noop}
+				onEnable={noop}
+			/>,
+		);
+		await expect.element(screen.getByText("Save Changes")).toBeInTheDocument();
+		const saveButton = screen.getByText("Save Changes").element().closest("button")!;
+		expect(saveButton.disabled).toBe(true);
+	});
+
+	it("changing name enables save", async () => {
+		const screen = await render(
+			<UserDetail
+				user={makeUser()}
+				isOpen={true}
+				onClose={noop}
+				onSave={noop}
+				onDisable={noop}
+				onEnable={noop}
+			/>,
+		);
+		const nameInput = screen.getByLabelText("Name");
+		await userEvent.clear(nameInput);
+		await userEvent.type(nameInput, "New Name");
+		const saveButton = screen.getByText("Save Changes").element().closest("button")!;
+		expect(saveButton.disabled).toBe(false);
+	});
+
+	it("changing email enables save", async () => {
+		const screen = await render(
+			<UserDetail
+				user={makeUser()}
+				isOpen={true}
+				onClose={noop}
+				onSave={noop}
+				onDisable={noop}
+				onEnable={noop}
+			/>,
+		);
+		const emailInput = screen.getByLabelText("Email");
+		await userEvent.clear(emailInput);
+		await userEvent.type(emailInput, "new@example.com");
+		const saveButton = screen.getByText("Save Changes").element().closest("button")!;
+		expect(saveButton.disabled).toBe(false);
+	});
+
+	it("onSave only includes changed fields", async () => {
+		const onSave = vi.fn();
+		const screen = await render(
+			<UserDetail
+				user={makeUser({ name: "Original" })}
+				isOpen={true}
+				onClose={noop}
+				onSave={onSave}
+				onDisable={noop}
+				onEnable={noop}
+			/>,
+		);
+		const nameInput = screen.getByLabelText("Name");
+		await userEvent.clear(nameInput);
+		await userEvent.type(nameInput, "Changed");
+		// Submit the form
+		const saveButton = screen.getByText("Save Changes").element().closest("button")!;
+		await userEvent.click(saveButton);
+		expect(onSave).toHaveBeenCalledWith({ name: "Changed" });
+	});
+
+	it("self-user: role selector is disabled", async () => {
+		const user = makeUser({ id: "me" });
+		const screen = await render(
+			<UserDetail
+				user={user}
+				isOpen={true}
+				currentUserId="me"
+				onClose={noop}
+				onSave={noop}
+				onDisable={noop}
+				onEnable={noop}
+			/>,
+		);
+		await expect.element(screen.getByText("You cannot change your own role")).toBeInTheDocument();
+	});
+
+	it("self-user: disable button not shown", async () => {
+		const user = makeUser({ id: "me" });
+		const screen = await render(
+			<UserDetail
+				user={user}
+				isOpen={true}
+				currentUserId="me"
+				onClose={noop}
+				onSave={noop}
+				onDisable={noop}
+				onEnable={noop}
+			/>,
+		);
+		expect(screen.container.querySelector("button")?.textContent).not.toContain("Disable");
+		// More specifically, check that no button with Disable text exists
+		const buttons = screen.container.querySelectorAll("button");
+		const disableButton = [...buttons].find((b) => b.textContent?.includes("Disable"));
+		expect(disableButton).toBeUndefined();
+	});
+
+	it("non-self: disable button shown and calls onDisable", async () => {
+		const onDisable = vi.fn();
+		const screen = await render(
+			<UserDetail
+				user={makeUser({ id: "other" })}
+				isOpen={true}
+				currentUserId="me"
+				onClose={noop}
+				onSave={noop}
+				onDisable={onDisable}
+				onEnable={noop}
+			/>,
+		);
+		const disableButton = screen.getByText("Disable").element().closest("button")!;
+		await userEvent.click(disableButton);
+		expect(onDisable).toHaveBeenCalled();
+	});
+
+	it("enable button shown for disabled users and calls onEnable", async () => {
+		const onEnable = vi.fn();
+		const screen = await render(
+			<UserDetail
+				user={makeUser({ id: "other", disabled: true })}
+				isOpen={true}
+				currentUserId="me"
+				onClose={noop}
+				onSave={noop}
+				onDisable={noop}
+				onEnable={onEnable}
+			/>,
+		);
+		const enableButton = screen.getByText("Enable").element().closest("button")!;
+		await userEvent.click(enableButton);
+		expect(onEnable).toHaveBeenCalled();
+	});
+
+	it("close button calls onClose", async () => {
+		const onClose = vi.fn();
+		const screen = await render(
+			<UserDetail
+				user={makeUser()}
+				isOpen={true}
+				onClose={onClose}
+				onSave={noop}
+				onDisable={noop}
+				onEnable={noop}
+			/>,
+		);
+		const closeButton = screen.getByLabelText("Close panel");
+		await closeButton.click();
+		expect(onClose).toHaveBeenCalled();
+	});
+});