fix: make timeline activation durable and visible

src/ui/SignageDashboard.tsx

@@ -62,6 +62,10 @@ export function SignageDashboard({
 
   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 (
     <>
@@ -93,18 +97,23 @@ export function SignageDashboard({
                   {
                     content: (
                       <TimelinesPanel
+                        {...(selectedGroup
+                          ? {
+                              activeGroupName: selectedGroup.name,
+                              activeTimelineId: selectedGroup.playback.activeTimelineId,
+                            }
+                          : {})}
                         api={api}
                         canManage={mayManageTimelines}
                         onActivate={
                           mayControl && selectedGroupId !== undefined
-                            ? (timelineId) => {
+                            ? async (timelineId) => {
-                                void api
+                                await api.send("POST", `playback/${selectedGroupId}/activate`, {
-                                  .send("POST", `playback/${selectedGroupId}/activate`, {
+                                  timelineId,
-                                    timelineId,
+                                  when: "now",
-                                    when: "now",
+                                });
-                                  })
+                                groups.reload();
-                                  .then(() => setTab("playback"))
+                                setTab("playback");
-                                  .catch(() => setTab("playback"));
                               }
                             : undefined
                         }

src/ui/panels/PlaybackPanel.tsx

@@ -70,6 +70,16 @@ export function PlaybackPanel({
     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
+    );
+  }
+
   return (
     <div className="signage-columns">
       <Panel
@@ -108,6 +118,11 @@ export function PlaybackPanel({
               ) : (
                 <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"

src/ui/panels/TimelinesPanel.tsx

@@ -42,11 +42,15 @@ export function TimelinesPanel({
   settings,
   canManage,
   onActivate,
+  activeTimelineId,
+  activeGroupName,
 }: {
   readonly api: SignageApi;
   readonly settings: SettingsResponse;
   readonly canManage: boolean;
-  readonly onActivate: ((timelineId: string) => void) | undefined;
+  readonly onActivate: ((timelineId: string) => Promise<void>) | undefined;
+  readonly activeTimelineId?: string | null;
+  readonly activeGroupName?: string;
 }): ReactElement {
   const timelines = useResource(
     () => api.get<{ timelines: readonly TimelineSummary[] }>("timelines"),
@@ -62,6 +66,7 @@ export function TimelinesPanel({
     setNewName("");
     timelines.reload();
   });
+  const activation = useAction();
 
   return (
     <div className="signage-columns">
@@ -117,6 +122,11 @@ export function TimelinesPanel({
                     <TableRow key={timeline.id} selected={timeline.id === selectedId}>
                       <TableCell>
                         <Button onClick={() => setSelectedId(timeline.id)}>{timeline.name}</Button>
+                        {timeline.id === activeTimelineId ? (
+                          <Badge tone="success">
+                            {activeGroupName ? `Active in ${activeGroupName}` : "Active"}
+                          </Badge>
+                        ) : undefined}
                       </TableCell>
                       <TableCell>
                         {timeline.eligibleFrom === null && timeline.eligibleUntil === null
@@ -126,8 +136,12 @@ export function TimelinesPanel({
                       <TableCell>{timeline.revision}</TableCell>
                       <TableCell>
                         {onActivate === undefined ? undefined : (
-                          <Button onClick={() => onActivate(timeline.id)} variant="primary">
+                          <Button
-                            Activate
+                            disabled={activation.pending || timeline.id === activeTimelineId}
+                            onClick={() => activation.run(() => onActivate(timeline.id))}
+                            variant="primary"
+                          >
+                            {timeline.id === activeTimelineId ? "Active" : "Activate"}
                           </Button>
                         )}
                       </TableCell>
@@ -139,6 +153,7 @@ export function TimelinesPanel({
           { label: "Loading timelines…", onRetry: timelines.reload },
         )}
         <FailureNote failure={create.failure} />
+        <FailureNote failure={activation.failure} />
       </Panel>
 
       {selectedId === undefined ? undefined : (

tests/browser/management-ui.test.tsx

@@ -120,6 +120,16 @@ const PLAYBACK_DETAIL = {
   snapshot: GROUP.playback,
 };
 
+const TIMELINE = {
+  description: null,
+  eligibleFrom: null,
+  eligibleUntil: null,
+  id: "timeline-1",
+  name: "Sunday morning",
+  revision: 3,
+  updatedAt: "2026-08-30T15:00:00.000Z",
+};
+
 beforeEach(() => {
   container = document.createElement("div");
   document.body.append(container);
@@ -194,6 +204,78 @@ describe("Signage dashboard", () => {
     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: "timelines",
+          respond: () => jsonResponse({ timelines: [TIMELINE] }),
+        },
+        { method: "GET", path: "playback/group-1", respond: () => jsonResponse(PLAYBACK_DETAIL) },
+        { method: "GET", path: "providers", respond: () => jsonResponse({ providers: [] }) },
+      ],
+    });
+
+    await render(<SignageDashboard context={host.context} />);
+    expect(container.textContent).toContain("Active: Sunday morning");
+    await click(
+      [...container.querySelectorAll("[role='tab']")].find(
+        (candidate) => candidate.textContent === "Timelines",
+      ),
+    );
+
+    expect(container.textContent).toContain("Active in Main");
+    expect(buttonNamed("Active")?.disabled).toBe(true);
+  });
+
+  it("keeps a failed activation visible instead of pretending it succeeded", async () => {
+    const inactiveGroup = {
+      ...GROUP,
+      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: "channel-groups",
+          respond: () => jsonResponse({ groups: [inactiveGroup] }),
+        },
+        {
+          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: "POST",
+          path: "playback/group-1/activate",
+          respond: () =>
+            errorResponse("SIGNAGE_CONFLICT", "The request conflicts with the current state.", 409),
+        },
+      ],
+    });
+
+    await render(<SignageDashboard context={host.context} />);
+    await click(
+      [...container.querySelectorAll("[role='tab']")].find(
+        (candidate) => candidate.textContent === "Timelines",
+      ),
+    );
+    await click(buttonNamed("Activate"));
+
+    expect(container.textContent).toContain("Sunday morning");
+    expect(container.querySelector("[role='alert']")?.textContent).toContain(
+      "The request conflicts with the current state.",
+    );
+  });
+
   it("shows Signage's own sanitized reason when a save is refused", async () => {
     const host = createFakeHost({
       permissions: ["signage.view", "signage.timelines.manage"],

tests/playback.test.ts

@@ -589,6 +589,30 @@ describe("authoritative playback", () => {
     expect(announcements.resolveRequests.length).toBe(callsBefore);
   });
 
+  it("keeps the active timeline through a complete playback-service restart", async () => {
+    const group = await seedGroup();
+    const timeline = await seedPattern();
+    await service.activate(group.group.id, timeline.timeline.id, "now");
+    const before = await service.snapshot(group.group.id);
+
+    service.stop();
+    clock += 2000;
+    service = createPlaybackService({
+      newId,
+      now: () => clock,
+      registry,
+      setTimer: () => undefined,
+      settings: { ...SIGNAGE_DEFAULT_SETTINGS, playbackHistoryLimit: 20 },
+      store,
+    });
+    await service.start();
+
+    const after = await service.snapshot(group.group.id);
+    expect(after.activeTimelineId).toBe(timeline.timeline.id);
+    expect(after.currentSelectionId).toBe(before.currentSelectionId);
+    expect(after.deadlineAtMs).toBe(before.deadlineAtMs);
+  });
+
   it("publishes a compact snapshot, with no payload or timeline in it", async () => {
     const group = await seedGroup();
     const timeline = await seedPattern();