Release 0.5.6

README.md

@@ -77,12 +77,27 @@ automatisch; ein sichtbarer Status meldet Erfolg, Fehler oder eine parallele
 Änderung. In diesem Fall muss die Seite neu geladen werden, bevor erneut
 gespeichert wird.
 
+Bereits gesendete Pieces und Pieces mit einer Einplanung in einer noch nicht
+abgeschlossenen Sendung sind standardmäßig ausgeblendet. Als gesendet gilt nur
+eine erledigte Verwendung in einer abgeschlossenen Sendung; übersprungene oder
+reservierte Inhalte gelten nicht als gesendet. Über **Auch verwendete Inhalte
+zeigen** und **Auch eingeplante Inhalte zeigen** lassen sich beide Gruppen
+unabhängig einblenden. Dann erscheinen auch Datum, Sendung und die aufklappbare
+Verwendungshistorie.
+
 Markdown ist in Einleitung, Recherche, Moderation, Überleitung und Präsentation
 möglich. Die Ausgabe wird serverseitig auf eine begrenzte Auswahl sicherer
 Elemente und Links reduziert. Bilder dürfen höchstens 5 MB groß sein und müssen
 als JPEG, PNG, WebP oder GIF erkannt werden. Sie liegen im konfigurierten
 Uploadverzeichnis und sind nur über eine angemeldete Route erreichbar.
 
+Für die Präsentation kann ein Piece alternativ genau eine seiner vorhandenen
+Quellen als Linkkarte oder Video verwenden. Linktitel, Anreißer und Bildadresse
+lassen sich manuell korrigieren. **Vorschau laden** ruft Metadaten ausdrücklich
+neu ab; manuell geänderte Felder werden dabei nicht überschrieben. Die
+**Präsentation testen**-Ansicht öffnet den aktuellen Piece-Inhalt isoliert und
+verändert weder eine Sendung noch deren laufende Ausgabe.
+
 ## Sendungen planen
 
 Unter **Sendungen** lässt sich ein neuer Stream leer, mit dem Standardablauf
@@ -92,11 +107,21 @@ eingeplanten Pieces. Die Reservebank zählt nie zur Planzeit.
 
 Der sendefertige Fundus steht neben dem Ablauf. Pieces können mehrfach
 eingeplant und je Verwendung mit eigenem Titel, eigener Dauer und eigenen
-Redaktionstexten bearbeitet werden, ohne das Original zu verändern. Abschnitte
+Redaktionstexten bearbeitet werden, ohne das Original zu verändern. Das
-und Verwendungen lassen sich per Drag-and-drop sowie gleichwertig mit sichtbaren
+Stift-Symbol öffnet dafür einen auch mobil scrollbaren Editor-Dialog. **Aus
-Schaltflächen und Auswahlfeldern verschieben. Twitch-Titel und Ankündigung sind
+Fundus aktualisieren** übernimmt auf Wunsch Titel, Dauer und Redaktionstexte des
-kopierbar. Gleichzeitige Änderungen werden über die Revision der gesamten
+aktuellen Originals; eigene Notizen, Live-Status und gemessene Zeiten bleiben
-Sendung erkannt und nicht still überschrieben.
+erhalten. Abschnitte und Verwendungen lassen sich per Drag-and-drop sowie
+gleichwertig mit sichtbaren Schaltflächen und Auswahlfeldern verschieben.
+Twitch-Titel und Ankündigung sind kopierbar. Gleichzeitige Änderungen werden
+über die Revision der gesamten Sendung erkannt und nicht still überschrieben.
+
+Die Quellspalte blendet gesendete und bereits in derselben Sendung eingeplante
+Originale zunächst aus; beide Gruppen lassen sich unabhängig wieder anzeigen.
+Eine konkrete Einplanung kann direkt hinter sich dupliziert werden. Dabei
+bleiben ihre angepassten Texte und ihre Dauer erhalten, während Live-Status und
+gemessene Zeiten neu beginnen. **Piece duplizieren** im Fundus erzeugt dagegen
+weiterhin einen eigenständigen Fundusinhalt.
 
 ## Live moderieren und präsentieren
 
@@ -113,11 +138,18 @@ sortieren beziehungsweise als nächster Beitrag einfügen.
 
 Das separate Präsentationsfenster unter `/heinzlive/...` verwendet einen langen,
 widerrufbaren Zufallstoken. Es ändert sich ausschließlich durch die Aktion
-**Präsentieren** und erhält nur Präsentationstext, öffentliche Quellen und die
+**Präsentieren** und erhält nur den bei der Einplanung gespeicherten Text-, Link-
-zum präsentierten Piece gehörenden Bilder. Recherche, Moderationsnotizen,
+oder Video-Snapshot. YouTube- und TikTok-Adressen werden auf validierte IDs
-eigene Notizen, Kontodaten und interne Dateipfade werden weder im HTML noch im
+reduziert und ohne Autoplay in offiziellen Player-Iframes dargestellt. Andere
-JSON-Zustand ausgeliefert. Der Token ist ein Zugangsgeheimnis und darf nicht
+oder unvollständige Videoquellen erscheinen als Linkkarte. Recherche,
-weitergegeben oder protokolliert werden.
+Moderationsnotizen, eigene Notizen, Kontodaten und interne Dateipfade werden
+weder im HTML noch im JSON-Zustand ausgeliefert. Der Token ist ein
+Zugangsgeheimnis und darf nicht weitergegeben oder protokolliert werden.
+
+Metadaten und externe Vorschaubilder werden ausschließlich serverseitig mit
+DNS-, Redirect-, Zeit- und Größenlimits abgerufen. Private und lokale
+Netzwerkziele sind gesperrt. Eingebettetes HTML oder Skripte einer Quellseite
+werden nicht übernommen.
 
 ## Befehle
 
@@ -194,6 +226,7 @@ Medien und redaktionellen Inhalten werden dadurch nicht verändert.
 
 Die direkten Laufzeit- und Werkzeugabhängigkeiten verwenden MIT- oder
 Apache-2.0-Lizenzen: Svelte/SvelteKit, Vite, Vitest, ESLint und
-`better-sqlite3`, `@node-rs/argon2`, Marked, sanitize-html und file-type sind
+`better-sqlite3`, `@node-rs/argon2`, Marked, sanitize-html, file-type und
-MIT-lizenziert; Nodemailer verwendet MIT-0, TypeScript und Playwright stehen
+Metascraper sind MIT-lizenziert; Nodemailer verwendet MIT-0, TypeScript und
-unter Apache-2.0. Die Lockdatei fixiert den tatsächlich installierten Baum.
+Playwright stehen unter Apache-2.0. Die Lockdatei fixiert den tatsächlich
+installierten Baum.

docs/ACCEPTANCE.md

@@ -132,19 +132,152 @@
 | Getrennte sichere Ausgabe             | anonymer Browserkontext prüft Text, Bild, HTML, JSON und fremde Medien ohne private Daten       | erfüllt am 22.10.2026 |
 | Reserve und Reihenfolge               | Reserve als nächstes Piece eingefügt; offene Reihenfolge und serverseitige Live-Grenze geprüft  | erfüllt am 22.10.2026 |
 | Popup- und Verbindungsfehler sichtbar | blockiertes Popup sowie unterbrochenes und wiederhergestelltes State-Polling im Browser geprüft | erfüllt am 22.10.2026 |
+| Persistente Linkvorschau              | Quellwahl, manuelle Felder, Reload, fehlendes Bild und isolierte Testansicht im Browser geprüft | erfüllt am 22.10.2026 |
+| Sichere Metadatenabrufe               | Tests sperren private IPv4-/IPv6-Ziele; Redirect-, Größen- und Zeitlimits sind implementiert    | erfüllt am 22.10.2026 |
+| Validierte Videoplayer                | YouTube-URL-Varianten, TikTok-ID, Zeitmarke und Playerwechsel automatisiert geprüft             | erfüllt am 22.10.2026 |
+| Präsentationssnapshot                 | Einplanung, Duplikation und explizite Aktualisierung aus dem Original im Servicetest geprüft    | erfüllt am 22.10.2026 |
 | Reale OBS-Browserquelle               | lokale tokenisierte Browserausgabe vorhanden; kein OBS auf der Prüfmaschine                     | offen                 |
+| Reale Anbieterwiedergabe              | automatisierte Tests fangen YouTube-/TikTok-Requests lokal ab                                   | offen                 |
 
 ## Ausgeführte Prüfungen Etappe 5
 
 - `npm run lint`: erfolgreich
 - `npm run check`: 0 Fehler und 0 Warnungen
-- `npm test`: 20 Tests in 5 Dateien erfolgreich
+- `npm test`: 29 Tests in 6 Dateien erfolgreich
 - `npm run build`: erfolgreich mit `@sveltejs/adapter-node`
-- `npm run test:e2e`: 11 von 11 Browsertests erfolgreich
+- `npm run test:e2e`: 14 von 14 Browsertests erfolgreich
 - Anonymer zweiter Chromium-Kontext mit Präsentationstext, Quelle, geschütztem
   Bild und gefiltertem JSON geprüft
 - Mobile Aufnahme der Live-Steuerung bei 390 × 844 Pixeln und Desktopaufnahme
   der heinzlive-Ausgabe visuell kontrolliert
 - Popup-Blockade sowie Verbindungsabbruch und automatische Wiederverbindung im
   Browser geprüft
+- YouTube-/TikTok-Iframes, Playerwechsel, mobile Hochformatausgabe,
+  Linkkartenvorschau ohne Bild, isolierte Testansicht und private Datenfilterung
+  mit lokal abgefangenen Anbieterrequests geprüft
+- SSRF-Blockade einer privaten Zieladresse über die sichtbare Editorfehlermeldung
+  geprüft
 - `bash -n start.sh` und `git diff --check`: erfolgreich
+
+## Gezielte Fundus- und Einplanungsanpassung
+
+| Kriterium                                   | Nachweis                                                                                   | Stand                 |
+| ------------------------------------------- | ------------------------------------------------------------------------------------------ | --------------------- |
+| Gesendet korrekt abgeleitet                 | Servicetest schließt offene, übersprungene, Reserve- und nicht abgeschlossene Nutzung aus  | erfüllt am 22.10.2026 |
+| Historie und Fundusfilter                   | Browser prüft letztes Datum, Sendungslink, weitere Verwendungen und Sofortfilter           | erfüllt am 22.10.2026 |
+| Unabhängige Quellfilter                     | Browser kombiniert verwendet/eingeplant getrennt und erhält sie über Suchfilter            | erfüllt am 22.10.2026 |
+| Reserve und Mehrfacheinplanung              | Reserve zählt als eingeplant; bewusstes Wiedereinblenden erlaubt weitere Einplanung        | erfüllt am 22.10.2026 |
+| Rückkehr nach Entfernen                     | Browser entfernt die letzte Reserveeinplanung und bietet das Original sofort wieder an     | erfüllt am 22.10.2026 |
+| Angepasste Einplanung dupliziert            | Service und Browser prüfen Position, Texte, Notizen, Dauer und Reload                      | erfüllt am 22.10.2026 |
+| Live-Zustand des Duplikats zurückgesetzt    | Servicetest prüft `open`, neue ID und fehlende Zeitintervalle                              | erfüllt am 22.10.2026 |
+| Original unverändert                        | Piece-Anzahl und Original-ID vor und nach Einplanungsduplikation verglichen                | erfüllt am 22.10.2026 |
+| Speicherfehler nicht als Erfolg dargestellt | veraltete Revision rollt Duplikation vollständig zurück                                    | erfüllt am 22.10.2026 |
+| Globale aktive Einplanung ausgeblendet      | Browser prüft den unabhängigen Filter über mehrere nicht abgeschlossene Sendungen          | erfüllt am 22.10.2026 |
+| Snapshot ausdrücklich aktualisiert          | Service prüft neue Originaltexte und erhaltene Notizen/Intervalle; Browser löst Aktion aus | erfüllt am 22.10.2026 |
+| Fehlendes Original atomar behandelt         | Servicetest prüft Fehler und unveränderte Sendungsrevision                                 | erfüllt am 22.10.2026 |
+| Verwendungsdialog responsiv                 | Browser prüft Desktop/Mobil, Reserve, erreichbare Aktionen und sichtbare Konfliktfehler    | erfüllt am 22.10.2026 |
+
+## Ausgeführte Prüfungen Fundus und Einplanung
+
+- `npm test`: 22 Tests in 5 Dateien erfolgreich
+- `npm run lint`: erfolgreich
+- `npm run check`: 0 Fehler und 0 Warnungen
+- gezielter Playwright-Lauf: 4 von 4 Browsertests erfolgreich
+- `npm run test:e2e`: 12 von 12 Browsertests erfolgreich
+- Desktopansichten von Fundushistorie, kombinierten Sendungsfiltern und
+  Verwendungsdialog sowie mobile Quellspalte und mobiler Dialog bei 390 × 844
+  Pixeln visuell kontrolliert
+- `npm run build`: erfolgreich mit `@sveltejs/adapter-node`
+- `bash -n start.sh` und `git diff --check`: erfolgreich
+
+## Redaktionelles Piece-Arbeitsblatt
+
+| Kriterium                                | Nachweis                                                                                          | Stand                 |
+| ---------------------------------------- | ------------------------------------------------------------------------------------------------- | --------------------- |
+| Schreiben steht im Mittelpunkt           | Desktop- und Mobilprüfung zeigt Fundstück, Recherche und drei Sendungstexte im primären Lesefluss | erfüllt am 22.10.2026 |
+| Kontext bleibt vollständig erreichbar    | Quellen, Einordnung, Präsentation und Bilder auf Desktop sowie als vier mobile Werkzeuge geprüft  | erfüllt am 22.10.2026 |
+| Textfelder unabhängig bearbeitbar        | Recherche und Moderationsstichpunkte im Browser gleichzeitig geöffnet und gespeichert             | erfüllt am 22.10.2026 |
+| Bestehender Formvertrag bleibt erhalten  | Autosave, Reload, Taxonomie, Quelle, Markdown, Upload, Archiv und Duplikat im Browser durchlaufen | erfüllt am 22.10.2026 |
+| Konflikte und Speicherfehler sichtbar    | parallele Revision sowie Offline-Autosave mit erfolgreicher manueller Wiederholung geprüft        | erfüllt am 22.10.2026 |
+| Schneller Video-Einstieg ohne Einordnung | Link im Eingang aufgenommen, direkt geöffnet, beschrieben und isoliert als Video getestet         | erfüllt am 22.10.2026 |
+| Responsive Darstellung und beide Themes  | 1440 × 1000 und 390 × 844 in Light/Dark ohne horizontalen Überlauf visuell kontrolliert           | erfüllt am 22.10.2026 |
+
+## Ausgeführte Prüfungen Piece-Arbeitsblatt
+
+- `npm run lint`: erfolgreich
+- `npm run check`: 0 Fehler und 0 Warnungen
+- `npm test`: 29 Tests in 6 Dateien erfolgreich
+- `npm run build`: erfolgreich mit `@sveltejs/adapter-node`
+- gezielter Playwright-Lauf für Autosave, Offline-Fehler, Konflikt und Upload:
+  1 von 1 Browsertest erfolgreich
+- `npm run test:e2e`: 15 von 15 Browsertests erfolgreich
+- Desktop Light/Dark sowie Smartphone Light/Dark und mobiles
+  Präsentationswerkzeug visuell kontrolliert; langer Titel bricht vollständig um,
+  Werkzeugfläche ist opak und die Speicherleiste überdeckt mobil keine Eingaben
+- `bash -n start.sh` und `git diff --check`: erfolgreich
+
+## Oberflächenrelease 0.5.4
+
+| Kriterium                                  | Nachweis                                                                                       | Stand                 |
+| ------------------------------------------ | ---------------------------------------------------------------------------------------------- | --------------------- |
+| Klare Hierarchie in beiden Themes          | Eingang, Fundus, Editor, Sendungsplan und Live-Steuerung in Light/Dark visuell kontrolliert    | erfüllt am 22.10.2026 |
+| Exakte heinzlive-Darkmode-Farben           | berechnete Theme-Tokens und Screenshots der dunklen Arbeitsansichten geprüft                   | erfüllt am 22.10.2026 |
+| Responsive Darstellung ohne Seitenüberlauf | Chromium-Messung bei 1440 × 1000 und 390 × 844 Pixeln auf allen gezielt geprüften Ansichten    | erfüllt am 22.10.2026 |
+| Sendungsplan-Aktionen bleiben erreichbar   | drei sichtbare Aktionen einer Planzeile liegen waagerecht auf gleicher Höhe; Mobilbild geprüft | erfüllt am 22.10.2026 |
+| Fokus und reduzierte Bewegung              | sichtbarer Cyan-Fokusring und bestehende `prefers-reduced-motion`-Regeln im Stylesheet geprüft | erfüllt am 22.10.2026 |
+
+## Ausgeführte Prüfungen Oberflächenrelease 0.5.4
+
+- `npm run check`: 0 Fehler und 0 Warnungen
+- `npm run build`: erfolgreich mit `@sveltejs/adapter-node`
+- gezielter Chromium-Lauf für Eingang, Fundus, Piece-Editor, Sendungsplan und
+  Live-Steuerung bei 1440 × 1000 und 390 × 844 Pixeln in Light/Dark ohne
+  Konsolenfehler oder horizontalen Seitenüberlauf
+- Desktop- und Mobilaufnahmen aller genannten Ansichten visuell kontrolliert
+- vollständige Unit- und E2E-Matrix nicht erneut ausgeführt, weil dieser Release
+  ausschließlich Darstellung und redaktionelle Kurztexte verändert
+- `git diff --check`: erfolgreich
+
+## Oberflächenkorrektur 0.5.5
+
+| Kriterium                             | Nachweis                                                                                    | Stand                 |
+| ------------------------------------- | ------------------------------------------------------------------------------------------- | --------------------- |
+| Nachtblau und Glaswirkung erkennbar   | berechnete Transparenz/Unschärfe und Desktop-/Mobilaufnahmen in Darkmode geprüft            | erfüllt am 22.10.2026 |
+| Schreibfelder im Ruhezustand sichtbar | deckende Feldfarbe, feine Kontur, Innenabstand und Textcursor im Piece-Editor geprüft       | erfüllt am 22.10.2026 |
+| Goldener Tastaturfokus                | berechnete Fokusfarbe und Fokus-Schatten am Titelfeld geprüft; Cyanrahmen nicht mehr aktiv  | erfüllt am 22.10.2026 |
+| Inhaltsgerechte Feldhöhen             | kurze Einleitung ist niedriger als ausführliche Moderationsfläche; beide bleiben skalierbar | erfüllt am 22.10.2026 |
+| Lightmode und Smartphone erhalten     | fünf Arbeitsansichten bei 1440 × 1000 und 390 × 844 Pixeln ohne Seitenüberlauf geprüft      | erfüllt am 22.10.2026 |
+
+## Ausgeführte Prüfungen Oberflächenkorrektur 0.5.5
+
+- `npm run check`: 0 Fehler und 0 Warnungen
+- `npm run build`: erfolgreich mit `@sveltejs/adapter-node`
+- gezielter Chromium-Lauf in Light/Dark und Desktop/Mobil ohne Konsolenfehler
+  oder horizontalen Seitenüberlauf; Glas-, Feld- und Fokuswerte zusätzlich
+  programmatisch geprüft
+- vollständige Unit- und E2E-Matrix gemäß Auftrag nicht erneut ausgeführt
+- `git diff --check`: erfolgreich
+
+## Oberflächenkorrektur 0.5.6
+
+| Kriterium                                     | Nachweis                                                                                          | Stand                 |
+| --------------------------------------------- | ------------------------------------------------------------------------------------------------- | --------------------- |
+| Gold-/Violettlicht und Glasflächen sichtbar   | Fundus und Editor in Light/Dark auf Desktop und Mobil visuell sowie über berechnete Werte geprüft | erfüllt am 22.10.2026 |
+| Schreibflächen ruhig und eindeutig abgegrenzt | deckende Feldfarbe, Kontur und goldener Fokus im geöffneten Piece-Editor geprüft                  | erfüllt am 22.10.2026 |
+| Neuanlage und Suche unmittelbar erreichbar    | sichtbare Fundusaktionen sowie geöffnete Vorlagenauswahl auf Desktop und Mobil geprüft            | erfüllt am 22.10.2026 |
+| Zusatzfilter und Zeilenaktionen zugänglich    | native Aufklappelemente für Filter und Aktionen per Browserinteraktion geprüft                    | erfüllt am 22.10.2026 |
+| Funduszeilen per Tastatur zu öffnen           | erster Titeleintrag fokussiert, mit Eingabetaste geöffnet und Editoraufruf geprüft                | erfüllt am 22.10.2026 |
+| Lightmode und Smartphone ohne Seitenüberlauf  | Chromium-Messung bei 1440 × 1000 und 390 × 844 Pixeln in beiden Themes                            | erfüllt am 22.10.2026 |
+
+## Ausgeführte Prüfungen Oberflächenkorrektur 0.5.6
+
+- `npm run check`: 0 Fehler und 0 Warnungen
+- gezielter Chromium-Lauf für Fundus und geöffneten Piece-Editor bei
+  1440 × 1000 und 390 × 844 Pixeln in Light/Dark ohne Konsolenfehler oder
+  horizontalen Seitenüberlauf
+- Neuanlage, Zusatzfilter, Aktionsmenü, Tastaturöffnung, Glaswerte und goldener
+  Fokus automatisiert kontrolliert; alle erzeugten Desktop-/Mobilaufnahmen
+  visuell geprüft
+- Produktionsbuild sowie vollständige Unit- und E2E-Matrix gemäß Auftrag nicht
+  ausgeführt
+- `git diff --check`: erfolgreich

docs/ARCHITECTURE.md

@@ -97,6 +97,10 @@ erhalten ausschließlich kompakte Piece-Daten; private Recherche und vollständi
 Redaktionstexte werden nur an den angemeldeten Editor ausgeliefert. Themen und
 Abschnittskategorien sind Mehrfachzuordnungen, das Format bleibt eine einzelne
 unabhängige Zuordnung. Quellen werden gemeinsam mit einem Piece atomar ersetzt.
+Ein Piece kann für die Präsentation Text oder genau eine vorhandene Quelle als
+Linkkarte beziehungsweise Video auswählen. Abgerufene Metadaten und Kennzeichen
+für manuell korrigierte Felder liegen am Piece; ein erneuter Abruf überschreibt
+diese Felder nicht.
 
 Jedes Piece besitzt eine ganzzahlige Revision. Speichern, Archivieren und
 Medienänderungen verwenden ein bedingtes Update auf die erwartete Revision.
@@ -124,9 +128,28 @@ erhöht sie atomar. Abgeschlossene Sendungen sind bereits an dieser Grenze gegen
 weitere Bearbeitung geschützt.
 
 Beim Einplanen werden Titel, Dauer, Einleitung, Recherche, Moderation,
-Überleitung und Präsentation aus dem sendefertigen Piece kopiert. Eigene Notizen
+Überleitung und der vollständige Präsentationszustand aus dem sendefertigen
-liegen ausschließlich an der Verwendung. Die Referenz zum Original bleibt für
+Piece kopiert. Dazu gehören Modus, ausgewählte Quelladresse samt Zeitmarke,
-Historie und Nachvollziehbarkeit erhalten, wird aber nicht live gespiegelt.
+Metadaten und validierte Anbieter-ID. Eigene Notizen liegen ausschließlich an
+der Verwendung. Die Referenz zum Original bleibt für Historie und
+Nachvollziehbarkeit erhalten, wird aber nicht live gespiegelt. Eine explizite
+Aktualisierung aus dem Fundus ersetzt Titel, Dauer, alle fünf Redaktionstexte
+und den Präsentationszustand atomar aus dem referenzierten Original. Eigene
+Notizen, Status und vorhandene Live-Intervalle werden dabei nicht verändert;
+fehlt das Original oder ist die Sendungsrevision veraltet, wird die gesamte
+Mutation verworfen.
+Eine Einplanung zu duplizieren kopiert genau diesen Snapshot mit derselben
+Original-ID direkt hinter das Ausgangselement. Die neue Verwendung erhält den
+Status `open`, eine neue ID und damit weder Live-Referenzen noch Zeitintervalle.
+
+Die Verwendungshistorie wird nicht separat gepflegt. Sie wird über die
+Original-ID aus Verwendungen mit Status `done` in abgeschlossenen Sendungen
+abgeleitet; Reservebank und alle anderen Verwendungs- oder Sendungsstatus sind
+ausgeschlossen. Über dieselbe Original-ID wird unabhängig davon ermittelt, ob
+mindestens eine Verwendung in einer noch nicht abgeschlossenen Sendung liegt.
+Der allgemeine Fundus blendet diesen globalen Kontext standardmäßig aus. Die
+Quellspalte einer Sendung betrachtet für ihren separaten Einplanungsfilter nur
+die aktuelle Sendung einschließlich Reservebank.
 
 Jede Sendung besitzt intern genau einen ausgeblendeten Reserveabschnitt. Dadurch
 verwenden Plan und Reserve dieselbe geprüfte Verwendungslogik, während die
@@ -139,17 +162,24 @@ die Abschnitte mit neuen IDs kopiert; spätere Änderungen an der Sendung könne
 die Vorlage deshalb nicht verändern.
 
 Die Editorformulare bleiben progressive SvelteKit-Form-Actions, werden im
-Browser aber mit `use:enhance` gesendet. Dadurch bleibt das Dokument bei
+Browser aber mit `use:enhance` gesendet. Der Verwendungseditor liegt in einem
-Planungsmutationen bestehen; nur die serverseitigen Seitendaten werden
+nativen Dialog, den ein beschrifteter Icon-Button öffnet. Dadurch bleibt das
-aktualisiert. Ladeanzeige und FLIP-Animation liegen am betroffenen Abschnitt
+Dokument bei Planungsmutationen bestehen; nur die serverseitigen Seitendaten
-oder an der betroffenen Verwendung. Eindeutige Drag-Griffe übertragen entweder
+werden aktualisiert. Ladeanzeige und FLIP-Animation liegen am betroffenen
-eine Quellenkopie, einen Abschnitt oder eine Verwendung auf dieselben
+Abschnitt oder an der betroffenen Verwendung. Eindeutige Drag-Griffe übertragen
+entweder eine Quellenkopie, einen Abschnitt oder eine Verwendung auf dieselben
 serverseitig geprüften Actions wie die alternativen Schaltflächen. Während des
 Ziehens bleibt das Original transparent an seinem Ausgangsort; eine flüchtige
 Vorschau in der Liste belegt bereits die anhand der Zeigerposition berechnete
 Zielhöhe und verdrängt dadurch die benachbarten Elemente. Persistiert wird erst
 beim Loslassen.
 
+Die Ausschlussfilter für gesendete und bereits eingeplante Pieces arbeiten
+clientseitig auf der serverseitig berechneten Kontextmenge. Ihr Zustand wird
+ohne Navigation in die URL übernommen und bei nachfolgenden Suchfiltern
+mitgesendet. Planmutationen invalidieren anschließend die Seitendaten, sodass
+das Entfernen der letzten Einplanung ein Original unmittelbar wieder anbietet.
+
 ## Live-Modus und Präsentationsgrenze
 
 `src/lib/server/live.ts` ist die Transaktionsgrenze der Live-Durchführung. Der
@@ -168,7 +198,27 @@ neu erzeugter Ausgabezugang widerruft den vorherigen. Page, Polling-JSON und
 Medienroute leiten ihre Daten aus einer eigenen Positivliste ab. Bilder werden
 nur ausgeliefert, wenn sie zum aktuell ausdrücklich präsentierten Piece gehören.
 Normale Auswahl, Fortschaltung oder Wiederaufnahme verändern den
-Präsentationsstand nicht.
+Präsentationsstand nicht. Die öffentliche Projektion liest ausschließlich den
+gespeicherten Verwendungssnapshot; spätere Änderungen am Original erscheinen
+erst nach einer ausdrücklichen Snapshot-Aktualisierung.
+
+Linkmetadaten werden nur auf ausdrückliche Aktion durch
+`src/lib/server/presentation.ts` geladen. Jeder HTTP(S)-Abruf löst den Zielhost
+serverseitig auf, sperrt lokale und private IPv4-/IPv6-Ziele und bindet den
+Request an die geprüfte Adresse. Dieselbe Prüfung gilt nach höchstens drei
+Redirects. Zeit- und Größenlimits begrenzen HTML, Anbieter-Metadaten und Bilder.
+Externe Vorschaubilder gelangen nur über token- beziehungsweise
+sitzungsgebundene Proxyrouten in die Ausgabe; fremdes HTML und fremde Skripte
+werden nie übernommen.
+
+Videoquellen werden aus der gespeicherten URL erneut auf eine streng validierte
+YouTube- oder TikTok-ID reduziert. Der Browser erhält nur daraus erzeugte
+offizielle Embed-URLs, startet sie nicht automatisch und ersetzt das Iframe bei
+jedem Inhaltswechsel. YouTube erhält die Startsekunde als Embed-Parameter;
+TikTok wird nach dessen Bereitschaft über die offizielle Player-`postMessage`-
+Schnittstelle positioniert. Nicht unterstützte oder unvollständige Videoquellen
+fallen auf eine normale Linkkarte zurück. Eine authentifizierte Testansicht
+verwendet denselben Renderer, schreibt aber keinen Live-Zustand.
 
 Die Ausgabe synchronisiert ihren kleinen öffentlichen Zustand per
 `no-store`-Polling. Der letzte gültige Inhalt bleibt bei einem Verbindungsfehler
@@ -189,10 +239,22 @@ Der Live-Modus ist eine eigene, fokussierte Arbeitsansicht. Die
 Präsentationsausgabe verwendet eine separate, strikt reduzierte Datenansicht
 ohne interne Anwendungsnavigation.
 
-## Sicherheitsgrenzen ab den Folgeetappen
+Der eigenständige Piece-Editor ordnet denselben Formvertrag als redaktionelles
+Arbeitsblatt an. Titel, Fundstück, private Recherche sowie Einleitung,
+Moderationsstichpunkte und Überleitung bilden die primäre Schreibfläche.
+Quellen, Einordnung, Präsentation und eine Bildzusammenfassung liegen auf breiten
+Ansichten in einer kontextuellen Seitenleiste; auf kleinen Ansichten öffnen
+dieselben DOM-Formfelder als fokussierbare Werkzeugflächen und werden dabei nicht
+neu erzeugt oder ausgehängt. `EditorialMarkdownField` hält Lese- und
+Bearbeitungszustand je Textfeld lokal, während alle Werte weiterhin gemeinsam
+über die bestehende `save`-Action und Piece-Revision gespeichert werden. Die
+separate Bild-Action und alle Präsentationsactions bleiben eigene serverseitige
+Mutationen.
+
+## Sicherheitsgrenzen
 
 Authentifizierung und Autorisierung werden seit Etappe 2 serverseitig an jeder
 betroffenen Route und Action geprüft. Markdown und fremdes HTML werden vor
-Ausgabe bereinigt. Uploadzugriff folgt denselben Rechten. Spätere
+Ausgabe bereinigt. Uploadzugriff folgt denselben Rechten. Netzwerkabrufe für
-Netzwerkabrufe erhalten Schutz gegen interne Ziele, Größen-/Zeitlimits und
+Präsentationsmetadaten und Vorschaubilder schützen interne Ziele auch nach
-kontrollierte Redirects.
+DNS-Auflösung und Redirects und besitzen Größen-, Zeit- und Redirectlimits.

docs/DECISIONS.md

@@ -1,6 +1,6 @@
 # Entscheidungen
 
