Merge pull request 'feat: align Signage with platform display and design' (#3) from fix/signage-playback-and-displays into main

Reviewed-on: http://git.riverofglorymn.org/River_of_Glory_Church/Ekklesia_Signage/pulls/3

README.md

@@ -16,7 +16,7 @@ Ekklesia and vendors none of its SDKs.
 
 ## Status
 
-Version 0.1.0 is feature-complete for its declared scope and unreleased. What exists today:
+Version 0.1.1 is feature-complete for its declared scope and unreleased. What exists today:
 
 - The module package, manifest (v7), four capabilities, six permissions, ten operator settings, and
   one logical storage bucket.

ekklesia.module.json

@@ -3,7 +3,7 @@
   "id": "signage",
   "name": "Signage",
   "description": "Visual programming, timelines, synchronized channels, and display delivery for church screens.",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "compatibility": {
     "platform": "^0.1.0",
     "moduleSdk": "^0.1.0"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ekklesia/signage",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": true,
   "type": "module",
   "description": "Ekklesia's visual programming, timeline, synchronization, and display-delivery module.",

src/display/index.tsx

@@ -59,7 +59,7 @@ function SignageDisplay({ context }: { readonly context: ModuleUiHostContext }):
  */
 export default defineModuleUi({
   id: "signage",
-  version: "0.1.0",
+  version: "0.1.1",
   styles: displayStyles,
   mount(container, context) {
     const root = createRoot(container);

src/server/runtime.ts

@@ -126,7 +126,7 @@ export function createSignageModuleRuntime(
 
   const definition = defineModuleRuntime({
     id: "signage",
-    version: "0.1.0",
+    version: "0.1.1",
 
     register({ capabilities, config, http, realtime }) {
       const settings = readSignageSettings(config);
@@ -188,7 +188,7 @@ export function createSignageModuleRuntime(
           // server enforces — a UI believing a stale limit would offer an upload the server refuses.
           return Response.json({
             crossfadeMs: current.crossfadeMs,
-            moduleVersion: "0.1.0",
+            moduleVersion: "0.1.1",
             nativeImageDurationMs: current.nativeImageDurationMs,
             nativePresentation: current.nativePresentation,
             rendererInputVersion: SIGNAGE_SLIDE_RENDERER_INPUT_VERSION,

src/server/store/drizzle-timelines.ts

@@ -112,20 +112,21 @@ export function createTimelineStore(database: ModuleDatabase): SignageTimelineSt
   /**
    * Rewrites `position` for one timeline from an explicit order.
    *
-   * Positions are written in two passes, through a temporary negative range, because the unique
+   * Positions are written in two passes, through a temporary high range, because the unique
    * `(timeline_id, position)` index is checked per statement: moving a slot from 3 to 1 while
-   * another still holds 1 would collide. Negative positions are outside every real value, so the
-   * intermediate state cannot be mistaken for an order.
+   * another still holds 1 would collide. Temporary positions sit beyond the final order while
+   * remaining inside the database's non-negative constraint.
    */
   async function renumber(
     transaction: ModuleDatabase,
     timelineId: string,
     orderedSlotIds: readonly string[],
   ): Promise<void> {
+    const temporaryOffset = orderedSlotIds.length + 1;
     for (const [index, slotId] of orderedSlotIds.entries()) {
       await transaction
         .update(timelineSlots)
-        .set({ position: -1 - index })
+        .set({ position: temporaryOffset + index })
         .where(eq(timelineSlots.id, slotId));
     }
     for (const [index, slotId] of orderedSlotIds.entries()) {
@@ -175,7 +176,7 @@ export function createTimelineStore(database: ModuleDatabase): SignageTimelineSt
           position === undefined
             ? existing.length
             : Math.max(0, Math.min(position, existing.length));
-        await transaction.insert(timelineSlots).values(slotValues(slot, -1_000_000));
+        await transaction.insert(timelineSlots).values(slotValues(slot, existing.length + 1));
         const next = [...existing.slice(0, index), slot.id, ...existing.slice(index)];
         await renumber(transaction, slot.timelineId, next);
       });

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";
@@ -23,138 +23,174 @@ import type { ChannelGroupView, SettingsResponse } from "./types.js";
  * hidden button is a courtesy, and every route is enforced regardless of what this believes.
  */
 export function SignageDashboard({
-  context,
+	context,
+	copyText,
 }: {
-  readonly context: ModuleUiHostContext;
+	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);
+	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);
 
-  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 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");
 
-  if (!mayView) {
-    return (
-      <EmptyState
-        description="Ask an administrator for the signage.view permission."
-        title="No access to Signage"
-      />
-    );
-  }
+	if (!mayView) {
+		return (
+			<EmptyState
+				description="Ask an administrator for the signage.view permission."
+				title="No access to Signage"
+			/>
+		);
+	}
 
-  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;
+	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>
-        {renderLoadable(
-          settings.state,
-          (loaded) =>
-            loaded === undefined ? undefined : (
-              <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}
-                        onGroupsChanged={() => {
-                          setGroupId(undefined);
-                          groups.reload();
-                        }}
-                      />
-                    ),
-                    id: "displays",
-                    label: "Displays",
-                  },
-                  {
-                    content: <ProvidersPanel api={api} context={context} settings={loaded} />,
-                    id: "providers",
-                    label: "Providers",
-                  },
-                ]}
-              />
-            ),
-          { label: "Loading Signage…", onRetry: settings.reload },
-        )}
-      </DesktopOnly>
-    </>
-  );
+	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>
+		</>
+	);
 }

src/ui/index.tsx

@@ -14,12 +14,24 @@ import ownStyles from "./styles.css";
  * rather than bundled (ADR 0039).
  */
 export default defineModuleUi({
-  id: "signage",
-  version: "0.1.0",
-  styles: `${EKKLESIA_UI_STYLESHEET}\n${ownStyles}`,
-  mount(container, context) {
-    const root = createRoot(container);
-    root.render(<SignageDashboard context={context} />);
-    return () => root.unmount();
-  },
+	id: "signage",
+	version: "0.1.1",
+	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/DisplaysPanel.tsx

@@ -1,352 +1,562 @@
 import {
-  Badge,
-  Button,
-  EmptyState,
-  Field,
-  Panel,
-  Select,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableRow,
-  TextInput,
+	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;
 
+function DisplayRow({
+	canManage,
+	groups,
+	nowMs,
+	onChannelChange,
+	onNameChange,
+	viewer,
+}: {
+	readonly canManage: boolean;
+	readonly groups: readonly ChannelGroupView[];
+	readonly nowMs: number;
+	readonly onChannelChange: (channelId: string) => void;
+	readonly onNameChange: (name: string) => void;
+	readonly viewer: ViewerHealthView;
+}): ReactElement {
+	return (
+		<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)
+						}
+					/>
+				) : (
+					<strong>{viewer.name}</strong>
+				)}
+				<OnlineBadge online={viewer.online} />
+			</div>
+			<div className="signage-display-row__assignment">
+				{canManage ? (
+					<Field label="Audience channel">
+						{(control) => (
+							<Select
+								{...control}
+								aria-label={`Channel for ${viewer.name}`}
+								onChange={(event) => onChannelChange(event.target.value)}
+								value={viewer.channelId ?? ""}
+							>
+								{groups.map((group) => (
+									<optgroup key={group.id} label={group.name}>
+										{group.channels.map((channel) => (
+											<option key={channel.id} value={channel.id}>
+												{channel.name}
+											</option>
+										))}
+									</optgroup>
+								))}
+							</Select>
+						)}
+					</Field>
+				) : undefined}
+			</div>
+			<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"}
+				</Badge>
+				{viewer.lastError === null ? undefined : (
+					<span
+						className="signage-display-row__error"
+						title={viewer.lastError.detail ?? undefined}
+					>
+						{viewer.lastError.code}
+					</span>
+				)}
+			</div>
+		</div>
+	);
+}
+
 /**
- * Channel groups, audience channels, and the display roster.
- *
- * A church starts with one group and one default channel. `in-person` and `online` are created here,
- * when someone actually needs them — not shipped as rows nobody asked for and everybody has to
- * understand and ignore (ADR 0004).
+ * Channel groups, audience channels, and displays, presented in the same hierarchy they use at run
+ * time: one group clock, one audience variant per channel, then the screens assigned to it.
  */
 export function DisplaysPanel({
-  api,
-  canManage,
-  onGroupsChanged,
+	api,
+	canManage,
+	copyText,
+	displaySetupUrl,
+	onGroupsChanged,
 }: {
-  readonly api: SignageApi;
-  readonly canManage: boolean;
-  readonly onGroupsChanged?: () => void;
+	readonly api: SignageApi;
+	readonly canManage: boolean;
+	readonly copyText: (value: string) => Promise<void>;
+	readonly displaySetupUrl: string | undefined;
+	readonly onGroupsChanged?: () => void;
 }): ReactElement {
-  const groups = useResource(
-    () => api.get<{ groups: readonly ChannelGroupView[] }>("channel-groups"),
-    [],
-  );
-  const viewers = useResource(
-    () => api.get<{ viewers: readonly ViewerHealthView[] }>("viewers"),
-    [],
-  );
-  const edit = useAction(() => {
-    groups.reload();
-    viewers.reload();
-    onGroupsChanged?.();
-  });
-  const viewerEdit = useAction(viewers.reload);
-  const [groupName, setGroupName] = useState("");
-  const [confirmGroupId, setConfirmGroupId] = useState<string | undefined>(undefined);
-  const [channelDraft, setChannelDraft] = useState<{ groupId: string; key: string; name: string }>({
-    groupId: "",
-    key: "",
-    name: "",
-  });
-  // "Last seen" is a moving number: without a tick it would freeze at whatever it said when the
-  // roster loaded, and an operator would read a screen that went dark ten minutes ago as current.
-  useTick(5000);
-  const nowMs = Date.now();
+	const groups = useResource(
+		() => api.get<{ groups: readonly ChannelGroupView[] }>("channel-groups"),
+		[],
+	);
+	const viewers = useResource(
+		() => api.get<{ viewers: readonly ViewerHealthView[] }>("viewers"),
+		[],
+	);
+	const edit = useAction(() => {
+		groups.reload();
+		viewers.reload();
+		onGroupsChanged?.();
+	});
+	const viewerEdit = useAction(viewers.reload);
+	const [groupName, setGroupName] = useState("");
+	const [copyStatus, setCopyStatus] = useState<"copied" | "failed" | "idle">(
+		"idle",
+	);
+	const [confirmGroupId, setConfirmGroupId] = useState<string | undefined>(
+		undefined,
+	);
+	const [channelDraft, setChannelDraft] = useState<{
+		groupId: string;
+		key: string;
+		name: string;
+	}>({
+		groupId: "",
+		key: "",
+		name: "",
+	});
+	useTick(5000);
+	const nowMs = Date.now();
+	const readyViewers =
+		viewers.state.status === "ready" ? viewers.state.value.viewers : [];
 
-  const channels =
-    groups.state.status === "ready"
-      ? groups.state.value.groups.flatMap((group) =>
-          group.channels.map((channel) => ({ ...channel, groupName: group.name })),
-        )
-      : [];
+	const updateViewer = (
+		viewerId: string,
+		changes: Record<string, string>,
+	): void => {
+		viewerEdit.run(() => api.send("PATCH", `viewers/${viewerId}`, changes));
+	};
 
-  return (
-    <div className="signage-columns">
-      <Panel
-        actions={
-          canManage ? (
-            <div className="signage-inline-form">
-              <Field label="New channel group">
-                {(control) => (
-                  <TextInput
-                    {...control}
-                    onChange={(event) => setGroupName(event.target.value)}
-                    placeholder="Nursery hallway"
-                    value={groupName}
-                  />
-                )}
-              </Field>
-              <Button
-                disabled={edit.pending || groupName.trim().length === 0}
-                onClick={() =>
-                  edit.run(async () => {
-                    await api.send("POST", "channel-groups", { name: groupName.trim() });
-                    setGroupName("");
-                  })
-                }
-                variant="primary"
-              >
-                Create
-              </Button>
-            </div>
-          ) : undefined
-        }
-        description="A group is one clock. An audience channel is one rendering of it."
-        title="Channel groups"
-      >
-        {renderLoadable(
-          groups.state,
-          (value) => (
-            <div className="signage-groups" data-testid="signage-groups">
-              {value.groups.map((group) => (
-                <div className="signage-group" key={group.id}>
-                  <div className="signage-group__header">
-                    <h4 className="signage-editor__subtitle">{group.name}</h4>
-                    <Badge tone="info">{group.playback.transport}</Badge>
-                    {canManage && value.groups.length > 1 ? (
-                      <Button
-                        disabled={edit.pending}
-                        onClick={() => setConfirmGroupId(group.id)}
-                        variant="danger"
-                      >
-                        Delete group
-                      </Button>
-                    ) : canManage ? (
-                      <Badge tone="neutral">At least one group required</Badge>
-                    ) : undefined}
-                  </div>
-                  {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 the default channel of another group.
-                      </p>
-                      <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}`);
-                            setConfirmGroupId(undefined);
-                          })
-                        }
-                        variant="danger"
-                      >
-                        Confirm delete
-                      </Button>
-                    </div>
-                  ) : undefined}
-                  <ul className="ek-list">
-                    {group.channels.map((channel) => (
-                      <li className="ek-list__item signage-row" key={channel.id}>
-                        <span className="signage-row__name">{channel.name}</span>
-                        <Badge tone={channel.isDefault ? "success" : "neutral"}>
-                          {channel.key}
-                        </Badge>
-                        {canManage && !channel.isDefault ? (
-                          <Button
-                            disabled={edit.pending}
-                            onClick={() =>
-                              edit.run(() => api.send("DELETE", `channels/${channel.id}`))
-                            }
-                            variant="danger"
-                          >
-                            Remove
-                          </Button>
-                        ) : undefined}
-                      </li>
-                    ))}
-                  </ul>
-                  {canManage ? (
-                    <div className="signage-inline-form" data-testid="signage-add-channel">
-                      <Field
-                        hint="Stable lowercase ID sent to content providers for audience-specific variants, e.g. online."
-                        label="Provider audience key"
-                      >
-                        {(control) => (
-                          <TextInput
-                            {...control}
-                            maxLength={64}
-                            onChange={(event) =>
-                              setChannelDraft((current) => ({
-                                groupId: group.id,
-                                key: event.target.value,
-                                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 : ""}
-                          />
-                        )}
-                      </Field>
-                      <Field
-                        hint="Friendly label shown to administrators and used when assigning displays."
-                        label="Dashboard channel name"
-                      >
-                        {(control) => (
-                          <TextInput
-                            {...control}
-                            maxLength={120}
-                            onChange={(event) =>
-                              setChannelDraft((current) => ({
-                                groupId: group.id,
-                                key: current.groupId === group.id ? current.key : "",
-                                name: event.target.value,
-                              }))
-                            }
-                            placeholder="Online audience"
-                            value={channelDraft.groupId === group.id ? channelDraft.name : ""}
-                          />
-                        )}
-                      </Field>
-                      <Button
-                        disabled={
-                          edit.pending ||
-                          channelDraft.groupId !== group.id ||
-                          !AUDIENCE_KEY.test(channelDraft.key.trim()) ||
-                          channelDraft.key.trim() === "default" ||
-                          channelDraft.name.trim() === ""
-                        }
-                        onClick={() =>
-                          edit.run(async () => {
-                            await api.send("POST", `channel-groups/${group.id}/channels`, {
-                              key: channelDraft.key.trim(),
-                              name: channelDraft.name.trim(),
-                            });
-                            setChannelDraft({ groupId: "", key: "", name: "" });
-                          })
-                        }
-                      >
-                        Add audience channel
-                      </Button>
-                    </div>
-                  ) : undefined}
-                </div>
-              ))}
-            </div>
-          ),
-          { label: "Loading channel groups…", onRetry: groups.reload },
-        )}
-      </Panel>
+	return (
+		<div className="signage-columns">
+			<Panel
+				actions={
+					displaySetupUrl === undefined ? undefined : (
+						<div className="signage-pairing-actions">
+							<a
+								className="ek-button ek-focusable ek-button--primary"
+								href={displaySetupUrl}
+								rel="noopener noreferrer"
+								target="_blank"
+							>
+								Open display setup
+							</a>
+							<Button
+								onClick={() => {
+									setCopyStatus("idle");
+									void copyText(displaySetupUrl).then(
+										() => setCopyStatus("copied"),
+										() => setCopyStatus("failed"),
+									);
+								}}
+							>
+								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"
+				>
+					<li>
+						<span className="signage-pairing-steps__number">1</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>
+					</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."
+						: copyStatus === "failed"
+							? "Could not copy the URL. Copy it from the newly opened setup page."
+							: ""}
+				</span>
+				{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>
+					</div>
+				) : undefined}
+			</Panel>
 
-      <Panel
-        description="Pair a screen through Ekklesia, then name it and choose which audience channel it shows."
-        title="Displays"
-      >
-        {canManage ? (
-          <div className="signage-registration-guide">
-            <h4 className="signage-editor__subtitle">Register a display</h4>
-            <ol>
-              <li>Open the Ekklesia path /display/signage on the screen.</li>
-              <li>Enter its six-digit code under Display devices in the Dashboard sidebar.</li>
-              <li>When it appears below, give it a clear name and assign its channel.</li>
-            </ol>
-          </div>
-        ) : undefined}
-        {renderLoadable(
-          viewers.state,
-          (value) =>
-            value.viewers.length === 0 ? (
-              <EmptyState
-                description="Open /display/signage on the screen, approve its code under Display devices, and it will appear here automatically."
-                title="No displays yet"
-              />
-            ) : (
-              <Table label="Display health">
-                <TableHead>
-                  <TableRow>
-                    <TableCell header>Name</TableCell>
-                    <TableCell header>State</TableCell>
-                    <TableCell header>Channel</TableCell>
-                    <TableCell header>Last seen</TableCell>
-                    <TableCell header>Offline ready</TableCell>
-                    <TableCell header>Most recent error</TableCell>
-                  </TableRow>
-                </TableHead>
-                <TableBody>
-                  {value.viewers.map((viewer) => (
-                    <TableRow key={viewer.id}>
-                      <TableCell>
-                        {canManage ? (
-                          <TextInput
-                            aria-label={`Name for ${viewer.name}`}
-                            defaultValue={viewer.name}
-                            onBlur={(event) =>
-                              event.target.value !== viewer.name &&
-                              viewerEdit.run(() =>
-                                api.send("PATCH", `viewers/${viewer.id}`, {
-                                  name: event.target.value,
-                                }),
-                              )
-                            }
-                          />
-                        ) : (
-                          viewer.name
-                        )}
-                      </TableCell>
-                      <TableCell>
-                        <OnlineBadge online={viewer.online} />
-                      </TableCell>
-                      <TableCell>
-                        {canManage ? (
-                          <Select
-                            aria-label={`Channel for ${viewer.name}`}
-                            onChange={(event) =>
-                              viewerEdit.run(() =>
-                                api.send("PATCH", `viewers/${viewer.id}`, {
-                                  channelId: event.target.value,
-                                }),
-                              )
-                            }
-                            value={viewer.channelId ?? ""}
-                          >
-                            {channels.map((channel) => (
-                              <option key={channel.id} value={channel.id}>
-                                {`${channel.groupName} · ${channel.name}`}
-                              </option>
-                            ))}
-                          </Select>
-                        ) : (
-                          (channels.find((channel) => channel.id === viewer.channelId)?.name ?? "—")
-                        )}
-                      </TableCell>
-                      <TableCell>{formatSince(viewer.lastSeenAtMs, nowMs)}</TableCell>
-                      <TableCell>
-                        <Badge tone={viewer.offlineReady ? "success" : "neutral"}>
-                          {viewer.offlineReady ? `${viewer.cachedAssetCount} cached` : "Not ready"}
-                        </Badge>
-                      </TableCell>
-                      <TableCell>
-                        {viewer.lastError === null ? (
-                          "—"
-                        ) : (
-                          <span title={viewer.lastError.detail ?? undefined}>
-                            {viewer.lastError.code}
-                          </span>
-                        )}
-                      </TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-            ),
-          { label: "Loading displays…", onRetry: viewers.reload },
-        )}
-        <FailureNote failure={edit.failure} />
-        <FailureNote failure={viewerEdit.failure} />
-      </Panel>
-    </div>
-  );
+			<Panel
+				actions={
+					canManage ? (
+						<div className="signage-inline-form signage-new-group">
+							<Field label="New channel group">
+								{(control) => (
+									<TextInput
+										{...control}
+										onChange={(event) => setGroupName(event.target.value)}
+										placeholder="Nursery hallway"
+										value={groupName}
+									/>
+								)}
+							</Field>
+							<Button
+								disabled={edit.pending || groupName.trim().length === 0}
+								onClick={() =>
+									edit.run(async () => {
+										await api.send("POST", "channel-groups", {
+											name: groupName.trim(),
+										});
+										setGroupName("");
+									})
+								}
+								variant="primary"
+							>
+								Create group
+							</Button>
+						</div>
+					) : undefined
+				}
+				description="A channel group shares one playback clock. Each audience channel can receive a different content variant."
+				title="Channel groups and displays"
+			>
+				{renderLoadable(
+					groups.state,
+					(value) => {
+						const knownChannelIds = new Set(
+							value.groups.flatMap((group) =>
+								group.channels.map((channel) => channel.id),
+							),
+						);
+						const unassigned = readyViewers.filter(
+							(viewer) =>
+								viewer.channelId === null ||
+								!knownChannelIds.has(viewer.channelId),
+						);
+						return (
+							<div className="signage-groups" data-testid="signage-groups">
+								{value.groups.map((group) => (
+									<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>
+												<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"
+												>
+													Delete group
+												</Button>
+											) : canManage ? (
+												<Badge tone="neutral">Required group</Badge>
+											) : undefined}
+										</header>
+										{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 the
+													default channel of another group.
+												</p>
+												<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}`,
+															);
+															setConfirmGroupId(undefined);
+														})
+													}
+													variant="danger"
+												>
+													Confirm delete
+												</Button>
+											</div>
+										) : undefined}
+
+										<section className="signage-audiences">
+											<div className="signage-audiences__heading">
+												<div>
+													<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>
+											</div>
+											<div className="signage-channel-list">
+												{group.channels.map((channel) => {
+													const assigned = readyViewers.filter(
+														(viewer) => viewer.channelId === channel.id,
+													);
+													return (
+														<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}
+																		<span>Audience key</span>
+																		<code>{channel.key}</code>
+																		<Badge tone="neutral">
+																			{`${assigned.length} display${assigned.length === 1 ? "" : "s"}`}
+																		</Badge>
+																	</div>
+																</div>
+																{canManage && !channel.isDefault ? (
+																	<Button
+																		disabled={edit.pending}
+																		onClick={() =>
+																			edit.run(() =>
+																				api.send(
+																					"DELETE",
+																					`channels/${channel.id}`,
+																				),
+																			)
+																		}
+																		variant="danger"
+																	>
+																		Remove channel
+																	</Button>
+																) : undefined}
+															</header>
+															<div className="signage-channel__displays">
+																<span className="signage-hierarchy-label">
+																	Displays
+																</span>
+																{assigned.length === 0 ? (
+																	<p className="signage-channel__empty">
+																		No displays assigned.
+																	</p>
+																) : (
+																	assigned.map((viewer) => (
+																		<DisplayRow
+																			canManage={canManage}
+																			groups={value.groups}
+																			key={viewer.id}
+																			nowMs={nowMs}
+																			onChannelChange={(channelId) =>
+																				updateViewer(viewer.id, { channelId })
+																			}
+																			onNameChange={(name) =>
+																				updateViewer(viewer.id, { name })
+																			}
+																			viewer={viewer}
+																		/>
+																	))
+																)}
+															</div>
+														</article>
+													);
+												})}
+											</div>
+
+											{canManage ? (
+												<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>
+													</div>
+													<Field
+														hint="Shown to administrators and when assigning displays."
+														label="Channel name"
+													>
+														{(control) => (
+															<TextInput
+																{...control}
+																maxLength={120}
+																onChange={(event) =>
+																	setChannelDraft((current) => ({
+																		groupId: group.id,
+																		key:
+																			current.groupId === group.id
+																				? current.key
+																				: "",
+																		name: event.target.value,
+																	}))
+																}
+																placeholder="Online audience"
+																value={
+																	channelDraft.groupId === group.id
+																		? channelDraft.name
+																		: ""
+																}
+															/>
+														)}
+													</Field>
+													<Field
+														hint="Advanced: lowercase ID sent to content providers, e.g. online."
+														label="Audience key"
+													>
+														{(control) => (
+															<TextInput
+																{...control}
+																maxLength={64}
+																onChange={(event) =>
+																	setChannelDraft((current) => ({
+																		groupId: group.id,
+																		key: event.target.value,
+																		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
+																		: ""
+																}
+															/>
+														)}
+													</Field>
+													<Button
+														disabled={
+															edit.pending ||
+															channelDraft.groupId !== group.id ||
+															!AUDIENCE_KEY.test(channelDraft.key.trim()) ||
+															channelDraft.key.trim() === "default" ||
+															channelDraft.name.trim() === ""
+														}
+														onClick={() =>
+															edit.run(async () => {
+																await api.send(
+																	"POST",
+																	`channel-groups/${group.id}/channels`,
+																	{
+																		key: channelDraft.key.trim(),
+																		name: channelDraft.name.trim(),
+																	},
+																);
+																setChannelDraft({
+																	groupId: "",
+																	key: "",
+																	name: "",
+																});
+															})
+														}
+														variant="primary"
+													>
+														Add channel
+													</Button>
+												</div>
+											) : undefined}
+										</section>
+									</article>
+								))}
+
+								{unassigned.length === 0 ? undefined : (
+									<section className="signage-unassigned">
+										<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 })
+												}
+												onNameChange={(name) =>
+													updateViewer(viewer.id, { name })
+												}
+												viewer={viewer}
+											/>
+										))}
+									</section>
+								)}
+							</div>
+						);
+					},
+					{ label: "Loading channel groups…", onRetry: groups.reload },
+				)}
+				{renderLoadable(viewers.state, () => null, {
+					label: "Loading displays…",
+					onRetry: viewers.reload,
+				})}
+				<FailureNote failure={edit.failure} />
+				<FailureNote failure={viewerEdit.failure} />
+			</Panel>
+		</div>
+	);
 }

