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

package/dist/api.d.ts

@@ -47,6 +47,8 @@ export interface BoardItem {
     adminResponse: string | null;
     responseCount: number;
     createdAt: number;
+    /** Safe, own-origin URL of the reporter's pasted screenshot (server-validated), or null. */
+    screenshotUrl?: string | null;
     /** Server-authorized consumer-board status control for this item. */
     canChangeStatus?: boolean;
     /** This item is awaiting a product decision or reply from a board manager. */

package/dist/components/board/FeedbackDetail.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
-	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';
 	import { timeAgo } from './utils.js';
+	import { safeScreenshotSrc } from './screenshot-src.js';
 	import StatusBadgeMenu from './StatusBadgeMenu.svelte';
 
 	interface Props {
@@ -13,6 +14,10 @@
 
 	let { board, item }: Props = $props();
 
+	// Client-side scheme allowlist over the server-provided URL (defense-in-depth
+	// for a reusable widget that puts this in an <a href>).
+	let screenshotSrc = $derived(safeScreenshotSrc(item.screenshotUrl));
+
 	let responses = $state<FeedbackResponse[]>([]);
 	let loadingResponses = $state(true);
 
@@ -101,27 +106,27 @@
 
 	let isAuthenticated = $derived(!!board.userEmail);
 
-	$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;
-		};
-	});
+	$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;
@@ -187,6 +192,16 @@
 			<h3 class="text-base font-semibold text-foreground">{item.title}</h3>
 		{/if}
 		<p class="text-sm leading-relaxed text-foreground whitespace-pre-wrap">{item.message}</p>
