@alliance-droid/status-feedback-system 4.1.5 → 4.2.0

package/CHANGELOG.md

@@ -1,4 +1,21 @@
-# Changelog
+# Changelog
+
+## 4.2.0
+
+### Added
+
+- Added `@alliance-droid/status-feedback-system/sveltekit/server`, a server-only SvelteKit proxy adapter that lets consuming apps keep the project API key in private server environment variables. The adapter maps the package's existing `/api/...` client paths to `status-feedback-admin`, injects the private `x-api-key`, strips browser `key` query params, validates request bodies, forwards bearer tokens for privileged status endpoints, and can derive feedback `email` / response `author` from the host app's authenticated user.
+
+### Changed
+
+- `apiKey` is now optional for `createStatusClient`, `StatusPage`, `StatusBanner`, `FeedbackForm`, `FeedbackButton`, `DevFeedback`, and `createFeedbackBoard`. When omitted, the client no longer appends `?key=...`, which enables same-origin proxy mode with `apiUrl="/svc/feedback"`.
+- Updated README and integration docs to make the SvelteKit proxy the recommended hardened default. Direct admin calls with an embedded project key remain supported for existing consumers.
+
+## 4.1.6
+
+### Fixed
+
+- Board status badges: for privileged viewers (Admin / ProductOwner), **every** item now shows its real internal status (e.g. "QA / UAT"), not just the first one. Previously the list badge derived its label solely from the per-item transitions cache, which is only populated lazily (on menu open) plus a one-time privilege probe of `items[0]` — so exactly the first item showed its real status and the rest stayed on the coarse public projection ("In progress"). The badge now derives the privileged label from each item's own `status` (already present on every board item) via a new `internalStatusLabel`, so all rows resolve consistently once privilege is confirmed. Non-privileged viewers are unchanged (they still see the public status bucket).
 
 ## 4.1.5
 

package/README.md

@@ -2,7 +2,7 @@
 
 Drop-in system status pages and user feedback components for SvelteKit apps.
 
