release: add post-production workspace 0.9.0

CloudronManifest.json

@@ -3,7 +3,7 @@
 	"title": "Sendewerk",
 	"description": "Redaktionelle Planung und Durchführung von heinzlive-Sendungen.",
 	"tagline": "Vom Fundstück bis zur Livesendung",
-	"version": "0.8.1",
+	"version": "0.9.0",
 	"healthCheckPath": "/healthz",
 	"httpPort": 3000,
 	"addons": {

docs/ACCEPTANCE.md

@@ -1,5 +1,109 @@
 # Abnahme
 
+## Einheitliche Inhaltswerkbänke 0.9.0
+
+| Bereich                             | Nachweis                                                                                                                                        | Stand                 |
+| ----------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
+| Gemeinsame Übersichtshierarchie     | Pieces, Eingang und Post zeigen Navigation/Quellen, mittlere Auswahl und rechte Schnellbearbeitung aus denselben Layoutgrundlagen               | erfüllt am 29.10.2026 |
+| Piece-Schnellbearbeitung            | Titel, Kurzbeschreibung, Einleitung, Moderation, Status, Dauer, Format und Bild-Upload speichern revisionsgeschützt; Voll-Editor öffnet separat | erfüllt am 29.10.2026 |
+| Getrennte RSS-Sichtung              | RSS-Vorschau, Originallink, Übernehmen und Verwerfen bleiben vor der bewussten Piece-Erzeugung getrennt                                         | erfüllt am 29.10.2026 |
+| Post ohne zweite Sendungsverwaltung | Übersicht beginnt bei abgeschlossenen Streams; Vollbearbeitung verwendet vorhandene Post- und Streamdienste                                     | erfüllt am 29.10.2026 |
+| Eigenständige Vollbearbeitung       | Piece bleibt modal; Post besitzt eine normale eigene Seite im Streams-Layout mit Streamkopf, Zurücklink und Schnellnavigation                   | erfüllt am 30.10.2026 |
+| Einheitliche Auswahlflächen         | Aktive Karten, Checkboxen und Radios folgen Streams: abgerundete ruhige Fläche mit dünner goldener Kontur, ohne Cyan-Füllung oder Seitenbalken  | erfüllt am 30.10.2026 |
+| Responsive Gestaltung               | Chromium prüft Übersichten bei 1440 × 1000, 960 × 900 und 390 × 844 sowie Piece-Overlay und Post-Detailseite ohne horizontalen Überlauf         | erfüllt am 30.10.2026 |
+| Bestehende Fachgrenzen              | Autosave, Revisionen, Medien, RSS-Import, Stream-/Live-Snapshots, Post-Exporte, Rechte und private Dateien bleiben erhalten                     | erfüllt am 29.10.2026 |
+| Live als Nur-Lesen-Projektion       | Normale Navigation, Streamkopf und drei Pane-Flächen; Auswahl und Darstellung ändern nachweislich weder Show-/Usage-Status noch Reihenfolge     | erfüllt am 30.10.2026 |
+| Verbindliches Seitenraster          | Linke Spalte beginnt oben; freier Seitenkopf und darunter liegende Inhalts-/Inspectorflächen nutzen in allen Werkbänken dieselben Maße          | erfüllt am 30.10.2026 |
+| Reduzierte App-Bewegung             | Piece-Overlay schließt nach echtem Animationsende; Dialog-/Pane-Wechsel bleiben unter 200 ms und respektieren reduzierte Bewegung               | erfüllt am 30.10.2026 |
+
+- Gezielte Chromium-Abläufe für Piece-Auswahl, RSS, Schnellaufnahme,
+  Piece-Autosave/Präsentationsmodus, Streamplanung und Postproduktion: erfolgreich.
+- Desktop-, Zwischenbreiten- und Mobilaufnahmen der drei Übersichten sowie der
+  Piece- und Post-Vollbearbeitung wurden erzeugt und visuell kontrolliert.
+- Korrekturstand 30.10.2026: Post-Navigation, Piece-/Post-Schnellinspektoren und
+  Post-Vollbearbeitung verwenden nachweislich die Stream-Basisklassen. Gezielte
+  Chromium-Abläufe für Fundus und Post liefen erfolgreich; die Aufnahmen bei
+  1440, 960 und 390 Pixeln wurden erneut visuell kontrolliert.
+- Die vollständige Chromium-Matrix bedient die vorhandenen Checkboxen und Radios
+  weiterhin über ihre native Semantik. Post-Detailübersicht ohne Auswahl und
+  mobile Schnellnavigation wurden separat aufgenommen und visuell kontrolliert.
+- `npm run lint`: erfolgreich.
+- `npm run check`: 0 Fehler und 0 Warnungen.
+- `npm test`: 69 von 69 Verhaltenstests erfolgreich.
+- `npm run build`: erfolgreich mit `@sveltejs/adapter-node`.
+- `npm run test:e2e`: 22 von 22 Chromium-Abläufen erfolgreich.
+- Live-Nur-Lesen-Test: Desktop-, Kompakt- und Mobilansicht erfolgreich; lokale
+  Auswahl, Vor/Zurück, Präsentieren, Darstellungswechsel und ein abgewiesener
+  Status-POST ließen Show-/Usage-Status und Reihenfolge unverändert.
+- Safari und echte Mobilgeräte: nicht verfügbar und deshalb offen.
+
+## Postproduktion 0.9.0
+
+| Bereich                           | Nachweis                                                                                                                                                            | Stand                 |
+| --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
+| Bestehende abgeschlossene Streams | `/post` zeigt ausschließlich vorhandene Streams mit Status `completed`; Suche, Sortierung und Fortschrittsfilter erzeugen keine zweite Sendung                      | erfüllt am 29.10.2026 |
+| Responsive Arbeitsfläche          | Chromium prüft die normale Detailseite mit drei Desktopspalten und mobiler Umschaltung zwischen Inhalte, Bearbeiten und Details ohne Überlauf                       | erfüllt am 30.10.2026 |
+| Stream-artige Gestaltung          | Detailkopf, Datumszeile, Formfelder, Radien, Abstände und aktive Auswahl entsprechen unmittelbar der Streams-Referenz                                               | erfüllt am 30.10.2026 |
+| Direkte Streamwerkbank            | Klick auf Streamzeile oder Öffnen-Aktion führt direkt zur Werkbank; ohne Einzelwahl erscheinen Inhaltsübersicht und Streammetadaten                                 | erfüllt am 30.10.2026 |
+| Schnelle Inhaltsnavigation        | Links stehen YouTube, Social-Clips und Twitch-Highlights mit Sofortanlage; aktive Inhalte wechseln farblich markiert in den Editor                                  | erfüllt am 30.10.2026 |
+| Aufzeichnungen und Kontext        | Mehrere Teile und Markdown-Dateien sind persistent; SHA-256-Dublettenschutz, unveränderter Inhalt und konservative Zeitmarkenextraktion sind im Servicetest geprüft | erfüllt am 29.10.2026 |
+| YouTube-Uncuts                    | Beschreibung, Titelvarianten, Thumbnailkonzept, private echte Bilddatei, Auswahl, Download, Status und Veröffentlichungsdaten sind verfügbar                        | erfüllt am 29.10.2026 |
+| Social-Clips                      | Beliebig viele Clips führen Shorts-Titel, gemeinsame TikTok-/Instagram-Caption samt Hashtags, Hooks, Endcards, Ziele, Untertitel und Schnittdaten                   | erfüllt am 30.10.2026 |
+| Kontextbezogene Zuordnung         | Eine einzige Kontextdatei wird automatisch gesetzt; Piece-Optionen stammen ausschließlich aus tatsächlichen Verwendungen des geöffneten Streams                     | erfüllt am 30.10.2026 |
+| Twitch-Highlights                 | Eigenständiger Typ mit Beschreibung, Originaltranskript, Zeitbereich, Schnitt- und Veröffentlichungsdaten                                                           | erfüllt am 29.10.2026 |
+| Status ohne Aufgaben/Analytics    | Revisionierter Workflow Entwurf bis Veröffentlicht; keine Aufgaben-, Kennzahlen- oder Publikationsautomatik                                                         | erfüllt am 29.10.2026 |
+| Private Dateien                   | Kontextdateien und Thumbnails liegen im konfigurierten Uploadpfad und werden ausschließlich über authentifizierte, private Routen ausgeliefert                      | erfüllt am 29.10.2026 |
+| Valide Exporte                    | Servicetests blockieren unvollständige Resolve-/SRT-Daten; Chromium lädt XML und SRT erst mit allen technisch erforderlichen Werten                                 | erfüllt am 29.10.2026 |
+| Manueller KI-unabhängiger Ablauf  | Kein Netzwerkaufruf und keine Scheinaktion; providerneutraler Adaptervertrag bleibt unkonfiguriert und der gesamte Ablauf manuell bedienbar                         | erfüllt am 29.10.2026 |
+| Bestehende Abläufe                | Vollständige Verhaltenstest- und Chromium-Matrix für Pieces, Streams, Live, Abschluss, Freigaben, RSS, Rechte und Präsentation bleibt erfolgreich                   | erfüllt am 29.10.2026 |
+
+- `npm run lint`: erfolgreich.
+- `npm run check`: 0 Fehler und 0 Warnungen.
+- `npm test`: 69 von 69 Verhaltenstests erfolgreich.
+- `npm run build`: erfolgreich mit `@sveltejs/adapter-node`.
+- `npm run test:e2e`: 22 von 22 Chromium-Abläufen erfolgreich.
+- Gezielter Post-Lauf nach der CSS-Korrektur: 1 von 1 erfolgreich; Registerwechsel
+  explizit per Mausklick geprüft. Desktop- und Mobilaufnahmen einschließlich
+  inhaltsloser Übersicht und mobiler Schnellnavigation visuell kontrolliert.
+- `git diff --check`: erfolgreich.
+- Safari, echte Mobilgeräte, Import realer heinzlive-Kontextdateien, Öffnen in
+  DaVinci Resolve und eine reale KI-Schreibschnittstelle: mangels Umgebung offen.
+
+## Piece-Schreibraum 0.8.2
+
+| Bereich                       | Nachweis                                                                                                                                  | Stand                 |
+| ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
+| Zusammenhängendes Dokument    | Vier getrennt gespeicherte Bereiche ohne Einzelkarten; nur Fokus zeigt Werkzeuge, Auswahl bleibt beim Formatieren erhalten                | erfüllt am 28.10.2026 |
+| Recherche und Markdown        | Bereichswechsel erhält Eingaben; Recherche, Quellen, Zeitmarken, Werkzeuge und Markdown-Quellansicht bleiben vollständig                  | erfüllt am 28.10.2026 |
+| Kontextbezogene Piece-Liste   | Editor zeigt gefilterte Liste, aktuelle Markierung, Suche/Filter und Rücksprung; schmutziger Wechsel speichert vor Navigation             | erfüllt am 28.10.2026 |
+| Kompakte Details und Ausgabe  | Häufige Werte sind direkt editierbar, seltene eingeklappt; Moduswahl und editierbare Publikumsvorschau liegen sichtbar darunter           | erfüllt am 28.10.2026 |
+| Kopf und Aktionen             | Speicherstatus/-aktion und Favorit sind kompakt; Vorlagen, Duplikation und bestätigte destruktive Aktionen liegen im Menü                 | erfüllt am 28.10.2026 |
+| Kopf unter schmaler Breite    | Titel, Favorit, Speicher-/Aktionssteuerung und Bereichsauswahl belegen getrennte Zeilen ohne Abschneiden                                  | erfüllt am 28.10.2026 |
+| Responsive Gestaltung         | Chromium prüft 1440 × 1000 offen/eingeklappt, 960 × 900 sowie mobilen Streamtext, Piece-Drawer und Details ohne Überlauf                  | erfüllt am 28.10.2026 |
+| Eingeklappte Zwischenbreite   | Bei 960 × 900 wächst die Editorroute mit eingeklappter Navigation über 820 Pixel; Icons sind mindestens 16 Pixel groß, Version sichtbar   | erfüllt am 28.10.2026 |
+| Piece-Liste und Streamplan    | Scrollgutter hält die Piece-Markierung bündig; der Streamplan zeigt rechts den Inspector in derselben kompakten Breitenklasse             | erfüllt am 28.10.2026 |
+| Kontextbezogener Inspector    | Ohne Auswahl erscheinen Stream-/Twitch-Daten; Abschnitt und Piece wechseln per Klick zu ihren Metadaten und festen Speicheraktionen       | erfüllt am 28.10.2026 |
+| Sichere Usage-Schnelländerung | Titel, Publikumstitel, Dauer, Vorbereitung und Notizen speichern revisionsgeschützt, ohne Langtexte oder Präsentationswerte zu leeren     | erfüllt am 28.10.2026 |
+| Responsive Streamdetails      | Desktop hält Ablauf und Inspector nebeneinander; schmalere Ansichten bieten Details als dritten tastatur- und touchfähigen Arbeitsbereich | erfüllt am 28.10.2026 |
+| Live-Regie                    | Chromium prüft Dokument, flachen Ablauf ohne Aktionsüberlagerung, feste Steuerung, 900/670 × 450 und mobiles Ablauf-Sheet                 | erfüllt am 28.10.2026 |
+| Bestehende Fachgrenzen        | Autosave, Revisionen, Medien, Stream-Snapshots, globale Navigation und benachbarte Arbeitsbereiche bleiben unverändert                    | erfüllt am 28.10.2026 |
+
+- Gezielte Chromium-Abläufe für Schreibraum, Auswahl erhaltende Formatierung,
+  Autosave-Piece-Wechsel, Konflikte, öffentliche Überschrift, Upload,
+  Link-/Videopräsentation und mobile Ansichtswechsel: erfolgreich.
+- Sichtkontrolle der korrigierten Geometrie bei 1440 × 1000 mit ausgeklappter
+  und eingeklappter Navigation, bei 960 × 900, im Streamplan-Inspector sowie in
+  der Live-Regie bei 1440 × 900, 900/670 × 450 und 390 × 700: erfolgreich;
+  Desktop-, Streamtext-, Drawer-, Inspector- und Live-Screenshots wurden
+  erzeugt und kontrolliert.
+- `npm run lint`: erfolgreich.
+- `npm run check`: 0 Fehler und 0 Warnungen.
+- `npm test`: 64 von 64 Verhaltenstests erfolgreich.
+- `npm run build`: erfolgreich mit `@sveltejs/adapter-node`.
+- `npm run test:e2e`: 22 von 22 Chromium-Abläufen erfolgreich.
+- `git diff --check`: erfolgreich.
+- Safari und echte Mobilgeräte: nicht verfügbar und deshalb offen.
+
 ## Redaktionelle Werkbänke 0.8.1
 
 | Bereich                 | Nachweis                                                                                                                                | Stand                 |

docs/ARCHITECTURE.md

@@ -21,8 +21,8 @@ spätere API dieselben Regeln verwenden.
 
 ## Navigation, Suche und Arbeitsflächen
 
-`+layout.svelte` stellt für angemeldete Nutzer genau die globalen Bereiche Start,
+`+layout.svelte` stellt für angemeldete Nutzer die globalen Bereiche Start,
-Eingang, Pieces, Streams und Live bereit. Desktop verwendet eine horizontale
+Eingang, Pieces, Streams, Live und Post bereit. Desktop verwendet eine horizontale
 Kopfzeile, Mobilgeräte eine obere Such-/Kontoleiste und eine Safe-Area-fähige
 Bottom-Navigation. `UserMenu.svelte` bündelt Verwaltung, Abmeldung und die weiter
 in `localStorage` gespeicherte explizite Auswahl Hell, Dunkel oder System.
@@ -48,11 +48,14 @@ eigener globaler Archivbereich behandelt, sondern von `listShows()` in der
 Streamübersicht gefiltert. Der technische `/archiv`-Pfad bleibt für archivierte
 und gelöschte Pieces bestehen.
 
-Der Usage-Editor verwendet weiterhin `PieceEditorDialog` und dieselben
+`StreamInspector.svelte` ist die dauerhafte rechte Projektion des Streamplans.
-Form-Actions. Auf breiten Ansichten öffnet das Dialogelement nicht-modal als
+Seine flüchtige Auswahl referenziert Show, Abschnitt oder Usage nur über stabile
-rechte Arbeitsleiste; ohne ausgewählte Usage wird es nicht gerendert. Unterhalb
+IDs. Der Standardzustand bearbeitet Show- und Twitch-Metadaten; Abschnitt und
-der mobilen Grenze öffnet dieselbe Komponente modal und nutzt den verfügbaren
+Usage verwenden ihre bestehenden revisionsgeschützten Actions. Die zusätzliche
-Viewport.
+Action `updateUsageMetadata` liest die aktuelle Usage serverseitig und führt
+nicht dargestellte Langtexte, Präsentationswerte, Medien und Werkzeuge in
+`updatePieceUsage()` unverändert mit. Ein schmales Clientformular kann private
+Felder daher weder versehentlich leeren noch die Geschäftsvalidierung umgehen.
 
 Seit 0.8.1 liest `/suche` die optionalen URL-Filter `type`, `status`, `topic`
 und `format` serverseitig. Themen und Formate stammen direkt aus den bestehenden
@@ -60,11 +63,25 @@ Taxonomietabellen; Piece-Filter wirken nicht auf Streams. Die Trefferprojektion
 und ihre begrenzten Ausschnitte bleiben unverändert, es entsteht weder ein
 Suchindex noch persistenter Filterzustand.
 
-Die Piece-, Planungs- und Live-Arbeitsflächen ändern ausschließlich ihre
+Die Piece-, Eingangs-, Post-, Planungs- und Live-Arbeitsflächen verwenden eine
-Darstellung. Im Streamplan ist der Ablauf die Hauptfläche und die Piece-Auswahl
+gemeinsame Oberflächensprache. Pieces, Eingang und Post teilen die Klasse `unified-workspace`:
-eine bei Bedarf geöffnete Nebenspalte. Dieselben Formulare, Revisionen,
+links Navigation oder Quellen, mittig die auswählbare Inhaltsprojektion und
-Drag-Daten, Fokusgrenzen und mobilen Pane-/Sheet-Zustände bleiben die
+rechts `content-quick-inspector` für häufige Felder und Aktionen. Die Auswahl ist
-Interaktionsgrenze.
+flüchtiger URL- beziehungsweise Browserzustand und erzeugt kein Fachobjekt. Im Streamplan ist der Ablauf die Hauptfläche, der Inspector die
+dauerhafte rechte Metadatenspalte und die Piece-Auswahl eine bei Bedarf geöffnete
+Nebenspalte. Eine Auswahl schließt diese temporäre Bibliothek. Unterhalb der
+Desktopbreite sind Pieces, Ablauf und Details gleichwertige Pane-Zustände.
+Revisionen, Drag-Daten und Fokusgrenzen bleiben die Interaktionsgrenze. Live ist
+eine reguläre Seite der App-Shell und projiziert Ablauf, Moderationsdokument und
+Details ausschließlich lesend. Die lokale Piece-Auswahl und Darstellungsoptionen
+ändern weder den tatsächlichen Live-Stand noch Usage-Status, Reihenfolge, Timer
+oder öffentliche Ausgabe.
+
+Die gemeinsamen Klassen sind bewusst keine bloße Rasterabstraktion. Pieces und
+Post verwenden für linke Kataloge dieselbe `fundus-navigation`-Basis wie Streams
+und für rechte Projektionen `stream-inspector` zusammen mit `builder-pane`.
+Dadurch bleiben Kopf, Formularrhythmus, Scrollgrenze und Aktionsfuß identisch.
+Post ergänzt nur fachliche Felder und eine kompakte Inhaltswerkzeugzeile.
 
 ## Laufzeit und Speicher
 
@@ -95,6 +112,7 @@ technische API. Folgende Grenzen gelten für umgesetzte und spätere Bereiche.
 | Freigaben   | widerrufbare, gehashte Lesetokens mit Sendung, Umfang, Passwortoption und Ablaufzeit                                                        |
 | RSS         | Feedquellen, Abrufläufe und externe Einträge mit stabiler Herkunfts-ID sowie Status neu/übernommen/verworfen                                |
 | API/Audit   | technische Berechtigungen, Idempotenzschlüssel und Audit-Ereignisse mit Akteur, Aktion und Ziel                                             |
+| Post        | Aufzeichnungsteile, private Markdown-Quellen, revisionierte YouTube-/Clip-/Highlight-Elemente, Thumbnails und valide Exporte                |
 | Betrieb     | Anwendungseinstellungen und spätere Job-Zustände, keine Geheimnisse im Klartext ohne begründete Schutzstrategie                             |
 
 ### Historien- und Kopierregel
@@ -424,9 +442,52 @@ Sendungsroute bindet Mutationen zusätzlich an ihre eigene Sendungs-ID. Die
 Verwaltung gruppiert bestehende Freigaben nach Sendung und zeigt deren aktuellen
 Status und Termin.
 
+## Postproduktion
+
+`src/lib/server/post.ts` ist die gemeinsame Geschäftsgrenze für den Hauptbereich
+`/post`. Jede Übersicht beginnt bei `shows.status = 'completed'`; Post besitzt
+keine eigene Sendungsidentität und kann weder Entwürfe noch laufende Streams
+nachträglich als abgeschlossen markieren. `post_items` hält gemeinsame Identität,
+Typ, Workflowstatus, Herkunft, Position und Revision. Typbezogene 1:1-Tabellen
+speichern YouTube-, Social-Clip- oder Twitch-Highlight-Felder.
+
+Migration `0022_post_quick_workbench.sql` ergänzt `social_caption` an
+`post_social_clips` und führt vorhandene TikTok-/Instagram-Captions und Hashtags
+verlustarm in das gemeinsame Feld über. YouTube Shorts verwendet im aktuellen
+Formvertrag ausschließlich `shorts_title`; TikTok und Instagram teilen die
+Caption inklusive Hashtags. Die älteren Spalten bleiben für die additive
+Migration bestehen, werden von der neuen Oberfläche aber nicht mehr getrennt
+bearbeitet.
+
+`post_recording_parts` beschreibt mehrere Teile einer Aufzeichnung. Medienpfade
+sind redaktionelle Verweise und müssen für Resolve-Export absolut oder als
+`file://` angegeben sein; Framerate und Timebase werden separat validiert.
+`post_source_files` speichert Originalinhalt, privaten zufälligen Speichernamen,
+SHA-256, Größe sowie ausschließlich aus tatsächlich gefundenen Zeilen abgeleitete
+Transkript- und Zeitmarkenprojektionen. `(show_id, sha256)` verhindert Dubletten
+innerhalb einer Sendung, ohne Dateien sendungsübergreifend zusammenzuführen.
+
+Kontextdateien und `post_thumbnails` liegen im konfigurierten Uploadverzeichnis.
+Die Routen unter `/post/[id]/source` und `/post/[id]/thumbnail` verlangen eine
+Redaktionssitzung, prüfen die Zuordnung zur abgeschlossenen Sendung und liefern
+private Sicherheitsheader. Originalnamen sind Metadaten und niemals Pfade. Pro
+YouTube-Element kann ein Thumbnail ausdrücklich ausgewählt werden.
+
+Exporte unter `/post/[id]/export` lesen dieselbe positiv validierte Projektion.
+Resolve-XML benötigt Aufzeichnungspfad, Framerate, Timebase und einen positiven
+Start-/Endbereich. SRT wird cueweise vollständig geprüft; unvollständige Daten
+führen zu `EXPORT_NOT_READY` statt zu einer scheinbar gültigen Datei. Text- und
+JSON-Exporte erzeugen keine externe Veröffentlichung.
+
+`src/lib/server/post-ai.ts` enthält nur Typen für einen später konfigurierbaren
+Provideradapter. Es gibt weder Netzwerkaufruf noch automatisch erzeugten Inhalt.
+Importierte Quellen und manuelle Bearbeitung bleiben die vollständige
+Produktfunktion.
+
 ## Oberflächenstruktur
 
-Die Hauptnavigation umfasst Eingang, Fundus, Sendungen, Archiv und Verwaltung.
+Die Hauptnavigation umfasst Start, Eingang, Pieces, Streams, Live und Post;
+Verwaltung bleibt im Benutzermenü.
 Auf dem Desktop liegt sie als feste horizontale Glasleiste oberhalb der
 Arbeitsfläche. Bis einschließlich `52rem` ersetzen eine kompakte obere Leiste
 und die untere Hauptnavigation diesen Desktopkopf vollständig. Auf breiten
@@ -437,31 +498,34 @@ Die Sendungsübersicht schaltet über zwei gleichwertige Formularaktionen zwisch
 Liste und Kalender um. Auf breiten Ansichten erscheint ein siebenspaltiges
 Monatsraster ohne Termin-Drag-and-drop; bis `52rem` ersetzt es eine lineare,
 touchfreundliche Agenda desselben Monats.
-Der Live-Modus ist eine eigene, fokussierte Arbeitsansicht. Die
+Die private Route `/live` läuft in derselben authentifizierten App-Shell wie
-Präsentationsausgabe verwendet eine separate, strikt reduzierte Datenansicht
+Streams. Ein Streamkopf zeigt Titel, Termin, Umfang und den expliziten
-ohne interne Anwendungsnavigation.
+Nur-Lesen-Zustand. Darunter folgen auf breiten Ansichten Ablauf, Lesedokument und
+Details als drei `builder-pane`-/`stream-inspector`-artige Flächen. Bis
+einschließlich `72rem` werden diese Bereiche über eine gleichwertige Umschaltung
+einzeln gezeigt; bis `52rem` bleiben der kompakte App-Header und die mobile
+Bottomnavigation sichtbar.
 
-Die private Route `/live` verwendet ebenfalls einen eigenen authentifizierten
+`src/routes/live/+page.server.ts` bietet neben `load` ausschließlich die getrennte
-Layoutmodus ohne allgemeine Seitenleiste, mobilen App-Header oder
+Präsentationsaktion an. Das Auswählen einer Usage, Vor/Zurück, Schriftgröße,
-Bottomnavigation. Ihre Regiefläche belegt die verfügbare Viewporthöhe als Raster
+sichtbare Zeiten und das Kopieren von Twitch-Tags bleiben lokaler
-aus fester Statuszeile, unabhängig scrollender Piece- und Ablaufspalte sowie
+Browserzustand. Status-, Fortschritts-, Sortier- und Abschlussänderungen sind
-fester Aktionszeile. Die Breite entscheidet über zwei Spalten oder das mobile
+nicht Teil dieser Route. Präsentieren ändert nur `presentation_usage_id` und
-Sheet; eine geringe Desktophöhe verdichtet zusätzlich Abstände und Leisten,
+damit weder Show-/Usage-Status noch Reihenfolge. Die öffentliche `/heinzlive`-
-ohne Schrift oder Oberfläche zu skalieren. Unterhalb des schmalen Breakpoints
+Projektion und die serverseitigen historischen Live-Dienste bleiben erhalten.
-wird ausschließlich die Ablaufspalte als modales Sheet mit Fokusbegrenzung
-eingeblendet; beim Wechsel auf einen breiteren Viewport wird dieser Modalzustand
-aufgehoben. Die lokale Betrachtungsnavigation ist keine Live-Action; erst
-Präsentieren, Überspringen und Erledigen schreiben den jeweiligen getrennten
-Zustand. Die öffentliche `/heinzlive`-Projektion bleibt unverändert. Lokale
-Lesepositionen sind an die jeweilige Verwendung gebunden und werden nicht
-zwischen Pieces übertragen.
 
-Der Live-Kopf besteht aus zwei regulären Rasterzeilen. Abschnitt und folgendes
+Das gemeinsame Arbeitsraster besteht aus einer linken, über Kopf und Inhalt
-Piece sind einzeilig gekürzte, fokussierbare Schaltflächen, die ihren vollständigen
+reichenden Navigation sowie einem rechten Hauptbereich. Dessen freie Kopfzeile
-Text lokal aufklappen. Das Regiemenü wird bei Bedarf als fest am Viewport
+besitzt bewusst keine Pane-Fläche; darunter beginnen Inhalt und optionaler
-positionierter Dialog neben dem Kopf gerendert. Dadurch unterliegt es weder dem
+Inspector. `unified-workspace`, Post-Detail und Live verwenden dieselben
-Overflow der Regiefläche noch dem durch Glasfilter erzeugten Stacking Context;
+Spaltenwerte `13–16rem / minmax(0, 1fr) / 19–22rem` und `0.85rem` Abstand. Bei
-seine maximale Höhe bleibt an den Viewport gebunden und intern scrollbar.
+mittleren Breiten folgt der Inspector unter dem Inhalt, mobil übernimmt die
+bereichsspezifische Pane-Umschaltung.
+
+Dialog- und Pane-Bewegungen sind reine Oberflächenzustände mit 140–170 ms Dauer.
+Der Piece-Dialog animiert Öffnen, explizites Schließen und Backdrop; Disclosure-
+Inhalte und mobile Pane-Wechsel blenden kurz ein. Unter
+`prefers-reduced-motion: reduce` werden Animationen und Übergänge entfernt.
 
 Icons werden aus dem lokalen Font-Awesome-Classic-Regular-Sprite unter
 `static/icons` gerendert. Die Verwaltung lädt zusätzlich die durchsuchbaren
@@ -470,20 +534,50 @@ gleichzeitig. Allgemeine Seiten wie Login oder Navigation laden den Katalog
 nicht in ihren Client-Chunk.
 
 Der Fundus ist auf breiten Ansichten ein Raster aus Bibliotheksnavigation,
-mittlerer Liste beziehungsweise Piece-Schreibfläche und rechter Kontextspalte.
+mittlerer Liste und rechter Schnellbearbeitung. Kleinere Desktopfenster ordnen
-Kleinere Desktopfenster blenden zuerst den rechten Kontext aus; mobil wird die
+den Inspector unter der Liste an; mobil werden Navigation, Liste und Inspector
-Bibliotheksnavigation zur horizontalen Auswahl und im geöffneten Editor ganz
+gestapelt. URL-Parameter tragen Suche, Filter und ausgewählte Piece-ID über den
-ausgeblendet. URL-Parameter tragen Suche und Filter über den Routenwechsel,
+Routenwechsel, `sessionStorage` ausschließlich die zugehörige flüchtige
-`sessionStorage` ausschließlich die zugehörige flüchtige Listenposition.
+Listenposition. Reduzierte Schnellformulare lesen nicht dargestellte Werte
+serverseitig aus dem aktuellen Piece und führen sie unverändert mit.
 
-Der eigenständige Piece-Editor ordnet denselben Formvertrag als redaktionelles
+Der eigenständige Piece-Editor ordnet denselben Formvertrag als modales
-Arbeitsblatt ohne Desktopdialog an. Titel, Einleitung, Moderationsstichpunkte,
+redaktionelles Arbeitsblatt mit eigener URL an. Titel, Einleitung, Moderationsstichpunkte,
 Interaktion, Überleitung, private Recherche, Quellen und Werkzeuge bilden die
 mittlere Schreibfläche. Status, Dauer, Einordnung, Präsentationsmodi und Medien
 liegen auf breiten Ansichten rechts. Alle Werte werden weiterhin gemeinsam über
 die bestehende `save`-Action und Piece-Revision gespeichert; separate Bild- und
 Präsentationsactions bleiben eigene serverseitige Mutationen.
 
+Der Eingang verwendet dieselbe Darstellung, behält aber zwei Datenarten: neue
+`feed_entries` und bereits erzeugte Inbox-Pieces. Die rechte Projektion ruft für
+RSS weiterhin ausschließlich Import-/Verwerfactions auf. Post beginnt ebenfalls
+in einer dreiteiligen Übersicht; die vollständige Streamzeile und die rechte
+Öffnen-Aktion verlinken direkt auf `/post/[id]`. Die Route ist eine normale
+Anwendungsseite und übernimmt Seitenkopf, Datumsdarstellung, Feldgeometrie und
+responsive Pane-Umschaltung der Streambearbeitung. Darunter stehen
+Schnellnavigation, Editor/Übersicht und Inspector. Die linke Navigation
+gruppiert YouTube, Social-Clips und Twitch-Highlights und ruft deren Sofortanlage
+über dieselbe Post-Action auf. Ohne `item`-Queryparameter bleibt die Auswahl
+leer: Die Mitte projiziert alle vorhandenen Post-Inhalte mit Kopieraktionen,
+rechts stehen Streamzähler. Mit `item` zeigt dieselbe Mitte den Editor und rechts
+dessen Eigenschaften. Mutations-URLs führen `item` mit, damit Upload oder
+Speichern die aktuelle Auswahl nicht verlieren.
+
+`createPostItem()` setzt `source_file_id` bereits beim Anlegen, wenn genau eine
+Kontextdatei zum Stream existiert. `listPostPieceOptions(showId)` verbindet
+`pieces`, `piece_usages` und `show_sections`; dadurch sind nur Original-Pieces
+des geöffneten Streams zuordenbar. Editor und Inspector nutzen dieselben Pane-,
+Feld- und Aktionsgrundlagen wie der Streamplan. Mobil werden Navigation,
+Bearbeitung und Details als drei explizite Pane-Zustände angeboten.
+
+Checkboxen und Radios bleiben im DOM native Formularsteuerungen. Das globale
+Stylesheet blendet nur ihre sichtbaren Kästchen aus und projiziert `:checked` und
+`:focus-visible` auf das umgebende Label. Damit sind ganze Flächen per Maus,
+Touch und Tastatur wählbar, ohne Semantik oder Formübermittlung zu ersetzen. Der
+aktive Zustand verwendet wie Post-Navigation und Post-Register den cyanfarbenen
+Oberflächenakzent; Gold bleibt Primäraktionen vorbehalten.
+
 `RichMarkdownField` erstellt je sichtbarem Langtext genau eine Tiptap-Instanz mit
 StarterKit und offizieller Markdown-Erweiterung. Der Formularwert bleibt rohes
 Markdown. Eine Bearbeitung aktualisiert ihn aus `getMarkdown()`, während das

docs/DECISIONS.md

@@ -634,3 +634,134 @@ aus der URL angewendet. Status gilt für beide Treffergruppen; Thema und Format
 gelten ausschließlich für Pieces und schließen Streamtreffer aus. Taxonomie und
 Trefferzahlen werden aus SQLite abgeleitet. Es gibt keinen neuen Index, keine
 Migration und keinen konto- oder browsergebundenen Filterzustand.
+
+## D-038: Stream-Inspector statt Usage-Overlay
+
+Die nicht-modale Dialoglösung aus D-036 wird für die Streamplanung durch eine
+dauerhafte rechte Inspector-Spalte ersetzt. Der Ablauf bleibt dadurch räumlich
+stabil und die Auswahl von Stream, Abschnitt oder Usage ändert nur den Inhalt
+derselben Metadatenfläche. Unterhalb der Desktopbreite ist der Inspector ein
+eigener `Details`-Pane statt eines überlagernden Dialogs.
+
+Show und Abschnitt verwenden die vorhandenen Actions. Für Usage-Schnellfelder
+führt eine schmale Route-Action die nicht dargestellten Snapshotfelder aus der
+aktuellen serverseitigen Projektion mit und ruft anschließend unverändert
+`updatePieceUsage()` auf. Damit bleibt die Revision die gemeinsame
+Schreibgrenze; ein reduziertes Formular darf keine Moderations-, Recherche- oder
+Präsentationsdaten löschen. Der Link `Piece bearbeiten` führt bewusst zum
+Original-Piece und vermischt dessen Autosave nicht mit der Streamrevision.
+
+## D-039: Postproduktion bleibt an abgeschlossene Streams gebunden
+
+Post erhält kein zweites Sendungsmodell. Jeder Aufzeichnungsteil, jede Quelle und
+jeder Post-Inhalt verweist auf eine vorhandene Sendung; der Dienst akzeptiert
+ausschließlich `shows.status = 'completed'`. Gemeinsame Identität, Status,
+Revision, Herkunft und Reihenfolge liegen in `post_items`, während YouTube,
+Social-Clips und Twitch-Highlights ihre unterschiedlichen Felder in typbezogenen
+Tabellen führen. Migration `0021` ist damit rein additiv und verändert keine
+bestehenden Stream-Snapshots.
+
+Markdown-Kontext wird unverändert privat gespeichert. SHA-256 schützt pro
+Sendung vor Dubletten; Zeitmarken und Transkriptfragmente werden nur aus
+tatsächlich vorhandenen Zeilen extrahiert. Quellen und Thumbnails verwenden
+zufällige Speichernamen im konfigurierten Uploadverzeichnis und authentifizierte
+Auslieferungsrouten. Ein Originalname oder Medienpfad wird nie zu einer
+ungeschützten statischen URL.
+
+Ein Export darf seine technische Verwendbarkeit nicht vortäuschen. Resolve-XML
+benötigt daher einen absoluten Pfad oder `file://`, Framerate, Timebase sowie
+positive Start- und Endpunkte. SRT wird vollständig blockweise validiert. Fehlt
+eine Voraussetzung, antwortet die Exportroute mit `EXPORT_NOT_READY`, und die
+Oberfläche bietet den Export nicht an.
+
+Eine KI-Schreibfunktion wird erst mit einem real konfigurierten Provider
+eingeführt. `post-ai.ts` definiert nur den providerneutralen Ein-/Ausgabevertrag;
+es gibt keine Scheinaktion, keinen Netzwerkaufruf und keine Abhängigkeit des
+manuellen Workflows von einem KI-Dienst.
+
+## D-040: Gemeinsame Inhaltswerkbank und URL-gebundene Voll-Editoren
+
+Pieces, Eingang und Post folgen derselben visuellen Hierarchie: Navigation oder
+Quellen links, auswählbare Inhalte mittig und häufige Bearbeitung rechts. Der
+Inspector ist ausdrücklich kein reines Metadatenpanel; er enthält die im Alltag
+benötigten Texte, kontextbezogene Uploads und Primäraktionen. Bei mittleren
+Breiten folgt er unter dem Inhalt, mobil werden die Bereiche geordnet gestapelt.
+Diese Projektion führt keine neue persistente Auswahl oder Fachlogik ein.
+„Gemeinsam“ bedeutet dabei auch gemeinsame Oberflächenbausteine: Katalognavigation,
+`builder-pane` und `stream-inspector` werden von Streams, Pieces und Post direkt
+geteilt. Bereichsspezifische Parallelimplementierungen mit nur ähnlicher Optik
+werden vermieden.
+
+Die vollständige Piece- und Postbearbeitung behält ihre bestehende eigene URL.
+Der Piece-Editor bleibt ein nativer modaler Dialog ohne zweite
+Inhaltsnavigation. Die Post-Werkbank ist dagegen eine normale Seite im
+Streams-Layout, damit globale Navigation, Streamkontext und der Wechsel zwischen
+mehreren YouTube-, Social- und Highlight-Inhalten räumlich stabil bleiben. Sie
+ergänzt dafür bewusst eine linke Schnellnavigation. Piece-Autosave, Revisionen,
+Post-Revisionen und sämtliche Snapshotgrenzen bleiben die einzigen
+Schreibgrenzen.
+
+RSS bleibt vor der Übernahme eine eigene Entität im Eingang. Eine einheitliche
+Darstellung darf diese Grenze nicht verwischen: Vorschau, Verwerfen und
+Übernehmen arbeiten auf `feed_entries`; erst der ausdrückliche Import erzeugt ein
+Piece. Ebenso projiziert Post ausschließlich vorhandene abgeschlossene Streams
+und erhält keine zweite Sendungsverwaltung.
+
+## D-041: Stream-orientierte Post-Schnellwerkbank und gemeinsame Auswahlflächen
+
+Die Post-Detailroute startet ohne ausgewählten Einzelinhalt. In diesem Zustand
+zeigt die Mitte eine kopierbare Übersicht und der Inspector ausschließlich
+Streammetadaten; erst eine Auswahl in der linken Navigation öffnet einen Editor.
+Die URL trägt die Auswahl als `item`, und jede Mutation übernimmt diesen
+Parameter. Dadurch bleiben Reload, Uploads und Speichern adressierbar, ohne einen
+neuen persistenten Auswahlzustand einzuführen.
+
+TikTok und Instagram teilen eine Caption inklusive Hashtags. YouTube Shorts
+führt nur den Titel. Migration `0022` ergänzt dafür additiv `social_caption` und
+übernimmt vorhandene Texte. Eine einzige Kontextdatei wird bei der Anlage
+automatisch verknüpft. Piece-Optionen werden anhand der tatsächlichen Usages des
+geöffneten Streams begrenzt; die Postproduktion kann damit keine fachlich
+fremden Fundus-Pieces zuordnen.
+
+Checkboxen und Radios werden nicht durch eigene JavaScript-Steuerungen ersetzt.
+Sie bleiben native, fokussierbare Eingaben, während das Label als farblich
+markierte Auswahlfläche erscheint und das Kästchen selbst unsichtbar bleibt.
+Diese Regel gilt sendewerkweit und erhält Formsemantik, Tastaturbedienung sowie
+serverseitige Formverträge.
+
+Post verwendet für aktive Inhaltszeilen, Register, Zielplattformen und Filter
+dieselbe Auswahl wie Streams: abgerundete ruhige Fläche und dünne goldene
+Kontur, ohne Cyan-Füllung oder seitlichen Balken. Felder, Radien und Abstände
+werden aus der Streambearbeitung übernommen, statt einen eigenen
+Post-Formularstil zu bilden.
+
+## D-042: Live als vollständig lesende Streamprojektion
+
+Live ist keine eigene Steuerungsshell mehr, sondern eine reguläre
+Sendewerk-Seite. Sie verwendet globale Desktop- und Mobilnavigation, den
+Streamkopf sowie drei Pane-Flächen für Ablauf, Moderationsdokument und Details.
+Die responsive Umschaltung folgt den übrigen Werkbänken statt eines modalen
+Ablauf-Sheets.
+
+Die Route zeigt keine Status-, Fortschritts-, Sortier- oder Abschlusssteuerung.
+Das Auswählen eines Pieces, Vor/Zurück und die Darstellungsoptionen sind
+ausschließlich lokaler Browserzustand. Präsentieren bleibt als ausdrücklich
+getrennte Ausgabeaktion erhalten und schreibt nur den Präsentationsstand. Dadurch
+kann Navigation innerhalb von Live weder den Stream- oder Usage-Status noch die
+Reihenfolge verändern. Bestehende Live-Daten werden als gespeicherter Stand
+dargestellt.
+
+## D-043: Verbindliches Seitenraster und reduzierte App-Bewegung
+
+Streams definiert nicht nur Farben und Pane-Radien, sondern das Seitenraster für
+alle Bereiche. Die linke Bereichsspalte beginnt unmittelbar unter der globalen
+Navigation und überspannt freien Seitenkopf sowie Inhaltszeile. Der Seitenkopf
+liegt ohne eigene Hintergrundfläche im Hauptbereich. Erst darunter beginnen die
+mittlere Inhaltsfläche und, falls vorhanden, der rechte Inspector. Gemeinsame
+Spaltenbreiten und Abstände dürfen nicht bereichsspezifisch abweichen.
+
+Der Piece-Voll-Editor bleibt ein erkennbarer modaler Dialog und erhält deshalb
+auf Desktop Abstand zum Viewportrand, Kontur, Schatten und sichtbaren Backdrop.
+Öffnen, Schließen, Vergrößern beziehungsweise Pane-Wechsel verwenden kurze,
+ruhige Bewegungen unter 200 ms. Sie verändern keine Fachzustände und werden bei
+reduzierter Bewegung vollständig deaktiviert.

docs/RELEASE_NOTES.md

@@ -1,5 +1,141 @@
 # Release Notes
 
+## 0.9.0 - Postproduktion
+
+Veröffentlicht am 29. Oktober 2026, Korrekturstand 30. Oktober 2026
+
+- **Post** ergänzt die Hauptnavigation und zeigt alle bestehenden abgeschlossenen
+  Streams mit Suche, Sortierung, Fortschritt und Statusfilter. Die Streamdaten
+  bleiben die einzige fachliche Quelle.
+- Pieces, Eingang und Post verwenden eine gemeinsame Inhaltswerkbank mit
+  Navigation beziehungsweise Quellen links, auswählbaren Inhalten in der Mitte
+  und echter Schnellbearbeitung rechts. Wichtige Texte, Einordnung, passende
+  Uploads und häufige Aktionen sind ohne Öffnen des Voll-Editors erreichbar.
+- Die Korrektur vom 30. Oktober vereinheitlicht auch die konkreten Bauteile:
+  Post besitzt nun dieselbe einklappbare Katalognavigation wie Streams und
+  Pieces; Piece-Schnellbearbeitung, Post-Schnellübersicht und Post-Eigenschaften
+  verwenden den Stream-Inspector samt identischem Formular- und Aktionsaufbau.
+- Vollständige Piece- und Postbearbeitung behält die bestehende eigene URL und
+  folgt zwei passenden Darstellungen: Piece bleibt ein großes gesperrtes
+  Arbeitsblatt, Post ist eine normale Seite im Streams-Layout. Post besitzt
+  Streamkopf, Datum und Zurücklink sowie links eine Schnellnavigation für
+  YouTube, Social-Clips und Twitch-Highlights samt Sofortanlage. Ohne Einzelwahl
+  zeigt die Mitte eine kopierbare Inhaltsübersicht und rechts stehen
+  Streammetadaten.
+- Streamzeilen und die rechte Öffnen-Aktion führen direkt in die zugehörige
+  Post-Werkbank. Eine farblich aktive Inhaltszeile öffnet den jeweiligen Editor.
+- Checkboxen und Radios erscheinen sendewerkweit als vollständig anklickbare,
+  wie Streams markierte Auswahlflächen ohne sichtbare Kästchen. Post-Inhaltszeilen,
+  Register, Filter und RSS-Auswahl verwenden eine abgerundete ruhige Fläche mit
+  dünner goldener Kontur statt Cyan-Füllung oder Seitenbalken. Native Semantik,
+  Fokus und Formübermittlung bleiben erhalten.
+- Live ist nun eine vollständig lesende Streamprojektion in der normalen
+  Sendewerk-Shell. Streamkopf, Ablauf, Moderationsdokument und Details folgen der
+  Streams-Geometrie; Desktop- und Mobilnavigation bleiben sichtbar. Vor/Zurück,
+  Uhr und Präsentieren bleiben erhalten; Status-, Fortschritts-, Sortier- und
+  Abschlussaktionen entfallen. Lokale Auswahl und Darstellungsoptionen schreiben
+  keine Stream- oder Piece-Daten, Präsentieren nur den getrennten Ausgabestand.
+- Pieces, Eingang, Post und Live übernehmen auch das Seitenraster von Streams:
+  linke Navigation ab Oberkante, freier Seitenkopf und erst darunter Inhalts-
+  und Inspectorflächen mit festen gemeinsamen Spaltenbreiten und Abständen.
+- Der Piece-Editor ist wieder klar als Overlay erkennbar und hält auf Desktop
+  Abstand zum Viewportrand. Sein Öffnen kombiniert einen schnellen räumlichen
+  Lift mit sanft gestaffeltem Inhalt und Backdrop; Schließen führt dieselbe
+  Bewegung kompakt zurück und navigiert erst nach ihrem tatsächlichen Ende.
+  Weitere native Dialoge verwenden dieselbe Bewegungsrichtung. Alle Übergänge
+  bleiben unter 200 ms; reduzierte Bewegung deaktiviert sie ohne Wartezeit.
+- Post-Formfelder, Rundungen und Abstände entsprechen der Streambearbeitung. Die
+  Überschrift der Übersicht und der linken Detailnavigation lautet vollständig
+  „Postproduktion“.
+- Der Eingang bleibt Sichtungs- und Importbereich. RSS-Vorschau, Original,
+  Übernehmen und Verwerfen stehen im Inspector; erst die bewusste Übernahme
+  erzeugt ein normales Piece.
+- Aufzeichnungsteile speichern optionale Medienparameter. Mehrere private
+  Markdown-Kontextdateien behalten ihren Originalinhalt, werden innerhalb einer
+  Sendung per SHA-256 dedupliziert und nur konservativ nach vorhandenen
+  Zeitmarken ausgewertet.
+- Mehrere YouTube-Uncuts führen Beschreibung, Titelvarianten, Thumbnailideen,
+  echte auswählbare Thumbnail-Dateien und Veröffentlichungsdaten.
+- Social-Clips besitzen Originaltranskripte, einen YouTube-Shorts-Titel, eine
+  gemeinsame TikTok-/Instagram-Caption inklusive Hashtags, Hooks, Endcards,
+  Schnitt-, Format- und Untertiteldaten. Twitch-Highlights bilden einen
+  eigenständigen redaktionellen Typ.
+- Bei genau einer Kontextdatei wird sie neuen Post-Inhalten automatisch
+  zugeordnet. Die Piece-Auswahl ist auf Originale begrenzt, die im geöffneten
+  Stream tatsächlich verwendet wurden.
+- Authentifizierte Datei- und Exportrouten schützen Quellen und Thumbnails.
+  Resolve-XML und SRT werden nur angeboten und ausgeliefert, wenn die jeweils
+  erforderlichen Daten vollständig valide sind.
+- Es gibt keine simulierte KI-Funktion. Ein providerneutraler Adaptervertrag ist
+  für eine spätere echte Integration vorbereitet; der manuelle Ablauf ist ohne
+  externe Dienste vollständig.
+- Migration `0021_post_production.sql` ist additiv. Migration
+  `0022_post_quick_workbench.sql` ergänzt die gemeinsame Social-Caption und
+  übernimmt vorhandene Plattformtexte. Bestehende Stream-, Piece-, Live- und
+  Freigabedaten werden nicht verändert. Paket, Lockdatei, Cloudron-Manifest und
+  Oberfläche tragen Version `0.9.0`.
+- Lint, Typprüfung, 69 Verhaltenstests, Produktionsbuild und 22 Chromium-Abläufe
+  sind erfolgreich. Safari, echte Mobilgeräte, reale Schnittsoftware und eine
+  echte KI-Anbindung bleiben mangels Umgebung offen.
+
+## 0.8.2 - Piece-Schreibraum
+
+Veröffentlicht am 27. Oktober 2026, Korrekturstand 28. Oktober 2026
+
+- Einleitung, Moderationsstichpunkte, Interaktion und Überleitung bilden ein
+  zusammenhängendes, inhaltswachsendes Schreibdokument. Nur der fokussierte
+  Abschnitt zeigt Formatierungswerkzeuge; Tiptap, Auswahl erhaltende Befehle und
+  Markdown-Quellansicht bleiben erhalten.
+- Im geöffneten Editor wird die linke Bereichsnavigation zur gefilterten
+  Piece-Liste mit Suche, denselben Filtern, markiertem aktuellem Piece und
+  zustandserhaltendem Rücksprung. Ein Wechsel läuft über bestehenden Autosave und
+  Revisionsschutz. Übersichtsseiten behalten ihre bisherige Navigation.
+- Status, Dauer, Format und Themen sind rechts kompakt direkt bearbeitbar;
+  Kurzbeschreibung, Aufwand und Kategorien liegen unter „Weitere Details“.
+  Text, Nur Bild, Linkvorschau und Video sowie die direkt editierbare
+  Publikumsvorschau bleiben darunter sichtbar.
+- Der reduzierte Kopf bündelt Favorit, Speicherzustand, manuelles Speichern und
+  ein abgesichertes Aktionsmenü. Speicher- und Aktionssteuerung stehen unter dem
+  Titel, sodass lange Überschriften auch bei schmalem Desktop Platz behalten. Die
+  dauerhafte Editor-Fußleiste und doppelte Metadaten entfallen.
+- Mobil öffnen Streamtext, Recherche, Piece-Liste und Details/Ausgabe als
+  getrennte Ansichten. Der Piece-Drawer ist schließbar; jeder Textbereich besitzt
+  einen touchfähigen Zugang zu seinen Werkzeugen. Die globale Hauptnavigation
+  bleibt unten.
+- Autosave, Revisionsschutz, Quellen, Uploads, Testfenster, Vorlagen, Favorit,
+  Duplikation, Archivierung und Löschung behalten ihre bisherigen Actions.
+  Streamfassungen und Snapshots, Live-Regie und Suche bleiben fachlich
+  unverändert. Es gibt keine Datenbankmigration.
+- Paket, Lockdatei und Cloudron-Manifest tragen Version `0.8.2`.
+- Die Desktopgeometrie füllt die mittlere Spalte und wächst beim Einklappen der
+  Piece-Liste. Der Textsatz bleibt innerhalb der vollbreiten Dokumentfläche
+  lesbar; die rechte Spalte zeigt die Publikumsvorschau statt einer langen
+  Formularmatrix.
+- Eine Korrektur für mittlere Desktopbreiten entfernt die beim Einklappen
+  verbliebene leere Rasterspalte. Größere Navigations- und Piece-Icons, eine
+  überlappungsfreie kompakte Kopfnavigation und das sichtbare Versionslabel
+  `0.8.2` verbessern die Orientierung.
+- Die Piece-Markierung bleibt mit eigenem Scrollgutter bündig.
+- Der Streamplan zeigt rechts dauerhaft einen Inspector in der Breite der
+  Piece-Metadaten. Standardmäßig enthält er Streamdaten und Twitch-Texte; ein
+  Klick auf Abschnitt oder Ablauf-Piece zeigt die passenden Schnellfelder.
+  Piece-Auswahlen enden mit `Piece bearbeiten` und `Speichern`, weitere
+  bestehende Usage-Aktionen bleiben eingeklappt erreichbar.
+- Die Piece-Bibliothek schließt bei einer Inhaltsauswahl automatisch, damit
+  Ablauf und Inspector nebeneinander lesbar bleiben. Schmalere Ansichten
+  verwenden dafür den zusätzlichen Arbeitsbereich `Details`.
+- Das neue Usage-Metadatenformular führt nicht dargestellte Langtexte,
+  Präsentationswerte, Medien und Werkzeuge serverseitig unverändert mit und
+  bleibt revisionsgeschützt.
+- Die Live-Regie verwendet die neue ruhige Dokument- und Ablaufsprache: aktuelle
+  Moderationstexte liegen in einem zusammenhängenden Lesedokument, der Ablauf ist
+  flacher und Aktionszeilen überlagern sich nicht. Vollbildshell, Timer,
+  Präsentationsgrenze, mobile Ablaufansicht und sämtliche Live-Actions bleiben
+  unverändert.
+- Lint, Typprüfung, 64 Verhaltenstests, Produktionsbuild und 22
+  Chromium-Abläufe sind erfolgreich. Safari und echte Mobilgeräte bleiben
+  mangels Umgebung offen.
+
 ## 0.8.1 - Redaktionelle Werkbänke
 
 Veröffentlicht am 27. Oktober 2026

docs/STATUS.md

@@ -8,6 +8,179 @@ Live-Steuerung, Präsentationsausgabe, unveränderliche Sendungshistorie,
 Archiv, sichere Lesefreigaben, RSS-Import und technische REST-Zugänge sind
 dokumentiert.
 
+## Einheitliche Inhaltswerkbänke 0.9.0
+
+- Pieces, Eingang und Post verwenden dieselbe Werkbankhierarchie aus linker
+  Navigation beziehungsweise Quellenwahl, mittlerer Inhaltsliste und rechter
+  Schnellbearbeitung. Bei mittleren Breiten folgt der Inspector unter dem Inhalt;
+  mobil werden die drei Bereiche in derselben fachlichen Reihenfolge gestapelt.
+- Pieces und Post verwenden dabei nicht nur dasselbe Raster, sondern direkt die
+  Stream-Komponentensprache: einklappbare Katalognavigation, `builder-pane`,
+  `stream-inspector`, identische Feldabstände sowie dieselben festen Aktionsleisten.
+  Der Post-Voll-Editor kombiniert entsprechend Schnellnavigation, Schreibpane
+  und Stream-artigen Eigenschaften-Inspector ohne abweichende Parallelbausteine.
+- Die Piece-Übersicht wählt Inhalte zunächst in der Liste aus. Der rechte
+  Inspector bearbeitet Titel, Kurzbeschreibung, Einleitung, Moderation, Status,
+  Dauer und Format revisionsgeschützt und bietet den kontextbezogenen Bild-Upload.
+- Der Eingang bleibt eine getrennte Sichtungsgrenze. RSS-Beiträge erhalten rechts
+  Vorschau, Originallink sowie Übernehmen oder Verwerfen; erst die Übernahme
+  erzeugt ein normales Piece. Bereits redaktionelle Eingangspieces lassen sich
+  dort schnell benennen, beschreiben, löschen oder vollständig öffnen.
+- Die Post-Übersicht wählt ausschließlich abgeschlossene Streams und zeigt deren
+  vorhandenen Arbeitsstand im Inspector. Ein Klick auf die Streamzeile oder die
+  Öffnen-Aktion führt direkt in die zugehörige Werkbank. Es entsteht weder ein
+  zweites Sendungsmodell noch eine zweite Abschlusslogik.
+- Die vollständige Piece-Bearbeitung bleibt unter ihrer eigenen URL ein nativer
+  großer Modaldialog. Die Post-Bearbeitung ist dagegen eine normale Seite im
+  Streams-Layout mit globaler Navigation, Streamkopf und Zurücklink. Links steht
+  die dauerhafte Schnellnavigation für YouTube, Social-Clips und
+  Twitch-Highlights mit Sofortanlage. Ohne konkrete Inhaltsauswahl zeigt die
+  Mitte alle vorhandenen Post-Inhalte mit Kopieraktionen und rechts die
+  Streamzusammenfassung.
+- Der Piece-Autosave synchronisiert separate Medienmutationen in den lokalen
+  Entwurf. Radio- und Checkboxänderungen lösen den revisionsgeschützten Save aus;
+  der Bildmodus wird erst nach bewusst ausgewähltem Präsentationsmedium gespeichert.
+- Checkboxen und Radios bleiben semantische, fokussierbare Formelemente, werden
+  sendewerkweit aber als vollständig anklickbare Auswahlflächen ohne sichtbares
+  Kästchen dargestellt. Aktive Auswahl übernimmt exakt die Streams-Sprache aus
+  abgerundeter ruhiger Fläche und dünner goldener Kontur; Cyan-Füllung und
+  seitlicher Auswahlbalken entfallen.
+- Live ist eine reguläre Sendewerk-Seite mit globaler Desktop- und
+  Mobilnavigation, Streamkopf und drei Stream-artigen Pane-Flächen für Ablauf,
+  Lesedokument und Details. Vor/Zurück, laufende Uhr und die fachlich getrennte
+  Präsentationsausgabe bleiben verfügbar. Status-, Fortschritts-, Sortier- und
+  Abschlussaktionen fehlen. Piece-Auswahl, Schriftgröße und Zeitanzeige sind
+  lokale Darstellungszustände und verändern weder Streamstatus noch
+  Piece-Verwendungen oder Reihenfolge.
+- Das gemeinsame Seitenraster folgt jetzt unmittelbar Streams: Die linke
+  Bereichsspalte beginnt direkt unter der App-Navigation und reicht über die
+  Seitenhöhe. Überschrift und Kontext stehen ohne umgebende Pane-Fläche rechts
+  daneben; erst darunter beginnen mittlere Inhaltsfläche und optionaler rechter
+  Inspector. Pieces, Eingang, Post und Live verwenden dieselben Spaltenbreiten,
+  Abstände und responsiven Übergänge.
+- Der Piece-Editor bleibt auf Desktop und schmalem Desktop sichtbar ein Overlay
+  mit Abstand zum Viewportrand, abgerundeter Kontur, Schatten und erkennbarem
+  Hintergrund. Öffnen verwendet einen räumlichen Lift mit dezent gestaffeltem
+  Inhalt, Schließen die schnelle Gegenbewegung. Die Navigation wartet auf das
+  tatsächliche Animationsende statt auf eine feste Verzögerung. Dialog-, Pane-
+  und Disclosure-Bewegungen bleiben unter 200 ms; `prefers-reduced-motion`
+  schaltet sie ohne Wartezeit vollständig ab.
+
+Geprüft wurden Lint, Typprüfung, Produktionsbuild, 69 von 69 Verhaltenstests und
+22 von 22 Chromium-Abläufe. Die responsive Sichtmatrix umfasst die drei
+Übersichten bei 1440 × 1000, 960 × 900 und 390 × 844 Pixeln sowie Piece- und
+Post-Detailseite. Die inhaltslose Post-Detailübersicht und ihre mobile
+Schnellnavigation wurden zusätzlich aufgenommen und visuell kontrolliert.
+Escape, sichtbares Schließen, Browser-Zurück, Autosave nach Medienauswahl,
+Auswahlflächen und horizontaler Überlauf wurden gezielt geprüft. Live wurde bei
+1440, 960 und 390 Pixeln visuell kontrolliert; ein abgewiesener POST-Versuch
+sowie Auswahl und Darstellungswechsel ließen Show-Status, Usage-Status und
+Reihenfolge unverändert. Safari und echte Mobilgeräte bleiben mangels Umgebung
+offen.
+
+## Postproduktion 0.9.0
+
+- Der neue Hauptbereich **Post** zeigt ausschließlich vorhandene abgeschlossene
+  Streams. Suche, Sortierung, Fortschrittsfilter und Zähler werden aus denselben
+  Sendungs- und Postdaten abgeleitet; es gibt keine zweite Sendungsverwaltung.
+- Die vollständige Detailansicht ist eine normale Seite im Layout der
+  Streambearbeitung: Streamtitel und Datum stehen im Seitenkopf, darunter folgen
+  linke Schnellnavigation, mittlere Schreib- beziehungsweise Übersichtsfläche
+  und rechter Eigenschaften-Inspector. YouTube, Social-Clips und
+  Twitch-Highlights lassen sich links sofort anlegen; mobil sind Inhalte,
+  Bearbeiten und Details getrennte Pane-Zustände.
+- Formfelder, Rundungen und Abstände entsprechen den Streamformularen. Aktive
+  Post-Inhalte, Register, Zielplattformen und Filter verwenden wie Streams eine
+  ruhige abgerundete Fläche mit dünner goldener Kontur.
+- Pro Stream lassen sich mehrere Aufzeichnungsteile mit Medienpfad, Framerate und
+  Timebase sowie mehrere unveränderte Markdown-Kontextdateien verwalten.
+  SHA-256 verhindert Dubletten innerhalb einer Sendung; Zeitmarken und
+  Transkriptfragmente werden ausschließlich konservativ aus vorhandenen Zeilen
+  extrahiert.
+- YouTube-Uncuts, Social-Clips und Twitch-Highlights sind eigenständige,
+  revisionierte Post-Elemente. YouTube führt Beschreibung, Titelvarianten,
+  Thumbnailkonzept, echte private Thumbnail-Dateien und Veröffentlichungsdaten.
+  Clips führen Originaltranskript, einen reinen YouTube-Shorts-Titel, eine
+  gemeinsame TikTok-/Instagram-Caption inklusive Hashtags, Hooks, Endcards,
+  Zielplattformen, Untertitel und Schnittdaten; Highlights bleiben unabhängig.
+- Bei genau einer Kontextdatei ordnet die Anlage sie automatisch zu. Die
+  Piece-Auswahl enthält ausschließlich Original-Pieces, die im geöffneten Stream
+  tatsächlich verwendet wurden.
+- Quellen und Thumbnails liegen im konfigurierten privaten Uploadverzeichnis und
+  werden nur über authentifizierte Routen ausgeliefert. Originalnamen werden
+  nicht zu Speicherpfaden.
+- Text- und JSON-Exporte stehen für vorhandene Inhalte bereit. DaVinci-Resolve-XML
+  erscheint nur bei absolutem Medienpfad, Framerate, Timebase und gültigem
+  Zeitbereich; SRT nur nach vollständiger blockweiser Validierung.
+- `post-ai.ts` beschreibt lediglich einen providerneutralen späteren Adapter.
+  Ohne konfigurierte KI bleiben Import und sämtliche manuellen Arbeitsschritte
+  vollständig nutzbar; die Oberfläche täuscht keine Generierung vor.
+- Migration `0021_post_production.sql` ergänzt ausschließlich Posttabellen;
+  `0022_post_quick_workbench.sql` ergänzt die gemeinsame Social-Caption und
+  übernimmt vorhandene Caption-/Hashtag-Texte. Der Seed enthält eine
+  abgeschlossene Beispielsendung, und Paket, Lockdatei, Oberfläche sowie
+  Cloudron-Manifest tragen Version `0.9.0`.
+
+Geprüft wurden Lint, Typprüfung, Produktionsbuild, 69 von 69 Verhaltenstests und
+22 von 22 Chromium-Abläufe. Der vollständige Post-Rundlauf umfasst Material,
+Markdown, YouTube, Thumbnail, Social-Clip, echten Registerklick, Resolve-/SRT-
+Export, direkte Streamöffnung, inhaltslose Übersicht und mobile Schnellnavigation.
+Safari, echte Mobilgeräte, reale Schnittsoftware und eine KI-Anbindung bleiben
+mangels Umgebung offen.
+
+## Piece-Schreibraum 0.8.2
+
+- Einleitung, Moderationsstichpunkte, Interaktion und Überleitung bleiben getrennt
+  gespeichert, erscheinen aber als ein zusammenhängendes Schreibdokument mit
+  ruhigen Abschnittstrennern und inhaltswachsender Höhe. Nur der fokussierte
+  Abschnitt zeigt seine Tiptap-Werkzeuge; Auswahl und Fokus bleiben beim
+  Formatieren erhalten, die Markdown-Quellansicht bleibt erreichbar.
+- Die linke Spalte ist kontextsensitiv: Übersichtsseiten behalten ihre bisherige
+  Bereichsnavigation, der geöffnete Editor zeigt Rücksprung, dieselben Filter,
+  Suche und die aktuelle gefilterte Piece-Liste. Normale Links verwenden den
+  vorhandenen Autosave-/Konfliktablauf; die aktuelle Auswahl ist markiert.
+- Rechts sind Status, Dauer, Format und Themen direkt kompakt bearbeitbar.
+  Kurzbeschreibung, Vorbereitungsaufwand und Kategorien liegen unter „Weitere
+  Details“. Darunter sind Moduswahl und die direkt editierbare
+  Publikumsvorschau bereits in üblicher Fensterhöhe sichtbar.
+- Der Kopf enthält nur internen Titel, Favorit, kompakten Speicherzustand,
+  manuelles Speichern und ein Aktionsmenü für Vorlagen, Duplizieren, Archivieren
+  und Löschen. Speicher- und Aktionssteuerung stehen in einer eigenen Zeile unter
+  dem Titel; die permanente Fußleiste und doppelte Metadaten entfallen.
+- Mobil bleiben Streamtext, Recherche, Piece-Liste und Details/Ausgabe getrennte
+  Ansichten. Der Piece-Drawer ist opak, schließbar und Safe-Area-fähig;
+  Formatierungswerkzeuge sind über „Formatieren“ ohne Hover erreichbar.
+- Bei mittleren Desktopbreiten gibt die eingeklappte Piece-Navigation ihren Platz
+  vollständig an den Editor frei. Die globale Navigation wechselt dort ohne
+  Überlagerungen auf größere, eindeutig beschriftete Icons; die sichtbare Marke
+  weist den Stand `0.8.2` aus.
+- Die aktuelle Piece-Markierung hält rechts Abstand zum stabilen Scrollgutter.
+- Der Streamplan besitzt rechts dauerhaft einen kompakten Inspector in derselben
+  Breitenklasse wie die Piece-Metadaten. Ohne Auswahl zeigt er Streamdaten und
+  Twitch-Texte; ein Klick auf Abschnitt/Kategorie oder Ablauf-Piece wechselt zu
+  dessen direkt speicherbaren Metadaten. Beim Piece bleiben `Piece bearbeiten`
+  und `Speichern` als feste Abschlussaktionen sichtbar; seltene Usage-Aktionen
+  liegen unter `Weitere Aktionen`.
+- Eine Inhaltsauswahl schließt die nur temporär benötigte Piece-Bibliothek und
+  hält dadurch Ablauf und Inspector lesbar. Unterhalb der Desktopbreite ergänzt
+  `Details` die bestehende Umschaltung zwischen Pieces und Ablauf; direkte
+  Vorbereitungslinks öffnen sofort die richtige Streamfassung.
+- Die Live-Regie übernimmt die ruhigen Dokument-, Status- und Ablaufoberflächen
+  der neuen Arbeitsbereiche. Timer, lokale Auswahl, tatsächliches Live-Piece,
+  Präsentation, Ablauf-Sheet und feste Abschlussaktionen bleiben funktional
+  unverändert.
+- Autosave, Revisionskonflikte, Medien, Quellen, Werkzeuge, Präsentationswerte,
+  Favorit und getrennte Streamfassungen behalten ihre Persistenzgrenzen. Das
+  Usage-Schnellformular führt unveränderte Langtexte serverseitig mit und kann
+  sie deshalb nicht durch fehlende Formularfelder leeren. Es gibt keine
+  Datenbankmigration und keine Änderung an Live-Regie, Suche, API oder Rechten.
+
+Geprüft wurden Lint, Typprüfung, Produktionsbuild, 64 von 64 Verhaltenstests und
+22 von 22 Chromium-Abläufe. Die visuelle Matrix umfasst gefüllte und leere Pieces,
+Streamfassung und Live-Regie bei 1440/1280 × 900/1000, einen schmalen Desktop bei
+960 × 900, kompakte Live-Fenster bei 900/670 × 450 sowie mobile Piece- und
+Live-Ansichten. Safari und echte Mobilgeräte bleiben mangels Umgebung offen.
+
 ## Redaktionelle Werkbänke 0.8.1
 
 - Der Piece-Editor führt ohne vorgeschaltete Leerfläche direkt vom internen

migrations/0021_post_production.sql

@@ -0,0 +1,127 @@
+CREATE TABLE post_recording_parts (
+	id TEXT PRIMARY KEY,
+	show_id TEXT NOT NULL REFERENCES shows(id) ON DELETE CASCADE,
+	label TEXT NOT NULL,
+	position INTEGER NOT NULL CHECK (position >= 0),
+	media_file_path TEXT NOT NULL DEFAULT '',
+	frame_rate REAL CHECK (frame_rate IS NULL OR (frame_rate > 0 AND frame_rate <= 240)),
+	timebase INTEGER CHECK (timebase IS NULL OR (timebase > 0 AND timebase <= 240)),
+	created_at_utc TEXT NOT NULL,
+	UNIQUE (show_id, position)
+);
+
+CREATE INDEX idx_post_recording_parts_show
+	ON post_recording_parts(show_id, position);
+
+CREATE TABLE post_source_files (
+	id TEXT PRIMARY KEY,
+	show_id TEXT NOT NULL REFERENCES shows(id) ON DELETE CASCADE,
+	recording_part_id TEXT REFERENCES post_recording_parts(id) ON DELETE SET NULL,
+	original_name TEXT NOT NULL,
+	storage_name TEXT NOT NULL UNIQUE,
+	sha256 TEXT NOT NULL,
+	byte_size INTEGER NOT NULL CHECK (byte_size > 0),
+	content TEXT NOT NULL,
+	transcript_text TEXT NOT NULL DEFAULT '',
+	timecodes_json TEXT NOT NULL DEFAULT '[]',
+	imported_at_utc TEXT NOT NULL,
+	UNIQUE (show_id, sha256)
+);
+
+CREATE INDEX idx_post_source_files_show
+	ON post_source_files(show_id, imported_at_utc);
+
+CREATE TABLE post_items (
+	id TEXT PRIMARY KEY,
+	show_id TEXT NOT NULL REFERENCES shows(id) ON DELETE CASCADE,
+	kind TEXT NOT NULL CHECK (kind IN ('youtube', 'clip', 'highlight')),
+	title TEXT NOT NULL,
+	status TEXT NOT NULL CHECK (status IN ('draft', 'review', 'approved', 'editing', 'done', 'published')),
+	recording_part_id TEXT REFERENCES post_recording_parts(id) ON DELETE SET NULL,
+	source_file_id TEXT REFERENCES post_source_files(id) ON DELETE SET NULL,
+	piece_id TEXT REFERENCES pieces(id) ON DELETE SET NULL,
+	notes TEXT NOT NULL DEFAULT '',
+	revision INTEGER NOT NULL DEFAULT 1 CHECK (revision >= 1),
+	position INTEGER NOT NULL CHECK (position >= 0),
+	created_at_utc TEXT NOT NULL,
+	updated_at_utc TEXT NOT NULL,
+	UNIQUE (show_id, kind, position)
+);
+
+CREATE INDEX idx_post_items_show_kind
+	ON post_items(show_id, kind, position);
+
+CREATE TABLE post_youtube_videos (
+	item_id TEXT PRIMARY KEY REFERENCES post_items(id) ON DELETE CASCADE,
+	description TEXT NOT NULL DEFAULT '',
+	title_variants_json TEXT NOT NULL DEFAULT '[]',
+	thumbnail_concept TEXT NOT NULL DEFAULT '',
+	thumbnail_text TEXT NOT NULL DEFAULT '',
+	publication_status TEXT NOT NULL DEFAULT 'unpublished'
+		CHECK (publication_status IN ('unpublished', 'scheduled', 'published')),
+	published_at_utc TEXT,
+	youtube_url TEXT NOT NULL DEFAULT '',
+	video_format TEXT NOT NULL DEFAULT '16:9'
+);
+
+CREATE TABLE post_social_clips (
+	item_id TEXT PRIMARY KEY REFERENCES post_items(id) ON DELETE CASCADE,
+	clip_type TEXT NOT NULL DEFAULT 'other'
+		CHECK (clip_type IN ('storytime', 'opinion', 'explanation', 'gaming', 'humor', 'other')),
+	original_transcript TEXT NOT NULL DEFAULT '',
+	start_seconds INTEGER CHECK (start_seconds IS NULL OR start_seconds >= 0),
+	end_seconds INTEGER CHECK (end_seconds IS NULL OR end_seconds >= 0),
+	dramaturgy_notes TEXT NOT NULL DEFAULT '',
+	edit_instructions TEXT NOT NULL DEFAULT '',
+	shorts_title TEXT NOT NULL DEFAULT '',
+	shorts_description TEXT NOT NULL DEFAULT '',
+	shorts_hashtags TEXT NOT NULL DEFAULT '',
+	tiktok_caption TEXT NOT NULL DEFAULT '',
+	instagram_caption TEXT NOT NULL DEFAULT '',
+	social_hashtags TEXT NOT NULL DEFAULT '',
+	primary_hook TEXT NOT NULL DEFAULT '',
+	alternative_hooks TEXT NOT NULL DEFAULT '',
+	endcard_text TEXT NOT NULL DEFAULT '',
+	alternative_endcards TEXT NOT NULL DEFAULT '',
+	framing_notes TEXT NOT NULL DEFAULT '',
+	subtitle_notes TEXT NOT NULL DEFAULT '',
+	subtitle_srt TEXT NOT NULL DEFAULT '',
+	video_format TEXT NOT NULL DEFAULT '9:16',
+	target_tiktok INTEGER NOT NULL DEFAULT 1 CHECK (target_tiktok IN (0, 1)),
+	target_instagram INTEGER NOT NULL DEFAULT 1 CHECK (target_instagram IN (0, 1)),
+	target_shorts INTEGER NOT NULL DEFAULT 1 CHECK (target_shorts IN (0, 1)),
+	CHECK (end_seconds IS NULL OR start_seconds IS NULL OR end_seconds > start_seconds)
+);
+
+CREATE TABLE post_twitch_highlights (
+	item_id TEXT PRIMARY KEY REFERENCES post_items(id) ON DELETE CASCADE,
+	description TEXT NOT NULL DEFAULT '',
+	original_transcript TEXT NOT NULL DEFAULT '',
+	start_seconds INTEGER CHECK (start_seconds IS NULL OR start_seconds >= 0),
+	end_seconds INTEGER CHECK (end_seconds IS NULL OR end_seconds >= 0),
+	edit_instructions TEXT NOT NULL DEFAULT '',
+	publication_notes TEXT NOT NULL DEFAULT '',
+	video_format TEXT NOT NULL DEFAULT '16:9',
+	twitch_url TEXT NOT NULL DEFAULT '',
+	CHECK (end_seconds IS NULL OR start_seconds IS NULL OR end_seconds > start_seconds)
+);
+
+CREATE TABLE post_thumbnails (
+	id TEXT PRIMARY KEY,
+	youtube_item_id TEXT NOT NULL REFERENCES post_youtube_videos(item_id) ON DELETE CASCADE,
+	storage_name TEXT NOT NULL UNIQUE,
+	original_name TEXT NOT NULL,
+	mime_type TEXT NOT NULL,
+	byte_size INTEGER NOT NULL CHECK (byte_size > 0),
+	alt_text TEXT NOT NULL DEFAULT '',
+	position INTEGER NOT NULL CHECK (position >= 0),
+	is_selected INTEGER NOT NULL DEFAULT 0 CHECK (is_selected IN (0, 1)),
+	created_at_utc TEXT NOT NULL,
+	UNIQUE (youtube_item_id, position)
+);
+
+CREATE INDEX idx_post_thumbnails_item
+	ON post_thumbnails(youtube_item_id, position);
+
+CREATE UNIQUE INDEX idx_post_one_selected_thumbnail
+	ON post_thumbnails(youtube_item_id) WHERE is_selected = 1;

migrations/0022_post_quick_workbench.sql

@@ -0,0 +1,15 @@
+ALTER TABLE post_social_clips
+	ADD COLUMN social_caption TEXT NOT NULL DEFAULT '';
+
+UPDATE post_social_clips
+SET social_caption = trim(
+	CASE
+		WHEN trim(tiktok_caption) != '' THEN trim(tiktok_caption)
+		ELSE trim(instagram_caption)
+	END ||
+	CASE
+		WHEN trim(social_hashtags) != '' THEN char(10) || char(10) || trim(social_hashtags)
+		ELSE ''
+	END
+)
+WHERE social_caption = '';

package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "sendewerk",
-	"version": "0.8.1",
+	"version": "0.9.0",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "sendewerk",
-			"version": "0.8.1",
+			"version": "0.9.0",
 			"dependencies": {
 				"@node-rs/argon2": "^2.2.2",
 				"@tiptap/core": "^3.32.0",

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "sendewerk",
 	"private": true,
-	"version": "0.8.1",
+	"version": "0.9.0",
 	"type": "module",
 	"engines": {
 		"node": ">=22.17 <25"

scripts/seed.mjs

@@ -296,6 +296,17 @@ export function seed(databasePath = getPaths().database) {
 					1,
 					timestamp,
 					timestamp
+				],
+				[
+					'show-completed-demo',
+					'Frühere Sendung: Linux, Spiele und Netzkultur',
+					'2026-10-09T18:00:00.000Z',
+					'Linux, Spiele und Netzkultur | heinzlive',
+					'Eine abgeschlossene Beispielsendung für die Postproduktion.',
+					'completed',
+					1,
+					timestamp,
+					timestamp
 				]
 			]
 		);
@@ -320,7 +331,8 @@ export function seed(databasePath = getPaths().database) {
 				['games-first', 'show-games-evening', 'Spiel 1', 'cat-game', 1, 2700, 0],
 				['games-chat', 'show-games-evening', 'Pause & Chat', 'cat-jc', 2, 600, 0],
 				['games-second', 'show-games-evening', 'Spiel 2', 'cat-game', 3, 2700, 0],
-				['reserve-bank-show-games-evening', 'show-games-evening', 'Reservebank', null, 4, null, 1]
+				['reserve-bank-show-games-evening', 'show-games-evening', 'Reservebank', null, 4, null, 1],
+				['reserve-bank-show-completed-demo', 'show-completed-demo', 'Reservebank', null, 0, null, 1]
 			]
 		);
 
