@alliance-droid/status-feedback-system 4.2.3 → 4.3.0

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/DevFeedback.svelte

@@ -20,10 +20,10 @@
 		getElementHtml,
 	} from './dev/environment.js';
 
-	interface Props {
-		apiUrl: string;
-		/** Omit when apiUrl points at a same-origin proxy. */
-		apiKey?: string;
+	interface Props {
+		apiUrl: string;
+		/** Omit when apiUrl points at a same-origin proxy. */
+		apiKey?: string;
 		/**
 		 * The sole gate for the widget — wire it to your role/permission check
 		 * (e.g. `enabled={userHasFeedbackRole}`). When false, nothing renders and
@@ -52,9 +52,9 @@
 		renderTokenEndpoint?: string;
 	}
 
-	let {
-		apiUrl,
-		apiKey = '',
+	let {
+		apiUrl,
+		apiKey = '',
 		enabled,
 		maxConsoleErrors = 20,
 		showOnboarding = true,

package/dist/components/FeedbackButton.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
-	import FeedbackForm from './FeedbackForm.svelte';
-
-	interface Props {
-		/** Omit when apiUrl points at a same-origin proxy. */
-		apiKey?: string;
-		apiUrl: string;
+	import FeedbackForm from './FeedbackForm.svelte';
+
+	interface Props {
+		/** Omit when apiUrl points at a same-origin proxy. */
+		apiKey?: string;
+		apiUrl: string;
 		categories?: string[];
 		userEmail?: string;
 		position?: 'bottom-right' | 'bottom-left';
 	}
 
-	let {
-		apiKey = '',
+	let {
+		apiKey = '',
 		apiUrl,
 		categories,
 		userEmail,

package/dist/components/FeedbackForm.svelte

@@ -1,19 +1,19 @@
 <script lang="ts">
 	import { untrack } from 'svelte';
-	import { createStatusClient, type StatusClient } from '../api.js';
-
-	interface Props {
-		/** Omit when apiUrl points at a same-origin proxy. */
-		apiKey?: string;
-		apiUrl: string;
+	import { createStatusClient, type StatusClient } from '../api.js';
+
+	interface Props {
+		/** Omit when apiUrl points at a same-origin proxy. */
+		apiKey?: string;
+		apiUrl: string;
 		categories?: string[];
 		userEmail?: string;
 		onSuccess?: () => void;
 		onError?: (error: string) => void;
 	}
 
-	let {
-		apiKey = '',
+	let {
+		apiKey = '',
 		apiUrl,
 		categories = ['Bug', 'Feature Request', 'General'],
 		userEmail,

package/dist/components/StatusBanner.svelte

@@ -10,35 +10,35 @@
 		systems?: System[];
 		/** API URL for self-fetching mode */
 		apiUrl?: string;
-	/** API key for direct admin calls. Omit when using a same-origin proxy. */
-	apiKey?: string;
+	/** API key for direct admin calls. Omit when using a same-origin proxy. */
+	apiKey?: string;
 		/** Link to full status page */
 		statusUrl?: string;
 		/** Auto-refresh interval in seconds. 0 = disabled. Default: 60 */
 		refreshInterval?: number;
 	}
 
-	let { systems: systemsProp, apiUrl, apiKey, statusUrl, refreshInterval = 60 }: Props = $props();
-
-	let systems = $derived(systemsProp ?? []);
-	let loading = $derived(!systemsProp && !!apiUrl);
-	let fetchFailed = $state(false);
-
-	let usesApi = $derived(!systemsProp && !!apiUrl);
+	let { systems: systemsProp, apiUrl, apiKey, statusUrl, refreshInterval = 60 }: Props = $props();
+
+	let systems = $derived(systemsProp ?? []);
+	let loading = $derived(!systemsProp && !!apiUrl);
+	let fetchFailed = $state(false);
+
+	let usesApi = $derived(!systemsProp && !!apiUrl);
 
 	let cachedClient: StatusClient | null = null;
-	let cachedApiUrl = '';
-	let cachedApiKey = '';
-
-	function getClient(): StatusClient {
-		const nextApiKey = apiKey ?? '';
-		if (!cachedClient || cachedApiUrl !== apiUrl || cachedApiKey !== nextApiKey) {
-			cachedClient = createStatusClient({ apiUrl: apiUrl!, apiKey: nextApiKey });
-			cachedApiUrl = apiUrl!;
-			cachedApiKey = nextApiKey;
-		}
-		return cachedClient;
-	}
+	let cachedApiUrl = '';
+	let cachedApiKey = '';
+
+	function getClient(): StatusClient {
+		const nextApiKey = apiKey ?? '';
+		if (!cachedClient || cachedApiUrl !== apiUrl || cachedApiKey !== nextApiKey) {
+			cachedClient = createStatusClient({ apiUrl: apiUrl!, apiKey: nextApiKey });
+			cachedApiUrl = apiUrl!;
+			cachedApiKey = nextApiKey;
+		}
+		return cachedClient;
+	}
 
 	async function fetchData() {
 		if (!usesApi) return;

package/dist/components/StatusPage.svelte

@@ -12,8 +12,8 @@
 		projectName: string;
 		/** API URL for fetching data (self-fetching mode) */
 		apiUrl?: string;
-	/** API key for direct admin calls. Omit when using a same-origin proxy. */
-	apiKey?: string;
+	/** API key for direct admin calls. Omit when using a same-origin proxy. */
+	apiKey?: string;
 		/** Systems data (pass-through mode — overrides API fetching) */
 		systems?: System[];
 		/** Incidents data (pass-through mode) */
@@ -44,22 +44,22 @@
 	let error = $state('');
 
 	// ── Self-fetching mode ──
-	const usesApi = $derived(!!apiUrl && !systemsProp);
-	let refreshTimer: ReturnType<typeof setInterval> | null = null;
+	const usesApi = $derived(!!apiUrl && !systemsProp);
+	let refreshTimer: ReturnType<typeof setInterval> | null = null;
 
 	let cachedClient: StatusClient | null = null;
-	let cachedApiUrl = '';
-	let cachedApiKey = '';
-
-	function getClient(): StatusClient {
-		const nextApiKey = apiKey ?? '';
-		if (!cachedClient || cachedApiUrl !== apiUrl || cachedApiKey !== nextApiKey) {
-			cachedClient = createStatusClient({ apiUrl: apiUrl!, apiKey: nextApiKey });
-			cachedApiUrl = apiUrl!;
-			cachedApiKey = nextApiKey;
-		}
-		return cachedClient;
-	}
+	let cachedApiUrl = '';
+	let cachedApiKey = '';
+
+	function getClient(): StatusClient {
+		const nextApiKey = apiKey ?? '';
+		if (!cachedClient || cachedApiUrl !== apiUrl || cachedApiKey !== nextApiKey) {
+			cachedClient = createStatusClient({ apiUrl: apiUrl!, apiKey: nextApiKey });
+			cachedApiUrl = apiUrl!;
+			cachedApiKey = nextApiKey;
+		}
+		return cachedClient;
+	}
 
 	async function fetchData() {
 		if (!usesApi) return;

package/dist/components/board/FeedbackDetail.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
-	import { Spinner, Button, Textarea, Divider } from '@alliance-droid/svelte-component-library';
+	import { Spinner, Button, Textarea, Divider } from '@alliance-droid/svelte-component-library';
 	import type { BoardItem } from '../../api.js';
 	import type { FeedbackResponse } from '../../types.js';
 	import type { FeedbackBoardState } from './state.svelte.js';
@@ -102,10 +101,27 @@
 
 	let isAuthenticated = $derived(!!board.userEmail);
 
-	onMount(async () => {
-		responses = await board.getResponses(item.id);
-		loadingResponses = false;
-	});
+	$effect(() => {
+		const itemId = item.id;
+		let cancelled = false;
+
+		// Consumers commonly keep the detail rail mounted and replace its item prop.
+		// Clear the old thread immediately so it is never shown under the new item.
+		responses = [];
+		loadingResponses = true;
+
+		void board.getResponses(itemId).then((nextResponses) => {
+			// A slower request for the previous selection must not overwrite the
+			// currently selected item's responses.
+			if (cancelled) return;
+			responses = nextResponses;
+			loadingResponses = false;
+		});
+
+		return () => {
+			cancelled = true;
+		};
+	});
 
 	async function handleSubmitReply() {
 		if (!replyMessage.trim() || !isAuthenticated) return;

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;