ci: pin the Stage 0 platform harness and run every display scenario

Pin the integration harness to Zayin/Ekklesia PR 92, whose display host keeps
a live display across reconnects and returns a revoked one to pairing, and
fetch it from the repository's canonical Zayin location. With those fixes the
connectivity-blip, caching-probe, and revoke scenarios pass, so CI now runs
them too; previously they were left out because they failed.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

CLAUDE.md

@@ -0,0 +1,82 @@
+# CLAUDE.md
+
+Guidance for Claude Code (and other coding agents) working in this repository. It points at
+authoritative sources rather than restating them, because restated details drift. Inspect the actual
+source, tests, `package.json`, and CI workflow before relying on anything here or on memory of a
+prior session.
+
+## What this repository is
+
+Signage is a first-party Ekklesia **module** in its own repository (`Zayin/Signage`). It is not part of
+the platform monorepo and vendors none of it: it builds against the published `@ekklesia/*`
+module-development packages (platform ADRs 0053 and 0054), ships as one Ekklesia Module Package
+(ADR 0049), and reaches PostgreSQL only through the Module Database ABI v1 executor the host hands it
+(ADR 0050). Read `README.md` for what exists and the scope boundaries.
+
+Signage owns its domain: channel groups, audience channels, timelines, slots, signage assignments,
+playback rules, native images, and **its own management and display UI**. The platform shell hosts
+that UI through the generic module loader and never rebuilds it; do not move Signage screens into the
+platform.
+
+## Product direction lives beside this repository
+
+The current roadmap and product/interface design contract are `ROADMAP.md` and `DESIGN.md` in the
+parent development directory (`../ROADMAP.md` and `../DESIGN.md` in the standard
+`~/development/ekklesia/` layout). They are deliberately **not** committed here; do not copy them in.
+They are authoritative for product direction. If this repository's documentation disagrees with them,
+flag the conflict and correct the repository-local documentation; never silently follow stale text.
+
+Rules from those documents that apply to every change here:
+
+- **Shared resources belong to the platform.** Displays/devices, identity, branding, mail, storage,
+  and module lifecycle are the platform's. Signage *consumes* displays; it assigns content to them.
+- **The current display management is transitional.** Signage's viewer roster, display naming, and
+  pairing instructions, together with the platform's sidebar *Display devices* panel, are what exists
+  today. Stage 1 moves pairing and the one global display name to the platform's
+  **Settings → Displays**, and Signage then selects an existing display. Fix defects in the current
+  flow, keep existing paired displays, viewer identities, cached content, and assignments working, and
+  do **not** implement the Stage 1 Settings/Displays architecture early.
+- **Branding.** Normal user-facing UI never hard-codes "Ekklesia" (platform ADR 0046).
+- **Visual direction.** Simple and minimal; responsive; light, dark, and system modes. Normal UI
+  colours come only from the shared design tokens (`@ekklesia/design-tokens`) and shared elements
+  (`@ekklesia/ui`) — never a hard-coded colour. The display artifact's pure-black stage, blackout,
+  and slate are content presentation, not themed UI.
+- **No browser-native dialogs.** `window.alert`, `window.confirm`, and `window.prompt` are prohibited.
+  Destructive actions use in-product confirmation proportional to impact: a two-step in-place
+  confirmation for moderate actions, the shared `Dialog` for significant ones.
+- **Plain language.** Normal church staff must understand the UI without implementation terms; do not
+  expose an internal identifier merely because it exists.
+
+## ADRs
+
+`docs/architecture/decisions/` holds Signage's own ADRs; the platform's ADRs live in the Ekklesia
+repository. Accepted ADRs are immutable except for status and cross-reference corrections. A changed
+decision gets a new ADR that supersedes the old one; never rewrite a historical ADR to fit a change.
+
+## Working conventions
+
+- Canonical remote: `ssh://[email protected]:2222/Zayin/Signage.git` (the platform is
+  `Zayin/Ekklesia.git`). Local clones can be behind: `git fetch --prune --tags` and branch from
+  `origin/main`.
+- One branch per PR off an up-to-date `origin/main`. Never push to `main`, never merge your own PR,
+  and never create or push a release tag — release tags belong to the human maintainer.
+- A fix that needs a platform contract change is two PRs: the Ekklesia change first, then Signage,
+  with the compatibility boundary explicit. Do not copy platform logic into Signage to avoid it.
+- Every defect fix gets a regression test. Signage never reads the environment, opens its own socket,
+  builds an Ekklesia URL, or applies a migration; all of that reaches it through the host.
+
+## Verification
+
+`package.json` and `.gitea/workflows/ci.yml` are the source of truth. From a clean checkout:
+
+```bash
+pnpm install --frozen-lockfile
+pnpm lint && pnpm typecheck && pnpm test && pnpm build && pnpm validate
+bash ci/check-cleanup.sh
+```
+
+The CI `integration` job installs the real Module Package into the pinned platform
+(`ci/platform.env`) and drives the Dashboard and a kiosk display in real browsers, running the display
+scenarios listed in `ci/display-scenarios` (`bash ci/package.sh`, `bash ci/fetch-platform.sh`,
+`bash ci/integration.sh`; it needs Docker). Unit tests passing is not evidence that a display or
+browser behaviour works: verify display behaviour through the integration harness.

README.md

@@ -139,8 +139,25 @@ description of the platform ABI.
 | Transitions, offline continuation, playback controls | Dynamic change within one slide |
 | The management and display UI | Its own internal multi-stage behaviour |
 
+## Displays today, and what Stage 1 changes
+
+Displays are platform-owned. What exists now is transitional: a screen is paired in the Dashboard
+sidebar's *Display devices* panel, and Signage keeps its own roster of the screens that have checked
+in — their names, the group and audience each is assigned to, and their health. A running display
+follows its assignment as soon as an administrator changes it, and a revoked display returns to its
+pairing code. Entries for screens that are offline (a retired television, a test tab) can be removed
+from the roster.
+
+The product roadmap moves pairing and the one global display name to the platform's
+**Settings → Displays** in Stage 1; Signage will then select an existing display instead of naming its
+own. Until then, existing paired displays, their viewer identities, cached content, and assignments are
+preserved across every Signage upgrade.
+
+The management screen is currently desktop-only (the narrow-screen notice below 1024 px). The product
+design requires phone and tablet administration and dark mode; that arrives with the Stage 1 shared
+responsive Dashboard and design system rather than as a Signage-only layout.
+
 ## Licence and scope
 
-Deployment, the module store, a theme editor, a mobile management UI, video and audio, MQTT, Home
-Assistant, Companion, and any migration of legacy Announcements data are explicitly out of scope for
-this repository.
+Deployment, the module store, a theme editor, video and audio, MQTT, Home Assistant, Companion, and any
+migration of legacy Announcements data are explicitly out of scope for this repository.

ci/display-scenarios

@@ -5,3 +5,6 @@ two-pages
 session-blip
 stream-failure
 stream-recycle
+connectivity-blip
+caching-probe
+revoke

ci/platform.env

@@ -1,5 +1,5 @@
 # The companion Core harness Signage uses to install and run its real external package. The pull ref
 # remains reachable after its branch is deleted; the full commit pin makes the checkout immutable.
-EKKLESIA_PLATFORM_REPOSITORY=https://git.riverofglorymn.org/River_of_Glory_Church/Ekklesia.git
-EKKLESIA_PLATFORM_REF=refs/pull/90/head
-EKKLESIA_PLATFORM_COMMIT=40ef0ff802c124ae5a3a0b9aa51a1502a7b72644
+EKKLESIA_PLATFORM_REPOSITORY=https://git.zayin.net/Zayin/Ekklesia.git
+EKKLESIA_PLATFORM_REF=refs/pull/92/head
+EKKLESIA_PLATFORM_COMMIT=9331a8f7dfbf8cbb6528a8bff5ba842297b1ee5a

src/browser/desktop-gate.tsx

@@ -20,7 +20,7 @@ export function DesktopOnly({ children }: { readonly children: ReactNode }): Rea
       <div className="signage-narrow-notice" data-testid="signage-narrow-notice" role="note">
         <h2 className="signage-narrow-notice__title">Signage needs a desktop screen</h2>
         <p className="signage-narrow-notice__body">
-          {`Open the Ekklesia Dashboard on a display at least ${SIGNAGE_MIN_DESKTOP_WIDTH_PX} pixels wide to manage timelines, images, channels, and playback.`}
+          {`Open this page on a screen at least ${SIGNAGE_MIN_DESKTOP_WIDTH_PX} pixels wide to manage timelines, images, displays, and playback.`}
         </p>
       </div>
       <div className="signage-desktop" data-testid="signage-desktop">

src/display/controller.ts

@@ -20,6 +20,7 @@ import {
   signageMediaKey,
 } from "../browser/storage.js";
 import {
+  assignedChannelOf,
   type DisplayChannelState,
   type DisplayHeartbeat,
   type DisplayRealtimeGroup,
@@ -110,6 +111,8 @@ export function createDisplayController(options: DisplayControllerOptions): Disp
   let stage: SceneStage | undefined;
   let session: DisplaySessionView | undefined;
   let subscription: { close(): void } | undefined;
+  /** Identifies the one subscription whose callbacks may still act. */
+  let activeSubscription: symbol | undefined;
   let heartbeatHandle: unknown;
   let refreshHandle: unknown;
   let stopped = false;
@@ -127,6 +130,13 @@ export function createDisplayController(options: DisplayControllerOptions): Disp
    * each resets once its request works again. */
   let sessionHandle: unknown;
   let sessionAttempt = 0;
+  /** One registration in flight at a time. A refresh and a heartbeat can both discover that this
+   * viewer was removed from the roster; registering twice would open two realtime subscriptions and
+   * two heartbeat timers for one screen. */
+  let registering = false;
+  /** Consecutive times this screen found itself removed from the roster without a working fetch in
+   * between. Resets once a state fetch succeeds. */
+  let rosterAttempt = 0;
   let refreshAttempt = 0;
   let realtimeHandle: unknown;
   let realtimeAttempt = 0;
@@ -347,6 +357,9 @@ export function createDisplayController(options: DisplayControllerOptions): Disp
     // The crossfade is part of the persisted state too, so a screen that resumes offline fades the
     // way its operator configured rather than the way this file happened to default.
     stage.setCrossfade(snapshot.crossfadeMs);
+    // A deliberate blackout is persisted state like any other. Restoring it first means a kiosk that
+    // reloads mid-blackout stays black while it reconnects, instead of flashing the hidden frame.
+    stage.setBlackout(snapshot.playback.blackout);
     const atMs = serverNowFrom(snapshot, now());
     const evaluation = resolveOffline({ atMs, snapshot, unusableSelectionIds: unusable });
     const resolution = evaluation.resolution;
@@ -500,22 +513,96 @@ export function createDisplayController(options: DisplayControllerOptions): Disp
     if (stopped || !session) {
       return;
     }
+    const viewerId = session.viewerId;
     try {
-      const response = await options.context.api.request(
-        `channels/${session.channelId}/display-state`,
-      );
+      // Asked by viewer, not by channel: the server resolves where this screen is assigned *now*,
+      // so a reassignment or a deleted channel reaches a display that is already running.
+      const response = await options.context.api.request(`viewers/${viewerId}/display-state`);
+      if (await removedFromRoster(response)) {
+        // This screen was removed from the roster. It registers again with the identity it keeps,
+        // and keeps its frame meanwhile.
+        reregister(viewerId);
+        return;
+      }
       if (!response.ok) {
         await refreshFailed();
         return;
       }
       const state = (await response.json()) as DisplayChannelStateView;
       refreshAttempt = 0;
+      rosterAttempt = 0;
+      adoptAssignment(state.channel);
       await apply(state);
     } catch {
       await refreshFailed();
     }
   }
 