+		{#if screenshotSrc}
+			<a href={screenshotSrc} target="_blank" rel="noopener noreferrer" class="inline-block" title="Open full screenshot">
+				<img
+					src={screenshotSrc}
+					alt="Attached screenshot"
+					loading="lazy"
+					class="max-h-72 w-auto rounded-md border border-border object-contain"
+				/>
+			</a>
+		{/if}
 		<div class="flex items-center gap-1.5 pt-1 text-xs text-foreground-tertiary" aria-label="{item.votes} votes">
 			<i class="fa-solid fa-arrow-up" aria-hidden="true"></i>
 			<span class="font-medium text-foreground-secondary">{item.votes}</span>

package/dist/components/board/FeedbackItem.svelte

@@ -3,8 +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 { canChangeItemStatus } from './capabilities.js';
+	import StatusBadgeMenu from './StatusBadgeMenu.svelte';
+	import { canChangeItemStatus } from './capabilities.js';
 
 	interface Props {
 		board: FeedbackBoardState;
@@ -14,13 +14,12 @@
 
 	let { board, item, onclick }: Props = $props();
 
-	let isClickable = $derived(!!onclick);
-	let canChangeStatus = $derived(canChangeItemStatus(board, item));
+	let isClickable = $derived(!!onclick);
+	let canChangeStatus = $derived(canChangeItemStatus(board, item));
 </script>
 
 <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-<article
-	class:sf-editable={canChangeStatus}
+<article
 	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}
@@ -78,12 +77,10 @@
 				<StatusBadgeMenu {board} {item} />
 			</div>
 
-			<!-- Meta -->
-			{#if canChangeStatus}
-				<p class="sf-action-hint">
-					{item.needsInput ? 'Needs your input' : 'You can change this status'}
-				</p>
-			{/if}
+			<!-- Meta -->
+			{#if canChangeStatus && item.needsInput}
+				<p class="sf-action-hint">Needs your input</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">
@@ -111,20 +108,16 @@
 	</div>
 </article>
 
-<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;
-	}
+<style>
+	.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">{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>
+		<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,12 +8,12 @@
 
 	let { board }: Props = $props();
 
-	const statusOptions = $derived([
+	const statusOptions = $derived([
 		{ value: "open", label: "Open" },
 		{ value: "resolved", label: "Done" },
-		{ value: "all", label: "All" },
-		...(board.canManageStatus ? [{ value: "needs_input", label: "Needs my input" }] : []),
-	]);
+		{ value: "all", label: "All" },
+		...(board.canManageStatus ? [{ value: "needs_input", label: "Needs my input" }] : []),
+	]);
 
 	const sortOptions = [
 		{ value: "votes", label: "Most Votes" },
@@ -61,10 +61,10 @@
 
 	<Divider class="my-2" />
 
-	<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}
+	<div class="sf-filter-group">
+		{#if board.canManageStatus}
+			<p class="sf-editable-legend"><span aria-hidden="true"></span>Purple status controls mark statuses you can change.</p>
+		{/if}
 		<Select
 			label="Status"
 			class="rounded-lg border-0 bg-surface-hover"
@@ -80,9 +80,9 @@
 	</div>
 </aside>
 
-<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; }
+<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.
 	 *
-	 * Items without an authorized board decision have a read-only badge.
-	 * Editable items have a purple 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 refresh on demand (on each 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,8 +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 { canChangeItemStatus } from './capabilities.js';
+	import { getStatusBadgeVariant, internalStatusLabel } from './utils.js';
+	import { canChangeItemStatus } from './capabilities.js';
 
 	interface Props {
 		board: FeedbackBoardState;
@@ -45,8 +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]?.current.status === item.status ? board.transitions[item.id] : null);
-	let canChange = $derived(canChangeItemStatus(board, item));
+	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.
@@ -133,7 +133,7 @@
 		reason = '';
 		// Open immediately so the spinner is visible while transitions load.
 		menuOpen = true;
-		await reload();
+		await reload();
 	}
 
 	async function reload() {
@@ -187,20 +187,20 @@
 	}
 </script>
 
-{#if canChange}
+{#if canChange}
 	<button
 		bind:this={triggerEl}
 		type="button"
-		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()}
+		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="You can change this status"
-		aria-label="Change status: {badgeLabel}"
-	>
-		<span>{badgeLabel}</span>
+		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>
 
@@ -237,7 +237,7 @@
 						</Button>
 					</div>
 				</div>
-			{:else if txns && txns.targets.length > 0 && !loadFailed}
+			{:else if txns && txns.targets.length > 0 && !loadFailed}
 				{#each txns.targets as target (target.status)}
 					<button
 						type="button"
@@ -272,18 +272,18 @@
 	<Badge variant={getStatusBadgeVariant(item.publicStatus)} size="sm">
 		{badgeLabel}
 	</Badge>
-{/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>
+{/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/screenshot-src.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Client-side allowlist for a board item's screenshot URL.
+ *
+ * Defense-in-depth: `screenshotUrl` is validated server-side (status-feedback-
+ * admin), but this is a reusable package consumed by multiple apps, and
+ * `<FeedbackDetail>` puts the value in an `<a href>` — a script-execution
+ * surface. A shared widget must not be the single layer that trusts an upstream
+ * it can't guarantee, so validate the scheme here too: allow only a safe image
+ * source (an `https` URL, or a base64 raster-image data URL) and reject
+ * `javascript:`, `data:text/html`, `data:image/svg+xml` (SVG can execute
+ * script), plain `http:`, and non-strings.
+ *
+ * Origin restriction (limiting `https` to the blob container) is enforced
+ * server-side, where the configured origin is known — the client can't see it.
+ */
+export declare function safeScreenshotSrc(value: unknown): string | null;

package/dist/components/board/screenshot-src.js

@@ -0,0 +1,24 @@
+/**
+ * Client-side allowlist for a board item's screenshot URL.
+ *
+ * Defense-in-depth: `screenshotUrl` is validated server-side (status-feedback-
+ * admin), but this is a reusable package consumed by multiple apps, and
+ * `<FeedbackDetail>` puts the value in an `<a href>` — a script-execution
+ * surface. A shared widget must not be the single layer that trusts an upstream
+ * it can't guarantee, so validate the scheme here too: allow only a safe image
+ * source (an `https` URL, or a base64 raster-image data URL) and reject
+ * `javascript:`, `data:text/html`, `data:image/svg+xml` (SVG can execute
+ * script), plain `http:`, and non-strings.
+ *
+ * Origin restriction (limiting `https` to the blob container) is enforced
+ * server-side, where the configured origin is known — the client can't see it.
+ */
+export function safeScreenshotSrc(value) {
+    if (typeof value !== 'string')
+        return null;
+    if (/^data:image\/(?:png|jpeg|gif|webp);base64,/i.test(value))
+        return value;
+    if (/^https:\/\//i.test(value))
+        return value;
+    return null;
+}

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

@@ -24,7 +24,7 @@ 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 accept, reopen, or decline feedback. Called
+     * users (Admin / ProductOwner) can accept, approve QA/UAT, reopen, or decline feedback. Called
      * on demand so the host controls token refresh.
      */
     getAuthToken?: () => string | null | Promise<string | null>;

package/package.json

@@ -1,70 +1,70 @@
-{
-	"name": "@alliance-droid/status-feedback-system",
-	"version": "4.3.1",
-	"type": "module",
-	"description": "Drop-in system status pages and user feedback forms for SvelteKit apps",
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js"
-		},
-		"./sveltekit/server": {
-			"types": "./dist/sveltekit/server.d.ts",
-			"default": "./dist/sveltekit/server.js"
-		}
-	},
-	"files": [
-		"dist",
-		"!dist/**/*.test.*",
-		"CHANGELOG.md"
-	],
-	"scripts": {
-		"build": "svelte-package -o dist && publint",
-		"lint": "eslint src",
-		"check": "svelte-check --tsconfig ./tsconfig.json",
-		"test": "vitest run",
-		"test:watch": "vitest",
-		"prepublishOnly": "npm run build"
-	},
-	"peerDependencies": {
-		"@alliance-droid/svelte-component-library": ">=1.3.2",
-		"svelte": "^5.55.7"
-	},
-	"devDependencies": {
-		"@alliance-droid/svelte-component-library": "^1.20.2",
-		"@eslint/js": "^10.0.1",
-		"@sveltejs/package": "^2.5.8",
-		"@sveltejs/vite-plugin-svelte": "^6.2.4",
-		"@testing-library/jest-dom": "^6.9.1",
-		"@testing-library/svelte": "^5.4.2",
-		"eslint": "^10.10.0",
-		"eslint-plugin-svelte": "^3.23.0",
-		"globals": "^17.12.0",
-		"jsdom": "^29.1.1",
-		"publint": "^0.3.24",
-		"svelte": "^5.57.0",
-		"svelte-check": "^4.7.6",
-		"typescript": "^5.9.3",
-		"typescript-eslint": "^8.70.0",
-		"vite": "^7.3.6",
-		"vitest": "^4.1.11"
-	},
-	"keywords": [
-		"svelte",
-		"sveltekit",
-		"status-page",
-		"feedback",
-		"uptime"
-	],
-	"author": "Alliance Technical Group",
-	"license": "UNLICENSED",
-	"publishConfig": {
-		"access": "restricted"
-	},
-	"repository": {
-		"type": "git",
-		"url": "git+https://alliance.ghe.com/alliance/status-feedback-system.git"
-	}
-}
+{
+	"name": "@alliance-droid/status-feedback-system",
+	"version": "4.3.3",
+	"type": "module",
+	"description": "Drop-in system status pages and user feedback forms for SvelteKit apps",
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		},
+		"./sveltekit/server": {
+			"types": "./dist/sveltekit/server.d.ts",
+			"default": "./dist/sveltekit/server.js"
+		}
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"CHANGELOG.md"
+	],
+	"scripts": {
+		"build": "svelte-package -o dist && publint",
+		"lint": "eslint src",
+		"check": "svelte-check --tsconfig ./tsconfig.json",
+		"test": "vitest run",
+		"test:watch": "vitest",
+		"prepublishOnly": "npm run build"
+	},
+	"peerDependencies": {
+		"@alliance-droid/svelte-component-library": ">=1.3.2",
+		"svelte": "^5.55.7"
+	},
+	"devDependencies": {
+		"@alliance-droid/svelte-component-library": "^1.20.2",
+		"@eslint/js": "^10.0.1",
+		"@sveltejs/package": "^2.5.8",
+		"@sveltejs/vite-plugin-svelte": "^6.2.4",
+		"@testing-library/jest-dom": "^6.9.1",
+		"@testing-library/svelte": "^5.4.2",
+		"eslint": "^10.10.0",
+		"eslint-plugin-svelte": "^3.23.0",
+		"globals": "^17.12.0",
+		"jsdom": "^29.1.1",
+		"publint": "^0.3.24",
+		"svelte": "^5.57.0",
+		"svelte-check": "^4.7.6",
+		"typescript": "^5.9.3",
+		"typescript-eslint": "^8.70.0",
+		"vite": "^7.3.6",
+		"vitest": "^4.1.11"
+	},
+	"keywords": [
+		"svelte",
+		"sveltekit",
+		"status-page",
+		"feedback",
+		"uptime"
+	],
+	"author": "Alliance Technical Group",
+	"license": "UNLICENSED",
+	"publishConfig": {
+		"access": "restricted"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://alliance.ghe.com/alliance/status-feedback-system.git"
+	}
+}