-Stand der Quellenprüfung: 21. Oktober 2026. Verwendet wurden offizielle
+Stand der Quellenprüfung: 22. Oktober 2026. Verwendet wurden offizielle
 Dokumentationen und die npm-Registry für konkrete Paket-Metadaten.
 
 ## D-001: SvelteKit 3 und Node-Unterstützung
@@ -225,3 +225,54 @@ Ein zufälliger 256-Bit-Token steht in der URL, während SQLite nur seinen
 SHA-256-Hash speichert. Medienzugriff prüft Token, aktuelle Präsentation und
 Bildzuordnung gemeinsam. Synchronisierung erfolgt über kleines `no-store`-
 Polling statt über eine dauerhaft offene Serververbindung.
+
+## D-018: Verwendung aus bestehenden Sendungsdaten ableiten
+
+„Gesendet“ ist kein Zustand am Fundus-Piece. Die Anzeige wird ausschließlich
+aus der vorhandenen Original-ID, einer erledigten Verwendung außerhalb der
+Reservebank und dem Status `completed` ihrer Sendung abgeleitet. Dadurch können
+Einplanung, Reserve und Überspringen ein Original nicht versehentlich als
+gesendet markieren, und mehrere tatsächliche Verwendungen bleiben als Historie
+sichtbar.
+
+Eine Duplikation im Sendungsablauf kopiert den konkreten Verwendungssnapshot und
+nicht das Original-Piece. Die neue ID, der Status `open` und fehlende
+Live-Intervalle trennen sie von der bisherigen Durchführung. Der allgemeine
+Verwendungseditor darf den Live-Status nicht mehr aus Formulardaten schreiben;
+Statuswechsel bleiben der Live-Geschäftslogik vorbehalten.
+
+Eine bestehende Einplanung wird nicht automatisch mit späteren Änderungen am
+Original synchronisiert. Die ausdrücklich ausgelöste Aktion **Aus Fundus
+aktualisieren** überschreibt nur Titel, Dauer und Redaktionstexte. Eigene
+Notizen, Status und Messintervalle bleiben erhalten. Alle Zuordnungen und Filter
+verwenden ausschließlich `original_piece_id`, niemals veränderliche Titel. Im
+allgemeinen Fundus gilt „eingeplant“ global für jede nicht abgeschlossene
+Sendung; im Sendungsbau gilt es lokal für die aktuelle Sendung samt Reserve.
+
+## D-019: Lokale Linkmetadaten und streng abgeleitete Video-Embeds
+
+Sendewerk verwendet Metascraper ausschließlich serverseitig, um Titel,
+Beschreibung, Bild und Herausgeber einer ausdrücklich gewählten vorhandenen
+Quelle zu ermitteln. Die Ergebnisse werden gespeichert und nicht bei jedem
+Seitenaufruf neu geladen. Manuell korrigierte Felder haben Vorrang. Ein eigener
+HTTP(S)-Client prüft Protokoll, Port, DNS-Ergebnisse und jedes Redirectziel,
+bindet den Request an die geprüfte öffentliche Adresse und begrenzt Redirects,
+Laufzeit und Antwortgröße. Damit ist weder ein externer Vorschaudienst noch die
+Übernahme fremden HTMLs erforderlich.
+
+Player werden nur für streng erkannte YouTube- und TikTok-URLs erzeugt. Aus der
+validierten Anbieter-ID baut Sendewerk die offiziellen Embed-Adressen selbst;
+gespeichertes oder fremd geliefertes Embed-HTML wird nicht verwendet. YouTube
+nutzt die datenschutzreduzierte `youtube-nocookie.com`-Adresse und den
+`start`-Parameter. TikTok erhält eine Startposition nach `onPlayerReady` über
+die dokumentierte Player-`postMessage`-API. Autoplay bleibt ausgeschaltet, und
+ein Inhaltswechsel ersetzt das Iframe vollständig.
+
+Quellen:
+
+- <https://github.com/microlinkhq/metascraper>
+- <https://developers.google.com/youtube/player_parameters>
+- <https://developers.google.com/youtube/terms/required-minimum-functionality>
+- <https://developers.tiktok.com/doc/embed-player>
+- <https://developers.tiktok.com/doc/embed-videos>
+- <https://owasp.org/www-community/attacks/Server_Side_Request_Forgery>

docs/STATUS.md

@@ -7,6 +7,66 @@ Anmeldung, Rollen, persistente Inhaltsbearbeitung, Sendungsplanung,
 Live-Steuerung, Präsentationsausgabe und lokaler Betriebsweg sind dokumentiert.
 Etappe 6 wurde nicht begonnen.
 
+## Oberflächenkorrektur 0.5.6
+
+- sichtbare statische Gold- und Blauviolettlichter hinter den halbtransparenten
+  Navigations- und Editorflächen
+- klarere Glaswirkung in Navigation sowie Kopf, Tabs und Fuß des Piece-Editors;
+  Schreibflächen bleiben deckend, ruhig und goldfokussiert
+- Fundus mit dauerhaft sichtbarer Suche und Neuanlage, aufklappbaren Zusatzfiltern
+  und inhaltsorientierten, vollständig anklickbaren Zeilen
+- vorhandene Vorschaubilder beziehungsweise kleine Symbolplatzhalter sowie
+  gebündelte Menüs für Duplizieren und Archivieren
+- bestehende Server-Actions, Filterlogik und Editor-Bereiche unverändert
+
+Geprüft wurden `npm run check` sowie Fundus und geöffneter Piece-Editor in
+Chromium bei 1440 × 1000 und 390 × 844 Pixeln in Light/Dark. Die gezielte
+Kontrolle umfasste Tastaturöffnung, Menüs, Fokus, Glaswerte, Seitenüberlauf und
+visuell geprüfte Screenshots. Produktionsbuild und vollständige Testmatrix wurden
+gemäß Auftrag nicht ausgeführt.
+
+## Oberflächenkorrektur 0.5.5
+
+- dunkle Grundfläche mit sehr zurückhaltenden Gold-/Cyan-Lichtfeldern innerhalb
+  der Anwendung statt gleichmäßig deckender Blauflächen
+- Navigation, große Arbeitsflächen und Piece-Dialog als dunkles beziehungsweise
+  helles Glas mit feiner Lichtkante, Unschärfe und ruhigem Schatten
+- Gold für Dialogkontur, Fokus, aktive Zustände und Hauptaktionen; Cyan nur noch
+  für ergänzende redaktionelle Hinweise und Links
+- klar abgegrenzte, weitgehend deckende Schreibfelder mit Goldfokus, Platzhaltern
+  und nach Textrolle abgestuften Höhen
+- bestehende nachträgliche CSS-Override-Schicht entfernt und die Gestaltung in
+  gemeinsame Tokens und ursprüngliche Komponentenregeln zurückgeführt
+
+Geprüft wurden Typen, Produktionsbuild sowie gezielte Chromium-Ansichten von
+Eingang, Fundus, Piece-Editor, Sendungsplanung und Live-Steuerung bei 1440 × 1000
+und 390 × 844 Pixeln in beiden Themes. Die vollständige Unit- und E2E-Matrix
+bleibt wie beauftragt Schritt 3 vorbehalten.
+
+## Oberflächenrelease 0.5.4
+
+- gemeinsame Light-/Dark-Tokens für ruhige Arbeitsflächen, Cyan als
+  Interaktionsfarbe und Gold für die jeweilige Hauptaktion
+- Darkmode im heinzlive-Farbraum mit Hintergrund `#0B1220`, Flächen `#152238`,
+  Text `#FFF7E8`, Sekundärtext `#A9B6C8`, Gold `#E7B957`, Cyan `#67DDE8` und
+  Grenzen `#30435C`
+- vereinheitlichte Navigation, Formulare, Meldungen, Listen, Sendungsplan,
+  Live-Steuerung und Piece-Dialoge ohne Änderung der Bedienlogik
+- kompaktere Planzeilen mit sichtbarem Drag-Griff und waagerechter Aktionsgruppe;
+  Klick-, Touch- und Tastaturalternativen bleiben erhalten
+- verständliche Kontextnamen „Fundusfassung“ und „Sendungsfassung“ sowie weniger
+  technische Erläuterungen im redaktionellen Arbeitsfluss
+- dezente Speicheraktion im gespeicherten Zustand und hervorgehobene Aktion bei
+  ungespeicherten Änderungen, Fehlern oder Konflikten
+
+Für diesen Design-Release wurden `npm run check`, `npm run build` und gezielte
+Chromium-Sichtkontrollen auf Eingang, Fundus, Piece-Editor, Sendungsplan und
+Live-Steuerung bei 1440 × 1000 sowie 390 × 844 Pixeln in Light/Dark ausgeführt.
+Konsolenfehler und horizontaler Seitenüberlauf traten dabei nicht auf. Die
+vollständige Unit- und E2E-Matrix wurde für die rein visuelle Änderung bewusst
+nicht erneut ausgeführt; die fachlichen Nachweise der Etappen 1 bis 5 bleiben
+unverändert.
+
 ## Umgesetzter Stand Etappe 1
 
 - SvelteKit-/TypeScript-Monolith mit Node-Adapter
@@ -67,6 +127,32 @@ als bereits implementiert verstanden werden.
 - Archivieren und Wiederherstellen in den vorherigen Arbeitsstatus
 - private Rasterbilder mit Größen-/Signaturprüfung und geschützter Auslieferung
 - erweiterter Seed mit Eingangs-, Archiv-, Markdown- und Recherchebeispielen
+- standardmäßig ausgeblendete gesendete Pieces mit verlinkter, aufklappbarer
+  Verwendungshistorie; gesendet bedeutet erledigt in abgeschlossener Sendung
+- standardmäßig ausgeblendete Pieces, die in mindestens einer noch nicht
+  abgeschlossenen Sendung eingeplant sind, mit unabhängigem Sofortfilter
+- Fundus-Originale und sendungsspezifische Verwendungen nutzen denselben
+  großzügigen Dialograhmen mit den Bereichen „Sendungstext“, „Recherche &
+  Quellen“ und „Präsentation“; der jeweilige Speicherkontext ist sichtbar und
+  Original sowie Verwendung bleiben getrennte Revisionsgrenzen
+- Titel, Einleitung, Moderationsstichpunkte und Überleitung sind ohne
+  vorgeschaltete Lese-/Bearbeitungsschalter direkt beschreibbar; eine kleine
+  Markdown-Leiste ergänzt Formatierung ohne Änderung des Speicherformats
+- Recherche, Quellen, verwendungseigene Notizen und Material sind in einem
+  Bereich gebündelt; öffentliche Texte, Darstellungswahl und tatsächliche
+  Vorschau stehen gemeinsam im Präsentationsbereich
+- der Dialog bleibt innerhalb der Desktop-Fensterhöhe, hält Kopf,
+  Bereichsnavigation und Aktionen sichtbar und nutzt mobil die volle
+  Bildschirmfläche; Bereichswechsel hängen Eingaben nicht aus und merken die
+  jeweilige Scrollposition
+- die Schnellaufnahme akzeptiert Gedanke oder URL, bleibt nach dem Ablegen im
+  Eingang und öffnet die Ausarbeitung erst über eine bewusste Aktion
+
+Für diese gezielte Überarbeitung wurden `npm run check` sowie kurze
+Chromium-Sichtkontrollen des Original- und Verwendungseditors bei 1440 × 1000
+und 390 × 844 Pixeln ausgeführt. Dabei waren Dialoggrenzen, feste Bedienbereiche,
+alle drei Arbeitsbereiche und horizontaler Überlauf unauffällig. Die vollständige
+Unit-, E2E- und Build-Matrix ist gemäß Auftrag noch offen.
 
 ## Umgesetzter Stand Etappe 4
 
@@ -78,6 +164,12 @@ als bereits implementiert verstanden werden.
 - showweite Reservebank, die nicht in Abschnitts- oder Gesamtdauer einfließt
 - explizite Abschnittsdauer ersetzt die Piece-Summe statt sie zu addieren
 - Bearbeiten, Entfernen sowie Verschieben innerhalb und zwischen Abschnitten
+- zugänglicher Stift-Dialog für alle sendungsspezifischen Felder und Aktionen,
+  auf Desktop zweispaltig und auf kleinen Bildschirmen einspaltig scrollbar
+- explizites Aktualisieren eines Verwendungssnapshots aus dem Original für
+  Titel, Dauer und Redaktionstexte bei erhaltenen Notizen und Live-Daten
+- Duplizieren einer konkreten Einplanung direkt hinter dem Ausgangselement mit
+  erhaltenen Anpassungen, aber zurückgesetztem Live-Zustand
 - Piece-Dauern werden im Editor in Minuten eingegeben und intern weiterhin als
   ganze Sekunden gespeichert
 - Drag-and-drop über eindeutige Griffe, auch direkt aus gefilterten Quellen,
@@ -85,6 +177,8 @@ als bereits implementiert verstanden werden.
   gleichwertigen Klick-, Touch- und Tastaturaktionen
 - Planungsmutationen ohne Dokumentreload mit lokalem Speicherzustand und
   animierter Neusortierung der betroffenen Elemente
+- unabhängige Sofortfilter für verwendete sowie in der aktuellen Sendung schon
+  eingeplante Originale einschließlich Reservebank
 - kopierbare Twitch-Titel und Ankündigungstexte
 - showweite optimistische Revision schützt Metadaten, Reihenfolge und Inhalte
   vor unbemerktem parallelem Überschreiben
@@ -104,6 +198,16 @@ als bereits implementiert verstanden werden.
   nicht
 - getrennte, tokenisierte heinzlive-Ausgabe mit Polling, Verbindungsanzeige,
   Präsentationstext, Quellen und erlaubten Bildern
+- wählbare Text-, Linkkarten- und Videodarstellung aus genau einer vorhandenen
+  Piece-Quelle mit manuell korrigierbaren, persistenten Metadaten
+- ausdrückliches serverseitiges Neuladen von Linkmetadaten über Metascraper mit
+  DNS-, Redirect-, Zeit-, Größen- und Privatnetzschutz
+- validierte YouTube- und TikTok-IDs, offizielle Player-Iframes ohne Autoplay
+  sowie Linkkarten-Fallback für nicht unterstützte Videoquellen
+- unveränderliche Präsentationssnapshots je Einplanung und explizite
+  Aktualisierung aus dem Fundus
+- isolierte Präsentationstestansicht ohne Änderung des Live-Stands sowie
+  tokengebundene, serverseitig geschützte Proxys für externe Vorschaubilder
 - Ausgabe-HTML, JSON und Medienzugriff enthalten keine Recherche,
   Moderationsnotizen, eigenen Notizen, Kontodaten oder internen Dateipfade
 
@@ -120,6 +224,10 @@ Präsentationsausgabe wurde stattdessen in einem anonymen zweiten Chromium-
 Browserkontext einschließlich Bild, JSON-Filterung, Polling und sichtbarem
 Verbindungsabbruch geprüft.
 
+Die automatisierten Playerprüfungen fingen YouTube- und TikTok-Requests lokal
+ab. URL-Erkennung, Iframe-Wechsel, Zeitmarkenübergabe und mobile Ausgabe sind
+damit geprüft, nicht jedoch die reale Wiedergabe oder Verfügbarkeit der Anbieter.
+
 ## Verifizierte Umgebung
 
 - Node.js 22.23.1, npm 10.9.8

migrations/0006_presentation_previews.sql

@@ -0,0 +1,28 @@
+ALTER TABLE pieces ADD COLUMN presentation_mode TEXT NOT NULL DEFAULT 'text'
+	CHECK (presentation_mode IN ('text', 'link', 'video'));
+ALTER TABLE pieces ADD COLUMN presentation_source_position INTEGER;
+ALTER TABLE pieces ADD COLUMN presentation_title TEXT NOT NULL DEFAULT '';
+ALTER TABLE pieces ADD COLUMN presentation_description TEXT NOT NULL DEFAULT '';
+ALTER TABLE pieces ADD COLUMN presentation_image_url TEXT NOT NULL DEFAULT '';
+ALTER TABLE pieces ADD COLUMN presentation_site_name TEXT NOT NULL DEFAULT '';
+ALTER TABLE pieces ADD COLUMN presentation_provider TEXT NOT NULL DEFAULT '';
+ALTER TABLE pieces ADD COLUMN presentation_provider_id TEXT NOT NULL DEFAULT '';
+ALTER TABLE pieces ADD COLUMN presentation_title_manual INTEGER NOT NULL DEFAULT 0
+	CHECK (presentation_title_manual IN (0, 1));
+ALTER TABLE pieces ADD COLUMN presentation_description_manual INTEGER NOT NULL DEFAULT 0
+	CHECK (presentation_description_manual IN (0, 1));
+ALTER TABLE pieces ADD COLUMN presentation_image_manual INTEGER NOT NULL DEFAULT 0
+	CHECK (presentation_image_manual IN (0, 1));
+ALTER TABLE pieces ADD COLUMN presentation_metadata_fetched_at_utc TEXT;
+
+ALTER TABLE piece_usages ADD COLUMN presentation_mode_snapshot TEXT NOT NULL DEFAULT 'text'
+	CHECK (presentation_mode_snapshot IN ('text', 'link', 'video'));
+ALTER TABLE piece_usages ADD COLUMN presentation_source_label_snapshot TEXT NOT NULL DEFAULT '';
+ALTER TABLE piece_usages ADD COLUMN presentation_source_url_snapshot TEXT NOT NULL DEFAULT '';
+ALTER TABLE piece_usages ADD COLUMN presentation_source_timecode_snapshot INTEGER;
+ALTER TABLE piece_usages ADD COLUMN presentation_title_meta_snapshot TEXT NOT NULL DEFAULT '';
+ALTER TABLE piece_usages ADD COLUMN presentation_description_snapshot TEXT NOT NULL DEFAULT '';
+ALTER TABLE piece_usages ADD COLUMN presentation_image_url_snapshot TEXT NOT NULL DEFAULT '';
+ALTER TABLE piece_usages ADD COLUMN presentation_site_name_snapshot TEXT NOT NULL DEFAULT '';
+ALTER TABLE piece_usages ADD COLUMN presentation_provider_snapshot TEXT NOT NULL DEFAULT '';
+ALTER TABLE piece_usages ADD COLUMN presentation_provider_id_snapshot TEXT NOT NULL DEFAULT '';

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "sendewerk",
 	"private": true,
-	"version": "0.5.0",
+	"version": "0.5.6",
 	"type": "module",
 	"engines": {
 		"node": ">=22.17 <25"
@@ -28,6 +28,11 @@
 		"better-sqlite3": "^13.0.3",
 		"file-type": "^22.2.0",
 		"marked": "^18.1.1",
+		"metascraper": "^5.58.5",
+		"metascraper-description": "^5.58.4",
+		"metascraper-image": "^5.58.4",
+		"metascraper-publisher": "^5.58.4",
+		"metascraper-title": "^5.58.4",
 		"nodemailer": "^10.1.7",
 		"sanitize-html": "^2.18.1"
 	},

src/hooks.server.ts