@@ -447,6 +459,21 @@ export function seed(databasePath = getPaths().database) {
 				 )`
 			)
 			.run();
+		const hasCompletionSchema = database
+			.prepare("SELECT 1 FROM pragma_table_info('shows') WHERE name = 'completed_at_utc'")
+			.get();
+		if (hasCompletionSchema) {
+			database
+				.prepare("UPDATE shows SET completed_at_utc = ? WHERE id = 'show-completed-demo'")
+				.run('2026-10-10T00:00:00.000Z');
+			database
+				.prepare(
+					`INSERT OR IGNORE INTO show_finalizations
+					 (show_id, command_id, source_revision, finalized_by_user_id, finalized_at_utc)
+					 VALUES ('show-completed-demo', 'seed-completed-demo', 1, NULL, ?)`
+				)
+				.run('2026-10-10T00:00:00.000Z');
+		}
 	});
 
 	seedDatabase();

src/lib/components/AppIcon.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	let { name, label, size = '1em' }: { name: string; label?: string; size?: string } = $props();
+	let { name, label, size = '1.1em' }: { name: string; label?: string; size?: string } = $props();
 </script>
 
 <svg

src/lib/components/FundusNavigation.svelte

@@ -6,9 +6,23 @@
 	let {
 		filters,
 		counts,
-		topics
+		topics,
+		formats = [],
+		categories = [],
+		editor,
+		oneditorclose
 	}: {
-		filters: { query: string; status: string; topicId: string; favorites: boolean; view: string };
+		filters: {
+			query: string;
+			status: string;
+			formatId?: string;
+			topicId: string;
+			categoryId?: string;
+			includeUsed?: boolean;
+			includePlanned?: boolean;
+			favorites: boolean;
+			view: string;
+		};
 		counts: {
 			all: number;
 			inbox: number;
@@ -21,6 +35,26 @@
 			topics: Record<string, number>;
 		};
 		topics: { id: string; name: string; iconName: string }[];
+		formats?: { id: string; name: string }[];
+		categories?: { id: string; name: string }[];
+		editor?: {
+			current: {
+				id: string;
+				title: string;
+				status: string;
+				durationSeconds: number;
+				isFavorite: boolean;
+			};
+			pieces: {
+				id: string;
+				title: string;
+				status: string;
+				durationSeconds: number;
+				isFavorite: boolean;
+			}[];
+			search: string;
+		};
+		oneditorclose?: () => void;
 	} = $props();
 	let collapsed = $state(false);
 	let searchInput = $state<HTMLInputElement>();
@@ -92,13 +126,31 @@
 			active: false
 		}
 	]);
+	let editorPieces = $derived(
+		editor
+			? editor.pieces.some((piece) => piece.id === editor.current.id)
+				? editor.pieces
+				: [editor.current, ...editor.pieces]
+			: []
+	);
+	const statusLabels: Record<string, string> = {
+		inbox: 'Eingang',
+		preparing: 'In Vorbereitung',
+		ready: 'Sendefertig',
+		archived: 'Archiviert'
+	};
 </script>
 
-<aside class="fundus-navigation" class:collapsed aria-label="Pieces-Navigation">
+<aside
+	class="fundus-navigation"
+	class:collapsed
+	class:editor-context={editor}
+	aria-label={editor ? 'Piece wechseln' : 'Pieces-Navigation'}
+>
 	<header>
 		<div>
-			<p class="eyebrow">Bibliothek</p>
+			<p class="eyebrow">{editor ? 'Aktuelle Auswahl' : 'Bibliothek'}</p>
-			<h1>Pieces</h1>
+			<h1>{editor ? 'Piece wechseln' : 'Pieces'}</h1>
 		</div>
 		<button
 			type="button"
@@ -107,8 +159,113 @@
 			aria-expanded={!collapsed}
 			><AppIcon name={collapsed ? 'chevron-right' : 'chevron-left'} /></button
 		>
+		{#if editor && oneditorclose}<button
+				class="editor-navigation-close"
+				type="button"
+				onclick={oneditorclose}
+				aria-label="Piece-Liste schließen"><AppIcon name="xmark" /></button
+			>{/if}
 	</header>
-	{#if collapsed}
+	{#if editor}
+		<a class="editor-overview-link" href={`/fundus${editor.search}`}
+			><AppIcon name="chevron-left" /><span>Zur Übersicht</span></a
+		>
+		{#if !collapsed}
+			<form
+				class="context-search editor-context-search"
+				method="GET"
+				action={`/fundus/${editor.current.id}`}
+				role="search"
+			>
+				{#if filters.status}<input type="hidden" name="status" value={filters.status} />{/if}
+				{#if filters.formatId}<input type="hidden" name="format" value={filters.formatId} />{/if}
+				{#if filters.topicId}<input type="hidden" name="topic" value={filters.topicId} />{/if}
+				{#if filters.categoryId}<input
+						type="hidden"
+						name="category"
+						value={filters.categoryId}
+					/>{/if}
+				{#if filters.favorites}<input type="hidden" name="favorites" value="1" />{/if}
+				{#if filters.view}<input type="hidden" name="view" value={filters.view} />{/if}
+				{#if filters.includeUsed}<input type="hidden" name="includeUsed" value="1" />{/if}
+				{#if filters.includePlanned}<input type="hidden" name="includePlanned" value="1" />{/if}
+				<label
+					><AppIcon name="magnifying-glass" /><span class="sr-only">Pieces durchsuchen</span><input
+						bind:this={searchInput}
+						name="q"
+						type="search"
+						value={filters.query}
+						placeholder="Auswahl durchsuchen"
+					/></label
+				>
+			</form>
+			<details class="editor-piece-filters">
+				<summary><AppIcon name="list-check" /> Filter</summary>
+				<form method="GET" action={`/fundus/${editor.current.id}`}>
+					{#if filters.query}<input type="hidden" name="q" value={filters.query} />{/if}
+					{#if filters.view}<input type="hidden" name="view" value={filters.view} />{/if}
+					{#if filters.includeUsed}<input type="hidden" name="includeUsed" value="1" />{/if}
+					{#if filters.includePlanned}<input type="hidden" name="includePlanned" value="1" />{/if}
+					<label
+						>Status<select name="status" aria-label="Nach Bearbeitungsstand filtern"
+							><option value="">Aktive Pieces</option><option
+								value="preparing"
+								selected={filters.status === 'preparing'}>In Vorbereitung</option
+							><option value="ready" selected={filters.status === 'ready'}>Sendefertig</option
+							></select
+						></label
+					>
+					<label
+						>Format<select name="format" aria-label="Nach Format filtern"
+							><option value="">Alle Formate</option>{#each formats as format (format.id)}<option
+									value={format.id}
+									selected={filters.formatId === format.id}>{format.name}</option
+								>{/each}</select
+						></label
+					>
+					<label
+						>Thema<select name="topic" aria-label="Nach Thema filtern"
+							><option value="">Alle Themen</option>{#each topics as topic (topic.id)}<option
+									value={topic.id}
+									selected={filters.topicId === topic.id}>{topic.name}</option
+								>{/each}</select
+						></label
+					>
+					<label
+						>Abschnitt<select name="category" aria-label="Nach Abschnitt filtern"
+							><option value="">Alle Abschnitte</option
+							>{#each categories as category (category.id)}<option
+									value={category.id}
+									selected={filters.categoryId === category.id}>{category.name}</option
+								>{/each}</select
+						></label
+					>
+					<label class="editor-filter-check"
+						><input type="checkbox" name="favorites" value="1" checked={filters.favorites} /> Nur Favoriten</label
+					>
+					<button class="secondary-button" type="submit">Filter anwenden</button>
+				</form>
+			</details>
+		{/if}
+		<nav class="editor-piece-list" aria-label="Gefilterte Pieces">
+			{#each editorPieces as piece (piece.id)}
+				<a
+					href={`/fundus/${piece.id}${editor.search}`}
+					class:active={piece.id === editor.current.id}
+					aria-current={piece.id === editor.current.id ? 'page' : undefined}
+				>
+					<AppIcon name={piece.isFavorite ? 'star' : 'newspaper'} />
+					<span
+						><strong>{piece.title}</strong><small
+							>{statusLabels[piece.status] ?? piece.status} · {Math.round(
+								piece.durationSeconds / 60
+							)} Min.</small
+						></span
+					>
+				</a>
+			{/each}
+		</nav>
+	{:else if collapsed}
 		<button
 			class="collapsed-search-button"
 			type="button"
@@ -132,7 +289,7 @@
 			>
 		</form>
 	{/if}
-	<nav>
+	{#if !editor}<nav>
 			{#each fundusLinks as item (item.href)}
 				<a
 					href={item.href}
@@ -142,8 +299,8 @@
 					<AppIcon name={item.icon} /><span>{item.label}</span><strong>{item.count}</strong>
 				</a>
 			{/each}
-	</nav>
+		</nav>{/if}
-	{#if topics.length}
+	{#if !editor && topics.length}
 		<section>
 			<h2>Themen</h2>
 			<nav aria-label="Themenfilter">

src/lib/components/NavIcon.svelte

@@ -12,7 +12,7 @@
 	let iconName = $derived(aliases[name] ?? name);
 </script>
 
-<AppIcon name={iconName} size="1.25rem" />
+<AppIcon name={iconName} size="1.4rem" />
 
 <style>
 	:global(.app-icon) {

src/lib/components/PieceEditorDialog.svelte

@@ -7,7 +7,6 @@
 		activeSection = $bindable(),
 		onrequestclose,
 		inline = false,
-		sidePanel = false,
 		header,
 		children,
 		footer
@@ -16,13 +15,13 @@
 		activeSection: 'script' | 'research' | 'presentation';
 		onrequestclose: () => void;
 		inline?: boolean;
-		sidePanel?: boolean;
 		header: Snippet;
 		children: Snippet;
-		footer: Snippet;
+		footer?: Snippet;
 	} = $props();
 
 	let dialog = $state<HTMLDialogElement>();
+	let closing = $state(false);
 	let workspace: HTMLDivElement;
 	const scrollPositions = { script: 0, research: 0, presentation: 0 };
 
@@ -35,24 +34,38 @@
 
 	export function showModal() {
 		if (!inline && dialog && !dialog.open) {
-			if (sidePanel && window.matchMedia('(min-width: 52.01rem)').matches) dialog.show();
+			closing = false;
-			else dialog.showModal();
+			dialog.showModal();
 		}
 	}
 
 	export function close() {
-		if (!inline) dialog?.close();
+		if (!inline) void requestClose();
+	}
+
+	async function requestClose() {
+		if (inline || closing) return;
+		closing = true;
+		await tick();
+		const closeAnimation = dialog
+			?.getAnimations()
+			.find((animation) => animation.effect instanceof KeyframeEffect);
+		if (closeAnimation) {
+			try {
+				await closeAnimation.finished;
+			} catch {
+				// A navigation may remove the dialog while its visual exit is finishing.
+			}
+		}
+		onrequestclose();
 	}
 </script>
 
 {#snippet editorChrome()}
 	<header class="piece-dialog-header">
 		<div class="piece-dialog-heading">{@render header()}</div>
-		<button
+		<button class="dialog-close" type="button" aria-label="Editor schließen" onclick={requestClose}
-			class="dialog-close"
+			><AppIcon name="xmark" /></button
-			type="button"
-			aria-label="Editor schließen"
-			onclick={onrequestclose}><AppIcon name="xmark" /></button
 		>
 	</header>
 	{#if !inline}
@@ -78,7 +91,7 @@
 		</nav>
 	{/if}
 	<div bind:this={workspace} class="piece-dialog-workspace">{@render children()}</div>
-	<footer class="piece-dialog-footer">{@render footer()}</footer>
+	{#if footer}<footer class="piece-dialog-footer">{@render footer()}</footer>{/if}
 {/snippet}
 
 {#if inline}
@@ -88,14 +101,14 @@
 {:else}
 	<dialog
 		bind:this={dialog}
-		class="piece-editor-dialog"
+		class:closing
-		class:piece-editor-side-panel={sidePanel}
+		class="piece-editor-dialog fundus-editor-surface"
 		aria-labelledby={labelledby}
 		oncancel={(event) => {
 			event.preventDefault();
-			onrequestclose();
+			requestClose();
 		}}
-		onclick={(event) => event.target === dialog && onrequestclose()}
+		onclick={(event) => event.target === dialog && requestClose()}
 	>
 		{@render editorChrome()}
 	</dialog>

src/lib/components/PostNavigation.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+	/* eslint-disable svelte/no-navigation-without-resolve -- href() starts from resolve('/post') and adds local filters */
+	import { onMount, tick } from 'svelte';
+	import { resolve } from '$app/paths';
+	import { SvelteURLSearchParams } from 'svelte/reactivity';
+	import AppIcon from './AppIcon.svelte';
+
+	let {
+		query,
+		progress,
+		sort,
+		counts
+	}: {
+		query: string;
+		progress: string;
+		sort: string;
+		counts: Record<string, number>;
+	} = $props();
+	let collapsed = $state(false);
+	let searchInput = $state<HTMLInputElement>();
+
+	const links = $derived([
+		{ label: 'Alle Streams', value: '', icon: 'clapperboard', count: counts.all },
+		{
+			label: 'Noch nicht begonnen',
+			value: 'Noch nicht begonnen',
+			icon: 'file',
+			count: counts.notStarted
+		},
+		{
+			label: 'In Bearbeitung',
+			value: 'In Bearbeitung',
+			icon: 'pen',
+			count: counts.inProgress
+		},
+		{ label: 'Fertig', value: 'Fertig', icon: 'circle-check', count: counts.done },
+		{
+			label: 'Veröffentlicht',
+			value: 'Veröffentlicht',
+			icon: 'display',
+			count: counts.published
+		}
+	]);
+
+	onMount(() => {
+		collapsed = localStorage.getItem('sendewerk-post-navigation') === 'collapsed';
+	});
+
+	function toggle() {
+		collapsed = !collapsed;
+		localStorage.setItem('sendewerk-post-navigation', collapsed ? 'collapsed' : 'open');
+	}
+
+	async function revealSearch() {
+		if (collapsed) toggle();
+		await tick();
+		searchInput?.focus();
+	}
+
+	function href(value: string) {
+		const params = new SvelteURLSearchParams();
+		if (query) params.set('q', query);
+		if (value) params.set('progress', value);
+		if (sort !== 'newest') params.set('sort', sort);
+		const search = params.toString();
+		const base = resolve('/post');
+		return search ? `${base}?${search}` : base;
+	}
+</script>
+
+<aside class="fundus-navigation post-navigation-panel" class:collapsed aria-label="Post-Navigation">
+	<header>
+		<div>
+			<p class="eyebrow">Nach dem Stream</p>
+			<h1>Postproduktion</h1>
+		</div>
+		<button
+			type="button"
+			onclick={toggle}
+			aria-label={collapsed ? 'Post-Navigation ausklappen' : 'Post-Navigation einklappen'}
+			aria-expanded={!collapsed}
+			><AppIcon name={collapsed ? 'chevron-right' : 'chevron-left'} /></button
+		>
+	</header>
+	{#if collapsed}
+		<button
+			class="collapsed-search-button"
+			type="button"
+			onclick={revealSearch}
+			aria-label="Postproduktion durchsuchen"><AppIcon name="magnifying-glass" /></button
+		>
+	{:else}
+		<form class="context-search" method="GET" action="/post" role="search">
+			{#if progress}<input type="hidden" name="progress" value={progress} />{/if}
+			{#if sort !== 'newest'}<input type="hidden" name="sort" value={sort} />{/if}
+			<label
+				><AppIcon name="magnifying-glass" /><span class="sr-only">Streams durchsuchen</span><input
+					bind:this={searchInput}
+					name="q"
+					type="search"
+					value={query}
+					placeholder="Streams durchsuchen"
+				/></label
+			>
+		</form>
+	{/if}
+	<nav>
+		{#each links as item (item.value)}
+			<a
+				href={href(item.value)}
+				class:active={progress === item.value}
+				aria-current={progress === item.value ? 'page' : undefined}
+				><AppIcon name={item.icon} /><span>{item.label}</span><strong>{item.count}</strong></a
+			>
+		{/each}
+	</nav>
+	{#if !collapsed}
+		<section class="post-navigation-sort">
+			<h2>Sortierung</h2>
+			<form method="GET" action="/post">
+				{#if query}<input type="hidden" name="q" value={query} />{/if}
+				{#if progress}<input type="hidden" name="progress" value={progress} />{/if}
+				<label
+					><span class="sr-only">Sortierung</span><select
+						name="sort"
+						value={sort}
+						onchange={(event) => event.currentTarget.form?.requestSubmit()}
+						><option value="newest">Neueste zuerst</option><option value="oldest"
+							>Älteste zuerst</option
+						><option value="title">Titel</option><option value="clips">Meiste Clips</option></select
+					></label
+				>
+			</form>
+		</section>
+	{/if}
+</aside>

src/lib/components/RichMarkdownField.svelte

@@ -44,6 +44,10 @@
 		return transaction >= 0 && (editor?.isActive(name, attributes) ?? false);
 	}
 
+	function preserveSelection(event: MouseEvent) {
+		event.preventDefault();
+	}
+
 	function showRichText() {
 		if (!editor) return;
 		editor.commands.setContent(value, { contentType: 'markdown', emitUpdate: false });
@@ -90,24 +94,30 @@
 		<span
 			>{label}{#if privateField}<small>Nur intern</small>{/if}</span
 		>
+		<button class="markdown-toolbar-toggle" type="button" aria-label={`${label} formatieren`}
+			><AppIcon name="pen" /> Formatieren</button
+		>
 		<span class="markdown-toolbar" role="toolbar" aria-label={`${label} formatieren`}>
 			{#if !sourceMode}
 				<button
 					class:active={active('bold')}
 					type="button"
 					aria-label="Fett"
+					onmousedown={preserveSelection}
 					onclick={() => command((chain) => chain.toggleBold().run())}><strong>B</strong></button
 				>
 				<button
 					class:active={active('italic')}
 					type="button"
 					aria-label="Kursiv"
+					onmousedown={preserveSelection}
 					onclick={() => command((chain) => chain.toggleItalic().run())}><em>I</em></button
 				>
 				<button
 					class:active={active('bulletList')}
 					type="button"
 					aria-label="Liste"
+					onmousedown={preserveSelection}
 					onclick={() => command((chain) => chain.toggleBulletList().run())}
 					><AppIcon name="list-check" /></button
 				>
@@ -115,15 +125,21 @@
 					class:active={active('heading', { level: 2 })}
 					type="button"
 					aria-label="Zwischenüberschrift"
+					onmousedown={preserveSelection}
 					onclick={() => command((chain) => chain.toggleHeading({ level: 2 }).run())}>H2</button
 				>
-				<button class:active={active('link')} type="button" aria-label="Link" onclick={editLink}
+				<button
-					><AppIcon name="link" /></button
+					class:active={active('link')}
+					type="button"
+					aria-label="Link"
+					onmousedown={preserveSelection}
+					onclick={editLink}><AppIcon name="link" /></button
 				>
 			{/if}
 			<button
 				type="button"
 				class:active={sourceMode}
+				onmousedown={preserveSelection}
 				onclick={() => (sourceMode ? showRichText() : (sourceMode = true))}
 				>{sourceMode ? 'Visuell' : 'Markdown'}</button
 			>

src/lib/components/StreamInspector.svelte

@@ -0,0 +1,258 @@
+<script lang="ts">
+	import { enhance, type SubmitFunction } from '$app/forms';
+	import { resolve } from '$app/paths';
+	import type { PieceUsage, Show, ShowSection } from '#lib/server/shows.js';
+
+	let {
+		show,
+		startsAtLocal,
+		categories,
+		section = null,
+		usage = null,
+		usageSectionName = '',
+		usageSectionId = '',
+		enhanceCommand,
+		copyText,
+		onshow
+	}: {
+		show: Show;
+		startsAtLocal: string;
+		categories: { id: string; name: string }[];
+		section?: ShowSection | null;
+		usage?: PieceUsage | null;
+		usageSectionName?: string;
+		usageSectionId?: string;
+		enhanceCommand: SubmitFunction;
+		copyText: (label: string, value: string) => Promise<void>;
+		onshow: () => void;
+	} = $props();
+
+	function durationInMinutes(seconds: number) {
+		return Number((seconds / 60).toFixed(2));
+	}
+</script>
+
+<aside class="stream-inspector builder-pane" aria-label="Streamdetails">
+	<header class="stream-inspector-header">
+		<div>
+			<p class="eyebrow">{usage ? 'Streamfassung' : section ? 'Abschnitt' : 'Stream'}</p>
+			{#if usage || section}<button class="text-button" type="button" onclick={onshow}
+					>Streamdaten</button
+				>{/if}
+		</div>
+		<h2>{usage?.title ?? section?.name ?? 'Streamdaten und Twitch-Texte'}</h2>
+		{#if usage}
+			<p>
+				{usageSectionName || 'Reservebank'} · {usage.topics.map((topic) => topic.name).join(', ') ||
+					'Ohne Thema'}
+			</p>
+		{:else if section}
+			<p>
+				{section.category ?? 'Ohne Kategorie'} · {section.usages.length}
+				{section.usages.length === 1 ? 'Piece' : 'Pieces'}
+			</p>
+		{:else}
+			<p>Schnelle Änderungen am geplanten Stream.</p>
+		{/if}
+	</header>
+
+	{#if usage}
+		<form
+			id="stream-inspector-form"
+			use:enhance={enhanceCommand}
+			method="POST"
+			action="?/updateUsageMetadata"
+			class="stream-inspector-form"
+		>
+			<input type="hidden" name="revision" value={show.revision} />
+			<input type="hidden" name="usageId" value={usage.id} />
+			<label
+				>Interner Titel<input name="title" required maxlength="200" value={usage.title} /></label
+			>
+			<label
+				>Publikumstitel<input name="outputTitle" maxlength="200" value={usage.outputTitle} /></label
+			>
+			<div class="stream-inspector-grid">
+				<label
+					>Dauer in Minuten<input
+						name="durationMinutes"
+						type="number"
+						min="0"
+						max="1440"
+						step="any"
+						value={durationInMinutes(usage.durationSeconds)}
+					/></label
+				>
+				<label
+					>Vorbereitungsstatus<select name="preparationStatus" value={usage.preparationStatus}
+						><option value="preparing">In Vorbereitung</option><option value="ready"
+							>Sendefertig</option
+						></select
+					></label
+				>
+			</div>
+			<label
+				>Vorbereitungsaufwand<select name="preparationEffort" value={usage.preparationEffort ?? ''}
+					><option value="">Nicht angegeben</option><option value="low">Gering</option><option
+						value="medium">Mittel</option
+					><option value="high">Hoch</option></select
+				></label
+			>
+			<label
+				>Eigene Notizen<textarea name="ownNotes" maxlength="20000" rows="7"
+					>{usage.ownNotes}</textarea
+				></label
+			>
+		</form>
+		<details class="stream-inspector-commands">
+			<summary>Weitere Aktionen</summary>
+			<div>
+				<form use:enhance={enhanceCommand} method="POST" action="?/refreshUsage">
+					<input type="hidden" name="revision" value={show.revision} />
+					<input type="hidden" name="usageId" value={usage.id} />
+					<button class="text-button" type="submit" disabled={!usage.originalPieceId}
+						>Aus Piece aktualisieren</button
+					>
+				</form>
+				<form use:enhance={enhanceCommand} method="POST" action="?/duplicateUsage">
+					<input type="hidden" name="revision" value={show.revision} />
+					<input type="hidden" name="usageId" value={usage.id} />
+					<button class="text-button" type="submit">Duplizieren</button>
+				</form>
+				<form use:enhance={enhanceCommand} method="POST" action="?/moveUsage">
+					<input type="hidden" name="revision" value={show.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="" selected={!usageSectionId}>Reservebank</option
+							>{#each show.sections as target (target.id)}<option
+									value={target.id}
+									selected={target.id === usageSectionId}>{target.name}</option
+								>{/each}</select
+						></label
+					>
+					<button class="text-button" type="submit">Verschieben</button>
+				</form>
+				<form
+					use:enhance={enhanceCommand}
+					method="POST"
+					action="?/removeUsage"
+					onsubmit={(event) =>
+						!confirm('Piece aus diesem Stream entfernen?') && event.preventDefault()}
+				>
+					<input type="hidden" name="revision" value={show.revision} />
+					<input type="hidden" name="usageId" value={usage.id} />
+					<button class="text-button danger-text" type="submit">Aus Stream entfernen</button>
+				</form>
+			</div>
+		</details>
+		<footer class="stream-inspector-actions">
+			{#if usage.originalPieceId}
+				<a class="secondary-button" href={resolve('/fundus/[id]', { id: usage.originalPieceId })}
+					>Piece bearbeiten</a
+				>
+			{:else}
+				<span class="stream-inspector-note">Das Original ist nicht mehr verfügbar.</span>
+			{/if}
+			<button class="primary-button" type="submit" form="stream-inspector-form">Speichern</button>
+		</footer>
+	{:else if section}
+		<form
+			id="stream-inspector-form"
+			use:enhance={enhanceCommand}
+			method="POST"
+			action="?/updateSection"
+			class="stream-inspector-form"
+		>
+			<input type="hidden" name="revision" value={show.revision} />
+			<input type="hidden" name="sectionId" value={section.id} />
+			<label>Name<input name="name" required maxlength="200" value={section.name} /></label>
+			<label
+				>Kategorie<select name="categoryId"
+					><option value="">Ohne Kategorie</option
+					>{#each categories as category (category.id)}<option
+							value={category.id}
+							selected={section.categoryId === category.id}>{category.name}</option
+						>{/each}</select
+				></label
+			>
+			<label
+				>Explizite Dauer in Sekunden<input
+					name="explicitDurationSeconds"
+					type="number"
+					min="0"
+					max="86400"
+					value={section.explicitDurationSeconds ?? ''}
+					placeholder="Summe der Pieces"
+				/></label
+			>
+			<label
+				>Twitch-Tags<input
+					name="twitchTags"
+					maxlength="300"
+					value={section.twitchTags.join(', ')}
+					placeholder="Gaming, Deutsch"
+				/></label
+			>
+		</form>
+		<footer class="stream-inspector-actions">
+			<form
+				use:enhance={enhanceCommand}
+				method="POST"
+				action="?/removeSection"
+				onsubmit={(event) =>
+					!confirm('Abschnitt samt Einplanungen entfernen?') && event.preventDefault()}
+			>
+				<input type="hidden" name="revision" value={show.revision} />
+				<input type="hidden" name="sectionId" value={section.id} />
+				<button class="text-button danger-text" type="submit">Entfernen</button>
+			</form>
+			<button class="primary-button" type="submit" form="stream-inspector-form">Speichern</button>
+		</footer>
+	{:else}
+		<form
+			id="stream-inspector-form"
+			use:enhance={enhanceCommand}
+			method="POST"
+			action="?/saveMetadata"
+			class="stream-inspector-form"
+		>
+			<input type="hidden" name="revision" value={show.revision} />
+			<label>Interner Titel<input name="title" required maxlength="200" value={show.title} /></label
+			>
+			<label
+				>Termin<input name="startsAt" type="datetime-local" value={startsAtLocal} /><small
+					>Europe/Berlin</small
+				></label
+			>
+			<label
+				>Status<select name="status" value={show.status}
+					><option value="draft">Entwurf</option><option value="ready">Bereit</option><option
+						value="live">Live</option
+					></select
+				></label
+			>
+			<label
+				>Twitch-Titel<span class="copy-field"
+					><input name="twitchTitle" maxlength="200" value={show.twitchTitle} /><button
+						type="button"
+						onclick={() => copyText('Twitch-Titel', show.twitchTitle)}>Kopieren</button
+					></span
+				></label
+			>
+			<label
+				>Ankündigung<span class="copy-field"
+					><textarea name="announcementText" maxlength="20000" rows="7"
+						>{show.announcementText}</textarea
+					><button type="button" onclick={() => copyText('Ankündigung', show.announcementText)}
+						>Kopieren</button
+					></span
+				></label
+			>
+		</form>
+		<footer class="stream-inspector-actions single-action">
+			<button class="primary-button" type="submit" form="stream-inspector-form">Speichern</button>
+		</footer>
+	{/if}
+</aside>

src/lib/components/UsageEditorDialog.svelte

@@ -1,491 +0,0 @@
-<script lang="ts">
-	import { enhance, type SubmitFunction } from '$app/forms';
-	import { onMount, untrack } from 'svelte';
-	import RichMarkdownField from './RichMarkdownField.svelte';
-	import InlineTitleEditor from './InlineTitleEditor.svelte';
-	import NavIcon from './NavIcon.svelte';
-	import PieceEditorDialog from './PieceEditorDialog.svelte';
-	import PresentationDisplay from './PresentationDisplay.svelte';
-	import type { PieceUsage } from '#lib/server/shows.js';
-
-	let {
-		usage,
-		revision,
-		sectionId,
-		sections,
-		error,
-		enhanceCommand,
-		open = false
-	}: {
-		usage: PieceUsage;
-		revision: number;
-		sectionId: string;
-		sections: { id: string; name: string }[];
-		error?: string;
-		enhanceCommand: SubmitFunction;
-		open?: boolean;
-	} = $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, tools: usage.tools.map((tool) => ({ ...tool })) }))
-	);
-	let dirty = $state(false);
-	let selectedSourceId = $state(
-		untrack(
-			() => usage.sources.find((source) => source.url === usage.presentationSourceUrl)?.id ?? ''
-		)
-	);
-	onMount(() => {
-		if (open) editor.showModal();
-	});
-	let selectedMedia = $derived(
-		draft.media.find((media) => media.id === draft.presentationMediaId) ?? null
-	);
-
-	function durationInMinutes(seconds: number) {
-		return Number((seconds / 60).toFixed(2));
-	}
-
-	function previewHtml(value: string) {
-		return value
-			.replaceAll('&', '&amp;')
-			.replaceAll('<', '&lt;')
-			.replaceAll('>', '&gt;')
-			.replaceAll('"', '&quot;')
-			.replaceAll("'", '&#039;')
-			.replaceAll('\n', '<br>');
-	}
-
-	function requestClose() {
-		if (dirty && !confirm('Ungespeicherte Änderungen verwerfen und Editor schließen?')) return;
-		dirty = false;
-		editor.close();
-	}
-
-	function presentationSourceChanged(event: Event) {
-		selectedSourceId = (event.currentTarget as HTMLSelectElement).value;
-		const source = draft.sources.find((item) => item.id === selectedSourceId);
-		if (!source) return;
-		draft.presentationSourceLabel = source.label;
-		draft.presentationSourceUrl = source.url;
-		draft.presentationSourceTimecodeSeconds = source.timecodeSeconds;
-	}
-
-	let previewContent = $derived({
-		mode: draft.presentationMode,
-		topics: draft.topics.map((topic) => topic.name),
-		title: draft.outputTitle || draft.title,
-		html: previewHtml(draft.presentation),
-		source: draft.presentationSourceUrl
-			? {
-					label: draft.presentationSourceLabel,
-					url: draft.presentationSourceUrl,
-					timecodeSeconds: draft.presentationSourceTimecodeSeconds
-				}
-			: null,
-		previewTitle: draft.presentationTitle,
-		description: draft.presentationDescription,
-		imageUrl: draft.presentationMode === 'link' ? draft.presentationImageUrl : '',
-		siteName: draft.presentationSiteName,
-		provider: draft.presentationProvider,
-		providerId: draft.presentationProviderId,
-		embedUrl: '',
-		sources: [],
-		images: selectedMedia
-			? [{ id: selectedMedia.originalMediaId, altText: selectedMedia.altText }]
-			: []
-	});
-	let previewImageSrc = $derived(
-		selectedMedia && draft.presentationMode === 'text'
-			? '/media'
-			: selectedMedia && draft.presentationMode === 'image'
-				? `/media/${selectedMedia.originalMediaId}`
-				: ''
-	);
-
-	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}
-	sidePanel
->
-	{#snippet header()}
-		<p class="eyebrow">Streamfassung</p>
-		<InlineTitleEditor form={formId} bind:value={draft.title} oncommit={() => (dirty = true)} />
-		<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>Streamtext</h3>
-				</div>
-			</div>
-			<div class="piece-writing-stack">
-				<RichMarkdownField
-					name="intro"
-					label="Einleitung"
-					placeholder="Wie beginnt dieses Thema im Stream?"
-					bind:value={draft.intro}
-				/>
-				<RichMarkdownField
-					name="moderation"
-					label="Moderationsstichpunkte"
-					placeholder="Argumente, Fragen und Ablaufpunkte"
-					rows={10}
-					bind:value={draft.moderation}
-				/>
-				<RichMarkdownField
-					name="interaction"
-					label="Interaktion"
-					placeholder="Welche Frage möchtest du dem Chat stellen?"
-					privateField
-					bind:value={draft.interaction}
-				/>
-				<RichMarkdownField
-					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
-						>Vorbereitungsstatus<select
-							name="preparationStatus"
-							bind:value={draft.preparationStatus}
-						>
-							<option value="preparing">In Vorbereitung</option>
-							<option value="ready">Sendefertig</option>
-						</select></label
-					>
-					<label
-						>Vorbereitungsaufwand<select
-							name="preparationEffort"
-							bind:value={draft.preparationEffort}
-						>
-							<option value={null}>Nicht angegeben</option>
-							<option value="low">Gering</option>
-							<option value="medium">Mittel</option>
-							<option value="high">Hoch</option>
-						</select></label
-					>
-					<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">
-				<RichMarkdownField
-					name="research"
-					label="Private Recherche"
-					placeholder="Hintergrund, Prüfung und offene Fragen"
-					rows={10}
-					privateField
-					bind:value={draft.research}
-				/>
-				<RichMarkdownField
-					name="ownNotes"
-					label="Interne Notizen zu dieser Verwendung"
-					placeholder="Absprachen und Hinweise nur für diesen Stream"
-					privateField
-					bind:value={draft.ownNotes}
-				/>
-			</div>
-			<section class="piece-source-summary">
-				<p class="eyebrow">Snapshot-Quellen</p>
-				{#if draft.sources.length}
-					{#each draft.sources as source (source.id)}<div>
-							<strong>{source.label}</strong><small>{source.url}</small>
-						</div>{/each}
-				{:else}<p>Für diese Verwendung wurden keine Quellen kopiert.</p>{/if}
-			</section>
-			<section class="piece-source-editor">
-				<div class="piece-subsection-heading">
-					<div>
-						<p class="eyebrow">Snapshot</p>
-						<h3>Werkzeuge</h3>
-					</div>
-					<small>Name und Start-URL bleiben Teil der Streamfassung.</small>
-				</div>
-				{#if draft.tools.length}<div class="source-list">
-						{#each draft.tools as tool (tool.id)}<div class="source-row tool-assignment-row">
-								<input type="hidden" name="usageToolId" value={tool.id} />
-								<div class="tool-assignment-name">
-									<strong>{tool.name}</strong>{#if tool.startUrl}<small>{tool.startUrl}</small>{/if}
-								</div>
-								<label
-									>Arbeitslink<input
-										name="toolWorkUrl"
-										type="url"
-										maxlength="2000"
-										placeholder={tool.startUrl || 'https://…'}
-										bind:value={tool.workUrl}
-									/></label
-								>
-								<label>Notiz<input name="toolNote" maxlength="2000" bind:value={tool.note} /></label
-								>
-							</div>{/each}
-					</div>{:else}<p class="context-empty">Keine Werkzeuge in dieser Streamfassung.</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">
-					<p class="field-label">Präsentationsart</p>
-					<div class="presentation-mode-picker" role="group" aria-label="Darstellung">
-						{#each [['text', 'Text'], ['image', 'Nur Bild'], ['link', 'Linkvorschau'], ['video', 'Video']] as mode (mode[0])}
-							<label
-								><input
-									type="radio"
-									name="presentationMode"
-									value={mode[0]}
-									bind:group={draft.presentationMode}
-								/>{mode[1]}</label
-							>
-						{/each}
-					</div>
-					{#if draft.presentationMode === 'text'}
-						<label
-							>Öffentliche Überschrift<input
-								name="outputTitle"
-								maxlength="300"
-								placeholder="Optional, sonst interner Titel"
-								bind:value={draft.outputTitle}
-							/></label
-						>
-						<RichMarkdownField
-							name="presentation"
-							label="Öffentlicher Vorspann"
-							placeholder="Text für die Publikumsausgabe"
-							bind:value={draft.presentation}
-						/>
-					{:else}
-						<input type="hidden" name="outputTitle" value={draft.outputTitle} />
-						<input type="hidden" name="presentation" value={draft.presentation} />
-					{/if}
-					<input
-						type="hidden"
-						name="presentationSourceLabel"
-						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} />
-					<input type="hidden" name="presentationMediaId" value={draft.presentationMediaId ?? ''} />
-					{#if draft.presentationMode === 'link' || draft.presentationMode === 'video'}
-						<div class="presentation-settings">
-							<label class="wide-field"
-								>{draft.presentationMode === 'video' ? 'Video-URL' : 'Quelle/URL'}<select
-									bind:value={selectedSourceId}
-									onchange={presentationSourceChanged}
-								>
-									<option value="">Quelle auswählen</option>
-									{#each draft.sources as source (source.id)}
-										<option value={source.id}>{source.label || source.url}</option>
-									{/each}
-								</select></label
-							>
-							<label
-								>{draft.presentationMode === 'video' ? 'Videotitel' : 'Kartentitel'}<input
-									name="presentationTitle"
-									maxlength="300"
-									placeholder="Optionaler Anzeigetitel"
-									bind:value={draft.presentationTitle}
-								/></label
-							>
-							{#if draft.presentationMode === 'link'}
-								<label
-									>Vorschaubild-URL<input
-										name="presentationImageUrl"
-										type="url"
-										maxlength="2000"
-										placeholder="Aus der Linkvorschau"
-										bind:value={draft.presentationImageUrl}
-									/></label
-								>
-							{:else}
-								<input
-									type="hidden"
-									name="presentationImageUrl"
-									value={draft.presentationImageUrl}
-								/>
-							{/if}
-							<label class="wide-field"
-								>Anreißer<textarea
-									name="presentationDescription"
-									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>
-				{#if draft.media.length && ['text', 'image'].includes(draft.presentationMode)}<fieldset
-						class="usage-media-picker"
-					>
-						<legend>Hochgeladenes Präsentationsbild</legend>
-						{#if draft.presentationMode === 'text'}<label
-								><input
-									type="radio"
-									checked={!draft.presentationMediaId}
-									onchange={() => {
-										draft.presentationMediaId = null;
-										dirty = true;
-									}}
-								/> Kein Bild</label
-							>{/if}
-						<div class="media-grid">
-							{#each draft.media as media (media.id)}<label class="media-presentation-choice"
-									><input
-										type="radio"
-										checked={draft.presentationMediaId === media.id}
-										onchange={() => {
-											draft.presentationMediaId = media.id;
-											dirty = true;
-										}}
-									/><img src={`/media/${media.originalMediaId}`} alt={media.altText} /><span
-										>Auswählen</span
-									></label
-								>{/each}
-						</div>
-					</fieldset>{/if}
-				<aside class="piece-presentation-preview" aria-label="Präsentationsvorschau">
-					<PresentationDisplay content={previewContent} imageSrc={previewImageSrc} />
-				</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 Piece 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('Piece aus diesem Stream 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}
-					>Aus Stream 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/database.spec.ts

@@ -62,12 +62,12 @@ describe('database setup', () => {
 		database.close();
 
 		expect(counts).toEqual({
-			migrations: 20,
+			migrations: 22,
 			pieces: 6,
-			shows: 2,
+			shows: 3,
 			usages: 5,
 			templates: 2,
-			reserve_banks: 2
+			reserve_banks: 3
 		});
 		expect(databasePath).not.toBe(path.resolve('.data/sendewerk.sqlite'));
 	});

src/lib/server/live.ts

@@ -52,6 +52,7 @@ export type LiveView = {
 	show: {
 		id: string;
 		title: string;
+		startsAtUtc: string | null;
 		status: string;
 		revision: number;
 		totalDurationSeconds: number;
@@ -531,6 +532,7 @@ export function getLiveView(showId: string, nowValue?: Date): LiveView {
 		show: {
 			id: show.id,
 			title: show.title,
+			startsAtUtc: show.startsAtUtc,
 			status: show.status,
 			revision: show.revision,
 			totalDurationSeconds: show.totalDurationSeconds

src/lib/server/post-ai.ts

@@ -0,0 +1,45 @@
+/**
+ * Provider-neutral contract for a future Post-production assistant.
+ *
+ * This module deliberately performs no network request. A future adapter must
+ * require explicit user approval, identify the fields it proposes to change and
+ * return suggestions separately from persisted editorial data.
+ */
+export type PostAnalysisRequest = {
+	show: { id: string; title: string; startsAtUtc: string | null };
+	sources: {
+		id: string;
+		originalName: string;
+		recordingPartId: string | null;
+		content: string;
+	}[];
+	rules: {
+		materialIsAuthoritative: true;
+		preserveExactQuotes: true;
+		inventStatements: false;
+		considerLongStorytimes: true;
+		fixedCandidateQuota: false;
+	};
+};
+
+export type PostSuggestion = {
+	id: string;
+	kind: 'clip-candidate' | 'youtube-copy' | 'thumbnail-idea' | 'highlight-candidate';
+	sourceFileId: string;
+	startSeconds: number | null;
+	endSeconds: number | null;
+	exactQuote: string;
+	rationale: string;
+	fields: Record<string, string>;
+};
+
+export type PostAnalysisResult = {
+	provider: string;
+	model: string;
+	createdAtUtc: string;
+	suggestions: PostSuggestion[];
+};
+
+export interface PostAnalysisAdapter {
+	analyze(request: PostAnalysisRequest): Promise<PostAnalysisResult>;
+}

src/lib/server/post.spec.ts

@@ -0,0 +1,189 @@
+import { execFileSync } from 'node:child_process';
+import { mkdtempSync, rmSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import path from 'node:path';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { closeDatabase, getDatabase } from './database.js';
+import {
+	createPostItem,
+	createRecordingPart,
+	getExport,
+	getPostWorkspace,
+	getThumbnailFile,
+	importPostSource,
+	listPostPieceOptions,
+	listPostShows,
+	savePostItem,
+	uploadThumbnail
+} from './post.js';
+
+let directory: string;
+
+beforeEach(() => {
+	directory = mkdtempSync(path.join(tmpdir(), 'sendewerk-post-test-'));
+	process.env.SENDEWERK_DB_PATH = path.join(directory, 'test.sqlite');
+	process.env.SENDEWERK_UPLOAD_DIR = path.join(directory, 'uploads');
+	execFileSync(process.execPath, ['scripts/migrate.mjs'], { cwd: process.cwd(), env: process.env });
+	execFileSync(process.execPath, ['scripts/seed.mjs'], { cwd: process.cwd(), env: process.env });
+	getDatabase()
+		.prepare(
+			`UPDATE shows SET status = 'completed', completed_at_utc = ?, revision = revision + 1
+			 WHERE id = 'show-october'`
+		)
+		.run('2026-10-24T00:00:00.000Z');
+});
+
+afterEach(() => {
+	closeDatabase();
+	delete process.env.SENDEWERK_DB_PATH;
+	delete process.env.SENDEWERK_UPLOAD_DIR;
+	rmSync(directory, { recursive: true, force: true });
+});
+
+describe('Postproduktion', () => {
+	it('projects every completed show even before post-production starts', () => {
+		expect(listPostShows()).toContainEqual(
+			expect.objectContaining({
+				showId: 'show-october',
+				sourceCount: 0,
+				youtubeCount: 0,
+				clipCount: 0,
+				highlightCount: 0,
+				progress: 'Noch nicht begonnen'
+			})
+		);
+	});
+
+	it('keeps imported Markdown exact, extracts only present timecodes and rejects duplicates', async () => {
+		const content =
+			'# Kontext\n\n[00:01:12] Exaktes Zitat\n01:15:03 – Später Moment\nOhne Zeitmarke';
+		const sourceId = await importPostSource(
+			'show-october',
+			null,
+			new File([content], 'heinzlive-teil-1.md', { type: 'text/markdown' })
+		);
+		const source = getPostWorkspace('show-october').sources.find((item) => item.id === sourceId)!;
+		expect(source.timecodes).toEqual([
+			{ seconds: 72, label: 'Exaktes Zitat', line: 3 },
+			{ seconds: 4503, label: 'Später Moment', line: 4 }
+		]);
+		expect(source.transcriptText).toBe('Exaktes Zitat\nSpäter Moment');
+		await expect(
+			importPostSource(
+				'show-october',
+				null,
+				new File([content], 'anderer-name.md', { type: 'text/markdown' })
+			)
+		).rejects.toThrow('DUPLICATE_SOURCE');
+	});
+
+	it('defaults the only context source and offers only pieces used in the completed stream', async () => {
+		const sourceId = await importPostSource(
+			'show-october',
+			null,
+			new File(['# Kontext'], 'kontext.md', { type: 'text/markdown' })
+		);
+		const clipId = createPostItem('show-october', 'clip', 'Schneller Clip');
+		expect(
+			getPostWorkspace('show-october').items.find((item) => item.id === clipId)?.sourceFileId
+		).toBe(sourceId);
+		const pieces = listPostPieceOptions('show-october');
+		expect(pieces.length).toBeGreaterThan(0);
+		expect(pieces.every((piece) => piece.id !== 'piece-quiz')).toBe(true);
+	});
+
+	it('stores independent video, clip and highlight records with revision protection', () => {
+		const youtubeId = createPostItem('show-october', 'youtube', 'Uncut Teil 1');
+		const clipId = createPostItem('show-october', 'clip', 'Linux ist keine Religion');
+		const highlightId = createPostItem('show-october', 'highlight', 'Die Diskussion über Linux');
+		savePostItem('show-october', youtubeId, 1, {
+			title: 'Uncut Teil 1',
+			status: 'review',
+			description: '00:00 Begrüßung',
+			titleVariants: ['Variante A', 'Variante B'],
+			publicationStatus: 'unpublished',
+			videoFormat: '16:9'
+		});
+		savePostItem('show-october', clipId, 1, {
+			title: 'Linux ist keine Religion',
+			status: 'editing',
+			clipType: 'opinion',
+			originalTranscript: 'Das wurde genau so gesagt.',
+			startSeconds: 72,
+			endSeconds: 103,
+			primaryHook: 'Linux ist keine Religion!',
+			socialCaption: 'Gemeinsamer Text\n\n#linux #heinzlive',
+			videoFormat: '9:16',
+			targetTikTok: true,
+			targetInstagram: true,
+			targetShorts: true
+		});
+		savePostItem('show-october', highlightId, 1, {
+			title: 'Die Diskussion über Linux',
+			status: 'draft',
+			description: 'Ein längerer Ausschnitt.',
+			startSeconds: 60,
+			endSeconds: 360,
+			videoFormat: '16:9'
+		});
+		expect(() =>
+			savePostItem('show-october', clipId, 1, {
+				title: 'Veraltete Änderung',
+				status: 'done'
+			})
+		).toThrow('CONFLICT');
+		const workspace = getPostWorkspace('show-october');
+		expect(workspace.items).toEqual(
+			expect.arrayContaining([
+				expect.objectContaining({ id: youtubeId, description: '00:00 Begrüßung' }),
+				expect.objectContaining({
+					id: clipId,
+					originalTranscript: 'Das wurde genau so gesagt.',
+					socialCaption: 'Gemeinsamer Text\n\n#linux #heinzlive',
+					clipType: 'opinion'
+				}),
+				expect.objectContaining({ id: highlightId, endSeconds: 360 })
+			])
+		);
+	});
+
+	it('stores real thumbnail files and only emits technically ready exports', async () => {
+		const youtubeId = createPostItem('show-october', 'youtube', 'Uncut');
+		const png = Buffer.from(
+			'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=',
+			'base64'
+		);
+		const thumbnailId = await uploadThumbnail(
+			'show-october',
+			youtubeId,
+			1,
+			new File([png], 'thumb.png', { type: 'image/png' }),
+			'Ein fertiges Thumbnail',
+			true
+		);
+		const thumbnail = await getThumbnailFile('show-october', thumbnailId);
+		expect(thumbnail?.data).toEqual(png);
+
+		const partId = createRecordingPart('show-october', {
+			label: 'Teil 1',
+			mediaFilePath: '/media/stream-teil-1.mov',
+			frameRate: 25,
+			timebase: 25
+		});
+		const clipId = createPostItem('show-october', 'clip', 'Exportclip');
+		expect(() => getExport('show-october', clipId, 'resolve')).toThrow('EXPORT_NOT_READY');
+		savePostItem('show-october', clipId, 1, {
+			title: 'Exportclip',
+			status: 'done',
+			recordingPartId: partId,
+			startSeconds: 10,
+			endSeconds: 20,
+			videoFormat: '9:16',
+			subtitleSrt: '1\n00:00:00,000 --> 00:00:02,000\nOriginaltext'
+		});
+		expect(getExport('show-october', clipId, 'resolve').body).toContain(
+			'<pathurl>file:///media/stream-teil-1.mov</pathurl>'
+		);
+		expect(getExport('show-october', clipId, 'srt').body).toContain('Originaltext');
+	});
+});

src/lib/server/shows.spec.ts

@@ -21,6 +21,7 @@ import {
 	removePieceUsage,
 	removeShowSection,
 	updatePieceUsage,
+	updatePieceUsageMetadata,
 	updateShowSection,
 	type PieceUsage
 } from './shows.js';
@@ -270,6 +271,60 @@ describe('show builder data layer', () => {
 		});
 	});
 
+	it('updates usage metadata without changing editorial or presentation snapshots', () => {
+		const created = createShow({ title: 'Schnelländerung', startsAtUtc: null, templateId: null });
+		const section = addShowSection(created.id, created.revision, {
+			name: 'Fundstücke',
+			categoryId: 'cat-reaction',
+			explicitDurationSeconds: null
+		});
+		const added = addPieceUsage(created.id, section.revision, {
+			pieceId: 'piece-console',
+			sectionId: section.id
+		});
+		const before = getShow(created.id)!.sections[0].usages[0];
+
+		updatePieceUsageMetadata(created.id, added.id, added.revision, {
+			title: 'Konsole im Inspector',
+			outputTitle: 'Konsole live',
+			durationSeconds: 600,
+			ownNotes: 'Direkt im Streamplan geändert',
+			preparationStatus: 'ready',
+			preparationEffort: 'low'
+		});
+
+		const after = getShow(created.id)!.sections[0].usages[0];
+		expect(after).toMatchObject({
+			title: 'Konsole im Inspector',
+			outputTitle: 'Konsole live',
+			durationSeconds: 600,
+			ownNotes: 'Direkt im Streamplan geändert',
+			preparationStatus: 'ready',
+			preparationEffort: 'low'
+		});
+		expect({
+			intro: after.intro,
+			research: after.research,
+			moderation: after.moderation,
+			interaction: after.interaction,
+			transition: after.transition,
+			presentation: after.presentation,
+			presentationMode: after.presentationMode,
+			presentationMediaId: after.presentationMediaId,
+			tools: after.tools
+		}).toEqual({
+			intro: before.intro,
+			research: before.research,
+			moderation: before.moderation,
+			interaction: before.interaction,
+			transition: before.transition,
+			presentation: before.presentation,
+			presentationMode: before.presentationMode,
+			presentationMediaId: before.presentationMediaId,
+			tools: before.tools
+		});
+	});
+
 	it('derives sent history and current planning only from qualifying usages by original id', () => {
 		const completed = createShow({
 			title: 'Abgeschlossene Sendung',

src/lib/server/shows.ts

@@ -196,6 +196,16 @@ export type PieceUsageUpdate = {
 	presentationMediaId?: string | null;
 };
 
+export type PieceUsageMetadataUpdate = Pick<
+	PieceUsageUpdate,
+	| 'title'
+	| 'outputTitle'
+	| 'durationSeconds'
+	| 'ownNotes'
+	| 'preparationStatus'
+	| 'preparationEffort'
+>;
+
 export type MovePieceUsageInput = {
 	sectionId: string | null;
 	position: number;
@@ -1889,6 +1899,43 @@ export function updatePieceUsage(
 	})();
 }
 
+export function updatePieceUsageMetadata(
+	showId: string,
+	usageId: string,
+	expectedRevision: number,
+	input: PieceUsageMetadataUpdate
+): MutationResult {
+	const show = getShow(showId);
+	const usage = [
+		...(show?.sections.flatMap((section) => section.usages) ?? []),
+		...(show?.reserve ?? [])
+	].find((item) => item.id === usageId);
+	if (!usage) throw new Error('NOT_FOUND');
+	return updatePieceUsage(showId, usageId, expectedRevision, {
+		...input,
+		intro: usage.intro,
+		research: usage.research,
+		moderation: usage.moderation,
+		interaction: usage.interaction,
+		transition: usage.transition,
+		presentation: usage.presentation,
+		presentationMode: usage.presentationMode,
+		presentationSourceLabel: usage.presentationSourceLabel,
+		presentationSourceUrl: usage.presentationSourceUrl,
+		presentationSourceTimecodeSeconds: usage.presentationSourceTimecodeSeconds,
+		presentationTitle: usage.presentationTitle,
+		presentationDescription: usage.presentationDescription,
+		presentationImageUrl: usage.presentationImageUrl,
+		presentationSiteName: usage.presentationSiteName,
+		presentationMediaId: usage.presentationMediaId,
+		tools: usage.tools.map((tool) => ({
+			id: tool.id,
+			workUrl: tool.workUrl,
+			note: tool.note
+		}))
+	});
+}
+
 export function removePieceUsage(
 	showId: string,
 	usageId: string,

src/routes/+layout.server.ts

@@ -7,6 +7,5 @@ export const load: LayoutServerLoad = ({ locals, url }) => ({
 			: locals.user,
 	presentationMode: url.pathname.startsWith('/heinzlive/'),
 	guestMode: url.pathname.startsWith('/freigabe/'),
-	oauthMode: url.pathname === '/oauth/authorize',
+	oauthMode: url.pathname === '/oauth/authorize'
-	liveControllerMode: url.pathname === '/live'
 });

src/routes/+layout.svelte

@@ -13,7 +13,8 @@
 		{ href: '/eingang', label: 'Eingang', icon: 'inbox' },
 		{ href: '/fundus', label: 'Pieces', icon: 'library' },
 		{ href: '/sendungen', label: 'Streams', icon: 'shows' },
-		{ href: '/live', label: 'Live', icon: 'tower-broadcast' }
+		{ href: '/live', label: 'Live', icon: 'tower-broadcast' },
+		{ href: '/post', label: 'Post', icon: 'clapperboard' }
 	] as const;
 
 	function isActive(href: string) {
@@ -27,7 +28,7 @@
 <svelte:head>
 	<meta
 		name="description"
-		content="Sendewerk organisiert redaktionelle Pieces und heinzlive-Streams."
+		content="Sendewerk organisiert redaktionelle Pieces, heinzlive-Streams und Postproduktion."
 	/>
 </svelte:head>
 
@@ -36,22 +37,22 @@
 {:else if data.guestMode || data.oauthMode}
 	<div class="guest-shell">
 		<header class="auth-header">
-			<span class="brand"
+			<span class="brand">
-				><span class="brand-mark" aria-hidden="true"><i></i><i></i><i></i></span><span
+				<span class="brand-mark" aria-hidden="true"><i></i><i></i><i></i></span>
-					>Sendewerk</span
+				<span class="brand-name">Sendewerk</span>
-				></span
+				<small class="brand-version">0.9.0</small>
-			><ThemeToggle />
+			</span>
+			<ThemeToggle />
 		</header>
 		{@render children()}
 	</div>
-{:else if data.user && data.liveControllerMode}
-	<main id="main-content" class="live-controller-shell">{@render children()}</main>
 {:else if data.user}
 	<div class="app-shell">
 		<header class="app-header">
 			<a class="brand" href={resolve('/')} aria-label="Sendewerk Startseite">
 				<span class="brand-mark" aria-hidden="true"><i></i><i></i><i></i></span>
-				<span>Sendewerk</span>
+				<span class="brand-name">Sendewerk</span>
+				<small class="brand-version">0.9.0</small>
 			</a>
 
 			<nav class="main-navigation" aria-label="Hauptnavigation">
@@ -60,6 +61,7 @@
 						href={resolve(item.href)}
 						class:active={isActive(item.href)}
 						aria-current={isActive(item.href) ? 'page' : undefined}
+						aria-label={item.label}
 					>
 						<NavIcon name={item.icon} />
 						<span>{item.label}</span>
@@ -87,7 +89,8 @@
 		<header class="mobile-header">
 			<a class="brand" href={resolve('/')} aria-label="Sendewerk Startseite">
 				<span class="brand-mark" aria-hidden="true"><i></i><i></i><i></i></span>
-				<span>Sendewerk</span>
+				<span class="brand-name">Sendewerk</span>
+				<small class="brand-version">0.9.0</small>
 			</a>
 			<form
 				class="global-search-form mobile-global-search"
@@ -124,7 +127,8 @@
 		<header class="auth-header">
 			<a class="brand" href={resolve('/login')} aria-label="Sendewerk Anmeldung">
 				<span class="brand-mark" aria-hidden="true"><i></i><i></i><i></i></span>
-				<span>Sendewerk</span>
+				<span class="brand-name">Sendewerk</span>
+				<small class="brand-version">0.9.0</small>
 			</a>
 			<ThemeToggle />
 		</header>

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

@@ -1,7 +1,14 @@
 import { fail } from '@sveltejs/kit';
 import type { Actions, PageServerLoad } from './$types';
 import { requireUser } from '#lib/server/auth.js';
-import { captureInbox, getTaxonomy, listPieces, setPieceDeleted } from '#lib/server/content.js';
+import {
+	captureInbox,
+	getPiece,
+	getTaxonomy,
+	listPieces,
+	savePiece,
+	setPieceDeleted
+} from '#lib/server/content.js';
 import { discardFeedEntries, importFeedEntries, listFeedEntries } from '#lib/server/feeds.js';
 
 export const load: PageServerLoad = ({ locals }) => {
@@ -75,5 +82,38 @@ export const actions = {
 			intent: 'feedDiscard',
 			feedSuccess: `${count} ${count === 1 ? 'Beitrag' : 'Beiträge'} verworfen.`
 		};
+	},
+	quickSaveInbox: async ({ locals, request }) => {
+		requireUser(locals.user);
+		const data = await request.formData();
+		const id = String(data.get('pieceId') || '');
+		const piece = getPiece(id);
+		if (!piece || piece.status !== 'inbox')
+			return fail(404, {
+				intent: 'quickSaveInbox',
+				error: 'Der Eingangseintrag wurde nicht gefunden.'
+			});
+		try {
+			const saved = savePiece(id, Number(data.get('revision')), {
+				...piece,
+				status: 'inbox',
+				title: String(data.get('title') || ''),
+				summary: String(data.get('summary') || ''),
+				topicIds: piece.topicIds,
+				categoryIds: piece.categoryIds,
+				sources: piece.sources,
+				tools: piece.tools.map((tool) => ({
+					toolId: tool.toolId,
+					workUrl: tool.workUrl,
+					note: tool.note
+				}))
+			});
+			return { intent: 'quickSaveInbox', saved: true, revision: saved.revision };
+		} catch {
+			return fail(409, {
+				intent: 'quickSaveInbox',
+				error: 'Der Eingangseintrag wurde inzwischen geändert. Bitte neu laden.'
+			});
+		}
 	}
 } satisfies Actions;

src/routes/eingang/+page.svelte

@@ -1,32 +1,47 @@
 <script lang="ts">
 	import { resolve } from '$app/paths';
+	import { untrack } from 'svelte';
 	import AppIcon from '#lib/components/AppIcon.svelte';
 	import RssSelectionDialog from '#lib/components/RssSelectionDialog.svelte';
 	import type { PageProps } from './$types';
 	let { data, form }: PageProps = $props();
 	let rssDialog: { showModal: () => void };
+	let selectedKey = $state(
+		untrack(() =>
+			data.feedEntries[0]
+				? `feed:${data.feedEntries[0].id}`
+				: data.pieces[0]
+					? `piece:${data.pieces[0].id}`
+					: ''
+		)
+	);
+	let selectedFeed = $derived(
+		data.feedEntries.find((entry) => selectedKey === `feed:${entry.id}`) ?? null
+	);
+	let selectedPiece = $derived(
+		data.pieces.find((piece) => selectedKey === `piece:${piece.id}`) ?? null
+	);
 </script>
 
 <svelte:head><title>Eingang | Sendewerk</title></svelte:head>
 
-<div class="page-wrap narrow-page">
+<div class="unified-workspace inbox-workspace">
-	<header class="page-heading">
+	<aside class="workspace-navigation" aria-label="Eingangsquellen">
-		<h1>Eingang</h1>
+		<header>
-		<p class="page-intro">Gedanken und Fundstücke schnell festhalten und später ausarbeiten.</p>
-	</header>
-	<section class="quiet-panel capture-panel">
 			<div>
-			<p class="eyebrow">Schnellaufnahme</p>
+				<p class="eyebrow">Sichtung</p>
-			<h2>Was soll nicht verloren gehen?</h2>
+				<h1>Eingang</h1>
 			</div>
-		{#if form?.error}<div class="form-message error" role="alert">{form.error}</div>{/if}
+			<span>{data.pieces.length + data.feedEntries.length}</span>
+		</header>
+		<section class="capture-panel">
+			<h2>Schnellaufnahme</h2>
 			{#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
-				>Gedanke <span>optional bei URL</span><input
+					>Gedanke<input
 						name="title"
 						maxlength="200"
 						value={form?.title ?? ''}
@@ -45,89 +60,177 @@
 				<button class="primary-button" type="submit">Im Eingang ablegen</button>
 			</form>
 		</section>
-	<section class="quiet-panel rss-inbox-panel">
+		<section class="workspace-navigation-group rss-inbox-panel">
-		<div class="panel-heading">
+			<h2>Quellen</h2>
-			<div>
-				<p class="eyebrow">RSS-Importeingang</p>
-				<h2>RSS-Beiträge</h2>
-			</div>
-			<span class="catalog-entry-icon"><AppIcon name="rss" /></span>
-		</div>
 			<p class="catalog-note">
 				{data.feedEntries.length}
-			{data.feedEntries.length === 1 ? 'Beitrag ist' : 'Beiträge sind'}
+				{data.feedEntries.length === 1 ? 'Beitrag ist' : 'Beiträge sind'} verfügbar.
-			verfügbar. Erst deine ausdrückliche Auswahl übernimmt sie in den redaktionellen Eingang.
 			</p>
+			<button
+				class:active={selectedKey.startsWith('feed:')}
+				type="button"
+				onclick={() => data.feedEntries[0] && (selectedKey = `feed:${data.feedEntries[0].id}`)}
+				><AppIcon name="rss" /><span>RSS-Beiträge</span><b>{data.feedEntries.length}</b></button
+			>
+			<button
+				class:active={selectedKey.startsWith('piece:')}
+				type="button"
+				onclick={() => data.pieces[0] && (selectedKey = `piece:${data.pieces[0].id}`)}
+				><AppIcon name="inbox" /><span>Redaktioneller Eingang</span><b>{data.pieces.length}</b
+				></button
+			>
+		</section>
+		<button
+			class="secondary-button"
+			type="button"
+			disabled={!data.feedEntries.length}
+			onclick={() => rssDialog.showModal()}><AppIcon name="list" /> RSS-Beiträge auswählen</button
+		>
+	</aside>
+	<main class="workspace-content-pane inbox-catalog">
+		<header>
+			<div>
+				<p class="eyebrow">Noch nicht übernommen</p>
+				<h2>Neue Beiträge und Gedanken</h2>
+			</div>
+		</header>
+		<div class="inbox-catalog-content">
+			{#if form?.error}<div class="form-message error" role="alert">{form.error}</div>{/if}
 			{#if form?.feedError}<div class="form-message error" role="alert">{form.feedError}</div>{/if}
 			{#if form?.feedSuccess}<div class="form-message success" role="status">
 					{form.feedSuccess}
 				</div>{/if}
-		<button
+			<section class="inbox-catalog-group">
-			class="compact-add-button"
+				<h3>RSS</h3>
+				{#each data.feedEntries as entry (entry.id)}<button
+						class="inbox-catalog-row"
+						class:active={selectedKey === `feed:${entry.id}`}
 						type="button"
-			disabled={!data.feedEntries.length}
+						onclick={() => (selectedKey = `feed:${entry.id}`)}
-			onclick={() => rssDialog.showModal()}
+						><span><small>{entry.feedName}</small><strong>{entry.title}</strong></span><AppIcon
-		>
+							name="chevron-right"
-			<AppIcon name="list" />
+						/></button
-			{data.feedEntries.length ? 'RSS-Beiträge auswählen' : 'Keine neuen RSS-Beiträge'}
+					>{:else}<p class="empty-copy">Keine neuen RSS-Beiträge.</p>{/each}
-		</button>
 			</section>
+			<section class="inbox-catalog-group">
+				<h3>Redaktioneller Eingang</h3>
+				{#each data.pieces as piece (piece.id)}<button
+						class="inbox-catalog-row"
+						class:active={selectedKey === `piece:${piece.id}`}
+						type="button"
+						onclick={() => (selectedKey = `piece:${piece.id}`)}
+						><span
+							><small
+								>{piece.sourceCount ? `${piece.sourceCount} Quelle` : 'Gedanke ohne Link'}</small
+							><strong>{piece.title}</strong></span
+						><AppIcon name="chevron-right" /></button
+					>{:else}<p class="empty-copy">Keine offenen Pieces.</p>{/each}
+			</section>
+		</div>
+	</main>
+	<aside class="content-quick-inspector" aria-label="Eingangsvorschau">
+		{#if selectedFeed}<header>
+				<div>
+					<p class="eyebrow">RSS-Vorschau</p>
+					<h2>{selectedFeed.title}</h2>
+				</div>
+				<a
+					class="inspector-expand-button"
+					href={selectedFeed.url}
+					target="_blank"
+					rel="noopener external"
+					aria-label="Originalbeitrag öffnen"
+					title="Original öffnen"><AppIcon name="arrow-up-right-from-square" /></a
+				>
+			</header>
+			<div class="content-quick-inspector-scroll">
+				<section>
+					<strong>{selectedFeed.feedName}</strong>{#if selectedFeed.publishedAtUtc}<small
+							>{new Date(selectedFeed.publishedAtUtc).toLocaleDateString('de-DE')}</small
+						>{/if}
+				</section>
+				{#if selectedFeed.summary}<section>
+						<h3>Vorschau</h3>
+						<p>{selectedFeed.summary}</p>
+					</section>{/if}
+				<section>
+					<h3>Übernahme</h3>
+					<p>
+						Bei der Übernahme entsteht ein normales Piece im redaktionellen Eingang. Ohne Auswahl
+						gelten die Standardkategorien des Feeds.
+					</p>
+				</section>
+			</div>
+			<footer>
+				<form method="POST" action="?/importFeeds">
+					<input type="hidden" name="entryIds" value={selectedFeed.id} /><button
+						class="text-button danger-text"
+						type="submit"
+						formaction="?/discardFeeds">Verwerfen</button
+					><button class="primary-button" type="submit">Übernehmen</button>
+				</form>
+			</footer>
+		{:else if selectedPiece}<header>
+				<div>
+					<p class="eyebrow">Schnellbearbeitung</p>
+					<h2>{selectedPiece.title}</h2>
+				</div>
+				<a
+					class="inspector-expand-button"
+					href={resolve('/fundus/[id]', { id: selectedPiece.id })}
+					aria-label="Piece vollständig bearbeiten"
+					title="Vollständig bearbeiten"><AppIcon name="expand" /></a
+				>
+			</header>
+			<div class="content-quick-inspector-scroll">
+				<form id="inbox-quick-form" method="POST" action="?/quickSaveInbox">
+					<input type="hidden" name="pieceId" value={selectedPiece.id} /><input
+						type="hidden"
+						name="revision"
+						value={selectedPiece.revision}
+					/><label
+						>Titel<input name="title" required maxlength="200" value={selectedPiece.title} /></label
+					><label
+						>Kurzbeschreibung<textarea name="summary" rows="7" maxlength="2000"
+							>{selectedPiece.summary}</textarea
+						></label
+					>
+				</form>
+				<section>
+					<h3>Herkunft</h3>
+					<p>
+						{selectedPiece.sourceCount
+							? `${selectedPiece.sourceCount} Quelle`
+							: 'Schnell aufgenommener Gedanke ohne Link'}
+					</p>
+				</section>
+			</div>
+			<footer>
+				<form
+					method="POST"
+					action="?/delete"
+					onsubmit={(event) =>
+						!confirm(`„${selectedPiece.title}“ löschen?`) && event.preventDefault()}
+				>
+					<input type="hidden" name="pieceId" value={selectedPiece.id} /><input
+						type="hidden"
+						name="revision"
+						value={selectedPiece.revision}
+					/><button class="text-button danger-text" type="submit">Löschen</button>
+				</form>
+				<button class="primary-button" type="submit" form="inbox-quick-form">Speichern</button>
+			</footer>
+		{:else}<div class="content-inspector-empty">
+				<AppIcon name="inbox" />
+				<h2>Eintrag auswählen</h2>
+				<p>Vorschau und Übernahme erscheinen hier.</p>
+			</div>{/if}
+	</aside>
+</div>
+
 <RssSelectionDialog
 	bind:this={rssDialog}
 	entries={data.feedEntries}
 	categories={data.taxonomy.categories}
 	{form}
 />
-	{#if data.pieces.length}
-		<section class="inbox-list">
-			<h2>{data.pieces.length} {data.pieces.length === 1 ? 'offener Inhalt' : 'offene Inhalte'}</h2>
-			{#each data.pieces as piece (piece.id)}<article class="inbox-item">
-					<a href={resolve('/fundus/[id]', { id: piece.id })}
-						><span
-							><strong>{piece.title}</strong><small
-								>{piece.sourceCount ? `${piece.sourceCount} Quelle` : 'Gedanke ohne Link'}</small
-							></span
-						><span>Ausarbeiten <AppIcon name="arrow-right" /></span></a
-					>
-					<details class="piece-actions">
-						<summary aria-label={`Aktionen für ${piece.title}`}><AppIcon name="ellipsis" /></summary
-						>
-						<div class="piece-actions-popover">
-							<form
-								method="POST"
-								action="?/delete"
-								onsubmit={(event) =>
-									!confirm(`„${piece.title}“ löschen?`) && event.preventDefault()}
-							>
-								<input type="hidden" name="pieceId" value={piece.id} /><input
-									type="hidden"
-									name="revision"
-									value={piece.revision}
-								/>
-								<button class="text-button danger-text" type="submit">Piece löschen</button>
-							</form>
-						</div>
-					</details>
-				</article>{/each}
-		</section>
-	{:else}<section class="quiet-panel planned-panel">
-			<div class="planned-icon" aria-hidden="true"><AppIcon name="plus" /></div>
-			<h2>Eingang ist leer</h2>
-			<p>Neue Gedanken und Links können oben direkt aufgenommen werden.</p>
-		</section>{/if}
-</div>
-
-<style>
-	.rss-inbox-panel {
-		display: grid;
-		gap: 0.75rem;
-		margin-block: 1.5rem;
-		padding: clamp(0.85rem, 2vw, 1.2rem);
-	}
-	.rss-inbox-panel .panel-heading {
-		margin: 0;
-	}
-	.rss-inbox-panel .catalog-note {
-		margin: 0;
-	}
-</style>

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

@@ -5,21 +5,52 @@ import {
 	createPiece,
 	deletePieceTemplate,
 	duplicatePiece,
+	getPiece,
 	listPieceTemplates,
+	savePiece,
 	setPieceArchived,
 	setPieceDeleted,
-	setPieceFavorite
+	setPieceFavorite,
+	uploadPieceImage,
+	type EditablePieceStatus,
+	type PieceEditor
 } from '#lib/server/content.js';
 import { fundusSearch, loadFundusWorkspace } from '#lib/server/fundus-workspace.js';
 
 export const load: PageServerLoad = ({ locals, url }) => {
 	requireUser(locals.user);
+	const workspace = loadFundusWorkspace(url);
+	const selectedId = url.searchParams.get('selected') ?? workspace.pieces[0]?.id ?? '';
 	return {
-		...loadFundusWorkspace(url),
+		...workspace,
+		selectedPiece: workspace.pieces.some((piece) => piece.id === selectedId)
+			? getPiece(selectedId)
+			: null,
 		templates: listPieceTemplates()
 	};
 };
 
+function preservedInput(piece: PieceEditor, data: FormData) {
+	return {
+		...piece,
+		title: String(data.get('title') || ''),
+		summary: String(data.get('summary') || ''),
+		status: String(data.get('status') || piece.status) as EditablePieceStatus,
+		formatId: String(data.get('formatId') || '') || null,
+		durationSeconds: Math.round(Number(data.get('durationMinutes')) * 60),
+		intro: String(data.get('intro') || ''),
+		moderationNotes: String(data.get('moderationNotes') || ''),
+		topicIds: piece.topicIds,
+		categoryIds: piece.categoryIds,
+		sources: piece.sources,
+		tools: piece.tools.map((tool) => ({
+			toolId: tool.toolId,
+			workUrl: tool.workUrl,
+			note: tool.note
+		}))
+	};
+}
+
 function actionError(cause: unknown) {
 	const code = cause instanceof Error ? cause.message : '';
 	if (code === 'CONFLICT') return 'Das Piece wurde inzwischen geändert. Bitte Seite neu laden.';
@@ -92,5 +123,38 @@ export const actions = {
 		} catch (cause) {
 			return fail(409, { intent: 'delete', error: actionError(cause) });
 		}
+	},
+	quickSave: async ({ locals, request }) => {
+		requireUser(locals.user);
+		const data = await request.formData();
+		const id = String(data.get('pieceId') || '');
+		const piece = getPiece(id);
+		if (!piece || piece.status === 'archived')
+			return fail(404, { intent: 'quickSave', error: 'Das Piece wurde nicht gefunden.' });
+		try {
+			const saved = savePiece(id, Number(data.get('revision')), preservedInput(piece, data));
+			return { intent: 'quickSave', success: 'Schnelländerungen gespeichert.', ...saved };
+		} catch (cause) {
+			return fail(409, { intent: 'quickSave', error: actionError(cause) });
+		}
+	},
+	quickUpload: async ({ locals, request }) => {
+		requireUser(locals.user);
+		const data = await request.formData();
+		const image = data.get('image');
+		if (!(image instanceof File))
+			return fail(400, { intent: 'quickUpload', error: 'Bitte ein Bild auswählen.' });
+		try {
+			await uploadPieceImage(
+				String(data.get('pieceId') || ''),
+				Number(data.get('revision')),
+				image,
+				String(data.get('altText') || ''),
+				false
+			);
+			return { intent: 'quickUpload', success: 'Bild hochgeladen.' };
+		} catch (cause) {
+			return fail(400, { intent: 'quickUpload', error: actionError(cause) });
+		}
 	}
 } satisfies Actions;

src/routes/fundus/+page.svelte

@@ -42,7 +42,7 @@
 		sessionStorage.setItem(`fundus-scroll:${window.location.search}`, String(window.scrollY));
 	}
 
-	function pieceSearch() {
+	function pieceSearch(selectedId = '') {
 		const search = new SvelteURLSearchParams();
 		if (data.filters.query) search.set('q', data.filters.query);
 		if (data.filters.status) search.set('status', data.filters.status);
@@ -53,6 +53,7 @@
 		if (data.filters.view) search.set('view', data.filters.view);
 		if (showUsedPieces) search.set('includeUsed', '1');
 		if (showPlannedPieces) search.set('includePlanned', '1');
+		if (selectedId) search.set('selected', selectedId);
 		const query = search.toString();
 		return query ? `?${query}` : '';
 	}
@@ -83,7 +84,7 @@
 
 <svelte:head><title>Pieces | Sendewerk</title></svelte:head>
 
-<div class="fundus-workspace fundus-list-workspace">
+<div class="fundus-workspace fundus-list-workspace unified-workspace">
 	<FundusNavigation filters={data.filters} counts={data.counts} topics={data.taxonomy.topics} />
 	<section class="fundus-list-pane">
 		<header class="page-heading split-heading">
@@ -133,6 +134,7 @@
 				</details>
 			</div>
 		</header>
+		<div class="fundus-library-content">
 			{#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}
 
@@ -164,7 +166,8 @@
 							>
 							<label
 								><span>Thema</span><select name="topic"
-								><option value="">Alle</option>{#each data.taxonomy.topics as item (item.id)}<option
+									><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
@@ -186,7 +189,8 @@
 										name="includeUsed"
 										value="1"
 										checked={showUsedPieces}
-									onchange={(event) => setSourceFilter('includeUsed', event.currentTarget.checked)}
+										onchange={(event) =>
+											setSourceFilter('includeUsed', event.currentTarget.checked)}
 									/>
 									<span>Auch verwendete Inhalte zeigen</span>
 								</label>
@@ -204,7 +208,9 @@
 							</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>
+								<button class="text-button" type="button" onclick={resetFilters}
+									>Zurücksetzen</button
+								>
 							</div>
 						</div>
 					</details>
@@ -220,9 +226,9 @@
 						>
 							<a
 								class="piece-row-link"
-							href={resolve(`/fundus/${encodeURIComponent(piece.id)}${pieceSearch()}` as '/fundus')}
+								href={resolve(`/fundus${pieceSearch(piece.id)}` as '/fundus')}
 								onclick={rememberListPosition}
-							aria-label={`${piece.title} öffnen`}
+								aria-label={`${piece.title} auswählen`}
 							></a>
 							<form method="POST" action="?/favorite" class="piece-favorite-form" use:enhance>
 								<input type="hidden" name="pieceId" value={piece.id} />
@@ -245,9 +251,7 @@
 							<div class="piece-primary">
 								<h2>
 									<a
-									href={resolve(
+										href={resolve(`/fundus${pieceSearch(piece.id)}` as '/fundus')}
-										`/fundus/${encodeURIComponent(piece.id)}${pieceSearch()}` as '/fundus'
-									)}
 										onclick={rememberListPosition}>{piece.title}</a
 									>
 								</h2>
@@ -321,5 +325,121 @@
 					<a class="secondary-button" href={resolve('/fundus')}>Filter zurücksetzen</a>
 				</div>
 			{/if}
+		</div>
+	</section>
+	<aside
+		class="content-quick-inspector stream-inspector builder-pane"
+		aria-label="Piece-Schnellbearbeitung"
+	>
+		{#if data.selectedPiece}
+			<header class="stream-inspector-header">
+				<div>
+					<p class="eyebrow">Schnellbearbeitung</p>
+					<a
+						class="inspector-expand-button"
+						href={resolve(
+							`/fundus/${encodeURIComponent(data.selectedPiece.id)}${pieceSearch()}` as '/fundus'
+						)}
+						aria-label="Vollständigen Piece-Editor öffnen"
+						title="Vollständig bearbeiten"><AppIcon name="expand" /></a
+					>
+				</div>
+				<h2>{data.selectedPiece.title}</h2>
+				<p>Wichtige Texte und Metadaten dieses Pieces.</p>
+			</header>
+			<div class="content-quick-inspector-scroll piece-quick-inspector-scroll">
+				{#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}
+				<form
+					id="piece-quick-form"
+					class="stream-inspector-form"
+					method="POST"
+					action="?/quickSave"
+				>
+					<input type="hidden" name="pieceId" value={data.selectedPiece.id} />
+					<input type="hidden" name="revision" value={data.selectedPiece.revision} />
+					<label
+						>Interner Titel<input
+							name="title"
+							required
+							maxlength="200"
+							value={data.selectedPiece.title}
+						/></label
+					>
+					<label
+						>Kurzbeschreibung<textarea name="summary" rows="4" maxlength="2000"
+							>{data.selectedPiece.summary}</textarea
+						></label
+					>
+					<label
+						>Einleitung<textarea name="intro" rows="6" maxlength="20000"
+							>{data.selectedPiece.intro}</textarea
+						></label
+					>
+					<label
+						>Moderationsstichpunkte<textarea name="moderationNotes" rows="7" maxlength="20000"
+							>{data.selectedPiece.moderationNotes}</textarea
+						></label
+					>
+					<div class="content-quick-grid">
+						<label
+							>Status<select name="status" value={data.selectedPiece.status}
+								><option value="preparing">In Vorbereitung</option><option value="ready"
+									>Sendefertig</option
+								><option value="inbox">Eingang</option></select
+							></label
+						>
+						<label
+							>Dauer in Minuten<input
+								name="durationMinutes"
+								type="number"
+								min="0"
+								max="1440"
+								step="any"
+								value={Number((data.selectedPiece.durationSeconds / 60).toFixed(2))}
+							/></label
+						>
+					</div>
+					<label
+						>Format<select name="formatId"
+							><option value="">Ohne Format</option
+							>{#each data.taxonomy.formats as format (format.id)}<option
+									value={format.id}
+									selected={data.selectedPiece.formatId === format.id}>{format.name}</option
+								>{/each}</select
+						></label
+					>
+				</form>
+				<section class="quick-upload-section">
+					<h3>Bild hochladen</h3>
+					<form method="POST" action="?/quickUpload" enctype="multipart/form-data">
+						<input type="hidden" name="pieceId" value={data.selectedPiece.id} />
+						<input type="hidden" name="revision" value={data.selectedPiece.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="500" /></label>
+						<button class="secondary-button" type="submit">Hochladen</button>
+					</form>
 				</section>
 			</div>
+			<footer class="stream-inspector-actions">
+				<a class="secondary-button" href={resolve('/fundus/[id]', { id: data.selectedPiece.id })}
+					>Vollständig bearbeiten</a
+				>
+				<button class="primary-button" type="submit" form="piece-quick-form">Speichern</button>
+			</footer>
+		{:else}
+			<div class="content-inspector-empty">
+				<AppIcon name="arrow-pointer" />
+				<h2>Piece auswählen</h2>
+				<p>Wichtige Texte, Einordnung und Uploads erscheinen hier.</p>
+			</div>
+		{/if}
+	</aside>
+</div>

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

@@ -7,7 +7,6 @@
 	import RichMarkdownField from '#lib/components/RichMarkdownField.svelte';
 	import AppIcon from '#lib/components/AppIcon.svelte';
 	import ChoicePicker from '#lib/components/ChoicePicker.svelte';
-	import FundusNavigation from '#lib/components/FundusNavigation.svelte';
 	import InlineTitleEditor from '#lib/components/InlineTitleEditor.svelte';
 	import PieceEditorDialog from '#lib/components/PieceEditorDialog.svelte';
 	import PresentationDisplay from '#lib/components/PresentationDisplay.svelte';
@@ -96,11 +95,16 @@
 	let pendingHref: string | null = null;
 	let allowNavigation = false;
 
-	const statusLabels = {
+	$effect(() => {
-		inbox: 'Eingang',
+		const incoming = data.piece;
-		preparing: 'In Vorbereitung',
+		if (incoming.revision === revision || !['idle', 'saved'].includes(saveState) || saving) return;
-		ready: 'Sendefertig'
+		draft = { ...incoming };
-	};
+		durationMinutes = Number((incoming.durationSeconds / 60).toFixed(2));
+		revision = incoming.revision;
+		sources = incoming.sources.map((source) => ({ ...source }));
+		pieceTools = incoming.tools.map((tool) => ({ ...tool }));
+		rendered = { ...data.rendered };
+	});
 
 	onMount(() => editorDialog.showModal());
 	onDestroy(() => clearTimeout(timer));
@@ -119,7 +123,12 @@
 
 	function scheduleSave(event?: Event) {
 		const control = event?.target;
-		if (event?.type === 'change' && !(control instanceof HTMLSelectElement)) return;
+		if (
+			event?.type === 'change' &&
+			!(control instanceof HTMLSelectElement) &&
+			!(control instanceof HTMLInputElement && ['radio', 'checkbox'].includes(control.type))
+		)
+			return;
 		if (
 			control instanceof HTMLInputElement &&
 			control.name === 'presentationMode' &&
@@ -135,6 +144,15 @@
 		timer = setTimeout(submitSave, 900);
 	}
 
+	function schedulePresentationModeSave(mode: string) {
+		if (
+			(['link', 'video'].includes(mode) && draft.presentationSourcePosition === null) ||
+			(mode === 'image' && !draft.presentationMediaId)
+		)
+			return;
+		scheduleSave();
+	}
+
 	function submitSave() {
 		if (saving) return;
 		editorForm.requestSubmit(saveButton);
@@ -254,12 +272,7 @@
 
 <svelte:head><title>{draft.title} | Pieces | Sendewerk</title></svelte:head>
 
-<div class="fundus-workspace fundus-editor-workspace">
+<div class="editor-route-shell">
-	<FundusNavigation
-		filters={data.workspace.filters}
-		counts={data.workspace.counts}
-		topics={data.workspace.taxonomy.topics}
-	/>
 	<div class="piece-editor-route">
 		{#if form?.error}<div class="form-message error route-editor-error" role="alert">
 				{form.error}
@@ -269,11 +282,14 @@
 			bind:activeSection
 			labelledby="piece-editor-title"
 			onrequestclose={requestClose}
-			inline
 		>
 			{#snippet header()}
-				<div class="piece-editor-kicker">
+				<div class="piece-editor-title-row">
-					<p class="eyebrow">Piece-Fassung</p>
+					<InlineTitleEditor
+						form="piece-editor-form"
+						bind:value={draft.title}
+						oncommit={scheduleSave}
+					/>
 					<form method="POST" action="?/favorite" use:enhance>
 						<input type="hidden" name="favorite" value={data.piece.isFavorite ? '0' : '1'} />
 						<button
@@ -287,12 +303,99 @@
 						>
 					</form>
 				</div>
-				<InlineTitleEditor
-					form="piece-editor-form"
-					bind:value={draft.title}
-					oncommit={scheduleSave}
-				/>
 				<h1 class="sr-only" id="piece-editor-title">{draft.title}</h1>
+				<div class="piece-editor-header-actions">
+					<span
+						class="save-indicator"
+						class:problem={saveState === 'error' || saveState === 'conflict'}
+						role="status"
+						aria-live="polite">{saveMessage}</span
+					>
+					<button
+						bind:this={saveButton}
+						class="compact-save-button"
+						type="submit"
+						form="piece-editor-form"
+						disabled={saving}
+						>{saveState === 'error' || saveState === 'conflict'
+							? 'Erneut speichern'
+							: 'Speichern'}</button
+					>
+					<details class="piece-action-menu">
+						<summary>Aktionen</summary>
+						<div>
+							<details class="template-save-menu">
+								<summary>Als Vorlage speichern</summary>
+								<form method="POST" action="?/saveTemplate">
+									<label
+										>Vorlage<select name="templateRef">
+											<option value="">Neue Vorlage</option>
+											{#each data.templates as template (template.id)}<option
+													value={`${template.id}|${template.revision}`}>{template.name}</option
+												>{/each}</select
+										></label
+									>
+									<label>Name<input name="templateName" required maxlength="120" /></label>
+									<label>Beschreibung<input name="templateDescription" maxlength="500" /></label>
+									<button class="text-button" type="submit" disabled={actionsBlocked}
+										>Vorlage speichern</button
+									>
+								</form>
+							</details>
+							<form method="POST" action="?/duplicate">
+								<button class="text-button" type="submit" disabled={actionsBlocked}
+									>Duplizieren</button
+								>
+							</form>
+							<form
+								method="POST"
+								action="?/archive"
+								onsubmit={(event) => !confirm('Piece archivieren?') && event.preventDefault()}
+							>
+								<input type="hidden" name="revision" value={revision} /><button
+									class="text-button danger-text"
+									type="submit"
+									aria-label="Piece archivieren"
+									disabled={actionsBlocked}>Archivieren</button
+								>
+							</form>
+							<form
+								method="POST"
+								action="?/delete"
+								onsubmit={(event) =>
+									!confirm('Piece löschen? Bestehende Streamfassungen bleiben erhalten.') &&
+									event.preventDefault()}
+							>
+								<input type="hidden" name="revision" value={revision} /><button
+									class="text-button danger-text"
+									type="submit"
+									disabled={actionsBlocked}>Piece löschen</button
+								>
+							</form>
+						</div>
+					</details>
+				</div>
+				<nav class="piece-editor-view-switch" aria-label="Arbeitsbereich">
+					<button
+						type="button"
+						class:active={activeSection === 'script'}
+						aria-current={activeSection === 'script' ? 'page' : undefined}
+						onclick={() => (activeSection = 'script')}>Streamtext</button
+					>
+					<button
+						type="button"
+						class:active={activeSection === 'research'}
+						aria-current={activeSection === 'research' ? 'page' : undefined}
+						onclick={() => (activeSection = 'research')}>Recherche & Quellen</button
+					>
+					<button
+						class="piece-context-switch"
+						type="button"
+						class:active={activeSection === 'presentation'}
+						aria-current={activeSection === 'presentation' ? 'page' : undefined}
+						onclick={() => (activeSection = 'presentation')}>Details & Ausgabe</button
+					>
+				</nav>
 			{/snippet}
 
 			<form
@@ -314,7 +417,10 @@
 							<h2>Streamtext</h2>
 						</div>
 					</div>
-					<div class="piece-writing-stack">
+					<div
+						class="piece-writing-stack piece-writing-document"
+						hidden={activeSection !== 'script'}
+					>
 						<RichMarkdownField
 							name="intro"
 							label="Einleitung"
@@ -342,13 +448,14 @@
 							bind:value={draft.transitionText}
 						/>
 					</div>
-					<details class="piece-meta-details" open>
+					<section
-						<summary>
+						class="piece-meta-details piece-context-panel"
-							<span>Status, Dauer und Einordnung</span>
+						class:mobile-context-hidden={activeSection !== 'presentation'}
-							<small
-								>{statusLabels[draft.status as keyof typeof statusLabels]} · {durationMinutes || 0} Min.</small
 					>
-						</summary>
+						<div class="piece-context-heading">
+							<h2>Details</h2>
+							<small>Intern</small>
+						</div>
 						<div class="piece-meta-grid">
 							<label
 								>Status<select name="status" bind:value={draft.status}
@@ -367,14 +474,6 @@
 									bind:value={durationMinutes}
 								/></label
 							>
-							<label
-								>Vorbereitungsaufwand<select
-									name="preparationEffort"
-									bind:value={draft.preparationEffort}
-									><option value={null}>Nicht angegeben</option><option value="low">Gering</option
-									><option value="medium">Mittel</option><option value="high">Hoch</option></select
-								></label
-							>
 							<label
 								>Format<select name="formatId" bind:value={draft.formatId}
 									><option value={null}>Ohne Format</option
@@ -383,14 +482,6 @@
 										>{/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><ChoicePicker
 									items={data.taxonomy.topics}
@@ -403,6 +494,27 @@
 									}}
 								/>
 							</fieldset>
+						</div>
+						<details class="piece-more-details">
+							<summary>Weitere Details</summary>
+							<div>
+								<label
+									>Vorbereitungsaufwand<select
+										name="preparationEffort"
+										bind:value={draft.preparationEffort}
+										><option value={null}>Nicht angegeben</option><option value="low">Gering</option
+										><option value="medium">Mittel</option><option value="high">Hoch</option
+										></select
+									></label
+								>
+								<label
+									>Kurzbeschreibung<textarea
+										name="summary"
+										rows="3"
+										maxlength="2000"
+										placeholder="Worum geht es in wenigen Sätzen?"
+										bind:value={draft.summary}></textarea></label
+								>
 								<fieldset>
 									<legend>Vorgeschlagene Abschnittskategorien</legend>
 									<div class="choice-grid">
@@ -419,8 +531,12 @@
 							</div>
 						</details>
 					</section>
+				</section>
 
-				<section class="piece-editor-panel piece-research-panel">
+				<section
+					class="piece-editor-panel piece-research-panel"
+					hidden={activeSection !== 'research'}
+				>
 					<div class="piece-panel-heading">
 						<div>
 							<p class="eyebrow">Nicht öffentlich</p>
@@ -539,7 +655,10 @@
 					</section>
 				</section>
 
-				<section class="piece-editor-panel piece-presentation-panel">
+				<section
+					class="piece-editor-panel piece-presentation-panel piece-context-panel"
+					class:mobile-context-hidden={activeSection !== 'presentation'}
+				>
 					<div class="piece-panel-heading">
 						<div>
 							<p class="eyebrow">Öffentliche Ausgabe</p>
@@ -562,15 +681,18 @@
 											name="presentationMode"
 											value={mode[0]}
 											bind:group={draft.presentationMode}
+											onchange={() => schedulePresentationModeSave(mode[0])}
 										/>{mode[1]}</label
 									>{/each}
 							</div>
 							{#if draft.presentationMode === 'text'}
+								<div class="piece-inline-presentation-preview">
+									<p class="output-kicker">Publikumsvorschau · direkt bearbeiten</p>
 									<label
 										>Öffentliche Überschrift<input
 											name="outputTitle"
 											maxlength="300"
-										placeholder="Optional, sonst interner Titel"
+											placeholder={draft.title}
 											bind:value={draft.outputTitle}
 										/></label
 									>
@@ -581,6 +703,7 @@
 										rows={8}
 										bind:value={draft.presentationText}
 									/>
+								</div>
 							{:else}
 								<input type="hidden" name="outputTitle" value={draft.outputTitle} />
 								<input type="hidden" name="presentationText" value={draft.presentationText} />
@@ -703,7 +826,8 @@
 			</form>
 
 			<section
-				class="piece-editor-panel piece-media-panel"
+				class="piece-editor-panel piece-media-panel piece-context-panel"
+				class:mobile-context-hidden={activeSection !== 'presentation'}
 				hidden={!['text', 'image'].includes(draft.presentationMode)}
 			>
 				<div class="piece-subsection-heading">
@@ -755,7 +879,13 @@
 								</figcaption>
 							</figure>{/each}
 					</div>{/if}
-				<form method="POST" action="?/upload" enctype="multipart/form-data" class="upload-form">
+				<form
+					method="POST"
+					action="?/upload"
+					enctype="multipart/form-data"
+					class="upload-form"
+					use:enhance
+				>
 					<input type="hidden" name="revision" value={revision} /><label
 						>Bild<input
 							name="image"
@@ -778,76 +908,6 @@
 					>
 				</form>
 			</section>
-
-			{#snippet footer()}
-				<div class="piece-dialog-secondary-actions">
-					<details class="template-save-menu">
-						<summary>Als Vorlage speichern</summary>
-						<form method="POST" action="?/saveTemplate">
-							<label
-								>Vorlage<select name="templateRef">
-									<option value="">Neue Vorlage</option>
-									{#each data.templates as template (template.id)}<option
-											value={`${template.id}|${template.revision}`}>{template.name}</option
-										>{/each}
-								</select></label
-							>
-							<label>Name<input name="templateName" required maxlength="120" /></label>
-							<label>Beschreibung<input name="templateDescription" maxlength="500" /></label>
-							<button class="text-button" type="submit" disabled={actionsBlocked}
-								>Vorlage speichern</button
-							>
-						</form>
-					</details>
-					<form method="POST" action="?/duplicate">
-						<button class="text-button" type="submit" disabled={actionsBlocked}>Duplizieren</button>
-					</form>
-					<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>
-					<form
-						method="POST"
-						action="?/delete"
-						onsubmit={(event) =>
-							!confirm('Piece löschen? Bestehende Streamfassungen bleiben erhalten.') &&
-							event.preventDefault()}
-					>
-						<input type="hidden" name="revision" value={revision} /><button
-							class="text-button danger-text"
-							type="submit"
-							disabled={actionsBlocked}>Piece löschen</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

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

@@ -1,353 +1,45 @@
 import { randomUUID } from 'node:crypto';
 import { error, fail } from '@sveltejs/kit';
 import type { Actions, PageServerLoad } from './$types';
-import { requireBarkeeper, requireUser } from '#lib/server/auth.js';
+import { requireUser } from '#lib/server/auth.js';
-import { finalizeShow, getCompletionSummary } from '#lib/server/completion.js';
+import { getLiveView, presentUsage } from '#lib/server/live.js';
-import {
-	completeCurrent,
-	clearPresentationChannel,
-	endLive,
-	getLiveView,
-	getPresentationChannelStatus,
-	goBack,
-	issuePresentationAccess,
-	moveOpenUsage,
-	pauseLive,
-	presentUsage,
-	rotatePresentationChannelKey,
-	resetSectionTimer,
-	resetTotalTimer,
-	resumeUsage,
-	resumeEndedLive,
-	resumeLive,
-	selectUsage,
-	setShowStatus,
-	skipCurrent,
-	startNewLiveRun,
-	startOrResumeLive
-} from '#lib/server/live.js';
 import { listShows } from '#lib/server/shows.js';
-import {
-	createShare,
-	deleteShare,
-	listShares,
-	replaceShareToken,
-	updateShare
-} from '#lib/server/shares.js';
-import { berlinLocalToUtc } from '#lib/server/time.js';
-
-function text(data: FormData, name: string) {
-	return String(data.get(name) || '');
-}
-
-function actionError(cause: unknown) {
-	const code = cause instanceof Error ? cause.message : '';
-	if (code === 'CONFLICT')
-		return {
-			status: 409,
-			error: 'Der Live-Stand wurde bereits geändert. Die Ansicht wurde erneuert.'
-		};
-	if (code === 'NO_CURRENT') return { status: 409, error: 'Es ist kein aktuelles Piece aktiv.' };
-	if (code === 'NOT_STARTED')
-		return { status: 409, error: 'Der Stream muss vor der Auswahl gestartet werden.' };
-	if (code === 'NO_PREVIOUS') return { status: 409, error: 'Es gibt kein vorheriges Piece.' };
-	if (code === 'LIVE_ORDER_LOCKED')
-		return {
-			status: 409,
-			error: 'Nur offene Pieces hinter dem aktuellen Stand können sortiert werden.'
-		};
-	if (code === 'SHOW_COMPLETED')
-		return { status: 409, error: 'Abgeschlossene Streams können nicht live gesteuert werden.' };
-	if (code === 'NOT_FOUND')
-		return { status: 404, error: 'Stream oder Piece wurde nicht gefunden.' };
-	if (code === 'TIMER_PAUSED') return { status: 409, error: 'Der Stream ist pausiert.' };
-	if (code === 'ALREADY_PAUSED' || code === 'ALREADY_RUNNING')
-		return { status: 409, error: 'Der Timerzustand wurde bereits geändert.' };
-	if (code === 'NO_SECTION_TIMER')
-		return { status: 409, error: 'Es ist kein Abschnittstimer aktiv.' };
-	if (code === 'NOT_LIVE' || code === 'NOT_ENDED' || code === 'ALREADY_STARTED')
-		return { status: 409, error: 'Der Stream befindet sich nicht im passenden Zustand.' };
-	if (code.startsWith('INVALID_')) return { status: 400, error: 'Die Live-Aktion ist ungültig.' };
-	return { status: 500, error: 'Die Live-Aktion konnte nicht gespeichert werden.' };
-}
-
-function attempt(intent: string, operation: () => unknown) {
-	try {
-		return { intent, success: true, result: operation() };
-	} catch (cause) {
-		const problem = actionError(cause);
-		return fail(problem.status, { intent, ...problem });
-	}
-}
 
 export const load: PageServerLoad = ({ locals, url }) => {
-	const actor = requireUser(locals.user);
+	requireUser(locals.user);
 	const showId = url.searchParams.get('show') || listShows()[0]?.id;
 	if (!showId) error(404, 'Kein Stream vorhanden');
 	try {
-		const live = getLiveView(showId);
+		return { live: getLiveView(showId), commandId: randomUUID() };
-		return {
-			live,
-			outputStatus: getPresentationChannelStatus(showId),
-			canManageShares: actor.role === 'barkeeper',
-			shares: actor.role === 'barkeeper' ? listShares(actor, showId) : [],
-			commandId: randomUUID(),
-			completion:
-				live.endedAtUtc && live.show.status !== 'completed' ? getCompletionSummary(showId) : null
-		};
 	} catch (cause) {
-		if (cause instanceof Error && cause.message === 'NOT_FOUND')
+		if (cause instanceof Error && cause.message === 'NOT_FOUND') {
 			error(404, 'Stream nicht gefunden');
+		}
 		throw cause;
 	}
 };
 
 export const actions = {
-	createShare: async ({ locals, request }) => {
-		const actor = requireBarkeeper(locals.user);
-		const data = await request.formData();
-		try {
-			const share = await createShare(actor, {
-				showId: text(data, 'showId'),
-				scope: text(data, 'scope'),
-				password: text(data, 'password'),
-				expiresAtUtc: berlinLocalToUtc(text(data, 'expiresAt'), 'INVALID_EXPIRY')
-			});
-			return {
-				intent: 'createShare',
-				success: 'Leselink angelegt.',
-				shareUrl: `/freigabe/${share.token}`
-			};
-		} catch (cause) {
-			const problem = actionError(cause);
-			return fail(problem.status, { intent: 'createShare', ...problem });
-		}
-	},
-	updateShare: async ({ locals, request }) => {
-		const actor = requireBarkeeper(locals.user);
-		const data = await request.formData();
-		try {
-			await updateShare(
-				actor,
-				text(data, 'shareId'),
-				{
-					scope: text(data, 'scope'),
-					passwordMode: text(data, 'passwordMode'),
-					password: text(data, 'password'),
-					expiresAtUtc: berlinLocalToUtc(text(data, 'expiresAt'), 'INVALID_EXPIRY')
-				},
-				text(data, 'showId')
-			);
-			return { intent: 'updateShare', success: 'Freigabe aktualisiert.' };
-		} catch (cause) {
-			const problem = actionError(cause);
-			return fail(problem.status, { intent: 'updateShare', ...problem });
-		}
-	},
-	replaceShare: async ({ locals, request }) => {
-		const actor = requireBarkeeper(locals.user);
-		const data = await request.formData();
-		try {
-			const token = replaceShareToken(actor, text(data, 'shareId'), text(data, 'showId'));
-			return {
-				intent: 'replaceShare',
-				success: 'Ersatzlink angelegt. Der bisherige Link ist ungültig.',
-				shareUrl: `/freigabe/${token}`
-			};
-		} catch (cause) {
-			const problem = actionError(cause);
-			return fail(problem.status, { intent: 'replaceShare', ...problem });
-		}
-	},
-	deleteShare: async ({ locals, request }) => {
-		const actor = requireBarkeeper(locals.user);
-		const data = await request.formData();
-		try {
-			deleteShare(actor, text(data, 'shareId'), text(data, 'showId'));
-			return { intent: 'deleteShare', success: 'Freigabe gelöscht.' };
-		} catch (cause) {
-			const problem = actionError(cause);
-			return fail(problem.status, { intent: 'deleteShare', ...problem });
-		}
-	},
-	start: async ({ locals, request }) => {
-		requireUser(locals.user);
-		const data = await request.formData();
-		return attempt('start', () =>
-			startOrResumeLive(text(data, 'showId'), text(data, 'commandId'), Number(data.get('revision')))
-		);
-	},
-	pause: async ({ locals, request }) => {
-		requireUser(locals.user);
-		const data = await request.formData();
-		return attempt('pause', () =>
-			pauseLive(text(data, 'showId'), text(data, 'commandId'), Number(data.get('revision')))
-		);
-	},
-	resume: async ({ locals, request }) => {
-		requireUser(locals.user);
-		const data = await request.formData();
-		return attempt('resume', () =>
-			resumeLive(text(data, 'showId'), text(data, 'commandId'), Number(data.get('revision')))
-		);
-	},
-	resetSectionTimer: async ({ locals, request }) => {
-		requireUser(locals.user);
-		const data = await request.formData();
-		return attempt('resetSectionTimer', () =>
-			resetSectionTimer(text(data, 'showId'), text(data, 'commandId'), Number(data.get('revision')))
-		);
-	},
-	resetTotalTimer: async ({ locals, request }) => {
-		requireUser(locals.user);
-		const data = await request.formData();
-		return attempt('resetTotalTimer', () =>
-			resetTotalTimer(text(data, 'showId'), text(data, 'commandId'), Number(data.get('revision')))
-		);
-	},
-	setStatus: async ({ locals, request }) => {
-		requireUser(locals.user);
-		const data = await request.formData();
-		const status = text(data, 'status');
-		if (status !== 'draft' && status !== 'ready') {
-			return fail(400, { intent: 'setStatus', error: 'Der Streamstatus ist ungültig.' });
-		}
-		return attempt('setStatus', () =>
-			setShowStatus(
-				text(data, 'showId'),
-				text(data, 'commandId'),
-				Number(data.get('revision')),
-				Number(data.get('showRevision')),
-				status
-			)
-		);
-	},
-	end: async ({ locals, request }) => {
-		requireUser(locals.user);
-		const data = await request.formData();
-		return attempt('end', () =>
-			endLive(text(data, 'showId'), text(data, 'commandId'), Number(data.get('revision')))
-		);
-	},
-	finalize: async ({ locals, request }) => {
-		const actor = requireUser(locals.user);
-		const data = await request.formData();
-		return attempt('finalize', () =>
-			finalizeShow({
-				showId: text(data, 'showId'),
-				commandId: text(data, 'commandId'),
-				expectedShowRevision: Number(data.get('showRevision')),
-				expectedLiveRevision: Number(data.get('revision')),
-				archivePieceIds: data.getAll('archivePieceIds').map(String),
-				actor
-			})
-		);
-	},
-	resumeEnded: async ({ locals, request }) => {
-		requireUser(locals.user);
-		const data = await request.formData();
-		return attempt('resumeEnded', () =>
-			resumeEndedLive(text(data, 'showId'), text(data, 'commandId'), Number(data.get('revision')))
-		);
-	},
-	startNewRun: async ({ locals, request }) => {
-		requireUser(locals.user);
-		const data = await request.formData();
-		return attempt('startNewRun', () =>
-			startNewLiveRun(text(data, 'showId'), text(data, 'commandId'), Number(data.get('revision')))
-		);
-	},
-	complete: async ({ locals, request }) => {
-		requireUser(locals.user);
-		const data = await request.formData();
-		return attempt('complete', () =>
-			completeCurrent(text(data, 'showId'), text(data, 'commandId'), Number(data.get('revision')))
-		);
-	},
-	skip: async ({ locals, request }) => {
-		requireUser(locals.user);
-		const data = await request.formData();
-		return attempt('skip', () =>
-			skipCurrent(text(data, 'showId'), text(data, 'commandId'), Number(data.get('revision')))
-		);
-	},
-	back: async ({ locals, request }) => {
-		requireUser(locals.user);
-		const data = await request.formData();
-		return attempt('back', () =>
-			goBack(text(data, 'showId'), text(data, 'commandId'), Number(data.get('revision')))
-		);
-	},
-	select: async ({ locals, request }) => {
-		requireUser(locals.user);
-		const data = await request.formData();
-		return attempt('select', () =>
-			selectUsage(
-				text(data, 'showId'),
-				text(data, 'usageId'),
-				text(data, 'commandId'),
-				Number(data.get('revision'))
-			)
-		);
-	},
-	resumeUsage: async ({ locals, request }) => {
-		requireUser(locals.user);
-		const data = await request.formData();
-		return attempt('resumeUsage', () =>
-			resumeUsage(
-				text(data, 'showId'),
-				text(data, 'usageId'),
-				text(data, 'commandId'),
-				Number(data.get('revision'))
-			)
-		);
-	},
 	present: async ({ locals, request }) => {
 		requireUser(locals.user);
 		const data = await request.formData();
-		return attempt('present', () =>
+		try {
 			presentUsage(
-				text(data, 'showId'),
+				String(data.get('showId') || ''),
-				text(data, 'usageId') || null,
+				String(data.get('usageId') || '') || null,
-				text(data, 'commandId'),
+				String(data.get('commandId') || ''),
 				Number(data.get('revision'))
-			)
 			);
-	},
+			return { intent: 'present', success: true };
-	moveUsage: async ({ locals, request }) => {
-		requireUser(locals.user);
-		const data = await request.formData();
-		return attempt('moveUsage', () =>
-			moveOpenUsage(text(data, 'showId'), text(data, 'usageId'), Number(data.get('showRevision')), {
-				sectionId: text(data, 'sectionId') || null,
-				position: Number(data.get('position'))
-			})
-		);
-	},
-	createOutput: async ({ locals, request }) => {
-		requireUser(locals.user);
-		const data = await request.formData();
-		try {
-			const token = issuePresentationAccess(text(data, 'showId'));
-			return { intent: 'createOutput', success: true, outputUrl: `/heinzlive/default#${token}` };
 		} catch (cause) {
-			const problem = actionError(cause);
+			const code = cause instanceof Error ? cause.message : '';
-			return fail(problem.status, { intent: 'createOutput', ...problem });
+			return fail(code === 'CONFLICT' ? 409 : 400, {
+				intent: 'present',
+				error:
+					code === 'CONFLICT'
+						? 'Der Ausgabestand wurde bereits geändert.'
+						: 'Die Präsentation konnte nicht geändert werden.'
+			});
 		}