+  /** The server's answer about where this screen belongs wins, exactly as its playback state does. */
+  function adoptAssignment(channel: DisplayChannelStateView["channel"]): void {
+    if (!session || (session.channelId === channel.id && session.groupId === channel.groupId)) {
+      return;
+    }
+    session = {
+      ...session,
+      channelId: channel.id,
+      channelKey: channel.key,
+      groupId: channel.groupId,
+    };
+  }
+
+  /**
+   * Only Signage's own "no such viewer" means the roster entry is gone. Any other 404 — a proxy, a
+   * route this server does not have — is an ordinary failure, retried with backoff like the rest;
+   * treating it as removal would re-register in a loop.
+   */
+  async function removedFromRoster(response: Response): Promise<boolean> {
+    if (response.status !== 404) {
+      return false;
+    }
+    const body = (await response
+      .clone()
+      .json()
+      .catch(() => null)) as { code?: unknown } | null;
+    return body?.code === "SIGNAGE_NOT_FOUND";
+  }
+
+  /** Drops a session the server no longer recognizes and registers again, once, on backoff. */
+  function reregister(viewerId: string): void {
+    if (stopped || session?.viewerId !== viewerId) {
+      return;
+    }
+    endSession();
+    // Backed off as well: a server that keeps forgetting this screen the moment it registers must
+    // cost a request a minute, not a tight loop.
+    const delay = rosterAttempt === 0 ? 0 : displayRetryDelayMs(rosterAttempt);
+    rosterAttempt += 1;
+    if (delay === 0) {
+      void register();
+      return;
+    }
+    sessionHandle = setTimer(() => {
+      sessionHandle = undefined;
+      void register();
+    }, delay);
+  }
+
+  /** Releases everything a registration started: realtime, heartbeats, and pending retries. */
+  function endSession(): void {
+    session = undefined;
+    activeSubscription = undefined;
+    subscription?.close();
+    subscription = undefined;
+    if (heartbeatHandle !== undefined) {
+      clearInterval(heartbeatHandle as never);
+      heartbeatHandle = undefined;
+    }
+    if (realtimeHandle !== undefined) {
+      clearTimer(realtimeHandle);
+      realtimeHandle = undefined;
+    }
+  }
+
   /**
    * The server is unreachable, or answered with an error. The frame stays and local continuation
    * takes over — nothing about a network failure belongs on a lobby wall — and the refresh is tried
@@ -545,26 +632,17 @@ export function createDisplayController(options: DisplayControllerOptions): Disp
    * state — exactly as if it had worked the first time.
    */
   async function register(): Promise<void> {
-    if (stopped || session) {
+    if (stopped || session || registering) {
       return;
     }
+    registering = true;
     let registered: DisplaySessionView | undefined;
     try {
-      const response = await options.context.api.request("viewers/session", {
-        body: JSON.stringify({ viewerKey: await viewerKey() }),
-        headers: { "content-type": "application/json" },
-        method: "POST",
-      });
-      if (response.ok) {
-        // Read, not cast: a registration the display cannot understand is no registration, and is
-        // tried again like any other failure.
-        const parsed = parseViewerSessionResponse(await response.json());
-        registered = parsed.ok ? parsed.value : undefined;
-      }
-    } catch {
-      registered = undefined;
+      registered = await requestSession();
+    } finally {
+      registering = false;
     }
-    if (stopped) {
+    if (stopped || session) {
       return;
     }
     if (!registered) {
@@ -590,6 +668,26 @@ export function createDisplayController(options: DisplayControllerOptions): Disp
     report();
   }
 
+  async function requestSession(): Promise<DisplaySessionView | undefined> {
+    let registered: DisplaySessionView | undefined;
+    try {
+      const response = await options.context.api.request("viewers/session", {
+        body: JSON.stringify({ viewerKey: await viewerKey() }),
+        headers: { "content-type": "application/json" },
+        method: "POST",
+      });
+      if (response.ok) {
+        // Read, not cast: a registration the display cannot understand is no registration, and is
+        // tried again like any other failure.
+        const parsed = parseViewerSessionResponse(await response.json());
+        registered = parsed.ok ? parsed.value : undefined;
+      }
+    } catch {
+      registered = undefined;
+    }
+    return registered;
+  }
+
   /**
    * Subscribes to the display's realtime channel, and again whenever the host reports that a
    * subscription has ended for good. The host retries ordinary disconnects itself; a stream that
@@ -600,10 +698,21 @@ export function createDisplayController(options: DisplayControllerOptions): Disp
     if (stopped || !session) {
       return;
     }
+    // Only the newest subscription may act. Closing the old one can report "closed" synchronously,
+    // and that report must not schedule a second resubscription on top of this one.
+    const token = Symbol("subscription");
+    activeSubscription = token;
     subscription?.close();
     subscription = options.context.realtime.subscribe("display-state", {
-      onSnapshot: (state) => onRealtime(state),
+      onSnapshot: (state) => {
+        if (activeSubscription === token) {
+          onRealtime(state);
+        }
+      },
       onStatus: (status) => {
+        if (activeSubscription !== token) {
+          return;
+        }
         online = status === "connected";
         if (status === "connected") {
           realtimeAttempt = 0;
@@ -616,7 +725,11 @@ export function createDisplayController(options: DisplayControllerOptions): Disp
         }
         report();
       },
-      onUpdate: (state) => onRealtime(state),
+      onUpdate: (state) => {
+        if (activeSubscription === token) {
+          onRealtime(state);
+        }
+      },
     });
   }
 
@@ -639,11 +752,29 @@ export function createDisplayController(options: DisplayControllerOptions): Disp
         reportedSelectionId: renderedSelectionId ?? null,
         reportedTimelineId: lastState?.playback.activeTimelineId ?? null,
       };
-      await options.context.api.request(`viewers/${session.viewerId}/heartbeat`, {
+      const viewerId = session.viewerId;
+      const response = await options.context.api.request(`viewers/${viewerId}/heartbeat`, {
         body: JSON.stringify(report),
         headers: { "content-type": "application/json" },
         method: "POST",
       });
+      if (await removedFromRoster(response)) {
+        reregister(viewerId);
+        return;
+      }
+      if (!response.ok) {
+        return;
+      }
+      // The heartbeat is also how a screen learns it was reassigned while its slot is long, paused,
+      // or held — times when no state fetch is otherwise due.
+      const assigned = assignedChannelOf(await response.json().catch(() => undefined));
+      if (
+        assigned !== undefined &&
+        session?.viewerId === viewerId &&
+        assigned !== session.channelId
+      ) {
+        void refresh();
+      }
     } catch {
       // Telemetry is best effort and never affects what is on screen.
     }
@@ -695,6 +826,7 @@ export function createDisplayController(options: DisplayControllerOptions): Disp
 
     async stop(): Promise<void> {
       stopped = true;
+      activeSubscription = undefined;
       subscription?.close();
       subscription = undefined;
       if (heartbeatHandle !== undefined) {

src/server/routes/viewers.ts

@@ -18,6 +18,7 @@ import {
   describeViewerHealth,
   openViewerSession,
   recordViewerHeartbeat,
+  resolveViewerSession,
   SIGNAGE_VIEWER_NAME_MAX,
   updateViewerAssignment,
 } from "../viewers/service.js";
@@ -123,12 +124,50 @@ export function registerViewerRoutes(
         });
         // The response says what a display needs to keep itself honest, and nothing about other
         // displays or the installation.
-        const response: DisplayHeartbeatResponse = { acknowledged: true, recorded: result.written };
+        const assigned = await resolveViewerSession(store(context), result.viewer);
+        const response: DisplayHeartbeatResponse = {
+          acknowledged: true,
+          channelId: assigned.channel.id,
+          recorded: result.written,
+        };
         return Response.json(response);
       });
     },
   });
 
+  http.route({
+    method: "GET",
+    path: "/viewers/:viewerId/display-state",
+    permission: "signage.display.view",
+    maxBodyBytes: 0,
+    handler(_request, context) {
+      return signageBoundary(async () => {
+        const viewerId = requireUuidParam(context, "viewerId");
+        const signageStore = store(context);
+        const viewer = await signageStore.findViewer(viewerId);
+        if (!viewer) {
+          // Removed from the roster. The display registers again with the identity it keeps.
+          throw new SignageError("SIGNAGE_NOT_FOUND");
+        }
+        // Resolved on every fetch, never remembered from registration: an administrator who moves
+        // a screen, or deletes the channel it was on, changes what it shows without a reboot.
+        const { channel } = await resolveViewerSession(signageStore, viewer);
+        const snapshot = await playback().snapshot(channel.groupId);
+        return Response.json(
+          await buildDisplayChannelState({
+            atMs: Date.now(),
+            channel,
+            playback: snapshot,
+            registry: registry(),
+            settings: readSignageSettings(context.config),
+            storage: context.storage,
+            store: signageStore,
+          }),
+        );
+      });
+    },
+  });
+
   http.route({
     method: "GET",
     path: "/channels/:channelId/display-state",

src/server/viewers/service.ts

@@ -87,7 +87,7 @@ export async function openViewerSession(input: ViewerSessionInput): Promise<View
     if (!refreshed) {
       throw new SignageError("SIGNAGE_OPERATION_FAILED");
     }
-    return resolveSession(input.store, refreshed);
+    return resolveViewerSession(input.store, refreshed);
   }
 
   const channel = defaultChannelOf(group.channels);
@@ -121,7 +121,16 @@ function defaultChannelOf(channels: readonly StoredChannel[]): StoredChannel {
   return fallback;
 }
 
-async function resolveSession(store: SignageStore, viewer: StoredViewer): Promise<ViewerSession> {
+/**
+ * Where a known viewer is assigned **now**: its own channel, or the default channel of the default
+ * group when that channel no longer exists. A display asks this on every state fetch, which is what
+ * makes an administrator's reassignment — or deleting the channel a screen was on — reach a display
+ * that is already running, rather than only the next time it boots.
+ */
+export async function resolveViewerSession(
+  store: SignageStore,
+  viewer: StoredViewer,
+): Promise<ViewerSession> {
   const groups = await store.listChannelGroups();
   for (const group of groups) {
     const channel = group.channels.find((candidate) => candidate.id === viewer.channelId);

src/shared/display-protocol.ts

@@ -206,9 +206,28 @@ export function parseDisplayHeartbeat(raw: unknown): ProtocolResult<DisplayHeart
 export interface DisplayHeartbeatResponse {
   readonly acknowledged: true;
   readonly recorded: boolean;
+  /** The channel an administrator has this viewer assigned to now. A display whose own idea of its
+   * channel differs refetches its state, so a reassignment reaches a running screen within one
+   * heartbeat. Optional: a display ignores a response without it. */
+  readonly channelId?: string;
 }
 
-// --- Channel state: GET channels/:channelId/display-state -----------------------------------------
+/** The assigned channel from a heartbeat response, if it carried a usable one. */
+export function assignedChannelOf(raw: unknown): string | undefined {
+  if (typeof raw !== "object" || raw === null) {
+    return undefined;
+  }
+  const channelId = (raw as { readonly channelId?: unknown }).channelId;
+  return typeof channelId === "string" && channelId.length > 0 && channelId.length <= 64
+    ? channelId
+    : undefined;
+}
+
+// --- Channel state: GET viewers/:viewerId/display-state (and channels/:channelId/display-state) -----
+//
+// A registered display asks by its own viewer id, so the server resolves which channel it is assigned
+// to at that moment. The channel route remains for the management preview and for display code a
+// kiosk cached before the viewer route existed.
 
 /** A fresh, signed delivery URL. A bearer capability with an expiry: never persisted by a display. */
 export interface DisplayMedia {

src/ui/SignageDashboard.tsx

@@ -1,9 +1,9 @@
 import type { ModuleUiHostContext } from "@ekklesia/module-ui-sdk";
 import { EkklesiaUiStyles, EmptyState, PageHeader, Tabs } from "@ekklesia/ui";
-import { type ReactElement, useMemo, useState } from "react";
+import { type ReactElement, useContext, useMemo, useState } from "react";
 import { DesktopOnly } from "../browser/desktop-gate.js";
 import { createSignageApi } from "./api.js";
-import { useResource } from "./hooks.js";
+import { createResourceCache, ResourceCacheContext, useResource } from "./hooks.js";
 import { DisplaysPanel } from "./panels/DisplaysPanel.js";
 import { ImagesPanel } from "./panels/ImagesPanel.js";
 import { PlaybackPanel } from "./panels/PlaybackPanel.js";
@@ -22,175 +22,172 @@ import type { ChannelGroupView, SettingsResponse } from "./types.js";
  * Permission checks here decide what an operator is *offered*. The server decides what happens: a
  * hidden button is a courtesy, and every route is enforced regardless of what this believes.
  */
-export function SignageDashboard({
-	context,
-	copyText,
-}: {
-	readonly context: ModuleUiHostContext;
-	readonly copyText: (value: string) => Promise<void>;
+export function SignageDashboard(props: {
+  readonly context: ModuleUiHostContext;
+  readonly copyText: (value: string) => Promise<void>;
 }): ReactElement {
-	const api = useMemo(() => createSignageApi(context.api), [context.api]);
-	// Read before the resources below, so a viewer who may not see Signage at all asks for nothing.
-	// A hidden screen is a usability choice; the server is what actually refuses, and making a
-	// request it will certainly refuse is noise in a log rather than security.
-	const mayView = context.permissions.has("signage.view");
-	const settings = useResource(
-		() =>
-			mayView
-				? api.get<SettingsResponse>("settings")
-				: Promise.resolve(undefined),
-		[mayView],
-	);
-	const groups = useResource(
-		() =>
-			mayView
-				? api.get<{ groups: readonly ChannelGroupView[] }>("channel-groups")
-				: Promise.resolve(undefined),
-		[mayView],
-	);
-	const [tab, setTab] = useState("playback");
-	const [groupId, setGroupId] = useState<string | undefined>(undefined);
+  // One cache for the life of this screen: everything the panels have loaded, shared between them.
+  const [cache] = useState(createResourceCache);
+  return (
+    <ResourceCacheContext.Provider value={cache}>
+      <SignageWorkspace {...props} />
+    </ResourceCacheContext.Provider>
+  );
+}
 
-	const mayManageAssets = context.permissions.has("signage.assets.manage");
-	const mayManageTimelines = context.permissions.has(
-		"signage.timelines.manage",
-	);
-	const mayControl = context.permissions.has("signage.playback.control");
-	const mayManageDisplays = context.permissions.has("signage.displays.manage");
+function SignageWorkspace({
+  context,
+  copyText,
+}: {
+  readonly context: ModuleUiHostContext;
+  readonly copyText: (value: string) => Promise<void>;
+}): ReactElement {
+  const api = useMemo(() => createSignageApi(context.api), [context.api]);
+  const cache = useContext(ResourceCacheContext);
+  // Read before the resources below, so a viewer who may not see Signage at all asks for nothing.
+  // A hidden screen is a usability choice; the server is what actually refuses, and making a
+  // request it will certainly refuse is noise in a log rather than security.
+  const mayView = context.permissions.has("signage.view");
+  const settings = useResource(
+    () => (mayView ? api.get<SettingsResponse>("settings") : Promise.resolve(undefined)),
+    [mayView],
+    mayView ? "settings" : undefined,
+  );
+  const groups = useResource(
+    () =>
+      mayView
+        ? api.get<{ groups: readonly ChannelGroupView[] }>("channel-groups")
+        : Promise.resolve(undefined),
+    [mayView],
+    mayView ? "channel-groups" : undefined,
+  );
+  const [tab, setTab] = useState("playback");
+  const [groupId, setGroupId] = useState<string | undefined>(undefined);
 
-	if (!mayView) {
-		return (
-			<EmptyState
-				description="Ask an administrator for the signage.view permission."
-				title="No access to Signage"
-			/>
-		);
-	}
+  const mayManageAssets = context.permissions.has("signage.assets.manage");
+  const mayManageTimelines = context.permissions.has("signage.timelines.manage");
+  const mayControl = context.permissions.has("signage.playback.control");
+  const mayManageDisplays = context.permissions.has("signage.displays.manage");
 
-	const selectedGroupId =
-		groupId ??
-		(groups.state.status === "ready"
-			? groups.state.value?.groups[0]?.id
-			: undefined);
-	const selectedGroup =
-		groups.state.status === "ready"
-			? groups.state.value?.groups.find(
-					(candidate) => candidate.id === selectedGroupId,
-				)
-			: undefined;
+  if (!mayView) {
+    return (
+      <EmptyState
+        description="Ask an administrator for the signage.view permission."
+        title="No access to Signage"
+      />
+    );
+  }
 
-	return (
-		<>
-			<EkklesiaUiStyles />
-			<DesktopOnly>
-				<PageHeader
-					description="Plan visual content, operate playback, and keep every screen connected."
-					eyebrow="Media"
-					title="Signage"
-				/>
-				{renderLoadable(
-					settings.state,
-					(loaded) =>
-						loaded === undefined ? undefined : (
-							<div className="signage-workspace">
-								<Tabs
-									label="Signage sections"
-									onSelect={setTab}
-									selectedId={tab}
-									tabs={[
-										{
-											content: (
-												<PlaybackPanel
-													api={api}
-													canControl={mayControl}
-													context={context}
-													groupId={selectedGroupId}
-													onGroupChange={setGroupId}
-													settings={loaded}
-												/>
-											),
-											id: "playback",
-											label: "Playback",
-										},
-										{
-											content: (
-												<TimelinesPanel
-													{...(selectedGroup
-														? {
-																activeGroupName: selectedGroup.name,
-																activeTimelineId:
-																	selectedGroup.playback.activeTimelineId,
-															}
-														: {})}
-													api={api}
-													canManage={mayManageTimelines}
-													onActivate={
-														mayControl && selectedGroupId !== undefined
-															? async (timelineId) => {
-																	await api.send(
-																		"POST",
-																		`playback/${selectedGroupId}/activate`,
-																		{
-																			timelineId,
-																			when: "now",
-																		},
-																	);
-																	groups.reload();
-																	setTab("playback");
-																}
-															: undefined
-													}
-													settings={loaded}
-												/>
-											),
-											id: "timelines",
-											label: "Timelines",
-										},
-										{
-											content: (
-												<ImagesPanel
-													api={api}
-													canManage={mayManageAssets}
-													settings={loaded}
-												/>
-											),
-											id: "images",
-											label: "Images",
-										},
-										{
-											content: (
-												<DisplaysPanel
-													api={api}
-													canManage={mayManageDisplays}
-													copyText={copyText}
-													displaySetupUrl={context.display?.url}
-													onGroupsChanged={() => {
-														setGroupId(undefined);
-														groups.reload();
-													}}
-												/>
-											),
-											id: "displays",
-											label: "Displays",
-										},
-										{
-											content: (
-												<ProvidersPanel
-													api={api}
-													context={context}
-													settings={loaded}
-												/>
-											),
-											id: "providers",
-											label: "Providers",
-										},
-									]}
-								/>
-							</div>
-						),
-					{ label: "Loading Signage…", onRetry: settings.reload },
-				)}
-			</DesktopOnly>
-		</>
-	);
+  const selectedGroupId =
+    groupId ?? (groups.state.status === "ready" ? groups.state.value?.groups[0]?.id : undefined);
+  const selectedGroup =
+    groups.state.status === "ready"
+      ? groups.state.value?.groups.find((candidate) => candidate.id === selectedGroupId)
+      : undefined;
+
+  return (
+    <>
+      <EkklesiaUiStyles />
+      <DesktopOnly>
+        <PageHeader
+          description="Plan visual content, operate playback, and keep every screen connected."
+          eyebrow="Media"
+          title="Signage"
+        />
+        {renderLoadable(
+          settings.state,
+          (loaded) =>
+            loaded === undefined ? undefined : (
+              <div className="signage-workspace">
+                <Tabs
+                  label="Signage sections"
+                  onSelect={setTab}
+                  selectedId={tab}
+                  tabs={[
+                    {
+                      content: (
+                        <PlaybackPanel
+                          api={api}
+                          canControl={mayControl}
+                          context={context}
+                          groupId={selectedGroupId}
+                          onGroupChange={setGroupId}
+                          settings={loaded}
+                        />
+                      ),
+                      id: "playback",
+                      label: "Playback",
+                    },
+                    {
+                      content: (
+                        <TimelinesPanel
+                          {...(selectedGroup
+                            ? {
+                                activeGroupName: selectedGroup.name,
+                                activeTimelineId: selectedGroup.playback.activeTimelineId,
+                              }
+                            : {})}
+                          api={api}
+                          canManage={mayManageTimelines}
+                          onActivate={
+                            mayControl && selectedGroupId !== undefined
+                              ? async (timelineId) => {
+                                  await api.send("POST", `playback/${selectedGroupId}/activate`, {
+                                    timelineId,
+                                    when: "now",
+                                  });
+                                  // Playback opens on what is now true, not on the
+                                  // timeline it was showing before.
+                                  cache?.write(
+                                    `playback/${selectedGroupId}`,
+                                    await api.get(`playback/${selectedGroupId}`),
+                                  );
+                                  groups.reload();
+                                  setTab("playback");
+                                }
+                              : undefined
+                          }
+                          settings={loaded}
+                        />
+                      ),
+                      id: "timelines",
+                      label: "Timelines",
+                    },
+                    {
+                      content: (
+                        <ImagesPanel api={api} canManage={mayManageAssets} settings={loaded} />
+                      ),
+                      id: "images",
+                      label: "Images",
+                    },
+                    {
+                      content: (
+                        <DisplaysPanel
+                          api={api}
+                          canManage={mayManageDisplays}
+                          copyText={copyText}
+                          displaySetupUrl={context.display?.url}
+                          onGroupsChanged={() => {
+                            setGroupId(undefined);
+                            groups.reload();
+                          }}
+                        />
+                      ),
+                      id: "displays",
+                      label: "Displays",
+                    },
+                    {
+                      content: <ProvidersPanel api={api} context={context} settings={loaded} />,
+                      id: "providers",
+                      label: "Providers",
+                    },
+                  ]}
+                />
+              </div>
+            ),
+          { label: "Loading Signage…", onRetry: settings.reload },
+        )}
+      </DesktopOnly>
+    </>
+  );
 }

src/ui/hooks.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
 import { type SignageApiFailure, SignageRequestError } from "./api.js";
 
 /**
@@ -21,15 +21,76 @@ export interface Resource<Value> {
   reload(): void;
 }
 
+/**
+ * The last value each Signage resource loaded, shared by every panel on the screen.
+ *
+ * The tabs mount only the selected panel, so without this every tab switch threw its data away,
+ * flashed a spinner, and collapsed the page to its height before growing again — the "jumping" an
+ * operator saw. It also let two panels disagree: activating a timeline from Playback left Timelines
+ * showing the old one as inactive until a reload. Now a remounted panel starts from what was last
+ * known and refreshes quietly, and a reload anywhere updates every panel reading the same resource.
+ */
+export interface ResourceCache {
+  read(key: string): { readonly value: unknown } | undefined;
+  write(key: string, value: unknown): void;
+  subscribe(key: string, listener: (value: unknown) => void): () => void;
+}
+
+export function createResourceCache(): ResourceCache {
+  const values = new Map<string, { readonly value: unknown }>();
+  const listeners = new Map<string, Set<(value: unknown) => void>>();
+  return {
+    read: (key) => values.get(key),
+    subscribe(key, listener) {
+      const set = listeners.get(key) ?? new Set();
+      set.add(listener);
+      listeners.set(key, set);
+      return () => {
+        set.delete(listener);
+        if (set.size === 0) {
+          listeners.delete(key);
+        }
+      };
+    },
+    write(key, value) {
+      values.set(key, { value });
+      for (const listener of [...(listeners.get(key) ?? [])]) {
+        listener(value);
+      }
+    },
+  };
+}
+
+export const ResourceCacheContext = createContext<ResourceCache | undefined>(undefined);
+
 export function useResource<Value>(
   load: () => Promise<Value>,
   dependencies: readonly unknown[],
+  /** Shares this resource with every other panel that names the same key. */
+  key?: string,
 ): Resource<Value> {
-  const [state, setState] = useState<Loadable<Value>>({ status: "loading" });
+  const cache = useContext(ResourceCacheContext);
+  const cached = key === undefined ? undefined : cache?.read(key);
+  const [state, setState] = useState<Loadable<Value>>(
+    cached === undefined
+      ? { status: "loading" }
+      : { status: "ready", value: cached.value as Value },
+  );
   const generation = useRef(0);
   const loadRef = useRef(load);
   loadRef.current = load;
 
+  useEffect(() => {
+    if (key === undefined || !cache) {
+      return;
+    }
+    const current = cache.read(key);
+    if (current !== undefined) {
+      setState({ status: "ready", value: current.value as Value });
+    }
+    return cache.subscribe(key, (value) => setState({ status: "ready", value: value as Value }));
+  }, [cache, key]);
+
   const run = useCallback(() => {
     generation.current += 1;
     const token = generation.current;
@@ -38,7 +99,13 @@ export function useResource<Value>(
       .then((value) => {
         // A response from a request the panel has already moved on from must never overwrite a
         // newer one.
-        if (token === generation.current) {
+        if (token !== generation.current) {
+          return;
+        }
+        if (key !== undefined && cache) {
+          // Every panel subscribed to this key, including this one, is updated by the write.
+          cache.write(key, value);
+        } else {
           setState({ status: "ready", value });
         }
       })
@@ -58,7 +125,7 @@ export function useResource<Value>(
           status: "failed",
         });
       });
-  }, []);
+  }, [cache, key]);
 
   // The caller's dependency list is spread deliberately: a resource reloads when *its* inputs
   // change, which is the whole reason this takes one.

src/ui/index.tsx

@@ -14,24 +14,22 @@ import ownStyles from "./styles.css";
  * rather than bundled (ADR 0039).
  */
 export default defineModuleUi({
-	id: "signage",
-	version: "0.1.4",
-	styles: `${EKKLESIA_UI_STYLESHEET}\n${ownStyles}`,
-	mount(container, context) {
-		const root = createRoot(container);
-		root.render(
-			<SignageDashboard
-				context={context}
-				copyText={async (value) => {
-					if (globalThis.navigator.clipboard === undefined) {
-						throw new Error(
-							"Clipboard access is not available in this browser.",
-						);
-					}
-					await globalThis.navigator.clipboard.writeText(value);
-				}}
-			/>,
-		);
-		return () => root.unmount();
-	},
+  id: "signage",
+  version: "0.1.4",
+  styles: `${EKKLESIA_UI_STYLESHEET}\n${ownStyles}`,
+  mount(container, context) {
+    const root = createRoot(container);
+    root.render(
+      <SignageDashboard
+        context={context}
+        copyText={async (value) => {
+          if (globalThis.navigator.clipboard === undefined) {
+            throw new Error("Clipboard access is not available in this browser.");
+          }
+          await globalThis.navigator.clipboard.writeText(value);
+        }}
+      />,
+    );
+    return () => root.unmount();
+  },
 });

src/ui/panels/ImagesPanel.tsx

@@ -9,7 +9,7 @@ import {
 import type { SignageApi } from "../api.js";
 import { useAction, useResource } from "../hooks.js";
 import type { ImageRecord, SettingsResponse } from "../types.js";
-import { FailureNote, formatInstant, renderLoadable } from "./shared.js";
+import { ConfirmButton, FailureNote, formatInstant, renderLoadable } from "./shared.js";
 
 /**
  * The native image library and its upload queue.
@@ -28,7 +28,11 @@ export function ImagesPanel({
   readonly settings: SettingsResponse;
   readonly canManage: boolean;
 }): ReactElement {
-  const images = useResource(() => api.get<{ images: readonly ImageRecord[] }>("images"), []);
+  const images = useResource(
+    () => api.get<{ images: readonly ImageRecord[] }>("images"),
+    [],
+    "images",
+  );
   const [uploads, setUploads] = useState<readonly UploadItem[]>([]);
   const queueRef = useRef<UploadQueue | undefined>(undefined);
   const [renaming, setRenaming] = useState<{ id: string; value: string } | undefined>(undefined);
@@ -204,13 +208,15 @@ export function ImagesPanel({
                             Rename
                           </Button>
                         )}
-                        <Button
+                        <ConfirmButton
+                          confirmLabel="Delete this image"
                           disabled={remove.pending}
-                          onClick={() => remove.run(() => api.send("DELETE", `images/${image.id}`))}
-                          variant="danger"
-                        >
-                          Delete
-                        </Button>
+                          label="Delete"
+                          onConfirm={() =>
+                            remove.run(() => api.send("DELETE", `images/${image.id}`))
+                          }
+                          testId={`signage-image-delete-${image.id}`}
+                        />
                       </div>
                     ) : undefined}
                   </li>

src/ui/panels/PlaybackPanel.tsx

@@ -1,29 +1,16 @@
 import type { ModuleUiHostContext } from "@ekklesia/module-ui-sdk";
-import {
-	ActionBar,
-	Badge,
-	Button,
-	EmptyState,
-	Field,
-	Panel,
-	Select,
-} from "@ekklesia/ui";
-import { type ReactElement, useState } from "react";
+import { ActionBar, Badge, Button, EmptyState, Field, Panel, Select } from "@ekklesia/ui";
+import { type ReactElement, useEffect, useRef, useState } from "react";
 import type { SignageApi } from "../api.js";
 import { useAction, useResource, useTick } from "../hooks.js";
 import type {
-	ChannelGroupView,
-	PlaybackDetailView,
-	SettingsResponse,
-	TimelineSummary,
+  ChannelGroupView,
+  PlaybackDetailView,
+  SettingsResponse,
+  TimelineSummary,
 } from "../types.js";
 import { PreviewPanel } from "./PreviewPanel.js";
-import {
-	FailureNote,
-	formatDuration,
-	formatInstant,
-	renderLoadable,
-} from "./shared.js";
+import { FailureNote, formatDuration, formatInstant, renderLoadable } from "./shared.js";
 
 /**
  * Live transport for one channel group.
@@ -33,325 +20,333 @@ import {
  * button, and neither can produce a state the other did not ask for.
  */
 export function PlaybackPanel({
-	api,
-	context,
-	settings,
-	canControl,
-	groupId,
-	onGroupChange,
+  api,
+  context,
+  settings,
+  canControl,
+  groupId,
+  onGroupChange,
 }: {
-	readonly api: SignageApi;
-	readonly context: ModuleUiHostContext;
-	readonly settings: SettingsResponse;
-	readonly canControl: boolean;
-	readonly groupId: string | undefined;
-	readonly onGroupChange: (groupId: string) => void;
+  readonly api: SignageApi;
+  readonly context: ModuleUiHostContext;
+  readonly settings: SettingsResponse;
+  readonly canControl: boolean;
+  readonly groupId: string | undefined;
+  readonly onGroupChange: (groupId: string) => void;
 }): ReactElement {
-	const groups = useResource(
-		() => api.get<{ groups: readonly ChannelGroupView[] }>("channel-groups"),
-		[],
-	);
-	const timelines = useResource(
-		() => api.get<{ timelines: readonly TimelineSummary[] }>("timelines"),
-		[],
-	);
-	const detail = useResource(
-		() =>
-			groupId === undefined
-				? Promise.resolve(undefined)
-				: api.get<PlaybackDetailView>(`playback/${groupId}`),
-		[groupId],
-	);
-	const command = useAction(() => {
-		detail.reload();
-		groups.reload();
-	});
-	const [activateId, setActivateId] = useState("");
-	const previewChannelId =
-		groups.state.status === "ready"
-			? (groups.state.value.groups
-					.find((group) => group.id === groupId)
-					?.channels.find((channel) => channel.isDefault)?.id ?? undefined)
-			: undefined;
-	// A one-second tick so the remaining time counts down rather than sitting still between refreshes.
-	useTick(1000);
+  const groups = useResource(
+    () => api.get<{ groups: readonly ChannelGroupView[] }>("channel-groups"),
+    [],
+    "channel-groups",
+  );
+  const timelines = useResource(
+    () => api.get<{ timelines: readonly TimelineSummary[] }>("timelines"),
+    [],
+    "timelines",
+  );
+  const detail = useResource(
+    () =>
+      groupId === undefined
+        ? Promise.resolve(undefined)
+        : api.get<PlaybackDetailView>(`playback/${groupId}`),
+    [groupId],
+    groupId === undefined ? undefined : `playback/${groupId}`,
+  );
+  const command = useAction(() => {
+    detail.reload();
+    groups.reload();
+  });
+  const [activateId, setActivateId] = useState("");
+  const previewChannelId =
+    groups.state.status === "ready"
+      ? (groups.state.value.groups
+          .find((group) => group.id === groupId)
+          ?.channels.find((channel) => channel.isDefault)?.id ?? undefined)
+      : undefined;
+  // A one-second tick so the remaining time counts down rather than sitting still between refreshes.
+  useTick(1000);
+  useManagementUpdates(context, groupId, () => {
+    detail.reload();
+    groups.reload();
+  });
 
-	function run(path: string, body?: unknown): void {
-		if (groupId === undefined) {
-			return;
-		}
-		command.run(() => api.send("POST", `playback/${groupId}/${path}`, body));
-	}
+  function run(path: string, body?: unknown): void {
+    if (groupId === undefined) {
+      return;
+    }
+    command.run(() => api.send("POST", `playback/${groupId}/${path}`, body));
+  }
 
-	function timelineLabel(timelineId: string): string {
-		if (timelines.state.status !== "ready") {
-			return timelineId;
-		}
-		return (
-			timelines.state.value.timelines.find(
-				(timeline) => timeline.id === timelineId,
-			)?.name ?? timelineId
-		);
-	}
+  function timelineLabel(timelineId: string): string {
+    if (timelines.state.status !== "ready") {
+      return timelineId;
+    }
+    return (
+      timelines.state.value.timelines.find((timeline) => timeline.id === timelineId)?.name ??
+      timelineId
+    );
+  }
 
-	return (
-		<div className="signage-columns signage-playback-layout">
-			<Panel
-				actions={renderLoadable(
-					groups.state,
-					(value) => (
-						<Field label="Channel group">
-							{(control) => (
-								<Select
-									{...control}
-									onChange={(event) => onGroupChange(event.target.value)}
-									value={groupId ?? ""}
-								>
-									{value.groups.map((group) => (
-										<option key={group.id} value={group.id}>
-											{group.name}
-										</option>
-									))}
-								</Select>
-							)}
-						</Field>
-					),
-					{ label: "Loading groups…" },
-				)}
-				description="One clock for every channel in the group."
-				title="Playback"
-			>
-				{groupId === undefined ? (
-					<EmptyState title="No channel group selected" />
-				) : (
-					renderLoadable(
-						detail.state,
-						(value) =>
-							value === undefined ? (
-								<EmptyState title="No channel group selected" />
-							) : (
-								<div
-									className="signage-playback"
-									data-testid="signage-playback"
-								>
-									<div className="signage-playback__status">
-										{value.snapshot.activeTimelineId === null ? undefined : (
-											<Badge tone="success">
-												{`Active: ${timelineLabel(value.snapshot.activeTimelineId)}`}
-											</Badge>
-										)}
-										<Badge
-											tone={
-												value.snapshot.transport === "playing"
-													? "success"
-													: value.snapshot.transport === "idle"
-														? "warning"
-														: "info"
-											}
-										>
-											{value.snapshot.transport}
-										</Badge>
-										{value.snapshot.blackout ? (
-											<Badge tone="danger">Blackout</Badge>
-										) : undefined}
-										{value.current?.stale === true ? (
-											<Badge tone="warning">Stale</Badge>
-										) : undefined}
-										{value.current?.withdrawn === true ? (
-											<Badge tone="warning">Withdrawn</Badge>
-										) : undefined}
-										{value.snapshot.pendingTimelineId === null ? undefined : (
-											<Badge tone="info">Activation queued</Badge>
-										)}
-									</div>
+  return (
+    <div className="signage-columns signage-playback-layout">
+      <Panel
+        actions={renderLoadable(
+          groups.state,
+          (value) => (
+            <Field label="Channel group">
+              {(control) => (
+                <Select
+                  {...control}
+                  onChange={(event) => onGroupChange(event.target.value)}
+                  value={groupId ?? ""}
+                >
+                  {value.groups.map((group) => (
+                    <option key={group.id} value={group.id}>
+                      {group.name}
+                    </option>
+                  ))}
+                </Select>
+              )}
+            </Field>
+          ),
+          { label: "Loading groups…" },
+        )}
+        description="One clock for every channel in the group."
+        title="Playback"
+      >
+        {groupId === undefined ? (
+          <EmptyState title="No channel group selected" />
+        ) : (
+          renderLoadable(
+            detail.state,
+            (value) =>
+              value === undefined ? (
+                <EmptyState title="No channel group selected" />
+              ) : (
+                <div className="signage-playback" data-testid="signage-playback">
+                  <div className="signage-playback__status">
+                    {value.snapshot.activeTimelineId === null ? undefined : (
+                      <Badge tone="success">
+                        {`Active: ${timelineLabel(value.snapshot.activeTimelineId)}`}
+                      </Badge>
+                    )}
+                    <Badge
+                      tone={
+                        value.snapshot.transport === "playing"
+                          ? "success"
+                          : value.snapshot.transport === "idle"
+                            ? "warning"
+                            : "info"
+                      }
+                    >
+                      {value.snapshot.transport}
+                    </Badge>
+                    {value.snapshot.blackout ? <Badge tone="danger">Blackout</Badge> : undefined}
+                    {value.current?.stale === true ? (
+                      <Badge tone="warning">Stale</Badge>
+                    ) : undefined}
+                    {value.current?.withdrawn === true ? (
+                      <Badge tone="warning">Withdrawn</Badge>
+                    ) : undefined}
+                    {value.snapshot.pendingTimelineId === null ? undefined : (
+                      <Badge tone="info">Activation queued</Badge>
+                    )}
+                  </div>
 
-									{value.current === null ? (
-										<EmptyState
-											description="Nothing is currently resolvable. A display shows its safe slate."
-											title="Nothing on screen"
-										/>
-									) : (
-										<section className="signage-playback__now">
-											<h3>Now showing</h3>
-											<dl
-												className="signage-playback__current"
-												data-testid="signage-current"
-											>
-												<dt>Provider</dt>
-												<dd>{value.current.providerId}</dd>
-												<dt>Item</dt>
-												<dd>{value.current.itemId}</dd>
-												<dt>Renderer</dt>
-												<dd>{value.current.rendererContributionId ?? "—"}</dd>
-												<dt>Duration</dt>
-												<dd>{formatDuration(value.current.durationMs)}</dd>
-												<dt>Remaining</dt>
-												<dd data-testid="signage-remaining">
-													{value.snapshot.remainingMs === null
-														? "—"
-														: formatDuration(value.snapshot.remainingMs)}
-												</dd>
-												<dt>Started</dt>
-												<dd>
-													{formatInstant(
-														value.current.startedAtMs,
-														settings.timezone,
-													)}
-												</dd>
-											</dl>
-										</section>
-									)}
+                  {value.current === null ? (
+                    <EmptyState
+                      description="Nothing is currently resolvable. A display shows its safe slate."
+                      title="Nothing on screen"
+                    />
+                  ) : (
+                    <section className="signage-playback__now">
+                      <h3>Now showing</h3>
+                      <dl className="signage-playback__current" data-testid="signage-current">
+                        <dt>Provider</dt>
+                        <dd>{value.current.providerId}</dd>
+                        <dt>Item</dt>
+                        <dd>{value.current.itemId}</dd>
+                        <dt>Renderer</dt>
+                        <dd>{value.current.rendererContributionId ?? "—"}</dd>
+                        <dt>Duration</dt>
+                        <dd>{formatDuration(value.current.durationMs)}</dd>
+                        <dt>Remaining</dt>
+                        <dd data-testid="signage-remaining">
+                          {value.snapshot.remainingMs === null
+                            ? "—"
+                            : formatDuration(value.snapshot.remainingMs)}
+                        </dd>
+                        <dt>Started</dt>
+                        <dd>{formatInstant(value.current.startedAtMs, settings.timezone)}</dd>
+                      </dl>
+                    </section>
+                  )}
 
-									{canControl ? (
-										<ActionBar
-											className="signage-playback__controls"
-											data-testid="signage-controls"
-											label="Playback controls"
-										>
-											<Button
-												disabled={command.pending}
-												onClick={() => run("previous")}
-											>
-												Previous
-											</Button>
-											{value.snapshot.transport === "paused" ? (
-												<Button
-													disabled={command.pending}
-													onClick={() => run("resume")}
-													variant="primary"
-												>
-													Resume
-												</Button>
-											) : (
-												<Button
-													disabled={command.pending}
-													onClick={() => run("pause")}
-												>
-													Pause
-												</Button>
-											)}
-											<Button
-												disabled={command.pending}
-												onClick={() => run("next")}
-											>
-												Next
-											</Button>
-											<Button
-												disabled={command.pending}
-												onClick={() =>
-													run("blackout", { on: !value.snapshot.blackout })
-												}
-												variant={
-													value.snapshot.blackout ? "primary" : "secondary"
-												}
-											>
-												{value.snapshot.blackout ? "End blackout" : "Blackout"}
-											</Button>
-											{value.snapshot.staticAssetId === null ? undefined : (
-												<Button
-													disabled={command.pending}
-													onClick={() => run("static", { assetId: null })}
-												>
-													Release hold
-												</Button>
-											)}
-											<Button
-												disabled={command.pending}
-												onClick={() => run("reload")}
-											>
-												Reload content
-											</Button>
-										</ActionBar>
-									) : undefined}
+                  {canControl ? (
+                    <ActionBar
+                      className="signage-playback__controls"
+                      data-testid="signage-controls"
+                      label="Playback controls"
+                    >
+                      <Button disabled={command.pending} onClick={() => run("previous")}>
+                        Previous
+                      </Button>
+                      {value.snapshot.transport === "paused" ? (
+                        <Button
+                          disabled={command.pending}
+                          onClick={() => run("resume")}
+                          variant="primary"
+                        >
+                          Resume
+                        </Button>
+                      ) : (
+                        <Button disabled={command.pending} onClick={() => run("pause")}>
+                          Pause
+                        </Button>
+                      )}
+                      <Button disabled={command.pending} onClick={() => run("next")}>
+                        Next
+                      </Button>
+                      <Button
+                        disabled={command.pending}
+                        onClick={() => run("blackout", { on: !value.snapshot.blackout })}
+                        variant={value.snapshot.blackout ? "primary" : "secondary"}
+                      >
+                        {value.snapshot.blackout ? "End blackout" : "Blackout"}
+                      </Button>
+                      {value.snapshot.staticAssetId === null ? undefined : (
+                        <Button
+                          disabled={command.pending}
+                          onClick={() => run("static", { assetId: null })}
+                        >
+                          Release hold
+                        </Button>
+                      )}
+                      <Button disabled={command.pending} onClick={() => run("reload")}>
+                        Reload content
+                      </Button>
+                    </ActionBar>
+                  ) : undefined}
 
-									{canControl ? (
-										<div className="signage-playback__activate">
-											{renderLoadable(
-												timelines.state,
-												(loaded) => (
-													<>
-														<Field label="Activate timeline">
-															{(control) => (
-																<Select
-																	{...control}
-																	onChange={(event) =>
-																		setActivateId(event.target.value)
-																	}
-																	value={activateId}
-																>
-																	<option value="">Choose a timeline…</option>
-																	{loaded.timelines.map((timeline) => (
-																		<option
-																			key={timeline.id}
-																			value={timeline.id}
-																		>
-																			{timeline.name}
-																		</option>
-																	))}
-																</Select>
-															)}
-														</Field>
-														<Button
-															disabled={command.pending || activateId === ""}
-															onClick={() =>
-																run("activate", {
-																	timelineId: activateId,
-																	when: "now",
-																})
-															}
-															variant="primary"
-														>
-															Now
-														</Button>
-														<Button
-															disabled={command.pending || activateId === ""}
-															onClick={() =>
-																run("activate", {
-																	timelineId: activateId,
-																	when: "next-boundary",
-																})
-															}
-														>
-															At next slot
-														</Button>
-													</>
-												),
-												{ label: "Loading timelines…" },
-											)}
-										</div>
-									) : undefined}
+                  {canControl ? (
+                    <div className="signage-playback__activate">
+                      {renderLoadable(
+                        timelines.state,
+                        (loaded) => (
+                          <>
+                            <Field label="Activate timeline">
+                              {(control) => (
+                                <Select
+                                  {...control}
+                                  onChange={(event) => setActivateId(event.target.value)}
+                                  value={activateId}
+                                >
+                                  <option value="">Choose a timeline…</option>
+                                  {loaded.timelines.map((timeline) => (
+                                    <option key={timeline.id} value={timeline.id}>
+                                      {timeline.name}
+                                    </option>
+                                  ))}
+                                </Select>
+                              )}
+                            </Field>
+                            <Button
+                              disabled={command.pending || activateId === ""}
+                              onClick={() =>
+                                run("activate", {
+                                  timelineId: activateId,
+                                  when: "now",
+                                })
+                              }
+                              variant="primary"
+                            >
+                              Now
+                            </Button>
+                            <Button
+                              disabled={command.pending || activateId === ""}
+                              onClick={() =>
+                                run("activate", {
+                                  timelineId: activateId,
+                                  when: "next-boundary",
+                                })
+                              }
+                            >
+                              At next slot
+                            </Button>
+                          </>
+                        ),
+                        { label: "Loading timelines…" },
+                      )}
+                    </div>
+                  ) : undefined}
 
-									{value.history.length === 0 ? undefined : (
-										<div className="signage-playback__history">
-											<h4 className="signage-editor__subtitle">
-												Recently played
-											</h4>
-											<ul className="ek-list">
-												{value.history.slice(0, 8).map((entry) => (
-													<li
-														className="ek-list__item signage-row"
-														key={entry.id}
-													>
-														<span className="signage-row__name">
-															{entry.itemId}
-														</span>
-														<span className="signage-playback__history-meta">
-															{`${entry.providerId} · ${formatInstant(entry.startedAtMs, settings.timezone)}`}
-														</span>
-													</li>
-												))}
-											</ul>
-										</div>
-									)}
-								</div>
-							),
-						{ label: "Loading playback…", onRetry: detail.reload },
-					)
-				)}
-				<FailureNote failure={command.failure} />
-			</Panel>
+                  {value.history.length === 0 ? undefined : (
+                    <div className="signage-playback__history">
+                      <h4 className="signage-editor__subtitle">Recently played</h4>
+                      <ul className="ek-list">
+                        {value.history.slice(0, 8).map((entry) => (
+                          <li className="ek-list__item signage-row" key={entry.id}>
+                            <span className="signage-row__name">{entry.itemId}</span>
+                            <span className="signage-playback__history-meta">
+                              {`${entry.providerId} · ${formatInstant(entry.startedAtMs, settings.timezone)}`}
+                            </span>
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+                  )}
+                </div>
+              ),
+            { label: "Loading playback…", onRetry: detail.reload },
+          )
+        )}
+        <FailureNote failure={command.failure} />
+      </Panel>
 
-			<PreviewPanel api={api} channelId={previewChannelId} context={context} />
-		</div>
-	);
+      <PreviewPanel api={api} channelId={previewChannelId} context={context} />
+    </div>
+  );
+}
+
+/**
+ * Follows Signage's management realtime channel, which carries revisions only (ADR 0005), and asks
+ * for fresh detail when this group's playback actually changed — so "Now showing" follows the wall
+ * instead of freezing until an operator presses something. One subscription per mounted panel,
+ * closed when the panel goes away.
+ */
+function useManagementUpdates(
+  context: ModuleUiHostContext,
+  groupId: string | undefined,
+  onChange: () => void,
+): void {
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  useEffect(() => {
+    if (groupId === undefined) {
+      return;
+    }
+    let seen: string | undefined;
+    const subscription = context.realtime.subscribe("management-state", {
+      onSnapshot: (payload) => observe(payload),
+      onUpdate: (payload) => observe(payload),
+    });
+    function observe(payload: unknown): void {
+      const groups = (payload as { groups?: unknown } | null)?.groups;
+      if (!Array.isArray(groups)) {
+        return;
+      }
+      const mine = groups.find((group: { groupId?: unknown }) => group?.groupId === groupId) as
+        | { revision?: unknown; selectionRevision?: unknown }
+        | undefined;
+      if (!mine) {
+        return;
+      }
+      const marker = `${String(mine.revision)}:${String(mine.selectionRevision)}`;
+      if (seen !== undefined && marker !== seen) {
+        onChangeRef.current();
+      }
+      seen = marker;
+    }
+    return () => subscription.close();
+  }, [context, groupId]);
 }

src/ui/panels/PreviewPanel.tsx

@@ -2,6 +2,7 @@ import type { ModuleUiHostContext } from "@ekklesia/module-ui-sdk";
 import { EmptyState, Panel } from "@ekklesia/ui";
 import { type ReactElement, useEffect, useRef } from "react";
 import { SignageSlate } from "../../browser/slate.js";
+import { createMemoryMediaCache, createMemoryStore } from "../../browser/storage.js";
 import { createDisplayController, type DisplayChannelStateView } from "../../display/controller.js";
 import type { SignageApi } from "../api.js";
 
@@ -36,7 +37,16 @@ export function PreviewPanel({
       return;
     }
     let stopped = false;
-    const controller = createDisplayController({ context, root, telemetry: false });
+    // The display's own rendering code, but nothing it keeps: a management browser is not a wall,
+    // so it persists no snapshot and caches no image bytes, and never restores one channel's last
+    // frame into another channel's preview.
+    const controller = createDisplayController({
+      context,
+      media: createMemoryMediaCache(),
+      root,
+      store: createMemoryStore(),
+      telemetry: false,
+    });
     let handle: ReturnType<typeof setTimeout> | undefined;
 
     async function pump(): Promise<void> {

src/ui/panels/ProvidersPanel.tsx

@@ -1,13 +1,13 @@
 import type { ModuleUiHostContext } from "@ekklesia/module-ui-sdk";
 import {
-	Badge,
-	EmptyState,
-	Panel,
-	Table,
-	TableBody,
-	TableCell,
-	TableHead,
-	TableRow,
+  Badge,
+  EmptyState,
+  Panel,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
 } from "@ekklesia/ui";
 import type { ReactElement } from "react";
 import type { SignageApi } from "../api.js";
@@ -31,101 +31,88 @@ const SLIDE_RENDERER_CAPABILITY = "signage.slide-renderer";
  * exactly that, which is the difference between "this is broken" and "this needs an update".
  */
 export function ProvidersPanel({
-	api,
-	context,
-	settings,
+  api,
+  context,
+  settings,
 }: {
-	readonly api: SignageApi;
-	readonly context: ModuleUiHostContext;
-	readonly settings: SettingsResponse;
+  readonly api: SignageApi;
+  readonly context: ModuleUiHostContext;
+  readonly settings: SettingsResponse;
 }): ReactElement {
-	const providers = useResource(
-		() => api.get<{ providers: readonly ProviderHealth[] }>("providers"),
-		[],
-	);
-	const published = new Set(
-		context.contributions
-			.list(SLIDE_RENDERER_CAPABILITY)
-			.map((contribution) => contribution.id),
-	);
+  const providers = useResource(
+    () => api.get<{ providers: readonly ProviderHealth[] }>("providers"),
+    [],
+    "providers",
+  );
+  const published = new Set(
+    context.contributions.list(SLIDE_RENDERER_CAPABILITY).map((contribution) => contribution.id),
+  );
 
-	return (
-		<Panel
-			actions={
-				<Badge tone="neutral">{`Contract ${settings.rendererInputVersion}`}</Badge>
-			}
-			description="Running content sources available to timelines."
-			title="Content providers"
-		>
-			{renderLoadable(
-				providers.state,
-				(value) =>
-					value.providers.length === 0 ? (
-						<EmptyState
-							description="Signage works on its own with native images. Install a content module to add more."
-							title="No content providers registered"
-						/>
-					) : (
-						<Table label="Provider health">
-							<TableHead>
-								<TableRow>
-									<TableCell header>Provider</TableCell>
-									<TableCell header>Contract</TableCell>
-									<TableCell header>Renderer</TableCell>
-									<TableCell header>Health</TableCell>
-									<TableCell header>Last success</TableCell>
-								</TableRow>
-							</TableHead>
-							<TableBody>
-								{value.providers.map((provider) => {
-									const rendererPublished = published.has(
-										provider.renderer.contributionId,
-									);
-									const isNative =
-										provider.renderer.contributionId === "signage.native-image";
-									return (
-										<TableRow key={provider.providerId}>
-											<TableCell>
-												<span className="signage-provider__id">
-													{provider.providerId}
-												</span>
-												<span className="signage-provider__version">{`v${provider.providerVersion}`}</span>
-											</TableCell>
-											<TableCell>{provider.contractVersion}</TableCell>
-											<TableCell>
-												{isNative ? (
-													<Badge tone="info">Built in</Badge>
-												) : rendererPublished ? (
-													<Badge tone="success">
-														{provider.renderer.contributionId}
-													</Badge>
-												) : (
-													<Badge tone="warning">Renderer not published</Badge>
-												)}
-											</TableCell>
-											<TableCell>
-												{provider.consecutiveFailures === 0 ? (
-													<Badge tone="success">Healthy</Badge>
-												) : (
-													<Badge tone="danger">
-														{`${provider.consecutiveFailures} failures · ${provider.lastFailureCode ?? "unknown"}`}
-													</Badge>
-												)}
-											</TableCell>
-											<TableCell>
-												{formatInstant(
-													provider.lastSuccessAt,
-													settings.timezone,
-												)}
-											</TableCell>
-										</TableRow>
-									);
-								})}
-							</TableBody>
-						</Table>
-					),
-				{ label: "Loading providers…", onRetry: providers.reload },
-			)}
-		</Panel>
-	);
+  return (
+    <Panel
+      actions={<Badge tone="neutral">{`Contract ${settings.rendererInputVersion}`}</Badge>}
+      description="Running content sources available to timelines."
+      title="Content providers"
+    >
+      {renderLoadable(
+        providers.state,
+        (value) =>
+          value.providers.length === 0 ? (
+            <EmptyState
+              description="Signage works on its own with native images. Install a content module to add more."
+              title="No content providers registered"
+            />
+          ) : (
+            <Table label="Provider health">
+              <TableHead>
+                <TableRow>
+                  <TableCell header>Provider</TableCell>
+                  <TableCell header>Contract</TableCell>
+                  <TableCell header>Renderer</TableCell>
+                  <TableCell header>Health</TableCell>
+                  <TableCell header>Last success</TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {value.providers.map((provider) => {
+                  const rendererPublished = published.has(provider.renderer.contributionId);
+                  const isNative = provider.renderer.contributionId === "signage.native-image";
+                  return (
+                    <TableRow key={provider.providerId}>
+                      <TableCell>
+                        <span className="signage-provider__id">{provider.providerId}</span>
+                        <span className="signage-provider__version">{`v${provider.providerVersion}`}</span>
+                      </TableCell>
+                      <TableCell>{provider.contractVersion}</TableCell>
+                      <TableCell>
+                        {isNative ? (
+                          <Badge tone="info">Built in</Badge>
+                        ) : rendererPublished ? (
+                          <Badge tone="success">{provider.renderer.contributionId}</Badge>
+                        ) : (
+                          <Badge tone="warning">Renderer not published</Badge>
+                        )}
+                      </TableCell>
+                      <TableCell>
+                        {provider.consecutiveFailures === 0 ? (
+                          <Badge tone="success">Healthy</Badge>
+                        ) : (
+                          <Badge tone="danger">
+                            {`${provider.consecutiveFailures} failures · ${provider.lastFailureCode ?? "unknown"}`}
+                          </Badge>
+                        )}
+                      </TableCell>
+                      <TableCell>
+                        {formatInstant(provider.lastSuccessAt, settings.timezone)}
+                      </TableCell>
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          ),
+        { label: "Loading providers…", onRetry: providers.reload },
+      )}
+    </Panel>
+  );
 }

src/ui/panels/shared.tsx

@@ -1,5 +1,5 @@
-import { Badge, ErrorState, LoadingState } from "@ekklesia/ui";
-import type { ReactElement, ReactNode } from "react";
+import { Badge, Button, ErrorState, LoadingState } from "@ekklesia/ui";
+import { type ReactElement, type ReactNode, useEffect, useState } from "react";
 import type { SignageApiFailure } from "../api.js";
 import type { Loadable } from "../hooks.js";
 
@@ -89,3 +89,80 @@ export function formatSince(atMs: number | null, nowMs: number): string {
 export function OnlineBadge({ online }: { readonly online: boolean }): ReactElement {
   return <Badge tone={online ? "success" : "danger"}>{online ? "Online" : "Offline"}</Badge>;
 }
+
+/** How long an armed destructive button waits for its second press before standing down. */
+export const CONFIRM_RESET_MS = 6000;
+
+/**
+ * A moderate destructive action, confirmed in place (DESIGN §21.3) — never with a browser dialog.
+ *
+ * The first press arms it: the button says plainly what will happen and a Cancel appears beside it.
+ * A second, deliberate press performs the action. Walking away, pressing Cancel, or Escape disarms
+ * it, so an armed button can never be left waiting for an accidental click.
+ */
+export function ConfirmButton({
+  label,
+  confirmLabel,
+  disabled,
+  onConfirm,
+  testId,
+}: {
+  readonly label: string;
+  /** What the second press does, in words: "Delete this image", not "Are you sure?". */
+  readonly confirmLabel: string;
+  readonly disabled?: boolean;
+  readonly onConfirm: () => void;
+  readonly testId?: string;
+}): ReactElement {
+  const [armed, setArmed] = useState(false);
+  useEffect(() => {
+    if (!armed) {
+      return;
+    }
+    const timer = setTimeout(() => setArmed(false), CONFIRM_RESET_MS);
+    return () => clearTimeout(timer);
+  }, [armed]);
+
+  if (!armed) {
+    return (
+      <Button
+        data-testid={testId}
+        disabled={disabled}
+        onClick={() => setArmed(true)}
+        variant="danger"
+      >
+        {label}
+      </Button>
+    );
+  }
+  return (
+    <fieldset
+      className="signage-confirm-inline"
+      onKeyDown={(event) => {
+        if (event.key === "Escape") {
+          setArmed(false);
+        }
+      }}
+    >
+      <Button
+        autoFocus
+        data-testid={testId === undefined ? undefined : `${testId}-confirm`}
+        disabled={disabled}
+        onClick={() => {
+          setArmed(false);
+          onConfirm();
+        }}
+        variant="danger"
+      >
+        {confirmLabel}
+      </Button>
+      <Button
+        data-testid={testId === undefined ? undefined : `${testId}-cancel`}
+        onClick={() => setArmed(false)}
+        variant="quiet"
+      >
+        Cancel
+      </Button>
+    </fieldset>
+  );
+}

tests/browser/display-contract.test.ts

@@ -200,7 +200,8 @@ describe("display ↔ server contract", () => {
 
     const sent = calls.map((call) => `${call.method} ${call.path}`);
     expect(sent).toContain("POST /viewers/session");
-    expect(sent).toContain("GET /channels/:channelId/display-state");
+    // By viewer, so the server — not the display's memory of its registration — decides the channel.
+    expect(sent).toContain("GET /viewers/:viewerId/display-state");
     expect(sent).toContain("POST /viewers/:viewerId/heartbeat");
     // Not one refusal, of any kind, for anything the display built itself.
     expect(calls.filter((call) => call.status >= 400)).toEqual([]);
@@ -220,4 +221,48 @@ describe("display ↔ server contract", () => {
     expect(viewer?.reportedProviderId).toBe(SIGNAGE_NATIVE_PROVIDER_ID);
     expect(viewer?.reportedContributionId).toBeNull();
   });
+
+  it("a display moved to another channel group is served that group's state on its next fetch", async () => {
+    const display = controller();
+    await display.start();
+    await settle();
+    const viewerId = display.diagnostics().viewerId;
+    const firstChannel = display.diagnostics().channelId;
+    expect(viewerId).toBeDefined();
+
+    // An administrator creates a second group and moves this screen to it while it is running.
+    const groupId = newId();
+    const channelId = newId();
+    await store.createChannelGroup({ channelId, channelName: "Default", groupId, name: "Nursery" });
+    await store.updateViewer(viewerId as string, { channelId });
+
+    const response = await host.context.api.request(`viewers/${viewerId}/display-state`);
+    const state = (await response.json()) as { channel: { id: string; groupId: string } };
+    expect(state.channel).toMatchObject({ groupId, id: channelId });
+    expect(channelId).not.toBe(firstChannel);
+
+    // And the heartbeat names the new assignment, which is how a display with a long slot hears.
+    const beat = await host.context.api.request(`viewers/${viewerId}/heartbeat`, {
+      body: JSON.stringify({}),
+      headers: { "content-type": "application/json" },
+      method: "POST",
+    });
+    expect(((await beat.json()) as { channelId?: string }).channelId).toBe(channelId);
+    await display.stop();
+  });
+
+  it("a display whose channel was deleted falls back to the default channel, not to nothing", async () => {
+    const display = controller();
+    await display.start();
+    await settle();
+    const viewerId = display.diagnostics().viewerId as string;
+    await store.updateViewer(viewerId, { channelId: null });
+
+    const response = await host.context.api.request(`viewers/${viewerId}/display-state`);
+    expect(response.status).toBe(200);
+    const [group] = await store.listChannelGroups();
+    const fallback = group?.channels.find((channel) => channel.isDefault);
+    expect(((await response.json()) as { channel: { id: string } }).channel.id).toBe(fallback?.id);
+    await display.stop();
+  });
 });

tests/browser/display-recovery.test.ts

@@ -145,7 +145,7 @@ describe("a display recovers from every failed request without a reload", () =>
         },
         {
           method: "GET",
-          path: "channels/chan-1/display-state",
+          path: /^(viewers\/[^/]+|channels\/chan-1)\/display-state$/u,
           respond: () => {
             server.stateRequests += 1;
             if (server.stateFailing) {

tests/browser/display.test.ts

@@ -174,7 +174,7 @@ describe("display controller", () => {
         },
         {
           method: "GET",
-          path: "channels/chan-1/display-state",
+          path: /^(viewers\/[^/]+|channels\/chan-1)\/display-state$/u,
           respond: () => jsonResponse(state()),
         },
         { method: "POST", path: /^viewers\/.*\/heartbeat$/u, respond: () => jsonResponse({}) },
@@ -205,7 +205,7 @@ describe("display controller", () => {
         { method: "POST", path: "viewers/session", respond: () => jsonResponse(SESSION) },
         {
           method: "GET",
-          path: "channels/chan-1/display-state",
+          path: /^(viewers\/[^/]+|channels\/chan-1)\/display-state$/u,
           respond: () => jsonResponse(state()),
         },
         { method: "POST", path: /^viewers\/.*\/heartbeat$/u, respond: () => jsonResponse({}) },
@@ -376,6 +376,28 @@ describe("display controller", () => {
     await controller.stop();
   });
 
+  it("restores a blackout before the server answers, so a reload never flashes content", async () => {
+    const store = createMemoryStore();
+    const media = createMemoryMediaCache();
+    const online = createFakeHost({ permissions: [], routes: [] });
+    const before = build({ host: online, media, store, telemetry: false });
+    await before.start();
+    await before.apply(state({ playback: { blackout: true } as never }));
+    await settle();
+    await before.stop();
+
+    // A kiosk reloads mid-blackout and its first request has not been answered yet.
+    root.dataset.blackout = "false";
+    const pending = createFakeHost({ permissions: ["signage.display.view"], routes: [] });
+    Object.assign(pending.context.api, { request: () => new Promise<Response>(() => undefined) });
+    const after = build({ host: pending, media, store });
+    void after.start();
+    await settle();
+
+    expect(root.dataset.blackout).toBe("true");
+    await after.stop();
+  });
+
   it("reports a bounded, sanitized heartbeat and nothing else", async () => {
     const beats: unknown[] = [];
     const host = createFakeHost({
@@ -384,7 +406,7 @@ describe("display controller", () => {
         { method: "POST", path: "viewers/session", respond: () => jsonResponse(SESSION) },
         {
           method: "GET",
-          path: "channels/chan-1/display-state",
+          path: /^(viewers\/[^/]+|channels\/chan-1)\/display-state$/u,
           respond: () => jsonResponse(state()),
         },
         {
@@ -428,7 +450,7 @@ describe("display controller", () => {
         { method: "POST", path: "viewers/session", respond: () => jsonResponse(SESSION) },
         {
           method: "GET",
-          path: "channels/chan-1/display-state",
+          path: /^(viewers\/[^/]+|channels\/chan-1)\/display-state$/u,
           respond: () => jsonResponse(state()),
         },
         { method: "POST", path: /^viewers\/.*\/heartbeat$/u, respond: () => jsonResponse({}) },
@@ -471,4 +493,146 @@ describe("display controller", () => {
     expect(controller.diagnostics().renderedSelectionId).toBe("sel-1");
     await controller.stop();
   });
+
+  it("follows the server when an administrator moves it to another channel", async () => {
+    const moved = { groupId: "group-2", id: "chan-2", key: "online" };
+    let stateFetches = 0;
+    let realtimeHandlers: { onUpdate?: (state: unknown) => void } | undefined;
+    const host = createFakeHost({
+      permissions: ["signage.display.view"],
+      routes: [
+        { method: "POST", path: "viewers/session", respond: () => jsonResponse(SESSION) },
+        {
+          method: "GET",
+          path: /^viewers\/[^/]+\/display-state$/u,
+          respond: () => {
+            stateFetches += 1;
+            // Registered on chan-1; moved by an administrator right after its first fetch.
+            return jsonResponse(state(stateFetches === 1 ? {} : { channel: moved }));
+          },
+        },
+        {
+          method: "POST",
+          path: /^viewers\/.*\/heartbeat$/u,
+          respond: () => jsonResponse({ acknowledged: true, channelId: moved.id, recorded: true }),
+        },
+      ],
+    });
+    Object.assign(host.context.realtime, {
+      subscribe: (_channel: string, handlers: { onUpdate?: (state: unknown) => void }) => {
+        realtimeHandlers = handlers;
+        return { close: () => undefined };
+      },
+    });
+    const controller = build({ host });
+    await controller.start();
+    await settle();
+
+    // The heartbeat named a different channel, so the display refetched and adopted it.
+    expect(stateFetches).toBe(2);
+    expect(controller.diagnostics().channelId).toBe("chan-2");
+
+    // A change in the old group no longer concerns it; a change in the new one does.
+    realtimeHandlers?.onUpdate?.({
+      groups: [{ groupId: "group-1", revision: 99, selectionRevision: 1 }],
+    });
+    await settle();
+    expect(stateFetches).toBe(2);
+    realtimeHandlers?.onUpdate?.({
+      groups: [{ groupId: "group-2", revision: 99, selectionRevision: 1 }],
+    });
+    await settle();
+    expect(stateFetches).toBe(3);
+    await controller.stop();
+  });
+
+  it("registers again, exactly once, when it was removed from the roster", async () => {
+    let sessions = 0;
+    let subscriptions = 0;
+    let closes = 0;
+    let removed = false;
+    const host = createFakeHost({
+      permissions: ["signage.display.view"],
+      routes: [
+        {
+          method: "POST",
+          path: "viewers/session",
+          respond: () => {
+            sessions += 1;
+            removed = false;
+            return jsonResponse(SESSION);
+          },
+        },
+        {
+          method: "GET",
+          path: /^viewers\/[^/]+\/display-state$/u,
+          respond: () =>
+            removed ? jsonResponse({ code: "SIGNAGE_NOT_FOUND" }, 404) : jsonResponse(state()),
+        },
+        {
+          method: "POST",
+          path: /^viewers\/.*\/heartbeat$/u,
+          respond: () =>
+            removed
+              ? jsonResponse({ code: "SIGNAGE_NOT_FOUND" }, 404)
+              : jsonResponse({ acknowledged: true }),
+        },
+      ],
+    });
+    let onUpdate: ((state: unknown) => void) | undefined;
+    Object.assign(host.context.realtime, {
+      subscribe: (_channel: string, handlers: { onUpdate?: (state: unknown) => void }) => {
+        subscriptions += 1;
+        onUpdate = handlers.onUpdate;
+        return { close: () => (closes += 1) };
+      },
+    });
+    const controller = build({ host });
+    await controller.start();
+    await settle();
+    expect(sessions).toBe(1);
+
+    // Removed from the roster; a realtime nudge and a heartbeat both discover it at once.
+    removed = true;
+    onUpdate?.({ groups: [{ groupId: "group-1", revision: 50, selectionRevision: 1 }] });
+    onUpdate?.({ groups: [{ groupId: "group-1", revision: 51, selectionRevision: 1 }] });
+    await settle();
+
+    expect(sessions).toBe(2);
+    // One live subscription: the old one closed, exactly one new one opened.
+    expect(subscriptions - closes).toBe(1);
+    expect(controller.diagnostics().renderedSelectionId).toBe("sel-1");
+    await controller.stop();
+  });
+
+  it("treats a 404 that is not Signage's own as an ordinary failure, never a re-registration loop", async () => {
+    let sessions = 0;
+    const host = createFakeHost({
+      permissions: ["signage.display.view"],
+      routes: [
+        {
+          method: "POST",
+          path: "viewers/session",
+          respond: () => {
+            sessions += 1;
+            return jsonResponse(SESSION);
+          },
+        },
+        {
+          method: "GET",
+          path: /^viewers\/[^/]+\/display-state$/u,
+          // A proxy, or a server without this route — not "this viewer is gone".
+          respond: () => jsonResponse({ code: "NOT_FOUND" }, 404),
+        },
+        { method: "POST", path: /^viewers\/.*\/heartbeat$/u, respond: () => jsonResponse({}) },
+      ],
+    });
+    const controller = build({ host });
+    await controller.start();
+    await settle();
+    await settle();
+
+    expect(sessions).toBe(1);
+    await controller.stop();
+  });
 });

tests/browser/offline.test.ts

@@ -391,7 +391,7 @@ describe("a display that loses its network", () => {
         },
         {
           method: "GET",
-          path: "channels/chan-1/display-state",
+          path: /^(viewers\/[^/]+|channels\/chan-1)\/display-state$/u,
           respond: () => {
             if (!reachable) {
               throw new Error("network is gone");

tests/browser/stage0-management.test.tsx

@@ -0,0 +1,414 @@
+// @vitest-environment happy-dom
+import { readdirSync, readFileSync, statSync } from "node:fs";
+import { join } from "node:path";
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { audienceKeyFor } from "../../src/ui/panels/DisplaysPanel.js";
+import { SignageDashboard } from "../../src/ui/SignageDashboard.js";
+import {
+  createFakeHost,
+  FAKE_SETTINGS,
+  type FakeHostRoute,
+  jsonResponse,
+} from "./support/fake-host.js";
+
+/**
+ * Stage 0 production-readiness regressions for the management screen.
+ *
+ * Each case is a defect an operator met: an activation that looked lost after changing tabs, a
+ * screen that collapsed to a spinner on every tab switch, deletions with no confirmation, an
+ * internal key presented as something to fill in, and test displays nobody could remove.
+ */
+
+(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+let container: HTMLElement;
+let root: Root;
+
+beforeEach(() => {
+  container = document.createElement("div");
+  document.body.append(container);
+  root = createRoot(container);
+});
+
+afterEach(async () => {
+  await act(async () => root.unmount());
+  container.remove();
+});
+
+async function settle(): Promise<void> {
+  for (let index = 0; index < 8; index += 1) {
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+  }
+}
+
+async function click(element: Element | null | undefined): Promise<void> {
+  if (!element) {
+    throw new Error("Expected an element to click.");
+  }
+  await act(async () => (element as HTMLElement).click());
+  await settle();
+}
+
+function button(label: string): HTMLButtonElement | undefined {
+  return [...container.querySelectorAll("button")].find(
+    (candidate) => candidate.textContent?.trim() === label,
+  ) as HTMLButtonElement | undefined;
+}
+
+function tab(label: string): Element | undefined {
+  return [...container.querySelectorAll("[role='tab']")].find(
+    (candidate) => candidate.textContent === label,
+  );
+}
+
+async function choose(select: HTMLSelectElement, value: string): Promise<void> {
+  const setter = Object.getOwnPropertyDescriptor(HTMLSelectElement.prototype, "value")?.set;
+  await act(async () => {
+    setter?.call(select, value);
+    select.dispatchEvent(new Event("change", { bubbles: true }));
+  });
+}
+
+async function type(input: HTMLInputElement, value: string): Promise<void> {
+  const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
+  await act(async () => {
+    setter?.call(input, value);
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+  });
+}
+
+function timeline(id: string, name: string) {
+  return {
+    description: null,
+    eligibleFrom: null,
+    eligibleUntil: null,
+    id,
+    name,
+    revision: 1,
+    updatedAt: "2026-10-01T15:00:00.000Z",
+  };
+}
+
+function group(activeTimelineId: string | null) {
+  return {
+    channels: [{ id: "chan-1", isDefault: true, key: "default", name: "Default" }],
+    id: "group-1",
+    name: "Main",
+    playback: {
+      activeTimelineId,
+      blackout: false,
+      currentSelectionId: null,
+      currentSlotId: null,
+      deadlineAtMs: null,
+      groupId: "group-1",
+      pendingTimelineId: null,
+      remainingMs: null,
+      revision: activeTimelineId === null ? 1 : 2,
+      scheduledActivationAtMs: null,
+      scheduledTimelineId: null,
+      selectionRevision: null,
+      serverNowMs: 1_700_000_000_000,
+      startedAtMs: null,
+      staticAssetId: null,
+      transport: activeTimelineId === null ? ("idle" as const) : ("playing" as const),
+    },
+    revision: 1,
+  };
+}
+
+/** A small, stateful Signage backend: activation really changes what later reads return. */
+function backend(extra: readonly FakeHostRoute[] = []) {
+  let active: string | null = null;
+  const sent: string[] = [];
+  const routes: FakeHostRoute[] = [
+    ...extra,
+    { method: "GET", path: "settings", respond: () => jsonResponse(FAKE_SETTINGS) },
+    {
+      method: "GET",
+      path: "channel-groups",
+      respond: () => jsonResponse({ groups: [group(active)] }),
+    },
+    {
+      method: "GET",
+      path: "timelines",
+      respond: () =>
+        jsonResponse({
+          timelines: [timeline("timeline-1", "Sunday"), timeline("timeline-2", "Easter")],
+        }),
+    },
+    { method: "GET", path: "providers", respond: () => jsonResponse({ providers: [] }) },
+    { method: "GET", path: "images", respond: () => jsonResponse({ images: [] }) },
+    { method: "GET", path: "viewers", respond: () => jsonResponse({ viewers: [] }) },
+    {
+      method: "GET",
+      path: "playback/group-1",
+      respond: () => jsonResponse({ current: null, history: [], snapshot: group(active).playback }),
+    },
+    { method: "GET", path: /^channels\/.*\/display-state$/u, respond: () => jsonResponse({}) },
+    {
+      method: "POST",
+      path: "playback/group-1/activate",
+      respond: ({ init }) => {
+        active = (JSON.parse(String(init?.body)) as { timelineId: string }).timelineId;
+        sent.push(`activate ${active}`);
+        return jsonResponse(group(active).playback);
+      },
+    },
+  ];
+  return { routes, sent };
+}
+
+function mount(host: ReturnType<typeof createFakeHost>) {
+  return act(async () => {
+    root.render(<SignageDashboard context={host.context} copyText={() => Promise.resolve()} />);
+  });
+}
+
+describe("Signage dashboard — Stage 0 regressions", () => {
+  it("shows a timeline activated on Playback as active on Timelines too", async () => {
+    const server = backend();
+    const host = createFakeHost({
+      permissions: ["signage.view", "signage.playback.control", "signage.timelines.manage"],
+      routes: server.routes,
+    });
+    await mount(host);
+    await settle();
+
+    const activate = [...container.querySelectorAll("select")].find((select) =>
+      [...select.options].some((option) => option.textContent === "Choose a timeline…"),
+    ) as HTMLSelectElement;
+    await choose(activate, "timeline-2");
+    await click(button("Now"));
+    expect(server.sent).toEqual(["activate timeline-2"]);
+
+    await click(tab("Timelines"));
+    const row = [...container.querySelectorAll("tr")].find((candidate) =>
+      candidate.textContent?.includes("Easter"),
+    );
+    expect(row?.textContent).toContain("Active in Main");
+    expect(container.querySelector("tr")?.parentElement).not.toBeNull();
+  });
+
+  it("keeps what it loaded when switching tabs, instead of flashing back to a loading state", async () => {
+    let slow = false;
+    const server = backend([
+      {
+        method: "GET",
+        path: "timelines",
+        respond: () =>
+          slow
+            ? new Promise<Response>(() => undefined)
+            : jsonResponse({ timelines: [timeline("timeline-1", "Sunday")] }),
+      },
+    ]);
+    const host = createFakeHost({ permissions: ["signage.view"], routes: server.routes });
+    await mount(host);
+    await settle();
+    await click(tab("Timelines"));
+    expect(container.textContent).toContain("Sunday");
+
+    // The next load never finishes. Coming back must still show the last known list.
+    slow = true;
+    await click(tab("Images"));
+    await click(tab("Timelines"));
+    expect(container.textContent).toContain("Sunday");
+    expect(container.textContent).not.toContain("Loading timelines…");
+  });
+
+  it("deletes an image only after a second, deliberate press, and Cancel stands it down", async () => {
+    const deleted: string[] = [];
+    const image = {
+      byteSize: 1000,
+      contentType: "image/png",
+      createdAt: "2026-10-01T15:00:00.000Z",
+      displayName: "Welcome",
+      expiresAt: null,
+      height: 1080,
+      id: "image-1",
+      originalFilename: "welcome.png",
+      renditions: [],
+      status: "ready",
+      width: 1920,
+    };
+    const server = backend([
+      { method: "GET", path: "images", respond: () => jsonResponse({ images: [image] }) },
+      {
+        method: "DELETE",
+        path: "images/image-1",
+        respond: ({ path }) => {
+          deleted.push(path);
+          return new Response(null, { status: 204 });
+        },
+      },
+    ]);
+    const host = createFakeHost({
+      permissions: ["signage.view", "signage.assets.manage"],
+      routes: server.routes,
+    });
+    await mount(host);
+    await settle();
+    await click(tab("Images"));
+
+    await click(container.querySelector("[data-testid='signage-image-delete-image-1']"));
+    expect(deleted).toEqual([]);
+    expect(button("Delete this image")).toBeDefined();
+    await click(container.querySelector("[data-testid='signage-image-delete-image-1-cancel']"));
+    expect(button("Delete this image")).toBeUndefined();
+    expect(deleted).toEqual([]);
+
+    await click(container.querySelector("[data-testid='signage-image-delete-image-1']"));
+    await click(container.querySelector("[data-testid='signage-image-delete-image-1-confirm']"));
+    expect(deleted).toEqual(["images/image-1"]);
+  });
+
+  it("adds an audience from its name alone, deriving the content key", async () => {
+    const posted: unknown[] = [];
+    const server = backend([
+      {
+        method: "POST",
+        path: "channel-groups/group-1/channels",
+        respond: ({ init }) => {
+          posted.push(JSON.parse(String(init?.body)));
+          return jsonResponse({}, 201);
+        },
+      },
+    ]);
+    const host = createFakeHost({
+      permissions: ["signage.view", "signage.displays.manage"],
+      routes: server.routes,
+    });
+    await mount(host);
+    await settle();
+    await click(tab("Displays"));
+
+    const name = container.querySelector("input[placeholder='Online']") as HTMLInputElement;
+    await type(name, "Watching Online");
+    await click(button("Add audience"));
+    expect(posted).toEqual([{ key: "watching-online", name: "Watching Online" }]);
+  });
+
+  it("labels a signed-in browser and removes an offline entry only after confirmation", async () => {
+    const removed: string[] = [];
+    const viewer = {
+      cachedAssetCount: 0,
+      channelId: "chan-1",
+      deviceId: null,
+      id: "viewer-1",
+      lastError: null,
+      lastSeenAtMs: Date.now() - 600_000,
+      name: "New display",
+      offlineReady: false,
+      online: false,
+      reportedContributionId: null,
+      reportedProviderId: null,
+      reportedSelectionId: null,
+      reportedTimelineId: null,
+    };
+    const server = backend([
+      { method: "GET", path: "viewers", respond: () => jsonResponse({ viewers: [viewer] }) },
+      {
+        method: "DELETE",
+        path: "viewers/viewer-1",
+        respond: ({ path }) => {
+          removed.push(path);
+          return new Response(null, { status: 204 });
+        },
+      },
+    ]);
+    const host = createFakeHost({
+      permissions: ["signage.view", "signage.displays.manage"],
+      routes: server.routes,
+    });
+    await mount(host);
+    await settle();
+    await click(tab("Displays"));
+
+    expect(container.textContent).toContain("Signed-in browser");
+    await click(container.querySelector("[data-testid='signage-display-remove-viewer-1']"));
+    expect(removed).toEqual([]);
+    await click(container.querySelector("[data-testid='signage-display-remove-viewer-1-confirm']"));
+    expect(removed).toEqual(["viewers/viewer-1"]);
+  });
+
+  it("follows playback changes on the management channel, and stops when Playback is left", async () => {
+    const subscriptions: { closed: boolean; onUpdate: ((payload: unknown) => void) | undefined }[] =
+      [];
+    const server = backend();
+    const host = createFakeHost({ permissions: ["signage.view"], routes: server.routes });
+    Object.assign(host.context.realtime, {
+      subscribe(channel: string, handlers: { onUpdate?: (payload: unknown) => void }) {
+        const entry = { closed: false, onUpdate: handlers.onUpdate };
+        if (channel === "management-state") {
+          subscriptions.push(entry);
+        }
+        return { close: () => (entry.closed = true) };
+      },
+    });
+    await mount(host);
+    await settle();
+    const detailReads = () =>
+      host.requests.filter((request) => request.path === "playback/group-1").length;
+    const before = detailReads();
+
+    const live = subscriptions.find((entry) => !entry.closed);
+    await act(async () => {
+      live?.onUpdate?.({ groups: [{ groupId: "group-1", revision: 1, selectionRevision: null }] });
+      live?.onUpdate?.({ groups: [{ groupId: "group-1", revision: 2, selectionRevision: 4 }] });
+    });
+    await settle();
+    expect(detailReads()).toBeGreaterThan(before);
+
+    await click(tab("Images"));
+    expect(subscriptions.every((entry) => entry.closed)).toBe(true);
+  });
+});
+
+describe("audience content keys", () => {
+  it("derives a valid, unique key that is never the reserved default", () => {
+    expect(audienceKeyFor("Online", [])).toBe("online");
+    expect(audienceKeyFor("Online", ["online"])).toBe("online-2");
+    expect(audienceKeyFor("Default", [])).toBe("default-2");
+    expect(audienceKeyFor("2nd service", [])).toBe("audience-2nd-service");
+    expect(audienceKeyFor("   ", [])).toBe("audience");
+    expect(audienceKeyFor("Café — Room!", [])).toBe("cafe-room");
+  });
+});
+
+/** Source-level guards for two product-wide rules (DESIGN §2.1 and §21.1). */
+describe("product rules in the browser source", () => {
+  function sources(directory: string): string[] {
+    return readdirSync(directory).flatMap((entry) => {
+      const path = join(directory, entry);
+      if (statSync(path).isDirectory()) {
+        return sources(path);
+      }
+      return /\.(ts|tsx)$/u.test(entry) ? [path] : [];
+    });
+  }
+  const files = ["src/ui", "src/browser", "src/display"].flatMap(sources);
+
+  it("never uses a browser-native alert, confirm, or prompt", () => {
+    for (const file of files) {
+      expect(readFileSync(file, "utf8"), file).not.toMatch(
+        /\b(?:window\.|globalThis\.)?(?:alert|confirm|prompt)\s*\(/u,
+      );
+    }
+  });
+
+  it("never puts the platform's name in user-facing text", () => {
+    for (const file of files) {
+      const code = readFileSync(file, "utf8")
+        .replace(/\/\*[\s\S]*?\*\//gu, "")
+        .replace(/^\s*\/\/.*$/gmu, "")
+        .replace(/\{\/\*[\s\S]*?\*\/\}/gu, "");
+      // Quoted strings and JSX text; identifiers such as `EkklesiaUiStyles` are not text.
+      expect(code, file).not.toMatch(
+        /["'`][^"'`\n]*\bEkklesia\b[^"'`\n]*["'`]|>[^<{]*\bEkklesia\b/u,
+      );
+    }
+  });
+});

tests/browser/support/fake-host.ts

@@ -1,10 +1,10 @@
 import type {
-	ModuleContributionDescriptor,
-	ModuleUiApiClient,
-	ModuleUiContributions,
-	ModuleUiHostContext,
-	MountedModuleContribution,
-	MountModuleContributionOptions,
+  ModuleContributionDescriptor,
+  ModuleUiApiClient,
+  ModuleUiContributions,
+  ModuleUiHostContext,
+  MountedModuleContribution,
+  MountModuleContributionOptions,
 } from "@ekklesia/module-ui-sdk";
 
 /**
@@ -15,132 +15,122 @@ import type {
  * simply never match.
  */
 export interface FakeHostRoute {
-	readonly method: string;
-	readonly path: string | RegExp;
-	readonly respond: (request: {
-		readonly path: string;
-		readonly init: RequestInit | undefined;
-	}) => Response | Promise<Response>;
+  readonly method: string;
+  readonly path: string | RegExp;
+  readonly respond: (request: {
+    readonly path: string;
+    readonly init: RequestInit | undefined;
+  }) => Response | Promise<Response>;
 }
 
 export interface FakeHost {
-	readonly context: ModuleUiHostContext;
-	readonly requests: { method: string; path: string }[];
-	/** Contributions this host published against Signage's renderer capability. */
-	readonly mounted: { contributionId: string; input: unknown }[];
+  readonly context: ModuleUiHostContext;
+  readonly requests: { method: string; path: string }[];
+  /** Contributions this host published against Signage's renderer capability. */
+  readonly mounted: { contributionId: string; input: unknown }[];
 }
 
 export function jsonResponse(body: unknown, status = 200): Response {
-	return new Response(JSON.stringify(body), {
-		headers: { "content-type": "application/json" },
-		status,
-	});
+  return new Response(JSON.stringify(body), {
+    headers: { "content-type": "application/json" },
+    status,
+  });
 }
 
-export function errorResponse(
-	code: string,
-	message: string,
-	status = 400,
-): Response {
-	return jsonResponse({ code, message }, status);
+export function errorResponse(code: string, message: string, status = 400): Response {
+  return jsonResponse({ code, message }, status);
 }
 
 export interface FakeHostOptions {
-	readonly permissions: readonly string[];
-	readonly routes: readonly FakeHostRoute[];
-	readonly contributions?: readonly ModuleContributionDescriptor[];
-	readonly displayUrl?: string;
-	readonly principal?: ModuleUiHostContext["principal"];
-	readonly mount?: (
-		options: MountModuleContributionOptions,
-	) => Promise<MountedModuleContribution> | MountedModuleContribution;
+  readonly permissions: readonly string[];
+  readonly routes: readonly FakeHostRoute[];
+  readonly contributions?: readonly ModuleContributionDescriptor[];
+  readonly displayUrl?: string;
+  readonly principal?: ModuleUiHostContext["principal"];
+  readonly mount?: (
+    options: MountModuleContributionOptions,
+  ) => Promise<MountedModuleContribution> | MountedModuleContribution;
 }
 
 export function createFakeHost(options: FakeHostOptions): FakeHost {
-	const requests: { method: string; path: string }[] = [];
-	const mounted: { contributionId: string; input: unknown }[] = [];
+  const requests: { method: string; path: string }[] = [];
+  const mounted: { contributionId: string; input: unknown }[] = [];
 
-	const api: ModuleUiApiClient = {
-		async request(path, init) {
-			const method = (init?.method ?? "GET").toUpperCase();
-			const normalized = path.replace(/^\//u, "");
-			requests.push({ method, path: normalized });
-			for (const route of options.routes) {
-				const matches =
-					typeof route.path === "string"
-						? route.path === normalized.split("?")[0]
-						: route.path.test(normalized);
-				if (route.method === method && matches) {
-					return route.respond({ init, path: normalized });
-				}
-			}
-			return errorResponse(
-				"SIGNAGE_NOT_FOUND",
-				"The requested resource was not found.",
-				404,
-			);
-		},
-	};
+  const api: ModuleUiApiClient = {
+    async request(path, init) {
+      const method = (init?.method ?? "GET").toUpperCase();
+      const normalized = path.replace(/^\//u, "");
+      requests.push({ method, path: normalized });
+      for (const route of options.routes) {
+        const matches =
+          typeof route.path === "string"
+            ? route.path === normalized.split("?")[0]
+            : route.path.test(normalized);
+        if (route.method === method && matches) {
+          return route.respond({ init, path: normalized });
+        }
+      }
+      return errorResponse("SIGNAGE_NOT_FOUND", "The requested resource was not found.", 404);
+    },
+  };
 
-	const contributions: ModuleUiContributions = {
-		list: (capabilityId) =>
-			capabilityId === "signage.slide-renderer"
-				? (options.contributions ?? [])
-				: [],
-		async mount(mountOptions) {
-			mounted.push({
-				contributionId: mountOptions.contributionId,
-				input: mountOptions.input,
-			});
-			if (options.mount) {
-				return options.mount(mountOptions);
-			}
-			return {
-				contributionId: mountOptions.contributionId,
-				mounted: true,
-				unmount: () => Promise.resolve(),
-				update: () => Promise.resolve(),
-				version: "1.0.0",
-			};
-		},
-	};
+  const contributions: ModuleUiContributions = {
+    list: (capabilityId) =>
+      capabilityId === "signage.slide-renderer" ? (options.contributions ?? []) : [],
+    async mount(mountOptions) {
+      mounted.push({
+        contributionId: mountOptions.contributionId,
+        input: mountOptions.input,
+      });
+      if (options.mount) {
+        return options.mount(mountOptions);
+      }
+      return {
+        contributionId: mountOptions.contributionId,
+        mounted: true,
+        unmount: () => Promise.resolve(),
+        update: () => Promise.resolve(),
+        version: "1.0.0",
+      };
+    },
+  };
 
-	return {
-		context: {
-			api,
-			contributions,
-			display: {
-				url: options.displayUrl ?? "https://api.example.test/display/signage",
-			},
-			moduleId: "signage",
-			permissions: {
-				has: (permission) => options.permissions.includes(permission),
-			},
-			principal: options.principal ?? { kind: "anonymous" },
-			realtime: { subscribe: () => ({ close: () => undefined }) },
-		},
-		mounted,
-		requests,
-	};
+  return {
+    context: {
+      api,
+      contributions,
+      display: {
+        url: options.displayUrl ?? "https://api.example.test/display/signage",
+      },
+      moduleId: "signage",
+      permissions: {
+        has: (permission) => options.permissions.includes(permission),
+      },
+      principal: options.principal ?? { kind: "anonymous" },
+      realtime: { subscribe: () => ({ close: () => undefined }) },
+    },
+    mounted,
+    requests,
+  };
 }
 
 /** The settings payload every screen loads first. */
 export const FAKE_SETTINGS = Object.freeze({
-	crossfadeMs: 1000,
-	moduleVersion: "0.1.4",
-	nativeImageDurationMs: 7000,
-	nativePresentation: {
-		backgroundColor: "#000000",
-		backgroundDarkened: false,
-		backgroundMode: "blurred",
-		blurPixels: 20,
-	},
-	rendererInputVersion: "1.0.0",
-	timezone: "America/Chicago",
-	uploads: {
-		batchMaxFiles: 20,
-		concurrency: 3,
-		maxBytes: 26_214_400,
-		maxPixels: 40_000_000,
-	},
+  crossfadeMs: 1000,
+  moduleVersion: "0.1.4",
+  nativeImageDurationMs: 7000,
+  nativePresentation: {
+    backgroundColor: "#000000",
+    backgroundDarkened: false,
+    backgroundMode: "blurred",
+    blurPixels: 20,
+  },
+  rendererInputVersion: "1.0.0",
+  timezone: "America/Chicago",
+  uploads: {
+    batchMaxFiles: 20,
+    concurrency: 3,
+    maxBytes: 26_214_400,
+    maxPixels: 40_000_000,
+  },
 });

tests/drizzle-timelines.test.ts

@@ -65,7 +65,8 @@ function constraintDatabase(existing: readonly { id: string; position: number }[
   };
   return {
     database: {
-      transaction: async (operation: (value: typeof transaction) => Promise<unknown>) => operation(transaction),
+      transaction: async (operation: (value: typeof transaction) => Promise<unknown>) =>
+        operation(transaction),
     } as unknown as ModuleDrizzleDatabase,
     positions,
   };

tests/manifest.test.ts

@@ -177,6 +177,7 @@ describe("Signage server runtime", () => {
       "GET /timelines",
       "GET /timelines/:timelineId",
       "GET /viewers",
+      "GET /viewers/:viewerId/display-state",
       "PATCH /images/:imageId",
       "PATCH /timelines/:timelineId",
       "PATCH /timelines/:timelineId/slots/:slotId",