-This is the **client package** — UI components that talk to a [status-feedback-admin](https://alliance.ghe.com/alliance/status-feedback-admin) backend via API. The admin app handles data storage, API key management, and the admin dashboard.
+This package provides UI components plus an optional SvelteKit server proxy for talking to a [status-feedback-admin](https://alliance.ghe.com/alliance/status-feedback-admin) backend. The admin app handles data storage, API key management, and the admin dashboard.
 
 ## Architecture
 
@@ -38,35 +38,66 @@ AZURE_FEEDBACK_BLOB_CONNECTION_STRING=DefaultEndpointsProtocol=https;AccountName
 AZURE_FEEDBACK_BLOB_CONTAINER=screenshots
 ```
 
-### 2. Create a project and get an API key
-
-Log into the admin dashboard, create a project, and copy its API key (prefixed `sf_`).
-
-### 3. Install the client package
-
-```bash
-npm install @alliance-droid/status-feedback-system
-```
-
-**Peer dependencies:** `svelte ^5.0.0`, `@alliance-droid/svelte-component-library >=1.0.0`
+### 2. Create a project and keep the API key server-side
+
+Log into the admin dashboard, create a project, and copy its API key (prefixed `sf_`). Store it in a private server-side environment variable, not a `PUBLIC_` / browser-delivered variable.
+
+### 3. Install the client package
+
+```bash
+npm install @alliance-droid/status-feedback-system
+```
+
+**Peer dependencies:** `svelte ^5.48.0`, `@alliance-droid/svelte-component-library >=1.3.2`
+
+> `@alliance-droid/svelte-component-library` must be `>=1.3.2` — earlier versions are incompatible with Svelte `5.56+` and throw `target.exclude.has is not a function` when board components render.
+
+### 4. Add the recommended SvelteKit proxy
+
+Use one catch-all route in the consuming app. The package owns the admin API path mapping, request validation, key injection, and `key` query stripping; the app owns auth and app-specific policy.
+
+```ts
+// src/routes/svc/feedback/[...path]/+server.ts
+import { env } from '$env/dynamic/private';
+import { createSvelteKitFeedbackProxy } from '@alliance-droid/status-feedback-system/sveltekit/server';
+
+export const { GET, POST, PATCH } = createSvelteKitFeedbackProxy({
+  apiUrl: env.SF_API_URL,
+  apiKey: env.SF_API_KEY,
+  resolveUser: async (event) => {
+    const user = event.locals.user;
+    return user ? { email: user.email, roles: user.roles } : null;
+  },
+  requireUser: true,
+  canSubmitInAppFeedback: ({ user }) =>
+    user.roles.includes('QA') || user.roles.includes('ProductOwner'),
+});
+```
+
+Then point components at the same-origin route and omit `apiKey`:
+
+```svelte
+<DevFeedback apiUrl="/svc/feedback/dev" enabled={canSubmitFeedback} userEmail={user.email} />
+```
+
+Direct admin calls with `apiKey="sf_..."` remain supported for existing integrations, but the proxy is the hardened default.
 
 ## Components
 
 ### StatusPage
 
-Full status page with systems, incidents, and uptime history bars. Supports **self-fetching** (provide `apiUrl` + `apiKey`) or **pass-through** (provide data directly).
+Full status page with systems, incidents, and uptime history bars. Supports **self-fetching** (provide `apiUrl`; add `apiKey` only for direct admin calls) or **pass-through** (provide data directly).
 
 ```svelte
 <script>
   import { StatusPage } from '@alliance-droid/status-feedback-system';
 </script>
 
-<!-- Self-fetching mode -->
-<StatusPage
-  projectName="My App"
-  apiUrl="https://status-admin.example.com"
-  apiKey="sf_abc123..."
-/>
+<!-- Self-fetching through the same-origin proxy -->
+<StatusPage
+  projectName="My App"
+  apiUrl="/svc/feedback"
+/>
 
 <!-- Pass-through mode -->
 <StatusPage
@@ -81,8 +112,8 @@ Full status page with systems, incidents, and uptime history bars. Supports **se
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `projectName` | `string` | required | Display name in the header |
-| `apiUrl` | `string` | — | Admin backend URL (self-fetching mode) |
-| `apiKey` | `string` | — | Project API key (self-fetching mode) |
+| `apiUrl` | `string` | — | Proxy URL or direct admin backend URL (self-fetching mode) |
+| `apiKey` | `string` | — | Project API key; omit when using the same-origin proxy |
 | `systems` | `System[]` | — | Pass-through: system data |
 | `incidents` | `Incident[]` | — | Pass-through: incident data |
 | `statusHistory` | `Record<string, StatusHistoryEntry[]>` | — | Pass-through: uptime data |
@@ -93,18 +124,17 @@ Full status page with systems, incidents, and uptime history bars. Supports **se
 Compact inline status indicator — good for footers or nav bars.
 
 ```svelte
-<StatusBanner
-  apiUrl="https://status-admin.example.com"
-  apiKey="sf_abc123..."
-  statusUrl="/status"
-/>
+<StatusBanner
+  apiUrl="/svc/feedback"
+  statusUrl="/status"
+/>
 ```
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `systems` | `System[]` | — | Pass-through mode |
-| `apiUrl` | `string` | — | Self-fetching mode |
-| `apiKey` | `string` | — | Self-fetching mode |
+| `apiUrl` | `string` | — | Proxy URL or direct admin backend URL |
+| `apiKey` | `string` | — | Project API key; omit when using the same-origin proxy |
 | `statusUrl` | `string` | — | Links to full status page (renders as `<a>`) |
 
 ### FeedbackButton
@@ -112,19 +142,18 @@ Compact inline status indicator — good for footers or nav bars.
 Floating action button with an embedded feedback form. Fixed position, bottom corner.
 
 ```svelte
-<FeedbackButton
-  apiKey="sf_abc123..."
-  apiUrl="https://status-admin.example.com"
-  position="bottom-right"
-  categories={['Bug', 'Feature Request', 'General']}
-  userEmail={currentUser?.email}
+<FeedbackButton
+  apiUrl="/svc/feedback"
+  position="bottom-right"
+  categories={['Bug', 'Feature Request', 'General']}
+  userEmail={currentUser?.email}
 />
 ```
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `apiUrl` | `string` | required | Admin backend URL |
-| `apiKey` | `string` | required | Project API key |
+| `apiUrl` | `string` | required | Proxy URL or direct admin backend URL |
+| `apiKey` | `string` | — | Project API key; omit when using the same-origin proxy |
 | `categories` | `string[]` | `['Bug', 'Feature Request', 'General']` | Category options |
 | `userEmail` | `string` | — | Pre-fill email field |
 | `position` | `'bottom-right' \| 'bottom-left'` | `'bottom-right'` | Button position |
@@ -134,11 +163,10 @@ Floating action button with an embedded feedback form. Fixed position, bottom co
 Standalone feedback form — embed it wherever you need it.
 
 ```svelte
-<FeedbackForm
-  apiKey="sf_abc123..."
-  apiUrl="https://status-admin.example.com"
-  categories={['Bug', 'Feature Request']}
-  userEmail={currentUser?.email}
+<FeedbackForm
+  apiUrl="/svc/feedback"
+  categories={['Bug', 'Feature Request']}
+  userEmail={currentUser?.email}
   onSuccess={() => toast('Thanks!')}
   onError={(msg) => toast(msg, 'error')}
 />
@@ -146,8 +174,8 @@ Standalone feedback form — embed it wherever you need it.
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `apiUrl` | `string` | required | Admin backend URL |
-| `apiKey` | `string` | required | Project API key |
+| `apiUrl` | `string` | required | Proxy URL or direct admin backend URL |
+| `apiKey` | `string` | — | Project API key; omit when using the same-origin proxy |
 | `categories` | `string[]` | `['Bug', 'Feature Request', 'General']` | Category options |
 | `userEmail` | `string` | — | Pre-fill email field |
 | `onSuccess` | `() => void` | — | Called after successful submission |
@@ -171,12 +199,11 @@ The board is composed from parts around **one shared state** (`createFeedbackBoa
     type BoardItem,
   } from '@alliance-droid/status-feedback-system';
 
-  let { data } = $props();
-  const board = createFeedbackBoard({
-    apiUrl: 'https://status-admin.example.com',
-    apiKey: 'sf_abc123...',
-    userEmail: data.user?.email,
-    getAuthToken: createAuthTokenGetter(), // optional — enables status management
+  let { data } = $props();
+  const board = createFeedbackBoard({
+    apiUrl: '/svc/feedback',
+    userEmail: data.user?.email,
+    getAuthToken: createAuthTokenGetter(), // optional — enables status management
     categoryConfig: {
       Bug: { icon: 'fa-solid fa-bug', label: 'Bugs' },
       'Feature Request': { icon: 'fa-solid fa-lightbulb', label: 'Ideas' },
@@ -198,8 +225,8 @@ The board is composed from parts around **one shared state** (`createFeedbackBoa
 
 | Option | Type | Default | Description |
 |--------|------|---------|-------------|
-| `apiUrl` | `string` | required | Admin backend URL |
-| `apiKey` | `string` | required | Project API key (`sf_…`) |
+| `apiUrl` | `string` | required | Proxy URL or direct admin backend URL |
+| `apiKey` | `string` | — | Project API key; omit when using the same-origin proxy |
 | `userEmail` | `string` | — | Authenticated user (required to submit feedback/replies) |
 | `categoryConfig` | `Record<string, { label?, icon?, description? }>` | `{}` | Relabel / add icons to sidebar categories |
 | `getAuthToken` | `() => string \| Promise<string \| null>` | — | Bearer token so privileged users can set status (see below) |
@@ -209,16 +236,18 @@ Exported parts: `createFeedbackBoard`, `FeedbackSidebar`, `FeedbackList`, `Feedb
 
 Categories are fixed by the system (**Bug**, **Feature Request**) — `categoryConfig` only relabels or adds icons.
 
-#### Setting status (Admin / ProductOwner)
+#### Setting status (ProductOwner)
+
+When you pass `getAuthToken`, a signed-in **ProductOwner** with access to the project can change an item's status from the board (via the status badge → menu) — e.g. Open → Considering → Accepted, or a decline with a reason — without a trip to the admin dashboard. Board status management is **ProductOwner-only**; an Admin role alone does not grant it (Admins still manage status from the dashboard).
 
-When you pass `getAuthToken`, a signed-in **Admin** or **ProductOwner** can change an item's status from the board (via the status badge → menu) — Open → Considering → Accepted, or a decline with a reason — no trip to the admin dashboard.
+Privileged viewers also see each item's **real internal status** on the badge (e.g. "QA / UAT", "Technical review") rather than the coarse public bucket ("In progress") that everyone else sees.
 
-- `getAuthToken` must return the user's **Alliance OIDC access token** whose audience covers **`status-feedback-admin`** (an *id token*, whose `aud` is your app's client id, is rejected). It's called on demand; return `null` for anonymous / non-privileged users and the control simply won't appear.
+- `getAuthToken` must return the user's **Alliance OIDC access token** whose audience covers **`status-feedback-admin`** (an *id token*, whose `aud` is your app's client id, is rejected). It's called on demand; return `null` for anonymous / non-privileged users and the control simply won't appear — the badge stays a plain read-only badge.
 - **Use the built-in `createAuthTokenGetter()`** for this — it fetches a same-origin token endpoint (`/auth/access-token` by default), caches until just before expiry, single-flights, and returns `null` on any failure. With `@alliance-droid/svelte-auth-core`, set `enableAccessTokenEndpoint: true` and request the `status-feedback-admin` scope so that endpoint exists. Create one instance at module level: `export const getAuthToken = createAuthTokenGetter();`
-- The token travels as `Authorization: Bearer …` to the admin backend, which **verifies it against the IdP** and derives the user's roles. Authorization (per-project access + which transitions a role may make, including reason prompts on declines/reopens) is enforced **server-side** by the same logic as the dashboard — the client never decides permissions.
+- The token travels as `Authorization: Bearer …` to the admin backend, which **verifies it against the IdP** and derives the user's roles. Authorization (ProductOwner role + per-project access + which transitions are allowed, including reason prompts on declines/reopens) is enforced **server-side** — the client never decides permissions. The backend returns a `canManage` flag (HTTP 200, not 403) so ordinary signed-in users get no console noise.
 - The available transitions are returned by the backend per item, so the menu always reflects exactly what that user may do.
 
-> Security note: the project `apiKey` alone never grants status changes — it only identifies the project. Every mutation additionally requires a valid IdP token, so the public board key stays safe to embed.
+> Security note: use the SvelteKit proxy to keep the project `apiKey` out of browser-delivered code. Direct admin calls with an embedded key are still supported for existing integrations, but same-origin proxy mode is the recommended default.
 
 ### DevFeedback
 
@@ -234,19 +263,18 @@ Auto-captures: screenshots (via html2canvas), console errors, viewport size, cur
 </script>
 
 <!-- In your root +layout.svelte -->
-<DevFeedback
-  apiUrl="https://status-admin.example.com"
-  apiKey="sf_abc123..."
-  boardUrl="/feedback"
-  userEmail={user?.email ?? ''}
-  enabled={userCanGiveFeedback}
+<DevFeedback
+  apiUrl="/svc/feedback/dev"
+  boardUrl="/feedback"
+  userEmail={user?.email ?? ''}
+  enabled={userCanGiveFeedback}
 />
 ```
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `apiUrl` | `string` | required | Admin backend URL |
-| `apiKey` | `string` | required | Project API key |
+| `apiUrl` | `string` | required | Proxy URL or direct admin backend URL. Use `/svc/feedback/dev` with the package proxy for stricter widget policy. |
+| `apiKey` | `string` | — | Project API key; omit when using the same-origin proxy |
 | `enabled` | `boolean` | required | The only gate — wire to your role/permission check |
 | `userEmail` | `string` | required | Signed-in user's email. Empty string ⇒ renders nothing (anonymous feedback unsupported) |
 | `boardUrl` | `string` | — | URL for "View Open Issues" link. Hidden if omitted. |
@@ -263,11 +291,10 @@ All components use a shared API client. You can also use it directly:
 ```typescript
 import { createStatusClient } from '@alliance-droid/status-feedback-system';
 
-const client = createStatusClient({
-  apiUrl: 'https://status-admin.example.com',
-  apiKey: 'sf_abc123...',
-  fetch: event.fetch, // Optional: pass SvelteKit's fetch for SSR
-});
+const client = createStatusClient({
+  apiUrl: '/svc/feedback',
+  fetch: event.fetch, // Optional: pass SvelteKit's fetch for SSR
+});
 
 const { systems, overallStatus } = await client.getStatus();
 const { incidents } = await client.getIncidents({ limit: 5, includeResolved: true });
@@ -309,15 +336,27 @@ import type {
   AuthTokenGetter, AuthTokenGetterOptions,
 } from '@alliance-droid/status-feedback-system';
 
-// API Client
-import { createStatusClient } from '@alliance-droid/status-feedback-system';
-import type { StatusClient, StatusClientConfig } from '@alliance-droid/status-feedback-system';
+// API Client
+import { createStatusClient } from '@alliance-droid/status-feedback-system';
+import type {
+  StatusClient, StatusClientConfig,
+  StatusData, IncidentData, UptimeData, BoardData, BoardItem, BoardCategory,
+} from '@alliance-droid/status-feedback-system';
+
+// SvelteKit server proxy
+import {
+  createSvelteKitFeedbackProxy,
+  isFeedbackProxyConfigured,
+} from '@alliance-droid/status-feedback-system/sveltekit/server';
+
+// Utilities
+import { deriveOverallStatus } from '@alliance-droid/status-feedback-system';
 
 // Types
 import type {
-  System, Incident, IncidentUpdate, Feedback, FeedbackResponse,
+  Project, System, Incident, IncidentUpdate, Feedback, FeedbackResponse,
+  FeedbackVisibility, StatusHistoryEntry, ApiResponse,
   SystemStatus, IncidentStatus, IncidentSeverity, FeedbackStatus,
-  StatusData, IncidentData, UptimeData, BoardData, BoardItem,
 } from '@alliance-droid/status-feedback-system';
 ```
 

package/dist/api.d.ts

@@ -6,7 +6,7 @@
  *
  *   const client = createStatusClient({
  *     apiUrl: 'https://status-admin.yourcompany.com',
- *     apiKey: 'sf_abc123...',
+ *     apiKey: 'sf_abc123...', // omit when apiUrl points at a same-origin proxy
  *   });
  *
  *   const { systems, incidents } = await client.getStatus();
@@ -15,8 +15,8 @@ import type { System, Incident, StatusHistoryEntry, Feedback, FeedbackResponse,
 export interface StatusClientConfig {
     /** Base URL of the status-feedback-admin app */
     apiUrl: string;
-    /** API key for the project (sf_ prefixed) */
-    apiKey: string;
+    /** API key for direct admin calls. Omit when using a same-origin proxy. */
+    apiKey?: string;
     /** Optional custom fetch function (for SSR) */
     fetch?: typeof globalThis.fetch;
 }

package/dist/api.js

@@ -6,7 +6,7 @@
  *
  *   const client = createStatusClient({
  *     apiUrl: 'https://status-admin.yourcompany.com',
- *     apiKey: 'sf_abc123...',
+ *     apiKey: 'sf_abc123...', // omit when apiUrl points at a same-origin proxy
  *   });
  *
  *   const { systems, incidents } = await client.getStatus();
@@ -18,8 +18,11 @@ export function createStatusClient(config) {
     const { apiUrl, apiKey } = config;
     const fetchFn = config.fetch ?? globalThis.fetch;
     const baseUrl = apiUrl.replace(/\/$/, '');
+    const resolvedApiKey = apiKey?.trim() ?? '';
     async function request(path, options) {
-        const url = `${baseUrl}${path}${path.includes('?') ? '&' : '?'}key=${encodeURIComponent(apiKey)}`;
+        const url = resolvedApiKey
+            ? `${baseUrl}${path}${path.includes('?') ? '&' : '?'}key=${encodeURIComponent(resolvedApiKey)}`
+            : `${baseUrl}${path}`;
         const response = await fetchFn(url, {
             ...options,
             headers: {

package/dist/components/DevFeedback.svelte

@@ -20,9 +20,10 @@
 		getElementHtml,
 	} from './dev/environment.js';
 
-	interface Props {
-		apiUrl: string;
-		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
@@ -51,9 +52,9 @@
 		renderTokenEndpoint?: string;
 	}
 
-	let {
-		apiUrl,
-		apiKey,
+	let {
+		apiUrl,
+		apiKey = '',
 		enabled,
 		maxConsoleErrors = 20,
 		showOnboarding = true,

package/dist/components/DevFeedback.svelte.d.ts

@@ -1,6 +1,7 @@
 interface Props {
     apiUrl: string;
-    apiKey: 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

package/dist/components/FeedbackButton.svelte

@@ -1,16 +1,17 @@
 <script lang="ts">
-	import FeedbackForm from './FeedbackForm.svelte';
-
-	interface Props {
-		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/FeedbackButton.svelte.d.ts

@@ -1,5 +1,6 @@
 interface Props {
-    apiKey: string;
+    /** Omit when apiUrl points at a same-origin proxy. */
+    apiKey?: string;
     apiUrl: string;
     categories?: string[];
     userEmail?: string;

package/dist/components/FeedbackForm.svelte

@@ -1,18 +1,19 @@
 <script lang="ts">
 	import { untrack } from 'svelte';
-	import { createStatusClient, type StatusClient } from '../api.js';
-
-	interface Props {
-		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/FeedbackForm.svelte.d.ts

@@ -1,5 +1,6 @@
 interface Props {
-    apiKey: string;
+    /** Omit when apiUrl points at a same-origin proxy. */
+    apiKey?: string;
     apiUrl: string;
     categories?: string[];
     userEmail?: string;

package/dist/components/StatusBanner.svelte

@@ -10,34 +10,35 @@
 		systems?: System[];
 		/** API URL for self-fetching mode */
 		apiUrl?: string;
-		/** API key for self-fetching mode */
-		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 && !!apiKey);
-	let fetchFailed = $state(false);
-
-	let usesApi = $derived(!systemsProp && !!apiUrl && !!apiKey);
+	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 {
-		if (!cachedClient || cachedApiUrl !== apiUrl || cachedApiKey !== apiKey) {
-			cachedClient = createStatusClient({ apiUrl: apiUrl!, apiKey: apiKey! });
-			cachedApiUrl = apiUrl!;
-			cachedApiKey = apiKey!;
-		}
-		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/StatusBanner.svelte.d.ts

@@ -4,7 +4,7 @@ interface Props {
     systems?: System[];
     /** API URL for self-fetching mode */
     apiUrl?: string;
-    /** API key for self-fetching mode */
+    /** API key for direct admin calls. Omit when using a same-origin proxy. */
     apiKey?: string;
     /** Link to full status page */
     statusUrl?: string;

package/dist/components/StatusPage.svelte

@@ -12,8 +12,8 @@
 		projectName: string;
 		/** API URL for fetching data (self-fetching mode) */
 		apiUrl?: string;
-		/** API key for fetching data (self-fetching mode) */
-		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,21 +44,22 @@
 	let error = $state('');
 
 	// ── Self-fetching mode ──
-	const usesApi = $derived(!!apiUrl && !!apiKey && !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 {
-		if (!cachedClient || cachedApiUrl !== apiUrl || cachedApiKey !== apiKey) {
-			cachedClient = createStatusClient({ apiUrl: apiUrl!, apiKey: apiKey! });
-			cachedApiUrl = apiUrl!;
-			cachedApiKey = apiKey!;
-		}
-		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.d.ts

@@ -4,7 +4,7 @@ interface Props {
     projectName: string;
     /** API URL for fetching data (self-fetching mode) */
     apiUrl?: string;
-    /** API key for fetching data (self-fetching mode) */
+    /** 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[];

package/dist/components/board/StatusBadgeMenu.svelte

@@ -21,7 +21,7 @@
 	import { onMount } from 'svelte';
 	import type { BoardItem, BoardTransition } from '../../api.js';
 	import type { FeedbackBoardState } from './state.svelte.js';
-	import { getStatusBadgeVariant, publicStatusLabel } from './utils.js';
+	import { getStatusBadgeVariant, publicStatusLabel, internalStatusLabel } from './utils.js';
 
 	interface Props {
 		board: FeedbackBoardState;
@@ -45,7 +45,15 @@
 
 	// 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));
+	// Label priority: the authoritative loaded transitions display (if this item's
+	// transitions have been fetched) → for privileged viewers, the item's own
+	// internal status (present on every board item, so ALL rows show their real
+	// status, not just the one the privilege probe happened to load) → otherwise
+	// the coarse public projection shown to everyone else.
+	let badgeLabel = $derived(
+		txns?.current.display ??
+			(board.canManageStatus ? internalStatusLabel(item.status) : 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}`);