@alliance-droid/status-feedback-system 4.2.4 → 4.3.1

package/dist/api.d.ts

@@ -47,11 +47,16 @@ export interface BoardItem {
     adminResponse: string | null;
     responseCount: number;
     createdAt: number;
+    /** Server-authorized consumer-board status control for this item. */
+    canChangeStatus?: boolean;
+    /** This item is awaiting a product decision or reply from a board manager. */
+    needsInput?: boolean;
 }
 export interface BoardData {
     items: BoardItem[];
     total: number;
     categories: BoardCategory[];
+    canManageStatus?: boolean;
 }
 /** A status a privileged user may move an item to, and whether it needs a reason. */
 export interface BoardTransition {
@@ -78,6 +83,8 @@ export interface BoardStatusUpdate {
     id: string;
     status: string;
     publicStatus: PublicStatus;
+    canChangeStatus?: boolean;
+    needsInput?: boolean;
 }
 export interface StatusClient {
     /** Get current system statuses */
@@ -103,11 +110,11 @@ export interface StatusClient {
     /** Get public feedback board */
     getBoard(options?: {
         category?: string;
-        status?: 'open' | 'resolved' | 'all';
+        status?: 'open' | 'resolved' | 'all' | 'needs_input';
         sort?: 'votes' | 'newest';
         limit?: number;
         offset?: number;
-    }): Promise<BoardData>;
+    }, token?: string | null): Promise<BoardData>;
     /**
      * Status transitions the token's user may make on a board item. `token` must
      * be an Alliance OIDC **access token** whose audience covers

package/dist/api.js

@@ -75,7 +75,7 @@ export function createStatusClient(config) {
                 body: JSON.stringify(data),
             });
         },
-        async getBoard(options) {
+        async getBoard(options, token) {
             const params = new URLSearchParams();
             if (options?.category)
                 params.set('category', options.category);
@@ -88,7 +88,9 @@ export function createStatusClient(config) {
             if (options?.offset)
                 params.set('offset', String(options.offset));
             const qs = params.toString();
-            return request(`/api/board${qs ? `?${qs}` : ''}`);
+            return request(`/api/board${qs ? `?${qs}` : ''}`, token
+                ? { headers: { Authorization: `Bearer ${token}` } }
+                : undefined);
         },
         async getBoardTransitions(feedbackId, token) {
             return request(`/api/board/feedback/${feedbackId}/transitions`, {

package/dist/components/board/FeedbackItem.svelte

@@ -3,7 +3,8 @@
 	import type { BoardItem } from '../../api.js';
 	import type { FeedbackBoardState } from './state.svelte.js';
 	import { timeAgo } from './utils.js';
-	import StatusBadgeMenu from './StatusBadgeMenu.svelte';
+	import StatusBadgeMenu from './StatusBadgeMenu.svelte';
+	import { canChangeItemStatus } from './capabilities.js';
 
 	interface Props {
 		board: FeedbackBoardState;
@@ -13,11 +14,13 @@
 
 	let { board, item, onclick }: Props = $props();
 
-	let isClickable = $derived(!!onclick);
+	let isClickable = $derived(!!onclick);
+	let canChangeStatus = $derived(canChangeItemStatus(board, item));
 </script>
 
 <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-<article
+<article
+	class:sf-editable={canChangeStatus}
 	class="rounded-xl border border-border bg-surface p-4 transition-all {isClickable ? 'cursor-pointer hover:border-border-strong hover:bg-surface-hover' : ''}"
 	role={isClickable ? 'button' : undefined}
 	tabindex={isClickable ? 0 : undefined}
@@ -75,7 +78,12 @@
 				<StatusBadgeMenu {board} {item} />
 			</div>
 
-			<!-- Meta -->
+			<!-- Meta -->
+			{#if canChangeStatus}
+				<p class="sf-action-hint">
+					{item.needsInput ? 'Needs your input' : 'You can change this status'}
+				</p>
+			{/if}
 			<div class="mt-3 flex items-center gap-3 text-xs text-foreground-tertiary">
 				{#if item.email}
 					<span class="inline-flex min-w-0 flex-1 items-center gap-1.5">
@@ -103,7 +111,20 @@
 	</div>
 </article>
 
-<style>
+<style>
+	.sf-editable {
+		border-color: #a78bfa;
+		border-inline-start: 4px solid #8b5cf6;
+	}
+	.sf-action-hint {
+		color: #6d28d9;
+		background: #f3e8ff;
+		border-radius: 0.25rem;
+		padding: 0.15rem 0.4rem;
+		margin-top: 0.75rem;
+		font-size: 0.75rem;
+		width: fit-content;
+	}
 	.line-clamp-1,
 	.line-clamp-2 {
 		display: -webkit-box;

package/dist/components/board/FeedbackList.svelte

@@ -32,8 +32,8 @@
 {:else if board.items.length === 0}
 	<div class="text-center py-12 text-foreground-tertiary">
 		<i class="fa-solid fa-inbox text-3xl"></i>
-		<p class="mt-2">No feedback yet</p>
-		<p class="text-sm">Be the first to submit!</p>
+		<p class="mt-2">{board.statusFilter === 'needs_input' ? 'No feedback needs your input' : 'No feedback yet'}</p>
+		<p class="text-sm">{board.statusFilter === 'needs_input' ? 'You’re all caught up. Choose another status to see more feedback.' : 'Be the first to submit!'}</p>
 	</div>
 {:else}
 	<div class="flex flex-col gap-2">

package/dist/components/board/FeedbackSidebar.svelte

@@ -8,11 +8,12 @@
 
 	let { board }: Props = $props();
 
-	const statusOptions = [
+	const statusOptions = $derived([
 		{ value: "open", label: "Open" },
 		{ value: "resolved", label: "Done" },
-		{ value: "all", label: "All" },
-	];
+		{ value: "all", label: "All" },
+		...(board.canManageStatus ? [{ value: "needs_input", label: "Needs my input" }] : []),
+	]);
 
 	const sortOptions = [
 		{ value: "votes", label: "Most Votes" },
@@ -60,7 +61,10 @@
 
 	<Divider class="my-2" />
 
-	<div class="sf-filter-group">
+	<div class="sf-filter-group">
+		{#if board.canManageStatus}
+			<p class="sf-editable-legend"><span aria-hidden="true"></span>Purple marks statuses you can change.</p>
+		{/if}
 		<Select
 			label="Status"
 			class="rounded-lg border-0 bg-surface-hover"
@@ -76,7 +80,9 @@
 	</div>
 </aside>
 
-<style>
+<style>
+	.sf-editable-legend { font-size: 0.75rem; display: flex; gap: 0.5rem; align-items: center; }
+	.sf-editable-legend span { width: 0.6rem; height: 0.6rem; background: #8b5cf6; border-radius: 50%; flex-shrink: 0; }
 	/* Spacing/padding is bundled in the component (not Tailwind utilities) so it
 	   applies regardless of whether the consuming app's Tailwind generates these
 	   classes. gap → space between the Status and Sort By selects; the 1.25rem

package/dist/components/board/StatusBadgeMenu.svelte

@@ -2,8 +2,8 @@
 	/**
 	 * 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
+	 * Items without an authorized board decision have a read-only badge.
+	 * Editable items have a purple 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).
 	 *
@@ -13,7 +13,7 @@
 	 * 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)
+	 * status without opening the item. Transitions refresh on demand (on each open)
 	 * unless `loadOnMount` is set — the list stays lazy so it doesn't fire a
 	 * request per row.
 	 */
@@ -21,7 +21,8 @@
 	import { onMount } from 'svelte';
 	import type { BoardItem, BoardTransition } from '../../api.js';
 	import type { FeedbackBoardState } from './state.svelte.js';
-	import { getStatusBadgeVariant, internalStatusLabel } from './utils.js';
+	import { getStatusBadgeVariant, internalStatusLabel } from './utils.js';
+	import { canChangeItemStatus } from './capabilities.js';
 
 	interface Props {
 		board: FeedbackBoardState;
@@ -44,7 +45,8 @@
 	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 txns = $derived(board.transitions[item.id]?.current.status === item.status ? board.transitions[item.id] : null);
+	let canChange = $derived(canChangeItemStatus(board, item));
 	// Everyone sees the item's real granular status — `item.status` is present on
 	// every board item (the board endpoint returns it), so all rows render their
 	// actual status on first paint, no privilege or transitions fetch required.
@@ -131,7 +133,7 @@
 		reason = '';
 		// Open immediately so the spinner is visible while transitions load.
 		menuOpen = true;
-		if (!txns) await reload();
+		await reload();
 	}
 
 	async function reload() {
@@ -185,18 +187,20 @@
 	}
 </script>
 
-{#if board.canManageStatus}
+{#if canChange}
 	<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}
+		class="sf-status-editable 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}
+		onkeydown={(e) => e.stopPropagation()}
 		aria-haspopup="listbox"
 		aria-expanded={menuOpen}
 		disabled={applying}
-		title="Change status"
-	>
-		<Badge variant={getStatusBadgeVariant(item.publicStatus)} size="sm">{badgeLabel}</Badge>
+		title="You can change this status"
+		aria-label="Change status: {badgeLabel}"
+	>
+		<span>{badgeLabel}</span>
 		<i class="fa-solid fa-chevron-down text-[0.625rem] text-foreground-tertiary" aria-hidden="true"></i>
 	</button>
 
@@ -233,7 +237,7 @@
 						</Button>
 					</div>
 				</div>
-			{:else if txns && txns.targets.length > 0}
+			{:else if txns && txns.targets.length > 0 && !loadFailed}
 				{#each txns.targets as target (target.status)}
 					<button
 						type="button"
@@ -268,4 +272,18 @@
 	<Badge variant={getStatusBadgeVariant(item.publicStatus)} size="sm">
 		{badgeLabel}
 	</Badge>
-{/if}
+{/if}
+
+<style>
+	.sf-status-editable {
+		flex-shrink: 0;
+		white-space: nowrap;
+		color: #6d28d9;
+		background: #f3e8ff;
+		border: 1px solid #a78bfa;
+		padding: 0.2rem 0.5rem;
+		font-size: 0.75rem;
+		font-weight: 600;
+	}
+	.sf-status-editable:hover { background: #e9d5ff; }
+</style>

package/dist/components/board/capabilities.d.ts

@@ -0,0 +1,4 @@
+import type { BoardItem } from '../../api.js';
+import type { FeedbackBoardState } from './state.svelte.js';
+/** Cached transitions, when current, refine the capabilities returned with the list. */
+export declare function canChangeItemStatus(board: FeedbackBoardState, item: BoardItem): boolean;

package/dist/components/board/capabilities.js

@@ -0,0 +1,10 @@
+/** Cached transitions, when current, refine the capabilities returned with the list. */
+export function canChangeItemStatus(board, item) {
+    if (!board.canManageStatus)
+        return false;
+    const transitions = board.transitions[item.id];
+    if (transitions?.current.status === item.status) {
+        return transitions.canManage && transitions.targets.length > 0;
+    }
+    return item.canChangeStatus === true;
+}

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

@@ -24,10 +24,10 @@ export interface FeedbackBoardOptions {
      * 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
+     * users (Admin / ProductOwner) can accept, reopen, or decline feedback. Called
      * on demand so the host controls token refresh.
      */
-    getAuthToken?: () => string | Promise<string | null>;
+    getAuthToken?: () => string | null | Promise<string | null>;
     /** Items per page. Default: 50 */
     pageSize?: number;
 }
@@ -63,7 +63,7 @@ export interface FeedbackBoardState {
     /**
      * 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,
+     * token getter was provided. Resolved on each board read, including empty pages,
      * so UI can gate the status control by actual privilege.
      */
     readonly canManageStatus: boolean;

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

@@ -6,6 +6,7 @@
  *   <FeedbackSidebar {board} />
  *   <FeedbackList {board} />
  */
+import { createBoardStatusState } from './status-state.svelte.js';
 import { FEEDBACK_CATEGORY_ICONS } from '../../types.js';
 import { createStatusClient, } from '../../api.js';
 export function createFeedbackBoard(options) {
@@ -25,10 +26,8 @@ export function createFeedbackBoard(options) {
     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;
+    const statusState = createBoardStatusState(client, getAuthToken);
+    let requestVersion = 0;
     // Response cache
     const responseCache = {};
     // Track in-flight votes to prevent duplicate requests. A plain Set is correct
@@ -36,6 +35,9 @@ export function createFeedbackBoard(options) {
     // eslint-disable-next-line svelte/prefer-svelte-reactivity
     const pendingVotes = new Set();
     async function load() {
+        const version = ++requestVersion;
+        loadingMore = false;
+        loadMoreError = '';
         loading = true;
         error = '';
         try {
@@ -45,22 +47,28 @@ export function createFeedbackBoard(options) {
                 sort: sortBy,
                 limit: pageSize,
                 offset: 0,
-            });
+            }, await statusState.resolveToken());
+            if (version !== requestVersion)
+                return;
             items = data.items;
             total = data.total;
             categories = data.categories;
-            void ensureStatusPrivilege();
+            statusState.reset(data.canManageStatus ?? false);
         }
         catch (e) {
+            if (version !== requestVersion)
+                return;
             error = e instanceof Error ? e.message : 'Failed to load';
         }
         finally {
-            loading = false;
+            if (version === requestVersion)
+                loading = false;
         }
     }
     async function loadMore() {
-        if (loadingMore || items.length >= total)
+        if (loading || loadingMore || items.length >= total)
             return;
+        const version = requestVersion;
         loadingMore = true;
         loadMoreError = '';
         try {
@@ -70,15 +78,21 @@ export function createFeedbackBoard(options) {
                 sort: sortBy,
                 limit: pageSize,
                 offset: items.length,
-            });
+            }, await statusState.resolveToken());
+            if (version !== requestVersion)
+                return;
             items = [...items, ...data.items];
             total = data.total;
+            statusState.reset(data.canManageStatus ?? false);
         }
         catch (e) {
+            if (version !== requestVersion)
+                return;
             loadMoreError = e instanceof Error ? e.message : 'Failed to load more';
         }
         finally {
-            loadingMore = false;
+            if (version === requestVersion)
+                loadingMore = false;
         }
     }
     // Auto-reload when filters change
@@ -167,51 +181,8 @@ export function createFeedbackBoard(options) {
         if (item)
             item.responseCount += 1;
     }
-    async function resolveToken() {
-        if (!getAuthToken)
-            return null;
-        try {
-            return (await getAuthToken()) ?? null;
-        }
-        catch {
-            return null;
-        }
-    }
-    async function loadTransitions(itemId) {
-        const token = await resolveToken();
-        if (!token)
-            return null;
-        try {
-            const result = await client.getBoardTransitions(itemId, token);
-            transitions = { ...transitions, [itemId]: result };
-            // The backend tells us whether this user may manage status (200 either
-            // way — no 403 console noise for ordinary signed-in users).
-            statusPrivilege = result.canManage;
-            return result;
-        }
-        catch {
-            // 401 (no/invalid token) or network error → no control.
-            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;
-        // loadTransitions sets statusPrivilege from the result's canManage flag.
-        await loadTransitions(sample.id);
-    }
     async function setStatus(itemId, status, reason) {
-        const token = await resolveToken();
+        const token = await statusState.resolveToken();
         if (!token)
             throw new Error('Authentication required to set status');
         const result = await client.updateBoardStatus(itemId, { status, reason }, token);
@@ -219,9 +190,11 @@ export function createFeedbackBoard(options) {
         if (item) {
             item.status = result.status;
             item.publicStatus = result.publicStatus;
+            item.canChangeStatus = result.canChangeStatus;
+            item.needsInput = result.needsInput;
         }
-        // Allowed targets depend on the new status — refresh the cache.
-        await loadTransitions(itemId);
+        // Re-query to keep the current filter, counts, and pagination accurate.
+        await load();
     }
     return {
         get client() { return client; },
@@ -249,9 +222,9 @@ export function createFeedbackBoard(options) {
         getResponses,
         submitFeedback,
         submitResponse,
-        get canManageStatus() { return statusPrivilege; },
-        get transitions() { return transitions; },
-        loadTransitions,
+        get canManageStatus() { return statusState.canManage; },
+        get transitions() { return statusState.transitions; },
+        loadTransitions: statusState.loadTransitions,
         setStatus,
         getCategoryIcon(name) {
             return (categoryConfig[name]?.icon ||

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

@@ -0,0 +1,10 @@
+/** Server-authorized status capabilities and transition cache for a single board. */
+import type { BoardTransitions, StatusClient } from '../../api.js';
+import type { FeedbackBoardOptions } from './state.svelte.js';
+export declare function createBoardStatusState(client: StatusClient, getAuthToken: FeedbackBoardOptions['getAuthToken']): {
+    readonly canManage: boolean;
+    readonly transitions: Record<string, BoardTransitions>;
+    resolveToken: () => Promise<string | null>;
+    loadTransitions: (itemId: string) => Promise<BoardTransitions | null>;
+    reset(allowed: boolean): void;
+};

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

@@ -0,0 +1,41 @@
+export function createBoardStatusState(client, getAuthToken) {
+    let canManage = $state(false);
+    let transitions = $state({});
+    let generation = 0;
+    async function resolveToken() {
+        try {
+            return (await getAuthToken?.()) ?? null;
+        }
+        catch {
+            return null;
+        }
+    }
+    async function loadTransitions(itemId) {
+        const currentGeneration = generation;
+        const token = await resolveToken();
+        if (!token)
+            return null;
+        try {
+            const result = await client.getBoardTransitions(itemId, token);
+            if (currentGeneration !== generation)
+                return null;
+            transitions = { ...transitions, [itemId]: result };
+            canManage = result.canManage;
+            return result;
+        }
+        catch {
+            return null;
+        }
+    }
+    return {
+        get canManage() { return canManage; },
+        get transitions() { return transitions; },
+        resolveToken,
+        loadTransitions,
+        reset(allowed) {
+            generation += 1;
+            canManage = allowed;
+            transitions = {};
+        }
+    };
+}

package/dist/sveltekit/server.js

@@ -64,11 +64,15 @@ async function handleProxyRequest(event, options) {
     if (route.forwardBearerToken) {
         const authorization = event.request.headers.get('authorization');
         if (!authorization?.toLowerCase().startsWith('bearer ')) {
-            if (route.operation === 'transitions')
-                return statusManagementUnavailable();
-            return feedbackError(401, 'Status feedback access token required');
+            if (route.forwardBearerToken !== 'optional') {
+                if (route.operation === 'transitions')
+                    return statusManagementUnavailable();
+                return feedbackError(401, 'Status feedback access token required');
+            }
+        }
+        else {
+            headers.set('Authorization', authorization);
         }
-        headers.set('Authorization', authorization);
     }
     const method = event.request.method.toUpperCase();
     let body;
@@ -137,6 +141,7 @@ function getRouteSpec(method, path) {
             upstreamPath: '/api/board',
             bodyKind: 'none',
             allowedSearchParams: BOARD_QUERY_KEYS,
+            forwardBearerToken: 'optional',
         };
     }
     if (normalizedMethod === 'POST' && normalizedPath === 'api/board/vote') {