Release 0.7.1

2026-10-25 23:29:00 +01:00
1 parent 6d96900d81
commit a08b02c34b
@@ -3,7 +3,7 @@
 	"title": "Sendewerk",
 	"description": "Redaktionelle Planung und Durchführung von heinzlive-Sendungen.",
 	"tagline": "Vom Fundstück bis zur Livesendung",
-	"version": "0.7.0",
+	"version": "0.7.1",
 	"healthCheckPath": "/healthz",
 	"httpPort": 3000,
 	"addons": {
@@ -1,5 +1,25 @@
 # Abnahme

+## Wartungsrelease 0.7.1
+
+| Bereich                                              | Nachweis                                                                                                                  | Stand                                                      |
+| ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- |
+| Abschnittsdauer und Rückkehr zu früheren Pieces (#1) | Live-Verhaltenstests für geänderte Plandauer, Wiederaufnahme, Abschnittslaufzeit und Gesamtzeit; Chromium-Ablauf          | erfüllt am 25.10.2026                                      |
+| Mobiler Live-Ablauf und Metadaten (#3, #13)          | kleine Live-Regie bei 390 x 700 ohne horizontalen Überlauf; Sheet, Fokus und Viewportgrenzen im Chromium-Ablauf           | Chromium erfüllt; Safari und installierte iOS-Webapp offen |
+| Mobile Sendungskarten (#5)                           | responsive Karten im vollständigen Chromium-Lauf bei 390 Pixeln geöffnet                                                  | erfüllt am 25.10.2026                                      |
+| Vorbereitung nach Einplanung (#6, #15)               | Servertest schließt ungeplante Pieces aus und liefert konkrete Usage-Snapshots priorisiert mit Themenicons                | erfüllt am 25.10.2026                                      |
+| Kontextabhängige Präsentation (#8)                   | Fundus- und Usage-Editor im Chromium-Lauf; Text-, Bild-, Link- und Videozustände durch bestehende Verhaltenstests gedeckt | erfüllt am 25.10.2026                                      |
+| Gastansicht und Freigaben (#11, #12)                 | Gastansicht mobil/desktop, erneut geöffnete Dialogergebnisse und Tokenersatz mit Invalidierungstest                       | erfüllt am 25.10.2026                                      |
+| Iconsuche (#14)                                      | Chromium prüft sichtbares und unmittelbar fokussiertes Suchfeld bei 390, 960 und 1280 Pixeln                              | erfüllt am 25.10.2026                                      |
+
+- `npm test`: 60 von 60 Verhaltenstests erfolgreich.
+- `npm run lint`: erfolgreich.
+- `npm run check`: 0 Fehler und 0 Warnungen.
+- `npm run build`: erfolgreich mit `@sveltejs/adapter-node`.
+- `npm run test:e2e`: 18 von 18 Chromium-Abläufen erfolgreich.
+- Safari auf echtem iOS-Gerät: offen.
+- Installierte Webapp auf echtem iOS-Gerät: separat offen.
+
 ## Etappe 7

 | Kriterium                                    | Nachweis                                                                                                                   | Stand                 |
@@ -450,3 +450,17 @@ bestehenden SQLite-Check-Constraints als zusätzliches Kennzeichen an Original
 und Usage-Snapshot gespeichert; nach außen bleibt er der eindeutige Modus
 `image`. Öffentlich passiert weiterhin nur das ausdrücklich gewählte
 Präsentationsmedium.
+
+## Wartungskorrekturen 0.7.1
+
+Die Vorbereitungsliste projiziert bestehende Daten statt einen zweiten
+Vorbereitungszustand einzuführen: Sie verbindet aktive Sendungen mit ihren
+Usage-Snapshots und berücksichtigt nur Originale im Zustand `preparing`.
+Dadurch erscheinen Mehrfachplanungen als getrennte Sendungsfassungen, während
+ungeplante Fundus-Pieces ausgeschlossen bleiben. Der Link adressiert die Usage
+direkt; Titel und Themenicons stammen aus dem stabilen Snapshot.
+
+Ein Freigabe-Ersatzlink rotiert ausschließlich den gehashten Token derselben
+Freigabe. Umfang, Passwort-Hash und Ablauf bleiben erhalten, der alte Token und
+alle bisherigen Gastsitzungen werden in derselben Transaktion ungültig. Der neue
+Klartexttoken wird weiterhin nur in der Action-Antwort ausgegeben.
@@ -492,3 +492,15 @@ abgewiesen. OpenAPI 3.1 beschreibt diese Grenze maschinenlesbar. Ein MCP-Adapter
 oder ein bestimmter KI-Client wird nicht vorgetäuscht: Die Anwendung bleibt ohne
 KI vollständig nutzbar und eine konkrete Client-Verbindung muss separat geprüft
 werden.
+
+## D-031: Usage-basierte Vorbereitung und rotierende Freigabelinks
+
+Die Sendungsübersicht erzeugt keinen zusätzlichen Vorbereitungszustand. Sie
+projiziert konkrete Usage-Snapshots aktiver Sendungen, deren Fundus-Original noch
+`preparing` ist. So bleiben bestehende Daten und Snapshots unverändert, während
+ungeplante Fundus-Arbeit aus der Sendungsübersicht verschwindet.
+
+Weil Freigabetokens nur gehasht gespeichert werden, kann ein bestehender Link
+nicht erneut angezeigt werden. Ein Ersatzlink rotiert deshalb den Token derselben
+Freigabe transaktional und löscht alle Gastsitzungen; Sichtumfang, Passwort und
+Ablauf werden nicht stillschweigend verändert.
@@ -1,5 +1,29 @@
 # Release Notes

+## 0.7.1 - Bedienung und Live-Korrekturen
+
+Veröffentlicht am 25. Oktober 2026
+
+- Live-Abschnittszeiten übernehmen geänderte Plandauern. Frühere erledigte oder
+  übersprungene Pieces können offiziell wiederaufgenommen werden, ohne ihre
+  Abschnittslaufzeit oder die Gesamtzeit zurückzusetzen (#1).
+- Mobiler Live-Ablauf, lange Metadaten und Sendungskarten halten ihre verfügbare
+  Breite ein. Der Ablauf bleibt als fokussierbares Sheet bedienbar (#3, #5, #13).
+- „Noch vorzubereiten“ zeigt nur tatsächlich eingeplante unfertige Fassungen
+  aktiver Sendungen, priorisiert sie und verlinkt sie mit ihren Themenicons direkt
+  in den Usage-Editor (#6, #15).
+- Fundus- und Usage-Editor unterscheiden Text, Nur Bild, Linkvorschau und Video
+  durch kontextsensitive Eingaben und passende Vorschauen (#8).
+- Gastabschnitte verzichten auf unnötige äußere Karten. Freigabedialoge zeigen
+  den einmaligen Link nach dem Anlegen sofort wieder an, bieten Kopieren und
+  können einen alten Token sicher durch einen neuen ersetzen (#11, #12).
+- Die Iconsuche ist nach dem Öffnen sofort sichtbar und fokussiert (#14).
+- RSS-Feeds und technische Zugänge verwenden in der Verwaltung kompakte
+  Hinzufügen-Einstiege und dieselbe visuelle Listenlogik wie der Werkzeugkatalog.
+- Paket, Lockdatei und Cloudron-Manifest tragen Version `0.7.1`. Es gibt keine
+  neue Datenbankmigration. 60 Verhaltenstests und 18 Chromium-Abläufe sind
+  erfolgreich; echtes Safari und die installierte Webapp auf iOS bleiben offen.
+
 ## 0.7.0 - RSS-Import und externe Assistenz

 Veröffentlicht am 25. Oktober 2026
@@ -8,6 +8,33 @@ Live-Steuerung, Präsentationsausgabe, unveränderliche Sendungshistorie,
 Archiv, sichere Lesefreigaben, RSS-Import und technische REST-Zugänge sind
 dokumentiert.

+## Fehlerkorrekturen 0.7.1
+
+- Explizite Abschnittsdauern werden während der Live-Regie nach Änderungen
+  synchronisiert. Erledigte oder übersprungene Pieces lassen sich bewusst
+  wiederaufnehmen; frühere Abschnitts- und Gesamtzeiten bleiben dabei erhalten.
+- Der mobile Ablauf liegt innerhalb eines isolierten Live-Containers, und lange
+  Metadaten verbreitern die Regie nicht mehr. Sendungskarten stapeln ihre Inhalte
+  auf kleinen Bildschirmen eindeutig.
+- Die Vorbereitung zeigt nur konkrete Einplanungen aktiver Sendungen, deren
+  Fundus-Original noch in Vorbereitung ist. Usage-Titel, Sendung, Abschnitt,
+  Priorität und gespeicherte Themenicons führen direkt zur Sendungsfassung.
+- Text, Nur Bild, Linkvorschau und Video besitzen in Fundus- und Usage-Editor
+  kontextsensitive Felder und Vorschauen. Ausgeblendete Werte bleiben beim
+  Moduswechsel erhalten.
+- Die Iconsuche fokussiert beim Öffnen sofort das Suchfeld. RSS-Feeds und
+  technische Zugänge folgen in der Verwaltung dem kompakten Katalogmuster.
+- Lesefreigaben öffnen nach Serverantworten wieder mit dem einmalig sichtbaren
+  Link, bieten Kopieren und sichere Ersatzlinks. Ersatzlinks invalidieren den
+  alten Token und dessen Gastsitzungen. Die Gastansicht trennt Abschnitte ohne
+  zusätzliche äußere Karten.
+
+Geprüft wurden 60 von 60 Verhaltenstests, Lint, Typprüfung, Produktionsbuild und
+18 von 18 Chromium-Abläufe. Die Browsermatrix öffnete beide Piece-Editoren,
+Sendungsübersicht, Verwaltung und Freigabedialoge, Gastansicht sowie Live-Regie
+bei Desktop- und Mobilbreiten. Safari und die installierte Webapp auf einem
+echten iOS-Gerät bleiben mangels Gerät getrennt offen.
+
 ## RSS-Import und externe Assistenz 0.7.0

 - Barkeeper verwalten RSS-/Atom-Feeds mit Standardkategorie, Aktivierung und
@@ -1,12 +1,12 @@
 {
 	"name": "sendewerk",
-	"version": "0.7.0",
+	"version": "0.7.1",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "sendewerk",
-			"version": "0.7.0",
+			"version": "0.7.1",
 			"dependencies": {
 				"@node-rs/argon2": "^2.2.2",
 				"better-sqlite3": "^13.0.3",
@@ -1,7 +1,7 @@
 {
 	"name": "sendewerk",
 	"private": true,
-	"version": "0.7.0",
+	"version": "0.7.1",
 	"type": "module",
 	"engines": {
 		"node": ">=22.17 <25"
@@ -262,6 +262,13 @@
 	overflow-wrap: anywhere;
 }

+.share-result > div {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 0.75rem;
+}
+
 .guest-shell {
 	min-height: 100dvh;
 }
@@ -294,6 +301,11 @@
 	margin-top: 1.25rem;
 }

+.shared-section {
+	padding: 0 0 1.25rem;
+	border-bottom: 1px solid var(--line);
+}
+
 .shared-section > header,
 .historical-section > header,
 .shared-usage-heading,
@@ -1325,6 +1337,8 @@ textarea:focus {

 .live-page {
 	display: grid;
+	position: relative;
+	isolation: isolate;
 	width: 100%;
 	height: 100dvh;
 	grid-template-rows: auto auto minmax(0, 1fr) auto;
@@ -1796,7 +1810,7 @@ textarea:focus {

 .live-piece-heading {
 	display: grid;
-	grid-template-columns: auto minmax(0, 1fr) auto;
+	grid-template-columns: minmax(0, 1fr) auto;
 	align-items: baseline;
 	gap: 0.35rem 0.65rem;
 	padding-bottom: 0.5rem;
@@ -1819,6 +1833,7 @@ textarea:focus {
 }

 .live-current h1 {
+	min-width: 0;
 	max-width: none;
 	margin: 0;
 	font-size: clamp(1.2rem, 2.2vw, 1.9rem);
@@ -2390,11 +2405,11 @@ textarea:focus {
 	.live-page.without-rail .live-rail,
 	.live-rail {
 		display: grid;
-		position: fixed;
+		position: absolute;
 		z-index: 80;
 		inset: max(0.4rem, env(safe-area-inset-top)) max(0.4rem, env(safe-area-inset-right))
 			max(0.4rem, env(safe-area-inset-bottom)) auto;
-		width: min(22rem, calc(100vw - 0.8rem - env(safe-area-inset-left)));
+		width: min(22rem, calc(100% - 0.8rem - env(safe-area-inset-left)));
 		transform: translateX(calc(100% + 1rem));
 		visibility: hidden;
 		transition:
@@ -2414,7 +2429,7 @@ textarea:focus {

 	.live-rail-backdrop.visible {
 		display: block;
-		position: fixed;
+		position: absolute;
 		z-index: 70;
 		inset: 0;
 		border: 0;
@@ -2431,9 +2446,16 @@ textarea:focus {
 	}

 	.live-piece-heading {
+		min-width: 0;
 		gap: 0.3rem 0.45rem;
 	}

+	.live-piece-time {
+		max-width: 8rem;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
 	.live-support-actions {
 		display: grid;
 	}
@@ -4761,11 +4783,24 @@ textarea:focus {
 	background: var(--panel-soft);
 }

-.preparation-list span {
+.preparation-copy,
+.preparation-copy > span:last-child {
 	display: grid;
 	min-width: 0;
 }

+.preparation-copy {
+	grid-template-columns: auto minmax(0, 1fr);
+	align-items: center;
+	gap: 0.6rem;
+}
+
+.preparation-topics {
+	display: flex;
+	gap: 0.2rem;
+	color: var(--accent-text);
+}
+
 .preparation-list small {
 	overflow: hidden;
 	color: var(--text-muted);
@@ -6742,6 +6777,10 @@ textarea:focus {
 	.show-card-facts {
 		align-items: flex-start;
 	}
+	.show-card {
+		flex-direction: column;
+		align-items: stretch;
+	}
 	.show-card-facts {
 		flex-direction: row;
 		align-items: center;
@@ -6,6 +6,7 @@
 		$props();
 	let query = $state('');
 	let menu: HTMLDetailsElement;
+	let searchInput: HTMLInputElement;
 	let filtered = $derived(
 		classicRegularIcons.filter((icon) =>
 			`${icon.name} ${icon.label} ${icon.terms.join(' ')}`
@@ -18,7 +19,12 @@

 <div class="icon-picker">
 	<input type="hidden" name={inputName} value={name} />
-	<details bind:this={menu}>
+	<details
+		bind:this={menu}
+		ontoggle={() => {
+			if (menu.open) queueMicrotask(() => searchInput.focus());
+		}}
+	>
 		<summary><AppIcon name={name || 'circle'} /> Icon auswählen</summary>
 		<div class="icon-picker-popover">
 			<label
@@ -26,6 +32,7 @@
 					type="search"
 					placeholder="Icon suchen"
 					bind:value={query}
+					bind:this={searchInput}
 				/></label
 			>
 			<div class="icon-picker-grid">
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { resolve } from '$app/paths';
+	import { onMount } from 'svelte';
 	import AppIcon from './AppIcon.svelte';

 	type ShareShow = {
@@ -31,7 +32,12 @@
 		shows: ShareShow[];
 		shares: ShareItem[];
 		fixedShowId?: string;
-		form?: { intent?: string; error?: string; success?: string | boolean; shareUrl?: string } | null;
+		form?: {
+			intent?: string;
+			error?: string;
+			success?: string | boolean;
+			shareUrl?: string;
+		} | null;
 	} = $props();

 	let visibleShows = $derived(
@@ -40,6 +46,17 @@
 			: shows.filter((show) => shares.some((share) => share.showId === show.id))
 	);
 	let dialog: HTMLDialogElement;
+	let copyMessage = $state('');
+
+	onMount(() => {
+		if (form?.intent?.toLowerCase().includes('share')) dialog.showModal();
+	});
+
+	async function copyShareUrl() {
+		if (!form?.shareUrl) return;
+		await navigator.clipboard.writeText(new URL(form.shareUrl, window.location.origin).href);
+		copyMessage = 'Link kopiert.';
+	}

 	function germanDate(value: string | null, fallback = 'Termin offen') {
 		return value
@@ -87,7 +104,11 @@
 	}
 </script>

-<button class="secondary-button share-dialog-trigger" type="button" onclick={() => dialog.showModal()}>
+<button
+	class="secondary-button share-dialog-trigger"
+	type="button"
+	onclick={() => dialog.showModal()}
+>
 	<AppIcon name="link" /> Lesefreigaben
 </button>
 <dialog bind:this={dialog} class="share-management-dialog">
@@ -101,7 +122,12 @@
 				<h2 id={`share-title-${fixedShowId || 'all'}`}>Lesefreigaben</h2>
 			</div>
 			<span class="mail-mode">Aktualisiert sich bis zum Abschluss</span>
-		<button class="dialog-close" type="button" aria-label="Lesefreigaben schließen" onclick={() => dialog.close()}>
+			<button
+				class="dialog-close"
+				type="button"
+				aria-label="Lesefreigaben schließen"
+				onclick={() => dialog.close()}
+			>
 				<AppIcon name="xmark" />
 			</button>
 		</div>
@@ -124,8 +150,15 @@
 		{#if form?.shareUrl}<div class="form-message success share-result" role="status">
 				<strong>Neuer Leselink</strong>
 				<!-- The server returns only a same-origin share path created by this action. -->
+				<div>
 					<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
-			<a href={form.shareUrl}>{form.shareUrl}</a>
+					<a href={form.shareUrl}>{form.shareUrl}</a><button
+						class="secondary-button"
+						type="button"
+						onclick={copyShareUrl}><AppIcon name="copy" /> Kopieren</button
+					>
+				</div>
+				{#if copyMessage}<small>{copyMessage}</small>{/if}
 			</div>{/if}

 		<form class="share-create-form" method="POST" action="?/createShare">
@@ -158,7 +191,8 @@
 				/></label
 			>
 			<label>Optionaler Ablauf<input name="expiresAt" type="datetime-local" /></label>
-		<button class="primary-button" type="submit" disabled={!shows.length}>Leselink anlegen</button>
+			<button class="primary-button" type="submit" disabled={!shows.length}>Leselink anlegen</button
+			>
 		</form>

 		{#if visibleShows.length}
@@ -229,6 +263,20 @@
 												<button class="secondary-button" type="submit">Freigabe speichern</button>
 											</form>
 										{/if}
+										{#if !share.revokedAtUtc}<form
+												method="POST"
+												action="?/replaceShare"
+												onsubmit={(event) => {
+													if (
+														!confirm('Ersatzlink anlegen? Der bisherige Link wird sofort ungültig.')
+													)
+														event.preventDefault();
+												}}
+											>
+												<input type="hidden" name="shareId" value={share.id} />
+												<input type="hidden" name="showId" value={show.id} />
+												<button class="text-button" type="submit">Ersatzlink anlegen</button>
+											</form>{/if}
 										<form
 											method="POST"
 											action="?/deleteShare"
@@ -241,7 +289,8 @@
 										>
 											<input type="hidden" name="shareId" value={share.id} />
 											<input type="hidden" name="showId" value={show.id} />
-										<button class="text-button danger-text" type="submit">Freigabe löschen</button>
+											<button class="text-button danger-text" type="submit">Freigabe löschen</button
+											>
 										</form>
 									</div>
 								</details>
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { enhance, type SubmitFunction } from '$app/forms';
-	import { untrack } from 'svelte';
+	import { onMount, untrack } from 'svelte';
 	import MarkdownEditorField from './MarkdownEditorField.svelte';
 	import InlineTitleEditor from './InlineTitleEditor.svelte';
 	import NavIcon from './NavIcon.svelte';
@@ -13,7 +13,8 @@
 		sectionId,
 		sections,
 		error,
-		enhanceCommand
+		enhanceCommand,
+		open = false
 	}: {
 		usage: PieceUsage;
 		revision: number;
@@ -21,6 +22,7 @@
 		sections: { id: string; name: string }[];
 		error?: string;
 		enhanceCommand: SubmitFunction;
+		open?: boolean;
 	} = $props();

 	let formId = $derived(`usage-editor-form-${usage.id}`);
@@ -30,6 +32,9 @@
 		untrack(() => ({ ...usage, tools: usage.tools.map((tool) => ({ ...tool })) }))
 	);
 	let dirty = $state(false);
+	onMount(() => {
+		if (open) editor.showModal();
+	});
 	let selectedMedia = $derived(
 		draft.media.find((media) => media.id === draft.presentationMediaId) ?? null
 	);
@@ -44,6 +49,15 @@
 		editor.close();
 	}

+	function presentationSourceChanged(event: Event) {
+		const index = Number((event.currentTarget as HTMLSelectElement).value);
+		const source = draft.sources[index];
+		if (!source) return;
+		draft.presentationSourceLabel = source.label;
+		draft.presentationSourceUrl = source.url;
+		draft.presentationSourceTimecodeSeconds = source.timecodeSeconds;
+	}
+
 	const enhanceEditor: SubmitFunction = async (input) => {
 		const finish = await enhanceCommand(input);
 		return async (result) => {
@@ -212,20 +226,7 @@
 			</div>
 			<div class="piece-presentation-layout">
 				<div class="piece-presentation-controls">
-					<label
-						>Präsentationstitel<input
-							name="outputTitle"
-							maxlength="300"
-							placeholder="Optional, sonst interner Titel"
-							bind:value={draft.outputTitle}
-						/></label
-					>
-					<MarkdownEditorField
-						name="presentation"
-						label="Öffentlicher Text"
-						placeholder="Text für die Publikumsausgabe"
-						bind:value={draft.presentation}
-					/>
+					<p class="field-label">Präsentationsart</p>
 					<div class="presentation-mode-picker" role="group" aria-label="Darstellung">
 						{#each [['text', 'Text'], ['image', 'Nur Bild'], ['link', 'Linkvorschau'], ['video', 'Video']] as mode (mode[0])}
 							<label
@@ -238,6 +239,25 @@
 							>
 						{/each}
 					</div>
+					{#if draft.presentationMode === 'text'}
+						<label
+							>Öffentliche Überschrift<input
+								name="outputTitle"
+								maxlength="300"
+								placeholder="Optional, sonst interner Titel"
+								bind:value={draft.outputTitle}
+							/></label
+						>
+						<MarkdownEditorField
+							name="presentation"
+							label="Öffentlicher Vorspann"
+							placeholder="Text für die Publikumsausgabe"
+							bind:value={draft.presentation}
+						/>
+					{:else}
+						<input type="hidden" name="outputTitle" value={draft.outputTitle} />
+						<input type="hidden" name="presentation" value={draft.presentation} />
+					{/if}
 					<input
 						type="hidden"
 						name="presentationSourceLabel"
@@ -253,32 +273,42 @@
 					<input type="hidden" name="presentationMediaId" value={draft.presentationMediaId ?? ''} />
 					{#if draft.presentationMode === 'link' || draft.presentationMode === 'video'}
 						<div class="presentation-settings">
-							<div class="presentation-source-summary wide-field">
-								<span>Ausgewählte Quelle</span>
-								<strong
-									>{draft.presentationSourceLabel ||
-										draft.presentationSourceUrl ||
-										'Keine Quelle'}</strong
+							<label class="wide-field"
+								>{draft.presentationMode === 'video' ? 'Video-URL' : 'Quelle/URL'}<select
+									onchange={presentationSourceChanged}
+								>
+									{#each draft.sources as source, index (source.id)}
+										<option value={index} selected={source.url === draft.presentationSourceUrl}
+											>{source.label || source.url}</option
+										>
+									{/each}
+								</select></label
 							>
-								{#if draft.presentationSourceUrl}<small>{draft.presentationSourceUrl}</small>{/if}
-							</div>
 							<label
-								>Kartentitel<input
+								>{draft.presentationMode === 'video' ? 'Videotitel' : 'Kartentitel'}<input
 									name="presentationTitle"
 									maxlength="300"
 									placeholder="Optionaler Anzeigetitel"
 									bind:value={draft.presentationTitle}
 								/></label
 							>
+							{#if draft.presentationMode === 'link'}
 								<label
-								>Bild-URL<input
+									>Vorschaubild-URL<input
 										name="presentationImageUrl"
 										type="url"
 										maxlength="2000"
-									placeholder="https://…"
+										placeholder="Aus der Linkvorschau"
 										bind:value={draft.presentationImageUrl}
 									/></label
 								>
+							{:else}
+								<input
+									type="hidden"
+									name="presentationImageUrl"
+									value={draft.presentationImageUrl}
+								/>
+							{/if}
 							<label class="wide-field"
 								>Anreißer<textarea
 									name="presentationDescription"
@@ -298,7 +328,9 @@
 						<input type="hidden" name="presentationImageUrl" value={draft.presentationImageUrl} />
 					{/if}
 				</div>
-				{#if draft.media.length}<fieldset class="usage-media-picker">
+				{#if draft.media.length && ['text', 'image'].includes(draft.presentationMode)}<fieldset
+						class="usage-media-picker"
+					>
 						<legend>Hochgeladenes Präsentationsbild</legend>
 						<label
 							><input
@@ -336,19 +368,20 @@
 								src={`/media/${selectedMedia.originalMediaId}`}
 								alt={selectedMedia.altText}
 							/>{/if}
-					{:else}
+					{:else if draft.presentationMode === 'image'}
 						{#if selectedMedia}<img
 								src={`/media/${selectedMedia.originalMediaId}`}
 								alt={selectedMedia.altText}
-							/>{:else if draft.presentationImageUrl}<img
-								src={draft.presentationImageUrl}
-								alt=""
 							/>{/if}
+					{:else if draft.presentationMode === 'link'}
+						{#if draft.presentationImageUrl}<img src={draft.presentationImageUrl} alt="" />{/if}
 						<p>
 							{draft.presentationDescription ||
 								draft.presentationSourceUrl ||
 								'Noch keine Vorschauangaben.'}
 						</p>
+					{:else}
+						<p>{draft.presentationSourceUrl || 'Noch keine Video-URL ausgewählt.'}</p>
 					{/if}
 				</aside>
 			</div>
@@ -16,6 +16,7 @@ import {
 	moveOpenUsage,
 	presentationChannelAccess,
 	presentUsage,
+	resumeUsage,
 	rotatePresentationChannelKey,
 	selectUsage,
 	skipCurrent,
@@ -59,6 +60,11 @@ describe('live mode', () => {
 				"UPDATE show_sections SET explicit_duration_seconds = 600 WHERE id = 'section-stories'"
 			)
 			.run();
+		live = getLiveView('show-october', new Date('2026-10-23T18:01:40.000Z'));
+		expect(live.sectionTimer).toMatchObject({
+			plannedDurationSeconds: 600,
+			elapsedSeconds: 100
+		});
 		completeCurrent(
 			'show-october',
 			'timer-next-piece',
@@ -104,13 +110,54 @@ describe('live mode', () => {
 				.find((usage) => usage.id === 'usage-console')?.status
 		).toBe('done');

-		selectUsage('show-october', 'usage-console', 'return-to-completed', live.liveRevision);
+		expect(() =>
+			selectUsage('show-october', 'usage-console', 'return-to-completed', live.liveRevision)
+		).toThrow('INVALID_STATUS');
+		resumeUsage('show-october', 'usage-console', 'resume-completed', live.liveRevision);
 		expect(getLiveView('show-october').current).toMatchObject({
 			id: 'usage-console',
 			status: 'current'
 		});
 	});

+	it('resumes a completed piece and its earlier section timer without resetting total time', () => {
+		const database = getDatabase();
+		database
+			.prepare(
+				"UPDATE show_sections SET explicit_duration_seconds = 300 WHERE id = 'section-stories'"
+			)
+			.run();
+		database
+			.prepare("UPDATE show_sections SET explicit_duration_seconds = 200 WHERE id = 'section-game'")
+			.run();
+		database
+			.prepare(
+				"UPDATE piece_usages SET show_section_id = 'section-game', position = 0 WHERE id = 'usage-effects'"
+			)
+			.run();
+		const start = new Date('2026-10-23T18:00:00.000Z');
+		startOrResumeLive('show-october', 'resume-start', 0, start);
+		completeCurrent('show-october', 'resume-next', 1, new Date('2026-10-23T18:01:00.000Z'));
+		let live = getLiveView('show-october', new Date('2026-10-23T18:01:30.000Z'));
+		expect(live.current?.id).toBe('usage-effects');
+		resumeUsage(
+			'show-october',
+			'usage-console',
+			'resume-earlier',
+			live.liveRevision,
+			new Date('2026-10-23T18:01:30.000Z')
+		);
+		live = getLiveView('show-october', new Date('2026-10-23T18:02:00.000Z'));
+		expect(live.current).toMatchObject({ id: 'usage-console', status: 'current' });
+		expect(live.completedCount).toBe(0);
+		expect(live.sectionTimer).toMatchObject({
+			sectionId: 'section-stories',
+			plannedDurationSeconds: 300,
+			elapsedSeconds: 90
+		});
+		expect(live.totalTimer.elapsedSeconds).toBe(120);
+	});
+
 	it('keeps one stable output channel until its key is explicitly rotated', () => {
 		const key = issuePresentationAccess('show-october');
 		expect(issuePresentationAccess('show-october')).toBe(key);
@@ -149,12 +149,13 @@ function orderedUsages(database: Database.Database, showId: string): OrderedUsag
 function usageBelongsToShow(database: Database.Database, showId: string, usageId: string) {
 	const row = database
 		.prepare(
-			`SELECT s.is_reserve_bank FROM piece_usages u
+			`SELECT s.is_reserve_bank, u.status FROM piece_usages u
 			 JOIN show_sections s ON s.id = u.show_section_id
 			 WHERE u.id = ? AND s.show_id = ?`
 		)
-		.get(usageId, showId) as { is_reserve_bank: number } | undefined;
+		.get(usageId, showId) as { is_reserve_bank: number; status: string } | undefined;
 	if (!row || row.is_reserve_bank) throw new Error('NOT_FOUND');
+	return row;
 }

 function closeActiveRun(database: Database.Database, showId: string, now: string) {
@@ -265,8 +266,7 @@ function syncSectionTimer(
 			 FROM live_section_timers WHERE show_id = ? AND ended_at_utc IS NULL`
 		)
 		.get(showId) as
-		| { id: string; section_id: string; planned_duration_seconds: number }
-		| undefined;
+		{ id: string; section_id: string; planned_duration_seconds: number } | undefined;
 	if (active?.section_id === section.id) {
 		if (!section.explicit_duration_seconds || section.explicit_duration_seconds <= 0) {
 			closeSectionTimer(database, showId, now);
@@ -279,6 +279,29 @@ function syncSectionTimer(
 	}
 	if (active) closeSectionTimer(database, showId, now);
 	if (!section.explicit_duration_seconds || section.explicit_duration_seconds <= 0) return;
+	const previous = database
+		.prepare(
+			`SELECT id FROM live_section_timers WHERE show_id = ? AND section_id = ?
+			 ORDER BY started_at_utc DESC LIMIT 1`
+		)
+		.get(showId, section.id) as { id: string } | undefined;
+	if (previous) {
+		database
+			.prepare(
+				`UPDATE live_section_timers SET planned_duration_seconds = ?, ended_at_utc = NULL
+				 WHERE id = ?`
+			)
+			.run(section.explicit_duration_seconds, previous.id);
+		if (showTimerRunning(database, showId)) {
+			database
+				.prepare(
+					`INSERT INTO live_section_timer_runs (id, timer_id, started_at_utc)
+					 VALUES (?, ?, ?)`
+				)
+				.run(randomUUID(), previous.id, now);
+		}
+		return;
+	}
 	const timerId = randomUUID();
 	database
 		.prepare(
@@ -287,6 +310,7 @@ function syncSectionTimer(
 			 VALUES (?, ?, ?, ?, ?)`
 		)
 		.run(timerId, showId, section.id, section.explicit_duration_seconds, now);
+	if (showTimerRunning(database, showId)) {
 		database
 			.prepare(
 				`INSERT INTO live_section_timer_runs (id, timer_id, started_at_utc)
@@ -294,6 +318,7 @@ function syncSectionTimer(
 			)
 			.run(randomUUID(), timerId, now);
 	}
+}

 function activateUsage(database: Database.Database, showId: string, usageId: string, now: string) {
 	usageBelongsToShow(database, showId, usageId);
@@ -412,6 +437,9 @@ export function getLiveView(showId: string, nowValue?: Date): LiveView {
 	const state = ensureLiveState(database, showId, now);
 	const show = getShow(showId);
 	if (!show) throw new Error('NOT_FOUND');
+	if (state.started_at_utc && !state.ended_at_utc && state.current_usage_id) {
+		syncSectionTimer(database, showId, state.current_usage_id, now);
+	}
 	const durations = actualDurations(database, showId, now);
 	const sections = show.sections.map((section) => ({
 		...section,
@@ -941,7 +969,8 @@ export function selectUsage(
 		(database, state, now) => {
 			if (!state.started_at_utc) throw new Error('NOT_STARTED');
 			if (!showTimerRunning(database, showId)) throw new Error('TIMER_PAUSED');
-			usageBelongsToShow(database, showId, usageId);
+			const target = usageBelongsToShow(database, showId, usageId);
+			if (target.status !== 'open') throw new Error('INVALID_STATUS');
 			if (state.current_usage_id === usageId) return;
 			if (state.current_usage_id) {
 				closeActiveRun(database, showId, now);
@@ -955,6 +984,36 @@ export function selectUsage(
 	);
 }

+export function resumeUsage(
+	showId: string,
+	usageId: string,
+	commandId: string,
+	expectedRevision: number,
+	nowValue?: Date
+) {
+	return executeCommand(
+		showId,
+		commandId,
+		expectedRevision,
+		'resume-usage',
+		(database, state, now) => {
+			if (!state.started_at_utc || state.ended_at_utc) throw new Error('NOT_LIVE');
+			if (!showTimerRunning(database, showId)) throw new Error('TIMER_PAUSED');
+			const target = usageBelongsToShow(database, showId, usageId);
+			if (target.status !== 'done' && target.status !== 'skipped')
+				throw new Error('INVALID_STATUS');
+			if (state.current_usage_id) {
+				closeActiveRun(database, showId, now);
+				database
+					.prepare("UPDATE piece_usages SET status = 'open' WHERE id = ?")
+					.run(state.current_usage_id);
+			}
+			activateUsage(database, showId, usageId, now);
+		},
+		nowValue
+	);
+}
+
 export function presentUsage(
 	showId: string,
 	usageId: string | null,
@@ -13,6 +13,7 @@ import {
 	getSharedMedia,
 	getSharedShow,
 	revokeShare,
+	replaceShareToken,
 	updateShare
 } from './shares.js';
 import { addPieceUsage, addShowSection, createShow } from './shows.js';
@@ -138,8 +139,17 @@ describe('show shares', () => {
 		expect(getSharedShow(shared.token).status).toBe('password');
 		const session = await authenticateShare(shared.token, 'neues-freigabe-passwort', '192.0.2.20');
 		expect(getSharedShow(shared.token, session.token).status).toBe('authorized');
-		deleteShare(actor, shared.id, created.id);
+		const replacementToken = replaceShareToken(actor, shared.id, created.id);
 		expect(getSharedShow(shared.token, session.token).status).toBe('unavailable');
+		expect(getSharedShow(replacementToken).status).toBe('password');
+		const replacementSession = await authenticateShare(
+			replacementToken,
+			'neues-freigabe-passwort',
+			'192.0.2.20'
+		);
+		expect(getSharedShow(replacementToken, replacementSession.token).status).toBe('authorized');
+		deleteShare(actor, shared.id, created.id);
+		expect(getSharedShow(replacementToken, replacementSession.token).status).toBe('unavailable');
 	});

 	it('projects exactly the selected information scope', async () => {
@@ -193,6 +193,27 @@ export async function updateShare(
 	})();
 }

+export function replaceShareToken(
+	actor: AuthUser,
+	shareId: string,
+	expectedShowId?: string
+): string {
+	requireBarkeeperActor(actor);
+	const token = createToken();
+	const database = getDatabase();
+	database.transaction(() => {
+		const result = database
+			.prepare(
+				`UPDATE show_shares SET token_hash = ?
+				 WHERE id = ? AND revoked_at_utc IS NULL${expectedShowId ? ' AND show_id = ?' : ''}`
+			)
+			.run(hashToken(token), ...(expectedShowId ? [shareId, expectedShowId] : [shareId]));
+		if (result.changes !== 1) throw new Error('NOT_FOUND');
+		database.prepare('DELETE FROM show_share_sessions WHERE share_id = ?').run(shareId);
+	})();
+	return token;
+}
+
 export function deleteShare(actor: AuthUser, shareId: string, expectedShowId?: string): void {
 	requireBarkeeperActor(actor);
 	const result = getDatabase()
@@ -13,6 +13,7 @@ import {
 	duplicatePieceUsage,
 	getPieceUsageContexts,
 	getShow,
+	listPreparationUsages,
 	listShowTemplates,
 	movePieceUsage,
 	moveShowSection,
@@ -66,6 +67,27 @@ function editedUsage(usage: PieceUsage, overrides: Partial<PieceUsage> = {}) {
 }

 describe('show builder data layer', () => {
+	it('lists only scheduled preparing originals as concrete usage snapshots', () => {
+		const database = getDatabase();
+		database
+			.prepare(
+				"UPDATE pieces SET status = 'preparing', preparation_effort = 'high' WHERE id = 'piece-console'"
+			)
+			.run();
+		const usages = listPreparationUsages();
+
+		expect(usages.map((usage) => usage.usageId)).toEqual(['usage-games-console', 'usage-console']);
+		expect(usages[1]).toMatchObject({
+			showId: 'show-october',
+			showTitle: 'Herbstsendung: Kleine Welten',
+			sectionName: 'Kleine Welten',
+			title: 'Die kleine Konsole mit dem großen Dreh',
+			preparationEffort: 'high',
+			topics: [{ name: 'Gaming' }]
+		});
+		expect(usages.some((usage) => usage.title === 'Drei Sounds, ein Spiel')).toBe(false);
+	});
+
 	it('creates a fundus original and usage atomically and idempotently', () => {
 		const created = createShow({ title: 'Direkte Planung', startsAtUtc: null, templateId: null });
 		const section = addShowSection(created.id, created.revision, {
@@ -21,6 +21,17 @@ export type ShowListItem = {
 	sectionCount: number;
 };

+export type PreparationUsage = {
+	usageId: string;
+	showId: string;
+	showTitle: string;
+	showStartsAtUtc: string | null;
+	sectionName: string;
+	title: string;
+	preparationEffort: 'low' | 'medium' | 'high' | null;
+	topics: UsageTopic[];
+};
+
 export type ShowTemplateSection = {
 	id: string;
 	name: string;
@@ -769,6 +780,50 @@ export function listShows(statuses?: ShowStatus[]): ShowListItem[] {
 	}));
 }

+export function listPreparationUsages(): PreparationUsage[] {
+	const database = getDatabase();
+	const rows = database
+		.prepare(
+			`SELECT u.id AS usage_id, sh.id AS show_id, sh.title AS show_title,
+			 sh.starts_at_utc AS show_starts_at_utc, s.name AS section_name,
+			 u.title_snapshot, p.preparation_effort
+			 FROM piece_usages u
+			 JOIN show_sections s ON s.id = u.show_section_id
+			 JOIN shows sh ON sh.id = s.show_id
+			 JOIN pieces p ON p.id = u.original_piece_id
+			 WHERE sh.status IN ('draft', 'ready', 'live')
+			 AND s.is_reserve_bank = 0 AND p.deleted_at_utc IS NULL AND p.status = 'preparing'
+			 ORDER BY CASE p.preparation_effort
+			  WHEN 'high' THEN 0 WHEN 'medium' THEN 1 WHEN 'low' THEN 2 ELSE 3 END,
+			 sh.starts_at_utc IS NULL, sh.starts_at_utc, s.position, u.position`
+		)
+		.all() as {
+		usage_id: string;
+		show_id: string;
+		show_title: string;
+		show_starts_at_utc: string | null;
+		section_name: string;
+		title_snapshot: string;
+		preparation_effort: PreparationUsage['preparationEffort'];
+	}[];
+	const topics = database.prepare(
+		'SELECT name, icon_name FROM usage_topic_snapshots WHERE usage_id = ? ORDER BY position'
+	);
+	return rows.map((row) => ({
+		usageId: row.usage_id,
+		showId: row.show_id,
+		showTitle: row.show_title,
+		showStartsAtUtc: row.show_starts_at_utc,
+		sectionName: row.section_name,
+		title: row.title_snapshot,
+		preparationEffort: row.preparation_effort,
+		topics: (topics.all(row.usage_id) as { name: string; icon_name: string }[]).map((topic) => ({
+			name: topic.name,
+			iconName: topic.icon_name
+		}))
+	}));
+}
+
 export function listShowTemplates(): ShowTemplate[] {
 	const database = getDatabase();
 	const templates = database
@@ -51,7 +51,7 @@
 		</header>
 		<div class="shared-rundown">
 			{#each data.share.sections as section (section)}
-				<section class="quiet-panel shared-section">
+				<section class="shared-section">
 					<header>
 						<div>
 							{#if section.category}<small
@@ -77,14 +77,19 @@
 				: draft.presentationProvider === 'tiktok' && draft.presentationProviderId
 					? `https://www.tiktok.com/player/v1/${draft.presentationProviderId}`
 					: '',
-		images: selectedMedia ? [{ id: selectedMedia.id, altText: selectedMedia.altText }] : []
+		images:
+			selectedMedia && ['text', 'image'].includes(draft.presentationMode)
+				? [{ id: selectedMedia.id, altText: selectedMedia.altText }]
+				: []
 	});
 	let presentationPreviewImage = $derived(
-		selectedMedia
+		selectedMedia && ['text', 'image'].includes(draft.presentationMode)
 			? draft.presentationMode === 'text'
 				? '/media'
 				: `/media/${selectedMedia.id}`
-			: sourcePreviewImage
+			: draft.presentationMode === 'link'
+				? sourcePreviewImage
+				: ''
 	);
 	let pendingHref: string | null = null;
 	let allowNavigation = false;
@@ -116,7 +121,7 @@
 		if (
 			control instanceof HTMLInputElement &&
 			control.name === 'presentationMode' &&
-			control.value !== 'text' &&
+			['link', 'video'].includes(control.value) &&
 			draft.presentationSourcePosition === null
 		) {
 			return;
@@ -348,10 +353,11 @@
 							/></label
 						>
 						<label
-							>Vorbereitungsaufwand<select name="preparationEffort" bind:value={draft.preparationEffort}
-								><option value={null}>Nicht angegeben</option><option value="low">Gering</option><option
-									value="medium">Mittel</option
-								><option value="high">Hoch</option></select
+							>Vorbereitungsaufwand<select
+								name="preparationEffort"
+								bind:value={draft.preparationEffort}
+								><option value={null}>Nicht angegeben</option><option value="low">Gering</option
+								><option value="medium">Mittel</option><option value="high">Hoch</option></select
 							></label
 						>
 						<label
@@ -533,21 +539,7 @@
 				</div>
 				<div class="piece-presentation-layout">
 					<div class="piece-presentation-controls">
-						<label
-							>Präsentationstitel<input
-								name="outputTitle"
-								maxlength="300"
-								placeholder="Optional, sonst interner Titel"
-								bind:value={draft.outputTitle}
-							/></label
-						>
-						<MarkdownEditorField
-							name="presentationText"
-							label="Öffentlicher Text"
-							placeholder="Text für die Publikumsausgabe"
-							rows={8}
-							bind:value={draft.presentationText}
-						/>
+						<p class="field-label">Präsentationsart</p>
 						<div class="presentation-mode-picker" role="group" aria-label="Darstellung">
 							{#each [['text', 'Text'], ['image', 'Nur Bild'], ['link', 'Linkvorschau'], ['video', 'Video']] as mode (mode[0])}<label
 									><input
@@ -558,9 +550,30 @@
 									/>{mode[1]}</label
 								>{/each}
 						</div>
+						{#if draft.presentationMode === 'text'}
+							<label
+								>Öffentliche Überschrift<input
+									name="outputTitle"
+									maxlength="300"
+									placeholder="Optional, sonst interner Titel"
+									bind:value={draft.outputTitle}
+								/></label
+							>
+							<MarkdownEditorField
+								name="presentationText"
+								label="Öffentlicher Vorspann"
+								placeholder="Text für die Publikumsausgabe"
+								rows={8}
+								bind:value={draft.presentationText}
+							/>
+						{:else}
+							<input type="hidden" name="outputTitle" value={draft.outputTitle} />
+							<input type="hidden" name="presentationText" value={draft.presentationText} />
+						{/if}
+						{#if draft.presentationMode === 'link' || draft.presentationMode === 'video'}
 							<div class="presentation-settings">
 								<label
-								>Quelle<select
+									>{draft.presentationMode === 'video' ? 'Video-URL' : 'Quelle/URL'}<select
 										name="presentationSourcePosition"
 										bind:value={draft.presentationSourcePosition}
 										onchange={presentationSourceChanged}
@@ -571,7 +584,7 @@
 									></label
 								>
 								<label
-								>Kartentitel<input
+									>{draft.presentationMode === 'video' ? 'Videotitel' : 'Kartentitel'}<input
 										name="presentationTitle"
 										maxlength="300"
 										placeholder="Optionaler Anzeigetitel"
@@ -579,16 +592,24 @@
 										oninput={() => (draft.presentationTitleManual = true)}
 									/></label
 								>
+								{#if draft.presentationMode === 'link'}
 									<label
-								>Bild-URL<input
+										>Vorschaubild-URL<input
 											name="presentationImageUrl"
 											type="url"
 											maxlength="2000"
-									placeholder="https://…"
+											placeholder="Wird aus der Linkvorschau geladen"
 											bind:value={draft.presentationImageUrl}
 											oninput={() => (draft.presentationImageManual = true)}
 										/></label
 									>
+								{:else}
+									<input
+										type="hidden"
+										name="presentationImageUrl"
+										value={draft.presentationImageUrl}
+									/>
+								{/if}
 								<label class="wide-field"
 									>Anreißer<textarea
 										name="presentationDescription"
@@ -612,6 +633,20 @@
 									>
 								</div>
 							</div>
+						{:else}
+							<input
+								type="hidden"
+								name="presentationSourcePosition"
+								value={draft.presentationSourcePosition ?? ''}
+							/>
+							<input type="hidden" name="presentationTitle" value={draft.presentationTitle} />
+							<input
+								type="hidden"
+								name="presentationDescription"
+								value={draft.presentationDescription}
+							/>
+							<input type="hidden" name="presentationImageUrl" value={draft.presentationImageUrl} />
+						{/if}
 					</div>
 					<aside class="piece-presentation-preview" aria-label="Präsentationsvorschau">
 						<PresentationDisplay
@@ -646,7 +681,11 @@
 			</section>
 		</form>

-		<section class="piece-editor-panel piece-media-panel" hidden={activeSection !== 'presentation'}>
+		<section
+			class="piece-editor-panel piece-media-panel"
+			hidden={activeSection !== 'presentation' ||
+				!['text', 'image'].includes(draft.presentationMode)}
+		>
 			<div class="piece-subsection-heading">
 				<div>
 					<p class="eyebrow">Hochgeladene Bilder</p>
@@ -16,6 +16,7 @@ import {
 	rotatePresentationChannelKey,
 	resetSectionTimer,
 	resetTotalTimer,
+	resumeUsage,
 	resumeEndedLive,
 	resumeLive,
 	selectUsage,
@@ -25,7 +26,13 @@ import {
 	startOrResumeLive
 } from '#lib/server/live.js';
 import { listShows } from '#lib/server/shows.js';
-import { createShare, deleteShare, listShares, updateShare } from '#lib/server/shares.js';
+import {
+	createShare,
+	deleteShare,
+	listShares,
+	replaceShareToken,
+	updateShare
+} from '#lib/server/shares.js';
 import { berlinLocalToUtc } from '#lib/server/time.js';

 function text(data: FormData, name: string) {
@@ -99,10 +106,16 @@ export const actions = {
 		const data = await request.formData();
 		try {
 			const share = await createShare(actor, {
-				showId: text(data, 'showId'), scope: text(data, 'scope'), password: text(data, 'password'),
+				showId: text(data, 'showId'),
+				scope: text(data, 'scope'),
+				password: text(data, 'password'),
 				expiresAtUtc: berlinLocalToUtc(text(data, 'expiresAt'), 'INVALID_EXPIRY')
 			});
-			return { intent: 'createShare', success: 'Leselink angelegt.', shareUrl: `/freigabe/${share.token}` };
+			return {
+				intent: 'createShare',
+				success: 'Leselink angelegt.',
+				shareUrl: `/freigabe/${share.token}`
+			};
 		} catch (cause) {
 			const problem = actionError(cause);
 			return fail(problem.status, { intent: 'createShare', ...problem });
@@ -112,16 +125,38 @@ export const actions = {
 		const actor = requireBarkeeper(locals.user);
 		const data = await request.formData();
 		try {
-			await updateShare(actor, text(data, 'shareId'), {
-				scope: text(data, 'scope'), passwordMode: text(data, 'passwordMode'), password: text(data, 'password'),
+			await updateShare(
+				actor,
+				text(data, 'shareId'),
+				{
+					scope: text(data, 'scope'),
+					passwordMode: text(data, 'passwordMode'),
+					password: text(data, 'password'),
 					expiresAtUtc: berlinLocalToUtc(text(data, 'expiresAt'), 'INVALID_EXPIRY')
-			}, text(data, 'showId'));
+				},
+				text(data, 'showId')
+			);
 			return { intent: 'updateShare', success: 'Freigabe aktualisiert.' };
 		} catch (cause) {
 			const problem = actionError(cause);
 			return fail(problem.status, { intent: 'updateShare', ...problem });
 		}
 	},
+	replaceShare: async ({ locals, request }) => {
+		const actor = requireBarkeeper(locals.user);
+		const data = await request.formData();
+		try {
+			const token = replaceShareToken(actor, text(data, 'shareId'), text(data, 'showId'));
+			return {
+				intent: 'replaceShare',
+				success: 'Ersatzlink angelegt. Der bisherige Link ist ungültig.',
+				shareUrl: `/freigabe/${token}`
+			};
+		} catch (cause) {
+			const problem = actionError(cause);
+			return fail(problem.status, { intent: 'replaceShare', ...problem });
+		}
+	},
 	deleteShare: async ({ locals, request }) => {
 		const actor = requireBarkeeper(locals.user);
 		const data = await request.formData();
@@ -253,6 +288,18 @@ export const actions = {
 			)
 		);
 	},
+	resumeUsage: async ({ locals, request }) => {
+		requireUser(locals.user);
+		const data = await request.formData();
+		return attempt('resumeUsage', () =>
+			resumeUsage(
+				text(data, 'showId'),
+				text(data, 'usageId'),
+				text(data, 'commandId'),
+				Number(data.get('revision'))
+			)
+		);
+	},
 	present: async ({ locals, request }) => {
 		requireUser(locals.user);
 		const data = await request.formData();
@@ -591,7 +591,12 @@
 			</section>
 			<section>
 				<strong>Ausgabekanal</strong>
-				{#if data.canManageShares}<ShareManagement shows={[{ ...data.live.show, startsAtUtc: null }]} shares={data.shares} fixedShowId={data.live.show.id} {form} />{/if}
+				{#if data.canManageShares}<ShareManagement
+						shows={[{ ...data.live.show, startsAtUtc: null }]}
+						shares={data.shares}
+						fixedShowId={data.live.show.id}
+						{form}
+					/>{/if}
 				<form method="POST" action={liveAction('createOutput')} use:enhance={enhanceOutput}>
 					<input type="hidden" name="showId" value={data.live.show.id} />
 					<button class="secondary-button" type="submit">Ausgabe verbinden und öffnen</button>
@@ -814,8 +819,13 @@
 								{formatClock(viewedActualSeconds)} / {formatClock(viewedUsage.durationSeconds)}
 							</strong>{/if}
 					</div>
-					{#if viewedSection?.twitchTags.length}<button class="text-button live-twitch-tags" type="button" onclick={copyTwitchTags}>
-						<AppIcon name="copy" /> {viewedSection.twitchTags.join(' · ')}
+					{#if viewedSection?.twitchTags.length}<button
+							class="text-button live-twitch-tags"
+							type="button"
+							onclick={copyTwitchTags}
+						>
+							<AppIcon name="copy" />
+							{viewedSection.twitchTags.join(' · ')}
 						</button>{/if}

 					{#if viewedUsage.introHtml}<section class="live-script-section live-intro">
@@ -1000,6 +1010,22 @@
 										>
 									</button>
 									<div class="live-run-actions">
+										{#if usage.status === 'done' || usage.status === 'skipped'}<form
+												method="POST"
+												action={liveAction('resumeUsage')}
+												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
+													class="text-button"
+													type="submit"
+													disabled={data.live.isPaused || Boolean(data.live.endedAtUtc)}
+													>Wiederaufnehmen</button
+												>
+											</form>{/if}
 										{#if usage.status === 'open'}<details class="live-run-order">
 												<summary aria-label={`${usage.title} sortieren`}
 													><AppIcon name="ellipsis" /></summary
@@ -1176,6 +1202,19 @@
 							: 'Präsentieren'}
 					</button>
 				</form>
+				{#if (viewedUsage.status === 'done' || viewedUsage.status === 'skipped') && !viewingLiveCurrent}
+					<form method="POST" action={liveAction('resumeUsage')} use:enhance={enhanceCommand}>
+						<input type="hidden" name="showId" value={data.live.show.id} />
+						<input type="hidden" name="usageId" value={viewedUsage.id} />
+						<input type="hidden" name="revision" value={data.live.liveRevision} />
+						<input type="hidden" name="commandId" value={data.commandId} />
+						<button
+							class="primary-button"
+							type="submit"
+							disabled={data.live.isPaused || Boolean(data.live.endedAtUtc)}>Wiederaufnehmen</button
+						>
+					</form>
+				{:else}
 					<form method="POST" action={liveAction('skip')} use:enhance={enhanceCommand}>
 						<input type="hidden" name="showId" value={data.live.show.id} />
 						<input type="hidden" name="revision" value={data.live.liveRevision} />
@@ -1208,6 +1247,7 @@
 									: 'Erledigen & Sendungsende'}
 						</button>
 					</form>
+				{/if}
 			{:else if sessionComplete}<strong class="live-finished-label">Ablauf abgeschlossen</strong
 				>{/if}
 		</div>
@@ -2,8 +2,12 @@ import { fail, redirect } from '@sveltejs/kit';
 import type { Actions, PageServerLoad } from './$types';
 import { berlinDateKey, berlinMonthKey, normalizeMonthKey, shiftMonth } from '#lib/calendar.js';
 import { getShowOverviewView, requireUser, setShowOverviewView } from '#lib/server/auth.js';
-import { createShow, listShows, listShowTemplates } from '#lib/server/shows.js';
-import { listPieces } from '#lib/server/content.js';
+import {
+	createShow,
+	listPreparationUsages,
+	listShows,
+	listShowTemplates
+} from '#lib/server/shows.js';
 import { berlinLocalToUtc } from '#lib/server/time.js';

 export const load: PageServerLoad = ({ locals, url }) => {
@@ -13,7 +17,7 @@ export const load: PageServerLoad = ({ locals, url }) => {
 	const selectedMonth = normalizeMonthKey(url.searchParams.get('month'), todayMonth);
 	return {
 		shows: listShows(['draft', 'ready', 'live']),
-		preparationPieces: listPieces({ statuses: ['preparing'] }),
+		preparationUsages: listPreparationUsages(),
 		templates: listShowTemplates(),
 		view: getShowOverviewView(user.id),
 		selectedMonth,
@@ -53,6 +53,10 @@
 		}).format(new Date(`${value}T12:00:00Z`));
 	}

+	function preparationHref(showId: string, usageId: string) {
+		return `${resolve('/sendungen/[id]', { id: showId })}?usage=${encodeURIComponent(usageId)}#usage-${encodeURIComponent(usageId)}`;
+	}
+
 	function statusLabel(status: string) {
 		if (status === 'ready') return 'Bereit';
 		if (status === 'draft') return 'Entwurf';
@@ -125,13 +129,41 @@
 		</form>
 	</details>

-	{#if data.preparationPieces.length}<section class="show-library preparation-overview" aria-labelledby="preparation-title">
-			<header><h2 id="preparation-title">Noch vorzubereiten</h2><span>{data.preparationPieces.length}</span></header>
+	{#if data.preparationUsages.length}<section
+			class="show-library preparation-overview"
+			aria-labelledby="preparation-title"
+		>
+			<header>
+				<h2 id="preparation-title">Noch vorzubereiten</h2>
+				<span>{data.preparationUsages.length}</span>
+			</header>
 			<div class="preparation-list">
-				{#each data.preparationPieces as piece (piece.id)}<a href={resolve('/fundus/[id]', { id: piece.id })}>
-						<span><strong>{piece.title}</strong>{#if piece.summary}<small>{piece.summary}</small>{/if}</span>
-						{#if piece.preparationEffort}<b class={`effort ${piece.preparationEffort}`}>{piece.preparationEffort === 'low' ? 'Gering' : piece.preparationEffort === 'medium' ? 'Mittel' : 'Hoch'}</b>{/if}
-					</a>{/each}
+				{#each data.preparationUsages as usage (usage.usageId)}
+					<!-- The helper starts from a route resolved against the configured base path. -->
+					<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
+					<a href={preparationHref(usage.showId, usage.usageId)}>
+						<div class="preparation-copy">
+							<span
+								class="preparation-topics"
+								aria-label={usage.topics.map((topic) => topic.name).join(', ')}
+								>{#each usage.topics as topic (topic.name)}<AppIcon
+										name={topic.iconName}
+									/>{/each}</span
+							>
+							<span
+								><strong>{usage.title}</strong><small>{usage.showTitle} · {usage.sectionName}</small
+								></span
+							>
+						</div>
+						{#if usage.preparationEffort}<b class={`effort ${usage.preparationEffort}`}
+								>{usage.preparationEffort === 'low'
+									? 'Gering'
+									: usage.preparationEffort === 'medium'
+										? 'Mittel'
+										: 'Hoch'}</b
+							>{/if}
+					</a>
+				{/each}
 			</div>
 		</section>{/if}

@@ -4,7 +4,13 @@ import type { Actions, PageServerLoad } from './$types';
 import { requireBarkeeper, requireUser } from '#lib/server/auth.js';
 import { getHistoricalActualDurations } from '#lib/server/completion.js';
 import { getTaxonomy, listPieces, listPieceTemplates } from '#lib/server/content.js';
-import { createShare, deleteShare, listShares, updateShare } from '#lib/server/shares.js';
+import {
+	createShare,
+	deleteShare,
+	listShares,
+	replaceShareToken,
+	updateShare
+} from '#lib/server/shares.js';
 import { berlinLocalToUtc } from '#lib/server/time.js';
 import {
 	addPieceUsage,
@@ -192,6 +198,20 @@ export const actions = {
 			return fail(actionError(cause).status, { intent: 'updateShare', ...actionError(cause) });
 		}
 	},
+	replaceShare: async ({ locals, params, request }) => {
+		const actor = requireBarkeeper(locals.user);
+		const data = await request.formData();
+		try {
+			const token = replaceShareToken(actor, text(data, 'shareId'), params.id);
+			return {
+				intent: 'replaceShare',
+				success: 'Ersatzlink angelegt. Der bisherige Link ist ungültig.',
+				shareUrl: `/freigabe/${token}`
+			};
+		} catch (cause) {
+			return fail(actionError(cause).status, { intent: 'replaceShare', ...actionError(cause) });
+		}
+	},
 	deleteShare: async ({ locals, params, request }) => {
 		const actor = requireBarkeeper(locals.user);
 		const data = await request.formData();
@@ -661,6 +661,7 @@
 								{#if section.usages.length}<div class="usage-list">
 										{#each section.usages as usage, usageIndex (usage.id)}
 											<div
+												id={`usage-${usage.id}`}
 												class="usage-drag-slot"
 												role="presentation"
 												ondragover={(event) => {
@@ -750,6 +751,7 @@
 														</form>
 														<UsageEditorDialog
 															{usage}
+															open={page.url.searchParams.get('usage') === usage.id}
 															revision={data.show.revision}
 															sectionId={section.id}
 															sections={data.show.sections}
@@ -893,7 +895,11 @@
 							placeholder="optional, Sekunden"
 						/></label
 					><label
-						>Twitch-Tags<input name="twitchTags" maxlength="300" placeholder="Gaming, Deutsch" /></label
+						>Twitch-Tags<input
+							name="twitchTags"
+							maxlength="300"
+							placeholder="Gaming, Deutsch"
+						/></label
 					><button class="primary-button" type="submit">Abschnitt hinzufügen</button>
 				</form>

@@ -8,7 +8,13 @@ import {
 	type TaxonomyKind
 } from '#lib/server/content.js';
 import { getMailConfig } from '#lib/server/config.js';
-import { createShare, deleteShare, listShares, updateShare } from '#lib/server/shares.js';
+import {
+	createShare,
+	deleteShare,
+	listShares,
+	replaceShareToken,
+	updateShare
+} from '#lib/server/shares.js';
 import { listShows } from '#lib/server/shows.js';
 import { berlinLocalToUtc } from '#lib/server/time.js';
 import { createTool, listTools, updateTool, type ToolInput } from '#lib/server/tools.js';
@@ -118,6 +124,20 @@ export const actions = {
 			return fail(400, { intent: 'updateShare', error: actionError(cause) });
 		}
 	},
+	replaceShare: async ({ locals, request }) => {
+		const actor = requireBarkeeper(locals.user);
+		const data = await request.formData();
+		try {
+			const token = replaceShareToken(actor, String(data.get('shareId') || ''));
+			return {
+				intent: 'replaceShare',
+				success: 'Ersatzlink angelegt. Der bisherige Link ist ungültig.',
+				shareUrl: `/freigabe/${token}`
+			};
+		} catch (cause) {
+			return fail(400, { intent: 'replaceShare', error: actionError(cause) });
+		}
+	},
 	deleteShare: async ({ locals, request }) => {
 		const actor = requireBarkeeper(locals.user);
 		const data = await request.formData();
@@ -33,6 +33,7 @@
 			{form.success}
 		</div>{/if}
 	<ShareManagement shows={data.shows} shares={data.shares} {form} />
+	<h2 class="section-heading">Schnittstellen</h2>
 	<section class="quiet-panel integration-panel">
 		<div class="panel-heading">
 			<div>
@@ -45,6 +46,8 @@
 			Aktive Feeds werden im gewählten Intervall abgerufen. Beiträge landen zuerst separat im
 			Eingang.
 		</p>
+		<details class="integration-create">
+			<summary class="compact-add-button"><AppIcon name="plus" /> Feed hinzufügen</summary>
 			<form class="integration-form" method="POST" action="?/saveFeed">
 				<label>Name<input name="name" required maxlength="120" /></label>
 				<label
@@ -79,6 +82,7 @@
 				>
 				<button class="primary-button" type="submit">Feed anlegen</button>
 			</form>
+		</details>
 		<div class="integration-list">
 			{#each data.feeds as feed (feed.id)}
 				<details>
@@ -169,9 +173,16 @@
 		{#if form?.technicalToken}<div class="token-reveal" role="status">
 				<strong>Token, einmalig sichtbar</strong><code>{form.technicalToken}</code>
 			</div>{/if}
+		<details class="integration-create">
+			<summary class="compact-add-button"><AppIcon name="plus" /> Zugang hinzufügen</summary>
 			<form class="integration-form" method="POST" action="?/createTechnicalAccess">
 				<label
-				>Name<input name="name" required maxlength="120" placeholder="Redaktionsassistenz" /></label
+					>Name<input
+						name="name"
+						required
+						maxlength="120"
+						placeholder="Redaktionsassistenz"
+					/></label
 				>
 				<label
 					>Berechtigung<select name="permissions"
@@ -182,6 +193,7 @@
 				>
 				<button class="primary-button" type="submit">Zugang anlegen</button>
 			</form>
+		</details>
 		<div class="integration-list">
 			{#each data.technicalAccesses as access (access.id)}
 				<div class="access-row">
@@ -456,6 +468,17 @@
 		gap: 0.8rem;
 		align-items: end;
 	}
+	.integration-create > summary {
+		width: fit-content;
+		cursor: pointer;
+		list-style: none;
+	}
+	.integration-create > summary::-webkit-details-marker {
+		display: none;
+	}
+	.integration-create[open] > .integration-form {
+		margin-top: 0.8rem;
+	}
 	.integration-form label:not(.check-row) {
 		display: grid;
 		gap: 0.35rem;
@@ -472,8 +495,10 @@
 	}
 	.integration-list details,
 	.access-row {
-		border-top: 1px solid var(--color-border);
-		padding-top: 0.8rem;
+		padding: 0.75rem 0.8rem;
+		border: 1px solid var(--line);
+		border-radius: var(--radius-medium);
+		background: var(--panel-soft);
 	}
 	.integration-list summary,
 	.access-row {
@@ -488,7 +513,7 @@
 		gap: 0.2rem;
 	}
 	.integration-list small {
-		color: var(--color-text-muted);
+		color: var(--text-muted);
 	}
 	.row-actions {
 		display: flex;
@@ -1106,6 +1106,7 @@ test('inbox, archive and administration stay concise', async ({ page }) => {
 		await topicIconPicker.getByText('Icon auswählen', { exact: true }).click();
 		const popover = topicIconPicker.locator('.icon-picker-popover');
 		await expect(popover).toBeVisible();
+		await expect(topicIconPicker.getByPlaceholder('Icon suchen')).toBeFocused();
 		const popoverBox = await popover.boundingBox();
 		expect(popoverBox?.x ?? -1).toBeGreaterThanOrEqual(0);
 		expect((popoverBox?.x ?? width) + (popoverBox?.width ?? 1)).toBeLessThanOrEqual(width);
@@ -1414,8 +1415,11 @@ test('live control persists state and exposes only explicit presentation data',
 			.locator('.live-run-item.current')
 			.filter({ hasText: 'Warum praktische Effekte wieder auffallen' })
 	).toBeVisible();
-	await expect(page.getByRole('button', { name: 'Überspringen' })).toBeDisabled();
-	await expect(page.getByRole('button', { name: /Erledigen/ })).toBeDisabled();
+	await expect(
+		page.locator('.live-action-bar').getByRole('button', { name: 'Wiederaufnehmen', exact: true })
+	).toBeVisible();
+	await expect(page.getByRole('button', { name: 'Überspringen' })).toHaveCount(0);
+	await expect(page.getByRole('button', { name: /Erledigen/ })).toHaveCount(0);
 	await expect(
 		output.getByRole('heading', { name: 'Die kleine Konsole mit dem großen Dreh' })
 	).toBeVisible();
@@ -1786,6 +1790,7 @@ test('completion, archive and protected guest sharing work end to end', async ({
 		expect(guestWrite.status()).toBe(403);

 		await page.goto('/verwaltung');
+		await page.getByRole('button', { name: 'Lesefreigaben' }).click();
 		const showCard = page.locator('.share-show-card').filter({ hasText: 'E2E Abschluss' });
 		await expect(showCard.getByText('Abgeschlossen')).toBeVisible();
 		const shareRow = showCard.locator('.share-row').first();
@@ -1854,7 +1859,7 @@ test('pieces autosave safely, detect conflicts and protect uploaded images', asy
 	);
 	await openEditorialField(page, 'Präsentationstext');
 	await page
-		.getByRole('textbox', { name: 'Öffentlicher Text', exact: true })
+		.getByRole('textbox', { name: 'Öffentlicher Vorspann', exact: true })
 		.fill('## Sichere Vorschau\n\n<script>globalThis.e2eXss = true</script> **sichtbar**');
 	await openEditorialField(page, 'Private Recherche');
 	await page.getByRole('button', { name: 'Quelle hinzufügen' }).click();
@@ -2002,7 +2007,7 @@ test('a quickly captured video can be written and previewed before classificatio

 	await page.getByRole('button', { name: 'Präsentation', exact: true }).click();
 	await page.getByRole('radio', { name: 'Video', exact: true }).check();
-	await page.getByRole('combobox', { name: 'Quelle', exact: true }).selectOption('0');
+	await page.getByRole('combobox', { name: 'Video-URL', exact: true }).selectOption('0');
 	await expect(page.locator('.save-indicator')).toContainText('Gespeichert', { timeout: 10_000 });

 	const previewPromise = page.waitForEvent('popup');
@@ -2028,7 +2033,7 @@ test('link preview uses one existing source, persists manual fields and isolates
 	await page.goto('/fundus/piece-console');
 	await page.getByRole('button', { name: 'Präsentation', exact: true }).click();
 	await page.getByRole('radio', { name: 'Linkvorschau', exact: true }).check();
-	await page.getByRole('combobox', { name: 'Quelle', exact: true }).selectOption('0');
+	await page.getByRole('combobox', { name: 'Quelle/URL', exact: true }).selectOption('0');
 	await page.getByLabel('Kartentitel').fill('Manuell korrigierte Linkvorschau');
 	await page.getByLabel('Anreißer').fill('Ein kurzer manueller Anreißer ohne Vorschaubild.');
 	await expect(page.locator('.save-indicator')).toContainText('Gespeichert', { timeout: 10_000 });