src/ui/panels/PlaybackPanel.tsx

@@ -1,16 +1,29 @@
 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";
 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.
@@ -20,270 +33,325 @@ import { FailureNote, formatDuration, formatInstant, renderLoadable } from "./sh
  * 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"),
+		[],
+	);
+	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);
 
-  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">
-      <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"
-                    />
-                  ) : (
-                    <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>
-                  )}
+									{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 ? (
-                    <div className="signage-playback__controls" data-testid="signage-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>
-                    </div>
-                  ) : 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>
+	);
 }

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,86 +31,101 @@ 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"),
+		[],
+	);
+	const published = new Set(
+		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.`}
-      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="success">Signage renders this</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>
+	);
 }

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,108 +15,132 @@ 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 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,
-      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.0",
-  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.1",
+	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

@@ -0,0 +1,95 @@
+import type { ModuleDatabase } from "@ekklesia/module-sdk";
+import { describe, expect, it } from "vitest";
+import { createTimelineStore } from "../src/server/store/drizzle-timelines.js";
+import type { NewStoredSlot } from "../src/server/store/types.js";
+
+const TIMELINE_ID = "00000000-0000-4000-8000-000000000001";
+
+function slot(id: string): NewStoredSlot {
+  return {
+    durationOverrideMs: null,
+    eligibleFrom: null,
+    eligibleUntil: null,
+    enabled: true,
+    id,
+    itemId: "image-1",
+    kind: "pinned-item",
+    presentation: {
+      backgroundColor: null,
+      backgroundDarkened: null,
+      backgroundMode: null,
+      blurPixels: null,
+      foregroundShadow: null,
+    },
+    providerId: "signage.native-images",
+    sourceId: null,
+    timelineId: TIMELINE_ID,
+  };
+}
+
+/**
+ * A narrow database contract double for the production timeline store.
+ *
+ * Unlike the service-level memory store, it enforces the shipped PostgreSQL
+ * `signage_timeline_slots_position_check` on every insert and update. That is the boundary the
+ * deployed bug crossed: the old collision-avoidance algorithm used negative positions, so the
+ * actual database rejected a native-image slot before playback ever had content to resolve.
+ */
+function constraintDatabase(existing: readonly { id: string; position: number }[]): {
+  readonly database: ModuleDatabase;
+  readonly positions: number[];
+} {
+  const positions: number[] = [];
+  const enforce = (values: { position?: unknown }): void => {
+    if (typeof values.position === "number") {
+      expect(values.position).toBeGreaterThanOrEqual(0);
+      positions.push(values.position);
+    }
+  };
+  const transaction = {
+    insert: () => ({
+      values: async (values: { position?: unknown }) => enforce(values),
+    }),
+    select: () => ({
+      from: () => ({
+        where: () => ({
+          orderBy: async () => existing,
+        }),
+      }),
+    }),
+    update: () => ({
+      set: (values: { position?: unknown }) => ({
+        where: async () => enforce(values),
+      }),
+    }),
+  };
+  return {
+    database: {
+      transaction: async (operation: (value: typeof transaction) => Promise<unknown>) => operation(transaction),
+    } as unknown as ModuleDatabase,
+    positions,
+  };
+}
+
+describe("production timeline slot ordering", () => {
+  it("creates the first pinned native image without violating the database position constraint", async () => {
+    const { database, positions } = constraintDatabase([]);
+
+    await createTimelineStore(database).addSlot(slot("00000000-0000-4000-8000-000000000002"));
+
+    expect(positions).toEqual([1, 2, 0]);
+  });
+
+  it("reorders through a non-negative temporary range before writing the final order", async () => {
+    const first = "00000000-0000-4000-8000-000000000002";
+    const second = "00000000-0000-4000-8000-000000000003";
+    const { database, positions } = constraintDatabase([
+      { id: first, position: 0 },
+      { id: second, position: 1 },
+    ]);
+
+    await createTimelineStore(database).reorderSlots(TIMELINE_ID, [second, first]);
+
+    expect(positions).toEqual([3, 4, 0, 1]);
+  });
+});

tests/manifest.test.ts

@@ -66,7 +66,7 @@ describe("Signage module manifest", () => {
     expect(manifest.manifestVersion).toBe(7);
     expect(manifest.id).toBe("signage");
     expect(manifest.name).toBe("Signage");
-    expect(manifest.version).toBe("0.1.0");
+    expect(manifest.version).toBe("0.1.1");
     expect(manifest.compatibility).toEqual({ moduleSdk: "^0.1.0", platform: "^0.1.0" });
   });
 
@@ -142,7 +142,7 @@ describe("Signage module manifest", () => {
 
 describe("Signage server runtime", () => {
   it("exports the typed runtime definition the compiled server entrypoint publishes", async () => {
-    expect(moduleRuntime).toMatchObject({ id: "signage", version: "0.1.0" });
+    expect(moduleRuntime).toMatchObject({ id: "signage", version: "0.1.1" });
   });
 
   it("registers its routes declaratively, with no database, storage, or realtime work", async () => {
@@ -241,7 +241,7 @@ describe("Signage server runtime", () => {
     expect(response.status).toBe(200);
     expect(await response.json()).toEqual({
       crossfadeMs: 400,
-      moduleVersion: "0.1.0",
+      moduleVersion: "0.1.1",
       nativeImageDurationMs: 12_000,
       nativePresentation: SIGNAGE_DEFAULT_SETTINGS.nativePresentation,
       rendererInputVersion: "1.0.0",