@alliance-droid/status-feedback-system 4.0.0 → 4.0.2

package/dist/api.d.ts

@@ -107,12 +107,16 @@ export interface StatusClient {
         offset?: number;
     }): Promise<BoardData>;
     /**
-     * Status transitions the token's user may make on a board item. Requires an
-     * Alliance id token; the backend returns an empty `targets` list for users
-     * without a qualifying role.
+     * Status transitions the token's user may make on a board item. `token` must
+     * be an Alliance OIDC **access token** whose audience covers
+     * `status-feedback-admin` (an id token is rejected by the backend). The
+     * backend returns an empty `targets` list for users without a qualifying role.
      */
     getBoardTransitions(feedbackId: string, token: string): Promise<BoardTransitions>;
-    /** Set a board item's status (privileged). Requires an Alliance id token. */
+    /**
+     * Set a board item's status (privileged). `token` must be an Alliance OIDC
+     * **access token** scoped to `status-feedback-admin` (not an id token).
+     */
     updateBoardStatus(feedbackId: string, data: {
         status: string;
         reason?: string;

package/dist/components/DevFeedback.svelte

@@ -64,7 +64,6 @@
 	// Dev-mode warning when userEmail is empty
 	$effect(() => {
 		if (!userEmail && typeof console !== 'undefined') {
-			// eslint-disable-next-line no-restricted-globals -- safe typeof guard for universal code
 			const proc = typeof globalThis !== 'undefined' ? (globalThis as Record<string, unknown>).process as { env?: Record<string, string> } | undefined : undefined;
 			const env = proc?.env?.NODE_ENV || 'development';
 			if (env !== 'production') {

package/dist/components/board/FeedbackList.svelte

@@ -44,6 +44,12 @@
 
 	{#if board.hasMore}
 		<div class="mt-4 text-center">
+			{#if board.loadMoreError}
+				<p class="mb-2 text-sm text-red-400" role="alert">
+					<i class="fa-solid fa-exclamation-circle mr-1" aria-hidden="true"></i>
+					{board.loadMoreError}
+				</p>
+			{/if}
 			<Button
 				variant="neutral"
 				style="outline"
@@ -51,7 +57,7 @@
 				loading={board.loadingMore}
 				onclick={() => board.loadMore()}
 			>
-				Load More ({board.items.length} of {board.total})
+				{board.loadMoreError ? 'Retry' : `Load More (${board.items.length} of ${board.total})`}
 			</Button>
 		</div>
 	{/if}

package/dist/components/board/FeedbackSubmitForm.svelte

@@ -1,239 +1,239 @@
-<script lang="ts">
-	import { Button, Input, Textarea, Select } from '@alliance-droid/svelte-component-library';
-	import { FEEDBACK_CATEGORIES } from '../../types.js';
-	import type { FeedbackBoardState } from './state.svelte.js';
-
-	interface Props {
-		board: FeedbackBoardState;
-	}
-
-	let { board }: Props = $props();
-
-	let title = $state('');
-	let message = $state('');
-	let category = $state('');
-	let submitting = $state(false);
-	let success = $state(false);
-	let error = $state('');
-	let pastedImage = $state<string | null>(null);
-	let pastedFilename = $state('');
-	let fileInputEl: HTMLInputElement | undefined = $state();
-	let dragActive = $state(false);
-	let textareaWrapperEl: HTMLDivElement | undefined = $state();
-	let textareaEl: HTMLTextAreaElement | undefined = $state();
-
-	const MAX_BYTES = 5 * 1024 * 1024;
-	const ALLOWED_MIME = ['image/png', 'image/jpeg', 'image/gif', 'image/webp'];
-
-	$effect(() => {
-		if (textareaWrapperEl) {
-			textareaEl = textareaWrapperEl.querySelector('textarea') ?? undefined;
-		}
-	});
-
-	$effect(() => {
-		if (!textareaEl) return;
-		const handler = (e: ClipboardEvent) => handlePaste(e);
-		textareaEl.addEventListener('paste', handler);
-		return () => textareaEl?.removeEventListener('paste', handler);
-	});
-
-	let isAuthenticated = $derived(!!board.userEmail);
-
-	// Labels are the canonical system category names — not the consumer's
-	// `categoryConfig` (which only customizes the sidebar).
-	let categoryOptions = FEEDBACK_CATEGORIES.map((c) => ({ value: c, label: c }));
-
-	/** Validate and load an image file (shared by paste, file-pick, and drop). */
-	function processFile(file: File) {
-		if (!ALLOWED_MIME.includes(file.type)) {
-			error = 'Unsupported image type — PNG, JPEG, GIF, or WebP only';
-			return;
-		}
-		if (file.size > MAX_BYTES) {
-			error = 'Image too large — max 5 MB';
-			return;
-		}
-		const reader = new FileReader();
-		reader.onload = () => {
-			pastedImage = reader.result as string;
-			const ext = file.type.split('/')[1] || 'png';
-			const stamp = new Date().toISOString().replace(/[-:T]/g, '').slice(0, 14);
-			pastedFilename = file.name || `screenshot-${stamp}.${ext}`;
-			error = '';
-		};
-		reader.readAsDataURL(file);
-	}
-
-	function handlePaste(e: ClipboardEvent) {
-		const clipItems = Array.from(e.clipboardData?.items ?? []);
-		const imageItem = clipItems.find((i) => i.kind === 'file' && i.type.startsWith('image/'));
-		if (!imageItem) return;
-		const file = imageItem.getAsFile();
-		if (!file) return;
-		e.preventDefault();
-		processFile(file);
-	}
-
-	function handleFileSelect(e: Event) {
-		const input = e.currentTarget as HTMLInputElement;
-		const file = input.files?.[0];
-		if (file) processFile(file);
-		input.value = '';
-	}
-
-	function handleDrop(e: DragEvent) {
-		e.preventDefault();
-		dragActive = false;
-		const file = e.dataTransfer?.files?.[0];
-		if (file) processFile(file);
-	}
-
-	function formatSize(dataUrl: string): string {
-		const comma = dataUrl.indexOf(',');
-		if (comma === -1) return '';
-		const bytes = Math.round((dataUrl.length - comma - 1) * 0.75);
-		if (bytes < 1024) return `${bytes} B`;
-		if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-		return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
-	}
-
-	async function handleSubmit() {
-		if (!message.trim() || !category || !isAuthenticated) return;
-		submitting = true;
-		error = '';
-		try {
-			await board.submitFeedback({
-				title: title.trim() || undefined,
-				message: message.trim(),
-				category,
-				pastedImage,
-			});
-			success = true;
-			title = '';
-			message = '';
-			category = '';
-			pastedImage = null;
-			pastedFilename = '';
-			setTimeout(() => { success = false; }, 2000);
-		} catch (err) {
-			error = err instanceof Error ? err.message : 'Failed to submit';
-		} finally {
-			submitting = false;
-		}
-	}
-</script>
-
-<div>
-	{#if !isAuthenticated}
-		<div class="py-3 text-center text-foreground-tertiary">
-			<i class="fa-solid fa-lock mr-1" aria-hidden="true"></i>
-			<span class="text-sm">Sign in to submit feedback</span>
-		</div>
-	{:else if success}
-		<div class="py-2 text-center font-semibold text-green-400">
-			<i class="fa-solid fa-check-circle mr-1"></i> Submitted!
-		</div>
-	{:else}
-		<div class="space-y-2">
-			<!-- Composer card: title + description + attachment + toolbar -->
-			<div
-				class="overflow-hidden rounded-xl border bg-background shadow-sm transition-all {dragActive
-					? 'border-primary ring-2 ring-primary/30'
-					: 'border-border focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20'}"
-				role="group"
-				ondragover={(e) => { e.preventDefault(); dragActive = true; }}
-				ondragleave={() => (dragActive = false)}
-				ondrop={handleDrop}
-			>
-				<div class="border-b border-border">
-					<Input
-						class="rounded-none border-0 bg-transparent px-4 py-3 text-sm font-medium hover:border-transparent focus:border-transparent"
-						bind:value={title}
-						placeholder="Title (optional)"
-					/>
-				</div>
-
-				<div bind:this={textareaWrapperEl}>
-					<Textarea
-						class="resize-none rounded-none border-0 bg-transparent px-4 py-3 text-sm hover:border-transparent focus:border-transparent"
-						value={message}
-						oninput={(e) => (message = (e.currentTarget as HTMLTextAreaElement).value)}
-						placeholder="Describe your feedback…"
-						rows={4}
-					/>
-				</div>
-
-				{#if pastedImage}
-					<div class="flex items-center gap-3 border-t border-border px-3 py-2">
-						<img
-							src={pastedImage}
-							alt={pastedFilename}
-							class="h-11 w-11 flex-shrink-0 rounded border border-border object-cover"
-						/>
-						<div class="min-w-0 flex-1">
-							<p class="truncate text-xs font-medium text-foreground">{pastedFilename}</p>
-							<p class="text-[11px] text-foreground-tertiary">{formatSize(pastedImage)}</p>
-						</div>
-						<button
-							type="button"
-							class="flex-shrink-0 rounded p-1.5 text-foreground-tertiary transition-colors hover:bg-surface-hover hover:text-foreground"
-							onclick={() => { pastedImage = null; pastedFilename = ''; }}
-							aria-label="Remove image"
-						>
-							<i class="fa-solid fa-xmark" aria-hidden="true"></i>
-						</button>
-					</div>
-				{/if}
-
-				<!-- Toolbar -->
-				<div class="flex flex-wrap items-center justify-between gap-2 border-t border-border px-3 py-2.5">
-					<div class="flex items-center gap-2">
-						<div class="min-w-[150px]">
-							<Select
-								class="border-0 bg-transparent"
-								size="sm"
-								placeholder="Category…"
-								options={categoryOptions}
-								required
-								bind:value={category}
-							/>
-						</div>
-						<button
-							type="button"
-							class="inline-flex items-center gap-1.5 rounded-md border border-border bg-surface px-2.5 py-1.5 text-xs font-medium text-foreground-secondary transition-colors hover:border-border-strong hover:text-foreground"
-							onclick={() => fileInputEl?.click()}
-						>
-							<i class="fa-solid fa-image" aria-hidden="true"></i>
-							Attach screenshot
-						</button>
-					</div>
-					<Button
-						variant="primary"
-						size="sm"
-						disabled={submitting || !message.trim() || !category}
-						loading={submitting}
-						onclick={handleSubmit}
-					>
-						Submit
-					</Button>
-				</div>
-
-				<input
-					bind:this={fileInputEl}
-					type="file"
-					accept="image/png,image/jpeg,image/gif,image/webp"
-					class="hidden"
-					onchange={handleFileSelect}
-				/>
-			</div>
-
-			{#if error}
-				<p class="text-sm text-red-400">
-					<i class="fa-solid fa-exclamation-circle mr-1" aria-hidden="true"></i>
-					{error}
-				</p>
-			{/if}
-		</div>
-	{/if}
-</div>
+<script lang="ts">
+	import { Button, Input, Textarea, Select } from '@alliance-droid/svelte-component-library';
+	import { FEEDBACK_CATEGORIES } from '../../types.js';
+	import type { FeedbackBoardState } from './state.svelte.js';
+
+	interface Props {
+		board: FeedbackBoardState;
+	}
+
+	let { board }: Props = $props();
+
+	let title = $state('');
+	let message = $state('');
+	let category = $state('');
+	let submitting = $state(false);
+	let success = $state(false);
+	let error = $state('');
+	let pastedImage = $state<string | null>(null);
+	let pastedFilename = $state('');
+	let fileInputEl: HTMLInputElement | undefined = $state();
+	let dragActive = $state(false);
+	let textareaWrapperEl: HTMLDivElement | undefined = $state();
+	let textareaEl: HTMLTextAreaElement | undefined = $state();
+
+	const MAX_BYTES = 5 * 1024 * 1024;
+	const ALLOWED_MIME = ['image/png', 'image/jpeg', 'image/gif', 'image/webp'];
+
+	$effect(() => {
+		if (textareaWrapperEl) {
+			textareaEl = textareaWrapperEl.querySelector('textarea') ?? undefined;
+		}
+	});
+
+	$effect(() => {
+		if (!textareaEl) return;
+		const handler = (e: ClipboardEvent) => handlePaste(e);
+		textareaEl.addEventListener('paste', handler);
+		return () => textareaEl?.removeEventListener('paste', handler);
+	});
+
+	let isAuthenticated = $derived(!!board.userEmail);
+
+	// Labels are the canonical system category names — not the consumer's
+	// `categoryConfig` (which only customizes the sidebar).
+	let categoryOptions = FEEDBACK_CATEGORIES.map((c) => ({ value: c, label: c }));
+
+	/** Validate and load an image file (shared by paste, file-pick, and drop). */
+	function processFile(file: File) {
+		if (!ALLOWED_MIME.includes(file.type)) {
+			error = 'Unsupported image type — PNG, JPEG, GIF, or WebP only';
+			return;
+		}
+		if (file.size > MAX_BYTES) {
+			error = 'Image too large — max 5 MB';
+			return;
+		}
+		const reader = new FileReader();
+		reader.onload = () => {
+			pastedImage = reader.result as string;
+			const ext = file.type.split('/')[1] || 'png';
+			const stamp = new Date().toISOString().replace(/[-:T]/g, '').slice(0, 14);
+			pastedFilename = file.name || `screenshot-${stamp}.${ext}`;
+			error = '';
+		};
+		reader.readAsDataURL(file);
+	}
+
+	function handlePaste(e: ClipboardEvent) {
+		const clipItems = Array.from(e.clipboardData?.items ?? []);
+		const imageItem = clipItems.find((i) => i.kind === 'file' && i.type.startsWith('image/'));
+		if (!imageItem) return;
+		const file = imageItem.getAsFile();
+		if (!file) return;
+		e.preventDefault();
+		processFile(file);
+	}
+
+	function handleFileSelect(e: Event) {
+		const input = e.currentTarget as HTMLInputElement;
+		const file = input.files?.[0];
+		if (file) processFile(file);
+		input.value = '';
+	}
+
+	function handleDrop(e: DragEvent) {
+		e.preventDefault();
+		dragActive = false;
+		const file = e.dataTransfer?.files?.[0];
+		if (file) processFile(file);
+	}
+
+	function formatSize(dataUrl: string): string {
+		const comma = dataUrl.indexOf(',');
+		if (comma === -1) return '';
+		const bytes = Math.round((dataUrl.length - comma - 1) * 0.75);
+		if (bytes < 1024) return `${bytes} B`;
+		if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+		return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
+	}
+
+	async function handleSubmit() {
+		if (!message.trim() || !category || !isAuthenticated) return;
+		submitting = true;
+		error = '';
+		try {
+			await board.submitFeedback({
+				title: title.trim() || undefined,
+				message: message.trim(),
+				category,
+				pastedImage,
+			});
+			success = true;
+			title = '';
+			message = '';
+			category = '';
+			pastedImage = null;
+			pastedFilename = '';
+			setTimeout(() => { success = false; }, 2000);
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Failed to submit';
+		} finally {
+			submitting = false;
+		}
+	}
+</script>
+
+<div>
+	{#if !isAuthenticated}
+		<div class="py-3 text-center text-foreground-tertiary">
+			<i class="fa-solid fa-lock mr-1" aria-hidden="true"></i>
+			<span class="text-sm">Sign in to submit feedback</span>
+		</div>
+	{:else if success}
+		<div class="py-2 text-center font-semibold text-green-400">
+			<i class="fa-solid fa-check-circle mr-1"></i> Submitted!
+		</div>
+	{:else}
+		<div class="space-y-2">
+			<!-- Composer card: title + description + attachment + toolbar -->
+			<div
+				class="overflow-hidden rounded-xl border bg-background shadow-sm transition-all {dragActive
+					? 'border-primary ring-2 ring-primary/30'
+					: 'border-border focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20'}"
+				role="group"
+				ondragover={(e) => { e.preventDefault(); dragActive = true; }}
+				ondragleave={() => (dragActive = false)}
+				ondrop={handleDrop}
+			>
+				<div class="border-b border-border">
+					<Input
+						class="rounded-none border-0 bg-transparent px-4 py-3 text-sm font-medium hover:border-transparent focus:border-transparent"
+						bind:value={title}
+						placeholder="Title (optional)"
+					/>
+				</div>
+
+				<div bind:this={textareaWrapperEl}>
+					<Textarea
+						class="resize-none rounded-none border-0 bg-transparent px-4 py-3 text-sm hover:border-transparent focus:border-transparent"
+						value={message}
+						oninput={(e) => (message = (e.currentTarget as HTMLTextAreaElement).value)}
+						placeholder="Describe your feedback…"
+						rows={4}
+					/>
+				</div>
+
+				{#if pastedImage}
+					<div class="flex items-center gap-3 border-t border-border px-3 py-2">
+						<img
+							src={pastedImage}
+							alt={pastedFilename}
+							class="h-11 w-11 flex-shrink-0 rounded border border-border object-cover"
+						/>
+						<div class="min-w-0 flex-1">
+							<p class="truncate text-xs font-medium text-foreground">{pastedFilename}</p>
+							<p class="text-[11px] text-foreground-tertiary">{formatSize(pastedImage)}</p>
+						</div>
+						<button
+							type="button"
+							class="flex-shrink-0 rounded p-1.5 text-foreground-tertiary transition-colors hover:bg-surface-hover hover:text-foreground"
+							onclick={() => { pastedImage = null; pastedFilename = ''; }}
+							aria-label="Remove image"
+						>
+							<i class="fa-solid fa-xmark" aria-hidden="true"></i>
+						</button>
+					</div>
+				{/if}
+
+				<!-- Toolbar -->
+				<div class="flex flex-wrap items-center justify-between gap-2 border-t border-border px-3 py-2.5">
+					<div class="flex items-center gap-2">
+						<div class="min-w-[150px]">
+							<Select
+								class="border-0 bg-transparent"
+								size="sm"
+								placeholder="Category…"
+								options={categoryOptions}
+								required
+								bind:value={category}
+							/>
+						</div>
+						<button
+							type="button"
+							class="inline-flex items-center gap-1.5 rounded-md border border-border bg-surface px-2.5 py-1.5 text-xs font-medium text-foreground-secondary transition-colors hover:border-border-strong hover:text-foreground"
+							onclick={() => fileInputEl?.click()}
+						>
+							<i class="fa-solid fa-image" aria-hidden="true"></i>
+							Attach screenshot
+						</button>
+					</div>
+					<Button
+						variant="primary"
+						size="sm"
+						disabled={submitting || !message.trim() || !category}
+						loading={submitting}
+						onclick={handleSubmit}
+					>
+						Submit
+					</Button>
+				</div>
+
+				<input
+					bind:this={fileInputEl}
+					type="file"
+					accept="image/png,image/jpeg,image/gif,image/webp"
+					class="hidden"
+					onchange={handleFileSelect}
+				/>
+			</div>
+
+			{#if error}
+				<p class="text-sm text-red-400">
+					<i class="fa-solid fa-exclamation-circle mr-1" aria-hidden="true"></i>
+					{error}
+				</p>
+			{/if}
+		</div>
+	{/if}
+</div>

package/dist/components/board/StatusBadgeMenu.svelte

@@ -1,264 +1,266 @@
-<script lang="ts">
-	/**
-	 * Status badge that doubles as a status-change control for privileged users.
-	 *
-	 * For a viewer without a token (board.canManageStatus === false) it's just a
-	 * read-only badge. For a privileged user the badge is a button: clicking it
-	 * loads the transitions they may make and shows them in a menu; picking one
-	 * applies it (prompting for a reason first when the transition requires one).
-	 *
-	 * The menu is teleported to <body> (the `portal` action) and positioned with
-	 * fixed coordinates from the trigger, so it never gets clipped by an overflow
-	 * or transformed ancestor (e.g. a sliding side rail). Same approach the
-	 * library's Select uses.
-	 *
-	 * Used in both the detail panel and the list row, so a ProductOwner can change
-	 * status without opening the item. Transitions load on demand (on first open)
-	 * unless `loadOnMount` is set — the list stays lazy so it doesn't fire a
-	 * request per row.
-	 */
-	import { Badge, Button, Textarea, Spinner } from '@alliance-droid/svelte-component-library';
-	import { onMount } from 'svelte';
-	import type { BoardItem, BoardTransition } from '../../api.js';
-	import type { FeedbackBoardState } from './state.svelte.js';
-	import { getStatusBadgeVariant, publicStatusLabel } from './utils.js';
-
-	interface Props {
-		board: FeedbackBoardState;
-		item: BoardItem;
-		/** Eagerly load transitions on mount (detail view). The list leaves this off. */
-		loadOnMount?: boolean;
-	}
-
-	let { board, item, loadOnMount = false }: Props = $props();
-
-	let menuOpen = $state(false);
-	let pendingTarget = $state<BoardTransition | null>(null);
-	let reason = $state('');
-	let applying = $state(false);
-	let loading = $state(false);
-	/** True when the last load attempt failed (token rejected / network) vs. genuinely returned no targets. */
-	let loadFailed = $state(false);
-	let error = $state('');
-	let triggerEl: HTMLButtonElement | undefined = $state();
-	let menuEl: HTMLDivElement | undefined = $state();
-
-	// Read from the board's shared cache so detail + list reuse the same fetch.
-	let txns = $derived(board.transitions[item.id] ?? null);
-	let badgeLabel = $derived(txns?.current.display ?? publicStatusLabel(item.publicStatus));
-	// Changes whenever the menu's content (and thus its size) changes — drives a
-	// reposition so the teleported menu stays anchored after it loads/expands.
-	let posKey = $derived(`${menuOpen}:${loading}:${pendingTarget?.status ?? ''}:${txns?.targets.length ?? 0}`);
-
-	onMount(() => {
-		if (loadOnMount && board.canManageStatus) void board.loadTransitions(item.id);
-	});
-
-	/** Teleport the menu to <body> and keep it positioned under the trigger.
-	 *  The second arg (`posKey`) is unused directly — changing it just triggers
-	 *  the action's `update()` so the menu re-positions when its content resizes. */
-	function portal(node: HTMLElement, _posKey?: string) {
-		document.body.appendChild(node);
-
-		function position() {
-			if (!triggerEl) return;
-			const rect = triggerEl.getBoundingClientRect();
-			node.style.position = 'fixed';
-			node.style.top = `${rect.bottom + 6}px`;
-			node.style.zIndex = '9999';
-			// Left-align to the trigger, then clamp into the viewport.
-			let left = rect.left;
-			const width = node.offsetWidth;
-			if (left + width > window.innerWidth - 8) left = window.innerWidth - width - 8;
-			if (left < 8) left = 8;
-			node.style.left = `${left}px`;
-		}
-
-		position();
-		requestAnimationFrame(position);
-
-		const onScroll = () => position();
-		window.addEventListener('scroll', onScroll, true);
-		window.addEventListener('resize', onScroll);
-
-		return {
-			update() {
-				position();
-				requestAnimationFrame(position);
-			},
-			destroy() {
-				window.removeEventListener('scroll', onScroll, true);
-				window.removeEventListener('resize', onScroll);
-				node.remove();
-			},
-		};
-	}
-
-	// Close on outside click / Escape while open.
-	$effect(() => {
-		if (!menuOpen) return;
-		const onDocClick = (e: MouseEvent) => {
-			const target = e.target as Node;
-			if (triggerEl?.contains(target) || menuEl?.contains(target)) return;
-			closeMenu();
-		};
-		const onKey = (e: KeyboardEvent) => {
-			if (e.key === 'Escape') closeMenu();
-		};
-		document.addEventListener('click', onDocClick, true);
-		document.addEventListener('keydown', onKey, true);
-		return () => {
-			document.removeEventListener('click', onDocClick, true);
-			document.removeEventListener('keydown', onKey, true);
-		};
-	});
-
-	async function toggleMenu(e: MouseEvent) {
-		e.stopPropagation();
-		if (menuOpen) {
-			closeMenu();
-			return;
-		}
-		error = '';
-		pendingTarget = null;
-		reason = '';
-		// Open immediately so the spinner is visible while transitions load.
-		menuOpen = true;
-		if (!txns) await reload();
-	}
-
-	async function reload() {
-		loading = true;
-		loadFailed = false;
-		try {
-			// null = couldn't load (no token / rejected / network), not "no transitions".
-			loadFailed = (await board.loadTransitions(item.id)) === null;
-		} finally {
-			loading = false;
-		}
-	}
-
-	function closeMenu() {
-		menuOpen = false;
-		pendingTarget = null;
-		reason = '';
-		error = '';
-	}
-
-	async function chooseStatus(target: BoardTransition) {
-		error = '';
-		if (target.requiresReason) {
-			pendingTarget = target;
-			reason = '';
-			return;
-		}
-		await applyStatus(target);
-	}
-
-	async function applyStatus(target: BoardTransition, withReason?: string) {
-		applying = true;
-		error = '';
-		try {
-			await board.setStatus(item.id, target.status, withReason);
-			closeMenu();
-		} catch (err) {
-			error = err instanceof Error ? err.message : 'Failed to update status';
-		} finally {
-			applying = false;
-		}
-	}
-
-	function confirmReason() {
-		if (!pendingTarget) return;
-		if (!reason.trim()) {
-			error = 'A reason is required for this change';
-			return;
-		}
-		applyStatus(pendingTarget, reason.trim());
-	}
-</script>
-
-{#if board.canManageStatus}
-	<button
-		bind:this={triggerEl}
-		type="button"
-		class="inline-flex items-center gap-1.5 rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 disabled:opacity-60"
-		onclick={toggleMenu}
-		aria-haspopup="listbox"
-		aria-expanded={menuOpen}
-		disabled={applying}
-		title="Change status"
-	>
-		<Badge variant={getStatusBadgeVariant(item.publicStatus)} size="sm">{badgeLabel}</Badge>
-		<i class="fa-solid fa-chevron-down text-[0.625rem] text-foreground-tertiary" aria-hidden="true"></i>
-	</button>
-
-	{#if menuOpen}
-		<!-- Teleported to <body>; posKey re-positions it when its size changes. -->
-		<div
-			bind:this={menuEl}
-			use:portal={posKey}
-			class="max-h-[60vh] w-max min-w-[10rem] overflow-y-auto overflow-x-hidden rounded-lg border border-border bg-surface py-1 shadow-lg"
-			role="listbox"
-		>
-			{#if loading}
-				<div class="flex items-center gap-2 px-3 py-3 text-sm text-foreground-tertiary">
-					<Spinner /> Loading…
-				</div>
-			{:else if pendingTarget}
-				<div class="w-64 space-y-2 p-3">
-					<p class="text-xs font-medium text-foreground">Reason for &ldquo;{pendingTarget.display}&rdquo;</p>
-					<Textarea
-						value={reason}
-						oninput={(e) => (reason = (e.currentTarget as HTMLTextAreaElement).value)}
-						placeholder="Why are you making this change?"
-						rows={2}
-					/>
-					{#if error}
-						<p class="text-xs text-red-400">{error}</p>
-					{/if}
-					<div class="flex justify-end gap-2">
-						<Button variant="neutral" style="ghost" size="sm" onclick={() => { pendingTarget = null; reason = ''; error = ''; }}>
-							Back
-						</Button>
-						<Button variant="primary" size="sm" loading={applying} disabled={applying} onclick={confirmReason}>
-							Apply
-						</Button>
-					</div>
-				</div>
-			{:else if txns && txns.targets.length > 0}
-				{#each txns.targets as target (target.status)}
-					<button
-						type="button"
-						role="option"
-						aria-selected="false"
-						class="flex w-full items-center justify-between gap-3 whitespace-nowrap px-3 py-2 text-left text-sm text-foreground transition-colors hover:bg-surface-hover disabled:opacity-60"
-						onclick={() => chooseStatus(target)}
-						disabled={applying}
-					>
-						<span>{target.display}</span>
-						{#if target.requiresReason}
-							<i class="fa-solid fa-pen text-[0.625rem] text-foreground-tertiary" title="Requires a reason" aria-hidden="true"></i>
-						{/if}
-					</button>
-				{/each}
-			{:else if loadFailed}
-				<div class="w-56 space-y-2 p-3 text-sm">
-					<p class="text-foreground-secondary">
-						Couldn't load status options — your session may have expired.
-					</p>
-					<Button variant="neutral" style="ghost" size="sm" onclick={reload}>Try again</Button>
-				</div>
-			{:else}
-				<p class="whitespace-nowrap px-3 py-3 text-sm text-foreground-tertiary">No status changes available.</p>
-			{/if}
-			{#if error && !pendingTarget && !loading}
-				<p class="px-3 pb-2 text-xs text-red-400">{error}</p>
-			{/if}
-		</div>
-	{/if}
-{:else}
-	<Badge variant={getStatusBadgeVariant(item.publicStatus)} size="sm">
-		{publicStatusLabel(item.publicStatus)}
-	</Badge>
-{/if}
+<script lang="ts">
+	/**
+	 * Status badge that doubles as a status-change control for privileged users.
+	 *
+	 * For a viewer without a token (board.canManageStatus === false) it's just a
+	 * read-only badge. For a privileged user the badge is a button: clicking it
+	 * loads the transitions they may make and shows them in a menu; picking one
+	 * applies it (prompting for a reason first when the transition requires one).
+	 *
+	 * The menu is teleported to <body> (the `portal` action) and positioned with
+	 * fixed coordinates from the trigger, so it never gets clipped by an overflow
+	 * or transformed ancestor (e.g. a sliding side rail). Same approach the
+	 * library's Select uses.
+	 *
+	 * Used in both the detail panel and the list row, so a ProductOwner can change
+	 * status without opening the item. Transitions load on demand (on first open)
+	 * unless `loadOnMount` is set — the list stays lazy so it doesn't fire a
+	 * request per row.
+	 */
+	import { Badge, Button, Textarea, Spinner } from '@alliance-droid/svelte-component-library';
+	import { onMount } from 'svelte';
+	import type { BoardItem, BoardTransition } from '../../api.js';
+	import type { FeedbackBoardState } from './state.svelte.js';
+	import { getStatusBadgeVariant, publicStatusLabel } from './utils.js';
+
+	interface Props {
+		board: FeedbackBoardState;
+		item: BoardItem;
+		/** Eagerly load transitions on mount (detail view). The list leaves this off. */
+		loadOnMount?: boolean;
+	}
+
+	let { board, item, loadOnMount = false }: Props = $props();
+
+	let menuOpen = $state(false);
+	let pendingTarget = $state<BoardTransition | null>(null);
+	let reason = $state('');
+	let applying = $state(false);
+	let loading = $state(false);
+	/** True when the last load attempt failed (token rejected / network) vs. genuinely returned no targets. */
+	let loadFailed = $state(false);
+	let error = $state('');
+	let triggerEl: HTMLButtonElement | undefined = $state();
+	let menuEl: HTMLDivElement | undefined = $state();
+
+	// Read from the board's shared cache so detail + list reuse the same fetch.
+	let txns = $derived(board.transitions[item.id] ?? null);
+	let badgeLabel = $derived(txns?.current.display ?? publicStatusLabel(item.publicStatus));
+	// Changes whenever the menu's content (and thus its size) changes — drives a
+	// reposition so the teleported menu stays anchored after it loads/expands.
+	let posKey = $derived(`${menuOpen}:${loading}:${pendingTarget?.status ?? ''}:${txns?.targets.length ?? 0}`);
+
+	onMount(() => {
+		// Eagerly load in the detail view: this both readies the menu and lets the
+		// board confirm privilege (loadTransitions is a no-op without a token).
+		if (loadOnMount) void board.loadTransitions(item.id);
+	});
+
+	/** Teleport the menu to <body> and keep it positioned under the trigger.
+	 *  The second arg (`posKey`) is unused directly — changing it just triggers
+	 *  the action's `update()` so the menu re-positions when its content resizes. */
+	function portal(node: HTMLElement, _posKey?: string) {
+		document.body.appendChild(node);
+
+		function position() {
+			if (!triggerEl) return;
+			const rect = triggerEl.getBoundingClientRect();
+			node.style.position = 'fixed';
+			node.style.top = `${rect.bottom + 6}px`;
+			node.style.zIndex = '9999';
+			// Left-align to the trigger, then clamp into the viewport.
+			let left = rect.left;
+			const width = node.offsetWidth;
+			if (left + width > window.innerWidth - 8) left = window.innerWidth - width - 8;
+			if (left < 8) left = 8;
+			node.style.left = `${left}px`;
+		}
+
+		position();
+		requestAnimationFrame(position);
+
+		const onScroll = () => position();
+		window.addEventListener('scroll', onScroll, true);
+		window.addEventListener('resize', onScroll);
+
+		return {
+			update() {
+				position();
+				requestAnimationFrame(position);
+			},
+			destroy() {
+				window.removeEventListener('scroll', onScroll, true);
+				window.removeEventListener('resize', onScroll);
+				node.remove();
+			},
+		};
+	}
+
+	// Close on outside click / Escape while open.
+	$effect(() => {
+		if (!menuOpen) return;
+		const onDocClick = (e: MouseEvent) => {
+			const target = e.target as Node;
+			if (triggerEl?.contains(target) || menuEl?.contains(target)) return;
+			closeMenu();
+		};
+		const onKey = (e: KeyboardEvent) => {
+			if (e.key === 'Escape') closeMenu();
+		};
+		document.addEventListener('click', onDocClick, true);
+		document.addEventListener('keydown', onKey, true);
+		return () => {
+			document.removeEventListener('click', onDocClick, true);
+			document.removeEventListener('keydown', onKey, true);
+		};
+	});
+
+	async function toggleMenu(e: MouseEvent) {
+		e.stopPropagation();
+		if (menuOpen) {
+			closeMenu();
+			return;
+		}
+		error = '';
+		pendingTarget = null;
+		reason = '';
+		// Open immediately so the spinner is visible while transitions load.
+		menuOpen = true;
+		if (!txns) await reload();
+	}
+
+	async function reload() {
+		loading = true;
+		loadFailed = false;
+		try {
+			// null = couldn't load (no token / rejected / network), not "no transitions".
+			loadFailed = (await board.loadTransitions(item.id)) === null;
+		} finally {
+			loading = false;
+		}
+	}
+
+	function closeMenu() {
+		menuOpen = false;
+		pendingTarget = null;
+		reason = '';
+		error = '';
+	}
+
+	async function chooseStatus(target: BoardTransition) {
+		error = '';
+		if (target.requiresReason) {
+			pendingTarget = target;
+			reason = '';
+			return;
+		}
+		await applyStatus(target);
+	}
+
+	async function applyStatus(target: BoardTransition, withReason?: string) {
+		applying = true;
+		error = '';
+		try {
+			await board.setStatus(item.id, target.status, withReason);
+			closeMenu();
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Failed to update status';
+		} finally {
+			applying = false;
+		}
+	}
+
+	function confirmReason() {
+		if (!pendingTarget) return;
+		if (!reason.trim()) {
+			error = 'A reason is required for this change';
+			return;
+		}
+		applyStatus(pendingTarget, reason.trim());
+	}
+</script>
+
+{#if board.canManageStatus}
+	<button
+		bind:this={triggerEl}
+		type="button"
+		class="inline-flex items-center gap-1.5 rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 disabled:opacity-60"
+		onclick={toggleMenu}
+		aria-haspopup="listbox"
+		aria-expanded={menuOpen}
+		disabled={applying}
+		title="Change status"
+	>
+		<Badge variant={getStatusBadgeVariant(item.publicStatus)} size="sm">{badgeLabel}</Badge>
+		<i class="fa-solid fa-chevron-down text-[0.625rem] text-foreground-tertiary" aria-hidden="true"></i>
+	</button>
+
+	{#if menuOpen}
+		<!-- Teleported to <body>; posKey re-positions it when its size changes. -->
+		<div
+			bind:this={menuEl}
+			use:portal={posKey}
+			class="max-h-[60vh] w-max min-w-[10rem] overflow-y-auto overflow-x-hidden rounded-lg border border-border bg-surface py-1 shadow-lg"
+			role="listbox"
+		>
+			{#if loading}
+				<div class="flex items-center gap-2 px-3 py-3 text-sm text-foreground-tertiary">
+					<Spinner /> Loading…
+				</div>
+			{:else if pendingTarget}
+				<div class="w-64 space-y-2 p-3">
+					<p class="text-xs font-medium text-foreground">Reason for &ldquo;{pendingTarget.display}&rdquo;</p>
+					<Textarea
+						value={reason}
+						oninput={(e) => (reason = (e.currentTarget as HTMLTextAreaElement).value)}
+						placeholder="Why are you making this change?"
+						rows={2}
+					/>
+					{#if error}
+						<p class="text-xs text-red-400">{error}</p>
+					{/if}
+					<div class="flex justify-end gap-2">
+						<Button variant="neutral" style="ghost" size="sm" onclick={() => { pendingTarget = null; reason = ''; error = ''; }}>
+							Back
+						</Button>
+						<Button variant="primary" size="sm" loading={applying} disabled={applying} onclick={confirmReason}>
+							Apply
+						</Button>
+					</div>
+				</div>
+			{:else if txns && txns.targets.length > 0}
+				{#each txns.targets as target (target.status)}
+					<button
+						type="button"
+						role="option"
+						aria-selected="false"
+						class="flex w-full items-center justify-between gap-3 whitespace-nowrap px-3 py-2 text-left text-sm text-foreground transition-colors hover:bg-surface-hover disabled:opacity-60"
+						onclick={() => chooseStatus(target)}
+						disabled={applying}
+					>
+						<span>{target.display}</span>
+						{#if target.requiresReason}
+							<i class="fa-solid fa-pen text-[0.625rem] text-foreground-tertiary" title="Requires a reason" aria-hidden="true"></i>
+						{/if}
+					</button>
+				{/each}
+			{:else if loadFailed}
+				<div class="w-56 space-y-2 p-3 text-sm">
+					<p class="text-foreground-secondary">
+						Couldn't load status options — your session may have expired.
+					</p>
+					<Button variant="neutral" style="ghost" size="sm" onclick={reload}>Try again</Button>
+				</div>
+			{:else}
+				<p class="whitespace-nowrap px-3 py-3 text-sm text-foreground-tertiary">No status changes available.</p>
+			{/if}
+			{#if error && !pendingTarget && !loading}
+				<p class="px-3 pb-2 text-xs text-red-400">{error}</p>
+			{/if}
+		</div>
+	{/if}
+{:else}
+	<Badge variant={getStatusBadgeVariant(item.publicStatus)} size="sm">
+		{publicStatusLabel(item.publicStatus)}
+	</Badge>
+{/if}

package/dist/components/board/state.svelte.d.ts

@@ -20,10 +20,11 @@ export interface FeedbackBoardOptions {
     /** Authenticated user email. Required for submitting feedback and replies. */
     userEmail?: string;
     /**
-     * Returns the current user's Alliance OIDC id token (or null if they aren't
-     * signed in / not privileged). When provided, privileged users (Admin /
-     * ProductOwner) can set feedback status from the board. Called on demand so
-     * the host controls token refresh.
+     * Returns the current user's Alliance OIDC **access token** — whose audience
+     * covers `status-feedback-admin` (an id token is rejected by the backend) — or
+     * null if they aren't signed in / not privileged. When provided, privileged
+     * users (Admin / ProductOwner) can set feedback status from the board. Called
+     * on demand so the host controls token refresh.
      */
     getAuthToken?: () => string | Promise<string | null>;
     /** Items per page. Default: 50 */
@@ -39,6 +40,8 @@ export interface FeedbackBoardState {
     readonly loading: boolean;
     readonly loadingMore: boolean;
     readonly error: string;
+    /** Error from the most recent `loadMore()`, or '' — cleared on the next attempt. */
+    readonly loadMoreError: string;
     readonly hasMore: boolean;
     activeCategory: string | null;
     statusFilter: string;
@@ -56,7 +59,12 @@ export interface FeedbackBoardState {
         pastedImage?: string | null;
     }): Promise<void>;
     submitResponse(itemId: string, message: string, pastedImage?: string | null): Promise<void>;
-    /** Whether a token provider was configured (status controls may be available). */
+    /**
+     * Whether the current user may manage status — resolved against the backend
+     * (valid token AND a qualifying role + project access), not merely whether a
+     * token getter was provided. Starts `false` and flips `true` once confirmed,
+     * so UI can gate the status control by actual privilege.
+     */
     readonly canManageStatus: boolean;
     /** Cached allowed transitions per item id, populated by loadTransitions. */
     readonly transitions: Record<string, BoardTransitions>;

package/dist/components/board/state.svelte.js

@@ -24,10 +24,16 @@ export function createFeedbackBoard(options) {
     let sortBy = $state('votes');
     let votedItems = $state({});
     let voteErrors = $state({});
+    let loadMoreError = $state('');
     let transitions = $state({});
+    // Resolved status-management privilege (one-time backend probe, not token presence).
+    let statusPrivilege = $state(false);
+    let privilegeProbed = false;
     // Response cache
     const responseCache = {};
-    // Track in-flight votes to prevent duplicate requests
+    // Track in-flight votes to prevent duplicate requests. A plain Set is correct
+    // here — an internal dedup guard, not reactive UI state.
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
     const pendingVotes = new Set();
     async function load() {
         loading = true;
@@ -43,6 +49,7 @@ export function createFeedbackBoard(options) {
             items = data.items;
             total = data.total;
             categories = data.categories;
+            void ensureStatusPrivilege();
         }
         catch (e) {
             error = e instanceof Error ? e.message : 'Failed to load';
@@ -55,6 +62,7 @@ export function createFeedbackBoard(options) {
         if (loadingMore || items.length >= total)
             return;
         loadingMore = true;
+        loadMoreError = '';
         try {
             const data = await client.getBoard({
                 category: activeCategory || undefined,
@@ -66,8 +74,8 @@ export function createFeedbackBoard(options) {
             items = [...items, ...data.items];
             total = data.total;
         }
-        catch {
-            // Silently fail — user can retry
+        catch (e) {
+            loadMoreError = e instanceof Error ? e.message : 'Failed to load more';
         }
         finally {
             loadingMore = false;
@@ -87,7 +95,8 @@ export function createFeedbackBoard(options) {
         const prev = votedItems[itemId];
         // Clear any prior error for this item
         if (voteErrors[itemId]) {
-            const { [itemId]: _, ...rest } = voteErrors;
+            const rest = { ...voteErrors };
+            delete rest[itemId];
             voteErrors = rest;
         }
         try {
@@ -107,8 +116,9 @@ export function createFeedbackBoard(options) {
             voteErrors = { ...voteErrors, [itemId]: 'Vote failed' };
             // Auto-dismiss after 3 seconds
             setTimeout(() => {
-                const { [itemId]: _, ...rest } = voteErrors;
-                voteErrors = rest;
+                const next = { ...voteErrors };
+                delete next[itemId];
+                voteErrors = next;
             }, 3000);
         }
         finally {
@@ -174,6 +184,7 @@ export function createFeedbackBoard(options) {
         try {
             const result = await client.getBoardTransitions(itemId, token);
             transitions = { ...transitions, [itemId]: result };
+            statusPrivilege = true; // a successful load means the backend authorized this user
             return result;
         }
         catch {
@@ -181,6 +192,21 @@ export function createFeedbackBoard(options) {
             return null;
         }
     }
+    /**
+     * One-time probe so the UI can gate the status control by *actual* privilege
+     * (valid token + qualifying role + project access), not merely token presence.
+     * Loads the first item's transitions once; a non-null result confirms the
+     * backend authorized the user. No token / no items / a 403 leaves it `false`.
+     */
+    async function ensureStatusPrivilege() {
+        if (privilegeProbed || !getAuthToken)
+            return;
+        const sample = items[0];
+        if (!sample)
+            return;
+        privilegeProbed = true;
+        statusPrivilege = (await loadTransitions(sample.id)) !== null;
+    }
     async function setStatus(itemId, status, reason) {
         const token = await resolveToken();
         if (!token)
@@ -204,6 +230,7 @@ export function createFeedbackBoard(options) {
         get loading() { return loading; },
         get loadingMore() { return loadingMore; },
         get error() { return error; },
+        get loadMoreError() { return loadMoreError; },
         get hasMore() { return items.length < total; },
         get activeCategory() { return activeCategory; },
         set activeCategory(v) { activeCategory = v; },
@@ -219,7 +246,7 @@ export function createFeedbackBoard(options) {
         getResponses,
         submitFeedback,
         submitResponse,
-        get canManageStatus() { return !!getAuthToken; },
+        get canManageStatus() { return statusPrivilege; },
         get transitions() { return transitions; },
         loadTransitions,
         setStatus,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@alliance-droid/status-feedback-system",
-	"version": "4.0.0",
+	"version": "4.0.2",
 	"type": "module",
 	"description": "Drop-in system status pages and user feedback forms for SvelteKit apps",
 	"svelte": "./dist/index.js",