fix: address all code review findings

- Extract shared permission logic into boardPermissions.ts utility
- Fix DnD drag revert: add dirty flag to prevent  overwrite
- Wrap OAuth group sync in Prisma transaction (N+1 fix)
- Add empty widgetIds validation in widget reorder API
- Add invalidateAll() after guest toggle PATCH
- Replace console.error with user-visible error banners
- Extract WidgetCreationForm component (DraggableSection was 448 lines)
- Remove unused boardId prop from DraggableSection
- Always include OAuth state parameter + validate in callback
- Clean up copyLink timer on component destroy
- Add type-specific widget config validation in addWidget action

src/lib/components/board/BoardAccessControl.svelte

@@ -1,21 +1,14 @@
 <script lang="ts">
 	import { t } from 'svelte-i18n';
 	import { TargetType, PermissionLevel } from '$lib/utils/constants.js';
-
+	import {
-	interface PermissionRecord {
+		loadBoardPermissions,
-		id: string;
+		grantBoardPermission,
-		entityType: string;
+		revokeBoardPermission,
-		entityId: string;
+		getTargetName as resolveTargetName,
-		targetType: string;
+		type PermissionRecord,
-		targetId: string;
+		type SelectOption
-		level: string;
+	} from '$lib/utils/boardPermissions.js';
-		createdAt: string;
-	}
-
-	interface SelectOption {
-		id: string;
-		name: string;
-	}
 
 	interface Props {
 		boardId: string;
@@ -50,15 +43,9 @@
 		loading = true;
 		errorMessage = '';
 		try {
-			const res = await fetch(`/api/boards/${boardId}/permissions`);
+			permissions = await loadBoardPermissions(boardId);
-			const json = await res.json();
+		} catch (err) {
-			if (json.success) {
+			errorMessage = err instanceof Error ? err.message : 'Network error';
-				permissions = json.data;
-			} else {
-				errorMessage = json.error ?? 'Failed to load permissions';
-			}
-		} catch {
-			errorMessage = 'Network error';
 		} finally {
 			loading = false;
 		}
@@ -68,53 +55,27 @@
 		if (!selectedTargetId) return;
 		errorMessage = '';
 		try {
-			const res = await fetch(`/api/boards/${boardId}/permissions`, {
+			await grantBoardPermission(boardId, selectedTargetType, selectedTargetId, selectedLevel);
-				method: 'POST',
-				headers: { 'Content-Type': 'application/json' },
-				body: JSON.stringify({
-					targetType: selectedTargetType,
-					targetId: selectedTargetId,
-					level: selectedLevel
-				})
-			});
-			const json = await res.json();
-			if (json.success) {
 			selectedTargetId = '';
 			searchQuery = '';
 			await loadPermissions();
-			} else {
+		} catch (err) {
-				errorMessage = json.error ?? 'Failed to grant permission';
+			errorMessage = err instanceof Error ? err.message : 'Network error';
-			}
-		} catch {
-			errorMessage = 'Network error';
 		}
 	}
 
 	async function handleRevoke(perm: PermissionRecord) {
 		errorMessage = '';
 		try {
-			const res = await fetch(`/api/boards/${boardId}/permissions`, {
+			await revokeBoardPermission(boardId, perm.targetType, perm.targetId);
-				method: 'DELETE',
-				headers: { 'Content-Type': 'application/json' },
-				body: JSON.stringify({
-					targetType: perm.targetType,
-					targetId: perm.targetId
-				})
-			});
-			const json = await res.json();
-			if (json.success) {
 			await loadPermissions();
-			} else {
+		} catch (err) {
-				errorMessage = json.error ?? 'Failed to revoke permission';
+			errorMessage = err instanceof Error ? err.message : 'Network error';
-			}
-		} catch {
-			errorMessage = 'Network error';
 		}
 	}
 
 	function getTargetName(targetType: string, targetId: string): string {
-		const list = targetType === TargetType.USER ? users : groups;
+		return resolveTargetName(targetType, targetId, users, groups);
-		return list.find((item) => item.id === targetId)?.name ?? targetId;
 	}
 
 	function getLevelLabel(level: string): string {

src/lib/components/board/BoardShareDialog.svelte

@@ -1,21 +1,14 @@
 <script lang="ts">
 	import { t } from 'svelte-i18n';
 	import { TargetType, PermissionLevel } from '$lib/utils/constants.js';
-
+	import {
-	interface PermissionRecord {
+		loadBoardPermissions,
-		id: string;
+		grantBoardPermission,
-		entityType: string;
+		revokeBoardPermission,
-		entityId: string;
+		getTargetName as resolveTargetName,
-		targetType: string;
+		type PermissionRecord,
-		targetId: string;
+		type SelectOption
-		level: string;
+	} from '$lib/utils/boardPermissions.js';
-		createdAt: string;
-	}
-
-	interface SelectOption {
-		id: string;
-		name: string;
-	}
 
 	interface Props {
 		boardId: string;
@@ -41,6 +34,7 @@
 	let loading = $state(true);
 	let errorMessage = $state('');
 	let copySuccess = $state(false);
+	let copyTimerId = $state<ReturnType<typeof setTimeout> | null>(null);
 
 	let selectedTargetType = $state<string>(TargetType.USER);
 	let selectedTargetId = $state('');
@@ -63,15 +57,9 @@
 		loading = true;
 		errorMessage = '';
 		try {
-			const res = await fetch(`/api/boards/${boardId}/permissions`);
+			permissions = await loadBoardPermissions(boardId);
-			const json = await res.json();
+		} catch (err) {
-			if (json.success) {
+			errorMessage = err instanceof Error ? err.message : 'Network error';
-				permissions = json.data;
-			} else {
-				errorMessage = json.error ?? 'Failed to load permissions';
-			}
-		} catch {
-			errorMessage = 'Network error';
 		} finally {
 			loading = false;
 		}
@@ -81,53 +69,27 @@
 		if (!selectedTargetId) return;
 		errorMessage = '';
 		try {
-			const res = await fetch(`/api/boards/${boardId}/permissions`, {
+			await grantBoardPermission(boardId, selectedTargetType, selectedTargetId, selectedLevel);
-				method: 'POST',
-				headers: { 'Content-Type': 'application/json' },
-				body: JSON.stringify({
-					targetType: selectedTargetType,
-					targetId: selectedTargetId,
-					level: selectedLevel
-				})
-			});
-			const json = await res.json();
-			if (json.success) {
 			selectedTargetId = '';
 			searchQuery = '';
 			await loadPermissions();
-			} else {
+		} catch (err) {
-				errorMessage = json.error ?? 'Failed to grant permission';
+			errorMessage = err instanceof Error ? err.message : 'Network error';
-			}
-		} catch {
-			errorMessage = 'Network error';
 		}
 	}
 
 	async function handleRevoke(perm: PermissionRecord) {
 		errorMessage = '';
 		try {
-			const res = await fetch(`/api/boards/${boardId}/permissions`, {
+			await revokeBoardPermission(boardId, perm.targetType, perm.targetId);
-				method: 'DELETE',
-				headers: { 'Content-Type': 'application/json' },
-				body: JSON.stringify({
-					targetType: perm.targetType,
-					targetId: perm.targetId
-				})
-			});
-			const json = await res.json();
-			if (json.success) {
 			await loadPermissions();
-			} else {
+		} catch (err) {
-				errorMessage = json.error ?? 'Failed to revoke permission';
+			errorMessage = err instanceof Error ? err.message : 'Network error';
-			}
-		} catch {
-			errorMessage = 'Network error';
 		}
 	}
 
 	function getTargetName(targetType: string, targetId: string): string {
-		const list = targetType === TargetType.USER ? users : groups;
+		return resolveTargetName(targetType, targetId, users, groups);
-		return list.find((item) => item.id === targetId)?.name ?? targetId;
 	}
 
 	function getLevelLabel(level: string): string {
@@ -148,8 +110,12 @@
 			const url = `${window.location.origin}/boards/${boardId}`;
 			await navigator.clipboard.writeText(url);
 			copySuccess = true;
-			setTimeout(() => {
+			if (copyTimerId !== null) {
+				clearTimeout(copyTimerId);
+			}
+			copyTimerId = setTimeout(() => {
 				copySuccess = false;
+				copyTimerId = null;
 			}, 2000);
 		} catch {
 			// Fallback: ignore if clipboard API not available
@@ -168,9 +134,14 @@
 		}
 	}
 
-	// Load permissions on mount
+	// Load permissions on mount; clean up copy timer on destroy
 	$effect(() => {
 		loadPermissions();
+		return () => {
+			if (copyTimerId !== null) {
+				clearTimeout(copyTimerId);
+			}
+		};
 	});
 </script>
 

src/lib/components/board/DraggableBoard.svelte

@@ -53,19 +53,25 @@
 	}: Props = $props();
 
 	let sections = $state<SectionData[]>([...initialSections]);
+	let dirty = $state(false);
+	let errorMessage = $state('');
 
-	// Keep local state in sync when parent data changes
+	// Keep local state in sync when parent data changes (skip during drag)
 	$effect(() => {
+		if (!dirty) {
 			sections = [...initialSections];
+		}
 	});
 
 	const flipDurationMs = 200;
 
 	function handleConsider(e: CustomEvent<{ items: SectionData[] }>) {
+		dirty = true;
 		sections = e.detail.items;
 	}
 
 	async function handleFinalize(e: CustomEvent<{ items: SectionData[] }>) {
+		dirty = true;
 		sections = e.detail.items;
 		const sectionIds = sections.map((s) => s.id);
 
@@ -76,12 +82,15 @@
 				body: JSON.stringify({ sectionIds })
 			});
 		} catch (err) {
-			console.error('Failed to persist section reorder:', err);
+			errorMessage = err instanceof Error ? err.message : 'Failed to persist section reorder';
+		} finally {
+			dirty = false;
 		}
 	}
 
 	async function handleWidgetsUpdate(sectionId: string, widgets: WidgetData[]) {
 		// Update local state
+		dirty = true;
 		sections = sections.map((s) => (s.id === sectionId ? { ...s, widgets } : s));
 
 		const widgetIds = widgets.map((w) => w.id);
@@ -93,11 +102,17 @@
 				body: JSON.stringify({ widgetIds })
 			});
 		} catch (err) {
-			console.error('Failed to persist widget reorder:', err);
+			errorMessage = err instanceof Error ? err.message : 'Failed to persist widget reorder';
+		} finally {
+			dirty = false;
 		}
 	}
 </script>
 
