Release 0.5.0

src/routes/+layout.server.ts

@@ -1,3 +1,6 @@
 import type { LayoutServerLoad } from './$types';
 
-export const load: LayoutServerLoad = ({ locals }) => ({ user: locals.user });
+export const load: LayoutServerLoad = ({ locals, url }) => ({
+	user: url.pathname.startsWith('/heinzlive/') ? null : locals.user,
+	presentationMode: url.pathname.startsWith('/heinzlive/')
+});

src/routes/+layout.svelte

@@ -31,7 +31,9 @@
 	/>
 </svelte:head>
 
-{#if data.user}
+{#if data.presentationMode}
+	{@render children()}
+{:else if data.user}
 	<div class="app-shell">
 		<aside class="sidebar">
 			<a class="brand" href={resolve('/fundus')} aria-label="Sendewerk Startseite">

src/routes/heinzlive/[token]/+page.server.ts

@@ -0,0 +1,9 @@
+import { error } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+import { getPresentationView } from '#lib/server/live.js';
+
+export const load: PageServerLoad = ({ params }) => {
+	const view = getPresentationView(params.token);
+	if (!view) error(404, 'Präsentationsausgabe nicht gefunden');
+	return { view };
+};

src/routes/heinzlive/[token]/+page.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import { onMount, untrack } from 'svelte';
+	import type { PageProps } from './$types';
+
+	let { data }: PageProps = $props();
+	let view = $state(untrack(() => data.view));
+	let connection = $state<'connected' | 'waiting' | 'interrupted'>('connected');
+
+	onMount(() => {
+		let stopped = false;
+		let timer: ReturnType<typeof setTimeout>;
+		async function refresh() {
+			try {
+				const response = await fetch(`/heinzlive/${page.params.token}/state`, {
+					headers: { Accept: 'application/json' },
+					cache: 'no-store'
+				});
+				if (!response.ok) throw new Error('STATE_UNAVAILABLE');
+				const next = await response.json();
+				if (next.revision !== view.revision) view = next;
+				connection = 'connected';
+			} catch {
+				connection = 'interrupted';
+			}
+			if (!stopped) timer = setTimeout(refresh, connection === 'interrupted' ? 3000 : 1000);
+		}
+		connection = 'waiting';
+		timer = setTimeout(refresh, 500);
+		return () => {
+			stopped = true;
+			clearTimeout(timer);
+		};
+	});
+</script>
+
+<svelte:head>
+	<title>heinzlive</title>
+	<meta name="robots" content="noindex, nofollow, noarchive" />
+</svelte:head>
+
+<main class="heinzlive-output">
+	<div class="output-connection" class:problem={connection === 'interrupted'} role="status">
+		<span></span>{connection === 'interrupted' ? 'Verbindung unterbrochen' : 'Verbunden'}
+	</div>
+	{#if view.content}
+		<article class="output-content">
+			<p class="output-kicker">heinzlive</p>
+			<h1>{view.content.title}</h1>
+			<!-- HTML is produced exclusively by the server-side allowlist sanitizer. -->
+			<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+			<div class="output-copy">{@html view.content.html}</div>
+			{#if view.content.images.length}<div class="output-images">
+					{#each view.content.images as image (image.id)}
+						<img src={`/heinzlive/${page.params.token}/media/${image.id}`} alt={image.altText} />
+					{/each}
+				</div>{/if}
+			{#if view.content.sources.length}<footer class="output-sources">
+					<span>Quellen</span>
+					{#each view.content.sources as source, index (`${index}-${source.url}`)}
+						<!-- Source URLs are validated as absolute HTTP(S) URLs when the Piece is saved. -->
+						<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
+						<a href={source.url} target="_blank" rel="noopener noreferrer">{source.label}</a>
+					{/each}
+				</footer>{/if}
+		</article>
+	{:else}
+		<section class="output-idle">
+			<div class="brand-mark" aria-hidden="true"><i></i><i></i><i></i></div>
+			<h1>Bereit für den nächsten Inhalt</h1>
+			<p>Die Moderation wählt ausdrücklich aus, was hier erscheint.</p>
+		</section>
+	{/if}
+</main>

src/routes/heinzlive/[token]/media/[id]/+server.ts

@@ -0,0 +1,18 @@
+import { error } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { getPresentationMedia } from '#lib/server/live.js';
+
+export const GET: RequestHandler = async ({ params }) => {
+	const media = await getPresentationMedia(params.token, params.id);
+	if (!media) error(404, 'Bild nicht gefunden');
+	return new Response(media.data, {
+		headers: {
+			'Content-Type': media.mimeType,
+			'Content-Length': String(media.byteSize),
+			'Cache-Control': 'no-store',
+			'Content-Security-Policy': "default-src 'none'; sandbox",
+			'Cross-Origin-Resource-Policy': 'same-origin',
+			'X-Content-Type-Options': 'nosniff'
+		}
+	});
+};

src/routes/heinzlive/[token]/state/+server.ts

@@ -0,0 +1,9 @@
+import { error, json } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { getPresentationView } from '#lib/server/live.js';
+
+export const GET: RequestHandler = ({ params }) => {
+	const view = getPresentationView(params.token);
+	if (!view) error(404, 'Präsentationsausgabe nicht gefunden');
+	return json(view, { headers: { 'Cache-Control': 'no-store' } });
+};

src/routes/live/+page.server.ts

@@ -1,15 +1,127 @@
-import { getShow } from '#lib/server/previews.js';
+import { randomUUID } from 'node:crypto';
+import { error, fail } from '@sveltejs/kit';
+import type { Actions, PageServerLoad } from './$types';
+import { requireUser } from '#lib/server/auth.js';
+import {
+	completeCurrent,
+	getLiveView,
+	goBack,
+	issuePresentationAccess,
+	moveOpenUsage,
+	presentUsage,
+	skipCurrent,
+	startOrResumeLive
+} from '#lib/server/live.js';
+import { listShows } from '#lib/server/shows.js';
 
-export function load({ url }) {
-	const show = getShow(url.searchParams.get('show') || undefined);
-	const usages = show.sections.flatMap((section) =>
-		section.usages
-			.filter((usage) => !usage.isReserve)
-			.map((usage) => ({ ...usage, section: section.name }))
-	);
-	const currentIndex = Math.max(
-		0,
-		usages.findIndex((usage) => usage.status === 'current')
-	);
-	return { show, current: usages[currentIndex] ?? null, next: usages[currentIndex + 1] ?? null };
+function text(data: FormData, name: string) {
+	return String(data.get(name) || '');
 }
+
+function actionError(cause: unknown) {
+	const code = cause instanceof Error ? cause.message : '';
+	if (code === 'CONFLICT')
+		return {
+			status: 409,
+			error: 'Der Live-Stand wurde bereits geändert. Die Ansicht wurde erneuert.'
+		};
+	if (code === 'NO_CURRENT') return { status: 409, error: 'Es ist kein aktuelles Piece aktiv.' };
+	if (code === 'NO_PREVIOUS') return { status: 409, error: 'Es gibt kein vorheriges Piece.' };
+	if (code === 'LIVE_ORDER_LOCKED')
+		return {
+			status: 409,
+			error: 'Nur offene Pieces hinter dem aktuellen Stand können sortiert werden.'
+		};
+	if (code === 'SHOW_COMPLETED')
+		return { status: 409, error: 'Abgeschlossene Sendungen können nicht live gesteuert werden.' };
+	if (code === 'NOT_FOUND')
+		return { status: 404, error: 'Sendung oder Piece wurde nicht gefunden.' };
+	if (code.startsWith('INVALID_')) return { status: 400, error: 'Die Live-Aktion ist ungültig.' };
+	return { status: 500, error: 'Die Live-Aktion konnte nicht gespeichert werden.' };
+}
+
+function attempt(intent: string, operation: () => unknown) {
+	try {
+		return { intent, success: true, result: operation() };
+	} catch (cause) {
+		const problem = actionError(cause);
+		return fail(problem.status, { intent, ...problem });
+	}
+}
+
+export const load: PageServerLoad = ({ locals, url }) => {
+	requireUser(locals.user);
+	const showId = url.searchParams.get('show') || listShows()[0]?.id;
+	if (!showId) error(404, 'Keine Sendung vorhanden');
+	try {
+		return { live: getLiveView(showId), commandId: randomUUID() };
+	} catch (cause) {
+		if (cause instanceof Error && cause.message === 'NOT_FOUND')
+			error(404, 'Sendung nicht gefunden');
+		throw cause;
+	}
+};
+
+export const actions = {
+	start: async ({ locals, request }) => {
+		requireUser(locals.user);
+		const data = await request.formData();
+		return attempt('start', () =>
+			startOrResumeLive(text(data, 'showId'), text(data, 'commandId'), Number(data.get('revision')))
+		);
+	},
+	complete: async ({ locals, request }) => {
+		requireUser(locals.user);
+		const data = await request.formData();
+		return attempt('complete', () =>
+			completeCurrent(text(data, 'showId'), text(data, 'commandId'), Number(data.get('revision')))
+		);
+	},
+	skip: async ({ locals, request }) => {
+		requireUser(locals.user);
+		const data = await request.formData();
+		return attempt('skip', () =>
+			skipCurrent(text(data, 'showId'), text(data, 'commandId'), Number(data.get('revision')))
+		);
+	},
+	back: async ({ locals, request }) => {
+		requireUser(locals.user);
+		const data = await request.formData();
+		return attempt('back', () =>
+			goBack(text(data, 'showId'), text(data, 'commandId'), Number(data.get('revision')))
+		);
+	},
+	present: async ({ locals, request }) => {
+		requireUser(locals.user);
+		const data = await request.formData();
+		return attempt('present', () =>
+			presentUsage(
+				text(data, 'showId'),
+				text(data, 'usageId') || null,
+				text(data, 'commandId'),
+				Number(data.get('revision'))
+			)
+		);
+	},
+	moveUsage: async ({ locals, request }) => {
+		requireUser(locals.user);
+		const data = await request.formData();
+		return attempt('moveUsage', () =>
+			moveOpenUsage(text(data, 'showId'), text(data, 'usageId'), Number(data.get('showRevision')), {
+				sectionId: text(data, 'sectionId') || null,
+				position: Number(data.get('position'))
+			})
+		);
+	},
+	createOutput: async ({ locals, request }) => {
+		requireUser(locals.user);
+		const data = await request.formData();
+		try {
+			const token = issuePresentationAccess(text(data, 'showId'));
+			return { intent: 'createOutput', success: true, outputUrl: `/heinzlive/${token}` };
+		} catch (cause) {
+			const problem = actionError(cause);
+			return fail(problem.status, { intent: 'createOutput', ...problem });
+		}
+	}
+} satisfies Actions;

src/routes/live/+page.svelte

@@ -1,96 +1,389 @@
 <script lang="ts">
-	import PreviewNotice from '#lib/components/PreviewNotice.svelte';
-	import { formatClock } from '#lib/format.js';
+	import { enhance, type SubmitFunction } from '$app/forms';
 	import { resolve } from '$app/paths';
-	import type { PageData } from './$types';
+	import { onMount, untrack } from 'svelte';
+	import { formatClock, formatDuration } from '#lib/format.js';
+	import type { PageProps } from './$types';
 
-	let { data }: { data: PageData } = $props();
+	let { data, form }: PageProps = $props();
 	let promptSize = $state(1.55);
+	let showRail = $state(true);
+	let showTimes = $state(true);
+	let popupMessage = $state('');
+	let now = $state(Date.now());
+	let loadedAt = $state(Date.now());
+	let currentId = $state(untrack(() => data.live.current?.id ?? null));
+	let outputWindow: Window | null = null;
+	let progress = $derived(
+		data.live.totalCount ? Math.round((data.live.completedCount / data.live.totalCount) * 100) : 0
+	);
+	let currentActualSeconds = $derived(
+		(data.live.current?.actualDurationSeconds ?? 0) +
+			(data.live.current ? Math.max(0, Math.floor((now - loadedAt) / 1000)) : 0)
+	);
+
+	$effect(() => {
+		const nextCurrentId = data.live.current?.id ?? null;
+		if (nextCurrentId !== currentId) {
+			currentId = nextCurrentId;
+			loadedAt = Date.now();
+		}
+	});
+
+	onMount(() => {
+		const key = `sendewerk-live-${data.live.show.id}`;
+		try {
+			const settings = JSON.parse(localStorage.getItem(key) || '{}');
+			if (typeof settings.promptSize === 'number') promptSize = settings.promptSize;
+			if (typeof settings.showRail === 'boolean') showRail = settings.showRail;
+			if (typeof settings.showTimes === 'boolean') showTimes = settings.showTimes;
+			if (typeof settings.scrollY === 'number')
+				requestAnimationFrame(() => scrollTo(0, settings.scrollY));
+		} catch {
+			localStorage.removeItem(key);
+		}
+		const interval = setInterval(() => (now = Date.now()), 1000);
+		const persistScroll = () => persistSettings();
+		addEventListener('scroll', persistScroll, { passive: true });
+		return () => {
+			clearInterval(interval);
+			removeEventListener('scroll', persistScroll);
+		};
+	});
+
+	function persistSettings() {
+		localStorage.setItem(
+			`sendewerk-live-${data.live.show.id}`,
+			JSON.stringify({ promptSize, showRail, showTimes, scrollY })
+		);
+	}
+
+	function changePromptSize(delta: number) {
+		promptSize = Math.min(2.4, Math.max(1.1, promptSize + delta));
+		persistSettings();
+	}
+
+	function toggleRail() {
+		showRail = !showRail;
+		persistSettings();
+	}
+
+	function toggleTimes() {
+		showTimes = !showTimes;
+		persistSettings();
+	}
+
+	const enhanceCommand: SubmitFunction = ({ formElement, formData, submitter }) => {
+		const command = formElement.elements.namedItem('commandId');
+		if (command instanceof HTMLInputElement) {
+			command.value = crypto.randomUUID();
+			formData.set('commandId', command.value);
+		}
+		if (submitter instanceof HTMLButtonElement) submitter.disabled = true;
+		return async ({ update }) => {
+			await update({ reset: false, invalidateAll: true });
+			if (submitter instanceof HTMLButtonElement) submitter.disabled = false;
+		};
+	};
+
+	const enhanceOutput: SubmitFunction = ({ submitter }) => {
+		popupMessage = '';
+		outputWindow = window.open('about:blank', 'heinzlive-output');
+		if (!outputWindow) popupMessage = 'Popup blockiert. Bitte Popups erlauben und erneut öffnen.';
+		if (submitter instanceof HTMLButtonElement) submitter.disabled = true;
+		return async ({ result, update }) => {
+			if (result.type === 'success') {
+				const response = result.data as { outputUrl: string };
+				if (outputWindow && !outputWindow.closed) {
+					outputWindow.location.href = response.outputUrl;
+					popupMessage = 'Präsentationsfenster verbunden.';
+				} else {
+					popupMessage = `Präsentationsfenster konnte nicht geöffnet werden: ${response.outputUrl}`;
+				}
+			} else {
+				outputWindow?.close();
+			}
+			await update({ reset: false, invalidateAll: false });
+			if (submitter instanceof HTMLButtonElement) submitter.disabled = false;
+		};
+	};
 </script>
 
-<svelte:head><title>Live-Vorschau | Sendewerk</title></svelte:head>
+<svelte:head><title>Live | {data.live.show.title} | Sendewerk</title></svelte:head>
 
-<div class="page-wrap live-page">
+<div class="page-wrap live-page live-controller">
 	<header class="live-header">
 		<div>
-			<p class="eyebrow"><span class="live-pulse"></span> Live-Modus · Vorschau</p>
-			<h1>{data.show.title}</h1>
+			<p class="eyebrow"><span class="live-pulse"></span> Live-Steuerung</p>
+			<h1>{data.live.show.title}</h1>
+			<p class="live-state-line">
+				{data.live.startedAtUtc
+					? 'Live-Stand wird automatisch gespeichert.'
+					: 'Noch nicht gestartet.'}
+			</p>
 		</div>
 		<div class="live-header-actions">
 			<div class="font-control" aria-label="Prompter-Schriftgröße">
 				<button
 					type="button"
-					onclick={() => (promptSize = Math.max(1.15, promptSize - 0.1))}
+					onclick={() => changePromptSize(-0.1)}
 					aria-label="Schrift verkleinern">A−</button
 				>
-				<button
-					type="button"
-					onclick={() => (promptSize = Math.min(2.1, promptSize + 0.1))}
-					aria-label="Schrift vergrößern">A+</button
+				<button type="button" onclick={() => changePromptSize(0.1)} aria-label="Schrift vergrößern"
+					>A+</button
 				>
 			</div>
-			<a href={resolve('/sendungen/[id]', { id: data.show.id })}>Planung schließen</a>
+			<button type="button" class="text-button" aria-pressed={!showTimes} onclick={toggleTimes}
+				>{showTimes ? 'Zeiten ausblenden' : 'Zeiten einblenden'}</button
+			>
+			<button type="button" class="text-button" aria-pressed={!showRail} onclick={toggleRail}
+				>{showRail ? 'Ablauf ausblenden' : 'Ablauf einblenden'}</button
+			>
+			<a href={resolve('/sendungen/[id]', { id: data.live.show.id })}>Zur Planung</a>
 		</div>
 	</header>
 
-	<PreviewNotice area="Live-Modus" />
+	{#if form?.error}<div class="form-message error" role="alert">{form.error}</div>{/if}
+	{#if popupMessage}<div class="form-message" role="status">{popupMessage}</div>{/if}
 
-	<div class="live-grid">
-		{#if data.current}<section class="live-current" style={`--prompt-size: ${promptSize}rem`}>
+	<section class="live-toolbar" aria-label="Live-Sitzung">
+		<form method="POST" action="?/start" use:enhance={enhanceCommand}>
+			<input type="hidden" name="showId" value={data.live.show.id} />
+			<input type="hidden" name="revision" value={data.live.liveRevision} />
+			<input type="hidden" name="commandId" value={data.commandId} />
+			<button class="primary-button" type="submit">
+				{data.live.startedAtUtc ? 'Live-Stand wiederaufnehmen' : 'Sendung starten'}
+			</button>
+		</form>
+		<form method="POST" action="?/createOutput" use:enhance={enhanceOutput}>
+			<input type="hidden" name="showId" value={data.live.show.id} />
+			<button class="secondary-button" type="submit">Präsentationsfenster öffnen</button>
+		</form>
+		<div class="live-session-summary">
+			<strong>{data.live.completedCount} / {data.live.totalCount}</strong>
+			<span>{progress}% bearbeitet</span>
+		</div>
+	</section>
+
+	<div class:without-rail={!showRail} class="live-grid">
+		{#if data.live.current}<main
+				class="live-current"
+				style={`--prompt-size: ${promptSize}rem`}
+				aria-labelledby="current-title"
+			>
 				<div class="live-kicker">
-					<span>Aktuell · {data.current.section}</span><strong
-						>{formatClock(data.current.durationSeconds)}</strong
-					>
-				</div>
-				<h2>{data.current.title}</h2>
-				<div class="prompter-copy">{data.current.intro}</div>
-				<div class="moderation-card">
-					<span>Moderationsstichpunkte</span>
-					<p>{data.current.moderation}</p>
+					<span>Aktuell · {data.live.current.sectionName}</span>
+					{#if showTimes}<strong
+							>{formatClock(currentActualSeconds)} / {formatClock(
+								data.live.current.durationSeconds
+							)}</strong
+						>{/if}
 				</div>
+				<h2 id="current-title">{data.live.current.title}</h2>
+				<!-- HTML is produced exclusively by the server-side allowlist sanitizer. -->
+				<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+				<div class="prompter-copy">{@html data.live.current.introHtml}</div>
+				{#if data.live.current.moderationHtml}<section class="moderation-card">
+						<span>Moderationsstichpunkte</span>
+						<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+						<div class="live-markdown">{@html data.live.current.moderationHtml}</div>
+					</section>{/if}
 				<details class="research-details">
-					<summary>Recherche öffnen</summary>
-					<p>
-						Die Recherche bleibt im echten Live-Modus standardmäßig geschlossen und bewahrt beim
-						Öffnen die Leseposition.
-					</p>
+					<summary>Manuelle Recherche öffnen</summary>
+					<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+					<div class="live-markdown">{@html data.live.current.researchHtml}</div>
 				</details>
-				<div class="transition-card">
-					<span>Überleitung</span>
-					<p>{data.current.transition}</p>
-				</div>
-			</section>{:else}<section class="live-current live-empty">
-				<p class="eyebrow">Noch kein Piece eingeplant</p>
-				<h2>Diese Sendung hat noch keinen moderierbaren Inhalt.</h2>
-				<p>In der Planung kann zuerst ein sendefertiges Piece hinzugefügt werden.</p>
-			</section>{/if}
+				{#if data.live.current.transitionHtml}<section class="transition-card">
+						<span>Überleitung</span>
+						<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+						<div class="live-markdown">{@html data.live.current.transitionHtml}</div>
+					</section>{/if}
 
-		<aside class="live-rail">
-			<div class="next-card">
-				<span>Als Nächstes</span>
-				{#if data.next}
-					<h3>{data.next.title}</h3>
-					<p>{data.next.section} · {formatClock(data.next.durationSeconds)}</p>
-				{:else}
-					<h3>Sendungsende</h3>
-					<p>Kein weiteres Stück eingeplant.</p>
-				{/if}
-			</div>
-			<div class="live-progress">
-				<header><span>Ablauf</span><strong>2 / 4</strong></header>
-				<div class="progress-track"><span></span></div>
-				{#each data.show.sections as section, index (section.id)}
-					<div class:active={index === 1} class="rail-section">
-						<span>{String(index + 1).padStart(2, '0')}</span>
-						<div>
-							<strong>{section.name}</strong><small>{formatClock(section.durationSeconds)}</small>
+				<div class="live-current-actions">
+					<form method="POST" action="?/back" use:enhance={enhanceCommand}>
+						<input type="hidden" name="showId" value={data.live.show.id} />
+						<input type="hidden" name="revision" value={data.live.liveRevision} />
+						<input type="hidden" name="commandId" value={data.commandId} />
+						<button class="secondary-button" type="submit">Zurück</button>
+					</form>
+					<form method="POST" action="?/present" use:enhance={enhanceCommand}>
+						<input type="hidden" name="showId" value={data.live.show.id} />
+						<input type="hidden" name="usageId" value={data.live.current.id} />
+						<input type="hidden" name="revision" value={data.live.liveRevision} />
+						<input type="hidden" name="commandId" value={data.commandId} />
+						<button class="secondary-button" type="submit">
+							{data.live.presentationUsageId === data.live.current.id
+								? 'Erneut präsentieren'
+								: 'Präsentieren'}
+						</button>
+					</form>
+					<form method="POST" action="?/skip" use:enhance={enhanceCommand}>
+						<input type="hidden" name="showId" value={data.live.show.id} />
+						<input type="hidden" name="revision" value={data.live.liveRevision} />
+						<input type="hidden" name="commandId" value={data.commandId} />
+						<button class="text-button" type="submit">Überspringen</button>
+					</form>
+					<form method="POST" action="?/complete" use:enhance={enhanceCommand}>
+						<input type="hidden" name="showId" value={data.live.show.id} />
+						<input type="hidden" name="revision" value={data.live.liveRevision} />
+						<input type="hidden" name="commandId" value={data.commandId} />
+						<button class="primary-button" type="submit">Erledigen und weiter</button>
+					</form>
+				</div>
+			</main>{:else}<main class="live-current live-empty">
+				<p class="eyebrow">Kein aktives Piece</p>
+				<h2>{data.live.totalCount ? 'Live-Stand bereit' : 'Noch kein Piece eingeplant'}</h2>
+				<p>
+					{data.live.totalCount
+						? 'Sendung starten oder einen abgeschlossenen Schritt zurückgehen.'
+						: 'In der Planung kann zuerst ein sendefertiges Piece hinzugefügt werden.'}
+				</p>
+				{#if data.live.completedCount}<form
+						method="POST"
+						action="?/back"
+						use:enhance={enhanceCommand}
+					>
+						<input type="hidden" name="showId" value={data.live.show.id} />
+						<input type="hidden" name="revision" value={data.live.liveRevision} />
+						<input type="hidden" name="commandId" value={data.commandId} />
+						<button class="secondary-button" type="submit">Zum letzten Piece zurück</button>
+					</form>{/if}
+			</main>{/if}
+
+		{#if showRail}<aside class="live-rail">
+				<section class="next-card">
+					<span>Als Nächstes</span>
+					{#if data.live.next}
+						<h3>{data.live.next.title}</h3>
+						<p>
+							{data.live.next.sectionName}{#if showTimes}
+								· {formatClock(data.live.next.durationSeconds)}{/if}
+						</p>
+					{:else}
+						<h3>Sendungsende</h3>
+						<p>Kein weiteres offenes Piece eingeplant.</p>
+					{/if}
+				</section>
+
+				<section class="live-progress">
+					<header>
+						<span>Ablauf</span><strong>{data.live.completedCount} / {data.live.totalCount}</strong>
+					</header>
+					<div class="progress-track"><span style={`width:${progress}%`}></span></div>
+					{#each data.live.sections as section, sectionIndex (section.id)}
+						<div class:active={section.id === data.live.current?.sectionId} class="rail-section">
+							<span>{String(sectionIndex + 1).padStart(2, '0')}</span>
+							<div>
+								<strong>{section.name}</strong>
+								{#if showTimes}<small>{formatDuration(section.durationSeconds)}</small>{/if}
+							</div>
 						</div>
-					</div>
-				{/each}
-			</div>
-			<div class="readonly-actions" aria-label="Spätere Live-Aktionen">
-				<span>Zurück</span><strong>In Etappe 5 steuerbar</strong><span>Erledigen</span>
-			</div>
-		</aside>
+						{#each section.usages as usage, usageIndex (usage.id)}
+							<div class:current={usage.id === data.live.current?.id} class="live-run-item">
+								<div>
+									<strong>{usage.title}</strong><small>{usage.status}</small>
+								</div>
+								<div class="live-run-actions">
+									{#if usage.status === 'open'}
+										<form method="POST" action="?/moveUsage" use:enhance={enhanceCommand}>
+											<input type="hidden" name="showId" value={data.live.show.id} />
+											<input type="hidden" name="showRevision" value={data.live.show.revision} />
+											<input type="hidden" name="usageId" value={usage.id} />
+											<input type="hidden" name="sectionId" value={section.id} />
+											<input type="hidden" name="position" value={usageIndex - 1} />
+											<button
+												type="submit"
+												disabled={usageIndex === 0 ||
+													section.usages[usageIndex - 1]?.status !== 'open'}
+												aria-label={`${usage.title} nach oben`}>↑</button
+											>
+										</form>
+										<form method="POST" action="?/moveUsage" use:enhance={enhanceCommand}>
+											<input type="hidden" name="showId" value={data.live.show.id} />
+											<input type="hidden" name="showRevision" value={data.live.show.revision} />
+											<input type="hidden" name="usageId" value={usage.id} />
+											<input type="hidden" name="sectionId" value={section.id} />
+											<input type="hidden" name="position" value={usageIndex + 1} />
+											<button
+												type="submit"
+												disabled={usageIndex === section.usages.length - 1 ||
+													section.usages[usageIndex + 1]?.status !== 'open'}
+												aria-label={`${usage.title} nach unten`}>↓</button
+											>
+										</form>
+									{/if}
+									<form method="POST" action="?/present" use:enhance={enhanceCommand}>
+										<input type="hidden" name="showId" value={data.live.show.id} />
+										<input type="hidden" name="usageId" value={usage.id} />
+										<input type="hidden" name="revision" value={data.live.liveRevision} />
+										<input type="hidden" name="commandId" value={data.commandId} />
+										<button type="submit" aria-label={`${usage.title} präsentieren`}>↗</button>
+									</form>
+								</div>
+							</div>
+						{/each}
+					{/each}
+				</section>
+
+				<section class="live-reserve">
+					<header><span>Reserve</span><strong>{data.live.reserve.length}</strong></header>
+					{#each data.live.reserve as usage, reserveIndex (usage.id)}
+						<div class="live-reserve-item">
+							<div>
+								<strong>{usage.title}</strong>{#if showTimes}<small
+										>{formatClock(usage.durationSeconds)}</small
+									>{/if}
+							</div>
+							<div class="live-run-actions">
+								<form method="POST" action="?/moveUsage" use:enhance={enhanceCommand}>
+									<input type="hidden" name="showId" value={data.live.show.id} />
+									<input type="hidden" name="showRevision" value={data.live.show.revision} />
+									<input type="hidden" name="usageId" value={usage.id} />
+									<input type="hidden" name="sectionId" value="" />
+									<input type="hidden" name="position" value={reserveIndex - 1} />
+									<button
+										type="submit"
+										disabled={reserveIndex === 0}
+										aria-label={`${usage.title} in Reserve nach oben`}>↑</button
+									>
+								</form>
+								<form method="POST" action="?/moveUsage" use:enhance={enhanceCommand}>
+									<input type="hidden" name="showId" value={data.live.show.id} />
+									<input type="hidden" name="showRevision" value={data.live.show.revision} />
+									<input type="hidden" name="usageId" value={usage.id} />
+									<input type="hidden" name="sectionId" value="" />
+									<input type="hidden" name="position" value={reserveIndex + 1} />
+									<button
+										type="submit"
+										disabled={reserveIndex === data.live.reserve.length - 1}
+										aria-label={`${usage.title} in Reserve nach unten`}>↓</button
+									>
+								</form>
+								{#if data.live.current || data.live.sections[0]}<form
+										method="POST"
+										action="?/moveUsage"
+										use:enhance={enhanceCommand}
+									>
+										<input type="hidden" name="showId" value={data.live.show.id} />
+										<input type="hidden" name="showRevision" value={data.live.show.revision} />
+										<input type="hidden" name="usageId" value={usage.id} />
+										<input
+											type="hidden"
+											name="sectionId"
+											value={data.live.current?.sectionId ?? data.live.sections[0]?.id}
+										/>
+										<input
+											type="hidden"
+											name="position"
+											value={(data.live.current?.position ?? -1) + 1}
+										/>
+										<button class="text-button" type="submit">Als Nächstes</button>
+									</form>{/if}
+							</div>
+						</div>
+					{/each}
+					{#if !data.live.reserve.length}<p>Keine Pieces in Reserve.</p>{/if}
+				</section>
+			</aside>{/if}
 	</div>
 </div>

src/routes/sendungen/[id]/+page.svelte

@@ -175,7 +175,7 @@
 				<strong>{formatDuration(data.show.totalDurationSeconds)}</strong><span>Planzeit</span>
 			</div>
 			<a class="live-link" href={resolve(`/live?show=${encodeURIComponent(data.show.id)}`)}
-				>Live-Vorschau <span>↗</span></a
+				>Live-Steuerung <span>↗</span></a
 			>
 		</div>
 	</header>