-	},
-	rotateOutput: async ({ locals, request }) => {
-		requireUser(locals.user);
-		const data = await request.formData();
-		try {
-			const token = rotatePresentationChannelKey(text(data, 'showId'));
-			return { intent: 'rotateOutput', success: true, outputUrl: `/heinzlive/default#${token}` };
-		} catch (cause) {
-			const problem = actionError(cause);
-			return fail(problem.status, { intent: 'rotateOutput', ...problem });
-		}
-	},
-	clearOutput: async ({ locals }) => {
-		requireUser(locals.user);
-		return attempt('clearOutput', () => clearPresentationChannel());
 	}
 } satisfies Actions;

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

@@ -0,0 +1,35 @@
+import type { PageServerLoad } from './$types';
+import { requireUser } from '#lib/server/auth.js';
+import { listPostShows } from '#lib/server/post.js';
+
+export const load: PageServerLoad = ({ locals, url }) => {
+	requireUser(locals.user);
+	const query = (url.searchParams.get('q') ?? '').trim();
+	const progress = url.searchParams.get('progress') ?? '';
+	const sort = url.searchParams.get('sort') ?? 'newest';
+	let shows = listPostShows();
+	const counts = {
+		all: shows.length,
+		notStarted: shows.filter((show) => show.progress === 'Noch nicht begonnen').length,
+		inProgress: shows.filter((show) => show.progress === 'In Bearbeitung').length,
+		done: shows.filter((show) => show.progress === 'Fertig').length,
+		published: shows.filter((show) => show.progress === 'Veröffentlicht').length
+	};
+	if (query) {
+		const needle = query.toLocaleLowerCase('de-DE');
+		shows = shows.filter((show) => show.title.toLocaleLowerCase('de-DE').includes(needle));
+	}
+	if (progress) shows = shows.filter((show) => show.progress === progress);
+	shows.sort((left, right) => {
+		if (sort === 'title') return left.title.localeCompare(right.title, 'de-DE');
+		if (sort === 'oldest')
+			return (left.completedAtUtc ?? left.startsAtUtc ?? '').localeCompare(
+				right.completedAtUtc ?? right.startsAtUtc ?? ''
+			);
+		if (sort === 'clips') return right.clipCount - left.clipCount;
+		return (right.completedAtUtc ?? right.startsAtUtc ?? '').localeCompare(
+			left.completedAtUtc ?? left.startsAtUtc ?? ''
+		);
+	});
+	return { shows, query, progress, sort, counts };
+};