+{#if errorMessage}
+	<p class="mb-2 text-sm text-destructive">{errorMessage}</p>
+{/if}
+
 {#if sections.length === 0}
 	<div class="rounded-xl border border-border bg-card/50 p-8 text-center">
 		<p class="text-muted-foreground">{$t('board.no_sections')}</p>
@@ -113,7 +128,6 @@
 			<div>
 				<DraggableSection
 					{section}
-					{boardId}
 					{apps}
 					onWidgetsUpdate={handleWidgetsUpdate}
 					{addWidgetSectionId}

src/lib/components/section/DraggableSection.svelte

@@ -2,6 +2,7 @@
 	import { t } from 'svelte-i18n';
 	import { dndzone } from 'svelte-dnd-action';
 	import DraggableWidget from '$lib/components/widget/DraggableWidget.svelte';
+	import WidgetCreationForm from '$lib/components/widget/WidgetCreationForm.svelte';
 
 	interface WidgetData {
 		id: string;
@@ -32,7 +33,6 @@
 
 	interface Props {
 		section: SectionData;
-		boardId: string;
 		apps: Array<{ id: string; name: string }>;
 		onWidgetsUpdate: (sectionId: string, widgets: WidgetData[]) => void;
 		addWidgetSectionId: string | null;
@@ -44,7 +44,6 @@
 
 	let {
 		section,
-		boardId: _boardId = '',
 		apps,
 		onWidgetsUpdate,
 		addWidgetSectionId,
@@ -54,108 +53,28 @@
 		onDeleteWidget
 	}: Props = $props();
 
-	// boardId reserved for future per-section API calls
-	void _boardId;
-
 	let widgets = $state<WidgetData[]>([...section.widgets]);
+	let dirty = $state(false);
 
-	// Keep local state in sync when parent data changes
+	// Keep local state in sync when parent data changes (skip during drag)
 	$effect(() => {
+		if (!dirty) {
 			widgets = [...section.widgets];
+		}
 	});
 
 	const flipDurationMs = 200;
 
 	function handleConsider(e: CustomEvent<{ items: WidgetData[] }>) {
+		dirty = true;
 		widgets = e.detail.items;
 	}
 
 	function handleFinalize(e: CustomEvent<{ items: WidgetData[] }>) {
+		dirty = true;
 		widgets = e.detail.items;
 		onWidgetsUpdate(section.id, widgets);
-	}
+		dirty = false;
-
-	// Widget form state
-	let selectedWidgetType = $state('app');
-	let selectedAppId = $state('');
-
-	// Bookmark fields
-	let bookmarkUrl = $state('');
-	let bookmarkLabel = $state('');
-	let bookmarkIcon = $state('');
-	let bookmarkDescription = $state('');
-
-	// Note fields
-	let noteContent = $state('');
-	let noteFormat = $state<'markdown' | 'text'>('markdown');
-
-	// Embed fields
-	let embedUrl = $state('');
-	let embedHeight = $state(300);
-
-	// Status fields
-	let statusLabel = $state('');
-	let statusAppIds = $state<string[]>([]);
-
-	function resetForm() {
-		selectedWidgetType = 'app';
-		selectedAppId = '';
-		bookmarkUrl = '';
-		bookmarkLabel = '';
-		bookmarkIcon = '';
-		bookmarkDescription = '';
-		noteContent = '';
-		noteFormat = 'markdown';
-		embedUrl = '';
-		embedHeight = 300;
-		statusLabel = '';
-		statusAppIds = [];
-	}
-
-	function handleSubmitWidget() {
-		let widgetData: Record<string, unknown> = { type: selectedWidgetType };
-
-		switch (selectedWidgetType) {
-			case 'app':
-				if (!selectedAppId) return;
-				widgetData.appId = selectedAppId;
-				break;
-			case 'bookmark':
-				if (!bookmarkUrl || !bookmarkLabel) return;
-				widgetData.url = bookmarkUrl;
-				widgetData.label = bookmarkLabel;
-				if (bookmarkIcon) widgetData.icon = bookmarkIcon;
-				if (bookmarkDescription) widgetData.description = bookmarkDescription;
-				break;
-			case 'note':
-				if (!noteContent) return;
-				widgetData.content = noteContent;
-				widgetData.format = noteFormat;
-				break;
-			case 'embed':
-				if (!embedUrl) return;
-				widgetData.url = embedUrl;
-				widgetData.height = embedHeight;
-				break;
-			case 'status':
-				if (statusAppIds.length === 0) return;
-				widgetData.appIds = statusAppIds;
-				if (statusLabel) widgetData.label = statusLabel;
-				break;
-			default:
-				return;
-		}
-
-		onAddWidget(section.id, JSON.stringify(widgetData));
-		resetForm();
-	}
-
-	function toggleStatusApp(appId: string) {
-		if (statusAppIds.includes(appId)) {
-			statusAppIds = statusAppIds.filter((id) => id !== appId);
-		} else {
-			statusAppIds = [...statusAppIds, appId];
-		}
 	}
 
 	function getWidgetLabel(widget: WidgetData): string {
@@ -227,181 +146,11 @@
 	</div>
 
 	{#if addWidgetSectionId === section.id}
-		<div class="mb-3 rounded-lg border border-border bg-muted/50 p-3">
+		<WidgetCreationForm
-			<!-- Widget Type Selector -->
+			sectionId={section.id}
-			<div class="mb-3">
+			{apps}
-				<label for="widget-type-{section.id}" class="mb-1 block text-sm font-medium text-foreground">
+			onSubmit={onAddWidget}
-					Widget Type
-				</label>
-				<select
-					id="widget-type-{section.id}"
-					bind:value={selectedWidgetType}
-					class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
-				>
-					<option value="app">App</option>
-					<option value="bookmark">Bookmark</option>
-					<option value="note">Note</option>
-					<option value="embed">Embed</option>
-					<option value="status">Status</option>
-				</select>
-			</div>
-
-			<!-- Type-specific config forms -->
-			{#if selectedWidgetType === 'app'}
-				<div>
-					<label for="widget-app-{section.id}" class="mb-1 block text-sm font-medium text-foreground">
-						{$t('widget.select_app')}
-					</label>
-					<select
-						id="widget-app-{section.id}"
-						bind:value={selectedAppId}
-						class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
-					>
-						<option value="">{$t('widget.choose_app')}</option>
-						{#each apps as app (app.id)}
-							<option value={app.id}>{app.name}</option>
-						{/each}
-					</select>
-				</div>
-			{:else if selectedWidgetType === 'bookmark'}
-				<div class="grid gap-3 sm:grid-cols-2">
-					<div>
-						<label for="bm-url-{section.id}" class="mb-1 block text-sm font-medium text-foreground">URL</label>
-						<input
-							id="bm-url-{section.id}"
-							type="url"
-							bind:value={bookmarkUrl}
-							placeholder="https://example.com"
-							class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
-							required
 		/>
-					</div>
-					<div>
-						<label for="bm-label-{section.id}" class="mb-1 block text-sm font-medium text-foreground">Label</label>
-						<input
-							id="bm-label-{section.id}"
-							type="text"
-							bind:value={bookmarkLabel}
-							placeholder="My Bookmark"
-							class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
-							required
-						/>
-					</div>
-					<div>
-						<label for="bm-icon-{section.id}" class="mb-1 block text-sm font-medium text-foreground">Icon (optional)</label>
-						<input
-							id="bm-icon-{section.id}"
-							type="text"
-							bind:value={bookmarkIcon}
-							placeholder="e.g. an emoji or icon name"
-							class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
-						/>
-					</div>
-					<div>
-						<label for="bm-desc-{section.id}" class="mb-1 block text-sm font-medium text-foreground">Description (optional)</label>
-						<input
-							id="bm-desc-{section.id}"
-							type="text"
-							bind:value={bookmarkDescription}
-							placeholder="A short description"
-							class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
-						/>
-					</div>
-				</div>
-			{:else if selectedWidgetType === 'note'}
-				<div class="space-y-3">
-					<div>
-						<label for="note-format-{section.id}" class="mb-1 block text-sm font-medium text-foreground">Format</label>
-						<select
-							id="note-format-{section.id}"
-							bind:value={noteFormat}
-							class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
-						>
-							<option value="markdown">Markdown</option>
-							<option value="text">Plain Text</option>
-						</select>
-					</div>
-					<div>
-						<label for="note-content-{section.id}" class="mb-1 block text-sm font-medium text-foreground">Content</label>
-						<textarea
-							id="note-content-{section.id}"
-							bind:value={noteContent}
-							rows="4"
-							placeholder="Write your note here..."
-							class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
-							required
-						></textarea>
-					</div>
-				</div>
-			{:else if selectedWidgetType === 'embed'}
-				<div class="grid gap-3 sm:grid-cols-2">
-					<div class="sm:col-span-2">
-						<label for="embed-url-{section.id}" class="mb-1 block text-sm font-medium text-foreground">URL</label>
-						<input
-							id="embed-url-{section.id}"
-							type="url"
-							bind:value={embedUrl}
-							placeholder="https://example.com/embed"
-							class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
-							required
-						/>
-					</div>
-					<div>
-						<label for="embed-height-{section.id}" class="mb-1 block text-sm font-medium text-foreground">Height (px)</label>
-						<input
-							id="embed-height-{section.id}"
-							type="number"
-							bind:value={embedHeight}
-							min="100"
-							max="2000"
-							class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
-						/>
-					</div>
-				</div>
-			{:else if selectedWidgetType === 'status'}
-				<div class="space-y-3">
-					<div>
-						<label for="status-label-{section.id}" class="mb-1 block text-sm font-medium text-foreground">Label (optional)</label>
-						<input
-							id="status-label-{section.id}"
-							type="text"
-							bind:value={statusLabel}
-							placeholder="e.g. Production Services"
-							class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
-						/>
-					</div>
-					<div>
-						<span class="mb-1 block text-sm font-medium text-foreground">Select Apps</span>
-						<div class="max-h-40 space-y-1 overflow-y-auto rounded-lg border border-input bg-background p-2">
-							{#each apps as app (app.id)}
-								<label class="flex items-center gap-2 rounded px-2 py-1 text-sm text-foreground hover:bg-accent">
-									<input
-										type="checkbox"
-										checked={statusAppIds.includes(app.id)}
-										onchange={() => toggleStatusApp(app.id)}
-										class="h-4 w-4 rounded border-input accent-primary"
-									/>
-									{app.name}
-								</label>
-							{/each}
-						</div>
-						{#if statusAppIds.length > 0}
-							<p class="mt-1 text-xs text-muted-foreground">{statusAppIds.length} app(s) selected</p>
-						{/if}
-					</div>
-				</div>
-			{/if}
-
-			<div class="mt-3">
-				<button
-					type="button"
-					onclick={handleSubmitWidget}
-					class="rounded-md bg-primary px-2 py-1 text-xs font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50"
-				>
-					{$t('common.add')}
-				</button>
-			</div>
-		</div>
 	{/if}
 
 	<!-- Widgets drop zone -->

src/lib/components/widget/WidgetCreationForm.svelte

@@ -0,0 +1,270 @@
+<script lang="ts">
+	import { t } from 'svelte-i18n';
+
+	interface Props {
+		sectionId: string;
+		apps: Array<{ id: string; name: string }>;
+		onSubmit: (sectionId: string, widgetData: string) => void;
+	}
+
+	let { sectionId, apps, onSubmit }: Props = $props();
+
+	// Widget form state
+	let selectedWidgetType = $state('app');
+	let selectedAppId = $state('');
+
+	// Bookmark fields
+	let bookmarkUrl = $state('');
+	let bookmarkLabel = $state('');
+	let bookmarkIcon = $state('');
+	let bookmarkDescription = $state('');
+
+	// Note fields
+	let noteContent = $state('');
+	let noteFormat = $state<'markdown' | 'text'>('markdown');
+
+	// Embed fields
+	let embedUrl = $state('');
+	let embedHeight = $state(300);
+
+	// Status fields
+	let statusLabel = $state('');
+	let statusAppIds = $state<string[]>([]);
+
+	function resetForm() {
+		selectedWidgetType = 'app';
+		selectedAppId = '';
+		bookmarkUrl = '';
+		bookmarkLabel = '';
+		bookmarkIcon = '';
+		bookmarkDescription = '';
+		noteContent = '';
+		noteFormat = 'markdown';
+		embedUrl = '';
+		embedHeight = 300;
+		statusLabel = '';
+		statusAppIds = [];
+	}
+
+	function handleSubmitWidget() {
+		let widgetData: Record<string, unknown> = { type: selectedWidgetType };
+
+		switch (selectedWidgetType) {
+			case 'app':
+				if (!selectedAppId) return;
+				widgetData.appId = selectedAppId;
+				break;
+			case 'bookmark':
+				if (!bookmarkUrl || !bookmarkLabel) return;
+				widgetData.url = bookmarkUrl;
+				widgetData.label = bookmarkLabel;
+				if (bookmarkIcon) widgetData.icon = bookmarkIcon;
+				if (bookmarkDescription) widgetData.description = bookmarkDescription;
+				break;
+			case 'note':
+				if (!noteContent) return;
+				widgetData.content = noteContent;
+				widgetData.format = noteFormat;
+				break;
+			case 'embed':
+				if (!embedUrl) return;
+				widgetData.url = embedUrl;
+				widgetData.height = embedHeight;
+				break;
+			case 'status':
+				if (statusAppIds.length === 0) return;
+				widgetData.appIds = statusAppIds;
+				if (statusLabel) widgetData.label = statusLabel;
+				break;
+			default:
+				return;
+		}
+
+		onSubmit(sectionId, JSON.stringify(widgetData));
+		resetForm();
+	}
+
+	function toggleStatusApp(appId: string) {
+		if (statusAppIds.includes(appId)) {
+			statusAppIds = statusAppIds.filter((id) => id !== appId);
+		} else {
+			statusAppIds = [...statusAppIds, appId];
+		}
+	}
+</script>
+
+<div class="mb-3 rounded-lg border border-border bg-muted/50 p-3">
+	<!-- Widget Type Selector -->
+	<div class="mb-3">
+		<label for="widget-type-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">
+			Widget Type
+		</label>
+		<select
+			id="widget-type-{sectionId}"
+			bind:value={selectedWidgetType}
+			class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
+		>
+			<option value="app">App</option>
+			<option value="bookmark">Bookmark</option>
+			<option value="note">Note</option>
+			<option value="embed">Embed</option>
+			<option value="status">Status</option>
+		</select>
+	</div>
+
+	<!-- Type-specific config forms -->
+	{#if selectedWidgetType === 'app'}
+		<div>
+			<label for="widget-app-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">
+				{$t('widget.select_app')}
+			</label>
+			<select
+				id="widget-app-{sectionId}"
+				bind:value={selectedAppId}
+				class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
+			>
+				<option value="">{$t('widget.choose_app')}</option>
+				{#each apps as app (app.id)}
+					<option value={app.id}>{app.name}</option>
+				{/each}
+			</select>
+		</div>
+	{:else if selectedWidgetType === 'bookmark'}
+		<div class="grid gap-3 sm:grid-cols-2">
+			<div>
+				<label for="bm-url-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">URL</label>
+				<input
+					id="bm-url-{sectionId}"
+					type="url"
+					bind:value={bookmarkUrl}
+					placeholder="https://example.com"
+					class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
+					required
+				/>
+			</div>
+			<div>
+				<label for="bm-label-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">Label</label>
+				<input
+					id="bm-label-{sectionId}"
+					type="text"
+					bind:value={bookmarkLabel}
+					placeholder="My Bookmark"
+					class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
+					required
+				/>
+			</div>
+			<div>
+				<label for="bm-icon-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">Icon (optional)</label>
+				<input
+					id="bm-icon-{sectionId}"
+					type="text"
+					bind:value={bookmarkIcon}
+					placeholder="e.g. an emoji or icon name"
+					class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
+				/>
+			</div>
+			<div>
+				<label for="bm-desc-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">Description (optional)</label>
+				<input
+					id="bm-desc-{sectionId}"
+					type="text"
+					bind:value={bookmarkDescription}
+					placeholder="A short description"
+					class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
+				/>
+			</div>
+		</div>
+	{:else if selectedWidgetType === 'note'}
+		<div class="space-y-3">
+			<div>
+				<label for="note-format-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">Format</label>
+				<select
+					id="note-format-{sectionId}"
+					bind:value={noteFormat}
+					class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
+				>
+					<option value="markdown">Markdown</option>
+					<option value="text">Plain Text</option>
+				</select>
+			</div>
+			<div>
+				<label for="note-content-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">Content</label>
+				<textarea
+					id="note-content-{sectionId}"
+					bind:value={noteContent}
+					rows="4"
+					placeholder="Write your note here..."
+					class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
+					required
+				></textarea>
+			</div>
+		</div>
+	{:else if selectedWidgetType === 'embed'}
+		<div class="grid gap-3 sm:grid-cols-2">
+			<div class="sm:col-span-2">
+				<label for="embed-url-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">URL</label>
+				<input
+					id="embed-url-{sectionId}"
+					type="url"
+					bind:value={embedUrl}
+					placeholder="https://example.com/embed"
+					class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
+					required
+				/>
+			</div>
+			<div>
+				<label for="embed-height-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">Height (px)</label>
+				<input
+					id="embed-height-{sectionId}"
+					type="number"
+					bind:value={embedHeight}
+					min="100"
+					max="2000"
+					class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
+				/>
+			</div>
+		</div>
+	{:else if selectedWidgetType === 'status'}
+		<div class="space-y-3">
+			<div>
+				<label for="status-label-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">Label (optional)</label>
+				<input
+					id="status-label-{sectionId}"
+					type="text"
+					bind:value={statusLabel}
+					placeholder="e.g. Production Services"
+					class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
+				/>
+			</div>
+			<div>
+				<span class="mb-1 block text-sm font-medium text-foreground">Select Apps</span>
+				<div class="max-h-40 space-y-1 overflow-y-auto rounded-lg border border-input bg-background p-2">
+					{#each apps as app (app.id)}
+						<label class="flex items-center gap-2 rounded px-2 py-1 text-sm text-foreground hover:bg-accent">
+							<input
+								type="checkbox"
+								checked={statusAppIds.includes(app.id)}
+								onchange={() => toggleStatusApp(app.id)}
+								class="h-4 w-4 rounded border-input accent-primary"
+							/>
+							{app.name}
+						</label>
+					{/each}
+				</div>
+				{#if statusAppIds.length > 0}
+					<p class="mt-1 text-xs text-muted-foreground">{statusAppIds.length} app(s) selected</p>
+				{/if}
+			</div>
+		</div>
+	{/if}
+
+	<div class="mt-3">
+		<button
+			type="button"
+			onclick={handleSubmitWidget}
+			class="rounded-md bg-primary px-2 py-1 text-xs font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50"
+		>
+			{$t('common.add')}
+		</button>
+	</div>
+</div>

src/lib/server/services/__tests__/oauthService.test.ts

@@ -25,6 +25,7 @@ import { prisma } from '../../prisma.js';
 import {
 	invalidateOAuthCache,
 	generateCodeVerifier,
+	generateState,
 	calculateCodeChallenge,
 	generateAuthUrl,
 	handleCallback,
@@ -69,6 +70,14 @@ describe('oauthService', () => {
 		});
 	});
 
+	describe('generateState', () => {
+		it('returns a random state string', () => {
+			const state = generateState();
+			expect(state).toBe('mock-state-123');
+			expect(mockClient.randomState).toHaveBeenCalledOnce();
+		});
+	});
+
 	describe('calculateCodeChallenge', () => {
 		it('returns a PKCE code challenge', async () => {
 			const challenge = await calculateCodeChallenge('my-verifier');
@@ -86,7 +95,7 @@ describe('oauthService', () => {
 				new URL('https://auth.example.com/authorize?code_challenge=abc')
 			);
 
-			const url = await generateAuthUrl('https://app.example.com/callback', 'test-challenge');
+			const url = await generateAuthUrl('https://app.example.com/callback', 'test-challenge', 'test-state');
 
 			expect(url).toBe('https://auth.example.com/authorize?code_challenge=abc');
 			expect(mockClient.buildAuthorizationUrl).toHaveBeenCalledWith(
@@ -95,7 +104,8 @@ describe('oauthService', () => {
 					redirect_uri: 'https://app.example.com/callback',
 					scope: 'openid profile email',
 					code_challenge: 'test-challenge',
-					code_challenge_method: 'S256'
+					code_challenge_method: 'S256',
+					state: 'test-state'
 				})
 			);
 		});
@@ -111,7 +121,7 @@ describe('oauthService', () => {
 			delete process.env.OAUTH_DISCOVERY_URL;
 
 			await expect(
-				generateAuthUrl('https://app.example.com/callback', 'challenge')
+				generateAuthUrl('https://app.example.com/callback', 'challenge', 'state')
 			).rejects.toThrow('OAuth is not configured');
 
 			// Restore
@@ -120,25 +130,20 @@ describe('oauthService', () => {
 			process.env.OAUTH_DISCOVERY_URL = origDiscovery;
 		});
 
-		it('adds state when provider does not support PKCE', async () => {
+		it('always includes the state parameter', async () => {
 			setupOAuthSettings();
-			const mockConfig = {
+			const mockConfig = createMockOIDCConfig();
-				serverMetadata: () => ({
-					issuer: 'https://auth.example.com',
-					supportsPKCE: () => false
-				})
-			};
 			mockClient.discovery.mockResolvedValue(mockConfig);
 			mockClient.buildAuthorizationUrl.mockReturnValue(
 				new URL('https://auth.example.com/authorize')
 			);
 
-			await generateAuthUrl('https://app.example.com/callback', 'test-challenge');
+			await generateAuthUrl('https://app.example.com/callback', 'test-challenge', 'custom-state');
 
 			expect(mockClient.buildAuthorizationUrl).toHaveBeenCalledWith(
 				mockConfig,
 				expect.objectContaining({
-					state: 'mock-state-123'
+					state: 'custom-state'
 				})
 			);
 		});
@@ -163,8 +168,9 @@ describe('oauthService', () => {
 			});
 
 			const result = await handleCallback(
-				new URL('https://app.example.com/callback?code=abc'),
+				new URL('https://app.example.com/callback?code=abc&state=test-state'),
-				'test-verifier'
+				'test-verifier',
+				'test-state'
 			);
 
 			expect(result).toEqual({
@@ -188,8 +194,9 @@ describe('oauthService', () => {
 
 			await expect(
 				handleCallback(
-					new URL('https://app.example.com/callback?code=abc'),
+					new URL('https://app.example.com/callback?code=abc&state=test-state'),
-					'test-verifier'
+					'test-verifier',
+					'test-state'
 				)
 			).rejects.toThrow('subject claim');
 		});
@@ -209,8 +216,9 @@ describe('oauthService', () => {
 
 			await expect(
 				handleCallback(
-					new URL('https://app.example.com/callback?code=abc'),
+					new URL('https://app.example.com/callback?code=abc&state=test-state'),
-					'test-verifier'
+					'test-verifier',
+					'test-state'
 				)
 			).rejects.toThrow('email');
 		});

src/lib/server/services/oauthService.ts

@@ -96,6 +96,13 @@ export function generateCodeVerifier(): string {
 	return client.randomPKCECodeVerifier();
 }
 
+/**
+ * Generates a cryptographically random state parameter.
+ */
+export function generateState(): string {
+	return client.randomState();
+}
+
 /**
  * Calculates the PKCE code_challenge from a code_verifier.
  */
@@ -105,10 +112,12 @@ export async function calculateCodeChallenge(codeVerifier: string): Promise<stri
 
 /**
  * Builds the authorization URL to redirect the user to the OIDC provider.
+ * Always includes a state parameter for CSRF protection.
  */
 export async function generateAuthUrl(
 	redirectUri: string,
-	codeChallenge: string
+	codeChallenge: string,
+	state: string
 ): Promise<string> {
 	const config = await getOIDCConfig();
 
@@ -116,14 +125,10 @@ export async function generateAuthUrl(
 		redirect_uri: redirectUri,
 		scope: 'openid profile email',
 		code_challenge: codeChallenge,
-		code_challenge_method: 'S256'
+		code_challenge_method: 'S256',
+		state
 	};
 
-	// Add state if the server might not support PKCE
-	if (!config.serverMetadata().supportsPKCE()) {
-		parameters.state = client.randomState();
-	}
-
 	const url = client.buildAuthorizationUrl(config, parameters);
 	return url.href;
 }
@@ -133,12 +138,14 @@ export async function generateAuthUrl(
  */
 export async function handleCallback(
 	callbackUrl: URL,
-	codeVerifier: string
+	codeVerifier: string,
+	expectedState: string
 ): Promise<OAuthUserInfo> {
 	const config = await getOIDCConfig();
 
 	const tokens = await client.authorizationCodeGrant(config, callbackUrl, {
-		pkceCodeVerifier: codeVerifier
+		pkceCodeVerifier: codeVerifier,
+		expectedState
 	});
 
 	// Try to get user info from the userinfo endpoint

src/lib/server/services/userService.ts

@@ -184,14 +184,16 @@ async function syncOAuthGroups(userId: string, oauthGroupNames: readonly string[
 		return;
 	}
 
-	// Upsert memberships (idempotent — won't fail if already a member)
+	// Upsert memberships in a single transaction (idempotent — won't fail if already a member)
-	for (const group of matchingGroups) {
+	await prisma.$transaction(
-		await prisma.userGroup.upsert({
+		matchingGroups.map((group) =>
+			prisma.userGroup.upsert({
 				where: {
 					userId_groupId: { userId, groupId: group.id }
 				},
 				update: {},
 				create: { userId, groupId: group.id }
-		});
+			})
-	}
+		)
+	);
 }

src/lib/utils/boardPermissions.ts

@@ -0,0 +1,86 @@
+import { TargetType } from './constants.js';
+
+export interface PermissionRecord {
+	id: string;
+	entityType: string;
+	entityId: string;
+	targetType: string;
+	targetId: string;
+	level: string;
+	createdAt: string;
+}
+
+export interface SelectOption {
+	id: string;
+	name: string;
+}
+
+interface ApiResponse<T> {
+	success: boolean;
+	data?: T;
+	error?: string;
+}
+
+/**
+ * Fetches the permission records for a board.
+ */
+export async function loadBoardPermissions(boardId: string): Promise<PermissionRecord[]> {
+	const res = await fetch(`/api/boards/${boardId}/permissions`);
+	const json: ApiResponse<PermissionRecord[]> = await res.json();
+	if (json.success && json.data) {
+		return json.data;
+	}
+	throw new Error(json.error ?? 'Failed to load permissions');
+}
+
+/**
+ * Grants a permission on a board to a user or group.
+ */
+export async function grantBoardPermission(
+	boardId: string,
+	targetType: string,
+	targetId: string,
+	level: string
+): Promise<void> {
+	const res = await fetch(`/api/boards/${boardId}/permissions`, {
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		body: JSON.stringify({ targetType, targetId, level })
+	});
+	const json: ApiResponse<unknown> = await res.json();
+	if (!json.success) {
+		throw new Error(json.error ?? 'Failed to grant permission');
+	}
+}
+
+/**
+ * Revokes a permission on a board for a user or group.
+ */
+export async function revokeBoardPermission(
+	boardId: string,
+	targetType: string,
+	targetId: string
+): Promise<void> {
+	const res = await fetch(`/api/boards/${boardId}/permissions`, {
+		method: 'DELETE',
+		headers: { 'Content-Type': 'application/json' },
+		body: JSON.stringify({ targetType, targetId })
+	});
+	const json: ApiResponse<unknown> = await res.json();
+	if (!json.success) {
+		throw new Error(json.error ?? 'Failed to revoke permission');
+	}
+}
+
+/**
+ * Resolves a target (user or group) ID to a display name.
+ */
+export function getTargetName(
+	targetType: string,
+	targetId: string,
+	users: SelectOption[],
+	groups: SelectOption[]
+): string {
+	const list = targetType === TargetType.USER ? users : groups;
+	return list.find((item) => item.id === targetId)?.name ?? targetId;
+}

src/routes/api/boards/[id]/sections/[sid]/reorder/+server.ts

@@ -37,8 +37,8 @@ export const PUT: RequestHandler = async (event) => {
 	}
 
 	const { widgetIds } = body as { widgetIds?: string[] };
-	if (!Array.isArray(widgetIds)) {
+	if (!Array.isArray(widgetIds) || widgetIds.length === 0) {
-		return json(error('widgetIds must be an array of strings'), { status: 400 });
+		return json(error('widgetIds must be a non-empty array of strings'), { status: 400 });
 	}
 
 	if (!widgetIds.every((wid) => typeof wid === 'string')) {

src/routes/auth/oauth/authorize/+server.ts

@@ -14,18 +14,23 @@ export const GET: RequestHandler = async ({ cookies, url }) => {
 		const appUrl = process.env.APP_URL || url.origin;
 		const redirectUri = process.env.OAUTH_REDIRECT_URI || `${appUrl}/auth/oauth/callback`;
 
-		// Generate PKCE values
+		// Generate PKCE values and state parameter
 		const codeVerifier = oauthService.generateCodeVerifier();
 		const codeChallenge = await oauthService.calculateCodeChallenge(codeVerifier);
+		const state = oauthService.generateState();
 
-		// Store code_verifier in HTTP-only cookie for the callback
+		// Store code_verifier and state in HTTP-only cookies for the callback
 		cookies.set('oauth_code_verifier', codeVerifier, {
 			...COOKIE_BASE,
 			maxAge: 600 // 10 minutes — enough for the auth flow
 		});
+		cookies.set('oauth_state', state, {
+			...COOKIE_BASE,
+			maxAge: 600
+		});
 
 		// Build authorization URL and redirect
-		const authUrl = await oauthService.generateAuthUrl(redirectUri, codeChallenge);
+		const authUrl = await oauthService.generateAuthUrl(redirectUri, codeChallenge, state);
 
 		throw redirect(302, authUrl);
 	} catch (err) {

src/routes/auth/oauth/callback/+server.ts

@@ -26,17 +26,29 @@ export const GET: RequestHandler = async ({ url, cookies }) => {
 			throw new Error('No authorization code received from OAuth provider');
 		}
 
-		// Retrieve the code_verifier from the cookie
+		// Retrieve the code_verifier and state from cookies
 		const codeVerifier = cookies.get('oauth_code_verifier');
 		if (!codeVerifier) {
 			throw new Error('OAuth session expired. Please try logging in again.');
 		}
 
-		// Clear the code_verifier cookie
+		const expectedState = cookies.get('oauth_state');
+		if (!expectedState) {
+			throw new Error('OAuth session expired. Please try logging in again.');
+		}
+
+		// Validate the state parameter matches to prevent CSRF
+		const returnedState = url.searchParams.get('state');
+		if (returnedState !== expectedState) {
+			throw new Error('OAuth state mismatch. Possible CSRF attack. Please try logging in again.');
+		}
+
+		// Clear the OAuth cookies
 		cookies.delete('oauth_code_verifier', { path: '/' });
+		cookies.delete('oauth_state', { path: '/' });
 
 		// Exchange the authorization code for tokens and get user info
-		const userInfo = await oauthService.handleCallback(url, codeVerifier);
+		const userInfo = await oauthService.handleCallback(url, codeVerifier, expectedState);
 
 		// Find or create local user from OAuth info
 		const user = await userService.findOrCreateByOAuth({

src/routes/boards/[boardId]/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { t } from 'svelte-i18n';
 	import type { PageData } from './$types.js';
+	import { invalidateAll } from '$app/navigation';
 	import Board from '$lib/components/board/Board.svelte';
 	import BoardHeader from '$lib/components/board/BoardHeader.svelte';
 	import BoardShareDialog from '$lib/components/board/BoardShareDialog.svelte';
@@ -8,16 +9,23 @@
 	let { data }: { data: PageData } = $props();
 
 	let showShareDialog = $state(false);
+	let guestToggleError = $state('');
 
 	async function handleGuestToggle(value: boolean) {
+		guestToggleError = '';
 		try {
-			await fetch(`/api/boards/${data.board.id}`, {
+			const res = await fetch(`/api/boards/${data.board.id}`, {
 				method: 'PATCH',
 				headers: { 'Content-Type': 'application/json' },
 				body: JSON.stringify({ isGuestAccessible: value })
 			});
-		} catch (err) {
+			if (res.ok) {
-			console.error('Failed to update guest access:', err);
+				await invalidateAll();
+			} else {
+				guestToggleError = 'Failed to update guest access';
+			}
+		} catch {
+			guestToggleError = 'Network error updating guest access';
 		}
 	}
 </script>
@@ -37,6 +45,10 @@
 			onShare={() => { showShareDialog = true; }}
 		/>
 
+		{#if guestToggleError}
+			<p class="mb-2 text-sm text-destructive">{guestToggleError}</p>
+		{/if}
+
 		<Board sections={data.board.sections} allApps={data.allApps} />
 	</div>
 </div>

src/routes/boards/[boardId]/edit/+page.server.ts

@@ -6,12 +6,17 @@ import * as permissionService from '$lib/server/services/permissionService.js';
 import * as userService from '$lib/server/services/userService.js';
 import * as groupService from '$lib/server/services/groupService.js';
 import { requireAuth } from '$lib/server/middleware/authenticate.js';
-import { EntityType, PermissionLevel, UserRole } from '$lib/utils/constants.js';
+import { EntityType, PermissionLevel, UserRole, WidgetType } from '$lib/utils/constants.js';
 import {
 	updateBoardSchema,
 	createSectionSchema,
 	updateSectionSchema,
-	createWidgetSchema
+	createWidgetSchema,
+	appWidgetConfigSchema,
+	bookmarkWidgetConfigSchema,
+	noteWidgetConfigSchema,
+	embedWidgetConfigSchema,
+	statusWidgetConfigSchema
 } from '$lib/utils/validators.js';
 
 export const load: PageServerLoad = async (event) => {
@@ -214,6 +219,35 @@ export const actions: Actions = {
 			return { success: false, error: parsed.error.errors.map((e) => e.message).join(', ') };
 		}
 
+		// Validate config JSON against the type-specific schema
+		if (config && config !== '{}') {
+			let parsedConfig: unknown;
+			try {
+				parsedConfig = JSON.parse(config);
+			} catch {
+				return { success: false, error: 'Invalid config JSON' };
+			}
+
+			const configSchemaMap = {
+				[WidgetType.APP]: appWidgetConfigSchema,
+				[WidgetType.BOOKMARK]: bookmarkWidgetConfigSchema,
+				[WidgetType.NOTE]: noteWidgetConfigSchema,
+				[WidgetType.EMBED]: embedWidgetConfigSchema,
+				[WidgetType.STATUS]: statusWidgetConfigSchema
+			} as const;
+
+			const configSchema = configSchemaMap[type as keyof typeof configSchemaMap];
+			if (configSchema) {
+				const configResult = configSchema.safeParse(parsedConfig);
+				if (!configResult.success) {
+					return {
+						success: false,
+						error: configResult.error.errors.map((e) => e.message).join(', ')
+					};
+				}
+			}
+		}
+
 		try {
 			await boardService.createWidget(parsed.data);
 			return { success: true };

src/routes/boards/[boardId]/edit/+page.svelte

@@ -11,6 +11,7 @@
 
 	let showAddSection = $state(false);
 	let addWidgetSectionId = $state<string | null>(null);
+	let errorMessage = $state('');
 
 	function handleToggleAddWidget(sectionId: string) {
 		addWidgetSectionId = addWidgetSectionId === sectionId ? null : sectionId;
@@ -27,7 +28,7 @@
 			});
 			await invalidateAll();
 		} catch (err) {
-			console.error('Failed to delete section:', err);
+			errorMessage = err instanceof Error ? err.message : 'Failed to delete section';
 		}
 	}
 
@@ -80,7 +81,7 @@
 			addWidgetSectionId = null;
 			await invalidateAll();
 		} catch (err) {
-			console.error('Failed to add widget:', err);
+			errorMessage = err instanceof Error ? err.message : 'Failed to add widget';
 		}
 	}
 
@@ -95,7 +96,7 @@
 			});
 			await invalidateAll();
 		} catch (err) {
-			console.error('Failed to delete widget:', err);
+			errorMessage = err instanceof Error ? err.message : 'Failed to delete widget';
 		}
 	}
 </script>
@@ -106,6 +107,15 @@
 
 <div class="p-6">
 	<div class="mx-auto max-w-4xl">
+		{#if errorMessage}
+			<div class="mb-4 rounded-lg border border-destructive bg-destructive/10 p-3">
+				<p class="text-sm text-destructive">{errorMessage}</p>
+				<button type="button" onclick={() => { errorMessage = ''; }} class="mt-1 text-xs text-destructive underline">
+					{$t('common.dismiss') ?? 'Dismiss'}
+				</button>
+			</div>
+		{/if}
+
 		<div class="mb-6 flex items-center justify-between">
 			<h1 class="text-2xl font-bold text-foreground">{$t('board.edit_board')}</h1>
 			<a