src/ui/SignageDashboard.tsx

@@ -1,5 +1,5 @@
 import type { ModuleUiHostContext } from "@ekklesia/module-ui-sdk";
-import { EkklesiaUiStyles, EmptyState, Tabs } from "@ekklesia/ui";
+import { EkklesiaUiStyles, EmptyState, PageHeader, Tabs } from "@ekklesia/ui";
 import { type ReactElement, useMemo, useState } from "react";
 import { DesktopOnly } from "../browser/desktop-gate.js";
 import { createSignageApi } from "./api.js";
@@ -25,11 +25,9 @@ import type { ChannelGroupView, SettingsResponse } from "./types.js";
 export function SignageDashboard({
 	context,
 	copyText,
-  displaySetupUrl,
 }: {
 	readonly context: ModuleUiHostContext;
 	readonly copyText: (value: string) => Promise<void>;
-  readonly displaySetupUrl: string;
 }): 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.
@@ -37,7 +35,10 @@ export function SignageDashboard({
 	// 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
+				? api.get<SettingsResponse>("settings")
+				: Promise.resolve(undefined),
 		[mayView],
 	);
 	const groups = useResource(
@@ -51,7 +52,9 @@ export function SignageDashboard({
 	const [groupId, setGroupId] = useState<string | undefined>(undefined);
 
 	const mayManageAssets = context.permissions.has("signage.assets.manage");
-  const mayManageTimelines = context.permissions.has("signage.timelines.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");
 
@@ -65,20 +68,31 @@ export function SignageDashboard({
 	}
 
 	const selectedGroupId =
-    groupId ?? (groups.state.status === "ready" ? groups.state.value?.groups[0]?.id : undefined);
+		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)
+			? 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}
@@ -104,7 +118,8 @@ export function SignageDashboard({
 													{...(selectedGroup
 														? {
 																activeGroupName: selectedGroup.name,
-                              activeTimelineId: selectedGroup.playback.activeTimelineId,
+																activeTimelineId:
+																	selectedGroup.playback.activeTimelineId,
 															}
 														: {})}
 													api={api}
@@ -112,10 +127,14 @@ export function SignageDashboard({
 													onActivate={
 														mayControl && selectedGroupId !== undefined
 															? async (timelineId) => {
-                                await api.send("POST", `playback/${selectedGroupId}/activate`, {
+																	await api.send(
+																		"POST",
+																		`playback/${selectedGroupId}/activate`,
+																		{
 																			timelineId,
 																			when: "now",
-                                });
+																		},
+																	);
 																	groups.reload();
 																	setTab("playback");
 																}
@@ -129,7 +148,11 @@ export function SignageDashboard({
 										},
 										{
 											content: (
-                      <ImagesPanel api={api} canManage={mayManageAssets} settings={loaded} />
+												<ImagesPanel
+													api={api}
+													canManage={mayManageAssets}
+													settings={loaded}
+												/>
 											),
 											id: "images",
 											label: "Images",
@@ -140,7 +163,7 @@ export function SignageDashboard({
 													api={api}
 													canManage={mayManageDisplays}
 													copyText={copyText}
-                        displaySetupUrl={displaySetupUrl}
+													displaySetupUrl={context.display?.url}
 													onGroupsChanged={() => {
 														setGroupId(undefined);
 														groups.reload();
@@ -151,12 +174,19 @@ export function SignageDashboard({
 											label: "Displays",
 										},
 										{
-                    content: <ProvidersPanel api={api} context={context} settings={loaded} />,
+											content: (
+												<ProvidersPanel
+													api={api}
+													context={context}
+													settings={loaded}
+												/>
+											),
 											id: "providers",
 											label: "Providers",
 										},
 									]}
 								/>
+							</div>
 						),
 					{ label: "Loading Signage…", onRetry: settings.reload },
 				)}

src/ui/index.tsx

@@ -19,17 +19,17 @@ export default defineModuleUi({
 	styles: `${EKKLESIA_UI_STYLESHEET}\n${ownStyles}`,
 	mount(container, context) {
 		const root = createRoot(container);
-    const displaySetupUrl = new URL("/display/signage", globalThis.location.origin).href;
 		root.render(
 			<SignageDashboard
 				context={context}
 				copyText={async (value) => {
 					if (globalThis.navigator.clipboard === undefined) {
-            throw new Error("Clipboard access is not available in this browser.");
+						throw new Error(
+							"Clipboard access is not available in this browser.",
+						);
 					}
 					await globalThis.navigator.clipboard.writeText(value);
 				}}
-        displaySetupUrl={displaySetupUrl}
 			/>,
 		);
 		return () => root.unmount();

src/ui/panels/DisplaysPanel.tsx

@@ -1,9 +1,22 @@
-import { Badge, Button, Field, Panel, Select, TextInput } from "@ekklesia/ui";
+import {
+	Badge,
+	Button,
+	Field,
+	InlineNotice,
+	Panel,
+	Select,
+	TextInput,
+} from "@ekklesia/ui";
 import { type ReactElement, useState } from "react";
 import type { SignageApi } from "../api.js";
 import { useAction, useResource, useTick } from "../hooks.js";
 import type { ChannelGroupView, ViewerHealthView } from "../types.js";
-import { FailureNote, formatSince, OnlineBadge, renderLoadable } from "./shared.js";
+import {
+	FailureNote,
+	formatSince,
+	OnlineBadge,
+	renderLoadable,
+} from "./shared.js";
 
 const AUDIENCE_KEY = /^[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/u;
 
@@ -23,13 +36,19 @@ function DisplayRow({
 	readonly viewer: ViewerHealthView;
 }): ReactElement {
 	return (
-    <div className="signage-display-row" data-testid={`signage-display-${viewer.id}`}>
+		<div
+			className="signage-display-row"
+			data-testid={`signage-display-${viewer.id}`}
+		>
 			<div className="signage-display-row__identity">
 				{canManage ? (
 					<TextInput
 						aria-label={`Name for ${viewer.name}`}
 						defaultValue={viewer.name}
-            onBlur={(event) => event.target.value !== viewer.name && onNameChange(event.target.value)}
+						onBlur={(event) =>
+							event.target.value !== viewer.name &&
+							onNameChange(event.target.value)
+						}
 					/>
 				) : (
 					<strong>{viewer.name}</strong>
@@ -63,10 +82,15 @@ function DisplayRow({
 			<div className="signage-display-row__health">
 				<span>{`Seen ${formatSince(viewer.lastSeenAtMs, nowMs)}`}</span>
 				<Badge tone={viewer.offlineReady ? "success" : "neutral"}>
-          {viewer.offlineReady ? `${viewer.cachedAssetCount} cached` : "Not offline ready"}
+					{viewer.offlineReady
+						? `${viewer.cachedAssetCount} cached`
+						: "Not offline ready"}
 				</Badge>
 				{viewer.lastError === null ? undefined : (
-          <span className="signage-display-row__error" title={viewer.lastError.detail ?? undefined}>
+					<span
+						className="signage-display-row__error"
+						title={viewer.lastError.detail ?? undefined}
+					>
 						{viewer.lastError.code}
 					</span>
 				)}
@@ -89,11 +113,17 @@ export function DisplaysPanel({
 	readonly api: SignageApi;
 	readonly canManage: boolean;
 	readonly copyText: (value: string) => Promise<void>;
-  readonly displaySetupUrl: string;
+	readonly displaySetupUrl: string | undefined;
 	readonly onGroupsChanged?: () => void;
 }): ReactElement {
-  const groups = useResource(() => api.get<{ groups: readonly ChannelGroupView[] }>("channel-groups"), []);
+	const groups = useResource(
-  const viewers = useResource(() => api.get<{ viewers: readonly ViewerHealthView[] }>("viewers"), []);
+		() => api.get<{ groups: readonly ChannelGroupView[] }>("channel-groups"),
+		[],
+	);
+	const viewers = useResource(
+		() => api.get<{ viewers: readonly ViewerHealthView[] }>("viewers"),
+		[],
+	);
 	const edit = useAction(() => {
 		groups.reload();
 		viewers.reload();
@@ -101,8 +131,12 @@ export function DisplaysPanel({
 	});
 	const viewerEdit = useAction(viewers.reload);
 	const [groupName, setGroupName] = useState("");
-  const [copyStatus, setCopyStatus] = useState<"copied" | "failed" | "idle">("idle");
+	const [copyStatus, setCopyStatus] = useState<"copied" | "failed" | "idle">(
-  const [confirmGroupId, setConfirmGroupId] = useState<string | undefined>(undefined);
+		"idle",
+	);
+	const [confirmGroupId, setConfirmGroupId] = useState<string | undefined>(
+		undefined,
+	);
 	const [channelDraft, setChannelDraft] = useState<{
 		groupId: string;
 		key: string;
@@ -114,9 +148,13 @@ export function DisplaysPanel({
 	});
 	useTick(5000);
 	const nowMs = Date.now();
-  const readyViewers = viewers.state.status === "ready" ? viewers.state.value.viewers : [];
+	const readyViewers =
+		viewers.state.status === "ready" ? viewers.state.value.viewers : [];
 
-  const updateViewer = (viewerId: string, changes: Record<string, string>): void => {
+	const updateViewer = (
+		viewerId: string,
+		changes: Record<string, string>,
+	): void => {
 		viewerEdit.run(() => api.send("PATCH", `viewers/${viewerId}`, changes));
 	};
 
@@ -124,6 +162,7 @@ export function DisplaysPanel({
 		<div className="signage-columns">
 			<Panel
 				actions={
+					displaySetupUrl === undefined ? undefined : (
 						<div className="signage-pairing-actions">
 							<a
 								className="ek-button ek-focusable ek-button--primary"
@@ -145,24 +184,38 @@ export function DisplaysPanel({
 								Copy URL
 							</Button>
 						</div>
+					)
 				}
 				description="Connect a screen in three short steps."
 				title="Pair a display"
 			>
-        <ol className="signage-pairing-steps" aria-label="Display pairing steps">
+				<ol
+					className="signage-pairing-steps"
+					aria-label="Display pairing steps"
+				>
 					<li>
 						<span className="signage-pairing-steps__number">1</span>
-            <span>Open display setup on the screen that will show signage.</span>
+						<span>
+							Open display setup on the screen that will show signage.
+						</span>
 					</li>
 					<li>
 						<span className="signage-pairing-steps__number">2</span>
-            <span>Enter its six-digit code under Display devices in the Dashboard sidebar.</span>
+						<span>
+							Enter its six-digit code under Display devices in the Dashboard
+							sidebar.
+						</span>
 					</li>
 					<li>
 						<span className="signage-pairing-steps__number">3</span>
 						<span>Name the display and choose its audience channel below.</span>
 					</li>
 				</ol>
+				{displaySetupUrl === undefined ? (
+					<InlineNotice tone="warning" title="Display setup unavailable">
+						This host did not provide a display setup address.
+					</InlineNotice>
+				) : undefined}
 				<span className="signage-copy-status" aria-live="polite">
 					{copyStatus === "copied"
 						? "Display setup URL copied."
@@ -170,10 +223,13 @@ export function DisplaysPanel({
 							? "Could not copy the URL. Copy it from the newly opened setup page."
 							: ""}
 				</span>
-        {viewers.state.status === "ready" && viewers.state.value.viewers.length === 0 ? (
+				{viewers.state.status === "ready" &&
+				viewers.state.value.viewers.length === 0 ? (
 					<div className="signage-display-empty">
 						<strong>No displays paired yet</strong>
-            <span>A newly approved screen appears below in its assigned channel.</span>
+						<span>
+							A newly approved screen appears below in its assigned channel.
+						</span>
 					</div>
 				) : undefined}
 			</Panel>
@@ -216,10 +272,14 @@ export function DisplaysPanel({
 					groups.state,
 					(value) => {
 						const knownChannelIds = new Set(
-              value.groups.flatMap((group) => group.channels.map((channel) => channel.id)),
+							value.groups.flatMap((group) =>
+								group.channels.map((channel) => channel.id),
+							),
 						);
 						const unassigned = readyViewers.filter(
-              (viewer) => viewer.channelId === null || !knownChannelIds.has(viewer.channelId),
+							(viewer) =>
+								viewer.channelId === null ||
+								!knownChannelIds.has(viewer.channelId),
 						);
 						return (
 							<div className="signage-groups" data-testid="signage-groups">
@@ -227,12 +287,18 @@ export function DisplaysPanel({
 									<article className="signage-group" key={group.id}>
 										<header className="signage-group__header">
 											<div className="signage-group__identity">
-                        <span className="signage-hierarchy-label">Channel group</span>
+												<span className="signage-hierarchy-label">
+													Channel group
+												</span>
 												<h3>{group.name}</h3>
 											</div>
 											<Badge tone="info">{group.playback.transport}</Badge>
 											{canManage && value.groups.length > 1 ? (
-                        <Button disabled={edit.pending} onClick={() => setConfirmGroupId(group.id)} variant="danger">
+												<Button
+													disabled={edit.pending}
+													onClick={() => setConfirmGroupId(group.id)}
+													variant="danger"
+												>
 													Delete group
 												</Button>
 											) : canManage ? (
@@ -242,17 +308,24 @@ export function DisplaysPanel({
 										{confirmGroupId === group.id ? (
 											<div className="signage-confirm" role="alert">
 												<p>
-                          Delete {group.name}? Its playback history will be removed. Displays assigned here will move to
+													Delete {group.name}? Its playback history will be
-                          the default channel of another group.
+													removed. Displays assigned here will move to the
+													default channel of another group.
 												</p>
-                        <Button disabled={edit.pending} onClick={() => setConfirmGroupId(undefined)}>
+												<Button
+													disabled={edit.pending}
+													onClick={() => setConfirmGroupId(undefined)}
+												>
 													Cancel
 												</Button>
 												<Button
 													disabled={edit.pending}
 													onClick={() =>
 														edit.run(async () => {
-                              await api.send("DELETE", `channel-groups/${group.id}`);
+															await api.send(
+																"DELETE",
+																`channel-groups/${group.id}`,
+															);
 															setConfirmGroupId(undefined);
 														})
 													}
@@ -266,21 +339,34 @@ export function DisplaysPanel({
 										<section className="signage-audiences">
 											<div className="signage-audiences__heading">
 												<div>
-                          <span className="signage-hierarchy-label">Audience channels</span>
+													<span className="signage-hierarchy-label">
+														Audience channels
+													</span>
 													<h4>Who this group renders for</h4>
 												</div>
-                        <span>Displays inherit the channel they are assigned to.</span>
+												<span>
+													Displays inherit the channel they are assigned to.
+												</span>
 											</div>
 											<div className="signage-channel-list">
 												{group.channels.map((channel) => {
-                          const assigned = readyViewers.filter((viewer) => viewer.channelId === channel.id);
+													const assigned = readyViewers.filter(
+														(viewer) => viewer.channelId === channel.id,
+													);
 													return (
-                            <article className="signage-channel" key={channel.id}>
+														<article
+															className="signage-channel"
+															key={channel.id}
+														>
 															<header className="signage-channel__header">
 																<div>
 																	<h5>{channel.name}</h5>
 																	<div className="signage-channel__meta">
-                                    {channel.isDefault ? <Badge tone="success">Default channel</Badge> : undefined}
+																		{channel.isDefault ? (
+																			<Badge tone="success">
+																				Default channel
+																			</Badge>
+																		) : undefined}
 																		<span>Audience key</span>
 																		<code>{channel.key}</code>
 																		<Badge tone="neutral">
@@ -291,7 +377,14 @@ export function DisplaysPanel({
 																{canManage && !channel.isDefault ? (
 																	<Button
 																		disabled={edit.pending}
-                                    onClick={() => edit.run(() => api.send("DELETE", `channels/${channel.id}`))}
+																		onClick={() =>
+																			edit.run(() =>
+																				api.send(
+																					"DELETE",
+																					`channels/${channel.id}`,
+																				),
+																			)
+																		}
 																		variant="danger"
 																	>
 																		Remove channel
@@ -299,9 +392,13 @@ export function DisplaysPanel({
 																) : undefined}
 															</header>
 															<div className="signage-channel__displays">
-                                <span className="signage-hierarchy-label">Displays</span>
+																<span className="signage-hierarchy-label">
+																	Displays
+																</span>
 																{assigned.length === 0 ? (
-                                  <p className="signage-channel__empty">No displays assigned.</p>
+																	<p className="signage-channel__empty">
+																		No displays assigned.
+																	</p>
 																) : (
 																	assigned.map((viewer) => (
 																		<DisplayRow
@@ -309,8 +406,12 @@ export function DisplaysPanel({
 																			groups={value.groups}
 																			key={viewer.id}
 																			nowMs={nowMs}
-                                      onChannelChange={(channelId) => updateViewer(viewer.id, { channelId })}
+																			onChannelChange={(channelId) =>
-                                      onNameChange={(name) => updateViewer(viewer.id, { name })}
+																				updateViewer(viewer.id, { channelId })
+																			}
+																			onNameChange={(name) =>
+																				updateViewer(viewer.id, { name })
+																			}
 																			viewer={viewer}
 																		/>
 																	))
@@ -322,12 +423,20 @@ export function DisplaysPanel({
 											</div>
 
 											{canManage ? (
-                        <div className="signage-channel-form" data-testid="signage-add-channel">
+												<div
+													className="signage-channel-form"
+													data-testid="signage-add-channel"
+												>
 													<div className="signage-channel-form__heading">
 														<h5>Add an audience channel</h5>
-                            <span>The default channel always remains available.</span>
+														<span>
+															The default channel always remains available.
+														</span>
 													</div>
-                          <Field hint="Shown to administrators and when assigning displays." label="Channel name">
+													<Field
+														hint="Shown to administrators and when assigning displays."
+														label="Channel name"
+													>
 														{(control) => (
 															<TextInput
 																{...control}
@@ -335,12 +444,19 @@ export function DisplaysPanel({
 																onChange={(event) =>
 																	setChannelDraft((current) => ({
 																		groupId: group.id,
-                                    key: current.groupId === group.id ? current.key : "",
+																		key:
+																			current.groupId === group.id
+																				? current.key
+																				: "",
 																		name: event.target.value,
 																	}))
 																}
 																placeholder="Online audience"
-                                value={channelDraft.groupId === group.id ? channelDraft.name : ""}
+																value={
+																	channelDraft.groupId === group.id
+																		? channelDraft.name
+																		: ""
+																}
 															/>
 														)}
 													</Field>
@@ -356,12 +472,19 @@ export function DisplaysPanel({
 																	setChannelDraft((current) => ({
 																		groupId: group.id,
 																		key: event.target.value,
-                                    name: current.groupId === group.id ? current.name : "",
+																		name:
+																			current.groupId === group.id
+																				? current.name
+																				: "",
 																	}))
 																}
 																pattern="[a-z][a-z0-9]*(?:-[a-z0-9]+)*"
 																placeholder="online"
-                                value={channelDraft.groupId === group.id ? channelDraft.key : ""}
+																value={
+																	channelDraft.groupId === group.id
+																		? channelDraft.key
+																		: ""
+																}
 															/>
 														)}
 													</Field>
@@ -375,10 +498,14 @@ export function DisplaysPanel({
 														}
 														onClick={() =>
 															edit.run(async () => {
-                                await api.send("POST", `channel-groups/${group.id}/channels`, {
+																await api.send(
+																	"POST",
+																	`channel-groups/${group.id}/channels`,
+																	{
 																		key: channelDraft.key.trim(),
 																		name: channelDraft.name.trim(),
-                                });
+																	},
+																);
 																setChannelDraft({
 																	groupId: "",
 																	key: "",
@@ -398,15 +525,21 @@ export function DisplaysPanel({
 
 								{unassigned.length === 0 ? undefined : (
 									<section className="signage-unassigned">
-                    <span className="signage-hierarchy-label">Needs assignment</span>
+										<span className="signage-hierarchy-label">
+											Needs assignment
+										</span>
 										{unassigned.map((viewer) => (
 											<DisplayRow
 												canManage={canManage}
 												groups={value.groups}
 												key={viewer.id}
 												nowMs={nowMs}
-                        onChannelChange={(channelId) => updateViewer(viewer.id, { channelId })}
+												onChannelChange={(channelId) =>
-                        onNameChange={(name) => updateViewer(viewer.id, { name })}
+													updateViewer(viewer.id, { channelId })
+												}
+												onNameChange={(name) =>
+													updateViewer(viewer.id, { name })
+												}
 												viewer={viewer}
 											/>
 										))}

src/ui/panels/PlaybackPanel.tsx

@@ -1,5 +1,13 @@
 import type { ModuleUiHostContext } from "@ekklesia/module-ui-sdk";
-import { Badge, Button, EmptyState, Field, Panel, Select } from "@ekklesia/ui";
+import {
+	ActionBar,
+	Badge,
+	Button,
+	EmptyState,
+	Field,
+	Panel,
+	Select,
+} from "@ekklesia/ui";
 import { type ReactElement, useState } from "react";
 import type { SignageApi } from "../api.js";
 import { useAction, useResource, useTick } from "../hooks.js";
@@ -10,7 +18,12 @@ import type {
 	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.
@@ -75,13 +88,14 @@ export function PlaybackPanel({
 			return timelineId;
 		}
 		return (
-      timelines.state.value.timelines.find((timeline) => timeline.id === timelineId)?.name ??
+			timelines.state.value.timelines.find(
-      timelineId
+				(timeline) => timeline.id === timelineId,
+			)?.name ?? timelineId
 		);
 	}
 
 	return (
-    <div className="signage-columns">
+		<div className="signage-columns signage-playback-layout">
 			<Panel
 				actions={renderLoadable(
 					groups.state,
@@ -116,7 +130,10 @@ export function PlaybackPanel({
 							value === undefined ? (
 								<EmptyState title="No channel group selected" />
 							) : (
-                <div className="signage-playback" data-testid="signage-playback">
+								<div
+									className="signage-playback"
+									data-testid="signage-playback"
+								>
 									<div className="signage-playback__status">
 										{value.snapshot.activeTimelineId === null ? undefined : (
 											<Badge tone="success">
@@ -134,7 +151,9 @@ export function PlaybackPanel({
 										>
 											{value.snapshot.transport}
 										</Badge>
-                    {value.snapshot.blackout ? <Badge tone="danger">Blackout</Badge> : undefined}
+										{value.snapshot.blackout ? (
+											<Badge tone="danger">Blackout</Badge>
+										) : undefined}
 										{value.current?.stale === true ? (
 											<Badge tone="warning">Stale</Badge>
 										) : undefined}
@@ -152,7 +171,12 @@ export function PlaybackPanel({
 											title="Nothing on screen"
 										/>
 									) : (
-                    <dl className="signage-playback__current" data-testid="signage-current">
+										<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>
@@ -168,13 +192,26 @@ export function PlaybackPanel({
 														: formatDuration(value.snapshot.remainingMs)}
 												</dd>
 												<dt>Started</dt>
-                      <dd>{formatInstant(value.current.startedAtMs, settings.timezone)}</dd>
+												<dd>
+													{formatInstant(
+														value.current.startedAtMs,
+														settings.timezone,
+													)}
+												</dd>
 											</dl>
+										</section>
 									)}
 
 									{canControl ? (
-                    <div className="signage-playback__controls" data-testid="signage-controls">
+										<ActionBar
-                      <Button disabled={command.pending} onClick={() => run("previous")}>
+											className="signage-playback__controls"
+											data-testid="signage-controls"
+											label="Playback controls"
+										>
+											<Button
+												disabled={command.pending}
+												onClick={() => run("previous")}
+											>
 												Previous
 											</Button>
 											{value.snapshot.transport === "paused" ? (
@@ -186,17 +223,27 @@ export function PlaybackPanel({
 													Resume
 												</Button>
 											) : (
-                        <Button disabled={command.pending} onClick={() => run("pause")}>
+												<Button
+													disabled={command.pending}
+													onClick={() => run("pause")}
+												>
 													Pause
 												</Button>
 											)}
-                      <Button disabled={command.pending} onClick={() => run("next")}>
+											<Button
+												disabled={command.pending}
+												onClick={() => run("next")}
+											>
 												Next
 											</Button>
 											<Button
 												disabled={command.pending}
-                        onClick={() => run("blackout", { on: !value.snapshot.blackout })}
+												onClick={() =>
-                        variant={value.snapshot.blackout ? "primary" : "secondary"}
+													run("blackout", { on: !value.snapshot.blackout })
+												}
+												variant={
+													value.snapshot.blackout ? "primary" : "secondary"
+												}
 											>
 												{value.snapshot.blackout ? "End blackout" : "Blackout"}
 											</Button>
@@ -208,10 +255,13 @@ export function PlaybackPanel({
 													Release hold
 												</Button>
 											)}
-                      <Button disabled={command.pending} onClick={() => run("reload")}>
+											<Button
+												disabled={command.pending}
+												onClick={() => run("reload")}
+											>
 												Reload content
 											</Button>
-                    </div>
+										</ActionBar>
 									) : undefined}
 
 									{canControl ? (
@@ -224,12 +274,17 @@ export function PlaybackPanel({
 															{(control) => (
 																<Select
 																	{...control}
-                                  onChange={(event) => setActivateId(event.target.value)}
+																	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}>
+																		<option
+																			key={timeline.id}
+																			value={timeline.id}
+																		>
 																			{timeline.name}
 																		</option>
 																	))}
@@ -239,7 +294,10 @@ export function PlaybackPanel({
 														<Button
 															disabled={command.pending || activateId === ""}
 															onClick={() =>
-                                run("activate", { timelineId: activateId, when: "now" })
+																run("activate", {
+																	timelineId: activateId,
+																	when: "now",
+																})
 															}
 															variant="primary"
 														>
@@ -248,7 +306,10 @@ export function PlaybackPanel({
 														<Button
 															disabled={command.pending || activateId === ""}
 															onClick={() =>
-                                run("activate", { timelineId: activateId, when: "next-boundary" })
+																run("activate", {
+																	timelineId: activateId,
+																	when: "next-boundary",
+																})
 															}
 														>
 															At next slot
@@ -262,11 +323,18 @@ export function PlaybackPanel({
 
 									{value.history.length === 0 ? undefined : (
 										<div className="signage-playback__history">
-                      <h4 className="signage-editor__subtitle">Recently played</h4>
+											<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}>
+													<li
-                            <span className="signage-row__name">{entry.itemId}</span>
+														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>

src/ui/panels/ProvidersPanel.tsx

@@ -44,12 +44,17 @@ export function ProvidersPanel({
 		[],
 	);
 	const published = new Set(
-    context.contributions.list(SLIDE_RENDERER_CAPABILITY).map((contribution) => contribution.id),
+		context.contributions
+			.list(SLIDE_RENDERER_CAPABILITY)
+			.map((contribution) => contribution.id),
 	);
 
 	return (
 		<Panel
-      description={`Renderer input contract ${settings.rendererInputVersion}. Only providers that are actually running appear here.`}
+			actions={
+				<Badge tone="neutral">{`Contract ${settings.rendererInputVersion}`}</Badge>
+			}
+			description="Running content sources available to timelines."
 			title="Content providers"
 		>
 			{renderLoadable(
@@ -73,20 +78,27 @@ export function ProvidersPanel({
 							</TableHead>
 							<TableBody>
 								{value.providers.map((provider) => {
-                  const rendererPublished = published.has(provider.renderer.contributionId);
+									const rendererPublished = published.has(
-                  const isNative = provider.renderer.contributionId === "signage.native-image";
+										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__id">
+													{provider.providerId}
+												</span>
 												<span className="signage-provider__version">{`v${provider.providerVersion}`}</span>
 											</TableCell>
 											<TableCell>{provider.contractVersion}</TableCell>
 											<TableCell>
 												{isNative ? (
-                          <Badge tone="success">Signage renders this</Badge>
+													<Badge tone="info">Built in</Badge>
 												) : rendererPublished ? (
-                          <Badge tone="success">{provider.renderer.contributionId}</Badge>
+													<Badge tone="success">
+														{provider.renderer.contributionId}
+													</Badge>
 												) : (
 													<Badge tone="warning">Renderer not published</Badge>
 												)}
@@ -101,7 +113,10 @@ export function ProvidersPanel({
 												)}
 											</TableCell>
 											<TableCell>
-                        {formatInstant(provider.lastSuccessAt, settings.timezone)}
+												{formatInstant(
+													provider.lastSuccessAt,
+													settings.timezone,
+												)}
 											</TableCell>
 										</TableRow>
 									);

src/ui/panels/TimelinesPanel.tsx

@@ -25,7 +25,12 @@ import type {
 	TimelineDetail,
 	TimelineSummary,
 } from "../types.js";
-import { FailureNote, formatDuration, formatInstant, renderLoadable } from "./shared.js";
+import {
+	FailureNote,
+	formatDuration,
+	formatInstant,
+	renderLoadable,
+} from "./shared.js";
 
 const NATIVE_PROVIDER_ID = "signage.native-images";
 
@@ -87,7 +92,9 @@ export function TimelinesPanel({
 							<Button
 								disabled={create.pending || newName.trim().length === 0}
 								onClick={() =>
-                  create.run(() => api.send("POST", "timelines", { name: newName.trim() }))
+									create.run(() =>
+										api.send("POST", "timelines", { name: newName.trim() }),
+									)
 								}
 								variant="primary"
 							>
@@ -119,17 +126,31 @@ export function TimelinesPanel({
 								</TableHead>
 								<TableBody>
 									{value.timelines.map((timeline) => (
-                    <TableRow key={timeline.id} selected={timeline.id === selectedId}>
+										<TableRow
+											key={timeline.id}
+											selected={timeline.id === selectedId}
+										>
 											<TableCell>
-                        <Button onClick={() => setSelectedId(timeline.id)}>{timeline.name}</Button>
+												<div className="signage-timeline-name">
+													<Button
+														className="signage-timeline-select"
+														onClick={() => setSelectedId(timeline.id)}
+														variant="quiet"
+													>
+														{timeline.name}
+													</Button>
 													{timeline.id === activeTimelineId ? (
 														<Badge tone="success">
-                            {activeGroupName ? `Active in ${activeGroupName}` : "Active"}
+															{activeGroupName
+																? `Active in ${activeGroupName}`
+																: "Active"}
 														</Badge>
 													) : undefined}
+												</div>
 											</TableCell>
 											<TableCell>
-                        {timeline.eligibleFrom === null && timeline.eligibleUntil === null
+												{timeline.eligibleFrom === null &&
+												timeline.eligibleUntil === null
 													? "Always"
 													: `${formatInstant(timeline.eligibleFrom, settings.timezone)} → ${formatInstant(timeline.eligibleUntil, settings.timezone)}`}
 											</TableCell>
@@ -137,11 +158,18 @@ export function TimelinesPanel({
 											<TableCell>
 												{onActivate === undefined ? undefined : (
 													<Button
-                            disabled={activation.pending || timeline.id === activeTimelineId}
+														disabled={
-                            onClick={() => activation.run(() => onActivate(timeline.id))}
+															activation.pending ||
+															timeline.id === activeTimelineId
+														}
+														onClick={() =>
+															activation.run(() => onActivate(timeline.id))
+														}
 														variant="primary"
 													>
-                            {timeline.id === activeTimelineId ? "Active" : "Activate"}
+														{timeline.id === activeTimelineId
+															? "Active"
+															: "Activate"}
 													</Button>
 												)}
 											</TableCell>
@@ -163,7 +191,11 @@ export function TimelinesPanel({
 					key={selectedId}
 					onChanged={timelines.reload}
 					onClose={() => setSelectedId(undefined)}
-          providers={providers.state.status === "ready" ? providers.state.value.providers : []}
+					providers={
+						providers.state.status === "ready"
+							? providers.state.value.providers
+							: []
+					}
 					settings={settings}
 					timelineId={selectedId}
 				/>
@@ -193,13 +225,18 @@ function TimelineEditor({
 		() => api.get<TimelineDetail>(`timelines/${timelineId}`),
 		[timelineId],
 	);
-  const images = useResource(() => api.get<{ images: readonly ImageRecord[] }>("images"), []);
+	const images = useResource(
+		() => api.get<{ images: readonly ImageRecord[] }>("images"),
+		[],
+	);
 	const edit = useAction(() => {
 		detail.reload();
 		onChanged();
 	});
 	const [providerId, setProviderId] = useState("");
-  const [sources, setSources] = useState<readonly ProviderSourceDescriptor[]>([]);
+	const [sources, setSources] = useState<readonly ProviderSourceDescriptor[]>(
+		[],
+	);
 	const [items, setItems] = useState<readonly ProviderItemDescriptor[]>([]);
 
 	function loadProvider(nextProviderId: string): void {
@@ -236,7 +273,10 @@ function TimelineEditor({
 						<h3 className="signage-editor__title">{value.timeline.name}</h3>
 
 						{canManage ? (
-              <div className="signage-editor__add" data-testid="signage-add-source">
+							<div
+								className="signage-editor__add"
+								data-testid="signage-add-source"
+							>
 								<Field
 									hint="A provider's own source. Repeat its slot to give it more turns in one rotation."
 									label="Content provider"
@@ -249,7 +289,10 @@ function TimelineEditor({
 										>
 											<option value="">Choose a provider…</option>
 											{providers.map((provider) => (
-                        <option key={provider.providerId} value={provider.providerId}>
+												<option
+													key={provider.providerId}
+													value={provider.providerId}
+												>
 													{provider.providerId}
 												</option>
 											))}
@@ -305,9 +348,13 @@ function TimelineEditor({
 													disabled={edit.pending}
 													onClick={() =>
 														edit.run(() =>
-                              api.send("POST", `timelines/${timelineId}/slots`, {
+															api.send(
+																"POST",
+																`timelines/${timelineId}/slots`,
+																{
 																	sourceId: source.id,
-                              }),
+																},
+															),
 														)
 													}
 												>
@@ -317,7 +364,10 @@ function TimelineEditor({
 													disabled={edit.pending}
 													onClick={() =>
 														edit.run(() =>
-                              api.send("DELETE", `timelines/${timelineId}/sources/${source.id}`),
+															api.send(
+																"DELETE",
+																`timelines/${timelineId}/sources/${source.id}`,
+															),
 														)
 													}
 													variant="danger"
@@ -353,7 +403,8 @@ function TimelineEditor({
 											(candidate) => candidate.id === slot.sourceId,
 										);
 										const image =
-                      slot.providerId === NATIVE_PROVIDER_ID && images.state.status === "ready"
+											slot.providerId === NATIVE_PROVIDER_ID &&
+											images.state.status === "ready"
 												? images.state.value.images.find(
 														(candidate) => candidate.id === slot.itemId,
 													)
@@ -364,7 +415,8 @@ function TimelineEditor({
 												<TableCell>
 													{slot.kind === "provider-source"
 														? (source?.label ?? "Removed source")
-                            : (image?.displayName ?? `${slot.providerId} · ${slot.itemId}`)}
+														: (image?.displayName ??
+															`${slot.providerId} · ${slot.itemId}`)}
 												</TableCell>
 												<TableCell>
 													{slot.durationOverrideMs === null
@@ -378,9 +430,13 @@ function TimelineEditor({
 														label={slot.enabled ? "On" : "Off"}
 														onChange={(event) =>
 															edit.run(() =>
-                                api.send("PATCH", `timelines/${timelineId}/slots/${slot.id}`, {
+																api.send(
+																	"PATCH",
+																	`timelines/${timelineId}/slots/${slot.id}`,
+																	{
 																		enabled: event.target.checked,
-                                }),
+																	},
+																),
 															)
 														}
 													/>
@@ -392,29 +448,44 @@ function TimelineEditor({
 																disabled={index === 0 || edit.pending}
 																onClick={() =>
 																	edit.run(() =>
-                                    api.send("PUT", `timelines/${timelineId}/slot-order`, {
+																		api.send(
+																			"PUT",
+																			`timelines/${timelineId}/slot-order`,
+																			{
 																				slotIds: swap(
-                                        value.slots.map((candidate) => candidate.id),
+																					value.slots.map(
+																						(candidate) => candidate.id,
+																					),
 																					index,
 																					index - 1,
 																				),
-                                    }),
+																			},
+																		),
 																	)
 																}
 															>
 																Up
 															</Button>
 															<Button
-                                disabled={index === value.slots.length - 1 || edit.pending}
+																disabled={
+																	index === value.slots.length - 1 ||
+																	edit.pending
+																}
 																onClick={() =>
 																	edit.run(() =>
-                                    api.send("PUT", `timelines/${timelineId}/slot-order`, {
+																		api.send(
+																			"PUT",
+																			`timelines/${timelineId}/slot-order`,
+																			{
 																				slotIds: swap(
-                                        value.slots.map((candidate) => candidate.id),
+																					value.slots.map(
+																						(candidate) => candidate.id,
+																					),
 																					index,
 																					index + 1,
 																				),
-                                    }),
+																			},
+																		),
 																	)
 																}
 															>
@@ -424,7 +495,10 @@ function TimelineEditor({
 																disabled={edit.pending}
 																onClick={() =>
 																	edit.run(() =>
-                                    api.send("DELETE", `timelines/${timelineId}/slots/${slot.id}`),
+																		api.send(
+																			"DELETE",
+																			`timelines/${timelineId}/slots/${slot.id}`,
+																		),
 																	)
 																}
 																variant="danger"

src/ui/styles.css

@@ -28,7 +28,7 @@
 }
 
 :host {
-  --signage-gap: var(--ekklesia-spacing-lg);
+	--signage-gap: var(--ekklesia-spacing-xl);
 	--signage-gap-tight: var(--ekklesia-spacing-sm);
 	--signage-panel-radius: var(--ekklesia-radius-lg);
 	--signage-thumbnail-width: 220px;
@@ -69,10 +69,19 @@
 
 	.signage-desktop {
 		display: grid;
-    gap: var(--signage-gap);
+		gap: var(--ekklesia-spacing-xl);
 	}
 }
 
+.signage-workspace {
+	display: grid;
+	min-width: 0;
+}
+
+.signage-workspace > .ek-tabs__list {
+	padding-inline: var(--ekklesia-spacing-xs);
+}
+
 .signage-columns {
 	display: grid;
 	gap: var(--signage-gap);
@@ -167,7 +176,10 @@
 .signage-image-grid {
 	display: grid;
 	gap: var(--signage-gap);
-  grid-template-columns: repeat(auto-fill, minmax(var(--signage-thumbnail-width), 1fr));
+	grid-template-columns: repeat(
+			auto-fill,
+			minmax(var(--signage-thumbnail-width), 1fr)
+		);
 	list-style: none;
 	margin: 0;
 	padding: 0;
@@ -177,13 +189,13 @@
 	/* Rows sized to their content, with the slack from a taller neighbour left at the bottom rather
      than spread between the thumbnail and the name. */
 	align-content: start;
-  background: var(--ekklesia-background-canvas);
+	background: var(--ekklesia-background-surface);
 	border: var(--ekklesia-border-width) solid var(--ekklesia-border-divider);
 	border-radius: var(--ekklesia-radius-md);
 	display: grid;
-  gap: var(--ekklesia-spacing-xs);
+	gap: var(--ekklesia-spacing-sm);
 	overflow: hidden;
-  padding: var(--ekklesia-spacing-sm);
+	padding: var(--ekklesia-spacing-md);
 }
 
 /* One box, whatever shape the image is: a library of mixed aspect ratios still reads as a grid, and
@@ -285,6 +297,19 @@
 	gap: var(--ekklesia-spacing-2xs);
 }
 
+.signage-timeline-name {
+	align-items: center;
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--ekklesia-spacing-sm);
+}
+
+.signage-timeline-select {
+	color: var(--ekklesia-text-primary);
+	font-weight: var(--ekklesia-typography-weight-bold);
+	padding-inline: var(--ekklesia-spacing-sm);
+}
+
 /* ---------------------------------------------------------------------------------------------
  * Playback.
  * ------------------------------------------------------------------------------------------- */
@@ -311,6 +336,19 @@
 	row-gap: var(--ekklesia-spacing-2xs);
 }
 
+.signage-playback__now {
+	background: var(--ekklesia-background-inset);
+	border-radius: var(--ekklesia-radius-md);
+	display: grid;
+	gap: var(--ekklesia-spacing-sm);
+	padding: var(--ekklesia-spacing-md);
+}
+
+.signage-playback__now h3 {
+	font-size: var(--ekklesia-typography-size-lg);
+	margin: 0;
+}
+
 .signage-playback__current dt {
 	color: var(--ekklesia-text-secondary);
 	font-size: var(--ekklesia-typography-size-sm);
@@ -326,6 +364,23 @@
 	font-size: var(--ekklesia-typography-size-sm);
 }
 
+.signage-playback__history {
+	display: grid;
+	gap: var(--ekklesia-spacing-sm);
+}
+
+.signage-playback__history .ek-list {
+	max-height: 14rem;
+	overflow: auto;
+}
+
+@media (min-width: 1280px) {
+	.signage-playback-layout {
+		align-items: start;
+		grid-template-columns: minmax(0, 1fr) minmax(28rem, 1fr);
+	}
+}
+
 /* ---------------------------------------------------------------------------------------------
  * Displays and providers.
  * ------------------------------------------------------------------------------------------- */
@@ -365,7 +420,7 @@
 
 .signage-pairing-steps li {
 	align-items: center;
-  background: var(--ekklesia-background-inset);
+	background: var(--ekklesia-accent-subtle);
 	border-radius: var(--ekklesia-radius-md);
 	display: flex;
 	gap: var(--signage-gap-tight);
@@ -403,7 +458,7 @@
 }
 
 .signage-group {
-  background: var(--ekklesia-background-canvas);
+	background: var(--ekklesia-background-inset);
 	border: var(--ekklesia-border-width) solid var(--ekklesia-border-divider);
 	border-radius: var(--signage-panel-radius);
 	display: grid;
@@ -458,7 +513,8 @@
 }
 
 .signage-audiences {
-  border-block-start: var(--ekklesia-border-width) solid var(--ekklesia-border-divider);
+	border-block-start: var(--ekklesia-border-width) solid
+		var(--ekklesia-border-divider);
 	display: grid;
 	gap: var(--signage-gap);
 	padding-block-start: var(--signage-gap);
@@ -489,11 +545,12 @@
 .signage-channel {
 	background: var(--ekklesia-background-surface);
 	border: var(--ekklesia-border-width) solid var(--ekklesia-border-divider);
-  border-inline-start: var(--ekklesia-spacing-2xs) solid var(--ekklesia-accent-base);
+	border-inline-start: var(--ekklesia-spacing-2xs) solid
+		var(--ekklesia-accent-base);
 	border-radius: var(--ekklesia-radius-md);
 	display: grid;
 	gap: var(--signage-gap-tight);
-  margin-inline-start: var(--ekklesia-spacing-sm);
+	margin-inline-start: var(--ekklesia-spacing-md);
 	padding: var(--ekklesia-spacing-md);
 }
 
@@ -527,7 +584,8 @@
 }
 
 .signage-channel__displays {
-  border-block-start: var(--ekklesia-border-width) solid var(--ekklesia-border-divider);
+	border-block-start: var(--ekklesia-border-width) solid
+		var(--ekklesia-border-divider);
 	display: grid;
 	gap: var(--signage-gap-tight);
 	padding-block-start: var(--signage-gap-tight);
@@ -545,7 +603,10 @@
 	border-radius: var(--ekklesia-radius-md);
 	display: grid;
 	gap: var(--signage-gap-tight);
-  grid-template-columns: minmax(14rem, 1.2fr) minmax(14rem, 1fr) minmax(14rem, 1.2fr);
+	grid-template-columns: minmax(14rem, 1.2fr) minmax(14rem, 1fr) minmax(
+			14rem,
+			1.2fr
+		);
 	padding: var(--ekklesia-spacing-sm);
 }
 
@@ -573,11 +634,12 @@
 
 .signage-channel-form,
 .signage-unassigned {
-  background: var(--ekklesia-background-inset);
+	background: var(--ekklesia-background-surface);
+	border: var(--ekklesia-border-width) solid var(--ekklesia-border-divider);
 	border-radius: var(--ekklesia-radius-md);
 	display: grid;
 	gap: var(--signage-gap-tight);
-  margin-inline-start: var(--ekklesia-spacing-sm);
+	margin-inline-start: var(--ekklesia-spacing-md);
 	padding: var(--ekklesia-spacing-md);
 }
 

tests/browser/management-ui.test.tsx

@@ -3,7 +3,12 @@ import { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it } from "vitest";
 import { SignageDashboard } from "../../src/ui/SignageDashboard.js";
-import { createFakeHost, errorResponse, FAKE_SETTINGS, jsonResponse } from "./support/fake-host.js";
+import {
+	createFakeHost,
+	errorResponse,
+	FAKE_SETTINGS,
+	jsonResponse,
+} from "./support/fake-host.js";
 
 /**
  * The management UI's behaviour, mounted as React rather than inspected as source.
@@ -14,14 +19,18 @@ import { createFakeHost, errorResponse, FAKE_SETTINGS, jsonResponse } from "./su
  */
 
 // React needs this to run effects the way a browser does.
-(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+(
+	globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }
+).IS_REACT_ACT_ENVIRONMENT = true;
 
 let container: HTMLElement;
 let root: Root;
-const DISPLAY_SETUP_URL = "https://dashboard.example.test/display/signage";
+const DISPLAY_SETUP_URL = "https://api.example.test/display/signage";
 const copiedText: string[] = [];
 
-function dashboard(context: Parameters<typeof SignageDashboard>[0]["context"]): React.ReactElement {
+function dashboard(
+	context: Parameters<typeof SignageDashboard>[0]["context"],
+): React.ReactElement {
 	return (
 		<SignageDashboard
 			context={context}
@@ -29,7 +38,6 @@ function dashboard(context: Parameters<typeof SignageDashboard>[0]["context"]):
 				copiedText.push(value);
 				return Promise.resolve();
 			}}
-      displaySetupUrl={DISPLAY_SETUP_URL}
 		/>
 	);
 }
@@ -85,7 +93,9 @@ function buttonNamed(label: string): HTMLButtonElement | undefined {
 }
 
 const GROUP = {
-  channels: [{ id: "chan-1", isDefault: true, key: "default", name: "Default" }],
+	channels: [
+		{ id: "chan-1", isDefault: true, key: "default", name: "Default" },
+	],
 	id: "group-1",
 	name: "Main",
 	playback: {
@@ -165,9 +175,21 @@ describe("Signage dashboard", () => {
 		const host = createFakeHost({
 			permissions: ["signage.view", "signage.playback.control"],
 			routes: [
-        { method: "GET", path: "settings", respond: () => jsonResponse(FAKE_SETTINGS) },
+				{
-        { method: "GET", path: "channel-groups", respond: () => jsonResponse({ groups: [GROUP] }) },
+					method: "GET",
-        { method: "GET", path: "timelines", respond: () => jsonResponse({ timelines: [] }) },
+					path: "settings",
+					respond: () => jsonResponse(FAKE_SETTINGS),
+				},
+				{
+					method: "GET",
+					path: "channel-groups",
+					respond: () => jsonResponse({ groups: [GROUP] }),
+				},
+				{
+					method: "GET",
+					path: "timelines",
+					respond: () => jsonResponse({ timelines: [] }),
+				},
 				{
 					method: "GET",
 					path: "playback/group-1",
@@ -186,10 +208,12 @@ describe("Signage dashboard", () => {
 
 		await render(dashboard(host.context));
 
-    expect(container.querySelector("[data-testid='signage-current']")?.textContent).toContain(
+		expect(
-      "welcome",
+			container.querySelector("[data-testid='signage-current']")?.textContent,
-    );
+		).toContain("welcome");
-    expect(container.querySelector("[data-testid='signage-remaining']")?.textContent).toBe("4s");
+		expect(
+			container.querySelector("[data-testid='signage-remaining']")?.textContent,
+		).toBe("4s");
 
 		await click(buttonNamed("Pause"));
 		await click(buttonNamed("Next"));
@@ -206,33 +230,69 @@ describe("Signage dashboard", () => {
 		const host = createFakeHost({
 			permissions: ["signage.view"],
 			routes: [
-        { method: "GET", path: "settings", respond: () => jsonResponse(FAKE_SETTINGS) },
+				{
-        { method: "GET", path: "channel-groups", respond: () => jsonResponse({ groups: [GROUP] }) },
+					method: "GET",
-        { method: "GET", path: "timelines", respond: () => jsonResponse({ timelines: [] }) },
+					path: "settings",
-        { method: "GET", path: "playback/group-1", respond: () => jsonResponse(PLAYBACK_DETAIL) },
+					respond: () => jsonResponse(FAKE_SETTINGS),
+				},
+				{
+					method: "GET",
+					path: "channel-groups",
+					respond: () => jsonResponse({ groups: [GROUP] }),
+				},
+				{
+					method: "GET",
+					path: "timelines",
+					respond: () => jsonResponse({ timelines: [] }),
+				},
+				{
+					method: "GET",
+					path: "playback/group-1",
+					respond: () => jsonResponse(PLAYBACK_DETAIL),
+				},
 			],
 		});
 
 		await render(dashboard(host.context));
 
 		// The current slide is still legible; the buttons that would be refused are simply not offered.
-    expect(container.querySelector("[data-testid='signage-current']")).not.toBeNull();
+		expect(
-    expect(container.querySelector("[data-testid='signage-controls']")).toBeNull();
+			container.querySelector("[data-testid='signage-current']"),
+		).not.toBeNull();
+		expect(
+			container.querySelector("[data-testid='signage-controls']"),
+		).toBeNull();
 	});
 
 	it("shows which timeline remains active after the dashboard data is reloaded", async () => {
 		const host = createFakeHost({
 			permissions: ["signage.view", "signage.playback.control"],
 			routes: [
-        { method: "GET", path: "settings", respond: () => jsonResponse(FAKE_SETTINGS) },
+				{
-        { method: "GET", path: "channel-groups", respond: () => jsonResponse({ groups: [GROUP] }) },
+					method: "GET",
+					path: "settings",
+					respond: () => jsonResponse(FAKE_SETTINGS),
+				},
+				{
+					method: "GET",
+					path: "channel-groups",
+					respond: () => jsonResponse({ groups: [GROUP] }),
+				},
 				{
 					method: "GET",
 					path: "timelines",
 					respond: () => jsonResponse({ timelines: [TIMELINE] }),
 				},
-        { method: "GET", path: "playback/group-1", respond: () => jsonResponse(PLAYBACK_DETAIL) },
+				{
-        { method: "GET", path: "providers", respond: () => jsonResponse({ providers: [] }) },
+					method: "GET",
+					path: "playback/group-1",
+					respond: () => jsonResponse(PLAYBACK_DETAIL),
+				},
+				{
+					method: "GET",
+					path: "providers",
+					respond: () => jsonResponse({ providers: [] }),
+				},
 			],
 		});
 
@@ -251,12 +311,20 @@ describe("Signage dashboard", () => {
 	it("keeps a failed activation visible instead of pretending it succeeded", async () => {
 		const inactiveGroup = {
 			...GROUP,
-      playback: { ...GROUP.playback, activeTimelineId: null, currentSelectionId: null },
+			playback: {
+				...GROUP.playback,
+				activeTimelineId: null,
+				currentSelectionId: null,
+			},
 		};
 		const host = createFakeHost({
 			permissions: ["signage.view", "signage.playback.control"],
 			routes: [
-        { method: "GET", path: "settings", respond: () => jsonResponse(FAKE_SETTINGS) },
+				{
+					method: "GET",
+					path: "settings",
+					respond: () => jsonResponse(FAKE_SETTINGS),
+				},
 				{
 					method: "GET",
 					path: "channel-groups",
@@ -267,13 +335,25 @@ describe("Signage dashboard", () => {
 					path: "timelines",
 					respond: () => jsonResponse({ timelines: [TIMELINE] }),
 				},
-        { method: "GET", path: "playback/group-1", respond: () => jsonResponse(PLAYBACK_DETAIL) },
+				{
-        { method: "GET", path: "providers", respond: () => jsonResponse({ providers: [] }) },
+					method: "GET",
+					path: "playback/group-1",
+					respond: () => jsonResponse(PLAYBACK_DETAIL),
+				},
+				{
+					method: "GET",
+					path: "providers",
+					respond: () => jsonResponse({ providers: [] }),
+				},
 				{
 					method: "POST",
 					path: "playback/group-1/activate",
 					respond: () =>
-            errorResponse("SIGNAGE_CONFLICT", "The request conflicts with the current state.", 409),
+						errorResponse(
+							"SIGNAGE_CONFLICT",
+							"The request conflicts with the current state.",
+							409,
+						),
 				},
 			],
 		});
@@ -296,15 +376,40 @@ describe("Signage dashboard", () => {
 		const host = createFakeHost({
 			permissions: ["signage.view", "signage.timelines.manage"],
 			routes: [
-        { method: "GET", path: "settings", respond: () => jsonResponse(FAKE_SETTINGS) },
+				{
-        { method: "GET", path: "channel-groups", respond: () => jsonResponse({ groups: [GROUP] }) },
+					method: "GET",
-        { method: "GET", path: "timelines", respond: () => jsonResponse({ timelines: [] }) },
+					path: "settings",
-        { method: "GET", path: "playback/group-1", respond: () => jsonResponse(PLAYBACK_DETAIL) },
+					respond: () => jsonResponse(FAKE_SETTINGS),
-        { method: "GET", path: "providers", respond: () => jsonResponse({ providers: [] }) },
+				},
+				{
+					method: "GET",
+					path: "channel-groups",
+					respond: () => jsonResponse({ groups: [GROUP] }),
+				},
+				{
+					method: "GET",
+					path: "timelines",
+					respond: () => jsonResponse({ timelines: [] }),
+				},
+				{
+					method: "GET",
+					path: "playback/group-1",
+					respond: () => jsonResponse(PLAYBACK_DETAIL),
+				},
+				{
+					method: "GET",
+					path: "providers",
+					respond: () => jsonResponse({ providers: [] }),
+				},
 				{
 					method: "POST",
 					path: "timelines",
-          respond: () => errorResponse("SIGNAGE_INVALID_REQUEST", "The request is not valid.", 400),
+					respond: () =>
+						errorResponse(
+							"SIGNAGE_INVALID_REQUEST",
+							"The request is not valid.",
+							400,
+						),
 				},
 			],
 		});
@@ -316,7 +421,9 @@ describe("Signage dashboard", () => {
 			),
 		);
 
-    const input = container.querySelector("input[type='text']") as HTMLInputElement;
+		const input = container.querySelector(
+			"input[type='text']",
+		) as HTMLInputElement;
 		await type(input, "Sunday morning");
 		await click(buttonNamed("Create"));
 
@@ -330,10 +437,26 @@ describe("Signage dashboard", () => {
 		const host = createFakeHost({
 			permissions: ["signage.view", "signage.timelines.manage"],
 			routes: [
-        { method: "GET", path: "settings", respond: () => jsonResponse(FAKE_SETTINGS) },
+				{
-        { method: "GET", path: "channel-groups", respond: () => jsonResponse({ groups: [GROUP] }) },
+					method: "GET",
-        { method: "GET", path: "providers", respond: () => jsonResponse({ providers: [] }) },
+					path: "settings",
-        { method: "GET", path: "images", respond: () => jsonResponse({ images: [] }) },
+					respond: () => jsonResponse(FAKE_SETTINGS),
+				},
+				{
+					method: "GET",
+					path: "channel-groups",
+					respond: () => jsonResponse({ groups: [GROUP] }),
+				},
+				{
+					method: "GET",
+					path: "providers",
+					respond: () => jsonResponse({ providers: [] }),
+				},
+				{
+					method: "GET",
+					path: "images",
+					respond: () => jsonResponse({ images: [] }),
+				},
 				{
 					method: "GET",
 					path: "timelines",
@@ -381,7 +504,9 @@ describe("Signage dashboard", () => {
 		);
 		await click(buttonNamed("Sunday morning"));
 
-    expect(container.querySelector("[data-testid='signage-timeline-editor']")).not.toBeNull();
+		expect(
+			container.querySelector("[data-testid='signage-timeline-editor']"),
+		).not.toBeNull();
 		expect(container.textContent).toContain("This timeline has no slots");
 	});
 
@@ -392,10 +517,26 @@ describe("Signage dashboard", () => {
 			contributions: [],
 			permissions: ["signage.view"],
 			routes: [
-        { method: "GET", path: "settings", respond: () => jsonResponse(FAKE_SETTINGS) },
+				{
-        { method: "GET", path: "channel-groups", respond: () => jsonResponse({ groups: [GROUP] }) },
+					method: "GET",
-        { method: "GET", path: "timelines", respond: () => jsonResponse({ timelines: [] }) },
+					path: "settings",
-        { method: "GET", path: "playback/group-1", respond: () => jsonResponse(PLAYBACK_DETAIL) },
+					respond: () => jsonResponse(FAKE_SETTINGS),
+				},
+				{
+					method: "GET",
+					path: "channel-groups",
+					respond: () => jsonResponse({ groups: [GROUP] }),
+				},
+				{
+					method: "GET",
+					path: "timelines",
+					respond: () => jsonResponse({ timelines: [] }),
+				},
+				{
+					method: "GET",
+					path: "playback/group-1",
+					respond: () => jsonResponse(PLAYBACK_DETAIL),
+				},
 				{
 					method: "GET",
 					path: "providers",
@@ -438,11 +579,31 @@ describe("Signage dashboard", () => {
 		const host = createFakeHost({
 			permissions: ["signage.view"],
 			routes: [
-        { method: "GET", path: "settings", respond: () => jsonResponse(FAKE_SETTINGS) },
+				{
-        { method: "GET", path: "channel-groups", respond: () => jsonResponse({ groups: [GROUP] }) },
+					method: "GET",
-        { method: "GET", path: "timelines", respond: () => jsonResponse({ timelines: [] }) },
+					path: "settings",
-        { method: "GET", path: "playback/group-1", respond: () => jsonResponse(PLAYBACK_DETAIL) },
+					respond: () => jsonResponse(FAKE_SETTINGS),
-        { method: "GET", path: "providers", respond: () => jsonResponse({ providers: [] }) },
+				},
+				{
+					method: "GET",
+					path: "channel-groups",
+					respond: () => jsonResponse({ groups: [GROUP] }),
+				},
+				{
+					method: "GET",
+					path: "timelines",
+					respond: () => jsonResponse({ timelines: [] }),
+				},
+				{
+					method: "GET",
+					path: "playback/group-1",
+					respond: () => jsonResponse(PLAYBACK_DETAIL),
+				},
+				{
+					method: "GET",
+					path: "providers",
+					respond: () => jsonResponse({ providers: [] }),
+				},
 			],
 		});
 
@@ -454,17 +615,35 @@ describe("Signage dashboard", () => {
 		);
 
 		expect(container.textContent).toContain("No content providers registered");
-    expect(container.textContent).toContain("Signage works on its own with native images");
+		expect(container.textContent).toContain(
+			"Signage works on its own with native images",
+		);
 	});
 
 	it("shows the display roster with online state and offline readiness", async () => {
 		const host = createFakeHost({
 			permissions: ["signage.view", "signage.displays.manage"],
 			routes: [
-        { method: "GET", path: "settings", respond: () => jsonResponse(FAKE_SETTINGS) },
+				{
-        { method: "GET", path: "channel-groups", respond: () => jsonResponse({ groups: [GROUP] }) },
+					method: "GET",
-        { method: "GET", path: "timelines", respond: () => jsonResponse({ timelines: [] }) },
+					path: "settings",
-        { method: "GET", path: "playback/group-1", respond: () => jsonResponse(PLAYBACK_DETAIL) },
+					respond: () => jsonResponse(FAKE_SETTINGS),
+				},
+				{
+					method: "GET",
+					path: "channel-groups",
+					respond: () => jsonResponse({ groups: [GROUP] }),
+				},
+				{
+					method: "GET",
+					path: "timelines",
+					respond: () => jsonResponse({ timelines: [] }),
+				},
+				{
+					method: "GET",
+					path: "playback/group-1",
+					respond: () => jsonResponse(PLAYBACK_DETAIL),
+				},
 				{
 					method: "GET",
 					path: "viewers",
@@ -476,7 +655,11 @@ describe("Signage dashboard", () => {
 									channelId: "chan-1",
 									deviceId: null,
 									id: "viewer-1",
-                  lastError: { atMs: Date.now(), code: "SLIDE_DECODE_FAILED", detail: null },
+									lastError: {
+										atMs: Date.now(),
+										code: "SLIDE_DECODE_FAILED",
+										detail: null,
+									},
 									lastSeenAtMs: Date.now() - 4000,
 									name: "Lobby north",
 									offlineReady: true,
@@ -494,13 +677,19 @@ describe("Signage dashboard", () => {
 
 		await render(dashboard(host.context));
 		await click(
-      [...container.querySelectorAll("[role='tab']")].find((tab) => tab.textContent === "Displays"),
+			[...container.querySelectorAll("[role='tab']")].find(
+				(tab) => tab.textContent === "Displays",
+			),
 		);
 
 		expect(container.textContent).toContain("Online");
 		expect(container.textContent).toContain("12 cached");
-    const display = container.querySelector("[data-testid='signage-display-viewer-1']");
+		const display = container.querySelector(
-    expect(display?.closest(".signage-channel")?.textContent).toContain("Default");
+			"[data-testid='signage-display-viewer-1']",
+		);
+		expect(display?.closest(".signage-channel")?.textContent).toContain(
+			"Default",
+		);
 		// A sanitized code, never a stack or a message a browser happened to have.
 		expect(container.textContent).toContain("SLIDE_DECODE_FAILED");
 	});
@@ -508,7 +697,9 @@ describe("Signage dashboard", () => {
 	it("explains display registration and deletes a channel group only after confirmation", async () => {
 		const secondGroup = {
 			...GROUP,
-      channels: [{ id: "chan-2", isDefault: true, key: "default", name: "Default" }],
+			channels: [
+				{ id: "chan-2", isDefault: true, key: "default", name: "Default" },
+			],
 			id: "group-2",
 			name: "Foyer",
 			playback: { ...GROUP.playback, groupId: "group-2" },
@@ -518,15 +709,31 @@ describe("Signage dashboard", () => {
 		const host = createFakeHost({
 			permissions: ["signage.view", "signage.displays.manage"],
 			routes: [
-        { method: "GET", path: "settings", respond: () => jsonResponse(FAKE_SETTINGS) },
+				{
+					method: "GET",
+					path: "settings",
+					respond: () => jsonResponse(FAKE_SETTINGS),
+				},
 				{
 					method: "GET",
 					path: "channel-groups",
 					respond: () => jsonResponse({ groups: currentGroups }),
 				},
-        { method: "GET", path: "timelines", respond: () => jsonResponse({ timelines: [] }) },
+				{
-        { method: "GET", path: "playback/group-1", respond: () => jsonResponse(PLAYBACK_DETAIL) },
+					method: "GET",
-        { method: "GET", path: "viewers", respond: () => jsonResponse({ viewers: [] }) },
+					path: "timelines",
+					respond: () => jsonResponse({ timelines: [] }),
+				},
+				{
+					method: "GET",
+					path: "playback/group-1",
+					respond: () => jsonResponse(PLAYBACK_DETAIL),
+				},
+				{
+					method: "GET",
+					path: "viewers",
+					respond: () => jsonResponse({ viewers: [] }),
+				},
 				{
 					method: "DELETE",
 					path: "channel-groups/group-1",
@@ -559,7 +766,9 @@ describe("Signage dashboard", () => {
 		expect(container.textContent).toContain("Audience channels");
 		expect(container.textContent).toContain("Channel name");
 		expect(container.textContent).toContain("Audience key");
-    expect(container.textContent).toContain("Advanced: lowercase ID sent to content providers");
+		expect(container.textContent).toContain(
+			"Advanced: lowercase ID sent to content providers",
+		);
 		await click(buttonNamed("Delete group"));
 		expect(deleted).toEqual([]);
 		expect(container.textContent).toContain("Displays assigned here will move");
@@ -572,11 +781,31 @@ describe("Signage dashboard", () => {
 		const host = createFakeHost({
 			permissions: ["signage.view", "signage.assets.manage"],
 			routes: [
-        { method: "GET", path: "settings", respond: () => jsonResponse(FAKE_SETTINGS) },
+				{
-        { method: "GET", path: "channel-groups", respond: () => jsonResponse({ groups: [GROUP] }) },
+					method: "GET",
-        { method: "GET", path: "timelines", respond: () => jsonResponse({ timelines: [] }) },
+					path: "settings",
-        { method: "GET", path: "playback/group-1", respond: () => jsonResponse(PLAYBACK_DETAIL) },
+					respond: () => jsonResponse(FAKE_SETTINGS),
-        { method: "GET", path: "images", respond: () => jsonResponse({ images: [] }) },
+				},
+				{
+					method: "GET",
+					path: "channel-groups",
+					respond: () => jsonResponse({ groups: [GROUP] }),
+				},
+				{
+					method: "GET",
+					path: "timelines",
+					respond: () => jsonResponse({ timelines: [] }),
+				},
+				{
+					method: "GET",
+					path: "playback/group-1",
+					respond: () => jsonResponse(PLAYBACK_DETAIL),
+				},
+				{
+					method: "GET",
+					path: "images",
+					respond: () => jsonResponse({ images: [] }),
+				},
 				{
 					method: "POST",
 					path: /^images\?/u,
@@ -596,7 +825,9 @@ describe("Signage dashboard", () => {
 
 		await render(dashboard(host.context));
 		await click(
-      [...container.querySelectorAll("[role='tab']")].find((tab) => tab.textContent === "Images"),
+			[...container.querySelectorAll("[role='tab']")].find(
+				(tab) => tab.textContent === "Images",
+			),
 		);
 
 		const input = container.querySelector(
@@ -626,21 +857,39 @@ describe("Signage dashboard", () => {
 		const uploads = container.querySelector("[data-testid='signage-uploads']");
 		expect(uploads?.textContent).toContain("done");
 		expect(uploads?.textContent).toContain("failed");
-    expect(uploads?.textContent).toContain("The uploaded file is not a decodable image.");
+		expect(uploads?.textContent).toContain(
+			"The uploaded file is not a decodable image.",
+		);
 	});
 
 	it("stays on screen when one panel's data cannot be loaded", async () => {
 		const host = createFakeHost({
 			permissions: ["signage.view"],
 			routes: [
-        { method: "GET", path: "settings", respond: () => jsonResponse(FAKE_SETTINGS) },
+				{
-        { method: "GET", path: "channel-groups", respond: () => jsonResponse({ groups: [GROUP] }) },
+					method: "GET",
-        { method: "GET", path: "timelines", respond: () => jsonResponse({ timelines: [] }) },
+					path: "settings",
+					respond: () => jsonResponse(FAKE_SETTINGS),
+				},
+				{
+					method: "GET",
+					path: "channel-groups",
+					respond: () => jsonResponse({ groups: [GROUP] }),
+				},
+				{
+					method: "GET",
+					path: "timelines",
+					respond: () => jsonResponse({ timelines: [] }),
+				},
 				{
 					method: "GET",
 					path: "playback/group-1",
 					respond: () =>
-            errorResponse("SIGNAGE_OPERATION_FAILED", "The operation could not be completed.", 500),
+						errorResponse(
+							"SIGNAGE_OPERATION_FAILED",
+							"The operation could not be completed.",
+							500,
+						),
 				},
 			],
 		});
@@ -648,7 +897,9 @@ describe("Signage dashboard", () => {
 		await render(dashboard(host.context));
 
 		expect(container.textContent).toContain("Signage could not load this");
-    expect(container.textContent).toContain("The operation could not be completed.");
+		expect(container.textContent).toContain(
+			"The operation could not be completed.",
+		);
 		// The rest of the dashboard is still usable: one failing panel is not a failed screen.
 		expect(container.querySelectorAll("[role='tab']").length).toBe(5);
 	});

tests/browser/support/fake-host.ts

@@ -37,7 +37,11 @@ export function jsonResponse(body: unknown, status = 200): Response {
 	});
 }
 
-export function errorResponse(code: string, message: string, status = 400): Response {
+export function errorResponse(
+	code: string,
+	message: string,
+	status = 400,
+): Response {
 	return jsonResponse({ code, message }, status);
 }
 
@@ -45,6 +49,7 @@ 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,
@@ -69,15 +74,24 @@ export function createFakeHost(options: FakeHostOptions): FakeHost {
 					return route.respond({ init, path: normalized });
 				}
 			}
-      return errorResponse("SIGNAGE_NOT_FOUND", "The requested resource was not found.", 404);
+			return errorResponse(
+				"SIGNAGE_NOT_FOUND",
+				"The requested resource was not found.",
+				404,
+			);
 		},
 	};
 
 	const contributions: ModuleUiContributions = {
 		list: (capabilityId) =>
-      capabilityId === "signage.slide-renderer" ? (options.contributions ?? []) : [],
+			capabilityId === "signage.slide-renderer"
+				? (options.contributions ?? [])
+				: [],
 		async mount(mountOptions) {
-      mounted.push({ contributionId: mountOptions.contributionId, input: mountOptions.input });
+			mounted.push({
+				contributionId: mountOptions.contributionId,
+				input: mountOptions.input,
+			});
 			if (options.mount) {
 				return options.mount(mountOptions);
 			}
@@ -95,8 +109,13 @@ export function createFakeHost(options: FakeHostOptions): FakeHost {
 		context: {
 			api,
 			contributions,
+			display: {
+				url: options.displayUrl ?? "https://api.example.test/display/signage",
+			},
 			moduleId: "signage",
-      permissions: { has: (permission) => options.permissions.includes(permission) },
+			permissions: {
+				has: (permission) => options.permissions.includes(permission),
+			},
 			principal: options.principal ?? { kind: "anonymous" },
 			realtime: { subscribe: () => ({ close: () => undefined }) },
 		},
@@ -118,5 +137,10 @@ export const FAKE_SETTINGS = Object.freeze({
 	},
 	rendererInputVersion: "1.0.0",
 	timezone: "America/Chicago",
-  uploads: { batchMaxFiles: 20, concurrency: 3, maxBytes: 26_214_400, maxPixels: 40_000_000 },
+	uploads: {
+		batchMaxFiles: 20,
+		concurrency: 3,
+		maxBytes: 26_214_400,
+		maxPixels: 40_000_000,
+	},
 });