src/routes/post/+page.svelte

@@ -0,0 +1,153 @@
+<script lang="ts">
+	import { resolve } from '$app/paths';
+	import { untrack } from 'svelte';
+	import AppIcon from '#lib/components/AppIcon.svelte';
+	import PostNavigation from '#lib/components/PostNavigation.svelte';
+	import type { PageProps } from './$types';
+
+	let { data }: PageProps = $props();
+	let selectedId = $state(untrack(() => data.shows[0]?.showId ?? ''));
+	let selected = $derived(
+		data.shows.find((show) => show.showId === selectedId) ?? data.shows[0] ?? null
+	);
+
+	function date(value: string | null) {
+		if (!value) return 'Datum nicht verfügbar';
+		return new Intl.DateTimeFormat('de-DE', {
+			timeZone: 'Europe/Berlin',
+			dateStyle: 'long'
+		}).format(new Date(value));
+	}
+</script>
+
+<svelte:head><title>Postproduktion | Sendewerk</title></svelte:head>
+
+<div class="unified-workspace post-library-workspace">
+	<PostNavigation
+		query={data.query}
+		progress={data.progress}
+		sort={data.sort}
+		counts={data.counts}
+	/>
+	<section class="post-show-library workspace-content-pane" aria-labelledby="post-shows-title">
+		<header class="page-heading shows-heading post-page-heading">
+			<div>
+				<h1>Postproduktion</h1>
+				<p class="page-intro">YouTube, Social-Clips und Twitch-Highlights vorbereiten.</p>
+			</div>
+		</header>
+		<div class="post-library-content">
+			<div class="post-library-heading">
+				<div>
+					<p class="eyebrow">Abgeschlossene Streams</p>
+					<h2 id="post-shows-title">Streams</h2>
+				</div>
+				<span>{data.shows.length}</span>
+			</div>
+			{#if data.shows.length}
+				<div class="post-show-list">
+					{#each data.shows as show (show.showId)}
+						<a class="post-show-row" href={resolve('/post/[id]', { id: show.showId })}>
+							<div class="post-show-primary">
+								<span class="post-progress">{show.progress}</span>
+								<h3>{show.title}</h3>
+								<p>{date(show.startsAtUtc ?? show.completedAtUtc)}</p>
+							</div>
+							<dl class="post-show-counts">
+								<div>
+									<dt>Teile</dt>
+									<dd>{show.recordingPartCount}</dd>
+								</div>
+								<div>
+									<dt>Kontext</dt>
+									<dd>{show.sourceCount}</dd>
+								</div>
+								<div>
+									<dt>YouTube</dt>
+									<dd>{show.youtubeCount}</dd>
+								</div>
+								<div>
+									<dt>Clips</dt>
+									<dd>{show.clipCount}</dd>
+								</div>
+								<div>
+									<dt>Highlights</dt>
+									<dd>{show.highlightCount}</dd>
+								</div>
+							</dl>
+							<AppIcon name="chevron-right" />
+						</a>
+					{/each}
+				</div>
+			{:else}
+				<div class="empty-state compact">
+					<h2>Keine abgeschlossene Sendung gefunden</h2>
+					<p>Postproduktion beginnt mit einer in Live bewusst abgeschlossenen Sendung.</p>
+				</div>
+			{/if}
+		</div>
+	</section>
+	<aside
+		class="content-quick-inspector stream-inspector builder-pane"
+		aria-label="Post-Schnellübersicht"
+	>
+		{#if selected}<header class="stream-inspector-header">
+				<div>
+					<p class="eyebrow">Schnellübersicht</p>
+					<a
+						class="inspector-expand-button"
+						href={resolve('/post/[id]', { id: selected.showId })}
+						aria-label="Postproduktion vollständig öffnen"
+						title="Vollständig bearbeiten"><AppIcon name="expand" /></a
+					>
+				</div>
+				<h2>{selected.title}</h2>
+				<p>Material, Texte, Schnitt und Veröffentlichung.</p>
+			</header>
+			<div class="content-quick-inspector-scroll stream-inspector-form post-overview-inspector">
+				<section>
+					<span class="post-progress">{selected.progress}</span>
+					<p>{date(selected.startsAtUtc ?? selected.completedAtUtc)}</p>
+				</section>
+				<dl class="quick-fact-list">
+					<div>
+						<dt>Aufzeichnungsteile</dt>
+						<dd>{selected.recordingPartCount}</dd>
+					</div>
+					<div>
+						<dt>Kontextdateien</dt>
+						<dd>{selected.sourceCount}</dd>
+					</div>
+					<div>
+						<dt>YouTube-Videos</dt>
+						<dd>{selected.youtubeCount}</dd>
+					</div>
+					<div>
+						<dt>Social-Clips</dt>
+						<dd>{selected.clipCount}</dd>
+					</div>
+					<div>
+						<dt>Twitch-Highlights</dt>
+						<dd>{selected.highlightCount}</dd>
+					</div>
+				</dl>
+				<section class="workspace-guidance">
+					<h3>Vollständige Bearbeitung</h3>
+					<p>
+						Material, Texte, Uploads, Schnittdaten und Exporte öffnen in der großen
+						Bearbeitungsfläche.
+					</p>
+				</section>
+			</div>
+			<footer class="stream-inspector-actions single-action">
+				<a class="primary-button" href={resolve('/post/[id]', { id: selected.showId })}
+					>Postproduktion öffnen</a
+				>
+			</footer>
+		{:else}<div class="content-inspector-empty">
+				<AppIcon name="clapperboard" />
+				<h2>Stream auswählen</h2>
+				<p>Bearbeitungsstand und Inhalte erscheinen hier.</p>
+			</div>{/if}
+	</aside>
+</div>

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

@@ -0,0 +1,269 @@
+import { error, fail, redirect } from '@sveltejs/kit';
+import type { Actions, PageServerLoad } from './$types';
+import { requireUser } from '#lib/server/auth.js';
+import {
+	createPostItem,
+	createRecordingPart,
+	deletePostItem,
+	deletePostSource,
+	deleteRecordingPart,
+	deleteThumbnail,
+	getPostWorkspace,
+	importPostSource,
+	listPostPieceOptions,
+	savePostItem,
+	selectThumbnail,
+	uploadThumbnail,
+	updateRecordingPart,
+	type ClipType,
+	type PostItemInput,
+	type PostKind,
+	type PostStatus
+} from '#lib/server/post.js';
+
+function text(data: FormData, name: string) {
+	return String(data.get(name) || '');
+}
+
+function optionalNumber(data: FormData, name: string) {
+	const value = text(data, name).trim();
+	return value ? Number(value) : null;
+}
+
+function problem(cause: unknown) {
+	const code = cause instanceof Error ? cause.message : '';
+	if (code === 'CONFLICT')
+		return { status: 409, error: 'Eine neuere Änderung liegt vor. Bitte neu laden.' };
+	if (code === 'DUPLICATE_SOURCE')
+		return { status: 409, error: 'Diese Kontextdatei wurde bereits importiert.' };
+	if (code === 'INVALID_SOURCE_SIZE')
+		return {
+			status: 400,
+			error: 'Die Markdown-Datei darf höchstens 5 MB groß und nicht leer sein.'
+		};
+	if (code === 'INVALID_SOURCE_TYPE' || code === 'INVALID_SOURCE_ENCODING')
+		return { status: 400, error: 'Bitte eine UTF-8-kodierte Markdown-Datei (.md) auswählen.' };
+	if (code === 'INVALID_IMAGE_SIZE')
+		return { status: 400, error: 'Das Thumbnail darf höchstens 5 MB groß und nicht leer sein.' };
+	if (code === 'INVALID_IMAGE_TYPE')
+		return { status: 400, error: 'Erlaubt sind JPEG, PNG und WebP.' };
+	if (code.startsWith('INVALID_'))
+		return { status: 400, error: 'Mindestens ein Feld ist ungültig oder zu lang.' };
+	return { status: 400, error: 'Die Änderung konnte nicht gespeichert werden.' };
+}
+
+export const load: PageServerLoad = ({ locals, params }) => {
+	requireUser(locals.user);
+	try {
+		return { workspace: getPostWorkspace(params.id), pieces: listPostPieceOptions(params.id) };
+	} catch (cause) {
+		if (cause instanceof Error && cause.message === 'NOT_FOUND')
+			error(404, 'Sendung nicht gefunden');
+		throw cause;
+	}
+};
+
+export const actions = {
+	createItem: async ({ locals, params, request }) => {
+		requireUser(locals.user);
+		const data = await request.formData();
+		let id: string;
+		try {
+			id = createPostItem(params.id, text(data, 'kind') as PostKind, text(data, 'title'));
+		} catch (cause) {
+			const issue = problem(cause);
+			return fail(issue.status, { intent: 'createItem', ...issue });
+		}
+		redirect(303, `/post/${params.id}?item=${encodeURIComponent(id)}`);
+	},
+	saveItem: async ({ locals, params, request }) => {
+		requireUser(locals.user);
+		const data = await request.formData();
+		const publishedDate = text(data, 'publishedDate');
+		const input: PostItemInput = {
+			title: text(data, 'title'),
+			status: text(data, 'status') as PostStatus,
+			recordingPartId: text(data, 'recordingPartId') || null,
+			sourceFileId: text(data, 'sourceFileId') || null,
+			pieceId: text(data, 'pieceId') || null,
+			notes: text(data, 'notes'),
+			description: text(data, 'description'),
+			titleVariants: text(data, 'titleVariants')
+				.split('\n')
+				.map((value) => value.trim())
+				.filter(Boolean),
+			thumbnailConcept: text(data, 'thumbnailConcept'),
+			thumbnailText: text(data, 'thumbnailText'),
+			publicationStatus: text(data, 'publicationStatus') as PostItemInput['publicationStatus'],
+			publishedAtUtc: publishedDate ? `${publishedDate}T12:00:00.000Z` : null,
+			publicationUrl: text(data, 'publicationUrl'),
+			videoFormat: text(data, 'videoFormat'),
+			clipType: text(data, 'clipType') as ClipType,
+			originalTranscript: text(data, 'originalTranscript'),
+			startSeconds: optionalNumber(data, 'startSeconds'),
+			endSeconds: optionalNumber(data, 'endSeconds'),
+			dramaturgyNotes: text(data, 'dramaturgyNotes'),
+			editInstructions: text(data, 'editInstructions'),
+			shortsTitle: text(data, 'shortsTitle'),
+			shortsDescription: text(data, 'shortsDescription'),
+			shortsHashtags: text(data, 'shortsHashtags'),
+			socialCaption: text(data, 'socialCaption'),
+			tiktokCaption: text(data, 'tiktokCaption'),
+			instagramCaption: text(data, 'instagramCaption'),
+			socialHashtags: text(data, 'socialHashtags'),
+			primaryHook: text(data, 'primaryHook'),
+			alternativeHooks: text(data, 'alternativeHooks'),
+			endcardText: text(data, 'endcardText'),
+			alternativeEndcards: text(data, 'alternativeEndcards'),
+			framingNotes: text(data, 'framingNotes'),
+			subtitleNotes: text(data, 'subtitleNotes'),
+			subtitleSrt: text(data, 'subtitleSrt'),
+			targetTikTok: data.get('targetTikTok') === '1',
+			targetInstagram: data.get('targetInstagram') === '1',
+			targetShorts: data.get('targetShorts') === '1',
+			publicationNotes: text(data, 'publicationNotes')
+		};
+		try {
+			return {
+				intent: 'saveItem',
+				saved: true,
+				...savePostItem(params.id, text(data, 'itemId'), Number(data.get('revision')), input)
+			};
+		} catch (cause) {
+			const issue = problem(cause);
+			return fail(issue.status, { intent: 'saveItem', ...issue });
+		}
+	},
+	deleteItem: async ({ locals, params, request }) => {
+		requireUser(locals.user);
+		const data = await request.formData();
+		try {
+			deletePostItem(params.id, text(data, 'itemId'), Number(data.get('revision')));
+		} catch (cause) {
+			const issue = problem(cause);
+			return fail(issue.status, { intent: 'deleteItem', ...issue });
+		}
+		redirect(303, `/post/${params.id}`);
+	},
+	createPart: async ({ locals, params, request }) => {
+		requireUser(locals.user);
+		const data = await request.formData();
+		try {
+			createRecordingPart(params.id, {
+				label: text(data, 'label'),
+				mediaFilePath: text(data, 'mediaFilePath'),
+				frameRate: optionalNumber(data, 'frameRate'),
+				timebase: optionalNumber(data, 'timebase')
+			});
+			return { intent: 'createPart', success: true };
+		} catch (cause) {
+			const issue = problem(cause);
+			return fail(issue.status, { intent: 'createPart', ...issue });
+		}
+	},
+	updatePart: async ({ locals, params, request }) => {
+		requireUser(locals.user);
+		const data = await request.formData();
+		try {
+			updateRecordingPart(params.id, text(data, 'partId'), {
+				label: text(data, 'label'),
+				mediaFilePath: text(data, 'mediaFilePath'),
+				frameRate: optionalNumber(data, 'frameRate'),
+				timebase: optionalNumber(data, 'timebase')
+			});
+			return { intent: 'updatePart', success: true };
+		} catch (cause) {
+			const issue = problem(cause);
+			return fail(issue.status, { intent: 'updatePart', ...issue });
+		}
+	},
+	deletePart: async ({ locals, params, request }) => {
+		requireUser(locals.user);
+		const data = await request.formData();
+		try {
+			deleteRecordingPart(params.id, text(data, 'partId'));
+			return { intent: 'deletePart', success: true };
+		} catch (cause) {
+			const issue = problem(cause);
+			return fail(issue.status, { intent: 'deletePart', ...issue });
+		}
+	},
+	importSource: async ({ locals, params, request }) => {
+		requireUser(locals.user);
+		const data = await request.formData();
+		const source = data.get('source');
+		if (!(source instanceof File))
+			return fail(400, { intent: 'importSource', error: 'Bitte eine Markdown-Datei auswählen.' });
+		try {
+			await importPostSource(params.id, text(data, 'recordingPartId') || null, source);
+			return { intent: 'importSource', success: true };
+		} catch (cause) {
+			const issue = problem(cause);
+			return fail(issue.status, { intent: 'importSource', ...issue });
+		}
+	},
+	deleteSource: async ({ locals, params, request }) => {
+		requireUser(locals.user);
+		const data = await request.formData();
+		try {
+			await deletePostSource(params.id, text(data, 'sourceId'));
+			return { intent: 'deleteSource', success: true };
+		} catch (cause) {
+			const issue = problem(cause);
+			return fail(issue.status, { intent: 'deleteSource', ...issue });
+		}
+	},
+	uploadThumbnail: async ({ locals, params, request }) => {
+		requireUser(locals.user);
+		const data = await request.formData();
+		const image = data.get('image');
+		if (!(image instanceof File))
+			return fail(400, { intent: 'uploadThumbnail', error: 'Bitte ein Bild auswählen.' });
+		try {
+			await uploadThumbnail(
+				params.id,
+				text(data, 'itemId'),
+				Number(data.get('revision')),
+				image,
+				text(data, 'altText'),
+				data.get('select') === '1'
+			);
+			return { intent: 'uploadThumbnail', success: true };
+		} catch (cause) {
+			const issue = problem(cause);
+			return fail(issue.status, { intent: 'uploadThumbnail', ...issue });
+		}
+	},
+	selectThumbnail: async ({ locals, params, request }) => {
+		requireUser(locals.user);
+		const data = await request.formData();
+		try {
+			selectThumbnail(
+				params.id,
+				text(data, 'itemId'),
+				text(data, 'thumbnailId'),
+				Number(data.get('revision'))
+			);
+			return { intent: 'selectThumbnail', success: true };
+		} catch (cause) {
+			const issue = problem(cause);
+			return fail(issue.status, { intent: 'selectThumbnail', ...issue });
+		}
+	},
+	deleteThumbnail: async ({ locals, params, request }) => {
+		requireUser(locals.user);
+		const data = await request.formData();
+		try {
+			await deleteThumbnail(
+				params.id,
+				text(data, 'itemId'),
+				text(data, 'thumbnailId'),
+				Number(data.get('revision'))
+			);
+			return { intent: 'deleteThumbnail', success: true };
+		} catch (cause) {
+			const issue = problem(cause);
+			return fail(issue.status, { intent: 'deleteThumbnail', ...issue });
+		}
+	}
+} satisfies Actions;

src/routes/post/[id]/export/[itemId]/[kind]/+server.ts

@@ -0,0 +1,30 @@
+import { error } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { requireUser } from '#lib/server/auth.js';
+import { getExport } from '#lib/server/post.js';
+
+export const GET: RequestHandler = ({ locals, params }) => {
+	requireUser(locals.user);
+	if (!['texts', 'cut', 'resolve', 'srt'].includes(params.kind))
+		error(404, 'Export nicht gefunden');
+	try {
+		const file = getExport(
+			params.id,
+			params.itemId,
+			params.kind as 'texts' | 'cut' | 'resolve' | 'srt'
+		);
+		return new Response(file.body, {
+			headers: {
+				'content-type': file.contentType,
+				'content-disposition': `attachment; filename="post-${params.itemId}.${file.extension}"`,
+				'cache-control': 'private, no-store',
+				'x-content-type-options': 'nosniff'
+			}
+		});
+	} catch (cause) {
+		if (cause instanceof Error && cause.message === 'EXPORT_NOT_READY') {
+			error(409, 'Für diesen Export fehlen noch technisch erforderliche Angaben.');
+		}
+		error(404, 'Export nicht gefunden');
+	}
+};

src/routes/post/[id]/source/[sourceId]/+server.ts

@@ -0,0 +1,20 @@
+import { error } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { requireUser } from '#lib/server/auth.js';
+import { getPostSourceFile } from '#lib/server/post.js';
+
+export const GET: RequestHandler = async ({ locals, params }) => {
+	requireUser(locals.user);
+	const file = await getPostSourceFile(params.id, params.sourceId);
+	if (!file) error(404, 'Datei nicht gefunden');
+	return new Response(file.data, {
+		headers: {
+			'content-type': 'text/markdown; charset=utf-8',
+			'content-length': String(file.byteSize),
+			'content-disposition': `inline; filename*=UTF-8''${encodeURIComponent(file.originalName)}`,
+			'cache-control': 'private, no-store',
+			'x-content-type-options': 'nosniff',
+			'content-security-policy': "default-src 'none'; style-src 'unsafe-inline'; sandbox"
+		}
+	});
+};

src/routes/post/[id]/thumbnail/[thumbnailId]/+server.ts

@@ -0,0 +1,22 @@
+import { error } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { requireUser } from '#lib/server/auth.js';
+import { getThumbnailFile } from '#lib/server/post.js';
+
+export const GET: RequestHandler = async ({ locals, params, url }) => {
+	requireUser(locals.user);
+	const file = await getThumbnailFile(params.id, params.thumbnailId);
+	if (!file) error(404, 'Thumbnail nicht gefunden');
+	const disposition = url.searchParams.get('download') === '1' ? 'attachment' : 'inline';
+	return new Response(file.data, {
+		headers: {
+			'content-type': file.mimeType,
+			'content-length': String(file.byteSize),
+			'content-disposition': `${disposition}; filename*=UTF-8''${encodeURIComponent(file.originalName)}`,
+			'cache-control': 'private, no-store',
+			'x-content-type-options': 'nosniff',
+			'content-security-policy': "default-src 'none'; sandbox",
+			'cross-origin-resource-policy': 'same-origin'
+		}
+	});
+};

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

@@ -28,6 +28,7 @@ import {
 	saveShowMetadata,
 	listShows,
 	updatePieceUsage,
+	updatePieceUsageMetadata,
 	updateShowSection,
 	type EditableShowStatus,
 	type PieceUsageUpdate
@@ -369,6 +370,21 @@ export const actions = {
 			})
 		);
 	},
+	updateUsageMetadata: async ({ locals, params, request }) => {
+		requireUser(locals.user);
+		const data = await request.formData();
+		return attempt('updateUsageMetadata', () =>
+			updatePieceUsageMetadata(params.id, text(data, 'usageId'), Number(data.get('revision')), {
+				title: text(data, 'title'),
+				outputTitle: text(data, 'outputTitle'),
+				durationSeconds: pieceDurationInSeconds(data),
+				ownNotes: text(data, 'ownNotes'),
+				preparationStatus: text(data, 'preparationStatus') as PieceUsageUpdate['preparationStatus'],
+				preparationEffort: (text(data, 'preparationEffort') ||
+					null) as PieceUsageUpdate['preparationEffort']
+			})
+		);
+	},
 	duplicateUsage: async ({ locals, params, request }) => {
 		requireUser(locals.user);
 		const data = await request.formData();

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

@@ -8,14 +8,22 @@
 	import PieceUsageHistory from '#lib/components/PieceUsageHistory.svelte';
 	import AppIcon from '#lib/components/AppIcon.svelte';
 	import ShareManagement from '#lib/components/ShareManagement.svelte';
-	import UsageEditorDialog from '#lib/components/UsageEditorDialog.svelte';
+	import StreamInspector from '#lib/components/StreamInspector.svelte';
 	import StreamNavigation from '#lib/components/StreamNavigation.svelte';
 	import { formatClock, formatDuration } from '#lib/format.js';
+	import type { PieceUsage, ShowSection } from '#lib/server/shows.js';
 	import type { PageProps } from './$types';
 
 	let { data, form }: PageProps = $props();
-	let mobilePane = $state<'fundus' | 'plan'>('plan');
+	type InspectorSelection =
+		{ kind: 'show' } | { kind: 'section'; id: string } | { kind: 'usage'; id: string };
+
+	let initialUsageId = untrack(() => page.url.searchParams.get('usage'));
+	let mobilePane = $state<'fundus' | 'plan' | 'details'>(initialUsageId ? 'details' : 'plan');
 	let pieceLibraryOpen = $state(false);
+	let inspectorSelection = $state<InspectorSelection>(
+		initialUsageId ? { kind: 'usage', id: initialUsageId } : { kind: 'show' }
+	);
 	let dragged = $state<{ kind: 'piece' | 'section' | 'usage'; id: string } | null>(null);
 	let dropPreview = $state<
 		| { kind: 'section'; position: number }
@@ -46,6 +54,26 @@
 	let plannedCount = $derived(
 		data.show.sections.reduce((total, section) => total + section.usages.length, 0)
 	);
+	let selectedSection = $derived.by(() => {
+		if (inspectorSelection.kind !== 'section') return null;
+		const sectionId = inspectorSelection.id;
+		return data.show.sections.find((section) => section.id === sectionId) ?? null;
+	});
+	let selectedUsageContext = $derived.by(
+		(): {
+			usage: PieceUsage;
+			section: ShowSection | null;
+		} | null => {
+			if (inspectorSelection.kind !== 'usage') return null;
+			const usageId = inspectorSelection.id;
+			for (const section of data.show.sections) {
+				const usage = section.usages.find((item) => item.id === usageId);
+				if (usage) return { usage, section };
+			}
+			const usage = data.show.reserve.find((item) => item.id === usageId);
+			return usage ? { usage, section: null } : null;
+		}
+	);
 	onMount(() => {
 		const syncFiltersFromHistory = () => {
 			const search = new URL(window.location.href).searchParams;
@@ -88,6 +116,18 @@
 		dropTarget = null;
 	}
 
+	function showInspector(selection: InspectorSelection) {
+		inspectorSelection = selection;
+		if (selection.kind !== 'show') pieceLibraryOpen = false;
+		if (window.matchMedia('(max-width: 72rem)').matches) mobilePane = 'details';
+	}
+
+	function selectOnKeyboard(event: KeyboardEvent, selection: InspectorSelection) {
+		if (!['Enter', ' '].includes(event.key)) return;
+		event.preventDefault();
+		showInspector(selection);
+	}
+
 	function draggedTitle() {
 		if (!dragged) return '';
 		const draggedId = dragged.id;
@@ -184,7 +224,7 @@
 
 	const enhanceCommand: SubmitFunction = ({ formElement, submitter }) => {
 		const affected = formElement.closest<HTMLElement>(
-			'.run-section, .editable-reserve, .builder-source-card, .show-settings, .add-section-form'
+			'.run-section, .editable-reserve, .builder-source-card, .stream-inspector, .add-section-form'
 		);
 		affected?.classList.add('is-updating');
 		if (submitter instanceof HTMLButtonElement) submitter.disabled = true;
@@ -343,60 +383,6 @@
 				</div>{/if}
 			<div class="sr-only" role="status" aria-live="polite">{copyMessage}</div>
 
-			<details class="show-settings">
-				<summary>Streamdaten und Twitch-Texte</summary>
-				<form
-					use:enhance={enhanceCommand}
-					method="POST"
-					action="?/saveMetadata"
-					class="show-settings-form"
-				>
-					<input type="hidden" name="revision" value={data.show.revision} />
-					<label class="wide-field"
-						>Interner Titel<input
-							name="title"
-							required
-							maxlength="200"
-							value={data.show.title}
-						/></label
-					>
-					<label
-						>Termin<input name="startsAt" type="datetime-local" value={data.startsAtLocal} /><small
-							>Die Anzeige erfolgt immer in Europe/Berlin.</small
-						></label
-					>
-					<label
-						>Status<select name="status" value={data.show.status}
-							><option value="draft">Entwurf</option><option value="ready">Bereit</option><option
-								value="live">Live</option
-							></select
-						></label
-					>
-					<label class="wide-field"
-						>Twitch-Titel<span class="copy-field"
-							><input name="twitchTitle" maxlength="200" value={data.show.twitchTitle} /><button
-								type="button"
-								onclick={() => copyText('Twitch-Titel', data.show.twitchTitle)}>Kopieren</button
-							></span
-						></label
-					>
-					<label class="wide-field"
-						>Ankündigung<span class="copy-field"
-							><textarea name="announcementText" maxlength="20000" rows="4"
-								>{data.show.announcementText}</textarea
-							><button
-								type="button"
-								onclick={() => copyText('Ankündigung', data.show.announcementText)}>Kopieren</button
-							></span
-						></label
-					>
-					<div class="wide-field settings-submit">
-						<span>{copyMessage}</span><button class="primary-button" type="submit"
-							>Streamdaten speichern</button
-						>
-					</div>
-				</form>
-			</details>
 			{#if data.canManageShares}<ShareManagement
 					shows={[data.show]}
 					shares={data.shares}
@@ -420,6 +406,12 @@
 					type="button"
 					onclick={() => (mobilePane = 'plan')}>Ablauf</button
 				>
+				<button
+					class:active={mobilePane === 'details'}
+					aria-pressed={mobilePane === 'details'}
+					type="button"
+					onclick={() => (mobilePane = 'details')}>Details</button
+				>
 			</div>
 
 			<div class:library-open={pieceLibraryOpen} class="builder-workspace planning-workspace">
@@ -648,6 +640,8 @@
 									class="run-section editable-run-section"
 									class:is-dragging={dragged?.kind === 'section' && dragged.id === section.id}
 									class:drop-ready={dropTarget === section.id}
+									class:selected={inspectorSelection.kind === 'section' &&
+										inspectorSelection.id === section.id}
 									style={`--category:${section.categoryColor ?? '#8b8f98'}`}
 									ondragover={(event) => {
 										if (dragged?.kind === 'section') previewSection(event, index);
@@ -657,9 +651,15 @@
 								>
 									<header
 										class="section-drag-handle"
-										role="group"
+										role="button"
-										aria-label={`${section.name} verschieben`}
+										tabindex="0"
+										aria-label={`${section.name} auswählen oder verschieben`}
+										aria-pressed={inspectorSelection.kind === 'section' &&
+											inspectorSelection.id === section.id}
 										draggable="true"
+										onclick={() => showInspector({ kind: 'section', id: section.id })}
+										onkeydown={(event) =>
+											selectOnKeyboard(event, { kind: 'section', id: section.id })}
 										ondragstart={(event) => startDrag('section', section.id, event)}
 										ondragend={finishDrag}
 									>
@@ -722,6 +722,8 @@
 													<div
 														class="usage-row editable-usage"
 														class:is-dragging={dragged?.kind === 'usage' && dragged.id === usage.id}
+														class:selected={inspectorSelection.kind === 'usage' &&
+															inspectorSelection.id === usage.id}
 														role="group"
 														aria-label={`Verwendung ${usage.title}`}
 														ondragover={(event) => previewUsage(event, section.id, usageIndex)}
@@ -732,9 +734,13 @@
 													>
 														<div
 															class="usage-drag-copy"
-															role="group"
+															role="button"
-															aria-label={`${usage.title} verschieben`}
+															tabindex="0"
+															aria-label={`${usage.title} auswählen oder verschieben`}
 															draggable="true"
+															onclick={() => showInspector({ kind: 'usage', id: usage.id })}
+															onkeydown={(event) =>
+																selectOnKeyboard(event, { kind: 'usage', id: usage.id })}
 															ondragstart={(event) => {
 																event.stopPropagation();
 																startDrag('usage', usage.id, event);
@@ -786,15 +792,13 @@
 																	><AppIcon name="arrow-down" /></button
 																>
 															</form>
-															<UsageEditorDialog
+															<button
-																{usage}
+																class="usage-edit-button"
-																open={page.url.searchParams.get('usage') === usage.id}
+																type="button"
-																revision={data.show.revision}
+																aria-label={`${usage.title} bearbeiten und verschieben`}
-																sectionId={section.id}
+																onclick={() => showInspector({ kind: 'usage', id: usage.id })}
-																sections={data.show.sections}
+																><AppIcon name="pencil" /></button
-																error={form?.error}
+															>
-																{enhanceCommand}
-															/>
 														</div>
 													</div>
 												</div>
@@ -831,68 +835,6 @@
 											Leerer Abschnitt · Piece hinzufügen oder hierher ziehen
 										</div>
 									{/if}
-									<details class="section-editor">
-										<summary>Abschnitt bearbeiten</summary>
-										<form
-											use:enhance={enhanceCommand}
-											method="POST"
-											action="?/updateSection"
-											class="section-edit-form"
-										>
-											<input type="hidden" name="revision" value={data.show.revision} /><input
-												type="hidden"
-												name="sectionId"
-												value={section.id}
-											/><label
-												>Name<input
-													name="name"
-													required
-													maxlength="200"
-													value={section.name}
-												/></label
-											><label
-												>Kategorie<select name="categoryId"
-													><option value="">Ohne Kategorie</option
-													>{#each data.taxonomy.categories as category (category.id)}<option
-															value={category.id}
-															selected={section.categoryId === category.id}>{category.name}</option
-														>{/each}</select
-												></label
-											><label
-												>Explizite Dauer in Sekunden<input
-													name="explicitDurationSeconds"
-													type="number"
-													min="0"
-													max="86400"
-													value={section.explicitDurationSeconds ?? ''}
-													placeholder="Summe der Pieces"
-												/></label
-											><label
-												>Twitch-Tags<input
-													name="twitchTags"
-													maxlength="300"
-													value={section.twitchTags.join(', ')}
-													placeholder="Gaming, Deutsch"
-												/></label
-											><button class="secondary-button" type="submit">Abschnitt speichern</button>
-										</form>
-										<form
-											use:enhance={enhanceCommand}
-											method="POST"
-											action="?/removeSection"
-											onsubmit={(event) =>
-												!confirm('Abschnitt samt Einplanungen entfernen?') &&
-												event.preventDefault()}
-										>
-											<input type="hidden" name="revision" value={data.show.revision} /><input
-												type="hidden"
-												name="sectionId"
-												value={section.id}
-											/><button class="text-button danger-text" type="submit"
-												>Abschnitt entfernen</button
-											>
-										</form>
-									</details>
 								</article>
 							</div>
 						{/each}
@@ -986,6 +928,8 @@
 								<div
 									class="reserve-usage"
 									class:is-dragging={dragged?.kind === 'usage' && dragged.id === usage.id}
+									class:selected={inspectorSelection.kind === 'usage' &&
+										inspectorSelection.id === usage.id}
 									role="group"
 									aria-label={`Reserve ${usage.title}`}
 									ondragover={(event) => previewUsage(event, null, usageIndex)}
@@ -996,9 +940,12 @@
 								>
 									<div
 										class="usage-drag-copy"
-										role="group"
+										role="button"
-										aria-label={`${usage.title} verschieben`}
+										tabindex="0"
+										aria-label={`${usage.title} auswählen oder verschieben`}
 										draggable="true"
+										onclick={() => showInspector({ kind: 'usage', id: usage.id })}
+										onkeydown={(event) => selectOnKeyboard(event, { kind: 'usage', id: usage.id })}
 										ondragstart={(event) => startDrag('usage', usage.id, event)}
 										ondragend={finishDrag}
 									>
@@ -1039,14 +986,13 @@
 											>Aus Stream entfernen</button
 										>
 									</form>
-									<UsageEditorDialog
+									<button
-										{usage}
+										class="usage-edit-button"
-										revision={data.show.revision}
+										type="button"
-										sectionId=""
+										aria-label={`${usage.title} bearbeiten und verschieben`}
-										sections={data.show.sections}
+										onclick={() => showInspector({ kind: 'usage', id: usage.id })}
-										error={form?.error}
+										><AppIcon name="pencil" /></button
-										{enhanceCommand}
+									>
-									/>
 								</div>
 							</div>
 						{/each}
@@ -1060,6 +1006,22 @@
 							</p>{/if}
 					</section>
 				</section>
+				<div class="stream-inspector-slot" class:mobile-hidden={mobilePane !== 'details'}>
+					{#key `${inspectorSelection.kind}-${inspectorSelection.kind === 'show' ? data.show.id : inspectorSelection.id}`}
+						<StreamInspector
+							show={data.show}
+							startsAtLocal={data.startsAtLocal}
+							categories={data.taxonomy.categories}
+							section={selectedSection}
+							usage={selectedUsageContext?.usage ?? null}
+							usageSectionName={selectedUsageContext?.section?.name ?? ''}
+							usageSectionId={selectedUsageContext?.section?.id ?? ''}
+							{enhanceCommand}
+							{copyText}
+							onshow={() => showInspector({ kind: 'show' })}
+						/>
+					{/key}
+				</div>
 			</div>
 
 			<form