@@ -14,6 +14,7 @@ const publicPaths = new Set([
 
 export const handle: Handle = async ({ event, resolve }) => {
 	const presentationPath = event.url.pathname.startsWith('/heinzlive/');
+	const presentationTestPath = /^\/fundus\/[^/]+\/praesentation(?:\/|$)/.test(event.url.pathname);
 	const token = event.cookies.get(SESSION_COOKIE);
 	event.locals.user = getSessionUser(token);
 	if (token && !event.locals.user) deleteSession(event.cookies);
@@ -26,9 +27,13 @@ export const handle: Handle = async ({ event, resolve }) => {
 	response.headers.set('Referrer-Policy', 'same-origin');
 	response.headers.set('X-Content-Type-Options', 'nosniff');
 	response.headers.set('X-Frame-Options', 'DENY');
-	if (presentationPath) {
+	if (presentationPath || presentationTestPath) {
 		response.headers.set('Cache-Control', 'no-store');
-		response.headers.set('Referrer-Policy', 'no-referrer');
+		response.headers.set('Referrer-Policy', 'strict-origin-when-cross-origin');
+		response.headers.set(
+			'Content-Security-Policy',
+			"frame-src https://www.youtube-nocookie.com https://www.youtube.com https://www.tiktok.com; frame-ancestors 'none'"
+		);
 	}
 	if (event.url.pathname === '/einladung' || event.url.pathname === '/passwort-zuruecksetzen') {
 		response.headers.set('Cache-Control', 'no-store');

src/lib/components/MarkdownEditorField.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+	import { tick } from 'svelte';
+
+	let {
+		name,
+		label,
+		value = $bindable(),
+		rows = 4,
+		placeholder = '',
+		privateField = false,
+		form
+	}: {
+		name: string;
+		label: string;
+		value: string;
+		rows?: number;
+		placeholder?: string;
+		privateField?: boolean;
+		form?: string;
+	} = $props();
+
+	let textarea: HTMLTextAreaElement;
+
+	async function replaceSelection(before: string, after = before, fallback = 'Text') {
+		const start = textarea.selectionStart;
+		const end = textarea.selectionEnd;
+		const selected = value.slice(start, end) || fallback;
+		value = `${value.slice(0, start)}${before}${selected}${after}${value.slice(end)}`;
+		await tick();
+		textarea.focus();
+		textarea.setSelectionRange(start + before.length, start + before.length + selected.length);
+		textarea.dispatchEvent(new Event('input', { bubbles: true }));
+	}
+
+	async function addList() {
+		const start = textarea.selectionStart;
+		const end = textarea.selectionEnd;
+		const selected = value.slice(start, end) || 'Stichpunkt';
+		const replacement = selected
+			.split('\n')
+			.map((line) => `- ${line}`)
+			.join('\n');
+		value = `${value.slice(0, start)}${replacement}${value.slice(end)}`;
+		await tick();
+		textarea.focus();
+		textarea.setSelectionRange(start + 2, start + replacement.length);
+		textarea.dispatchEvent(new Event('input', { bubbles: true }));
+	}
+</script>
+
+<div class:private-field={privateField} class="markdown-editor-field">
+	<div class="markdown-editor-heading">
+		<span
+			>{label}{#if privateField}<small>Nur intern</small>{/if}</span
+		>
+		<span class="markdown-toolbar" role="toolbar" aria-label={`${label} formatieren`}>
+			<button type="button" aria-label="Fett" title="Fett" onclick={() => replaceSelection('**')}
+				><strong>B</strong></button
+			>
+			<button type="button" aria-label="Kursiv" title="Kursiv" onclick={() => replaceSelection('_')}
+				><em>I</em></button
+			>
+			<button type="button" aria-label="Liste" title="Liste" onclick={addList}>• Liste</button>
+			<button
+				type="button"
+				aria-label="Link"
+				title="Link"
+				onclick={() => replaceSelection('[', '](https://)', 'Linktext')}>↗ Link</button
+			>
+		</span>
+	</div>
+	<textarea
+		bind:this={textarea}
+		aria-label={label}
+		{name}
+		{rows}
+		{placeholder}
+		{form}
+		maxlength="50000"
+		bind:value></textarea>
+</div>

src/lib/components/NavIcon.svelte

@@ -16,6 +16,8 @@
 		<path
 			d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6 7 7M17 17l1.4 1.4M18.4 5.6 17 7M7 17l-1.4 1.4"
 		/>
+	{:else if name === 'edit'}
+		<path d="M4 20h4L19 9l-4-4L4 16v4zM13.5 6.5l4 4" />
 	{/if}
 </svg>
 

src/lib/components/PieceEditorDialog.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+	import { tick, type Snippet } from 'svelte';
+
+	let {
+		labelledby,
+		activeSection = $bindable(),
+		onrequestclose,
+		header,
+		children,
+		footer
+	}: {
+		labelledby: string;
+		activeSection: 'script' | 'research' | 'presentation';
+		onrequestclose: () => void;
+		header: Snippet;
+		children: Snippet;
+		footer: Snippet;
+	} = $props();
+
+	let dialog: HTMLDialogElement;
+	let workspace: HTMLDivElement;
+	const scrollPositions = { script: 0, research: 0, presentation: 0 };
+
+	async function selectSection(section: typeof activeSection) {
+		scrollPositions[activeSection] = workspace.scrollTop;
+		activeSection = section;
+		await tick();
+		workspace.scrollTop = scrollPositions[section];
+	}
+
+	export function showModal() {
+		if (!dialog.open) dialog.showModal();
+	}
+
+	export function close() {
+		dialog.close();
+	}
+</script>
+
+<dialog
+	bind:this={dialog}
+	class="piece-editor-dialog"
+	aria-labelledby={labelledby}
+	oncancel={(event) => {
+		event.preventDefault();
+		onrequestclose();
+	}}
+	onclick={(event) => event.target === dialog && onrequestclose()}
+>
+	<header class="piece-dialog-header">
+		<div class="piece-dialog-heading">{@render header()}</div>
+		<button
+			class="dialog-close"
+			type="button"
+			aria-label="Editor schließen"
+			onclick={onrequestclose}>×</button
+		>
+	</header>
+	<nav class="piece-dialog-tabs" aria-label="Editorbereiche">
+		<button
+			type="button"
+			class:active={activeSection === 'script'}
+			aria-current={activeSection === 'script' ? 'page' : undefined}
+			onclick={() => selectSection('script')}>Sendungstext</button
+		>
+		<button
+			type="button"
+			class:active={activeSection === 'research'}
+			aria-current={activeSection === 'research' ? 'page' : undefined}
+			onclick={() => selectSection('research')}>Recherche & Quellen</button
+		>
+		<button
+			type="button"
+			class:active={activeSection === 'presentation'}
+			aria-current={activeSection === 'presentation' ? 'page' : undefined}
+			onclick={() => selectSection('presentation')}>Präsentation</button
+		>
+	</nav>
+	<div bind:this={workspace} class="piece-dialog-workspace">{@render children()}</div>
+	<footer class="piece-dialog-footer">{@render footer()}</footer>
+</dialog>

src/lib/components/PieceUsageHistory.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { resolve } from '$app/paths';
+	import type { SentPieceUsage } from '#lib/server/shows.js';
+
+	let { history }: { history: SentPieceUsage[] } = $props();
+
+	function berlinDate(value: string) {
+		return new Intl.DateTimeFormat('de-DE', {
+			timeZone: 'Europe/Berlin',
+			dateStyle: 'medium'
+		}).format(new Date(value));
+	}
+</script>
+
+{#if history.length}
+	<div class="piece-usage-history">
+		<p>
+			<strong>Gesendet am {berlinDate(history[0].usedAtUtc)}</strong>
+			in <a href={resolve('/sendungen/[id]', { id: history[0].showId })}>{history[0].showTitle}</a>
+			{#if history.length > 1}<span>+ {history.length - 1} weitere</span>{/if}
+		</p>
+		{#if history.length > 1}
+			<details>
+				<summary>Vollständige Verwendungshistorie</summary>
+				<ul>
+					{#each history as usage (usage.usageId)}
+						<li>
+							<time datetime={usage.usedAtUtc}>{berlinDate(usage.usedAtUtc)}</time>
+							<a href={resolve('/sendungen/[id]', { id: usage.showId })}>{usage.showTitle}</a>
+						</li>
+					{/each}
+				</ul>
+			</details>
+		{/if}
+	</div>
+{/if}

src/lib/components/PresentationDisplay.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import type { PresentationContent } from '#lib/server/presentation.js';
+
+	let {
+		content,
+		imageSrc = ''
+	}: {
+		content: PresentationContent & {
+			sources?: { label: string; url: string }[];
+			images?: { id: string; altText: string }[];
+		};
+		imageSrc?: string;
+	} = $props();
+	let frame = $state<HTMLIFrameElement>();
+	let playerUnavailable = $state(false);
+	let imageUnavailable = $state(false);
+
+	onMount(() => {
+		const receive = (event: MessageEvent) => {
+			if (content.provider !== 'tiktok' || event.origin !== 'https://www.tiktok.com') return;
+			if (event.source !== frame?.contentWindow || typeof event.data !== 'object' || !event.data)
+				return;
+			const message = event.data as { type?: string; value?: unknown };
+			if (message.type === 'onPlayerReady' && content.source?.timecodeSeconds) {
+				frame.contentWindow?.postMessage(
+					{
+						type: 'seekTo',
+						value: content.source.timecodeSeconds,
+						'x-tiktok-player': true
+					},
+					'https://www.tiktok.com'
+				);
+			}
+			if (message.type === 'onPlayerError') playerUnavailable = true;
+		};
+		addEventListener('message', receive);
+		return () => removeEventListener('message', receive);
+	});
+</script>
+
+{#if content.mode === 'text'}
+	<article class="output-content output-text">
+		<p class="output-kicker">heinzlive</p>
+		<h1>{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 content.html}</div>
+		{#if content.images?.length}<div class="output-images">
+				{#each content.images as image (image.id)}
+					<img src={`${imageSrc}/${image.id}`} alt={image.altText} />
+				{/each}
+			</div>{/if}
+		{#if content.sources?.length}<footer class="output-sources">
+				<span>Quellen</span>
+				{#each content.sources as source, index (`${index}-${source.url}`)}
+					<!-- The URL is a server-validated external HTTP(S) source. -->
+					<!-- 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 if content.mode === 'link'}
+	<article class="output-content output-link-card">
+		{#if imageSrc && !imageUnavailable}<div class="output-link-image">
+				<img src={imageSrc} alt="" onerror={() => (imageUnavailable = true)} />
+			</div>{/if}
+		<div class="output-link-copy">
+			<p class="output-kicker">{content.siteName || content.source?.label || 'Webseite'}</p>
+			<h1>{content.previewTitle || content.title}</h1>
+			{#if content.description}<p>{content.description}</p>{/if}
+			<!-- The URL is a server-validated external HTTP(S) source. -->
+			<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
+			{#if content.source}<a href={content.source.url} target="_blank" rel="noopener noreferrer"
+					>Original öffnen</a
+				>{/if}
+		</div>
+	</article>
+{:else}
+	<article class:portrait={content.provider === 'tiktok'} class="output-content output-video">
+		<header>
+			<p class="output-kicker">{content.siteName || content.source?.label || 'Video'}</p>
+			<h1>{content.previewTitle || content.title}</h1>
+		</header>
+		{#if content.embedUrl && !playerUnavailable}
+			<div class="output-player">
+				<iframe
+					bind:this={frame}
+					title={content.previewTitle || content.title}
+					src={content.embedUrl}
+					allow="encrypted-media; fullscreen; picture-in-picture"
+					allowfullscreen
+					onerror={() => (playerUnavailable = true)}
+				></iframe>
+			</div>
+		{:else}
+			<section class="output-fallback">
+				<strong>Video kann nicht eingebettet werden</strong>
+				<p>Der Anbieter oder diese URL ist für die eingebettete Wiedergabe nicht verfügbar.</p>
+				<!-- The URL is a server-validated external HTTP(S) source. -->
+				<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
+				{#if content.source}<a href={content.source.url} target="_blank" rel="noopener noreferrer"
+						>Original öffnen</a
+					>{/if}
+			</section>
+		{/if}
+		{#if content.source}<footer class="output-video-source">
+				<!-- The URL is a server-validated external HTTP(S) source. -->
+				<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
+				<a href={content.source.url} target="_blank" rel="noopener noreferrer">Original öffnen</a>
+			</footer>{/if}
+	</article>
+{/if}

src/lib/components/UsageEditorDialog.svelte

@@ -0,0 +1,336 @@
+<script lang="ts">
+	import { enhance, type SubmitFunction } from '$app/forms';
+	import { untrack } from 'svelte';
+	import MarkdownEditorField from './MarkdownEditorField.svelte';
+	import NavIcon from './NavIcon.svelte';
+	import PieceEditorDialog from './PieceEditorDialog.svelte';
+	import type { PieceUsage } from '#lib/server/shows.js';
+
+	let {
+		usage,
+		revision,
+		sectionId,
+		sections,
+		error,
+		enhanceCommand
+	}: {
+		usage: PieceUsage;
+		revision: number;
+		sectionId: string;
+		sections: { id: string; name: string }[];
+		error?: string;
+		enhanceCommand: SubmitFunction;
+	} = $props();
+
+	let formId = $derived(`usage-editor-form-${usage.id}`);
+	let editor: { showModal: () => void; close: () => void };
+	let activeSection = $state<'script' | 'research' | 'presentation'>('script');
+	let draft = $state(untrack(() => ({ ...usage })));
+	let dirty = $state(false);
+
+	function durationInMinutes(seconds: number) {
+		return Number((seconds / 60).toFixed(2));
+	}
+
+	function requestClose() {
+		if (dirty && !confirm('Ungespeicherte Änderungen verwerfen und Editor schließen?')) return;
+		dirty = false;
+		editor.close();
+	}
+
+	const enhanceEditor: SubmitFunction = async (input) => {
+		const finish = await enhanceCommand(input);
+		return async (result) => {
+			if (finish) await finish(result);
+			if (result.result.type === 'success') dirty = false;
+		};
+	};
+</script>
+
+<button
+	class="usage-edit-button"
+	type="button"
+	aria-label={`${usage.title} bearbeiten und verschieben`}
+	title="Bearbeiten und verschieben"
+	onclick={() => editor.showModal()}
+>
+	<NavIcon name="edit" />
+</button>
+
+<PieceEditorDialog
+	bind:this={editor}
+	bind:activeSection
+	labelledby={`usage-editor-title-${usage.id}`}
+	onrequestclose={requestClose}
+>
+	{#snippet header()}
+		<p class="eyebrow">Sendungsfassung</p>
+		<label class="piece-dialog-title">
+			<span class="sr-only">Titel</span>
+			<textarea
+				form={formId}
+				name="title"
+				required
+				rows="1"
+				maxlength="200"
+				aria-label="Titel"
+				bind:value={draft.title}
+				oninput={() => (dirty = true)}></textarea>
+		</label>
+		<h2 class="sr-only" id={`usage-editor-title-${usage.id}`}>{draft.title}</h2>
+	{/snippet}
+
+	<form
+		id={formId}
+		use:enhance={enhanceEditor}
+		method="POST"
+		action="?/updateUsage"
+		class="piece-dialog-form"
+		oninput={() => (dirty = true)}
+		onchange={() => (dirty = true)}
+	>
+		<input type="hidden" name="revision" value={revision} />
+		<input type="hidden" name="usageId" value={usage.id} />
+
+		<section class="piece-editor-panel" hidden={activeSection !== 'script'}>
+			<div class="piece-panel-heading">
+				<div>
+					<p class="eyebrow">Für die Moderation</p>
+					<h3>Sendungstext</h3>
+				</div>
+			</div>
+			<div class="piece-writing-stack">
+				<MarkdownEditorField
+					name="intro"
+					label="Einleitung"
+					placeholder="Wie beginnt dieses Thema in der Sendung?"
+					bind:value={draft.intro}
+				/>
+				<MarkdownEditorField
+					name="moderation"
+					label="Moderationsstichpunkte"
+					placeholder="Argumente, Fragen und Ablaufpunkte"
+					rows={10}
+					bind:value={draft.moderation}
+				/>
+				<MarkdownEditorField
+					name="transition"
+					label="Überleitung"
+					placeholder="Wie geht es zum nächsten Thema weiter?"
+					bind:value={draft.transition}
+				/>
+			</div>
+			<details class="piece-meta-details">
+				<summary>Dauer und Einplanung</summary>
+				<div class="piece-meta-grid">
+					<label
+						>Dauer in Minuten<input
+							name="durationMinutes"
+							type="number"
+							min="0"
+							max="1440"
+							step="any"
+							value={durationInMinutes(usage.durationSeconds)}
+						/></label
+					>
+				</div>
+			</details>
+		</section>
+
+		<section class="piece-editor-panel" hidden={activeSection !== 'research'}>
+			<div class="piece-panel-heading">
+				<div>
+					<p class="eyebrow">Nicht öffentlich</p>
+					<h3>Recherche & Quellen</h3>
+				</div>
+				<small>Diese Inhalte bleiben innerhalb der Redaktion.</small>
+			</div>
+			<div class="piece-writing-stack">
+				<MarkdownEditorField
+					name="research"
+					label="Private Recherche"
+					placeholder="Hintergrund, Prüfung und offene Fragen"
+					rows={10}
+					privateField
+					bind:value={draft.research}
+				/>
+				<MarkdownEditorField
+					name="ownNotes"
+					label="Interne Notizen zu dieser Verwendung"
+					placeholder="Absprachen und Hinweise nur für diese Sendung"
+					privateField
+					bind:value={draft.ownNotes}
+				/>
+			</div>
+			<section class="piece-source-summary">
+				<p class="eyebrow">Snapshot-Quelle</p>
+				{#if draft.presentationSourceUrl}
+					<strong>{draft.presentationSourceLabel || draft.presentationSourceUrl}</strong>
+					<small>{draft.presentationSourceUrl}</small>
+				{:else}
+					<p>Für diese Verwendung wurde keine Präsentationsquelle kopiert.</p>
+				{/if}
+			</section>
+		</section>
+
+		<section class="piece-editor-panel" hidden={activeSection !== 'presentation'}>
+			<div class="piece-panel-heading">
+				<div>
+					<p class="eyebrow">Öffentliche Ausgabe</p>
+					<h3>Präsentation</h3>
+				</div>
+				<small>Private Recherche und Notizen werden nicht ausgegeben.</small>
+			</div>
+			<div class="piece-presentation-layout">
+				<div class="piece-presentation-controls">
+					<MarkdownEditorField
+						name="presentation"
+						label="Öffentlicher Text"
+						placeholder="Text für die Publikumsausgabe"
+						bind:value={draft.presentation}
+					/>
+					<div class="presentation-mode-picker" role="group" aria-label="Darstellung">
+						{#each [['text', 'Text'], ['link', 'Linkvorschau'], ['video', 'Video']] as mode (mode[0])}
+							<label
+								><input
+									type="radio"
+									name="presentationMode"
+									value={mode[0]}
+									bind:group={draft.presentationMode}
+								/>{mode[1]}</label
+							>
+						{/each}
+					</div>
+					<input
+						type="hidden"
+						name="presentationSourceLabel"
+						value={draft.presentationSourceLabel}
+					/>
+					<input type="hidden" name="presentationSourceUrl" value={draft.presentationSourceUrl} />
+					<input
+						type="hidden"
+						name="presentationSourceTimecodeSeconds"
+						value={draft.presentationSourceTimecodeSeconds ?? ''}
+					/>
+					<input type="hidden" name="presentationSiteName" value={draft.presentationSiteName} />
+					{#if draft.presentationMode !== 'text'}
+						<div class="presentation-settings">
+							<div class="presentation-source-summary wide-field">
+								<span>Ausgewählte Quelle</span>
+								<strong
+									>{draft.presentationSourceLabel ||
+										draft.presentationSourceUrl ||
+										'Keine Quelle'}</strong
+								>
+								{#if draft.presentationSourceUrl}<small>{draft.presentationSourceUrl}</small>{/if}
+							</div>
+							<label
+								>Titel<input
+									name="presentationTitle"
+									maxlength="300"
+									placeholder="Optionaler Anzeigetitel"
+									bind:value={draft.presentationTitle}
+								/></label
+							>
+							<label
+								>Bild-URL<input
+									name="presentationImageUrl"
+									type="url"
+									maxlength="2000"
+									placeholder="https://…"
+									bind:value={draft.presentationImageUrl}
+								/></label
+							>
+							<label class="wide-field"
+								>Anreißer<textarea
+									name="presentationDescription"
+									rows="3"
+									maxlength="1000"
+									placeholder="Kurzer Text zur Vorschau"
+									bind:value={draft.presentationDescription}></textarea></label
+							>
+						</div>
+					{:else}
+						<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">
+					<p class="output-kicker">Vorschau · {draft.presentationMode}</p>
+					<h4>{draft.presentationTitle || draft.title}</h4>
+					{#if draft.presentationMode === 'text'}
+						<p class="preview-markdown-source">
+							{draft.presentation || 'Noch kein öffentlicher Text.'}
+						</p>
+					{:else}
+						{#if draft.presentationImageUrl}<img src={draft.presentationImageUrl} alt="" />{/if}
+						<p>
+							{draft.presentationDescription ||
+								draft.presentationSourceUrl ||
+								'Noch keine Vorschauangaben.'}
+						</p>
+					{/if}
+				</aside>
+			</div>
+		</section>
+	</form>
+
+	{#snippet footer()}
+		<div class="piece-dialog-secondary-actions">
+			<form use:enhance={enhanceCommand} method="POST" action="?/refreshUsage">
+				<input type="hidden" name="revision" value={revision} />
+				<input type="hidden" name="usageId" value={usage.id} />
+				<button class="text-button" type="submit" disabled={!usage.originalPieceId || dirty}
+					>Aus Fundus aktualisieren</button
+				>
+			</form>
+			<form use:enhance={enhanceCommand} method="POST" action="?/duplicateUsage">
+				<input type="hidden" name="revision" value={revision} /><input
+					type="hidden"
+					name="usageId"
+					value={usage.id}
+				/>
+				<button class="text-button" type="submit" disabled={dirty}>Duplizieren</button>
+			</form>
+			<form use:enhance={enhanceCommand} method="POST" action="?/moveUsage">
+				<input type="hidden" name="revision" value={revision} /><input
+					type="hidden"
+					name="usageId"
+					value={usage.id}
+				/><input type="hidden" name="position" value="9999" />
+				<label
+					><span class="sr-only">Ziel</span><select name="sectionId"
+						><option value="">Reservebank</option>{#each sections as target (target.id)}<option
+								value={target.id}
+								selected={target.id === sectionId}>{target.name}</option
+							>{/each}</select
+					></label
+				>
+				<button class="text-button" type="submit" disabled={dirty}>Verschieben</button>
+			</form>
+			<form
+				use:enhance={enhanceCommand}
+				method="POST"
+				action="?/removeUsage"
+				onsubmit={(event) =>
+					!confirm('Verwendung aus der Sendung entfernen?') && event.preventDefault()}
+			>
+				<input type="hidden" name="revision" value={revision} /><input
+					type="hidden"
+					name="usageId"
+					value={usage.id}
+				/>
+				<button class="text-button danger-text" type="submit" disabled={dirty}>Entfernen</button>
+			</form>
+		</div>
+		<div class="piece-dialog-primary-action">
+			{#if error}<span class="problem" role="alert">{error}</span>{/if}
+			<button class="primary-button" type="submit" form={formId}>Verwendung speichern</button>
+		</div>
+	{/snippet}
+</PieceEditorDialog>

src/lib/server/content.spec.ts

@@ -13,6 +13,7 @@ import {
 	getPiece,
 	getTaxonomy,
 	listPieces,
+	loadPiecePresentationMetadata,
 	savePiece,
 	setPieceArchived,
 	uploadPieceImage,
@@ -50,6 +51,18 @@ function completeInput(overrides: Partial<PieceInput> = {}): PieceInput {
 		moderationNotes: '- Punkt eins',
 		transitionText: 'Weiter geht es.',
 		presentationText: '## Sichtbare Aussage',
+		presentationMode: 'text',
+		presentationSourcePosition: null,
+		presentationTitle: '',
+		presentationDescription: '',
+		presentationImageUrl: '',
+		presentationSiteName: '',
+		presentationProvider: '',
+		presentationProviderId: '',
+		presentationTitleManual: false,
+		presentationDescriptionManual: false,
+		presentationImageManual: false,
+		presentationMetadataFetchedAtUtc: null,
 		topicIds: ['topic-gaming', 'topic-internet'],
 		categoryIds: ['cat-jc', 'cat-reaction'],
 		sources: [
@@ -86,6 +99,49 @@ describe('content management', () => {
 		});
 	});
 
+	it('stores fetched preview metadata and preserves manual corrections on reload', async () => {
+		const id = createPiece('find');
+		const initial = getPiece(id)!;
+		const saved = savePiece(
+			id,
+			initial.revision,
+			completeInput({
+				presentationMode: 'link',
+				presentationSourcePosition: 0,
+				presentationTitle: 'Manueller Titel',
+				presentationTitleManual: true
+			})
+		);
+		const loaded = await loadPiecePresentationMetadata(id, saved.revision, async () => ({
+			title: 'Automatischer Titel',
+			description: 'Geladener Anreißer',
+			imageUrl: 'https://example.com/vorschau.jpg',
+			siteName: 'Example',
+			provider: '',
+			providerId: ''
+		}));
+		expect(getPiece(id)).toMatchObject({
+			revision: loaded.revision,
+			presentationTitle: 'Manueller Titel',
+			presentationDescription: 'Geladener Anreißer',
+			presentationImageUrl: 'https://example.com/vorschau.jpg',
+			presentationSiteName: 'Example'
+		});
+
+		await loadPiecePresentationMetadata(id, loaded.revision, async () => ({
+			title: 'Anderer automatischer Titel',
+			description: 'Aktualisierter Anreißer',
+			imageUrl: '',
+			siteName: 'Example',
+			provider: '',
+			providerId: ''
+		}));
+		expect(getPiece(id)).toMatchObject({
+			presentationTitle: 'Manueller Titel',
+			presentationDescription: 'Aktualisierter Anreißer'
+		});
+	});
+
 	it('searches independent taxonomies and archives, restores and duplicates pieces', async () => {
 		createTaxonomy('topic', 'Technikgeschichte');
 		const topic = getTaxonomy().topics.find((entry) => entry.name === 'Technikgeschichte')!;

src/lib/server/content.ts

@@ -4,6 +4,11 @@ import path from 'node:path';
 import { fileTypeFromBuffer } from 'file-type';
 import { getDatabase } from './database.js';
 import { getServerPaths } from './config.js';
+import {
+	detectVideoProvider,
+	fetchPresentationMetadata,
+	type PresentationMode
+} from './presentation.js';
 
 export const PIECE_STATUSES = ['inbox', 'preparing', 'ready', 'archived'] as const;
 export type PieceStatus = (typeof PIECE_STATUSES)[number];
@@ -27,6 +32,18 @@ export type PieceInput = {
 	moderationNotes: string;
 	transitionText: string;
 	presentationText: string;
+	presentationMode: PresentationMode;
+	presentationSourcePosition: number | null;
+	presentationTitle: string;
+	presentationDescription: string;
+	presentationImageUrl: string;
+	presentationSiteName: string;
+	presentationProvider: string;
+	presentationProviderId: string;
+	presentationTitleManual: boolean;
+	presentationDescriptionManual: boolean;
+	presentationImageManual: boolean;
+	presentationMetadataFetchedAtUtc: string | null;
 	topicIds: string[];
 	categoryIds: string[];
 	sources: PieceSourceInput[];
@@ -164,6 +181,25 @@ function validatePieceInput(input: PieceInput): PieceInput {
 		}
 		return { label, url, timecodeSeconds: source.timecodeSeconds };
 	});
+	if (!['text', 'link', 'video'].includes(input.presentationMode)) {
+		throw new Error('INVALID_PRESENTATION');
+	}
+	const sourcePosition = input.presentationSourcePosition;
+	if (
+		sourcePosition !== null &&
+		(!Number.isInteger(sourcePosition) || sourcePosition < 0 || sourcePosition >= sources.length)
+	) {
+		throw new Error('INVALID_PRESENTATION');
+	}
+	if (input.presentationMode !== 'text' && sourcePosition === null) {
+		throw new Error('INVALID_PRESENTATION');
+	}
+	const presentationImageUrl = cleanText(input.presentationImageUrl, 2_000, 'presentation_image');
+	if (presentationImageUrl && !validUrl(presentationImageUrl)) {
+		throw new Error('INVALID_PRESENTATION');
+	}
+	const detected =
+		sourcePosition === null ? null : detectVideoProvider(sources[sourcePosition].url);
 	return {
 		title,
 		summary: cleanText(input.summary, 2_000, 'summary'),
@@ -175,6 +211,22 @@ function validatePieceInput(input: PieceInput): PieceInput {
 		moderationNotes: cleanText(input.moderationNotes, 50_000, 'moderation'),
 		transitionText: cleanText(input.transitionText, 50_000, 'transition'),
 		presentationText: cleanText(input.presentationText, 50_000, 'presentation'),
+		presentationMode: input.presentationMode,
+		presentationSourcePosition: sourcePosition,
+		presentationTitle: cleanText(input.presentationTitle, 300, 'presentation_title'),
+		presentationDescription: cleanText(
+			input.presentationDescription,
+			1_000,
+			'presentation_description'
+		),
+		presentationImageUrl,
+		presentationSiteName: cleanText(input.presentationSiteName, 200, 'presentation_site'),
+		presentationProvider: detected?.provider ?? '',
+		presentationProviderId: detected?.id ?? '',
+		presentationTitleManual: Boolean(input.presentationTitleManual),
+		presentationDescriptionManual: Boolean(input.presentationDescriptionManual),
+		presentationImageManual: Boolean(input.presentationImageManual),
+		presentationMetadataFetchedAtUtc: input.presentationMetadataFetchedAtUtc || null,
 		topicIds,
 		categoryIds,
 		sources
@@ -298,6 +350,18 @@ type PieceRow = {
 	moderation_notes: string;
 	transition_text: string;
 	presentation_text: string;
+	presentation_mode: PresentationMode;
+	presentation_source_position: number | null;
+	presentation_title: string;
+	presentation_description: string;
+	presentation_image_url: string;
+	presentation_site_name: string;
+	presentation_provider: string;
+	presentation_provider_id: string;
+	presentation_title_manual: number;
+	presentation_description_manual: number;
+	presentation_image_manual: number;
+	presentation_metadata_fetched_at_utc: string | null;
 	revision: number;
 	created_at_utc: string;
 	updated_at_utc: string;
@@ -308,7 +372,12 @@ export function getPiece(id: string): PieceEditor | null {
 	const row = database
 		.prepare(
 			`SELECT id, title, summary, format_id, status, duration_seconds, intro, research_text,
-			 moderation_notes, transition_text, presentation_text, revision, created_at_utc, updated_at_utc
+			 moderation_notes, transition_text, presentation_text, presentation_mode,
+			 presentation_source_position, presentation_title, presentation_description,
+			 presentation_image_url, presentation_site_name, presentation_provider,
+			 presentation_provider_id, presentation_title_manual, presentation_description_manual,
+			 presentation_image_manual, presentation_metadata_fetched_at_utc,
+			 revision, created_at_utc, updated_at_utc
 			 FROM pieces WHERE id = ?`
 		)
 		.get(id) as PieceRow | undefined;
@@ -325,6 +394,18 @@ export function getPiece(id: string): PieceEditor | null {
 		moderationNotes: row.moderation_notes,
 		transitionText: row.transition_text,
 		presentationText: row.presentation_text,
+		presentationMode: row.presentation_mode,
+		presentationSourcePosition: row.presentation_source_position,
+		presentationTitle: row.presentation_title,
+		presentationDescription: row.presentation_description,
+		presentationImageUrl: row.presentation_image_url,
+		presentationSiteName: row.presentation_site_name,
+		presentationProvider: row.presentation_provider,
+		presentationProviderId: row.presentation_provider_id,
+		presentationTitleManual: row.presentation_title_manual === 1,
+		presentationDescriptionManual: row.presentation_description_manual === 1,
+		presentationImageManual: row.presentation_image_manual === 1,
+		presentationMetadataFetchedAtUtc: row.presentation_metadata_fetched_at_utc,
 		revision: row.revision,
 		createdAtUtc: row.created_at_utc,
 		updatedAtUtc: row.updated_at_utc,
@@ -405,6 +486,11 @@ export function savePiece(id: string, expectedRevision: number, rawInput: PieceI
 			.prepare(
 				`UPDATE pieces SET title = ?, summary = ?, format_id = ?, status = ?, duration_seconds = ?,
 				 intro = ?, research_text = ?, moderation_notes = ?, transition_text = ?, presentation_text = ?,
+				 presentation_mode = ?, presentation_source_position = ?, presentation_title = ?,
+				 presentation_description = ?, presentation_image_url = ?, presentation_site_name = ?,
+				 presentation_provider = ?, presentation_provider_id = ?, presentation_title_manual = ?,
+				 presentation_description_manual = ?, presentation_image_manual = ?,
+				 presentation_metadata_fetched_at_utc = ?,
 				 updated_at_utc = ?, revision = revision + 1, archived_from_status = NULL
 				 WHERE id = ? AND revision = ? AND status != 'archived'`
 			)
@@ -419,6 +505,18 @@ export function savePiece(id: string, expectedRevision: number, rawInput: PieceI
 				input.moderationNotes,
 				input.transitionText,
 				input.presentationText,
+				input.presentationMode,
+				input.presentationSourcePosition,
+				input.presentationTitle,
+				input.presentationDescription,
+				input.presentationImageUrl,
+				input.presentationSiteName,
+				input.presentationProvider,
+				input.presentationProviderId,
+				input.presentationTitleManual ? 1 : 0,
+				input.presentationDescriptionManual ? 1 : 0,
+				input.presentationImageManual ? 1 : 0,
+				input.presentationMetadataFetchedAtUtc,
 				updatedAtUtc,
 				id,
 				expectedRevision
@@ -477,6 +575,18 @@ export function createPiece(template: PieceTemplateId = 'blank'): string {
 		moderationNotes: defaults.moderationNotes ?? '',
 		transitionText: '',
 		presentationText: defaults.presentationText ?? '',
+		presentationMode: 'text',
+		presentationSourcePosition: null,
+		presentationTitle: '',
+		presentationDescription: '',
+		presentationImageUrl: '',
+		presentationSiteName: '',
+		presentationProvider: '',
+		presentationProviderId: '',
+		presentationTitleManual: false,
+		presentationDescriptionManual: false,
+		presentationImageManual: false,
+		presentationMetadataFetchedAtUtc: null,
 		topicIds: [],
 		categoryIds: defaults.categoryIds ?? [],
 		sources: []
@@ -510,10 +620,11 @@ export function createPiece(template: PieceTemplateId = 'blank'): string {
 }
 
 export function captureInbox(titleValue: string, urlValue: string): string {
-	const title = cleanText(titleValue, 200, 'title');
+	let title = cleanText(titleValue, 200, 'title');
-	if (!title) throw new Error('INVALID_TITLE');
 	const url = cleanText(urlValue, 2_000, 'source');
 	if (url && !validUrl(url)) throw new Error('INVALID_SOURCES');
+	if (!title && !url) throw new Error('INVALID_TITLE');
+	if (!title) title = new URL(url).hostname;
 	const id = createPiece('blank');
 	const piece = getPiece(id)!;
 	savePiece(id, piece.revision, {
@@ -582,8 +693,13 @@ export async function duplicatePiece(sourceId: string): Promise<string> {
 			database
 				.prepare(
 					`INSERT INTO pieces (id, title, summary, format_id, status, duration_seconds, intro,
-					 research_text, moderation_notes, transition_text, presentation_text, created_at_utc,
+					 research_text, moderation_notes, transition_text, presentation_text, presentation_mode,
-					 updated_at_utc, revision) VALUES (?, ?, ?, ?, 'preparing', ?, ?, ?, ?, ?, ?, ?, ?, 1)`
+					 presentation_source_position, presentation_title, presentation_description,
+					 presentation_image_url, presentation_site_name, presentation_provider,
+					 presentation_provider_id, presentation_title_manual,
+					 presentation_description_manual, presentation_image_manual,
+					 presentation_metadata_fetched_at_utc, created_at_utc, updated_at_utc, revision)
+					 VALUES (?, ?, ?, ?, 'preparing', ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, 1)`
 				)
 				.run(
 					id,
@@ -596,6 +712,18 @@ export async function duplicatePiece(sourceId: string): Promise<string> {
 					source.moderationNotes,
 					source.transitionText,
 					source.presentationText,
+					source.presentationMode,
+					source.presentationSourcePosition,
+					source.presentationTitle,
+					source.presentationDescription,
+					source.presentationImageUrl,
+					source.presentationSiteName,
+					source.presentationProvider,
+					source.presentationProviderId,
+					source.presentationTitleManual ? 1 : 0,
+					source.presentationDescriptionManual ? 1 : 0,
+					source.presentationImageManual ? 1 : 0,
+					source.presentationMetadataFetchedAtUtc,
 					now,
 					now
 				);
@@ -627,6 +755,66 @@ export async function duplicatePiece(sourceId: string): Promise<string> {
 	}
 }
 
+export async function loadPiecePresentationMetadata(
+	id: string,
+	expectedRevision: number,
+	metadataLoader = fetchPresentationMetadata
+) {
+	if (!Number.isInteger(expectedRevision) || expectedRevision < 1) {
+		throw new Error('INVALID_REVISION');
+	}
+	const database = getDatabase();
+	const piece = database
+		.prepare(
+			`SELECT p.revision, p.presentation_mode, p.presentation_source_position,
+			 p.presentation_title_manual, p.presentation_description_manual,
+			 p.presentation_image_manual, s.url
+			 FROM pieces p LEFT JOIN piece_sources s ON s.piece_id = p.id
+			 AND s.position = p.presentation_source_position
+			 WHERE p.id = ? AND p.status != 'archived'`
+		)
+		.get(id) as
+		| {
+				revision: number;
+				presentation_mode: PresentationMode;
+				presentation_source_position: number | null;
+				presentation_title_manual: number;
+				presentation_description_manual: number;
+				presentation_image_manual: number;
+				url: string | null;
+		  }
+		| undefined;
+	if (!piece) throw new Error('NOT_FOUND');
+	if (piece.revision !== expectedRevision) throw new Error('CONFLICT');
+	if (piece.presentation_mode === 'text' || !piece.url) throw new Error('INVALID_PRESENTATION');
+	const metadata = await metadataLoader(piece.url);
+	const now = new Date().toISOString();
+	const result = database
+		.prepare(
+			`UPDATE pieces SET
+			 presentation_title = CASE WHEN presentation_title_manual = 1 THEN presentation_title ELSE ? END,
+			 presentation_description = CASE WHEN presentation_description_manual = 1 THEN presentation_description ELSE ? END,
+			 presentation_image_url = CASE WHEN presentation_image_manual = 1 THEN presentation_image_url ELSE ? END,
+			 presentation_site_name = ?, presentation_provider = ?, presentation_provider_id = ?,
+			 presentation_metadata_fetched_at_utc = ?, updated_at_utc = ?, revision = revision + 1
+			 WHERE id = ? AND revision = ? AND status != 'archived'`
+		)
+		.run(
+			metadata.title,
+			metadata.description,
+			metadata.imageUrl,
+			metadata.siteName,
+			metadata.provider,
+			metadata.providerId,
+			now,
+			now,
+			id,
+			expectedRevision
+		);
+	if (result.changes !== 1) throw new Error('CONFLICT');
+	return { revision: expectedRevision + 1, updatedAtUtc: now };
+}
+
 export async function uploadPieceImage(
 	pieceId: string,
 	expectedRevision: number,

src/lib/server/database.spec.ts

@@ -62,7 +62,7 @@ describe('database setup', () => {
 		database.close();
 
 		expect(counts).toEqual({
-			migrations: 5,
+			migrations: 6,
 			pieces: 6,
 			shows: 2,
 			usages: 5,

src/lib/server/live.spec.ts

@@ -134,4 +134,52 @@ describe('live mode', () => {
 			'Die kleine Konsole mit dem großen Dreh'
 		);
 	});
+
+	it('projects only snapshotted link and video data and changes players explicitly', () => {
+		getDatabase()
+			.prepare(
+				`UPDATE piece_usages SET presentation_mode_snapshot = 'video',
+				 presentation_source_label_snapshot = 'YouTube',
+				 presentation_source_url_snapshot = 'https://youtu.be/dQw4w9WgXcQ',
+				 presentation_source_timecode_snapshot = 75,
+				 presentation_title_meta_snapshot = 'Videotitel',
+				 presentation_site_name_snapshot = 'YouTube',
+				 presentation_provider_snapshot = 'youtube',
+				 presentation_provider_id_snapshot = 'dQw4w9WgXcQ'
+				 WHERE id = 'usage-console'`
+			)
+			.run();
+		getDatabase()
+			.prepare(
+				`UPDATE piece_usages SET presentation_mode_snapshot = 'link',
+				 presentation_source_label_snapshot = 'Artikel',
+				 presentation_source_url_snapshot = 'https://example.com/artikel',
+				 presentation_title_meta_snapshot = 'Linktitel',
+				 presentation_description_snapshot = 'Öffentlicher Anreißer',
+				 presentation_site_name_snapshot = 'Example'
+				 WHERE id = 'usage-effects'`
+			)
+			.run();
+		const token = issuePresentationAccess('show-october');
+		presentUsage('show-october', 'usage-console', 'present-video', 0);
+		expect(getPresentationView(token)?.content).toMatchObject({
+			mode: 'video',
+			previewTitle: 'Videotitel',
+			embedUrl: 'https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ?start=75',
+			source: { url: 'https://youtu.be/dQw4w9WgXcQ', timecodeSeconds: 75 }
+		});
+
+		presentUsage('show-october', 'usage-effects', 'present-link', 1);
+		const link = getPresentationView(token)!;
+		expect(link.content).toMatchObject({
+			mode: 'link',
+			previewTitle: 'Linktitel',
+			description: 'Öffentlicher Anreißer',
+			embedUrl: '',
+			source: { label: 'Artikel', url: 'https://example.com/artikel' }
+		});
+		const serialized = JSON.stringify(link);
+		expect(serialized).not.toContain('Herstellerangaben');
+		expect(serialized).not.toContain('Moderationsstichpunkte');
+	});
 });

src/lib/server/live.ts

@@ -3,6 +3,7 @@ import type Database from 'better-sqlite3';
 import { getMediaFile } from './content.js';
 import { getDatabase } from './database.js';
 import { renderMarkdown } from './markdown.js';
+import { buildEmbedUrl, fetchPresentationImage, type PresentationContent } from './presentation.js';
 import {
 	getShow,
 	movePieceUsage,
@@ -67,8 +68,17 @@ export type LiveView = {
 export type PresentationView = {
 	revision: number;
 	content: null | {
+		mode: PresentationContent['mode'];
 		title: string;
 		html: string;
+		source: PresentationContent['source'];
+		previewTitle: string;
+		description: string;
+		imageUrl: string;
+		siteName: string;
+		provider: PresentationContent['provider'];
+		providerId: string;
+		embedUrl: string;
 		sources: { label: string; url: string; timecodeSeconds: number | null }[];
 		images: { id: string; altText: string }[];
 	};
@@ -506,45 +516,95 @@ export function getPresentationView(token: string): PresentationView | null {
 	if (!state.presentation_usage_id) return { revision: state.presentation_revision, content: null };
 	const usage = database
 		.prepare(
-			`SELECT u.title_snapshot, u.presentation_snapshot, u.original_piece_id
+			`SELECT u.title_snapshot, u.presentation_snapshot, u.original_piece_id,
+			 u.presentation_mode_snapshot, u.presentation_source_label_snapshot,
+			 u.presentation_source_url_snapshot, u.presentation_source_timecode_snapshot,
+			 u.presentation_title_meta_snapshot, u.presentation_description_snapshot,
+			 u.presentation_image_url_snapshot, u.presentation_site_name_snapshot,
+			 u.presentation_provider_snapshot, u.presentation_provider_id_snapshot
 			 FROM piece_usages u JOIN show_sections s ON s.id = u.show_section_id
 			 WHERE u.id = ? AND s.show_id = ? AND s.is_reserve_bank = 0`
 		)
 		.get(state.presentation_usage_id, showId) as
-		| { title_snapshot: string; presentation_snapshot: string; original_piece_id: string | null }
+		| {
+				title_snapshot: string;
+				presentation_snapshot: string;
+				original_piece_id: string | null;
+				presentation_mode_snapshot: PresentationContent['mode'];
+				presentation_source_label_snapshot: string;
+				presentation_source_url_snapshot: string;
+				presentation_source_timecode_snapshot: number | null;
+				presentation_title_meta_snapshot: string;
+				presentation_description_snapshot: string;
+				presentation_image_url_snapshot: string;
+				presentation_site_name_snapshot: string;
+				presentation_provider_snapshot: PresentationContent['provider'];
+				presentation_provider_id_snapshot: string;
+		  }
 		| undefined;
 	if (!usage) return { revision: state.presentation_revision, content: null };
-	const sources = usage.original_piece_id
+	const sources =
-		? (database
+		usage.presentation_mode_snapshot === 'text' && usage.original_piece_id
-				.prepare(
+			? (database
-					`SELECT label, url, timecode_seconds AS timecodeSeconds
+					.prepare(
+						`SELECT label, url, timecode_seconds AS timecodeSeconds
 					 FROM piece_sources WHERE piece_id = ? ORDER BY position`
-				)
+					)
-				.all(usage.original_piece_id) as {
+					.all(usage.original_piece_id) as {
-				label: string;
+					label: string;
-				url: string;
+					url: string;
-				timecodeSeconds: number | null;
+					timecodeSeconds: number | null;
-			}[])
+				}[])
-		: [];
+			: [];
-	const images = usage.original_piece_id
+	const images =
-		? (database
+		usage.presentation_mode_snapshot === 'text' && usage.original_piece_id
-				.prepare(
+			? (database
-					`SELECT id, alt_text AS altText FROM piece_media
+					.prepare(
+						`SELECT id, alt_text AS altText FROM piece_media
 					 WHERE piece_id = ? ORDER BY position`
-				)
+					)
-				.all(usage.original_piece_id) as { id: string; altText: string }[])
+					.all(usage.original_piece_id) as { id: string; altText: string }[])
-		: [];
+			: [];
 	return {
 		revision: state.presentation_revision,
 		content: {
+			mode: usage.presentation_mode_snapshot,
 			title: usage.title_snapshot,
 			html: renderMarkdown(usage.presentation_snapshot),
+			source: usage.presentation_source_url_snapshot
+				? {
+						label: usage.presentation_source_label_snapshot,
+						url: usage.presentation_source_url_snapshot,
+						timecodeSeconds: usage.presentation_source_timecode_snapshot
+					}
+				: null,
+			previewTitle: usage.presentation_title_meta_snapshot,
+			description: usage.presentation_description_snapshot,
+			imageUrl: usage.presentation_image_url_snapshot,
+			siteName: usage.presentation_site_name_snapshot,
+			provider: usage.presentation_provider_snapshot,
+			providerId: usage.presentation_provider_id_snapshot,
+			embedUrl: buildEmbedUrl(
+				usage.presentation_provider_snapshot,
+				usage.presentation_provider_id_snapshot,
+				usage.presentation_source_timecode_snapshot
+			),
 			sources,
 			images
 		}
 	};
 }
 
+export async function getPresentationPreviewImage(token: string) {
+	const view = getPresentationView(token);
+	if (!view?.content?.imageUrl || view.content.mode === 'text') return null;
+	try {
+		return await fetchPresentationImage(view.content.imageUrl);
+	} catch {
+		return null;
+	}
+}
+
 export async function getPresentationMedia(token: string, mediaId: string) {
 	const database = getDatabase();
 	const showId = presentationShowId(database, token);

src/lib/server/presentation.spec.ts

@@ -0,0 +1,61 @@
+import { describe, expect, it } from 'vitest';
+import {
+	buildEmbedUrl,
+	detectVideoProvider,
+	extractMetadataFromHtml,
+	fetchPresentationMetadata
+} from './presentation.js';
+
+describe('presentation metadata and providers', () => {
+	it('recognizes supported YouTube URL forms and creates privacy-enhanced embeds with start time', () => {
+		for (const url of [
+			'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+			'https://youtu.be/dQw4w9WgXcQ',
+			'https://www.youtube.com/shorts/dQw4w9WgXcQ',
+			'https://youtube.com/live/dQw4w9WgXcQ'
+		]) {
+			expect(detectVideoProvider(url)).toEqual({ provider: 'youtube', id: 'dQw4w9WgXcQ' });
+		}
+		expect(buildEmbedUrl('youtube', 'dQw4w9WgXcQ', 75)).toBe(
+			'https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ?start=75'
+		);
+		expect(detectVideoProvider('https://evil.example/watch?v=dQw4w9WgXcQ')).toBeNull();
+		expect(detectVideoProvider('https://youtube.com/watch?v=invalid')).toBeNull();
+	});
+
+	it('recognizes canonical TikTok videos without inventing a start parameter', () => {
+		expect(
+			detectVideoProvider('https://www.tiktok.com/@scout2015/video/6718335390845095173')
+		).toEqual({ provider: 'tiktok', id: '6718335390845095173' });
+		expect(buildEmbedUrl('tiktok', '6718335390845095173', 90)).toBe(
+			'https://www.tiktok.com/player/v1/6718335390845095173?autoplay=0&controls=1'
+		);
+	});
+
+	it('extracts generic metadata from local HTML and tolerates a missing image', async () => {
+		const metadata = await extractMetadataFromHtml(
+			`<!doctype html><html><head>
+				<meta property="og:title" content="Lokale Vorschau">
+				<meta property="og:description" content="Ein kurzer Anreißer">
+				<meta property="og:site_name" content="Testseite">
+			</head></html>`,
+			'https://example.com/artikel'
+		);
+		expect(metadata).toMatchObject({
+			title: 'Lokale Vorschau',
+			description: 'Ein kurzer Anreißer',
+			imageUrl: '',
+			siteName: 'Testseite'
+		});
+	});
+
+	it('rejects malformed and private metadata targets before a network request', async () => {
+		await expect(fetchPresentationMetadata('keine-url')).rejects.toThrow('FETCH_INVALID_URL');
+		await expect(fetchPresentationMetadata('http://127.0.0.1/private')).rejects.toThrow(
+			'FETCH_BLOCKED'
+		);
+		await expect(fetchPresentationMetadata('http://[::1]/private')).rejects.toThrow(
+			'FETCH_BLOCKED'
+		);
+	});
+});

src/lib/server/presentation.ts

@@ -0,0 +1,274 @@
+import { lookup } from 'node:dns/promises';
+import { isIP } from 'node:net';
+import http from 'node:http';
+import https from 'node:https';
+import metascraper from 'metascraper';
+import description from 'metascraper-description';
+import image from 'metascraper-image';
+import publisher from 'metascraper-publisher';
+import title from 'metascraper-title';
+
+export type PresentationMode = 'text' | 'link' | 'video';
+export type VideoProvider = 'youtube' | 'tiktok';
+
+export type PresentationMetadata = {
+	title: string;
+	description: string;
+	imageUrl: string;
+	siteName: string;
+	provider: VideoProvider | '';
+	providerId: string;
+};
+
+export type PresentationSource = {
+	label: string;
+	url: string;
+	timecodeSeconds: number | null;
+};
+
+export type PresentationContent = {
+	mode: PresentationMode;
+	title: string;
+	html: string;
+	source: PresentationSource | null;
+	previewTitle: string;
+	description: string;
+	imageUrl: string;
+	siteName: string;
+	provider: VideoProvider | '';
+	providerId: string;
+	embedUrl: string;
+};
+
+const scrape = metascraper([title(), description({ truncateLength: 500 }), image(), publisher()]);
+const MAX_HTML_BYTES = 1024 * 1024;
+const MAX_IMAGE_BYTES = 5 * 1024 * 1024;
+const REQUEST_TIMEOUT_MS = 5_000;
+const MAX_REDIRECTS = 3;
+
+function isPrivateIpv4(address: string) {
+	const parts = address.split('.').map(Number);
+	return (
+		parts[0] === 0 ||
+		parts[0] === 10 ||
+		parts[0] === 127 ||
+		(parts[0] === 169 && parts[1] === 254) ||
+		(parts[0] === 172 && parts[1] >= 16 && parts[1] <= 31) ||
+		(parts[0] === 192 && parts[1] === 168) ||
+		(parts[0] === 100 && parts[1] >= 64 && parts[1] <= 127) ||
+		parts[0] >= 224
+	);
+}
+
+function isPrivateAddress(address: string) {
+	if (isIP(address) === 4) return isPrivateIpv4(address);
+	const normalized = address.toLowerCase().split('%')[0];
+	if (normalized === '::' || normalized === '::1') return true;
+	if (normalized.startsWith('fc') || normalized.startsWith('fd') || normalized.startsWith('fe8')) {
+		return true;
+	}
+	if (
+		normalized.startsWith('fe9') ||
+		normalized.startsWith('fea') ||
+		normalized.startsWith('feb')
+	) {
+		return true;
+	}
+	const mapped = normalized.match(/^::ffff:(\d+\.\d+\.\d+\.\d+)$/)?.[1];
+	return mapped ? isPrivateIpv4(mapped) : false;
+}
+
+async function publicAddress(url: URL) {
+	if (!['http:', 'https:'].includes(url.protocol) || url.username || url.password) {
+		throw new Error('FETCH_BLOCKED');
+	}
+	if (url.port && url.port !== (url.protocol === 'https:' ? '443' : '80')) {
+		throw new Error('FETCH_BLOCKED');
+	}
+	const hostname = url.hostname.startsWith('[') ? url.hostname.slice(1, -1) : url.hostname;
+	if (hostname === 'localhost' || hostname.endsWith('.localhost')) {
+		throw new Error('FETCH_BLOCKED');
+	}
+	const addresses = isIP(hostname)
+		? [{ address: hostname, family: isIP(hostname) }]
+		: await lookup(hostname, { all: true, verbatim: true }).catch(() => {
+				throw new Error('FETCH_UNAVAILABLE');
+			});
+	if (!addresses.length || addresses.some((entry) => isPrivateAddress(entry.address))) {
+		throw new Error('FETCH_BLOCKED');
+	}
+	return addresses[0];
+}
+
+async function requestPublic(
+	input: string,
+	accept: string,
+	maximumBytes: number,
+	redirects = 0
+): Promise<{ url: string; contentType: string; data: Buffer }> {
+	let url: URL;
+	try {
+		url = new URL(input);
+	} catch {
+		throw new Error('FETCH_INVALID_URL');
+	}
+	const target = await publicAddress(url);
+	const client = url.protocol === 'https:' ? https : http;
+	return new Promise((resolve, reject) => {
+		const request = client.get(
+			url,
+			{
+				headers: {
+					Accept: accept,
+					'User-Agent': 'Sendewerk/0.5.1 (+https://git.hnz.io/hnzio/sendewerk)'
+				},
+				lookup: (_hostname, _options, callback) =>
+					callback(null, target.address, target.family as 4 | 6)
+			},
+			(response) => {
+				const status = response.statusCode ?? 0;
+				if (status >= 300 && status < 400 && response.headers.location) {
+					response.resume();
+					if (redirects >= MAX_REDIRECTS) return reject(new Error('FETCH_REDIRECTS'));
+					const next = new URL(response.headers.location, url).href;
+					requestPublic(next, accept, maximumBytes, redirects + 1).then(resolve, reject);
+					return;
+				}
+				if (status < 200 || status >= 300) {
+					response.resume();
+					return reject(new Error('FETCH_UNAVAILABLE'));
+				}
+				const chunks: Buffer[] = [];
+				let size = 0;
+				response.on('data', (chunk: Buffer) => {
+					size += chunk.length;
+					if (size > maximumBytes) {
+						request.destroy(new Error('FETCH_TOO_LARGE'));
+						return;
+					}
+					chunks.push(chunk);
+				});
+				response.on('end', () =>
+					resolve({
+						url: url.href,
+						contentType: String(response.headers['content-type'] ?? ''),
+						data: Buffer.concat(chunks)
+					})
+				);
+			}
+		);
+		request.setTimeout(REQUEST_TIMEOUT_MS, () => request.destroy(new Error('FETCH_TIMEOUT')));
+		request.on('error', reject);
+	});
+}
+
+export function detectVideoProvider(input: string): {
+	provider: VideoProvider;
+	id: string;
+} | null {
+	let url: URL;
+	try {
+		url = new URL(input);
+	} catch {
+		return null;
+	}
+	if (url.protocol !== 'https:' || url.username || url.password || url.port) return null;
+	const host = url.hostname.toLowerCase();
+	let youtubeId = '';
+	if (host === 'youtu.be') youtubeId = url.pathname.split('/').filter(Boolean)[0] ?? '';
+	if (host === 'youtube.com' || host === 'www.youtube.com' || host === 'm.youtube.com') {
+		if (url.pathname === '/watch') youtubeId = url.searchParams.get('v') ?? '';
+		else if (/^\/(shorts|embed|live)\//.test(url.pathname)) {
+			youtubeId = url.pathname.split('/').filter(Boolean)[1] ?? '';
+		}
+	}
+	if (/^[A-Za-z0-9_-]{11}$/.test(youtubeId)) {
+		return { provider: 'youtube', id: youtubeId };
+	}
+	if (host === 'tiktok.com' || host === 'www.tiktok.com' || host === 'm.tiktok.com') {
+		const id = url.pathname.match(/\/video\/(\d+)/)?.[1] ?? '';
+		if (/^\d+$/.test(id)) return { provider: 'tiktok', id };
+	}
+	return null;
+}
+
+export function buildEmbedUrl(
+	provider: VideoProvider | '',
+	providerId: string,
+	timecodeSeconds: number | null
+) {
+	if (provider === 'youtube' && /^[A-Za-z0-9_-]{11}$/.test(providerId)) {
+		const url = new URL(`https://www.youtube-nocookie.com/embed/${providerId}`);
+		if (timecodeSeconds && timecodeSeconds > 0)
+			url.searchParams.set('start', String(timecodeSeconds));
+		return url.href;
+	}
+	if (provider === 'tiktok' && /^\d+$/.test(providerId)) {
+		const url = new URL(`https://www.tiktok.com/player/v1/${providerId}`);
+		url.searchParams.set('autoplay', '0');
+		url.searchParams.set('controls', '1');
+		return url.href;
+	}
+	return '';
+}
+
+export async function extractMetadataFromHtml(
+	html: string,
+	url: string
+): Promise<PresentationMetadata> {
+	const metadata = await scrape({ html, url });
+	return {
+		title: String(metadata.title ?? '').slice(0, 300),
+		description: String(metadata.description ?? '').slice(0, 1_000),
+		imageUrl: String(metadata.image ?? '').slice(0, 2_000),
+		siteName: String(metadata.publisher ?? new URL(url).hostname).slice(0, 200),
+		provider: '',
+		providerId: ''
+	};
+}
+
+async function providerMetadata(url: string, provider: VideoProvider) {
+	const endpoint =
+		provider === 'youtube'
+			? `https://www.youtube.com/oembed?format=json&url=${encodeURIComponent(url)}`
+			: `https://www.tiktok.com/oembed?url=${encodeURIComponent(url)}`;
+	const response = await requestPublic(endpoint, 'application/json', 256 * 1024);
+	if (!response.contentType.toLowerCase().includes('json')) throw new Error('FETCH_INVALID_TYPE');
+	const value = JSON.parse(response.data.toString('utf8')) as Record<string, unknown>;
+	return {
+		title: String(value.title ?? '').slice(0, 300),
+		description: '',
+		imageUrl: String(value.thumbnail_url ?? '').slice(0, 2_000),
+		siteName: String(value.provider_name ?? (provider === 'youtube' ? 'YouTube' : 'TikTok')).slice(
+			0,
+			200
+		)
+	};
+}
+
+export async function fetchPresentationMetadata(url: string): Promise<PresentationMetadata> {
+	const video = detectVideoProvider(url);
+	if (video) {
+		const metadata = await providerMetadata(url, video.provider);
+		return { ...metadata, provider: video.provider, providerId: video.id };
+	}
+	const response = await requestPublic(url, 'text/html,application/xhtml+xml', MAX_HTML_BYTES);
+	const contentType = response.contentType.toLowerCase();
+	if (!contentType.includes('text/html') && !contentType.includes('application/xhtml+xml')) {
+		throw new Error('FETCH_INVALID_TYPE');
+	}
+	return extractMetadataFromHtml(response.data.toString('utf8'), response.url);
+}
+
+export async function fetchPresentationImage(url: string) {
+	const response = await requestPublic(
+		url,
+		'image/jpeg,image/png,image/webp,image/gif',
+		MAX_IMAGE_BYTES
+	);
+	const mimeType = response.contentType.split(';')[0].trim().toLowerCase();
+	if (!['image/jpeg', 'image/png', 'image/webp', 'image/gif'].includes(mimeType)) {
+		throw new Error('FETCH_INVALID_TYPE');
+	}
+	return { data: response.data, mimeType };
+}

src/lib/server/shows.spec.ts

@@ -9,10 +9,13 @@ import {
 	addPieceUsage,
 	addShowSection,
 	createShow,
+	duplicatePieceUsage,
+	getPieceUsageContexts,
 	getShow,
 	listShowTemplates,
 	movePieceUsage,
 	moveShowSection,
+	refreshPieceUsageFromOriginal,
 	removePieceUsage,
 	removeShowSection,
 	updatePieceUsage,
@@ -46,9 +49,16 @@ function editedUsage(usage: PieceUsage, overrides: Partial<PieceUsage> = {}) {
 		moderation: edited.moderation,
 		transition: edited.transition,
 		presentation: edited.presentation,
+		presentationMode: edited.presentationMode,
+		presentationSourceLabel: edited.presentationSourceLabel,
+		presentationSourceUrl: edited.presentationSourceUrl,
+		presentationSourceTimecodeSeconds: edited.presentationSourceTimecodeSeconds,
+		presentationTitle: edited.presentationTitle,
+		presentationDescription: edited.presentationDescription,
+		presentationImageUrl: edited.presentationImageUrl,
+		presentationSiteName: edited.presentationSiteName,
 		ownNotes: edited.ownNotes,
-		durationSeconds: edited.durationSeconds,
+		durationSeconds: edited.durationSeconds
-		status: edited.status
 	};
 }
 
@@ -153,6 +163,245 @@ describe('show builder data layer', () => {
 		});
 	});
 
+	it('derives sent history and current planning only from qualifying usages by original id', () => {
+		const completed = createShow({
+			title: 'Abgeschlossene Sendung',
+			startsAtUtc: '2027-01-10T19:00:00Z',
+			templateId: null
+		});
+		const completedSection = addShowSection(completed.id, completed.revision, {
+			name: 'Ablauf',
+			categoryId: null,
+			explicitDurationSeconds: null
+		});
+		const done = addPieceUsage(completed.id, completedSection.revision, {
+			pieceId: 'piece-console',
+			sectionId: completedSection.id
+		});
+		const skipped = addPieceUsage(completed.id, done.revision, {
+			pieceId: 'piece-effects',
+			sectionId: completedSection.id
+		});
+		const reserve = addPieceUsage(completed.id, skipped.revision, {
+			pieceId: 'piece-pixels',
+			sectionId: null
+		});
+		getDatabase()
+			.prepare("UPDATE piece_usages SET status = 'done' WHERE id IN (?, ?)")
+			.run(done.id, reserve.id);
+		getDatabase()
+			.prepare("UPDATE piece_usages SET status = 'skipped' WHERE id = ?")
+			.run(skipped.id);
+		getDatabase().prepare("UPDATE shows SET status = 'completed' WHERE id = ?").run(completed.id);
+
+		const active = createShow({ title: 'Aktuelle Planung', startsAtUtc: null, templateId: null });
+		const activeSection = addShowSection(active.id, active.revision, {
+			name: 'Plan',
+			categoryId: null,
+			explicitDurationSeconds: null
+		});
+		const planned = addPieceUsage(active.id, activeSection.revision, {
+			pieceId: 'piece-console',
+			sectionId: activeSection.id
+		});
+		const plannedReserve = addPieceUsage(active.id, planned.revision, {
+			pieceId: 'piece-effects',
+			sectionId: null
+		});
+		getDatabase().prepare("UPDATE piece_usages SET status = 'done' WHERE id = ?").run(planned.id);
+
+		let contexts = getPieceUsageContexts(
+			['piece-console', 'piece-effects', 'piece-pixels'],
+			active.id
+		);
+		expect(contexts['piece-console']).toMatchObject({
+			isPlannedInCurrentShow: true,
+			sentHistory: [
+				{
+					usageId: done.id,
+					showId: completed.id,
+					showTitle: 'Abgeschlossene Sendung',
+					usedAtUtc: '2027-01-10T19:00:00.000Z'
+				}
+			]
+		});
+		expect(contexts['piece-effects']).toEqual({
+			isPlannedInActiveShow: true,
+			isPlannedInCurrentShow: true,
+			sentHistory: []
+		});
+		expect(contexts['piece-pixels']).toEqual({
+			isPlannedInActiveShow: true,
+			isPlannedInCurrentShow: false,
+			sentHistory: []
+		});
+
+		removePieceUsage(active.id, plannedReserve.id, plannedReserve.revision);
+		contexts = getPieceUsageContexts(['piece-effects'], active.id);
+		expect(contexts['piece-effects'].isPlannedInCurrentShow).toBe(false);
+	});
+
+	it('duplicates an adjusted usage directly after its source without live measurements', () => {
+		const created = createShow({
+			title: 'Einplanungsduplikat',
+			startsAtUtc: null,
+			templateId: null
+		});
+		const section = addShowSection(created.id, created.revision, {
+			name: 'Ablauf',
+			categoryId: null,
+			explicitDurationSeconds: null
+		});
+		const usage = addPieceUsage(created.id, section.revision, {
+			pieceId: 'piece-console',
+			sectionId: section.id
+		});
+		const source = getShow(created.id)!.sections[0].usages[0];
+		const adjusted = updatePieceUsage(
+			created.id,
+			usage.id,
+			usage.revision,
+			editedUsage(source, {
+				title: 'Angepasste Einplanung',
+				durationSeconds: 777,
+				intro: 'Eigene Einleitung',
+				research: 'Eigene Recherche',
+				moderation: 'Eigene Moderation',
+				transition: 'Eigene Überleitung',
+				presentation: 'Eigene Präsentation',
+				ownNotes: 'Eigene Notizen'
+			})
+		);
+		getDatabase().prepare("UPDATE piece_usages SET status = 'done' WHERE id = ?").run(usage.id);
+		getDatabase()
+			.prepare(
+				`INSERT INTO live_usage_runs (id, show_id, usage_id, started_at_utc, ended_at_utc)
+				 VALUES ('source-run', ?, ?, '2027-01-01T10:00:00.000Z', '2027-01-01T10:10:00.000Z')`
+			)
+			.run(created.id, usage.id);
+		const pieceCountBefore = (
+			getDatabase().prepare('SELECT count(*) AS count FROM pieces').get() as { count: number }
+		).count;
+
+		const duplicate = duplicatePieceUsage(created.id, usage.id, adjusted.revision);
+		const usages = getShow(created.id)!.sections[0].usages;
+		expect(usages.map((item) => item.id)).toEqual([usage.id, duplicate.id]);
+		expect(usages[1]).toMatchObject({
+			originalPieceId: 'piece-console',
+			status: 'open',
+			durationSeconds: 777,
+			title: 'Angepasste Einplanung',
+			intro: 'Eigene Einleitung',
+			research: 'Eigene Recherche',
+			moderation: 'Eigene Moderation',
+			transition: 'Eigene Überleitung',
+			presentation: 'Eigene Präsentation',
+			ownNotes: 'Eigene Notizen'
+		});
+		expect(
+			getDatabase()
+				.prepare('SELECT count(*) AS count FROM live_usage_runs WHERE usage_id = ?')
+				.get(duplicate.id)
+		).toEqual({ count: 0 });
+		expect(
+			(getDatabase().prepare('SELECT count(*) AS count FROM pieces').get() as { count: number })
+				.count
+		).toBe(pieceCountBefore);
+
+		getDatabase()
+			.prepare(
+				`UPDATE pieces SET title = 'Aktuelles Original', duration_seconds = 420,
+				 intro = 'Neue Einleitung', research_text = 'Neue Recherche',
+				 moderation_notes = 'Neue Moderation', transition_text = 'Neue Überleitung',
+				 presentation_text = 'Neue Präsentation' WHERE id = 'piece-console'`
+			)
+			.run();
+		const refreshed = refreshPieceUsageFromOriginal(created.id, usage.id, duplicate.revision);
+		const refreshedUsages = getShow(created.id)!.sections[0].usages;
+		expect(refreshedUsages[0]).toMatchObject({
+			title: 'Aktuelles Original',
+			durationSeconds: 420,
+			intro: 'Neue Einleitung',
+			research: 'Neue Recherche',
+			moderation: 'Neue Moderation',
+			transition: 'Neue Überleitung',
+			presentation: 'Neue Präsentation',
+			ownNotes: 'Eigene Notizen',
+			status: 'done'
+		});
+		expect(refreshedUsages[1]).toMatchObject({
+			title: 'Angepasste Einplanung',
+			durationSeconds: 777,
+			status: 'open'
+		});
+		expect(
+			getDatabase()
+				.prepare('SELECT count(*) AS count FROM live_usage_runs WHERE usage_id = ?')
+				.get(usage.id)
+		).toEqual({ count: 1 });
+		expect(() => duplicatePieceUsage(created.id, usage.id, adjusted.revision)).toThrow('CONFLICT');
+		expect(getShow(created.id)?.revision).toBe(refreshed.revision);
+		getDatabase()
+			.prepare('UPDATE piece_usages SET original_piece_id = NULL WHERE id = ?')
+			.run(duplicate.id);
+		expect(() =>
+			refreshPieceUsageFromOriginal(created.id, duplicate.id, refreshed.revision)
+		).toThrow('ORIGINAL_NOT_FOUND');
+		expect(getShow(created.id)?.revision).toBe(refreshed.revision);
+		expect(getShow(created.id)!.sections[0].usages).toHaveLength(2);
+	});
+
+	it('snapshots presentation settings until an explicit refresh and copies them on duplication', () => {
+		getDatabase()
+			.prepare(
+				`UPDATE piece_sources SET label = 'YouTube', url = ?, timecode_seconds = 75
+				 WHERE piece_id = 'piece-console' AND position = 0`
+			)
+			.run('https://youtu.be/dQw4w9WgXcQ');
+		getDatabase()
+			.prepare(
+				`UPDATE pieces SET presentation_mode = 'video', presentation_source_position = 0,
+				 presentation_title = 'Gespeicherte Vorschau', presentation_description = 'Erster Stand',
+				 presentation_site_name = 'YouTube', presentation_provider = 'youtube',
+				 presentation_provider_id = 'dQw4w9WgXcQ' WHERE id = 'piece-console'`
+			)
+			.run();
+		const show = createShow({ title: 'Snapshot-Test', startsAtUtc: null, templateId: null });
+		const section = addShowSection(show.id, show.revision, {
+			name: 'Videos',
+			categoryId: null,
+			explicitDurationSeconds: null
+		});
+		const added = addPieceUsage(show.id, section.revision, {
+			pieceId: 'piece-console',
+			sectionId: section.id
+		});
+		let usage = getShow(show.id)!.sections[0].usages[0];
+		expect(usage).toMatchObject({
+			presentationMode: 'video',
+			presentationSourceUrl: 'https://youtu.be/dQw4w9WgXcQ',
+			presentationSourceTimecodeSeconds: 75,
+			presentationTitle: 'Gespeicherte Vorschau'
+		});
+
+		getDatabase()
+			.prepare(
+				`UPDATE pieces SET presentation_title = 'Neuer Originaltitel' WHERE id = 'piece-console'`
+			)
+			.run();
+		expect(getShow(show.id)!.sections[0].usages[0].presentationTitle).toBe('Gespeicherte Vorschau');
+		const refreshed = refreshPieceUsageFromOriginal(show.id, usage.id, added.revision);
+		usage = getShow(show.id)!.sections[0].usages[0];
+		expect(usage.presentationTitle).toBe('Neuer Originaltitel');
+		duplicatePieceUsage(show.id, usage.id, refreshed.revision);
+		expect(getShow(show.id)!.sections[0].usages[1]).toMatchObject({
+			presentationMode: 'video',
+			presentationSourceUrl: 'https://youtu.be/dQw4w9WgXcQ',
+			presentationTitle: 'Neuer Originaltitel',
+			status: 'open'
+		});
+	});
+
 	it('persists normalized section and usage reordering, moving and removal', () => {
 		const created = createShow({ title: 'Sortierung', startsAtUtc: null, templateId: null });
 		const firstSection = addShowSection(created.id, created.revision, {

src/lib/server/shows.ts

@@ -1,6 +1,7 @@
 import { randomUUID } from 'node:crypto';
 import type Database from 'better-sqlite3';
 import { getDatabase } from './database.js';
+import { detectVideoProvider, type PresentationMode } from './presentation.js';
 
 export const SHOW_STATUSES = ['draft', 'ready', 'live', 'completed'] as const;
 export const USAGE_STATUSES = ['open', 'current', 'done', 'skipped'] as const;
@@ -46,9 +47,32 @@ export type PieceUsage = {
 	moderation: string;
 	transition: string;
 	presentation: string;
+	presentationMode: PresentationMode;
+	presentationSourceLabel: string;
+	presentationSourceUrl: string;
+	presentationSourceTimecodeSeconds: number | null;
+	presentationTitle: string;
+	presentationDescription: string;
+	presentationImageUrl: string;
+	presentationSiteName: string;
+	presentationProvider: string;
+	presentationProviderId: string;
 	ownNotes: string;
 };
 
+export type SentPieceUsage = {
+	usageId: string;
+	showId: string;
+	showTitle: string;
+	usedAtUtc: string;
+};
+
+export type PieceUsageContext = {
+	sentHistory: SentPieceUsage[];
+	isPlannedInActiveShow: boolean;
+	isPlannedInCurrentShow: boolean;
+};
+
 export type ShowSection = {
 	id: string;
 	name: string;
@@ -110,9 +134,16 @@ export type PieceUsageUpdate = {
 	moderation: string;
 	transition: string;
 	presentation: string;
+	presentationMode: PresentationMode;
+	presentationSourceLabel: string;
+	presentationSourceUrl: string;
+	presentationSourceTimecodeSeconds: number | null;
+	presentationTitle: string;
+	presentationDescription: string;
+	presentationImageUrl: string;
+	presentationSiteName: string;
 	ownNotes: string;
 	durationSeconds: number;
-	status: UsageStatus;
 };
 
 export type MovePieceUsageInput = {
@@ -159,6 +190,16 @@ type UsageRow = {
 	moderation_snapshot: string;
 	transition_snapshot: string;
 	presentation_snapshot: string;
+	presentation_mode_snapshot: PresentationMode;
+	presentation_source_label_snapshot: string;
+	presentation_source_url_snapshot: string;
+	presentation_source_timecode_snapshot: number | null;
+	presentation_title_meta_snapshot: string;
+	presentation_description_snapshot: string;
+	presentation_image_url_snapshot: string;
+	presentation_site_name_snapshot: string;
+	presentation_provider_snapshot: string;
+	presentation_provider_id_snapshot: string;
 	own_notes: string;
 };
 
@@ -191,6 +232,50 @@ function validTimestamp(value: string | null): string | null {
 	return date.toISOString();
 }
 
+function validPresentation(
+	mode: PresentationMode,
+	sourceLabel: string,
+	sourceUrl: string,
+	timecodeSeconds: number | null,
+	title: string,
+	description: string,
+	imageUrl: string,
+	siteName: string
+) {
+	if (!['text', 'link', 'video'].includes(mode)) throw new Error('INVALID_PRESENTATION');
+	const cleanUrl = cleanText(sourceUrl, 2_000, 'presentation_source');
+	const cleanImageUrl = cleanText(imageUrl, 2_000, 'presentation_image');
+	for (const value of [cleanUrl, cleanImageUrl]) {
+		if (!value) continue;
+		try {
+			const url = new URL(value);
+			if (!['http:', 'https:'].includes(url.protocol)) throw new Error();
+		} catch {
+			throw new Error('INVALID_PRESENTATION');
+		}
+	}
+	if (mode !== 'text' && !cleanUrl) throw new Error('INVALID_PRESENTATION');
+	if (
+		timecodeSeconds !== null &&
+		(!Number.isInteger(timecodeSeconds) || timecodeSeconds < 0 || timecodeSeconds > 86_400)
+	) {
+		throw new Error('INVALID_PRESENTATION');
+	}
+	const detected = detectVideoProvider(cleanUrl);
+	return {
+		mode,
+		sourceLabel: cleanText(sourceLabel, 200, 'presentation_source'),
+		sourceUrl: cleanUrl,
+		timecodeSeconds,
+		title: cleanText(title, 300, 'presentation_title'),
+		description: cleanText(description, 1_000, 'presentation_description'),
+		imageUrl: cleanImageUrl,
+		siteName: cleanText(siteName, 200, 'presentation_site'),
+		provider: detected?.provider ?? '',
+		providerId: detected?.id ?? ''
+	};
+}
+
 function requireRevision(expectedRevision: number): void {
 	if (!Number.isInteger(expectedRevision) || expectedRevision < 1) {
 		throw new Error('INVALID_REVISION');
@@ -296,6 +381,16 @@ function usageFromRow(row: UsageRow): PieceUsage {
 		moderation: row.moderation_snapshot,
 		transition: row.transition_snapshot,
 		presentation: row.presentation_snapshot,
+		presentationMode: row.presentation_mode_snapshot,
+		presentationSourceLabel: row.presentation_source_label_snapshot,
+		presentationSourceUrl: row.presentation_source_url_snapshot,
+		presentationSourceTimecodeSeconds: row.presentation_source_timecode_snapshot,
+		presentationTitle: row.presentation_title_meta_snapshot,
+		presentationDescription: row.presentation_description_snapshot,
+		presentationImageUrl: row.presentation_image_url_snapshot,
+		presentationSiteName: row.presentation_site_name_snapshot,
+		presentationProvider: row.presentation_provider_snapshot,
+		presentationProviderId: row.presentation_provider_id_snapshot,
 		ownNotes: row.own_notes
 	};
 }
@@ -384,7 +479,12 @@ export function getShow(id: string): Show | null {
 		.prepare(
 			`SELECT u.id, u.show_section_id, u.original_piece_id, u.position, u.status,
 			 u.duration_seconds, u.title_snapshot, u.intro_snapshot, u.research_snapshot,
-			 u.moderation_snapshot, u.transition_snapshot, u.presentation_snapshot, u.own_notes
+			 u.moderation_snapshot, u.transition_snapshot, u.presentation_snapshot,
+			 u.presentation_mode_snapshot, u.presentation_source_label_snapshot,
+			 u.presentation_source_url_snapshot, u.presentation_source_timecode_snapshot,
+			 u.presentation_title_meta_snapshot, u.presentation_description_snapshot,
+			 u.presentation_image_url_snapshot, u.presentation_site_name_snapshot,
+			 u.presentation_provider_snapshot, u.presentation_provider_id_snapshot, u.own_notes
 			 FROM piece_usages u JOIN show_sections s ON s.id = u.show_section_id
 			 WHERE s.show_id = ? ORDER BY s.position, u.position`
 		)
@@ -430,6 +530,80 @@ export function getShow(id: string): Show | null {
 	};
 }
 
+export function getPieceUsageContexts(
+	pieceIds: string[],
+	currentShowId?: string
+): Record<string, PieceUsageContext> {
+	const uniquePieceIds = [...new Set(pieceIds.filter(Boolean))];
+	const contexts = Object.fromEntries(
+		uniquePieceIds.map((pieceId) => [
+			pieceId,
+			{
+				sentHistory: [],
+				isPlannedInActiveShow: false,
+				isPlannedInCurrentShow: false
+			} satisfies PieceUsageContext
+		])
+	) as Record<string, PieceUsageContext>;
+	if (!uniquePieceIds.length) return contexts;
+
+	const database = getDatabase();
+	const history = database
+		.prepare(
+			`SELECT u.id AS usage_id, u.original_piece_id, sh.id AS show_id,
+			 sh.title AS show_title, COALESCE(sh.starts_at_utc, sh.updated_at_utc) AS used_at_utc
+			 FROM piece_usages u
+			 JOIN show_sections s ON s.id = u.show_section_id
+			 JOIN shows sh ON sh.id = s.show_id
+			 WHERE u.original_piece_id IS NOT NULL AND u.status = 'done'
+			 AND sh.status = 'completed' AND s.is_reserve_bank = 0
+			 ORDER BY used_at_utc DESC, u.id DESC`
+		)
+		.all() as {
+		usage_id: string;
+		original_piece_id: string;
+		show_id: string;
+		show_title: string;
+		used_at_utc: string;
+	}[];
+	for (const usage of history) {
+		contexts[usage.original_piece_id]?.sentHistory.push({
+			usageId: usage.usage_id,
+			showId: usage.show_id,
+			showTitle: usage.show_title,
+			usedAtUtc: usage.used_at_utc
+		});
+	}
+	const plannedInActiveShows = database
+		.prepare(
+			`SELECT DISTINCT u.original_piece_id FROM piece_usages u
+			 JOIN show_sections s ON s.id = u.show_section_id
+			 JOIN shows sh ON sh.id = s.show_id
+			 WHERE sh.status != 'completed' AND u.original_piece_id IS NOT NULL`
+		)
+		.all() as { original_piece_id: string }[];
+	for (const usage of plannedInActiveShows) {
+		const context = contexts[usage.original_piece_id];
+		if (context) context.isPlannedInActiveShow = true;
+	}
+
+	if (currentShowId) {
+		const planned = database
+			.prepare(
+				`SELECT DISTINCT u.original_piece_id FROM piece_usages u
+				 JOIN show_sections s ON s.id = u.show_section_id
+				 WHERE s.show_id = ? AND u.original_piece_id IS NOT NULL`
+			)
+			.all(currentShowId) as { original_piece_id: string }[];
+		for (const usage of planned) {
+			const context = contexts[usage.original_piece_id];
+			if (context) context.isPlannedInCurrentShow = true;
+		}
+	}
+
+	return contexts;
+}
+
 export function createShow(input: CreateShowInput): CreatedMutationResult {
 	const database = getDatabase();
 	const id = randomUUID();
@@ -631,8 +805,15 @@ export function addPieceUsage(
 		sectionBelongsToShow(database, showId, sectionId, input.sectionId === null);
 		const piece = database
 			.prepare(
-				`SELECT title, duration_seconds, intro, research_text, moderation_notes,
+				`SELECT p.title, p.duration_seconds, p.intro, p.research_text, p.moderation_notes,
-				 transition_text, presentation_text, status FROM pieces WHERE id = ?`
+				 p.transition_text, p.presentation_text, p.status, p.presentation_mode,
+				 COALESCE(ps.label, '') AS presentation_source_label,
+				 COALESCE(ps.url, '') AS presentation_source_url,
+				 ps.timecode_seconds AS presentation_source_timecode,
+				 p.presentation_title, p.presentation_description, p.presentation_image_url,
+				 p.presentation_site_name, p.presentation_provider, p.presentation_provider_id
+				 FROM pieces p LEFT JOIN piece_sources ps ON ps.piece_id = p.id
+				 AND ps.position = p.presentation_source_position WHERE p.id = ?`
 			)
 			.get(input.pieceId) as
 			| {
@@ -643,6 +824,16 @@ export function addPieceUsage(
 					moderation_notes: string;
 					transition_text: string;
 					presentation_text: string;
+					presentation_mode: PresentationMode;
+					presentation_source_label: string;
+					presentation_source_url: string;
+					presentation_source_timecode: number | null;
+					presentation_title: string;
+					presentation_description: string;
+					presentation_image_url: string;
+					presentation_site_name: string;
+					presentation_provider: string;
+					presentation_provider_id: string;
 					status: string;
 			  }
 			| undefined;
@@ -659,8 +850,13 @@ export function addPieceUsage(
 			.prepare(
 				`INSERT INTO piece_usages (id, show_section_id, original_piece_id, position, status,
 				 duration_seconds, title_snapshot, intro_snapshot, research_snapshot,
-				 moderation_snapshot, transition_snapshot, presentation_snapshot, own_notes, is_reserve)
+				 moderation_snapshot, transition_snapshot, presentation_snapshot,
-				 VALUES (?, ?, ?, ?, 'open', ?, ?, ?, ?, ?, ?, ?, '', ?)`
+				 presentation_mode_snapshot, presentation_source_label_snapshot,
+				 presentation_source_url_snapshot, presentation_source_timecode_snapshot,
+				 presentation_title_meta_snapshot, presentation_description_snapshot,
+				 presentation_image_url_snapshot, presentation_site_name_snapshot,
+				 presentation_provider_snapshot, presentation_provider_id_snapshot, own_notes, is_reserve)
+				 VALUES (?, ?, ?, ?, 'open', ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, '', ?)`
 			)
 			.run(
 				id,
@@ -674,6 +870,16 @@ export function addPieceUsage(
 				piece.moderation_notes,
 				piece.transition_text,
 				piece.presentation_text,
+				piece.presentation_mode,
+				piece.presentation_source_label,
+				piece.presentation_source_url,
+				piece.presentation_source_timecode,
+				piece.presentation_title,
+				piece.presentation_description,
+				piece.presentation_image_url,
+				piece.presentation_site_name,
+				piece.presentation_provider,
+				piece.presentation_provider_id,
 				input.sectionId === null ? 1 : 0
 			);
 		ids.splice(position, 0, id);
@@ -682,6 +888,160 @@ export function addPieceUsage(
 	})();
 }
 
+export function duplicatePieceUsage(
+	showId: string,
+	usageId: string,
+	expectedRevision: number
+): CreatedMutationResult {
+	const database = getDatabase();
+	return database.transaction(() => {
+		const result = bumpShow(database, showId, expectedRevision);
+		const sourceSection = usageSection(database, showId, usageId);
+		const source = database
+			.prepare(
+				`SELECT original_piece_id, status, duration_seconds, title_snapshot, intro_snapshot,
+				 research_snapshot, moderation_snapshot, transition_snapshot, presentation_snapshot,
+				 presentation_mode_snapshot, presentation_source_label_snapshot,
+				 presentation_source_url_snapshot, presentation_source_timecode_snapshot,
+				 presentation_title_meta_snapshot, presentation_description_snapshot,
+				 presentation_image_url_snapshot, presentation_site_name_snapshot,
+				 presentation_provider_snapshot, presentation_provider_id_snapshot,
+				 own_notes, is_reserve FROM piece_usages WHERE id = ?`
+			)
+			.get(usageId) as Omit<UsageRow, 'id' | 'show_section_id' | 'position'> & {
+			is_reserve: number;
+		};
+		const ids = (
+			database
+				.prepare('SELECT id FROM piece_usages WHERE show_section_id = ? ORDER BY position')
+				.all(sourceSection.sectionId) as { id: string }[]
+		).map((row) => row.id);
+		const sourcePosition = ids.indexOf(usageId);
+		if (sourcePosition < 0) throw new Error('NOT_FOUND');
+		const id = randomUUID();
+		database
+			.prepare(
+				`INSERT INTO piece_usages (id, show_section_id, original_piece_id, position, status,
+				 duration_seconds, title_snapshot, intro_snapshot, research_snapshot,
+				 moderation_snapshot, transition_snapshot, presentation_snapshot,
+				 presentation_mode_snapshot, presentation_source_label_snapshot,
+				 presentation_source_url_snapshot, presentation_source_timecode_snapshot,
+				 presentation_title_meta_snapshot, presentation_description_snapshot,
+				 presentation_image_url_snapshot, presentation_site_name_snapshot,
+				 presentation_provider_snapshot, presentation_provider_id_snapshot, own_notes, is_reserve)
+				 VALUES (?, ?, ?, ?, 'open', ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`
+			)
+			.run(
+				id,
+				sourceSection.sectionId,
+				source.original_piece_id,
+				ids.length,
+				source.duration_seconds,
+				source.title_snapshot,
+				source.intro_snapshot,
+				source.research_snapshot,
+				source.moderation_snapshot,
+				source.transition_snapshot,
+				source.presentation_snapshot,
+				source.presentation_mode_snapshot,
+				source.presentation_source_label_snapshot,
+				source.presentation_source_url_snapshot,
+				source.presentation_source_timecode_snapshot,
+				source.presentation_title_meta_snapshot,
+				source.presentation_description_snapshot,
+				source.presentation_image_url_snapshot,
+				source.presentation_site_name_snapshot,
+				source.presentation_provider_snapshot,
+				source.presentation_provider_id_snapshot,
+				source.own_notes,
+				source.is_reserve
+			);
+		ids.splice(sourcePosition + 1, 0, id);
+		normalizePositions(database, 'piece_usages', ids);
+		return { ...result, id };
+	})();
+}
+
+export function refreshPieceUsageFromOriginal(
+	showId: string,
+	usageId: string,
+	expectedRevision: number
+): MutationResult {
+	const database = getDatabase();
+	return database.transaction(() => {
+		const result = bumpShow(database, showId, expectedRevision);
+		usageSection(database, showId, usageId);
+		const source = database
+			.prepare(
+				`SELECT p.title, p.duration_seconds, p.intro, p.research_text,
+				 p.moderation_notes, p.transition_text, p.presentation_text, p.presentation_mode,
+				 COALESCE(ps.label, '') AS presentation_source_label,
+				 COALESCE(ps.url, '') AS presentation_source_url,
+				 ps.timecode_seconds AS presentation_source_timecode,
+				 p.presentation_title, p.presentation_description, p.presentation_image_url,
+				 p.presentation_site_name, p.presentation_provider, p.presentation_provider_id
+				 FROM piece_usages u JOIN pieces p ON p.id = u.original_piece_id
+				 LEFT JOIN piece_sources ps ON ps.piece_id = p.id
+				 AND ps.position = p.presentation_source_position
+				 WHERE u.id = ?`
+			)
+			.get(usageId) as
+			| {
+					title: string;
+					duration_seconds: number;
+					intro: string;
+					research_text: string;
+					moderation_notes: string;
+					transition_text: string;
+					presentation_text: string;
+					presentation_mode: PresentationMode;
+					presentation_source_label: string;
+					presentation_source_url: string;
+					presentation_source_timecode: number | null;
+					presentation_title: string;
+					presentation_description: string;
+					presentation_image_url: string;
+					presentation_site_name: string;
+					presentation_provider: string;
+					presentation_provider_id: string;
+			  }
+			| undefined;
+		if (!source) throw new Error('ORIGINAL_NOT_FOUND');
+		database
+			.prepare(
+				`UPDATE piece_usages SET title_snapshot = ?, duration_seconds = ?, intro_snapshot = ?,
+				 research_snapshot = ?, moderation_snapshot = ?, transition_snapshot = ?,
+				 presentation_snapshot = ?, presentation_mode_snapshot = ?,
+				 presentation_source_label_snapshot = ?, presentation_source_url_snapshot = ?,
+				 presentation_source_timecode_snapshot = ?, presentation_title_meta_snapshot = ?,
+				 presentation_description_snapshot = ?, presentation_image_url_snapshot = ?,
+				 presentation_site_name_snapshot = ?, presentation_provider_snapshot = ?,
+				 presentation_provider_id_snapshot = ? WHERE id = ?`
+			)
+			.run(
+				source.title,
+				source.duration_seconds,
+				source.intro,
+				source.research_text,
+				source.moderation_notes,
+				source.transition_text,
+				source.presentation_text,
+				source.presentation_mode,
+				source.presentation_source_label,
+				source.presentation_source_url,
+				source.presentation_source_timecode,
+				source.presentation_title,
+				source.presentation_description,
+				source.presentation_image_url,
+				source.presentation_site_name,
+				source.presentation_provider,
+				source.presentation_provider_id,
+				usageId
+			);
+		return result;
+	})();
+}
+
 export function updatePieceUsage(
 	showId: string,
 	usageId: string,
@@ -690,7 +1050,6 @@ export function updatePieceUsage(
 ): MutationResult {
 	const title = cleanText(input.title, 200, 'title', true);
 	const duration = validDuration(input.durationSeconds)!;
-	if (!USAGE_STATUSES.includes(input.status)) throw new Error('INVALID_STATUS');
 	const values = {
 		intro: cleanText(input.intro, 50_000, 'intro'),
 		research: cleanText(input.research, 50_000, 'research'),
@@ -699,6 +1058,16 @@ export function updatePieceUsage(
 		presentation: cleanText(input.presentation, 50_000, 'presentation'),
 		ownNotes: cleanText(input.ownNotes, 50_000, 'notes')
 	};
+	const presentation = validPresentation(
+		input.presentationMode,
+		input.presentationSourceLabel,
+		input.presentationSourceUrl,
+		input.presentationSourceTimecodeSeconds,
+		input.presentationTitle,
+		input.presentationDescription,
+		input.presentationImageUrl,
+		input.presentationSiteName
+	);
 	const database = getDatabase();
 	return database.transaction(() => {
 		const result = bumpShow(database, showId, expectedRevision);
@@ -707,7 +1076,12 @@ export function updatePieceUsage(
 			.prepare(
 				`UPDATE piece_usages SET title_snapshot = ?, intro_snapshot = ?, research_snapshot = ?,
 				 moderation_snapshot = ?, transition_snapshot = ?, presentation_snapshot = ?,
-				 own_notes = ?, duration_seconds = ?, status = ? WHERE id = ?`
+				 presentation_mode_snapshot = ?, presentation_source_label_snapshot = ?,
+				 presentation_source_url_snapshot = ?, presentation_source_timecode_snapshot = ?,
+				 presentation_title_meta_snapshot = ?, presentation_description_snapshot = ?,
+				 presentation_image_url_snapshot = ?, presentation_site_name_snapshot = ?,
+				 presentation_provider_snapshot = ?, presentation_provider_id_snapshot = ?,
+				 own_notes = ?, duration_seconds = ? WHERE id = ?`
 			)
 			.run(
 				title,
@@ -716,9 +1090,18 @@ export function updatePieceUsage(
 				values.moderation,
 				values.transition,
 				values.presentation,
+				presentation.mode,
+				presentation.sourceLabel,
+				presentation.sourceUrl,
+				presentation.timecodeSeconds,
+				presentation.title,
+				presentation.description,
+				presentation.imageUrl,
+				presentation.siteName,
+				presentation.provider,
+				presentation.providerId,
 				values.ownNotes,
 				duration,
-				input.status,
 				usageId
 			);
 		return result;

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

@@ -1,4 +1,4 @@
-import { fail, redirect } from '@sveltejs/kit';
+import { fail } from '@sveltejs/kit';
 import type { Actions, PageServerLoad } from './$types';
 import { requireUser } from '#lib/server/auth.js';
 import { captureInbox, listPieces } from '#lib/server/content.js';
@@ -14,7 +14,7 @@ export const actions = {
 		const data = await request.formData();
 		try {
 			const id = captureInbox(String(data.get('title') || ''), String(data.get('url') || ''));
-			redirect(303, `/fundus/${id}`);
+			return { captured: true, capturedId: id };
 		} catch (cause) {
 			const code = cause instanceof Error ? cause.message : '';
 			return fail(400, {

src/routes/eingang/+page.svelte

@@ -17,11 +17,14 @@
 			<h2>Was soll nicht verloren gehen?</h2>
 		</div>
 		{#if form?.error}<div class="form-message error" role="alert">{form.error}</div>{/if}
+		{#if form?.captured}<div class="form-message success" role="status">
+				Im Eingang gespeichert.
+				<a href={resolve('/fundus/[id]', { id: form.capturedId })}>Jetzt ausarbeiten</a>
+			</div>{/if}
 		<form method="POST" action="?/capture" class="capture-form">
 			<label
-				>Titel oder Gedanke<input
+				>Gedanke <span>optional bei URL</span><input
 					name="title"
-					required
 					maxlength="200"
 					value={form?.title ?? ''}
 					placeholder="Kurze Idee festhalten"
@@ -36,7 +39,7 @@
 					placeholder="https://…"
 				/></label
 			>
-			<button class="primary-button" type="submit">Aufnehmen und öffnen</button>
+			<button class="primary-button" type="submit">Im Eingang ablegen</button>
 		</form>
 	</section>
 	{#if data.pieces.length}

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

@@ -10,6 +10,7 @@ import {
 	setPieceArchived,
 	type PieceTemplateId
 } from '#lib/server/content.js';
+import { getPieceUsageContexts } from '#lib/server/shows.js';
 
 export const load: PageServerLoad = ({ locals, url }) => {
 	requireUser(locals.user);
@@ -18,21 +19,25 @@ export const load: PageServerLoad = ({ locals, url }) => {
 		formatId: url.searchParams.get('format') ?? '',
 		topicId: url.searchParams.get('topic') ?? '',
 		categoryId: url.searchParams.get('category') ?? '',
-		status: url.searchParams.get('status') ?? ''
+		status: url.searchParams.get('status') ?? '',
+		includeUsed: url.searchParams.get('includeUsed') === '1',
+		includePlanned: url.searchParams.get('includePlanned') === '1'
 	};
+	const pieces = listPieces({
+		statuses:
+			filters.status === 'ready'
+				? ['ready']
+				: filters.status === 'preparing'
+					? ['preparing']
+					: ['preparing', 'ready'],
+		query: filters.query,
+		formatId: filters.formatId,
+		topicId: filters.topicId,
+		categoryId: filters.categoryId
+	});
+	const usageContexts = getPieceUsageContexts(pieces.map((piece) => piece.id));
 	return {
-		pieces: listPieces({
+		pieces: pieces.map((piece) => ({ ...piece, ...usageContexts[piece.id] })),
-			statuses:
-				filters.status === 'ready'
-					? ['ready']
-					: filters.status === 'preparing'
-						? ['preparing']
-						: ['preparing', 'ready'],
-			query: filters.query,
-			formatId: filters.formatId,
-			topicId: filters.topicId,
-			categoryId: filters.categoryId
-		}),
 		taxonomy: getTaxonomy(),
 		templates: pieceTemplates,
 		filters

src/routes/fundus/+page.svelte

@@ -1,9 +1,48 @@
 <script lang="ts">
+	import { goto, replaceState } from '$app/navigation';
 	import { resolve } from '$app/paths';
+	import { page } from '$app/state';
+	import { onMount, untrack } from 'svelte';
+	import PieceUsageHistory from '#lib/components/PieceUsageHistory.svelte';
 	import { formatClock } from '#lib/format.js';
 	import type { PageProps } from './$types';
 
 	let { data, form }: PageProps = $props();
+	let showUsedPieces = $state(untrack(() => data.filters.includeUsed));
+	let showPlannedPieces = $state(untrack(() => data.filters.includePlanned));
+	let visiblePieces = $derived(
+		data.pieces.filter(
+			(piece) =>
+				(showUsedPieces || piece.sentHistory.length === 0) &&
+				(showPlannedPieces || !piece.isPlannedInActiveShow)
+		)
+	);
+	onMount(() => {
+		const syncFiltersFromHistory = () => {
+			const search = new URL(window.location.href).searchParams;
+			showUsedPieces = search.get('includeUsed') === '1';
+			showPlannedPieces = search.get('includePlanned') === '1';
+		};
+		window.addEventListener('popstate', syncFiltersFromHistory);
+		return () => window.removeEventListener('popstate', syncFiltersFromHistory);
+	});
+
+	function setSourceFilter(name: 'includeUsed' | 'includePlanned', checked: boolean) {
+		if (name === 'includeUsed') showUsedPieces = checked;
+		else showPlannedPieces = checked;
+		const url = new URL(page.url.href);
+		if (checked) url.searchParams.set(name, '1');
+		else url.searchParams.delete(name);
+		// This URL is cloned from the current page; only same-route filter parameters change.
+		// eslint-disable-next-line svelte/no-navigation-without-resolve
+		replaceState(url, page.state);
+	}
+
+	async function resetFilters() {
+		await goto(resolve('/fundus'), { invalidateAll: true });
+		showUsedPieces = false;
+		showPlannedPieces = false;
+	}
 	const statusLabel = {
 		ready: 'Sendefertig',
 		preparing: 'In Vorbereitung',
@@ -20,76 +59,116 @@
 			<h1>Fundus</h1>
 			<p class="page-intro">Vorbereitete Inhalte für kommende Sendungen.</p>
 		</div>
-		<div class="heading-stat" aria-label={`${data.pieces.length} gefundene Inhalte`}>
+		<div class="fundus-heading-actions">
-			<strong>{data.pieces.length}</strong><span>Inhalte</span>
+			<div class="heading-stat" aria-label={`${visiblePieces.length} gefundene Inhalte`}>
+				<strong>{visiblePieces.length}</strong><span>Inhalte</span>
+			</div>
+			<details class="template-picker">
+				<summary><span aria-hidden="true">＋</span> Neues Piece</summary>
+				<div class="template-grid">
+					{#each data.templates as template (template.id)}
+						<form method="POST" action="?/create">
+							<input type="hidden" name="template" value={template.id} />
+							<button type="submit"
+								><strong>{template.name}</strong><span>{template.description}</span></button
+							>
+						</form>
+					{/each}
+				</div>
+			</details>
 		</div>
 	</header>
 	{#if form?.error}<div class="form-message error" role="alert">{form.error}</div>{/if}
 	{#if form?.success}<div class="form-message success" role="status">{form.success}</div>{/if}
 
-	<details class="template-picker">
+	<form
-		<summary>Neues Piece anlegen</summary>
+		id="library-filters"
-		<div class="template-grid">
+		class="library-filters"
-			{#each data.templates as template (template.id)}
+		method="GET"
-				<form method="POST" action="?/create">
+		aria-label="Fundus durchsuchen und filtern"
-					<input type="hidden" name="template" value={template.id} />
+	>
-					<button type="submit"
+		<div class="fundus-search-row">
-						><strong>{template.name}</strong><span>{template.description}</span></button
+			<label class="search-field"
+				><span aria-hidden="true">⌕</span><span class="sr-only">Fundus durchsuchen</span><input
+					name="q"
+					type="search"
+					value={data.filters.query}
+					placeholder="Titel, Quelle oder Thema suchen"
+				/></label
+			>
+			<button class="secondary-button" type="submit">Suchen</button>
+			<details class="filter-picker">
+				<summary><span aria-hidden="true">≡</span> Weitere Filter</summary>
+				<div class="filter-panel">
+					<label
+						><span>Status</span><select name="status"
+							><option value="">Alle</option><option
+								value="ready"
+								selected={data.filters.status === 'ready'}>Sendefertig</option
+							><option value="preparing" selected={data.filters.status === 'preparing'}
+								>In Arbeit</option
+							></select
+						></label
 					>
-				</form>
+					<label
-			{/each}
+						><span>Format</span><select name="format"
+							><option value="">Alle</option>{#each data.taxonomy.formats as item (item.id)}<option
+									value={item.id}
+									selected={data.filters.formatId === item.id}>{item.name}</option
+								>{/each}</select
+						></label
+					>
+					<label
+						><span>Thema</span><select name="topic"
+							><option value="">Alle</option>{#each data.taxonomy.topics as item (item.id)}<option
+									value={item.id}
+									selected={data.filters.topicId === item.id}>{item.name}</option
+								>{/each}</select
+						></label
+					>
+					<label
+						><span>Abschnitt</span><select name="category"
+							><option value="">Alle</option
+							>{#each data.taxonomy.categories as item (item.id)}<option
+									value={item.id}
+									selected={data.filters.categoryId === item.id}>{item.name}</option
+								>{/each}</select
+						></label
+					>
+					<div class="library-filter-options" aria-label="Fundusauswahl erweitern">
+						<label class="filter-checkbox">
+							<input
+								type="checkbox"
+								name="includeUsed"
+								value="1"
+								checked={showUsedPieces}
+								onchange={(event) => setSourceFilter('includeUsed', event.currentTarget.checked)}
+							/>
+							<span>Auch verwendete Inhalte zeigen</span>
+						</label>
+						<label class="filter-checkbox">
+							<input
+								type="checkbox"
+								name="includePlanned"
+								value="1"
+								checked={showPlannedPieces}
+								onchange={(event) => setSourceFilter('includePlanned', event.currentTarget.checked)}
+							/>
+							<span>Auch eingeplante Inhalte zeigen</span>
+						</label>
+					</div>
+					<div class="filter-actions">
+						<button class="secondary-button" type="submit">Filter anwenden</button>
+						<button class="text-button" type="button" onclick={resetFilters}>Zurücksetzen</button>
+					</div>
+				</div>
+			</details>
 		</div>
-	</details>
-
-	<form class="library-filters" method="GET" aria-label="Fundus durchsuchen und filtern">
-		<label class="search-field"
-			><span aria-hidden="true">⌕</span><span class="sr-only">Fundus durchsuchen</span><input
-				name="q"
-				type="search"
-				value={data.filters.query}
-				placeholder="Titel, Quelle oder Thema suchen"
-			/></label
-		>
-		<label
-			><span>Status</span><select name="status"
-				><option value="">Alle</option><option
-					value="ready"
-					selected={data.filters.status === 'ready'}>Sendefertig</option
-				><option value="preparing" selected={data.filters.status === 'preparing'}>In Arbeit</option
-				></select
-			></label
-		>
-		<label
-			><span>Format</span><select name="format"
-				><option value="">Alle</option>{#each data.taxonomy.formats as item (item.id)}<option
-						value={item.id}
-						selected={data.filters.formatId === item.id}>{item.name}</option
-					>{/each}</select
-			></label
-		>
-		<label
-			><span>Thema</span><select name="topic"
-				><option value="">Alle</option>{#each data.taxonomy.topics as item (item.id)}<option
-						value={item.id}
-						selected={data.filters.topicId === item.id}>{item.name}</option
-					>{/each}</select
-			></label
-		>
-		<label
-			><span>Abschnitt</span><select name="category"
-				><option value="">Alle</option>{#each data.taxonomy.categories as item (item.id)}<option
-						value={item.id}
-						selected={data.filters.categoryId === item.id}>{item.name}</option
-					>{/each}</select
-			></label
-		>
-		<button class="secondary-button" type="submit">Anwenden</button>
-		<a class="text-link" href={resolve('/fundus')}>Zurücksetzen</a>
 	</form>
 
-	{#if data.pieces.length}
+	{#if visiblePieces.length}
 		<div class="piece-grid">
-			{#each data.pieces as piece (piece.id)}
+			{#each visiblePieces as piece (piece.id)}
 				<article
 					class="piece-card"
 					style={`--category: ${piece.categories[0]?.color ?? '#8b8f98'}`}
@@ -98,12 +177,16 @@
 							class="piece-thumbnail"
 							src={`/media/${piece.mediaId}`}
 							alt=""
-						/>{:else}<span class="piece-thumbnail piece-thumbnail-placeholder" aria-hidden="true"
+						/>{:else}<span class="piece-thumbnail piece-thumbnail-placeholder" aria-hidden="true">
-							>S</span
+							<svg viewBox="0 0 24 24" fill="none">
-						>{/if}
+								<path d="M4.5 6.5h15v11h-15zM7.5 14l3-3 2.2 2.2 1.8-1.7 2.5 2.5" />
+								<circle cx="15.8" cy="9.2" r="1.2" />
+							</svg>
+						</span>{/if}
 					<div class="piece-primary">
 						<h2><a href={resolve('/fundus/[id]', { id: piece.id })}>{piece.title}</a></h2>
 						<p>{piece.summary || 'Noch keine Kurzbeschreibung.'}</p>
+						<PieceUsageHistory history={piece.sentHistory} />
 					</div>
 					<div class="piece-classification">
 						<span class="category-label"
@@ -124,22 +207,26 @@
 							></span
 						>
 					</div>
-					<div class="piece-actions">
+					<details class="piece-actions">
-						<a class="text-link" href={resolve('/fundus/[id]', { id: piece.id })}>Bearbeiten</a>
+						<summary aria-label={`Aktionen für ${piece.title}`}
-						<form method="POST" action="?/duplicate">
+							><span aria-hidden="true">•••</span></summary
-							<input type="hidden" name="pieceId" value={piece.id} /><button
+						>
-								class="text-button"
+						<div class="piece-actions-popover">
-								type="submit">Duplizieren</button
+							<form method="POST" action="?/duplicate">
-							>
+								<input type="hidden" name="pieceId" value={piece.id} /><button
-						</form>
+									class="text-button"
-						<form method="POST" action="?/archive">
+									type="submit">Duplizieren</button
-							<input type="hidden" name="pieceId" value={piece.id} /><input
+								>
-								type="hidden"
+							</form>
-								name="revision"
+							<form method="POST" action="?/archive">
-								value={piece.revision}
+								<input type="hidden" name="pieceId" value={piece.id} /><input
-							/><button class="text-button danger-text" type="submit">Archivieren</button>
+									type="hidden"
-						</form>
+									name="revision"
-					</div>
+									value={piece.revision}
+								/><button class="text-button danger-text" type="submit">Archivieren</button>
+							</form>
+						</div>
+					</details>
 				</article>
 			{/each}
 		</div>

src/routes/fundus/[id]/+page.server.ts

@@ -6,6 +6,7 @@ import {
 	duplicatePiece,
 	getPiece,
 	getTaxonomy,
+	loadPiecePresentationMetadata,
 	savePiece,
 	setPieceArchived,
 	uploadPieceImage,
@@ -65,6 +66,20 @@ function pieceInput(data: FormData): PieceInput {
 		moderationNotes: text(data, 'moderationNotes'),
 		transitionText: text(data, 'transitionText'),
 		presentationText: text(data, 'presentationText'),
+		presentationMode: text(data, 'presentationMode') as PieceInput['presentationMode'],
+		presentationSourcePosition: text(data, 'presentationSourcePosition')
+			? Number(data.get('presentationSourcePosition'))
+			: null,
+		presentationTitle: text(data, 'presentationTitle'),
+		presentationDescription: text(data, 'presentationDescription'),
+		presentationImageUrl: text(data, 'presentationImageUrl'),
+		presentationSiteName: text(data, 'presentationSiteName'),
+		presentationProvider: text(data, 'presentationProvider'),
+		presentationProviderId: text(data, 'presentationProviderId'),
+		presentationTitleManual: text(data, 'presentationTitleManual') === '1',
+		presentationDescriptionManual: text(data, 'presentationDescriptionManual') === '1',
+		presentationImageManual: text(data, 'presentationImageManual') === '1',
+		presentationMetadataFetchedAtUtc: text(data, 'presentationMetadataFetchedAtUtc') || null,
 		topicIds: data.getAll('topicIds').map(String),
 		categoryIds: data.getAll('categoryIds').map(String),
 		sources
@@ -87,6 +102,11 @@ function saveError(cause: unknown) {
 			status: 400,
 			error: 'Quellen benötigen einen Namen und eine vollständige HTTP- oder HTTPS-Adresse.'
 		};
+	if (code === 'INVALID_PRESENTATION')
+		return {
+			status: 400,
+			error: 'Für Linkvorschau und Video muss eine vorhandene gültige Quelle ausgewählt sein.'
+		};
 	if (code.startsWith('INVALID_'))
 		return { status: 400, error: 'Mindestens ein Feld ist ungültig oder zu lang.' };
 	return {
@@ -116,6 +136,31 @@ export const actions = {
 			return fail(problem.status, { intent: 'save', ...problem });
 		}
 	},
+	loadPreview: async ({ locals, params, request }) => {
+		requireUser(locals.user);
+		const data = await request.formData();
+		try {
+			await loadPiecePresentationMetadata(params.id, Number(data.get('revision')));
+		} catch (cause) {
+			const code = cause instanceof Error ? cause.message : '';
+			if (code === 'FETCH_BLOCKED') {
+				return fail(400, {
+					intent: 'loadPreview',
+					error: 'Interne oder private Netzwerkziele dürfen nicht abgerufen werden.'
+				});
+			}
+			if (code.startsWith('FETCH_')) {
+				return fail(400, {
+					intent: 'loadPreview',
+					error:
+						'Die Vorschau konnte nicht sicher geladen werden. Die manuellen Angaben bleiben erhalten.'
+				});
+			}
+			const problem = saveError(cause);
+			return fail(problem.status, { intent: 'loadPreview', ...problem });
+		}
+		redirect(303, `/fundus/${params.id}`);
+	},
 	upload: async ({ locals, params, request }) => {
 		requireUser(locals.user);
 		const data = await request.formData();

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

@@ -2,8 +2,11 @@
 	import { enhance, type SubmitFunction } from '$app/forms';
 	import { beforeNavigate, goto } from '$app/navigation';
 	import { resolve } from '$app/paths';
-	import { onDestroy, untrack } from 'svelte';
+	import { onDestroy, onMount, untrack } from 'svelte';
-	import MarkdownPreview from '#lib/components/MarkdownPreview.svelte';
+	import MarkdownEditorField from '#lib/components/MarkdownEditorField.svelte';
+	import PieceEditorDialog from '#lib/components/PieceEditorDialog.svelte';
+	import PresentationDisplay from '#lib/components/PresentationDisplay.svelte';
+	import type { PresentationContent } from '#lib/server/presentation.js';
 	import type { PageProps } from './$types';
 
 	let { data, form }: PageProps = $props();
@@ -12,9 +15,13 @@
 	let revision = $state(untrack(() => data.piece.revision));
 	let sources = $state(untrack(() => data.piece.sources.map((source) => ({ ...source }))));
 	let rendered = $state(untrack(() => ({ ...data.rendered })));
+	let activeSection = $state<'script' | 'research' | 'presentation'>('script');
 	let saveState = $state<'idle' | 'dirty' | 'saving' | 'saved' | 'error' | 'conflict'>('idle');
 	let saveMessage = $state('Alle Änderungen gespeichert');
+	let sourceImageUnavailable = $state(false);
+	let editorDialog: { showModal: () => void; close: () => void };
 	let editorForm: HTMLFormElement;
+	let previewForm: HTMLFormElement;
 	let saveButton: HTMLButtonElement;
 	let timer: ReturnType<typeof setTimeout> | undefined;
 	let generation = 0;
@@ -25,9 +32,50 @@
 			saveState === 'error' ||
 			saveState === 'conflict'
 	);
+	let featuredSource = $derived(
+		draft.presentationSourcePosition === null
+			? (sources[0] ?? null)
+			: (sources[draft.presentationSourcePosition] ?? sources[0] ?? null)
+	);
+	let sourcePreviewImage = $derived(
+		draft.presentationImageUrl
+			? resolve('/fundus/[id]/praesentation/preview-image', { id: data.piece.id })
+			: ''
+	);
+	let previewContent = $derived<PresentationContent>({
+		mode: draft.presentationMode,
+		title: draft.title,
+		html: rendered.presentation,
+		source: featuredSource
+			? {
+					label: featuredSource.label || featuredSource.url,
+					url: featuredSource.url,
+					timecodeSeconds: featuredSource.timecodeSeconds
+				}
+			: null,
+		previewTitle: draft.presentationTitle,
+		description: draft.presentationDescription,
+		imageUrl: draft.presentationImageUrl,
+		siteName: draft.presentationSiteName,
+		provider: draft.presentationProvider as PresentationContent['provider'],
+		providerId: draft.presentationProviderId,
+		embedUrl:
+			draft.presentationProvider === 'youtube' && draft.presentationProviderId
+				? `https://www.youtube-nocookie.com/embed/${draft.presentationProviderId}${featuredSource?.timecodeSeconds ? `?start=${featuredSource.timecodeSeconds}` : ''}`
+				: draft.presentationProvider === 'tiktok' && draft.presentationProviderId
+					? `https://www.tiktok.com/player/v1/${draft.presentationProviderId}`
+					: ''
+	});
 	let pendingHref: string | null = null;
 	let allowNavigation = false;
 
+	const statusLabels = {
+		inbox: 'Eingang',
+		preparing: 'In Vorbereitung',
+		ready: 'Sendefertig'
+	};
+
+	onMount(() => editorDialog.showModal());
 	onDestroy(() => clearTimeout(timer));
 	beforeNavigate((navigation) => {
 		if (allowNavigation) return;
@@ -42,7 +90,17 @@
 		if (!saving) submitSave();
 	});
 
-	function scheduleSave() {
+	function scheduleSave(event?: Event) {
+		const control = event?.target;
+		if (event?.type === 'change' && !(control instanceof HTMLSelectElement)) return;
+		if (
+			control instanceof HTMLInputElement &&
+			control.name === 'presentationMode' &&
+			control.value !== 'text' &&
+			draft.presentationSourcePosition === null
+		) {
+			return;
+		}
 		generation += 1;
 		saveState = 'dirty';
 		saveMessage = 'Ungespeicherte Änderungen';
@@ -55,6 +113,23 @@
 		editorForm.requestSubmit(saveButton);
 	}
 
+	function requestClose() {
+		const target = resolve('/fundus');
+		if (saveState === 'error' || saveState === 'conflict') {
+			if (!confirm('Ungespeicherte Änderungen verwerfen und Editor schließen?')) return;
+			allowNavigation = true;
+			void goto(target);
+			return;
+		}
+		if (saveState === 'dirty' || saveState === 'saving') {
+			pendingHref = new URL(target, window.location.href).href;
+			if (!saving) submitSave();
+			return;
+		}
+		allowNavigation = true;
+		void goto(target);
+	}
+
 	function addSource() {
 		sources.push({ label: '', url: '', timecodeSeconds: null });
 		scheduleSave();
@@ -62,9 +137,26 @@
 
 	function removeSource(index: number) {
 		sources.splice(index, 1);
+		if (draft.presentationSourcePosition === index) draft.presentationSourcePosition = null;
+		else if (
+			draft.presentationSourcePosition !== null &&
+			draft.presentationSourcePosition > index
+		) {
+			draft.presentationSourcePosition -= 1;
+		}
 		scheduleSave();
 	}
 
+	function presentationSourceChanged() {
+		draft.presentationMetadataFetchedAtUtc = null;
+		draft.presentationProvider = '';
+		draft.presentationProviderId = '';
+		sourceImageUnavailable = false;
+		if (!draft.presentationTitleManual) draft.presentationTitle = '';
+		if (!draft.presentationDescriptionManual) draft.presentationDescription = '';
+		if (!draft.presentationImageManual) draft.presentationImageUrl = '';
+	}
+
 	const enhanceSave: SubmitFunction = () => {
 		const submittedGeneration = generation;
 		saving = true;
@@ -106,259 +198,418 @@
 
 <svelte:head><title>{draft.title} | Fundus | Sendewerk</title></svelte:head>
 
-<div class="page-wrap editor-page">
+<div class="piece-editor-route">
-	<header class="editor-header">
+	{#if form?.error}<div class="form-message error route-editor-error" role="alert">
-		<div>
+			{form.error}
-			<a class="back-link" href={resolve('/fundus')}>← Fundus</a>
+		</div>{/if}
-			<h1>{draft.title}</h1>
+	<PieceEditorDialog
-		</div>
+		bind:this={editorDialog}
-		<div
+		bind:activeSection
-			class:problem={saveState === 'error' || saveState === 'conflict'}
+		labelledby="piece-editor-title"
-			class="save-indicator"
+		onrequestclose={requestClose}
-			role="status"
-			aria-live="polite"
-		>
-			<i></i><span>{saveMessage}</span>
-		</div>
-	</header>
-	{#if form?.error}<div class="form-message error" role="alert">{form.error}</div>{/if}
-
-	<form
-		bind:this={editorForm}
-		use:enhance={enhanceSave}
-		method="POST"
-		action="?/save"
-		class="piece-editor"
-		oninput={scheduleSave}
-		onchange={scheduleSave}
 	>
-		<input type="hidden" name="revision" value={revision} />
+		{#snippet header()}
-		<section class="editor-section editor-basics">
+			<p class="eyebrow">Fundusfassung</p>
-			<div class="section-title">
+			<label class="piece-dialog-title">
-				<p class="eyebrow">Grundlagen</p>
+				<span class="sr-only">Titel</span>
-				<h2>Worum geht es?</h2>
+				<textarea
-			</div>
+					form="piece-editor-form"
-			<div class="editor-fields two-columns">
+					name="title"
-				<label class="wide-field"
+					required
-					>Titel<input name="title" required maxlength="200" bind:value={draft.title} /></label
+					rows="1"
-				>
+					maxlength="200"
-				<label
+					aria-label="Titel"
-					>Status<select name="status" bind:value={draft.status}
+					bind:value={draft.title}
-						><option value="inbox">Eingang</option><option value="preparing">In Vorbereitung</option
+					oninput={scheduleSave}></textarea>
-						><option value="ready">Sendefertig</option></select
+			</label>
-					></label
+			<h1 class="sr-only" id="piece-editor-title">{draft.title}</h1>
-				>
+		{/snippet}
-				<label
-					>Format<select name="formatId" bind:value={draft.formatId}
-						><option value={null}>Ohne Format</option
-						>{#each data.taxonomy.formats as item (item.id)}<option value={item.id}
-								>{item.name}</option
-							>{/each}</select
-					></label
-				>
-				<label
-					>Dauer in Minuten<input
-						name="durationMinutes"
-						type="number"
-						min="0"
-						max="1440"
-						step="any"
-						bind:value={durationMinutes}
-					/></label
-				>
-				<label class="wide-field"
-					>Kurzbeschreibung<textarea
-						name="summary"
-						rows="2"
-						maxlength="2000"
-						bind:value={draft.summary}></textarea></label
-				>
-			</div>
-		</section>
 
-		<section class="editor-section taxonomy-editor">
+		<form
-			<div class="section-title">
+			bind:this={editorForm}
-				<p class="eyebrow">Einordnung</p>
+			id="piece-editor-form"
-				<h2>Themen und Abschnitte</h2>
+			use:enhance={enhanceSave}
-			</div>
+			method="POST"
-			<fieldset>
+			action="?/save"
-				<legend>Themen</legend>
+			class="piece-dialog-form"
-				<div class="choice-grid">
+			oninput={scheduleSave}
-					{#each data.taxonomy.topics as item (item.id)}<label
+			onchange={scheduleSave}
-							><input
+		>
-								type="checkbox"
+			<input type="hidden" name="revision" value={revision} />
-								name="topicIds"
-								value={item.id}
-								bind:group={draft.topicIds}
-							/>{item.name}</label
-						>{/each}
-				</div>
-			</fieldset>
-			<fieldset>
-				<legend>Vorgeschlagene Abschnittskategorien</legend>
-				<div class="choice-grid">
-					{#each data.taxonomy.categories as item (item.id)}<label
-							><input
-								type="checkbox"
-								name="categoryIds"
-								value={item.id}
-								bind:group={draft.categoryIds}
-							/><i style={`--choice-color:${item.color}`}></i>{item.name}</label
-						>{/each}
-				</div>
-			</fieldset>
-		</section>
 
-		<section class="editor-section markdown-section">
+			<section class="piece-editor-panel" hidden={activeSection !== 'script'}>
-			<div class="section-title">
+				<div class="piece-panel-heading">
-				<p class="eyebrow">Redaktion</p>
+					<div>
-				<h2>Getrennte Arbeitsbereiche</h2>
+						<p class="eyebrow">Für die Moderation</p>
-				<small>Markdown wird unterstützt und vor der Anzeige bereinigt.</small>
+						<h2>Sendungstext</h2>
-			</div>
+					</div>
-			<div class="markdown-grid">
+				</div>
-				<label
+				<div class="piece-writing-stack">
-					><span>Einleitung</span><textarea
+					<MarkdownEditorField
 						name="intro"
-						rows="7"
+						label="Einleitung"
-						maxlength="50000"
+						placeholder="Wie beginnt dieses Thema in der Sendung?"
-						bind:value={draft.intro}></textarea>
+						bind:value={draft.intro}
-					<MarkdownPreview html={rendered.intro} /></label
+					/>
-				>
+					<MarkdownEditorField
-				<label class="private-field"
-					><span>Private Recherche</span><textarea
-						name="researchText"
-						rows="7"
-						maxlength="50000"
-						bind:value={draft.researchText}></textarea>
-					<MarkdownPreview html={rendered.research} /></label
-				>
-				<label
-					><span>Moderationsstichpunkte</span><textarea
 						name="moderationNotes"
-						rows="7"
+						label="Moderationsstichpunkte"
-						maxlength="50000"
+						placeholder="Argumente, Fragen und Ablaufpunkte"
-						bind:value={draft.moderationNotes}></textarea>
+						rows={10}
-					<MarkdownPreview html={rendered.moderation} /></label
+						bind:value={draft.moderationNotes}
-				>
+					/>
-				<label
+					<MarkdownEditorField
-					><span>Überleitung</span><textarea
 						name="transitionText"
-						rows="7"
+						label="Überleitung"
-						maxlength="50000"
+						placeholder="Wie geht es zum nächsten Thema weiter?"
-						bind:value={draft.transitionText}></textarea>
+						bind:value={draft.transitionText}
-					<MarkdownPreview html={rendered.transition} /></label
+					/>
-				>
-				<label class="wide-field"
-					><span>Präsentationstext</span><textarea
-						name="presentationText"
-						rows="7"
-						maxlength="50000"
-						bind:value={draft.presentationText}></textarea>
-					<MarkdownPreview html={rendered.presentation} /></label
-				>
-			</div>
-		</section>
-
-		<section class="editor-section source-editor">
-			<div class="section-title split-section-title">
-				<div>
-					<p class="eyebrow">Belege</p>
-					<h2>Quellen</h2>
 				</div>
-				<button class="secondary-button" type="button" onclick={addSource}>Quelle hinzufügen</button
+				<details class="piece-meta-details">
-				>
+					<summary>
-			</div>
+						<span>Status, Dauer und Einordnung</span>
-			{#if sources.length}<div class="source-list">
+						<small
-					{#each sources as source, index (index)}<div class="source-row">
+							>{statusLabels[draft.status as keyof typeof statusLabels]} · {durationMinutes || 0} Min.</small
+						>
+					</summary>
+					<div class="piece-meta-grid">
+						<label
+							>Status<select name="status" bind:value={draft.status}
+								><option value="inbox">Eingang</option><option value="preparing"
+									>In Vorbereitung</option
+								><option value="ready">Sendefertig</option></select
+							></label
+						>
+						<label
+							>Dauer in Minuten<input
+								name="durationMinutes"
+								type="number"
+								min="0"
+								max="1440"
+								step="any"
+								bind:value={durationMinutes}
+							/></label
+						>
+						<label
+							>Format<select name="formatId" bind:value={draft.formatId}
+								><option value={null}>Ohne Format</option
+								>{#each data.taxonomy.formats as item (item.id)}<option value={item.id}
+										>{item.name}</option
+									>{/each}</select
+							></label
+						>
+						<label class="wide-field"
+							>Kurzbeschreibung<textarea
+								name="summary"
+								rows="3"
+								maxlength="2000"
+								placeholder="Worum geht es in wenigen Sätzen?"
+								bind:value={draft.summary}></textarea></label
+						>
+						<fieldset>
+							<legend>Themen</legend>
+							<div class="choice-grid">
+								{#each data.taxonomy.topics as item (item.id)}<label
+										><input
+											type="checkbox"
+											name="topicIds"
+											value={item.id}
+											bind:group={draft.topicIds}
+										/>{item.name}</label
+									>{/each}
+							</div>
+						</fieldset>
+						<fieldset>
+							<legend>Vorgeschlagene Abschnittskategorien</legend>
+							<div class="choice-grid">
+								{#each data.taxonomy.categories as item (item.id)}<label
+										><input
+											type="checkbox"
+											name="categoryIds"
+											value={item.id}
+											bind:group={draft.categoryIds}
+										/><i style={`--choice-color:${item.color}`}></i>{item.name}</label
+									>{/each}
+							</div>
+						</fieldset>
+					</div>
+				</details>
+			</section>
+
+			<section class="piece-editor-panel" hidden={activeSection !== 'research'}>
+				<div class="piece-panel-heading">
+					<div>
+						<p class="eyebrow">Nicht öffentlich</p>
+						<h2>Recherche & Quellen</h2>
+					</div>
+					<small>Recherche und Material bleiben innerhalb der Redaktion.</small>
+				</div>
+				<MarkdownEditorField
+					name="researchText"
+					label="Private Recherche"
+					placeholder="Hintergrund, Prüfung und offene Fragen"
+					rows={10}
+					privateField
+					bind:value={draft.researchText}
+				/>
+				<section class="piece-source-editor">
+					<div class="piece-subsection-heading">
+						<div>
+							<p class="eyebrow">Fundstellen</p>
+							<h3>Quellen</h3>
+						</div>
+						<button class="secondary-button" type="button" onclick={addSource}
+							>Quelle hinzufügen</button
+						>
+					</div>
+					{#if sources.length}<div class="source-list">
+							{#each sources as source, index (index)}<div class="source-row">
+									<label
+										>Name<input
+											name="sourceLabel"
+											maxlength="200"
+											placeholder="Name der Quelle"
+											bind:value={source.label}
+										/></label
+									><label
+										>URL<input
+											name="sourceUrl"
+											type="url"
+											maxlength="2000"
+											placeholder="https://…"
+											bind:value={source.url}
+										/></label
+									><label
+										>Zeitmarke in Sekunden<input
+											name="sourceTimecode"
+											type="number"
+											min="0"
+											max="86400"
+											placeholder="Optional"
+											bind:value={source.timecodeSeconds}
+										/></label
+									><button
+										class="text-button danger-text"
+										type="button"
+										onclick={() => removeSource(index)}>Entfernen</button
+									>
+								</div>{/each}
+						</div>{:else}<p class="context-empty">Noch keine Quelle hinterlegt.</p>{/if}
+				</section>
+			</section>
+
+			<section class="piece-editor-panel" hidden={activeSection !== 'presentation'}>
+				<div class="piece-panel-heading">
+					<div>
+						<p class="eyebrow">Öffentliche Ausgabe</p>
+						<h2>Präsentation</h2>
+					</div>
+					<a
+						class="secondary-button"
+						href={resolve('/fundus/[id]/praesentation', { id: data.piece.id })}
+						target="_blank"
+						rel="noopener">In neuem Fenster testen</a
+					>
+				</div>
+				<div class="piece-presentation-layout">
+					<div class="piece-presentation-controls">
+						<MarkdownEditorField
+							name="presentationText"
+							label="Öffentlicher Text"
+							placeholder="Text für die Publikumsausgabe"
+							rows={8}
+							bind:value={draft.presentationText}
+						/>
+						<div class="presentation-mode-picker" role="group" aria-label="Darstellung">
+							{#each [['text', 'Text'], ['link', 'Linkvorschau'], ['video', 'Video']] as mode (mode[0])}<label
+									><input
+										type="radio"
+										name="presentationMode"
+										value={mode[0]}
+										bind:group={draft.presentationMode}
+									/>{mode[1]}</label
+								>{/each}
+						</div>
+						<div class="presentation-settings">
 							<label
-								>Name<input name="sourceLabel" maxlength="200" bind:value={source.label} /></label
+								>Quelle<select
-							><label
+									name="presentationSourcePosition"
-								>URL<input
+									bind:value={draft.presentationSourcePosition}
-									name="sourceUrl"
+									onchange={presentationSourceChanged}
+									><option value={null}>Quelle auswählen</option
+									>{#each sources as source, index (index)}{#if source.url}<option value={index}
+												>{source.label || source.url}</option
+											>{/if}{/each}</select
+								></label
+							>
+							<label
+								>Titel<input
+									name="presentationTitle"
+									maxlength="300"
+									placeholder="Optionaler Anzeigetitel"
+									bind:value={draft.presentationTitle}
+									oninput={() => (draft.presentationTitleManual = true)}
+								/></label
+							>
+							<label
+								>Bild-URL<input
+									name="presentationImageUrl"
 									type="url"
 									maxlength="2000"
-									bind:value={source.url}
+									placeholder="https://…"
+									bind:value={draft.presentationImageUrl}
+									oninput={() => (draft.presentationImageManual = true)}
 								/></label
-							><label
-								>Zeitmarke in Sekunden<input
-									name="sourceTimecode"
-									type="number"
-									min="0"
-									max="86400"
-									bind:value={source.timecodeSeconds}
-								/></label
-							><button
-								class="text-button danger-text"
-								type="button"
-								onclick={() => removeSource(index)}>Entfernen</button
 							>
-						</div>{/each}
+							<label class="wide-field"
-				</div>{:else}<p class="quiet-copy">Noch keine Quellen hinterlegt.</p>{/if}
+								>Anreißer<textarea
+									name="presentationDescription"
+									rows="3"
+									maxlength="1000"
+									placeholder="Kurzer Text zur Vorschau"
+									bind:value={draft.presentationDescription}
+									oninput={() => (draft.presentationDescriptionManual = true)}></textarea></label
+							>
+							<div class="presentation-preview-actions wide-field">
+								<button
+									class="secondary-button"
+									type="button"
+									onclick={() => previewForm.requestSubmit()}
+									disabled={actionsBlocked || draft.presentationSourcePosition === null}
+									>Vorschau laden</button
+								><small
+									>{draft.presentationMetadataFetchedAtUtc
+										? `Zuletzt geladen: ${new Date(draft.presentationMetadataFetchedAtUtc).toLocaleString('de-DE')}`
+										: 'Noch keine Metadaten geladen.'}</small
+								>
+							</div>
+						</div>
+					</div>
+					<aside class="piece-presentation-preview" aria-label="Präsentationsvorschau">
+						<PresentationDisplay
+							content={previewContent}
+							imageSrc={sourceImageUnavailable ? '' : sourcePreviewImage}
+						/>
+					</aside>
+				</div>
+				<input
+					type="hidden"
+					name="presentationTitleManual"
+					value={draft.presentationTitleManual ? '1' : '0'}
+				/>
+				<input
+					type="hidden"
+					name="presentationDescriptionManual"
+					value={draft.presentationDescriptionManual ? '1' : '0'}
+				/>
+				<input
+					type="hidden"
+					name="presentationImageManual"
+					value={draft.presentationImageManual ? '1' : '0'}
+				/>
+				<input type="hidden" name="presentationSiteName" value={draft.presentationSiteName} />
+				<input type="hidden" name="presentationProvider" value={draft.presentationProvider} />
+				<input type="hidden" name="presentationProviderId" value={draft.presentationProviderId} />
+				<input
+					type="hidden"
+					name="presentationMetadataFetchedAtUtc"
+					value={draft.presentationMetadataFetchedAtUtc ?? ''}
+				/>
+			</section>
+		</form>
+
+		<section class="piece-editor-panel piece-media-panel" hidden={activeSection !== 'research'}>
+			<div class="piece-subsection-heading">
+				<div>
+					<p class="eyebrow">Private Dateien</p>
+					<h3>Material</h3>
+				</div>
+				<small>JPEG, PNG, WebP oder GIF bis 5 MB</small>
+			</div>
+			{#if data.piece.media.length}<div class="media-grid">
+					{#each data.piece.media as media (media.id)}<figure>
+							<img src={`/media/${media.id}`} alt={media.altText} />
+							<figcaption>
+								<span>{media.altText || media.originalName}</span>
+								<form method="POST" action="?/deleteImage">
+									<input type="hidden" name="revision" value={revision} /><input
+										type="hidden"
+										name="mediaId"
+										value={media.id}
+									/><button class="text-button danger-text" type="submit" disabled={actionsBlocked}
+										>Entfernen</button
+									>
+								</form>
+							</figcaption>
+						</figure>{/each}
+				</div>{/if}
+			<form method="POST" action="?/upload" enctype="multipart/form-data" class="upload-form">
+				<input type="hidden" name="revision" value={revision} /><label
+					>Bild<input
+						name="image"
+						type="file"
+						accept="image/jpeg,image/png,image/webp,image/gif"
+						required
+					/></label
+				><label
+					>Alternativtext<input
+						name="altText"
+						maxlength="300"
+						placeholder="Was ist auf dem Bild zu sehen?"
+					/></label
+				><button class="secondary-button" type="submit" disabled={actionsBlocked}
+					>Bild hochladen</button
+				>
+			</form>
 		</section>
 
-		<div class="editor-savebar">
+		{#snippet footer()}
-			<span class:problem={saveState === 'error' || saveState === 'conflict'}>{saveMessage}</span
+			<div class="piece-dialog-secondary-actions">
-			><button bind:this={saveButton} class="primary-button" type="submit" disabled={saving}
+				<form method="POST" action="?/duplicate">
-				>Jetzt speichern</button
+					<button class="text-button" type="submit" disabled={actionsBlocked}>Duplizieren</button>
-			>
+				</form>
-		</div>
+				<form method="POST" action="?/archive">
+					<input type="hidden" name="revision" value={revision} /><button
+						class="text-button danger-text"
+						type="submit"
+						aria-label="Piece archivieren"
+						disabled={actionsBlocked}>Archivieren</button
+					>
+				</form>
+			</div>
+			<div class="piece-dialog-primary-action">
+				<span
+					class="save-indicator"
+					class:problem={saveState === 'error' || saveState === 'conflict'}
+					role="status"
+					aria-live="polite">{saveMessage}</span
+				>
+				<button
+					bind:this={saveButton}
+					class:primary-button={saveState === 'dirty' ||
+						saveState === 'error' ||
+						saveState === 'conflict'}
+					class:secondary-button={saveState === 'idle' ||
+						saveState === 'saved' ||
+						saveState === 'saving'}
+					type="submit"
+					form="piece-editor-form"
+					disabled={saving}
+					>{saveState === 'error' || saveState === 'conflict'
+						? 'Erneut speichern'
+						: 'Speichern'}</button
+				>
+			</div>
+		{/snippet}
+	</PieceEditorDialog>
+
+	<form
+		bind:this={previewForm}
+		id="preview-load-form"
+		method="POST"
+		action="?/loadPreview"
+		use:enhance
+	>
+		<input type="hidden" name="revision" value={revision} />
 	</form>
-
-	<section class="editor-section media-editor">
-		<div class="section-title">
-			<p class="eyebrow">Private Dateien</p>
-			<h2>Bilder</h2>
-			<small>JPEG, PNG, WebP oder GIF bis 5 MB; nur angemeldet abrufbar.</small>
-		</div>
-		{#if data.piece.media.length}<div class="media-grid">
-				{#each data.piece.media as media (media.id)}<figure>
-						<img src={`/media/${media.id}`} alt={media.altText} />
-						<figcaption>
-							<span>{media.altText || media.originalName}</span>
-							<form method="POST" action="?/deleteImage">
-								<input type="hidden" name="revision" value={revision} /><input
-									type="hidden"
-									name="mediaId"
-									value={media.id}
-								/><button class="text-button danger-text" type="submit" disabled={actionsBlocked}
-									>Entfernen</button
-								>
-							</form>
-						</figcaption>
-					</figure>{/each}
-			</div>{/if}
-		<form method="POST" action="?/upload" enctype="multipart/form-data" class="upload-form">
-			<input type="hidden" name="revision" value={revision} /><label
-				>Bild<input
-					name="image"
-					type="file"
-					accept="image/jpeg,image/png,image/webp,image/gif"
-					required
-				/></label
-			><label
-				>Alternativtext<input
-					name="altText"
-					maxlength="300"
-					placeholder="Was ist auf dem Bild zu sehen?"
-				/></label
-			><button class="secondary-button" type="submit" disabled={actionsBlocked}
-				>Bild hochladen</button
-			>
-		</form>
-	</section>
-
-	<section class="editor-actions">
-		<form method="POST" action="?/duplicate">
-			<button class="secondary-button" type="submit" disabled={actionsBlocked}
-				>Piece duplizieren</button
-			>
-		</form>
-		<form method="POST" action="?/archive">
-			<input type="hidden" name="revision" value={revision} /><button
-				class="secondary-button danger-text"
-				type="submit"
-				disabled={actionsBlocked}>Piece archivieren</button
-			>
-		</form>
-	</section>
 </div>

src/routes/fundus/[id]/praesentation/+page.server.ts

@@ -0,0 +1,44 @@
+import { error } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+import { requireUser } from '#lib/server/auth.js';
+import { getPiece } from '#lib/server/content.js';
+import { renderMarkdown } from '#lib/server/markdown.js';
+import { buildEmbedUrl, type PresentationContent } from '#lib/server/presentation.js';
+
+export const load: PageServerLoad = ({ locals, params }) => {
+	requireUser(locals.user);
+	const piece = getPiece(params.id);
+	if (!piece) error(404, 'Piece nicht gefunden');
+	const source =
+		piece.presentationSourcePosition === null
+			? null
+			: (piece.sources[piece.presentationSourcePosition] ?? null);
+	const content: PresentationContent & {
+		sources: typeof piece.sources;
+		images: { id: string; altText: string }[];
+	} = {
+		mode: piece.presentationMode,
+		title: piece.title,
+		html: renderMarkdown(piece.presentationText),
+		source,
+		previewTitle: piece.presentationTitle,
+		description: piece.presentationDescription,
+		imageUrl: piece.presentationImageUrl,
+		siteName: piece.presentationSiteName,
+		provider:
+			piece.presentationProvider === 'youtube' || piece.presentationProvider === 'tiktok'
+				? piece.presentationProvider
+				: '',
+		providerId: piece.presentationProviderId,
+		embedUrl: buildEmbedUrl(
+			piece.presentationProvider === 'youtube' || piece.presentationProvider === 'tiktok'
+				? piece.presentationProvider
+				: '',
+			piece.presentationProviderId,
+			source?.timecodeSeconds ?? null
+		),
+		sources: piece.sources,
+		images: piece.media.map((item) => ({ id: item.id, altText: item.altText }))
+	};
+	return { pieceId: piece.id, content };
+};

src/routes/fundus/[id]/praesentation/+page.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import PresentationDisplay from '#lib/components/PresentationDisplay.svelte';
+	import type { PageProps } from './$types';
+
+	let { data }: PageProps = $props();
+</script>
+
+<svelte:head>
+	<title>Präsentation testen | Sendewerk</title>
+	<meta name="robots" content="noindex, nofollow, noarchive" />
+</svelte:head>
+
+<main class="heinzlive-output presentation-test-output">
+	<div class="presentation-test-status" role="status">Isolierte Testansicht</div>
+	<PresentationDisplay
+		content={data.content}
+		imageSrc={data.content.mode === 'text'
+			? '/media'
+			: `/fundus/${data.pieceId}/praesentation/preview-image`}
+	/>
+</main>

src/routes/fundus/[id]/praesentation/preview-image/+server.ts

@@ -0,0 +1,26 @@
+import { error } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { requireUser } from '#lib/server/auth.js';
+import { getPiece } from '#lib/server/content.js';
+import { fetchPresentationImage } from '#lib/server/presentation.js';
+
+export const GET: RequestHandler = async ({ locals, params }) => {
+	requireUser(locals.user);
+	const piece = getPiece(params.id);
+	if (!piece?.presentationImageUrl) error(404, 'Vorschaubild nicht verfügbar');
+	try {
+		const image = await fetchPresentationImage(piece.presentationImageUrl);
+		return new Response(new Uint8Array(image.data), {
+			headers: {
+				'Content-Type': image.mimeType,
+				'Content-Length': String(image.data.byteLength),
+				'Cache-Control': 'private, max-age=300',
+				'X-Content-Type-Options': 'nosniff',
+				'Cross-Origin-Resource-Policy': 'same-origin',
+				'Content-Security-Policy': "default-src 'none'; sandbox"
+			}
+		});
+	} catch {
+		error(404, 'Vorschaubild nicht verfügbar');
+	}
+};

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

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { page } from '$app/state';
 	import { onMount, untrack } from 'svelte';
+	import PresentationDisplay from '#lib/components/PresentationDisplay.svelte';
 	import type { PageProps } from './$types';
 
 	let { data }: PageProps = $props();
@@ -40,30 +41,18 @@
 </svelte:head>
 
 <main class="heinzlive-output">
-	<div class="output-connection" class:problem={connection === 'interrupted'} role="status">
+	<div class="output-connection sr-only" class:problem={connection === 'interrupted'} role="status">
 		<span></span>{connection === 'interrupted' ? 'Verbindung unterbrochen' : 'Verbunden'}
 	</div>
 	{#if view.content}
-		<article class="output-content">
+		{#key view.revision}
-			<p class="output-kicker">heinzlive</p>
+			<PresentationDisplay
-			<h1>{view.content.title}</h1>
+				content={view.content}
-			<!-- HTML is produced exclusively by the server-side allowlist sanitizer. -->
+				imageSrc={view.content.mode === 'text'
-			<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+					? `/heinzlive/${page.params.token}/media`
-			<div class="output-copy">{@html view.content.html}</div>
+					: `/heinzlive/${page.params.token}/preview-image`}
-			{#if view.content.images.length}<div class="output-images">
+			/>
-					{#each view.content.images as image (image.id)}
+		{/key}
-						<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>

src/routes/heinzlive/[token]/preview-image/+server.ts

@@ -0,0 +1,18 @@
+import { error } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { getPresentationPreviewImage } from '#lib/server/live.js';
+
+export const GET: RequestHandler = async ({ params }) => {
+	const image = await getPresentationPreviewImage(params.token);
+	if (!image) error(404, 'Vorschaubild nicht verfügbar');
+	return new Response(new Uint8Array(image.data), {
+		headers: {
+			'Content-Type': image.mimeType,
+			'Content-Length': String(image.data.byteLength),
+			'Cache-Control': 'private, max-age=300',
+			'X-Content-Type-Options': 'nosniff',
+			'Cross-Origin-Resource-Policy': 'same-origin',
+			'Content-Security-Policy': "default-src 'none'; sandbox"
+		}
+	});
+};

src/routes/live/+page.svelte

@@ -73,6 +73,10 @@
 		persistSettings();
 	}
 
+	function liveAction(name: string) {
+		return `?show=${encodeURIComponent(data.live.show.id)}&/${name}`;
+	}
+
 	const enhanceCommand: SubmitFunction = ({ formElement, formData, submitter }) => {
 		const command = formElement.elements.namedItem('commandId');
 		if (command instanceof HTMLInputElement) {
@@ -147,7 +151,7 @@
 	{#if popupMessage}<div class="form-message" role="status">{popupMessage}</div>{/if}
 
 	<section class="live-toolbar" aria-label="Live-Sitzung">
-		<form method="POST" action="?/start" use:enhance={enhanceCommand}>
+		<form method="POST" action={liveAction('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} />
@@ -155,7 +159,7 @@
 				{data.live.startedAtUtc ? 'Live-Stand wiederaufnehmen' : 'Sendung starten'}
 			</button>
 		</form>
-		<form method="POST" action="?/createOutput" use:enhance={enhanceOutput}>
+		<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">Präsentationsfenster öffnen</button>
 		</form>
@@ -200,13 +204,13 @@
 					</section>{/if}
 
 				<div class="live-current-actions">
-					<form method="POST" action="?/back" use:enhance={enhanceCommand}>
+					<form method="POST" action={liveAction('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}>
+					<form method="POST" action={liveAction('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} />
@@ -217,13 +221,13 @@
 								: 'Präsentieren'}
 						</button>
 					</form>
-					<form method="POST" action="?/skip" use:enhance={enhanceCommand}>
+					<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} />
 						<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}>
+					<form method="POST" action={liveAction('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} />
@@ -240,7 +244,7 @@
 				</p>
 				{#if data.live.completedCount}<form
 						method="POST"
-						action="?/back"
+						action={liveAction('back')}
 						use:enhance={enhanceCommand}
 					>
 						<input type="hidden" name="showId" value={data.live.show.id} />
@@ -285,7 +289,11 @@
 								</div>
 								<div class="live-run-actions">
 									{#if usage.status === 'open'}
-										<form method="POST" action="?/moveUsage" use:enhance={enhanceCommand}>
+										<form
+											method="POST"
+											action={liveAction('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} />
@@ -298,7 +306,11 @@
 												aria-label={`${usage.title} nach oben`}>↑</button
 											>
 										</form>
-										<form method="POST" action="?/moveUsage" use:enhance={enhanceCommand}>
+										<form
+											method="POST"
+											action={liveAction('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} />
@@ -312,7 +324,7 @@
 											>
 										</form>
 									{/if}
-									<form method="POST" action="?/present" use:enhance={enhanceCommand}>
+									<form method="POST" action={liveAction('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} />
@@ -335,7 +347,7 @@
 									>{/if}
 							</div>
 							<div class="live-run-actions">
-								<form method="POST" action="?/moveUsage" use:enhance={enhanceCommand}>
+								<form method="POST" action={liveAction('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} />
@@ -347,7 +359,7 @@
 										aria-label={`${usage.title} in Reserve nach oben`}>↑</button
 									>
 								</form>
-								<form method="POST" action="?/moveUsage" use:enhance={enhanceCommand}>
+								<form method="POST" action={liveAction('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} />
@@ -361,7 +373,7 @@
 								</form>
 								{#if data.live.current || data.live.sections[0]}<form
 										method="POST"
-										action="?/moveUsage"
+										action={liveAction('moveUsage')}
 										use:enhance={enhanceCommand}
 									>
 										<input type="hidden" name="showId" value={data.live.show.id} />

src/routes/sendungen/[id]/+page.server.ts

@@ -5,16 +5,19 @@ import { getTaxonomy, listPieces } from '#lib/server/content.js';
 import {
 	addPieceUsage,
 	addShowSection,
+	duplicatePieceUsage,
 	getShow,
+	getPieceUsageContexts,
 	movePieceUsage,
 	moveShowSection,
+	refreshPieceUsageFromOriginal,
 	removePieceUsage,
 	removeShowSection,
 	saveShowMetadata,
 	updatePieceUsage,
 	updateShowSection,
 	type EditableShowStatus,
-	type UsageStatus
+	type PieceUsageUpdate
 } from '#lib/server/shows.js';
 
 function text(data: FormData, name: string) {
@@ -84,6 +87,8 @@ function actionError(cause: unknown) {
 		return { status: 409, error: 'Abgeschlossene Sendungen können nicht bearbeitet werden.' };
 	if (code === 'PIECE_NOT_READY')
 		return { status: 400, error: 'Nur sendefertige Pieces können eingeplant werden.' };
+	if (code === 'ORIGINAL_NOT_FOUND')
+		return { status: 409, error: 'Das zugehörige Fundus-Piece ist nicht mehr verfügbar.' };
 	if (code === 'NOT_FOUND') return { status: 404, error: 'Der Eintrag wurde nicht gefunden.' };
 	if (code === 'INVALID_DURATION')
 		return { status: 400, error: 'Piece-Dauern müssen zwischen 0 und 1.440 Minuten liegen.' };
@@ -104,18 +109,25 @@ export const load: PageServerLoad = ({ locals, params, url }) => {
 	requireUser(locals.user);
 	const show = getShow(params.id);
 	if (!show) error(404, 'Sendung nicht gefunden');
+	const pieces = listPieces({
+		statuses: ['ready'],
+		query: url.searchParams.get('q') ?? '',
+		categoryId: url.searchParams.get('category') ?? ''
+	});
+	const usageContexts = getPieceUsageContexts(
+		pieces.map((piece) => piece.id),
+		show.id
+	);
 	return {
 		show,
 		startsAtLocal: berlinInput(show.startsAtUtc),
-		pieces: listPieces({
+		pieces: pieces.map((piece) => ({ ...piece, ...usageContexts[piece.id] })),
-			statuses: ['ready'],
-			query: url.searchParams.get('q') ?? '',
-			categoryId: url.searchParams.get('category') ?? ''
-		}),
 		taxonomy: getTaxonomy(),
 		filters: {
 			query: url.searchParams.get('q') ?? '',
-			categoryId: url.searchParams.get('category') ?? ''
+			categoryId: url.searchParams.get('category') ?? '',
+			includeUsed: url.searchParams.get('includeUsed') === '1',
+			includePlanned: url.searchParams.get('includePlanned') === '1'
 		}
 	};
 };
@@ -198,10 +210,33 @@ export const actions = {
 				moderation: text(data, 'moderation'),
 				transition: text(data, 'transition'),
 				presentation: text(data, 'presentation'),
-				status: text(data, 'status') as UsageStatus
+				presentationMode: text(data, 'presentationMode') as PieceUsageUpdate['presentationMode'],
+				presentationSourceLabel: text(data, 'presentationSourceLabel'),
+				presentationSourceUrl: text(data, 'presentationSourceUrl'),
+				presentationSourceTimecodeSeconds: text(data, 'presentationSourceTimecodeSeconds')
+					? Number(data.get('presentationSourceTimecodeSeconds'))
+					: null,
+				presentationTitle: text(data, 'presentationTitle'),
+				presentationDescription: text(data, 'presentationDescription'),
+				presentationImageUrl: text(data, 'presentationImageUrl'),
+				presentationSiteName: text(data, 'presentationSiteName')
 			})
 		);
 	},
+	duplicateUsage: async ({ locals, params, request }) => {
+		requireUser(locals.user);
+		const data = await request.formData();
+		return attempt('duplicateUsage', () =>
+			duplicatePieceUsage(params.id, text(data, 'usageId'), Number(data.get('revision')))
+		);
+	},
+	refreshUsage: async ({ locals, params, request }) => {
+		requireUser(locals.user);
+		const data = await request.formData();
+		return attempt('refreshUsage', () =>
+			refreshPieceUsageFromOriginal(params.id, text(data, 'usageId'), Number(data.get('revision')))
+		);
+	},
 	removeUsage: async ({ locals, params, request }) => {
 		requireUser(locals.user);
 		const data = await request.formData();

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

@@ -1,7 +1,12 @@
 <script lang="ts">
 	import { enhance, type SubmitFunction } from '$app/forms';
+	import { replaceState } from '$app/navigation';
 	import { resolve } from '$app/paths';
+	import { page } from '$app/state';
 	import { flip } from 'svelte/animate';
+	import { onMount, untrack } from 'svelte';
+	import PieceUsageHistory from '#lib/components/PieceUsageHistory.svelte';
+	import UsageEditorDialog from '#lib/components/UsageEditorDialog.svelte';
 	import { formatClock, formatDuration } from '#lib/format.js';
 	import type { PageProps } from './$types';
 
@@ -23,9 +28,27 @@
 	let dropSectionId = $state('');
 	let dropPosition = $state(0);
 	let copyMessage = $state('');
+	let showUsedPieces = $state(untrack(() => data.filters.includeUsed));
+	let showPlannedPieces = $state(untrack(() => data.filters.includePlanned));
+	let visiblePieces = $derived(
+		data.pieces.filter(
+			(piece) =>
+				(showUsedPieces || piece.sentHistory.length === 0) &&
+				(showPlannedPieces || !piece.isPlannedInCurrentShow)
+		)
+	);
 	let plannedCount = $derived(
 		data.show.sections.reduce((total, section) => total + section.usages.length, 0)
 	);
+	onMount(() => {
+		const syncFiltersFromHistory = () => {
+			const search = new URL(window.location.href).searchParams;
+			showUsedPieces = search.get('includeUsed') === '1';
+			showPlannedPieces = search.get('includePlanned') === '1';
+		};
+		window.addEventListener('popstate', syncFiltersFromHistory);
+		return () => window.removeEventListener('popstate', syncFiltersFromHistory);
+	});
 
 	function berlinDate(value: string | null) {
 		if (!value) return 'Termin offen';
@@ -36,8 +59,15 @@
 		}).format(new Date(value));
 	}
 
-	function durationInMinutes(seconds: number) {
+	function setSourceFilter(name: 'includeUsed' | 'includePlanned', checked: boolean) {
-		return Number((seconds / 60).toFixed(2));
+		if (name === 'includeUsed') showUsedPieces = checked;
+		else showPlannedPieces = checked;
+		const url = new URL(page.url.href);
+		if (checked) url.searchParams.set(name, '1');
+		else url.searchParams.delete(name);
+		// This URL is cloned from the current page; only same-route filter parameters change.
+		// eslint-disable-next-line svelte/no-navigation-without-resolve
+		replaceState(url, page.state);
 	}
 
 	function startDrag(kind: 'piece' | 'section' | 'usage', id: string, event: DragEvent) {
@@ -142,6 +172,7 @@
 		affected?.classList.add('is-updating');
 		if (submitter instanceof HTMLButtonElement) submitter.disabled = true;
 		return async ({ result, update }) => {
+			if (result.type === 'success') formElement.closest<HTMLDialogElement>('dialog')?.close();
 			await update({ reset: result.type === 'success', invalidateAll: true });
 			affected?.classList.remove('is-updating');
 			if (submitter instanceof HTMLButtonElement) submitter.disabled = false;
@@ -264,9 +295,9 @@
 					<p class="eyebrow">Quelle</p>
 					<h2 id="source-title">Sendefertiger Fundus</h2>
 				</div>
-				<span>{data.pieces.length}</span>
+				<span>{visiblePieces.length}</span>
 			</header>
-			<form method="GET" class="builder-filter">
+			<form id="builder-filters" method="GET" class="builder-filter">
 				<label
 					><span class="sr-only">Fundus durchsuchen</span><input
 						type="search"
@@ -286,8 +317,32 @@
 				>
 				<button class="text-button" type="submit">Filtern</button>
 			</form>
+			<div class="builder-filter-options" aria-label="Fundusauswahl erweitern">
+				<label class="filter-checkbox">
+					<input
+						type="checkbox"
+						name="includeUsed"
+						value="1"
+						form="builder-filters"
+						checked={showUsedPieces}
+						onchange={(event) => setSourceFilter('includeUsed', event.currentTarget.checked)}
+					/>
+					<span>Auch verwendete Inhalte zeigen</span>
+				</label>
+				<label class="filter-checkbox">
+					<input
+						type="checkbox"
+						name="includePlanned"
+						value="1"
+						form="builder-filters"
+						checked={showPlannedPieces}
+						onchange={(event) => setSourceFilter('includePlanned', event.currentTarget.checked)}
+					/>
+					<span>Auch eingeplante Inhalte zeigen</span>
+				</label>
+			</div>
 			<div class="builder-source-list">
-				{#each data.pieces as piece (piece.id)}
+				{#each visiblePieces as piece (piece.id)}
 					<article
 						class="builder-source-card"
 						class:is-dragging={dragged?.kind === 'piece' && dragged.id === piece.id}
@@ -310,6 +365,8 @@
 							<p>
 								{piece.format} · {piece.topics.map((item) => item.name).join(', ') || 'Ohne Thema'}
 							</p>
+							{#if piece.isPlannedInCurrentShow}<span class="planned-label">Eingeplant</span>{/if}
+							<PieceUsageHistory history={piece.sentHistory} />
 							<small class="drag-hint">Ziehen oder Ziel auswählen</small>
 						</div>
 						<form
@@ -338,10 +395,13 @@
 					</article>
 				{/each}
 			</div>
-			{#if !data.pieces.length}<div class="empty-state">
+			{#if !visiblePieces.length}<div class="empty-state">
 					<span aria-hidden="true">⌕</span>
-					<h2>Nichts gefunden</h2>
+					<h2>Keine verfügbaren Pieces</h2>
-					<p>Filter ändern oder Pieces im Fundus sendefertig markieren.</p>
+					<p>
+						Suchfilter ändern, ausgeblendete Inhalte einblenden oder Pieces im Fundus sendefertig
+						markieren.
+					</p>
 				</div>{/if}
 		</section>
 
@@ -473,7 +533,7 @@
 													ondragend={finishDrag}
 												>
 													<strong>{usage.title}</strong><small
-														>{formatClock(usage.durationSeconds)} · sendungsspezifische Kopie</small
+														>{formatClock(usage.durationSeconds)}</small
 													>
 												</div>
 												<div class="row-actions">
@@ -507,105 +567,15 @@
 															aria-label={`${usage.title} nach unten`}>↓</button
 														>
 													</form>
+													<UsageEditorDialog
+														{usage}
+														revision={data.show.revision}
+														sectionId={section.id}
+														sections={data.show.sections}
+														error={form?.error}
+														{enhanceCommand}
+													/>
 												</div>
-												<details class="usage-editor">
-													<summary>Bearbeiten und verschieben</summary>
-													<form
-														use:enhance={enhanceCommand}
-														method="POST"
-														action="?/updateUsage"
-														class="usage-edit-form"
-													>
-														<input type="hidden" name="revision" value={data.show.revision} /><input
-															type="hidden"
-															name="usageId"
-															value={usage.id}
-														/>
-														<label
-															>Titel<input
-																name="title"
-																required
-																maxlength="200"
-																value={usage.title}
-															/></label
-														><label
-															>Dauer in Minuten<input
-																name="durationMinutes"
-																type="number"
-																min="0"
-																max="1440"
-																step="any"
-																value={durationInMinutes(usage.durationSeconds)}
-															/></label
-														>
-														<label class="wide-field"
-															>Eigene Notizen<textarea name="ownNotes" rows="2"
-																>{usage.ownNotes}</textarea
-															></label
-														><label class="wide-field"
-															>Einleitung<textarea name="intro" rows="2">{usage.intro}</textarea
-															></label
-														><label class="wide-field"
-															>Recherche<textarea name="research" rows="2"
-																>{usage.research}</textarea
-															></label
-														><label class="wide-field"
-															>Moderation<textarea name="moderation" rows="2"
-																>{usage.moderation}</textarea
-															></label
-														><label class="wide-field"
-															>Überleitung<textarea name="transition" rows="2"
-																>{usage.transition}</textarea
-															></label
-														><label class="wide-field"
-															>Präsentation<textarea name="presentation" rows="2"
-																>{usage.presentation}</textarea
-															></label
-														>
-														<input type="hidden" name="status" value={usage.status} /><button
-															class="primary-button wide-field"
-															type="submit">Verwendung speichern</button
-														>
-													</form>
-													<div class="usage-command-row">
-														<form use:enhance={enhanceCommand} method="POST" action="?/moveUsage">
-															<input
-																type="hidden"
-																name="revision"
-																value={data.show.revision}
-															/><input type="hidden" name="usageId" value={usage.id} /><input
-																type="hidden"
-																name="position"
-																value="9999"
-															/><label
-																>Ziel<select name="sectionId"
-																	><option value="">Reservebank</option
-																	>{#each data.show.sections as target (target.id)}<option
-																			value={target.id}
-																			selected={target.id === section.id}>{target.name}</option
-																		>{/each}</select
-																></label
-															><button class="secondary-button" type="submit">Verschieben</button>
-														</form>
-														<form
-															use:enhance={enhanceCommand}
-															method="POST"
-															action="?/removeUsage"
-															onsubmit={(event) =>
-																!confirm('Verwendung aus der Sendung entfernen?') &&
-																event.preventDefault()}
-														>
-															<input
-																type="hidden"
-																name="revision"
-																value={data.show.revision}
-															/><input type="hidden" name="usageId" value={usage.id} /><button
-																class="text-button danger-text"
-																type="submit">Entfernen</button
-															>
-														</form>
-													</div>
-												</details>
 											</div>
 										</div>
 									{/each}
@@ -811,6 +781,14 @@
 									aria-label={`${usage.title} aus Reserve entfernen`}>Entfernen</button
 								>
 							</form>
+							<UsageEditorDialog
+								{usage}
+								revision={data.show.revision}
+								sectionId=""
+								sections={data.show.sections}
+								error={form?.error}
+								{enhanceCommand}
+							/>
 						</div>
 					</div>
 				{/each}

tests/ui.e2e.ts

@@ -1,4 +1,5 @@
 import { expect, test, type Page } from '@playwright/test';
+import Database from 'better-sqlite3';
 import { readFileSync, readdirSync } from 'node:fs';
 import path from 'node:path';
 
@@ -29,6 +30,16 @@ async function setTheme(page: Page, theme: 'light' | 'dark') {
 	await page.evaluate((value) => localStorage.setItem('sendewerk-theme', value), theme);
 }
 
+async function openEditorialField(page: Page, heading: string) {
+	if (heading.includes('Recherche')) {
+		await page.getByRole('button', { name: 'Recherche & Quellen' }).click();
+	} else if (heading.includes('Präsentation')) {
+		await page.getByRole('button', { name: 'Präsentation', exact: true }).click();
+	} else {
+		await page.getByRole('button', { name: 'Sendungstext', exact: true }).click();
+	}
+}
+
 async function login(page: Page, email = adminEmail, password = adminPassword) {
 	await page.goto('/login');
 	await page.getByLabel('E-Mail').fill(email);
@@ -61,6 +72,124 @@ function latestMailLink(subject: string): string {
 	return match[0];
 }
 
+function addSentHistoryFixture(pieceId: string) {
+	const dataDirectory = process.env.SENDEWERK_E2E_DATA_DIR;
+	if (!dataDirectory) throw new Error('E2E-Datenverzeichnis ist nicht konfiguriert.');
+	const database = new Database(path.join(dataDirectory, 'e2e.sqlite'));
+	database.pragma('foreign_keys = ON');
+	const insertShow = database.prepare(
+		`INSERT INTO shows (id, title, starts_at_utc, twitch_title, announcement_text, status,
+		 revision, created_at_utc, updated_at_utc) VALUES (?, ?, ?, '', '', 'completed', 1, ?, ?)`
+	);
+	const insertSection = database.prepare(
+		`INSERT INTO show_sections (id, show_id, name, category_id, position,
+		 explicit_duration_seconds, is_reserve_bank) VALUES (?, ?, 'Ablauf', NULL, 0, NULL, 0)`
+	);
+	const insertUsage = database.prepare(
+		`INSERT INTO piece_usages (id, show_section_id, original_piece_id, position, status,
+		 duration_seconds, title_snapshot, intro_snapshot, research_snapshot, moderation_snapshot,
+		 transition_snapshot, presentation_snapshot, own_notes, is_reserve)
+		 VALUES (?, ?, ?, 0, 'done', 300, 'Historische Verwendung', '', '', '', '', '', '', 0)`
+	);
+	database.transaction(() => {
+		for (const [suffix, title, date] of [
+			['older', 'Rückblick im September', '2026-09-10T18:00:00.000Z'],
+			['latest', 'Rückblick im Oktober', '2026-10-10T18:00:00.000Z']
+		] as const) {
+			const showId = `e2e-history-${suffix}`;
+			const sectionId = `e2e-history-section-${suffix}`;
+			insertShow.run(showId, title, date, date, date);
+			insertSection.run(sectionId, showId);
+			insertUsage.run(`e2e-history-usage-${suffix}`, sectionId, pieceId);
+		}
+	})();
+	database.close();
+}
+
+function removeSentHistoryFixture() {
+	const dataDirectory = process.env.SENDEWERK_E2E_DATA_DIR;
+	if (!dataDirectory) return;
+	const database = new Database(path.join(dataDirectory, 'e2e.sqlite'));
+	database.pragma('foreign_keys = ON');
+	database.prepare("DELETE FROM shows WHERE id LIKE 'e2e-history-%'").run();
+	database.close();
+}
+
+function addPresentationFixture() {
+	const dataDirectory = process.env.SENDEWERK_E2E_DATA_DIR;
+	if (!dataDirectory) throw new Error('E2E-Datenverzeichnis ist nicht konfiguriert.');
+	const database = new Database(path.join(dataDirectory, 'e2e.sqlite'));
+	database.pragma('foreign_keys = ON');
+	const now = '2026-10-22T19:00:00.000Z';
+	database.transaction(() => {
+		database
+			.prepare(
+				`INSERT INTO shows (id, title, starts_at_utc, twitch_title, announcement_text, status,
+				 revision, created_at_utc, updated_at_utc)
+				 VALUES ('e2e-presentation', 'E2E Präsentation', ?, '', '', 'ready', 1, ?, ?)`
+			)
+			.run(now, now, now);
+		database
+			.prepare(
+				`INSERT INTO show_sections (id, show_id, name, category_id, position,
+				 explicit_duration_seconds, is_reserve_bank)
+				 VALUES ('e2e-presentation-section', 'e2e-presentation', 'Player', NULL, 0, NULL, 0),
+				 ('e2e-presentation-reserve', 'e2e-presentation', 'Reservebank', NULL, 1, NULL, 1)`
+			)
+			.run();
+		const insert = database.prepare(
+			`INSERT INTO piece_usages (id, show_section_id, original_piece_id, position, status,
+			 duration_seconds, title_snapshot, intro_snapshot, research_snapshot, moderation_snapshot,
+			 transition_snapshot, presentation_snapshot, own_notes, is_reserve,
+			 presentation_mode_snapshot, presentation_source_label_snapshot,
+			 presentation_source_url_snapshot, presentation_source_timecode_snapshot,
+			 presentation_title_meta_snapshot, presentation_description_snapshot,
+			 presentation_image_url_snapshot, presentation_site_name_snapshot,
+			 presentation_provider_snapshot, presentation_provider_id_snapshot)
+			 VALUES (?, 'e2e-presentation-section', NULL, ?, 'open', 300, ?, '', ?, ?, '', '', '', 0,
+			 'video', ?, ?, ?, ?, '', '', ?, ?, ?)`
+		);
+		insert.run(
+			'e2e-youtube',
+			0,
+			'YouTube Kurzlink',
+			'PRIVATE_RESEARCH_YOUTUBE',
+			'PRIVATE_MODERATION_YOUTUBE',
+			'YouTube',
+			'https://youtu.be/dQw4w9WgXcQ',
+			75,
+			'YouTube Vorschau',
+			'YouTube',
+			'youtube',
+			'dQw4w9WgXcQ'
+		);
+		insert.run(
+			'e2e-tiktok',
+			1,
+			'TikTok Hochformat',
+			'PRIVATE_RESEARCH_TIKTOK',
+			'PRIVATE_MODERATION_TIKTOK',
+			'TikTok',
+			'https://www.tiktok.com/@scout2015/video/6718335390845095173',
+			12,
+			'TikTok Vorschau',
+			'TikTok',
+			'tiktok',
+			'6718335390845095173'
+		);
+	})();
+	database.close();
+}
+
+function removePresentationFixture() {
+	const dataDirectory = process.env.SENDEWERK_E2E_DATA_DIR;
+	if (!dataDirectory) return;
+	const database = new Database(path.join(dataDirectory, 'e2e.sqlite'));
+	database.pragma('foreign_keys = ON');
+	database.prepare("DELETE FROM shows WHERE id = 'e2e-presentation'").run();
+	database.close();
+}
+
 test.beforeAll(async ({ browser }) => {
 	const page = await browser.newPage();
 	await page.goto('/');
@@ -176,6 +305,8 @@ test('desktop fundus is a compact, filterable list with persistent themes', asyn
 	await expect(page.locator('.sidebar')).toBeVisible();
 	await expect(page.locator('.mobile-navigation')).toBeHidden();
 	await expect(page.locator('.utility-navigation a')).toHaveText('Verwaltung');
+	await expect(page.locator('.piece-card')).toHaveCount(1);
+	await page.getByLabel('Auch eingeplante Inhalte zeigen').check();
 	await expect(page.locator('.piece-card')).toHaveCount(4);
 
 	const firstRow = await page.locator('.piece-card').nth(0).boundingBox();
@@ -193,8 +324,8 @@ test('desktop fundus is a compact, filterable list with persistent themes', asyn
 	await page.getByLabel('Status').selectOption('preparing');
 	await page.getByRole('button', { name: 'Anwenden' }).click();
 	await expect(page.getByRole('heading', { name: 'Kein passendes Piece' })).toBeVisible();
-	await page.getByRole('link', { name: 'Filter zurücksetzen' }).click();
+	await page.getByRole('button', { name: 'Zurücksetzen' }).click();
-	await expect(page.locator('.piece-card')).toHaveCount(4);
+	await expect(page.locator('.piece-card')).toHaveCount(1);
 
 	await page.getByRole('button', { name: 'Darstellung: System' }).click();
 	await expect(page.locator('html')).toHaveAttribute('data-theme-preference', 'light');
@@ -205,6 +336,118 @@ test('desktop fundus is a compact, filterable list with persistent themes', asyn
 	await page.screenshot({ path: testInfo.outputPath('fundus-desktop-light.png'), fullPage: true });
 });
 
+test('sent and planned source filters stay independent and removing the last usage offers the piece again', async ({
+	page
+}, testInfo) => {
+	addSentHistoryFixture('piece-effects');
+	try {
+		await page.goto('/fundus');
+		await expect(
+			page.getByRole('heading', { name: 'Warum praktische Effekte wieder auffallen' })
+		).toHaveCount(0);
+		await page.evaluate(() => (document.body.dataset.filterDocument = 'stable'));
+		await page.getByLabel('Auch verwendete Inhalte zeigen').check();
+		await expect(
+			page.getByRole('heading', { name: 'Warum praktische Effekte wieder auffallen' })
+		).toHaveCount(0);
+		await page.getByLabel('Auch eingeplante Inhalte zeigen').check();
+		const usedPiece = page
+			.locator('.piece-card')
+			.filter({ hasText: 'Warum praktische Effekte wieder auffallen' });
+		await expect(usedPiece).toBeVisible();
+		await expect(usedPiece).toContainText('Gesendet am 10.10.2026');
+		await expect(usedPiece).toContainText('+ 1 weitere');
+		await expect(usedPiece.getByRole('link', { name: 'Rückblick im Oktober' })).toHaveAttribute(
+			'href',
+			'/sendungen/e2e-history-latest'
+		);
+		await usedPiece.getByText('Vollständige Verwendungshistorie').click();
+		await expect(usedPiece.locator('.piece-usage-history li')).toHaveCount(2);
+		await expect(page.locator('body')).toHaveAttribute('data-filter-document', 'stable');
+		await page.getByRole('searchbox', { name: 'Fundus durchsuchen' }).fill('praktische Effekte');
+		await page.getByRole('button', { name: 'Anwenden' }).click();
+		await expect(page.getByLabel('Auch verwendete Inhalte zeigen')).toBeChecked();
+		await expect(usedPiece).toBeVisible();
+		await page.screenshot({
+			path: testInfo.outputPath('fundus-verwendungshistorie-desktop.png'),
+			fullPage: true
+		});
+
+		await page.goto('/sendungen');
+		await page.getByLabel('Titel').fill('E2E Filterprüfung');
+		await page.getByLabel('Ausgangspunkt').selectOption('template-default');
+		await page.getByRole('button', { name: 'Sendung anlegen' }).click();
+		await page.getByPlaceholder('Fundus durchsuchen').fill('kleine Konsole');
+		await page.getByRole('button', { name: 'Filtern' }).click();
+		const consolePiece = page
+			.locator('.builder-source-card')
+			.filter({ hasText: 'Die kleine Konsole mit dem großen Dreh' });
+		await consolePiece.getByRole('button', { name: 'Hinzufügen' }).click();
+		await expect(consolePiece).toHaveCount(0);
+
+		await page.getByPlaceholder('Fundus durchsuchen').fill('');
+		await page.getByRole('button', { name: 'Filtern' }).click();
+		await page.getByLabel('Auch eingeplante Inhalte zeigen').check();
+		await expect(
+			page
+				.locator('.builder-source-card')
+				.filter({ hasText: 'Die kleine Konsole mit dem großen Dreh' })
+		).toContainText('Eingeplant');
+		await expect(
+			page
+				.locator('.builder-source-card')
+				.filter({ hasText: 'Warum praktische Effekte wieder auffallen' })
+		).toHaveCount(0);
+		await page.getByPlaceholder('Fundus durchsuchen').fill('kleine Konsole');
+		await page.getByRole('button', { name: 'Filtern' }).click();
+		await expect(page.getByLabel('Auch eingeplante Inhalte zeigen')).toBeChecked();
+		await expect(
+			page
+				.locator('.builder-source-card')
+				.filter({ hasText: 'Die kleine Konsole mit dem großen Dreh' })
+		).toContainText('Eingeplant');
+		await page.getByPlaceholder('Fundus durchsuchen').fill('');
+		await page.getByRole('button', { name: 'Filtern' }).click();
+
+		await page.getByLabel('Auch eingeplante Inhalte zeigen').uncheck();
+		await page.getByLabel('Auch verwendete Inhalte zeigen').check();
+		await expect(
+			page
+				.locator('.builder-source-card')
+				.filter({ hasText: 'Die kleine Konsole mit dem großen Dreh' })
+		).toHaveCount(0);
+		await expect(
+			page
+				.locator('.builder-source-card')
+				.filter({ hasText: 'Warum praktische Effekte wieder auffallen' })
+		).toContainText('Rückblick im Oktober');
+		await page.screenshot({
+			path: testInfo.outputPath('sendungsfilter-desktop.png'),
+			fullPage: true
+		});
+
+		await page
+			.locator('.reserve-usage')
+			.getByRole('button', { name: /aus Reserve entfernen/ })
+			.click();
+		await page.getByLabel('Auch verwendete Inhalte zeigen').uncheck();
+		await expect(
+			page
+				.locator('.builder-source-card')
+				.filter({ hasText: 'Die kleine Konsole mit dem großen Dreh' })
+		).toBeVisible();
+		await page.setViewportSize({ width: 390, height: 844 });
+		await page.getByRole('button', { name: 'Fundus', exact: true }).click();
+		await expectNoHorizontalOverflow(page);
+		await page.screenshot({
+			path: testInfo.outputPath('sendungsfilter-mobile.png'),
+			fullPage: true
+		});
+	} finally {
+		removeSentHistoryFixture();
+	}
+});
+
 test('desktop builder keeps the fundus beside the wider run sheet', async ({ page }, testInfo) => {
 	await page.setViewportSize({ width: 1280, height: 900 });
 	await page.goto('/fundus');
@@ -322,10 +565,12 @@ test('a show can be planned from a template with independent usages and reserve'
 	await expect(source).toHaveClass(/is-dragging/);
 	await expect(source).toHaveCSS('opacity', '0.45');
 	await emptyReactionTarget.dispatchEvent('drop', { dataTransfer });
-	await sourceDragHandle.dispatchEvent('dragend', { dataTransfer });
 	await dataTransfer.dispose();
 	await expect(reactionSection.locator('.editable-usage')).toHaveCount(1);
 	await expect(page.locator('body')).toHaveAttribute('data-builder-document', 'stable');
+	await expect(source).toHaveCount(0);
+	await page.getByLabel('Auch eingeplante Inhalte zeigen').check();
+	await expect(source).toContainText('Eingeplant');
 	await sourceDragHandle.dragTo(reactionSection.locator('.editable-usage'));
 
 	let usages = page
@@ -333,7 +578,41 @@ test('a show can be planned from a template with independent usages and reserve'
 		.filter({ has: page.getByRole('heading', { name: 'JC / Reaction' }) })
 		.locator('.editable-usage');
 	await expect(usages).toHaveCount(2);
-	await usages.nth(0).locator('summary').click();
+	await usages
+		.nth(0)
+		.getByRole('button', {
+			name: 'Die kleine Konsole mit dem großen Dreh bearbeiten und verschieben'
+		})
+		.click();
+	await expect(page.locator('dialog[open]')).toContainText('Sendungsspezifische Kopie');
+	const desktopEditorItems = await page
+		.locator('dialog[open] .usage-dialog-editor')
+		.evaluate((element) =>
+			Array.from(element.children)
+				.filter((child) => child.matches('section, button'))
+				.map((child) => child.getBoundingClientRect().top)
+		);
+	expect(Math.abs(desktopEditorItems[0] - desktopEditorItems[1])).toBeLessThan(2);
+	expect(desktopEditorItems[2]).toBeGreaterThan(desktopEditorItems[1]);
+	await page.screenshot({
+		path: testInfo.outputPath('verwendungseditor-desktop.png'),
+		fullPage: true
+	});
+	await page
+		.locator('dialog[open]')
+		.getByRole('button', { name: 'Aus Fundus aktualisieren' })
+		.click();
+	await expect(page.locator('dialog[open]')).toHaveCount(0);
+	usages = page
+		.locator('.run-section')
+		.filter({ has: page.getByRole('heading', { name: 'JC / Reaction' }) })
+		.locator('.editable-usage');
+	await usages
+		.nth(0)
+		.getByRole('button', {
+			name: 'Die kleine Konsole mit dem großen Dreh bearbeiten und verschieben'
+		})
+		.click();
 	await usages.nth(0).getByLabel('Titel').fill('Konsole als Auftakt');
 	await usages.nth(0).getByLabel('Dauer in Minuten').fill('5');
 	await usages.nth(0).getByLabel('Eigene Notizen').fill('Kurbel zuerst zeigen');
@@ -344,20 +623,51 @@ test('a show can be planned from a template with independent usages and reserve'
 		.locator('.run-section')
 		.filter({ has: page.getByRole('heading', { name: 'JC / Reaction' }) })
 		.locator('.editable-usage');
-	await usages.nth(1).locator('summary').click();
+	await usages
+		.nth(1)
+		.getByRole('button', {
+			name: 'Die kleine Konsole mit dem großen Dreh bearbeiten und verschieben'
+		})
+		.click();
 	await usages.nth(1).getByLabel('Titel').fill('Konsole als Rückblick');
 	await usages.nth(1).getByLabel('Dauer in Minuten').fill('15');
 	await usages.nth(1).getByLabel('Eigene Notizen').fill('Andere Perspektive');
 	await usages.nth(1).getByRole('button', { name: 'Verwendung speichern' }).click();
 	await expect(page.locator('.show-summary')).toContainText('2 Std. 25 Min.');
 
+	usages = page
+		.locator('.run-section')
+		.filter({ has: page.getByRole('heading', { name: 'JC / Reaction' }) })
+		.locator('.editable-usage');
+	await usages
+		.nth(1)
+		.getByRole('button', { name: 'Konsole als Rückblick bearbeiten und verschieben' })
+		.click();
+	await usages.nth(1).getByRole('button', { name: 'Duplizieren' }).click();
+	await expect(reactionSection.locator('.editable-usage')).toHaveCount(3);
+	await expect(reactionSection.locator('.editable-usage').nth(2)).toContainText(
+		'Konsole als Rückblick'
+	);
+	await expect(page.locator('.show-summary')).toContainText('2 Std. 40 Min.');
+
 	const planTimeBeforeReserve = await page.locator('.show-summary').textContent();
 	await source.getByLabel(/Ziel für/).selectOption('');
 	await source.getByRole('button', { name: 'Hinzufügen' }).click();
 	await expect(page.locator('.reserve-usage')).toHaveCount(1);
 	expect(await page.locator('.show-summary').textContent()).toBe(planTimeBeforeReserve);
+	await page
+		.locator('.reserve-usage')
+		.getByRole('button', {
+			name: 'Die kleine Konsole mit dem großen Dreh bearbeiten und verschieben'
+		})
+		.click();
+	await expect(page.locator('dialog[open]')).toContainText('Sendungsspezifische Kopie');
+	await expect(
+		page.locator('dialog[open]').getByRole('button', { name: 'Duplizieren' })
+	).toBeVisible();
+	await page.locator('dialog[open]').getByRole('button', { name: 'Editor schließen' }).click();
 
-	const moveUp = page.getByRole('button', { name: 'Konsole als Rückblick nach oben' });
+	const moveUp = page.getByRole('button', { name: 'Konsole als Rückblick nach oben' }).first();
 	await moveUp.focus();
 	await page.keyboard.press('Enter');
 	await expect(
@@ -384,12 +694,60 @@ test('a show can be planned from a template with independent usages and reserve'
 	await expect(page.locator('.reserve-usage')).toHaveCount(0);
 	await expect(page.locator('body')).toHaveAttribute('data-builder-document', 'stable');
 	await page.reload();
-	await expect(page.locator('.editable-usage')).toHaveCount(3);
+	await expect(page.locator('.editable-usage')).toHaveCount(4);
 	const savedUsage = page.locator('.editable-usage').filter({ hasText: 'Konsole als Auftakt' });
-	await savedUsage.locator('summary').click();
+	await savedUsage
+		.getByRole('button', { name: 'Konsole als Auftakt bearbeiten und verschieben' })
+		.click();
 	await expect(savedUsage.getByLabel('Eigene Notizen')).toHaveValue('Kurbel zuerst zeigen');
+	await page.locator('dialog[open]').getByRole('button', { name: 'Editor schließen' }).click();
+	const duplicatedUsage = page
+		.locator('.editable-usage')
+		.filter({ hasText: 'Konsole als Rückblick' });
+	await expect(duplicatedUsage).toHaveCount(2);
+	await duplicatedUsage
+		.nth(1)
+		.getByRole('button', { name: 'Konsole als Rückblick bearbeiten und verschieben' })
+		.click();
+	await expect(duplicatedUsage.nth(1).getByLabel('Dauer in Minuten')).toHaveValue('15');
+	await expect(duplicatedUsage.nth(1).getByLabel('Eigene Notizen')).toHaveValue(
+		'Andere Perspektive'
+	);
+	await page.locator('dialog[open]').getByRole('button', { name: 'Editor schließen' }).click();
 
 	await page.setViewportSize({ width: 390, height: 844 });
+	await savedUsage
+		.getByRole('button', { name: 'Konsole als Auftakt bearbeiten und verschieben' })
+		.click();
+	const mobileEditorItems = await page
+		.locator('dialog[open] .usage-dialog-editor')
+		.evaluate((element) =>
+			Array.from(element.children)
+				.filter((child) => child.matches('section, button'))
+				.map((child) => child.getBoundingClientRect().top)
+		);
+	expect(mobileEditorItems[1]).toBeGreaterThan(mobileEditorItems[0]);
+	expect(mobileEditorItems[2]).toBeGreaterThan(mobileEditorItems[1]);
+	await expectNoHorizontalOverflow(page);
+	await page.screenshot({
+		path: testInfo.outputPath('verwendungseditor-mobile.png'),
+		fullPage: true
+	});
+	await page
+		.locator('dialog[open]')
+		.getByRole('button', { name: 'Entfernen' })
+		.scrollIntoViewIfNeeded();
+	await expect(
+		page.locator('dialog[open]').getByRole('button', { name: 'Entfernen' })
+	).toBeVisible();
+	await page
+		.locator('dialog[open] form[action="?/updateUsage"] input[name="revision"]')
+		.evaluate((element) => ((element as HTMLInputElement).value = '1'));
+	await page.locator('dialog[open]').getByRole('button', { name: 'Verwendung speichern' }).click();
+	await expect(page.locator('dialog[open]').getByRole('alert')).toContainText(
+		'inzwischen geändert'
+	);
+	await page.locator('dialog[open]').getByRole('button', { name: 'Editor schließen' }).click();
 	await page.getByRole('button', { name: 'Ablauf', exact: true }).click();
 	await page.getByPlaceholder('Neuer Abschnitt').fill('Finales Spiel');
 	await page.getByRole('button', { name: 'Abschnitt hinzufügen' }).click();
@@ -397,7 +755,7 @@ test('a show can be planned from a template with independent usages and reserve'
 	await expectNoHorizontalOverflow(page);
 	await page.screenshot({ path: testInfo.outputPath('sendungsbau-mobile.png'), fullPage: true });
 
-	await page.goto('/fundus?q=kleine+Konsole');
+	await page.goto('/fundus?q=kleine+Konsole&includePlanned=1');
 	await expect(
 		page.getByRole('heading', { name: 'Die kleine Konsole mit dem großen Dreh' })
 	).toBeVisible();
@@ -430,7 +788,7 @@ test('all work areas fit at required widths in light and dark mode', async ({ pa
 test('long titles and longer fundus lists reflow without overflow', async ({ page }, testInfo) => {
 	await page.setViewportSize({ width: 1280, height: 900 });
 	await page.goto('/fundus');
-	await expect(page.locator('.piece-card')).toHaveCount(4);
+	await expect(page.locator('.piece-card')).toHaveCount(1);
 	await page.evaluate(() => {
 		const list = document.querySelector('.piece-grid');
 		const rows = Array.from(document.querySelectorAll('.piece-card'));
@@ -444,7 +802,7 @@ test('long titles and longer fundus lists reflow without overflow', async ({ pag
 		}
 	});
 
-	await expect(page.locator('.piece-card')).toHaveCount(16);
+	await expect(page.locator('.piece-card')).toHaveCount(4);
 	await expectNoHorizontalOverflow(page);
 	await page.setViewportSize({ width: 390, height: 844 });
 	await expectNoHorizontalOverflow(page);
@@ -486,12 +844,71 @@ test('inbox, archive and administration stay concise', async ({ page }) => {
 	expect(boxes[1]?.y).toBe(boxes[2]?.y);
 });
 
+test('validated YouTube and TikTok players switch without exposing private fields', async ({
+	page
+}, testInfo) => {
+	addPresentationFixture();
+	try {
+		await page.context().route('https://www.youtube-nocookie.com/**', (route) =>
+			route.fulfill({
+				contentType: 'text/html',
+				body: '<!doctype html><title>YouTube Test</title>'
+			})
+		);
+		await page.context().route('https://www.tiktok.com/player/**', (route) =>
+			route.fulfill({
+				contentType: 'text/html',
+				body: '<!doctype html><title>TikTok Test</title>'
+			})
+		);
+		await page.goto('/live?show=e2e-presentation');
+		const popupPromise = page.waitForEvent('popup');
+		await page.getByRole('button', { name: 'Präsentationsfenster öffnen' }).click();
+		const output = await popupPromise;
+		await output.waitForLoadState('networkidle');
+		await expect(output.getByText('Bereit für den nächsten Inhalt')).toBeVisible();
+
+		await page.getByRole('button', { name: 'YouTube Kurzlink präsentieren' }).click();
+		const youtube = output.locator('iframe[title="YouTube Vorschau"]');
+		await expect(youtube).toHaveAttribute(
+			'src',
+			'https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ?start=75'
+		);
+		await expect(output.locator('.output-connection')).toHaveClass(/sr-only/);
+		const publicState = await output.evaluate(async () =>
+			JSON.stringify(await fetch(`${location.pathname}/state`).then((response) => response.json()))
+		);
+		expect(publicState).not.toContain('PRIVATE_RESEARCH');
+		expect(publicState).not.toContain('PRIVATE_MODERATION');
+
+		await page.getByRole('button', { name: 'TikTok Hochformat präsentieren' }).click();
+		await expect(youtube).toHaveCount(0);
+		await expect(output.locator('iframe[title="TikTok Vorschau"]')).toHaveAttribute(
+			'src',
+			'https://www.tiktok.com/player/v1/6718335390845095173?autoplay=0&controls=1'
+		);
+		await expect(output.getByRole('link', { name: 'Original öffnen' })).toHaveAttribute(
+			'href',
+			'https://www.tiktok.com/@scout2015/video/6718335390845095173'
+		);
+		await output.setViewportSize({ width: 390, height: 844 });
+		await expectNoHorizontalOverflow(output);
+		await output.screenshot({
+			path: testInfo.outputPath('heinzlive-video-mobile.png'),
+			fullPage: true
+		});
+		await output.close();
+	} finally {
+		removePresentationFixture();
+	}
+});
+
 test('live control persists state and exposes only explicit presentation data', async ({
 	page,
 	browser
 }, testInfo) => {
 	await page.setViewportSize({ width: 1280, height: 900 });
-	await page.goto('/fundus?q=kleine+Konsole');
+	await page.goto('/fundus?q=kleine+Konsole&includePlanned=1');
 	await page.getByRole('heading', { name: 'Die kleine Konsole mit dem großen Dreh' }).click();
 	const png = Buffer.from(
 		'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=',
@@ -607,16 +1024,26 @@ test('pieces autosave safely, detect conflicts and protect uploaded images', asy
 	await expect(page).toHaveURL(/\/fundus$/);
 	await page.getByRole('heading', { name: 'E2E Fundstück mit Markdown' }).click();
 	await expect(page).toHaveURL(pieceUrl);
+	await page.getByText('Status, Dauer und Einordnung').click();
 	await page
 		.getByLabel('Kurzbeschreibung')
 		.fill('Persistiert nach Neuladen und ist gezielt suchbar.');
 	await page.getByLabel('Status').selectOption('ready');
 	await page.getByLabel('Dauer in Minuten').fill('10.25');
 	await page.getByLabel('Gaming').check();
+	await openEditorialField(page, 'Private Recherche');
 	await page.getByLabel('Private Recherche').fill('Nur intern: **Hintergrund prüfen**.');
+	await openEditorialField(page, 'Moderationsstichpunkte');
+	await page.getByLabel('Moderationsstichpunkte').fill('Den Kern in zwei Sätzen erklären.');
+	await openEditorialField(page, 'Private Recherche');
+	await expect(page.getByLabel('Private Recherche')).toHaveValue(
+		'Nur intern: **Hintergrund prüfen**.'
+	);
+	await openEditorialField(page, 'Präsentationstext');
 	await page
-		.getByLabel('Präsentationstext')
+		.getByLabel('Öffentlicher Text')
 		.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();
 	const source = page.locator('.source-row').last();
 	await source.getByLabel('Name').fill('Originalbeitrag');
@@ -625,11 +1052,14 @@ test('pieces autosave safely, detect conflicts and protect uploaded images', asy
 	await expect(page.locator('.save-indicator')).toContainText('Gespeichert', { timeout: 10_000 });
 	await page.waitForTimeout(1_200);
 	await expect(page.locator('.save-indicator')).toContainText('Gespeichert');
-	await expect(page.locator('.markdown-preview script')).toHaveCount(0);
+	await openEditorialField(page, 'Präsentationstext');
-	await expect(page.locator('.markdown-preview').last()).toContainText('Sichere Vorschau');
+	await expect(page.locator('.piece-presentation-preview script')).toHaveCount(0);
+	await expect(page.locator('.piece-presentation-preview')).toContainText('Sichere Vorschau');
 	await page.reload();
 	await expect(page.getByLabel('Titel')).toHaveValue('E2E Fundstück mit Markdown');
+	await page.getByText('Status, Dauer und Einordnung').click();
 	await expect(page.getByLabel('Dauer in Minuten')).toHaveValue('10.25');
+	await openEditorialField(page, 'Private Recherche');
 	await expect(page.getByLabel('Private Recherche')).toHaveValue(
 		'Nur intern: **Hintergrund prüfen**.'
 	);
@@ -660,6 +1090,7 @@ test('pieces autosave safely, detect conflicts and protect uploaded images', asy
 	await concurrent.goto(pieceUrl);
 	await page.getByLabel('Titel').fill('E2E Fundstück, extern aktualisiert');
 	await expect(page.locator('.save-indicator')).toContainText('Gespeichert', { timeout: 10_000 });
+	await concurrent.getByText('Status, Dauer und Einordnung').click();
 	await concurrent
 		.getByLabel('Kurzbeschreibung')
 		.fill('Diese veraltete Änderung darf nicht gewinnen.');
@@ -668,6 +1099,7 @@ test('pieces autosave safely, detect conflicts and protect uploaded images', asy
 	});
 	await concurrent.reload();
 	await expect(concurrent.getByLabel('Titel')).toHaveValue('E2E Fundstück, extern aktualisiert');
+	await concurrent.getByText('Status, Dauer und Einordnung').click();
 	await expect(concurrent.getByLabel('Kurzbeschreibung')).not.toHaveValue(
 		'Diese veraltete Änderung darf nicht gewinnen.'
 	);
@@ -692,12 +1124,126 @@ test('pieces autosave safely, detect conflicts and protect uploaded images', asy
 		'Kopie von E2E Fundstück, extern aktualisiert'
 	);
 
+	await page.context().setOffline(true);
+	await page.getByLabel('Titel').fill('Kopie mit unterbrochener Verbindung');
+	await expect(page.locator('.save-indicator')).toContainText('Speichern fehlgeschlagen', {
+		timeout: 10_000
+	});
+	await page.context().setOffline(false);
+	await page.getByRole('button', { name: 'Jetzt speichern' }).click();
+	await expect(page.locator('.save-indicator')).toContainText('Gespeichert', { timeout: 10_000 });
+
 	await page.setViewportSize({ width: 390, height: 844 });
 	await setTheme(page, 'dark');
 	await page.reload();
+	await page.getByRole('button', { name: 'Recherche & Quellen' }).click();
+	await expect(page.getByRole('heading', { name: 'Quellen', exact: true })).toBeVisible();
 	await expectNoHorizontalOverflow(page);
 	await page.screenshot({
 		path: testInfo.outputPath('piece-editor-mobile-dark.png'),
 		fullPage: true
 	});
 });
+
+test('a quickly captured video can be written and previewed before classification', async ({
+	page
+}) => {
+	await page.context().route('https://www.youtube-nocookie.com/**', (route) =>
+		route.fulfill({
+			contentType: 'text/html',
+			body: '<!doctype html><title>YouTube Test</title>'
+		})
+	);
+	await page.goto('/eingang');
+	await page.getByLabel('Gedanke').fill('Schnelles Video-Fundstück');
+	await page.getByLabel('Link').fill('https://youtu.be/dQw4w9WgXcQ');
+	await page.getByRole('button', { name: 'Im Eingang ablegen' }).click();
+	await expect(page).toHaveURL(/\/eingang(?:\?\/capture)?$/);
+	await page.locator('.inbox-item').filter({ hasText: 'Schnelles Video-Fundstück' }).click();
+	await page.getByRole('button', { name: 'Recherche & Quellen' }).click();
+	await expect(page.locator('.source-row').getByLabel('URL')).toHaveValue(
+		'https://youtu.be/dQw4w9WgXcQ'
+	);
+	await expect(page.getByLabel('Status')).toBeHidden();
+
+	await openEditorialField(page, 'Private Recherche');
+	await page
+		.getByLabel('Private Recherche')
+		.fill('Warum funktioniert der Einstieg so unmittelbar?');
+	await openEditorialField(page, 'Moderationsstichpunkte');
+	await page
+		.getByLabel('Moderationsstichpunkte')
+		.fill('Erst Clip zeigen, dann die Beobachtung öffnen.');
+
+	await page.getByRole('button', { name: 'Präsentation', exact: true }).click();
+	await page.getByLabel('Video').check();
+	await page.getByRole('combobox', { name: 'Quelle', exact: true }).selectOption('0');
+	await expect(page.locator('.save-indicator')).toContainText('Gespeichert', { timeout: 10_000 });
+
+	const previewPromise = page.waitForEvent('popup');
+	await page.getByRole('link', { name: 'In neuem Fenster testen' }).click();
+	const preview = await previewPromise;
+	await expect(preview.locator('iframe[title="Schnelles Video-Fundstück"]')).toHaveAttribute(
+		'src',
+		'https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ'
+	);
+	await preview.close();
+
+	await page.setViewportSize({ width: 390, height: 844 });
+	await page.getByRole('button', { name: 'Präsentation', exact: true }).click();
+	await expect(page.getByLabel('Video')).toBeVisible();
+	await page.getByRole('button', { name: 'Recherche & Quellen' }).click();
+	await expect(page.getByLabel('Private Recherche')).toBeVisible();
+	await expectNoHorizontalOverflow(page);
+});
+
+test('link preview uses one existing source, persists manual fields and isolates its test view', async ({
+	page
+}, testInfo) => {
+	await page.goto('/fundus/piece-console');
+	await page.getByRole('button', { name: 'Präsentation', exact: true }).click();
+	await page.getByLabel('Linkvorschau').check();
+	await page.getByRole('combobox', { name: 'Quelle', exact: true }).selectOption('0');
+	await page.getByLabel('Titel', { exact: true }).last().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 });
+	await page.reload();
+	await page.getByRole('button', { name: 'Präsentation', exact: true }).click();
+	await expect(page.getByLabel('Linkvorschau')).toBeChecked();
+	await expect(page.getByLabel('Titel', { exact: true }).last()).toHaveValue(
+		'Manuell korrigierte Linkvorschau'
+	);
+
+	const previewPromise = page.waitForEvent('popup');
+	await page.getByRole('link', { name: 'In neuem Fenster testen' }).click();
+	const preview = await previewPromise;
+	await preview.waitForLoadState('networkidle');
+	await expect(preview.getByText('Isolierte Testansicht')).toBeVisible();
+	await expect(
+		preview.getByRole('heading', { name: 'Manuell korrigierte Linkvorschau' })
+	).toBeVisible();
+	await expect(preview.getByText('Ein kurzer manueller Anreißer ohne Vorschaubild.')).toBeVisible();
+	await expect(preview.locator('.output-link-image')).toHaveCount(0);
+	await preview.screenshot({
+		path: testInfo.outputPath('linkvorschau-desktop.png'),
+		fullPage: true
+	});
+	await preview.setViewportSize({ width: 390, height: 844 });
+	await expectNoHorizontalOverflow(preview);
+	await preview.screenshot({
+		path: testInfo.outputPath('linkvorschau-mobile.png'),
+		fullPage: true
+	});
+	await preview.close();
+
+	await page.getByRole('button', { name: 'Recherche & Quellen' }).click();
+	await page.locator('.source-row').first().getByLabel('URL').fill('http://127.0.0.1/private');
+	await expect(page.locator('.save-indicator')).toContainText('Gespeichert', { timeout: 10_000 });
+	await page.getByRole('button', { name: 'Präsentation', exact: true }).click();
+	const blockedPreview = page.waitForResponse((response) =>
+		response.url().includes('?/loadPreview')
+	);
+	await page.getByRole('button', { name: 'Vorschau laden' }).click();
+	expect((await blockedPreview).status()).toBe(400);
+	await expect(page.getByRole('alert')).toContainText('Interne oder private Netzwerkziele');
+});