@growth-labs/cms 0.1.0

package/src/ui/screens/SettingsScreen.tsx

@@ -0,0 +1,1841 @@
+// src/ui/screens/SettingsScreen.tsx — Settings screen (P7 Task 10).
+//
+// 6-tab Settings screen mounted in the 'settings' route slot (previously EmptyRoute).
+// Ported from /tmp/fronts-cms-design/cms/manage.jsx SettingsPage.
+//
+// Tabs:
+//   General           — publication name/tagline/language/timezone + publishing defaults
+//   Branding & theme  — logo upload + accent color + display typeface
+//   Roles & team      — member list + role select + invite
+//   Integrations      — read-only status (placeholder for Task 11)
+//   Domains           — read-only domain list (placeholder for Task 11)
+//   API & webhooks    — API keys + webhooks (placeholder for Task 11)
+//
+// General/Branding/Publishing-defaults call GET|PATCH /admin/api/workspace-settings.
+// Roles & Team calls GET /admin/api/settings/members + PATCH /admin/api/settings/members/:userId
+//   + POST /admin/api/settings/members/invite.
+//
+// SCOPE GUARDS:
+//   - owner-gate on PATCH settings (canEditSettings from settings-data.ts)
+//   - Integrations/Domains render read-only honest state (no mutation in Task 10)
+//   - API & Webhooks tabs are placeholders here (completed in Task 11)
+//   - NO BData, no mock values — live/empty honest rendering
+
+import { useCallback, useEffect, useReducer, useState } from 'react'
+import type { ApiKeyListEntry } from '../../engine/api-keys.js'
+import { WEBHOOK_EVENTS, type WebhookRecord } from '../../engine/webhooks.js'
+import { Icon } from '../icons.js'
+import { useWorkspace } from '../workspace-context.js'
+import {
+	buildSettingsPatch,
+	canEditSettings,
+	type MemberRowView,
+	memberRowView,
+	roleLabel,
+	roleOptions,
+	type SettingsFormState,
+} from './settings-data.js'
+import {
+	domainRowView,
+	integrationStatusView,
+	maskApiKeyView,
+	webhookEventOptions,
+} from './settings-panels-data.js'
+
+// ---------------------------------------------------------------------------
+// Tab definitions
+// ---------------------------------------------------------------------------
+
+type SettingsTab = 'general' | 'branding' | 'team' | 'integrations' | 'domains' | 'api'
+
+interface TabDef {
+	id: SettingsTab
+	label: string
+	icon: Parameters<typeof Icon>[0]['name']
+}
+
+const TABS: TabDef[] = [
+	{ id: 'general', label: 'General', icon: 'settings' },
+	{ id: 'branding', label: 'Branding & theme', icon: 'image' },
+	{ id: 'team', label: 'Roles & team', icon: 'users' },
+	{ id: 'integrations', label: 'Integrations', icon: 'layers' },
+	{ id: 'domains', label: 'Domains', icon: 'globe' },
+	{ id: 'api', label: 'API & webhooks', icon: 'command' },
+]
+
+// ---------------------------------------------------------------------------
+// Layout primitives
+// ---------------------------------------------------------------------------
+
+function Card({
+	kicker,
+	title,
+	desc,
+	children,
+	foot,
+	noRule,
+}: {
+	/** Optional mono-uppercase eyebrow above the serif card title. */
+	kicker?: string
+	title: string
+	desc?: string
+	children: React.ReactNode
+	foot?: React.ReactNode
+	/** Suppress the masthead hairline (used when the body is itself a .tbl). */
+	noRule?: boolean
+}) {
+	return (
+		<div className="panel" style={{ marginBottom: 'var(--gap)', overflow: 'hidden' }}>
+			<div style={{ padding: '16px 18px' }}>
+				{kicker && <div className="kicker">{kicker}</div>}
+				<div className="card-title">{title}</div>
+				{desc && (
+					<div className="page-sub" style={{ marginTop: 3, fontSize: 12.5 }}>
+						{desc}
+					</div>
+				)}
+				{!noRule && <hr className="masthead-rule" style={{ margin: '12px 0 0' }} />}
+				<div style={{ marginTop: 16 }}>{children}</div>
+			</div>
+			{foot && (
+				<div
+					style={{
+						padding: '12px 18px',
+						borderTop: '1px solid var(--border)',
+						background: 'var(--panel-2)',
+						display: 'flex',
+						justifyContent: 'flex-end',
+						gap: 8,
+					}}
+				>
+					{foot}
+				</div>
+			)}
+		</div>
+	)
+}
+
+function Row({
+	label,
+	children,
+	help,
+}: {
+	label: string
+	children: React.ReactNode
+	help?: string
+}) {
+	return (
+		<div style={{ marginBottom: 16 }}>
+			{/* biome-ignore lint/a11y/noLabelWithoutControl: the control is supplied by the caller via {children} and is nested inside this label, which associates them natively; the wrapper is generic so a static htmlFor is not possible. */}
+			<label>
+				<span className="field-label">{label}</span>
+				{children}
+			</label>
+			{help && <div className="help">{help}</div>}
+		</div>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// General settings
+// ---------------------------------------------------------------------------
+
+interface WorkspaceSettingsData {
+	publication_name: string | null
+	tagline: string | null
+	language: string
+	timezone: string
+	require_review: number
+	auto_seo: number
+	scheduled_publish: number
+	premium_default: number
+	accent_color: string | null
+	display_typeface: string | null
+	[key: string]: unknown
+}
+
+const SETTINGS_DEFAULTS: WorkspaceSettingsData = {
+	publication_name: null,
+	tagline: null,
+	language: 'en',
+	timezone: 'Europe/Paris',
+	require_review: 0,
+	auto_seo: 1,
+	scheduled_publish: 1,
+	premium_default: 0,
+	accent_color: 'Ink blue',
+	display_typeface: 'serif',
+}
+
+function ToggleRow({
+	label,
+	desc,
+	value,
+	onChange,
+	disabled,
+}: {
+	label: string
+	desc?: string
+	value: boolean
+	onChange: (v: boolean) => void
+	disabled?: boolean
+}) {
+	return (
+		<div
+			style={{
+				display: 'flex',
+				alignItems: 'center',
+				gap: 14,
+				padding: '12px 0',
+				borderBottom: '1px solid var(--border-soft)',
+			}}
+		>
+			<div style={{ flex: 1 }}>
+				<div style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--ink)' }}>{label}</div>
+				{desc && (
+					<div style={{ fontSize: 12, color: 'var(--ink-muted)', marginTop: 2 }}>{desc}</div>
+				)}
+			</div>
+			<button
+				type="button"
+				onClick={() => !disabled && onChange(!value)}
+				style={{
+					width: 40,
+					height: 22,
+					borderRadius: 12,
+					border: 0,
+					background: value ? 'var(--accent)' : 'var(--hover)',
+					position: 'relative',
+					flex: 'none',
+					transition: 'background .2s',
+					cursor: disabled ? 'default' : 'pointer',
+					opacity: disabled ? 0.5 : 1,
+				}}
+			>
+				<span
+					style={{
+						position: 'absolute',
+						top: 2,
+						left: value ? 20 : 2,
+						width: 18,
+						height: 18,
+						borderRadius: '50%',
+						background: '#fff',
+						boxShadow: '0 1px 2px rgba(0,0,0,.3)',
+						transition: 'left .2s',
+					}}
+				/>
+			</button>
+		</div>
+	)
+}
+
+function GeneralSettings({
+	data,
+	canEdit,
+	onSave,
+	saving,
+}: {
+	data: WorkspaceSettingsData
+	canEdit: boolean
+	onSave: (patch: SettingsFormState) => Promise<void>
+	saving: boolean
+}) {
+	const [form, setForm] = useState<WorkspaceSettingsData>({ ...data })
+
+	// Keep local form in sync if parent data changes
+	useEffect(() => {
+		setForm({ ...data })
+	}, [data])
+
+	function setField(key: keyof WorkspaceSettingsData, value: unknown) {
+		if (!canEdit) return
+		setForm((f) => ({ ...f, [key]: value }))
+	}
+
+	async function handleSave() {
+		if (!canEdit || saving) return
+		const patch = buildSettingsPatch(form)
+		await onSave(patch)
+	}
+
+	function handleCancel() {
+		setForm({ ...data })
+	}
+
+	const footer = canEdit ? (
+		<>
+			<button type="button" className="btn sm" onClick={handleCancel} disabled={saving}>
+				Cancel
+			</button>
+			<button type="button" className="btn primary sm" onClick={handleSave} disabled={saving}>
+				{saving ? 'Saving…' : 'Save changes'}
+			</button>
+		</>
+	) : (
+		<span style={{ fontSize: 12, color: 'var(--ink-muted)' }}>
+			Settings editing is restricted to workspace owners.
+		</span>
+	)
+
+	return (
+		<>
+			<Card
+				kicker="Identity"
+				title="Publication"
+				desc="Identity shown across the site and in metadata."
+				foot={footer}
+			>
+				<Row label="Publication name">
+					<input
+						className="input"
+						value={form.publication_name ?? ''}
+						onChange={(e) => setField('publication_name', e.target.value)}
+						disabled={!canEdit}
+					/>
+				</Row>
+				<Row label="Tagline">
+					<input
+						className="input"
+						value={form.tagline ?? ''}
+						onChange={(e) => setField('tagline', e.target.value)}
+						disabled={!canEdit}
+					/>
+				</Row>
+				<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
+					<Row label="Primary language">
+						<select
+							className="selectbox"
+							value={form.language}
+							onChange={(e) => setField('language', e.target.value)}
+							disabled={!canEdit}
+						>
+							<option value="en">English</option>
+							<option value="en-GB">English (UK)</option>
+							<option value="en-US">English (US)</option>
+							<option value="fr">French</option>
+						</select>
+					</Row>
+					<Row label="Timezone">
+						<select
+							className="selectbox"
+							value={form.timezone}
+							onChange={(e) => setField('timezone', e.target.value)}
+							disabled={!canEdit}
+						>
+							<option value="Europe/Paris">Europe/Paris (CET)</option>
+							<option value="Europe/London">Europe/London (GMT)</option>
+							<option value="America/New_York">America/New_York (ET)</option>
+							<option value="America/Los_Angeles">America/Los_Angeles (PT)</option>
+							<option value="UTC">UTC</option>
+						</select>
+					</Row>
+				</div>
+			</Card>
+			<Card
+				kicker="Defaults"
+				title="Publishing defaults"
+				desc="Applied to new content unless overridden."
+			>
+				<div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+					<ToggleRow
+						label="Require editorial review before publish"
+						desc="New drafts must pass through the review column."
+						value={form.require_review === 1}
+						onChange={(v) => setField('require_review', v ? 1 : 0)}
+						disabled={!canEdit}
+					/>
+					<ToggleRow
+						label="Auto-generate SEO metadata"
+						desc="Draft meta title, description and OG image on save."
+						value={form.auto_seo === 1}
+						onChange={(v) => setField('auto_seo', v ? 1 : 0)}
+						disabled={!canEdit}
+					/>
+					<ToggleRow
+						label="Enable scheduled publishing"
+						desc="Allow content to auto-publish at a set time."
+						value={form.scheduled_publish === 1}
+						onChange={(v) => setField('scheduled_publish', v ? 1 : 0)}
+						disabled={!canEdit}
+					/>
+					<ToggleRow
+						label="New articles are premium by default"
+						value={form.premium_default === 1}
+						onChange={(v) => setField('premium_default', v ? 1 : 0)}
+						disabled={!canEdit}
+					/>
+				</div>
+			</Card>
+		</>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// Branding settings
+// ---------------------------------------------------------------------------
+
+const ACCENT_PRESETS = ['#0c4a6e', '#b23a2e', '#1f6b4a', '#5b4bc4', '#374151']
+const TYPEFACE_OPTIONS = ['serif', 'Source Serif 4', 'Spectral', 'Newsreader', 'Inter']
+
+function BrandingSettings({
+	data,
+	canEdit,
+	onSave,
+	saving,
+}: {
+	data: WorkspaceSettingsData
+	canEdit: boolean
+	onSave: (patch: SettingsFormState) => Promise<void>
+	saving: boolean
+}) {
+	const [accent, setAccent] = useState(data.accent_color ?? ACCENT_PRESETS[0])
+	const [typeface, setTypeface] = useState(data.display_typeface ?? 'serif')
+
+	useEffect(() => {
+		setAccent(data.accent_color ?? ACCENT_PRESETS[0])
+		setTypeface(data.display_typeface ?? 'serif')
+	}, [data])
+
+	async function handleSaveTheme() {
+		if (!canEdit || saving) return
+		await onSave({ accent_color: accent, display_typeface: typeface })
+	}
+
+	const themeFooter = canEdit ? (
+		<button type="button" className="btn primary sm" onClick={handleSaveTheme} disabled={saving}>
+			{saving ? 'Saving…' : 'Save theme'}
+		</button>
+	) : (
+		<span style={{ fontSize: 12, color: 'var(--ink-muted)' }}>
+			Branding editing is restricted to workspace owners.
+		</span>
+	)
+
+	return (
+		<>
+			<Card
+				kicker="Brand"
+				title="Logo & mark"
+				desc="Shown in the CMS sidebar and the published site header."
+			>
+				<div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
+					<div
+						style={{
+							width: 56,
+							height: 56,
+							borderRadius: 12,
+							background: 'var(--ink)',
+							display: 'grid',
+							placeItems: 'center',
+							flex: 'none',
+						}}
+					>
+						<Icon name="settings" size={28} style={{ color: '#fff' }} />
+					</div>
+					{canEdit ? (
+						<>
+							<button type="button" className="btn sm">
+								<Icon name="upload" size={14} /> Upload logo
+							</button>
+							<button type="button" className="btn ghost sm">
+								Reset
+							</button>
+						</>
+					) : (
+						<span style={{ fontSize: 12, color: 'var(--ink-muted)' }}>
+							Logo editing is restricted to workspace owners.
+						</span>
+					)}
+				</div>
+			</Card>
+			<Card
+				kicker="Appearance"
+				title="Theme"
+				desc="Per-site accent and typography. Each site in your workspace keeps its own."
+				foot={themeFooter}
+			>
+				<Row label="Accent color">
+					<div style={{ display: 'flex', gap: 10 }}>
+						{ACCENT_PRESETS.map((c) => (
+							<button
+								type="button"
+								key={c}
+								onClick={() => canEdit && setAccent(c)}
+								style={{
+									width: 34,
+									height: 34,
+									borderRadius: 8,
+									background: c,
+									cursor: canEdit ? 'pointer' : 'default',
+									outline: accent === c ? '2px solid var(--accent)' : 'none',
+									outlineOffset: 2,
+									border: 0,
+									opacity: canEdit ? 1 : 0.6,
+								}}
+							/>
+						))}
+					</div>
+				</Row>
+				<Row label="Display typeface" help="The serif used for headlines on the public site.">
+					<select
+						className="selectbox"
+						value={typeface}
+						onChange={(e) => canEdit && setTypeface(e.target.value)}
+						disabled={!canEdit}
+					>
+						{TYPEFACE_OPTIONS.map((t) => (
+							<option key={t} value={t}>
+								{t}
+							</option>
+						))}
+					</select>
+				</Row>
+			</Card>
+		</>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// Team settings (Roles & Team)
+// ---------------------------------------------------------------------------
+
+interface TeamState {
+	loading: boolean
+	error: string | null
+	members: MemberRowView[]
+}
+
+type TeamAction =
+	| { type: 'fetch-start' }
+	| { type: 'fetch-ok'; members: MemberRowView[] }
+	| { type: 'fetch-error'; error: string }
+	| { type: 'update-role'; userId: string; role: string }
+
+function teamReducer(state: TeamState, action: TeamAction): TeamState {
+	switch (action.type) {
+		case 'fetch-start':
+			return { ...state, loading: true, error: null }
+		case 'fetch-ok':
+			return { loading: false, error: null, members: action.members }
+		case 'fetch-error':
+			return { loading: false, error: action.error, members: [] }
+		case 'update-role':
+			return {
+				...state,
+				members: state.members.map((m) =>
+					m.userId === action.userId ? { ...m, role: action.role as MemberRowView['role'] } : m,
+				),
+			}
+		default:
+			return state
+	}
+}
+
+function TeamSettings({ currentSubject }: { currentSubject: string | null }) {
+	const [state, dispatch] = useReducer(teamReducer, {
+		loading: true,
+		error: null,
+		members: [],
+	})
+	const [inviteEmail, setInviteEmail] = useState('')
+	const [inviteRole, setInviteRole] = useState<string>('editor')
+	const [inviting, setInviting] = useState(false)
+	const [inviteError, setInviteError] = useState<string | null>(null)
+	const [inviteSuccess, setInviteSuccess] = useState<string | null>(null)
+	const [showInviteForm, setShowInviteForm] = useState(false)
+	const [roleChanging, setRoleChanging] = useState<string | null>(null)
+
+	const fetchMembers = useCallback(async () => {
+		dispatch({ type: 'fetch-start' })
+		try {
+			const res = await fetch('/admin/api/settings/members')
+			if (!res.ok) {
+				const body = (await res.json().catch(() => ({}))) as { error?: string }
+				dispatch({ type: 'fetch-error', error: body.error ?? `HTTP ${res.status}` })
+				return
+			}
+			const body = (await res.json()) as {
+				members: Array<{
+					userId: string
+					role: string
+					email: string
+					name: string | null
+					image: string | null
+					acceptedAt: number | null
+					createdAt: number
+				}>
+			}
+			const views = (body.members ?? []).map((m) =>
+				memberRowView(
+					{
+						userId: m.userId,
+						role: m.role as MemberRowView['role'],
+						email: m.email,
+						name: m.name,
+						image: m.image,
+						acceptedAt: m.acceptedAt,
+						createdAt: m.createdAt,
+					},
+					currentSubject,
+				),
+			)
+			dispatch({ type: 'fetch-ok', members: views })
+		} catch (err) {
+			dispatch({ type: 'fetch-error', error: String(err) })
+		}
+	}, [currentSubject])
+
+	useEffect(() => {
+		fetchMembers().catch(() => {})
+	}, [fetchMembers])
+
+	async function handleRoleChange(userId: string, newRole: string) {
+		setRoleChanging(userId)
+		try {
+			const res = await fetch(`/admin/api/settings/members/${encodeURIComponent(userId)}`, {
+				method: 'PATCH',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({ role: newRole }),
+			})
+			if (!res.ok) {
+				const body = (await res.json().catch(() => ({}))) as { error?: string; reason?: string }
+				alert(body.reason ?? body.error ?? `Failed to change role (HTTP ${res.status})`)
+				return
+			}
+			dispatch({ type: 'update-role', userId, role: newRole })
+		} catch (err) {
+			alert(String(err))
+		} finally {
+			setRoleChanging(null)
+		}
+	}
+
+	async function handleInvite(e: React.FormEvent) {
+		e.preventDefault()
+		if (!inviteEmail.trim()) return
+		setInviting(true)
+		setInviteError(null)
+		setInviteSuccess(null)
+		try {
+			const res = await fetch('/admin/api/settings/members/invite', {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({ email: inviteEmail.trim(), role: inviteRole }),
+			})
+			const body = (await res.json().catch(() => ({}))) as {
+				ok?: boolean
+				token?: string
+				error?: string
+			}
+			if (!res.ok) {
+				setInviteError(body.error ?? `HTTP ${res.status}`)
+				return
+			}
+			setInviteSuccess(
+				body.token
+					? `Invite sent. Accept link: /invite/accept?token=${body.token}`
+					: 'Invite created. Share the accept link with the invitee.',
+			)
+			setInviteEmail('')
+			setShowInviteForm(false)
+		} catch (err) {
+			setInviteError(String(err))
+		} finally {
+			setInviting(false)
+		}
+	}
+
+	const roles = roleOptions()
+
+	const foot = (
+		<button type="button" className="btn primary sm" onClick={() => setShowInviteForm((v) => !v)}>
+			<Icon name="plus" size={14} /> Invite member
+		</button>
+	)
+
+	return (
+		<Card
+			kicker="Access"
+			title="Team"
+			desc="People with access to this workspace and their roles."
+			foot={foot}
+			noRule
+		>
+			{state.loading && (
+				<div style={{ padding: 16, color: 'var(--ink-muted)', fontSize: 13 }}>Loading members…</div>
+			)}
+			{state.error && !state.loading && (
+				<div style={{ padding: 16, color: 'var(--red)', fontSize: 13 }}>
+					Failed to load members: {state.error}
+				</div>
+			)}
+			{!state.loading && !state.error && state.members.length === 0 && (
+				<div style={{ padding: 16, color: 'var(--ink-muted)', fontSize: 13 }}>No members yet.</div>
+			)}
+			{!state.loading && !state.error && state.members.length > 0 && (
+				<table className="tbl">
+					<thead>
+						<tr>
+							<th>Member</th>
+							<th>Email</th>
+							<th style={{ width: 170 }}>Role</th>
+						</tr>
+					</thead>
+					<tbody>
+						{state.members.map((m) => (
+							<tr key={m.userId}>
+								<td>
+									<div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
+										<div
+											className="avatar"
+											style={{
+												background: 'var(--accent-tint)',
+												width: 30,
+												height: 30,
+												fontSize: 11,
+												color: 'var(--accent)',
+											}}
+										>
+											{(m.name ?? m.email)[0]?.toUpperCase() ?? '?'}
+										</div>
+										<span style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink)' }}>
+											{m.name ?? m.email}
+											{m.isSelf && (
+												<span style={{ fontSize: 11, color: 'var(--ink-muted)', marginLeft: 6 }}>
+													(you)
+												</span>
+											)}
+										</span>
+									</div>
+								</td>
+								<td style={{ fontSize: 12.5, color: 'var(--ink-muted)' }}>{m.email}</td>
+								<td>
+									<select
+										className="selectbox"
+										value={m.role}
+										onChange={(e) => handleRoleChange(m.userId, e.target.value)}
+										disabled={roleChanging === m.userId || m.isSelf}
+										style={{ width: 150, fontSize: 12.5, padding: '7px 10px' }}
+									>
+										{roles.map((r) => (
+											<option key={r.value} value={r.value}>
+												{r.label}
+											</option>
+										))}
+									</select>
+								</td>
+							</tr>
+						))}
+					</tbody>
+				</table>
+			)}
+
+			{/* Invite form */}
+			{showInviteForm && (
+				<form onSubmit={handleInvite} className="panel panel-pad" style={{ marginTop: 16 }}>
+					<div className="kicker" style={{ marginBottom: 10 }}>
+						Invite a member
+					</div>
+					<div
+						style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 8, marginBottom: 8 }}
+					>
+						<input
+							type="email"
+							className="input"
+							placeholder="Email address"
+							value={inviteEmail}
+							onChange={(e) => setInviteEmail(e.target.value)}
+							required
+						/>
+						<select
+							className="selectbox"
+							value={inviteRole}
+							onChange={(e) => setInviteRole(e.target.value)}
+							style={{ width: 150 }}
+						>
+							{roles.map((r) => (
+								<option key={r.value} value={r.value}>
+									{r.label}
+								</option>
+							))}
+						</select>
+					</div>
+					<div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
+						<button
+							type="button"
+							className="btn sm"
+							onClick={() => {
+								setShowInviteForm(false)
+								setInviteError(null)
+							}}
+						>
+							Cancel
+						</button>
+						<button type="submit" className="btn primary sm" disabled={inviting}>
+							{inviting ? 'Inviting…' : 'Send invite'}
+						</button>
+					</div>
+					{inviteError && (
+						<div style={{ marginTop: 8, fontSize: 12, color: 'var(--red)' }}>{inviteError}</div>
+					)}
+					{inviteSuccess && (
+						<div className="mono" style={{ marginTop: 8, fontSize: 12, color: 'var(--green)' }}>
+							{inviteSuccess}
+						</div>
+					)}
+				</form>
+			)}
+		</Card>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// API keys settings
+// ---------------------------------------------------------------------------
+
+interface ApiKeysState {
+	loading: boolean
+	error: string | null
+	keys: ApiKeyListEntry[]
+}
+
+type ApiKeysAction =
+	| { type: 'fetch-start' }
+	| { type: 'fetch-ok'; keys: ApiKeyListEntry[] }
+	| { type: 'fetch-error'; error: string }
+	| { type: 'revoked'; id: string }
+
+function apiKeysReducer(state: ApiKeysState, action: ApiKeysAction): ApiKeysState {
+	switch (action.type) {
+		case 'fetch-start':
+			return { ...state, loading: true, error: null }
+		case 'fetch-ok':
+			return { loading: false, error: null, keys: action.keys }
+		case 'fetch-error':
+			return { loading: false, error: action.error, keys: [] }
+		case 'revoked':
+			return { ...state, keys: state.keys.filter((k) => k.id !== action.id) }
+		default:
+			return state
+	}
+}
+
+/** One-time reveal modal shown after key creation. */
+function KeyRevealModal({ rawKey, onDone }: { rawKey: string; onDone: () => void }) {
+	const [copied, setCopied] = useState(false)
+
+	function handleCopy() {
+		void navigator.clipboard.writeText(rawKey).then(() => {
+			setCopied(true)
+		})
+	}
+
+	return (
+		<div className="scrim" style={{ placeItems: 'center' }}>
+			<div
+				className="panel"
+				style={{
+					padding: 28,
+					width: 480,
+					maxWidth: '90vw',
+					boxShadow: 'var(--shadow-lg)',
+				}}
+			>
+				<div className="kicker" style={{ marginBottom: 6 }}>
+					One-time reveal
+				</div>
+				<div className="card-title" style={{ marginBottom: 8 }}>
+					Your new API key
+				</div>
+				<div
+					style={{
+						fontSize: 12.5,
+						color: 'var(--red)',
+						marginBottom: 14,
+						fontWeight: 600,
+					}}
+				>
+					Copy this key now — it will not be shown again.
+				</div>
+				<div
+					className="mono"
+					style={{
+						background: 'var(--panel-2)',
+						border: '1px solid var(--border)',
+						borderRadius: 8,
+						padding: '11px 14px',
+						fontSize: 13,
+						wordBreak: 'break-all',
+						color: 'var(--ink)',
+						marginBottom: 14,
+					}}
+				>
+					{rawKey}
+				</div>
+				<div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
+					<button type="button" className="btn sm" onClick={handleCopy}>
+						<Icon name="copy" size={14} /> {copied ? 'Copied!' : 'Copy'}
+					</button>
+					<button type="button" className="btn primary sm" onClick={onDone}>
+						Done — I've saved this key
+					</button>
+				</div>
+			</div>
+		</div>
+	)
+}
+
+function ApiSettings() {
+	const [state, dispatch] = useReducer(apiKeysReducer, {
+		loading: true,
+		error: null,
+		keys: [],
+	})
+	const [showCreateForm, setShowCreateForm] = useState(false)
+	const [newKeyName, setNewKeyName] = useState('')
+	const [creating, setCreating] = useState(false)
+	const [createError, setCreateError] = useState<string | null>(null)
+	const [revealedKey, setRevealedKey] = useState<string | null>(null)
+	const [revoking, setRevoking] = useState<string | null>(null)
+
+	const fetchKeys = useCallback(async () => {
+		dispatch({ type: 'fetch-start' })
+		try {
+			const res = await fetch('/admin/api/settings/api-keys')
+			if (!res.ok) {
+				const body = (await res.json().catch(() => ({}))) as { error?: string }
+				dispatch({ type: 'fetch-error', error: body.error ?? `HTTP ${res.status}` })
+				return
+			}
+			const body = (await res.json()) as { apiKeys: ApiKeyListEntry[] }
+			dispatch({ type: 'fetch-ok', keys: body.apiKeys ?? [] })
+		} catch (err) {
+			dispatch({ type: 'fetch-error', error: String(err) })
+		}
+	}, [])
+
+	useEffect(() => {
+		fetchKeys().catch(() => {})
+	}, [fetchKeys])
+
+	async function handleCreate(e: React.FormEvent) {
+		e.preventDefault()
+		if (!newKeyName.trim()) return
+		setCreating(true)
+		setCreateError(null)
+		try {
+			const res = await fetch('/admin/api/settings/api-keys', {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({ name: newKeyName.trim(), scopes: [] }),
+			})
+			const body = (await res.json().catch(() => ({}))) as {
+				rawKey?: string
+				id?: string
+				masked?: string
+				error?: string
+			}
+			if (!res.ok) {
+				setCreateError(body.error ?? `HTTP ${res.status}`)
+				return
+			}
+			// Show the one-time reveal modal
+			if (body.rawKey) {
+				setRevealedKey(body.rawKey)
+			}
+			setNewKeyName('')
+			setShowCreateForm(false)
+			await fetchKeys()
+		} catch (err) {
+			setCreateError(String(err))
+		} finally {
+			setCreating(false)
+		}
+	}
+
+	async function handleRevoke(id: string) {
+		if (!confirm('Revoke this key? Any code using it will immediately lose access.')) return
+		setRevoking(id)
+		try {
+			const res = await fetch(`/admin/api/settings/api-keys/${encodeURIComponent(id)}`, {
+				method: 'DELETE',
+			})
+			if (res.ok) {
+				dispatch({ type: 'revoked', id })
+			} else {
+				const body = (await res.json().catch(() => ({}))) as { error?: string }
+				alert(body.error ?? `Failed to revoke (HTTP ${res.status})`)
+			}
+		} catch (err) {
+			alert(String(err))
+		} finally {
+			setRevoking(null)
+		}
+	}
+
+	const foot = (
+		<button type="button" className="btn primary sm" onClick={() => setShowCreateForm((v) => !v)}>
+			<Icon name="plus" size={14} /> New key
+		</button>
+	)
+
+	return (
+		<>
+			{revealedKey && <KeyRevealModal rawKey={revealedKey} onDone={() => setRevealedKey(null)} />}
+			<Card
+				kicker="Programmatic access"
+				title="API keys"
+				desc="Programmatic access to the content API."
+				foot={foot}
+				noRule
+			>
+				{state.loading && (
+					<div style={{ padding: 16, color: 'var(--ink-muted)', fontSize: 13 }}>
+						Loading API keys…
+					</div>
+				)}
+				{state.error && !state.loading && (
+					<div style={{ padding: 16, color: 'var(--red)', fontSize: 13 }}>
+						Failed to load keys: {state.error}
+					</div>
+				)}
+				{!state.loading && !state.error && state.keys.length === 0 && !showCreateForm && (
+					<div style={{ padding: '16px 0', color: 'var(--ink-muted)', fontSize: 13 }}>
+						No API keys yet. Create one to allow programmatic access.
+					</div>
+				)}
+				{!state.loading && !state.error && state.keys.length > 0 && (
+					<table className="tbl">
+						<thead>
+							<tr>
+								<th>Key</th>
+								<th>Scopes</th>
+								<th style={{ width: 110, textAlign: 'right' }} />
+							</tr>
+						</thead>
+						<tbody>
+							{state.keys.map((k) => (
+								<tr key={k.id}>
+									<td>
+										<div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
+											<Icon
+												name="command"
+												size={17}
+												style={{ color: 'var(--ink-muted)', flex: 'none' }}
+											/>
+											<div style={{ minWidth: 0 }}>
+												<div style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink)' }}>
+													{k.name}
+												</div>
+												<div className="mono" style={{ fontSize: 12, color: 'var(--ink-muted)' }}>
+													{maskApiKeyView(k)}
+												</div>
+											</div>
+										</div>
+									</td>
+									<td>
+										{k.scopes.length > 0 ? (
+											<span className="tag-chip">{k.scopes.join(', ')}</span>
+										) : (
+											<span className="mono" style={{ fontSize: 11.5, color: 'var(--ink-faint)' }}>
+												—
+											</span>
+										)}
+									</td>
+									<td style={{ textAlign: 'right' }}>
+										<button
+											type="button"
+											className="btn danger sm"
+											disabled={revoking === k.id}
+											onClick={() => handleRevoke(k.id)}
+										>
+											{revoking === k.id ? 'Revoking…' : 'Revoke'}
+										</button>
+									</td>
+								</tr>
+							))}
+						</tbody>
+					</table>
+				)}
+
+				{/* Create form */}
+				{showCreateForm && (
+					<form onSubmit={handleCreate} className="panel panel-pad" style={{ marginTop: 16 }}>
+						<div className="kicker" style={{ marginBottom: 10 }}>
+							Create API key
+						</div>
+						<input
+							type="text"
+							className="input"
+							placeholder="Key name (e.g. Production build)"
+							value={newKeyName}
+							onChange={(e) => setNewKeyName(e.target.value)}
+							required
+							style={{ marginBottom: 8 }}
+						/>
+						<div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
+							<button
+								type="button"
+								className="btn sm"
+								onClick={() => {
+									setShowCreateForm(false)
+									setCreateError(null)
+								}}
+							>
+								Cancel
+							</button>
+							<button type="submit" className="btn primary sm" disabled={creating}>
+								{creating ? 'Creating…' : 'Create key'}
+							</button>
+						</div>
+						{createError && (
+							<div style={{ marginTop: 8, fontSize: 12, color: 'var(--red)' }}>{createError}</div>
+						)}
+					</form>
+				)}
+			</Card>
+		</>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// Webhooks settings
+// ---------------------------------------------------------------------------
+
+interface WebhooksState {
+	loading: boolean
+	error: string | null
+	webhooks: WebhookRecord[]
+}
+
+type WebhooksAction =
+	| { type: 'fetch-start' }
+	| { type: 'fetch-ok'; webhooks: WebhookRecord[] }
+	| { type: 'fetch-error'; error: string }
+	| { type: 'deleted'; id: string }
+	| { type: 'update-status'; id: string; status: string }
+
+function webhooksReducer(state: WebhooksState, action: WebhooksAction): WebhooksState {
+	switch (action.type) {
+		case 'fetch-start':
+			return { ...state, loading: true, error: null }
+		case 'fetch-ok':
+			return { loading: false, error: null, webhooks: action.webhooks }
+		case 'fetch-error':
+			return { loading: false, error: action.error, webhooks: [] }
+		case 'deleted':
+			return { ...state, webhooks: state.webhooks.filter((w) => w.id !== action.id) }
+		case 'update-status':
+			return {
+				...state,
+				webhooks: state.webhooks.map((w) =>
+					w.id === action.id ? { ...w, lastStatus: action.status } : w,
+				),
+			}
+		default:
+			return state
+	}
+}
+
+function WebhooksSettings() {
+	const [state, dispatch] = useReducer(webhooksReducer, {
+		loading: true,
+		error: null,
+		webhooks: [],
+	})
+	const [showCreateForm, setShowCreateForm] = useState(false)
+	const [newEventType, setNewEventType] = useState<string>(WEBHOOK_EVENTS[0])
+	const [newUrl, setNewUrl] = useState('')
+	const [creating, setCreating] = useState(false)
+	const [createError, setCreateError] = useState<string | null>(null)
+	const [testing, setTesting] = useState<string | null>(null)
+	const [deleting, setDeleting] = useState<string | null>(null)
+
+	const fetchWebhooks = useCallback(async () => {
+		dispatch({ type: 'fetch-start' })
+		try {
+			const res = await fetch('/admin/api/settings/webhooks')
+			if (!res.ok) {
+				const body = (await res.json().catch(() => ({}))) as { error?: string }
+				dispatch({ type: 'fetch-error', error: body.error ?? `HTTP ${res.status}` })
+				return
+			}
+			const body = (await res.json()) as { webhooks: WebhookRecord[] }
+			dispatch({ type: 'fetch-ok', webhooks: body.webhooks ?? [] })
+		} catch (err) {
+			dispatch({ type: 'fetch-error', error: String(err) })
+		}
+	}, [])
+
+	useEffect(() => {
+		fetchWebhooks().catch(() => {})
+	}, [fetchWebhooks])
+
+	async function handleCreate(e: React.FormEvent) {
+		e.preventDefault()
+		if (!newUrl.trim()) return
+		setCreating(true)
+		setCreateError(null)
+		try {
+			const res = await fetch('/admin/api/settings/webhooks', {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({ eventType: newEventType, url: newUrl.trim() }),
+			})
+			const body = (await res.json().catch(() => ({}))) as { error?: string }
+			if (!res.ok) {
+				setCreateError(body.error ?? `HTTP ${res.status}`)
+				return
+			}
+			setNewUrl('')
+			setShowCreateForm(false)
+			await fetchWebhooks()
+		} catch (err) {
+			setCreateError(String(err))
+		} finally {
+			setCreating(false)
+		}
+	}
+
+	async function handleTest(id: string) {
+		setTesting(id)
+		try {
+			const res = await fetch(`/admin/api/settings/webhooks/${encodeURIComponent(id)}/test`, {
+				method: 'POST',
+			})
+			const body = (await res.json().catch(() => ({}))) as { error?: string }
+			if (!res.ok) {
+				alert(body.error ?? `Test failed (HTTP ${res.status})`)
+				return
+			}
+			dispatch({ type: 'update-status', id, status: 'test' })
+		} catch (err) {
+			alert(String(err))
+		} finally {
+			setTesting(null)
+		}
+	}
+
+	async function handleDelete(id: string) {
+		if (!confirm('Delete this webhook? It will stop receiving events.')) return
+		setDeleting(id)
+		try {
+			const res = await fetch(`/admin/api/settings/webhooks/${encodeURIComponent(id)}`, {
+				method: 'DELETE',
+			})
+			if (res.ok) {
+				dispatch({ type: 'deleted', id })
+			} else {
+				const body = (await res.json().catch(() => ({}))) as { error?: string }
+				alert(body.error ?? `Failed to delete (HTTP ${res.status})`)
+			}
+		} catch (err) {
+			alert(String(err))
+		} finally {
+			setDeleting(null)
+		}
+	}
+
+	const eventOptions = webhookEventOptions()
+
+	const foot = (
+		<button type="button" className="btn primary sm" onClick={() => setShowCreateForm((v) => !v)}>
+			<Icon name="plus" size={14} /> Add webhook
+		</button>
+	)
+
+	return (
+		<Card
+			kicker="Event hooks"
+			title="Webhooks"
+			desc="Fired when content changes — used by Foundry and the build pipeline."
+			foot={foot}
+			noRule
+		>
+			{state.loading && (
+				<div style={{ padding: 16, color: 'var(--ink-muted)', fontSize: 13 }}>
+					Loading webhooks…
+				</div>
+			)}
+			{state.error && !state.loading && (
+				<div style={{ padding: 16, color: 'var(--red)', fontSize: 13 }}>
+					Failed to load webhooks: {state.error}
+				</div>
+			)}
+			{!state.loading && !state.error && state.webhooks.length === 0 && !showCreateForm && (
+				<div style={{ padding: '16px 0', color: 'var(--ink-muted)', fontSize: 13 }}>
+					No webhooks registered yet.
+				</div>
+			)}
+			{!state.loading && !state.error && state.webhooks.length > 0 && (
+				<table className="tbl">
+					<thead>
+						<tr>
+							<th style={{ width: 180 }}>Event</th>
+							<th>Endpoint</th>
+							<th style={{ width: 90 }}>Last</th>
+							<th style={{ width: 130, textAlign: 'right' }} />
+						</tr>
+					</thead>
+					<tbody>
+						{state.webhooks.map((w) => (
+							<tr key={w.id}>
+								<td>
+									<span
+										className="pill scheduled"
+										style={{ background: 'var(--blue-tint)', fontSize: 11.5 }}
+									>
+										{w.eventType}
+									</span>
+								</td>
+								<td
+									className="mono"
+									style={{
+										fontSize: 12,
+										color: 'var(--ink-muted)',
+										maxWidth: 0,
+										whiteSpace: 'nowrap',
+										overflow: 'hidden',
+										textOverflow: 'ellipsis',
+									}}
+								>
+									{w.url}
+								</td>
+								<td>
+									{w.lastStatus ? (
+										<span
+											style={{
+												display: 'inline-flex',
+												alignItems: 'center',
+												gap: 5,
+												fontSize: 11.5,
+												color: w.lastStatus === 'test' ? 'var(--ink-muted)' : 'var(--green)',
+											}}
+										>
+											<Icon name="checkCircle" size={13} /> {w.lastStatus}
+										</span>
+									) : (
+										<span className="mono" style={{ fontSize: 11.5, color: 'var(--ink-faint)' }}>
+											—
+										</span>
+									)}
+								</td>
+								<td style={{ textAlign: 'right' }}>
+									<div
+										style={{
+											display: 'inline-flex',
+											alignItems: 'center',
+											gap: 6,
+											justifyContent: 'flex-end',
+										}}
+									>
+										<button
+											type="button"
+											className="btn ghost sm"
+											disabled={testing === w.id}
+											onClick={() => handleTest(w.id)}
+											style={{ fontSize: 12 }}
+										>
+											{testing === w.id ? 'Testing…' : 'Test'}
+										</button>
+										<button
+											type="button"
+											className="icon-btn"
+											disabled={deleting === w.id}
+											onClick={() => handleDelete(w.id)}
+											title="Delete webhook"
+										>
+											<Icon name="trash" size={15} />
+										</button>
+									</div>
+								</td>
+							</tr>
+						))}
+					</tbody>
+				</table>
+			)}
+
+			{/* Create form */}
+			{showCreateForm && (
+				<form onSubmit={handleCreate} className="panel panel-pad" style={{ marginTop: 16 }}>
+					<div className="kicker" style={{ marginBottom: 10 }}>
+						Add webhook
+					</div>
+					<div style={{ marginBottom: 8 }}>
+						<label>
+							<span className="field-label">Event</span>
+							<select
+								className="selectbox"
+								value={newEventType}
+								onChange={(e) => setNewEventType(e.target.value)}
+							>
+								{eventOptions.map((opt) => (
+									<option key={opt.value} value={opt.value}>
+										{opt.label}
+									</option>
+								))}
+							</select>
+						</label>
+					</div>
+					<div style={{ marginBottom: 8 }}>
+						<label>
+							<span className="field-label">Endpoint URL</span>
+							<input
+								type="url"
+								className="input"
+								placeholder="https://your-endpoint.example.com/hook"
+								value={newUrl}
+								onChange={(e) => setNewUrl(e.target.value)}
+								required
+							/>
+						</label>
+					</div>
+					<div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
+						<button
+							type="button"
+							className="btn sm"
+							onClick={() => {
+								setShowCreateForm(false)
+								setCreateError(null)
+							}}
+						>
+							Cancel
+						</button>
+						<button type="submit" className="btn primary sm" disabled={creating}>
+							{creating ? 'Adding…' : 'Add webhook'}
+						</button>
+					</div>
+					{createError && (
+						<div style={{ marginTop: 8, fontSize: 12, color: 'var(--red)' }}>{createError}</div>
+					)}
+				</form>
+			)}
+		</Card>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// Integrations settings (read-only — no connect/disconnect mutation in P7)
+// ---------------------------------------------------------------------------
+
+interface IntegrationEntry {
+	name: string
+	desc: string
+	icon: Parameters<typeof Icon>[0]['name']
+	providerKey: string
+}
+
+const INTEGRATION_DEFS: IntegrationEntry[] = [
+	{
+		name: 'Cloudflare R2',
+		desc: 'Object storage for media originals',
+		icon: 'media',
+		providerKey: 'r2',
+	},
+	{
+		name: 'Foundry',
+		desc: 'Video & audio processing pipeline',
+		icon: 'bolt',
+		providerKey: 'foundry',
+	},
+	{
+		name: 'LemonSqueezy',
+		desc: 'Subscriptions, billing & checkout',
+		icon: 'inbox',
+		providerKey: 'lemonsqueezy',
+	},
+	{
+		name: 'Customer.io',
+		desc: 'Newsletter & lifecycle email',
+		icon: 'mail',
+		providerKey: 'customerio',
+	},
+	{
+		name: 'Cloudflare Search',
+		desc: 'Full-text content index',
+		icon: 'search',
+		providerKey: 'search',
+	},
+	{
+		name: 'Web Push',
+		desc: 'Browser breaking-news alerts',
+		icon: 'bell',
+		providerKey: 'webpush',
+	},
+]
+
+interface IntegrationsData {
+	integrations: Record<string, { status: string; detail?: string } | null>
+}
+
+function IntegrationsSettings() {
+	const [data, setData] = useState<IntegrationsData | null>(null)
+	const [loading, setLoading] = useState(true)
+	const [error, setError] = useState<string | null>(null)
+
+	useEffect(() => {
+		setLoading(true)
+		setError(null)
+		fetch('/admin/api/settings/integrations')
+			.then(async (res) => {
+				if (!res.ok) {
+					const body = (await res.json().catch(() => ({}))) as { error?: string }
+					setError(body.error ?? `HTTP ${res.status}`)
+					return
+				}
+				const body = (await res.json()) as IntegrationsData
+				setData(body)
+			})
+			.catch((err: unknown) => {
+				setError(String(err))
+			})
+			.finally(() => setLoading(false))
+	}, [])
+
+	return (
+		<Card
+			kicker="Connected services"
+			title="Integrations"
+			desc="Services connected to this workspace."
+		>
+			{loading && (
+				<div style={{ padding: 16, color: 'var(--ink-muted)', fontSize: 13 }}>
+					Loading integrations…
+				</div>
+			)}
+			{error && !loading && (
+				<div style={{ padding: 16, color: 'var(--red)', fontSize: 13 }}>
+					Failed to load integrations: {error}
+				</div>
+			)}
+			{!loading && !error && (
+				<div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+					{INTEGRATION_DEFS.map((it) => {
+						const raw = data?.integrations?.[it.providerKey] ?? null
+						const view = integrationStatusView(raw)
+						return (
+							<div
+								key={it.name}
+								style={{
+									display: 'flex',
+									alignItems: 'center',
+									gap: 13,
+									padding: '13px 14px',
+									border: '1px solid var(--border)',
+									borderRadius: 10,
+									background: 'var(--panel-2)',
+								}}
+							>
+								<div
+									style={{
+										width: 38,
+										height: 38,
+										borderRadius: 9,
+										background: 'var(--hover)',
+										color: 'var(--ink-soft)',
+										display: 'grid',
+										placeItems: 'center',
+										flex: 'none',
+									}}
+								>
+									<Icon name={it.icon} size={19} />
+								</div>
+								<div style={{ flex: 1, minWidth: 0 }}>
+									<div style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--ink)' }}>
+										{it.name}
+									</div>
+									<div style={{ fontSize: 12, color: 'var(--ink-muted)' }}>{it.desc}</div>
+								</div>
+								<div style={{ textAlign: 'right' }}>
+									{view.connected ? (
+										<span className="pill published">
+											<span className="pdot" />
+											{view.label}
+										</span>
+									) : (
+										<span className="pill draft">{view.label}</span>
+									)}
+									{view.detail && (
+										<div
+											className="mono"
+											style={{ fontSize: 10.5, color: 'var(--ink-faint)', marginTop: 4 }}
+										>
+											{view.detail}
+										</div>
+									)}
+								</div>
+							</div>
+						)
+					})}
+				</div>
+			)}
+		</Card>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// Domains settings (read-only — managed via Cloudflare, no mutation in P7)
+// ---------------------------------------------------------------------------
+
+interface DomainEntry {
+	domain: string
+	role?: string
+	sslActive?: boolean
+}
+
+interface DomainsData {
+	domains: DomainEntry[]
+}
+
+function DomainsSettings() {
+	const [data, setData] = useState<DomainsData | null>(null)
+	const [loading, setLoading] = useState(true)
+	const [error, setError] = useState<string | null>(null)
+
+	useEffect(() => {
+		setLoading(true)
+		setError(null)
+		fetch('/admin/api/settings/domains')
+			.then(async (res) => {
+				if (!res.ok) {
+					const body = (await res.json().catch(() => ({}))) as { error?: string }
+					setError(body.error ?? `HTTP ${res.status}`)
+					return
+				}
+				const body = (await res.json()) as DomainsData
+				setData(body)
+			})
+			.catch((err: unknown) => {
+				setError(String(err))
+			})
+			.finally(() => setLoading(false))
+	}, [])
+
+	const domainRows = (data?.domains ?? []).map((d) => domainRowView(d))
+
+	return (
+		<Card
+			kicker="Delivery"
+			title="Domains"
+			desc="Where this site is served. Managed via Cloudflare."
+			noRule
+		>
+			{loading && (
+				<div style={{ padding: 16, color: 'var(--ink-muted)', fontSize: 13 }}>Loading domains…</div>
+			)}
+			{error && !loading && (
+				<div style={{ padding: 16, color: 'var(--red)', fontSize: 13 }}>
+					Failed to load domains: {error}
+				</div>
+			)}
+			{!loading && !error && domainRows.length === 0 && (
+				<div style={{ padding: '16px 0', color: 'var(--ink-muted)', fontSize: 13 }}>
+					No domains configured. Domains are managed via the Cloudflare dashboard.
+				</div>
+			)}
+			{!loading && !error && domainRows.length > 0 && (
+				<table className="tbl">
+					<thead>
+						<tr>
+							<th>Domain</th>
+							<th>Role</th>
+							<th style={{ width: 130, textAlign: 'right' }}>SSL</th>
+						</tr>
+					</thead>
+					<tbody>
+						{domainRows.map((d) => (
+							<tr key={d.domain}>
+								<td>
+									<div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
+										<Icon
+											name="globe"
+											size={17}
+											style={{ color: 'var(--ink-muted)', flex: 'none' }}
+										/>
+										<span style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink)' }}>
+											{d.domain}
+										</span>
+									</div>
+								</td>
+								<td style={{ fontSize: 12.5, color: 'var(--ink-muted)' }}>{d.role || '—'}</td>
+								<td style={{ textAlign: 'right' }}>
+									{d.sslActive ? (
+										<span className="pill published">
+											<span className="pdot" />
+											SSL active
+										</span>
+									) : (
+										<span className="pill draft">No SSL</span>
+									)}
+								</td>
+							</tr>
+						))}
+					</tbody>
+				</table>
+			)}
+		</Card>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// SettingsScreen — top-level screen component
+// ---------------------------------------------------------------------------
+
+export function SettingsScreen() {
+	const { state } = useWorkspace()
+	const [tab, setTab] = useState<SettingsTab>('general')
+	const [settingsData, setSettingsData] = useState<WorkspaceSettingsData | null>(null)
+	const [settingsLoading, setSettingsLoading] = useState(true)
+	const [settingsError, setSettingsError] = useState<string | null>(null)
+	const [saving, setSaving] = useState(false)
+
+	const currentSubject = state.user?.subject ?? null
+	const currentRole = state.user?.role ?? null
+	const editable = canEditSettings(currentRole)
+
+	// Fetch workspace settings on mount
+	const fetchSettings = useCallback(async () => {
+		setSettingsLoading(true)
+		setSettingsError(null)
+		try {
+			const res = await fetch('/admin/api/workspace-settings')
+			if (!res.ok) {
+				setSettingsError(`Failed to load settings (HTTP ${res.status})`)
+				return
+			}
+			const body = (await res.json()) as { status: string; data: WorkspaceSettingsData }
+			setSettingsData({ ...SETTINGS_DEFAULTS, ...(body.data ?? {}) })
+		} catch (err) {
+			setSettingsError(String(err))
+		} finally {
+			setSettingsLoading(false)
+		}
+	}, [])
+
+	useEffect(() => {
+		fetchSettings().catch(() => {})
+	}, [fetchSettings])
+
+	async function handleSave(patch: SettingsFormState) {
+		if (!editable) return
+		setSaving(true)
+		try {
+			const res = await fetch('/admin/api/workspace-settings', {
+				method: 'PATCH',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify(patch),
+			})
+			if (!res.ok) {
+				const body = (await res.json().catch(() => ({}))) as { error?: string }
+				alert(body.error ?? `Failed to save settings (HTTP ${res.status})`)
+				return
+			}
+			// Re-fetch to ensure the UI is in sync with server state
+			await fetchSettings()
+		} finally {
+			setSaving(false)
+		}
+	}
+
+	const data = settingsData ?? SETTINGS_DEFAULTS
+
+	return (
+		<div className="page page-wide fade-in" style={{ maxWidth: 1180 }}>
+			<div className="page-head">
+				<div>
+					<h1 className="page-title">Settings</h1>
+					<div className="page-sub">
+						Workspace configuration for {data.publication_name ?? 'this publication'}.
+					</div>
+				</div>
+			</div>
+
+			{settingsError && !settingsLoading && (
+				<div
+					className="panel"
+					style={{
+						padding: '10px 14px',
+						marginBottom: 'var(--gap)',
+						background: 'var(--red-tint)',
+						borderColor: 'var(--red)',
+						fontSize: 13,
+						color: 'var(--red)',
+					}}
+				>
+					{settingsError}
+				</div>
+			)}
+
+			<div
+				style={{
+					display: 'grid',
+					gridTemplateColumns: '208px 1fr',
+					gap: 'var(--gap)',
+					alignItems: 'start',
+				}}
+			>
+				{/* Left-rail navigation */}
+				<div className="panel" style={{ padding: 8, position: 'sticky', top: 0 }}>
+					{TABS.map((t) => (
+						<button
+							key={t.id}
+							type="button"
+							className={`nav-item${tab === t.id ? ' active' : ''}`}
+							style={{
+								width: '100%',
+								textAlign: 'left',
+								border: 0,
+								background: 'transparent',
+							}}
+							onClick={() => setTab(t.id)}
+						>
+							<Icon name={t.icon} size={17} className="ni-icon" />
+							<span className="ni-label">{t.label}</span>
+						</button>
+					))}
+				</div>
+
+				{/* Tab content */}
+				<div className="fade-only" key={tab}>
+					{settingsLoading && (tab === 'general' || tab === 'branding') ? (
+						<div style={{ padding: 32, color: 'var(--ink-muted)', fontSize: 13 }}>
+							Loading settings…
+						</div>
+					) : (
+						<>
+							{tab === 'general' && (
+								<GeneralSettings
+									data={data}
+									canEdit={editable}
+									onSave={handleSave}
+									saving={saving}
+								/>
+							)}
+							{tab === 'branding' && (
+								<BrandingSettings
+									data={data}
+									canEdit={editable}
+									onSave={handleSave}
+									saving={saving}
+								/>
+							)}
+							{tab === 'team' && <TeamSettings currentSubject={currentSubject} />}
+							{tab === 'integrations' && <IntegrationsSettings />}
+							{tab === 'domains' && <DomainsSettings />}
+							{tab === 'api' && (
+								<>
+									<ApiSettings />
+									<WebhooksSettings />
+								</>
+							)}
+						</>
+					)}
+				</div>
+			</div>
+		</div>
+	)
+}
+
+// Re-export roleLabel so callers importing from SettingsScreen.tsx can use it
+export { roleLabel }