feat(vorlagen): Editor, Liste und Versionsgeschichte (#24)

docs/architektur.md

@@ -75,6 +75,16 @@ Editor, den JSON-Export und den Import — drei getrennte Schemata würden ausei
 Import wäre der Ort, an dem das erst auffiele. Das Format ist in
 [`docs/vorlagen-format.md`](vorlagen-format.md) beschrieben.
 
+Die **eingebauten Platzhalter** stehen als Liste in [`src/lib/platzhalter.ts`](../src/lib/platzhalter.ts)
+— Daten, kein Code. Der Editor zeigt sie als Hilfe, die Warnung vor unbekannten Platzhaltern
+vergleicht dagegen, und die Auflösung in #012 baut darauf auf. Eine zweite Aufzählung an anderer
+Stelle würde unweigerlich auseinanderlaufen: ein Platzhalter, der in der Hilfe steht, aber nicht
+aufgelöst wird, bliebe im fertigen PowerShell-Befehl als `{{…}}` stehen.
+
+Die Warnung ist ausdrücklich **keine Ablehnung**. Ein Tippfehler soll im Editor auffallen und nicht
+erst dem Techniker im Lauf; es kann aber gute Gründe geben, einen Platzhalter stehen zu lassen —
+etwa weil die Variable gleich noch kommt. Speichern und Veröffentlichen bleiben deshalb erlaubt.
+
 ## 5. Der Weg zu Phase 4 (Aktionen)
 
 Die in den Vorlagen vorbereiteten PowerShell-Befehle sind bewusst die **Vorstufe ausführbarer
@@ -118,6 +128,28 @@ gegen den Zweck eines Archivs. Der `tagCode` ist zusätzlich in `TagCodeVergabe`
 aus dem nie gelöscht wird — sonst würde ein Code nach dem Löschen eines Geräts wieder frei und
 ein alter Aufkleber zeigte auf ein fremdes Objekt.
 
+## 5b. Warum ein Screenshot nichts über Bedienbarkeit sagt
+
+In dieser Umgebung hydriert `next dev` nicht: die Seiten werden serverseitig gerendert und sehen
+vollständig richtig aus, aber React hängt sich nie an — kein Knopf, kein Formular, kein Sortieren
+tut etwas. Nachgewiesen in #010, und zwar auch ohne `src/proxy.ts` und ohne `output: "standalone"`;
+der HMR-WebSocket scheitert mit `ERR_INVALID_HTTP_RESPONSE`. Es liegt am Werkzeug, nicht an diesem
+Code — im gebauten Stand tragen 1281 von 1296 Elementen React-Knoten, im Entwicklungsmodus zwei.
+
+Zwei Folgen, beide verbindlich:
+
+1. **Oberflächen werden gegen `pnpm build && pnpm start` abgenommen**, nicht gegen `pnpm dev` —
+   ebenso die Screenshots. Steht in `CLAUDE.md`.
+2. **Was nur mit angehängtem React gelingt, gehört in einen Playwright-Test.** `pnpm test:e2e`
+   klickt den Editor durch: anlegen, tippen, sortieren mit dem Finger bei 390 px, speichern, neu
+   laden und nachsehen, ob es wirklich in der Datenbank steht.
+
+Die Content-Security-Policy in `src/proxy.ts` ist deshalb zweigeteilt: im Entwicklungsmodus mit
+`unsafe-eval` und WebSocket, im ausgelieferten Stand ohne beides. Die Entscheidung fällt an
+`process.env.NODE_ENV`, und `tests/sicherheitsrichtlinie.test.ts` prüft sie am Proxy selbst — eine
+Prüfung der Funktion mit selbst gesetztem Argument hätte genau den Fehler durchgelassen, vor dem
+der Kommentar darüber warnt.
+
 ## 6. Betrieb: zwei Wege, eine Regel
 
 Die Datenbank ist auf beiden Wegen von außen nicht erreichbar:

docs/devlog.md

@@ -12,11 +12,12 @@ als Unterpunkte mit Aufgabe und Dauer.
 | #007 | M2 – Auth, Rollen, Benutzer | 1 h 35 min |
 | #008 | M3 – Betriebsmodus und Kunden | 1 h 20 min |
 | #009 | M4 – Vorlagen-Versionierung im Service | 1 h 20 min |
-| | **Summe** | **6 h 50 min** |
+| #010 | M5 – Vorlagen-Editor | 2 h 10 min |
+| | **Summe** | **9 h** |
 
 | Meilenstein | Tatsächlich | Status |
 |---|---|---|
-| v0.1.0 | 6 h 50 min | in Arbeit |
+| v0.1.0 | 9 h | in Arbeit |
 
 ---
 
@@ -339,3 +340,59 @@ als Unterpunkte mit Aufgabe und Dauer.
 
 - #010 Vorlagen-Editor: Liste mit Suche und Filtern, Abschnitte und Schritte per Drag & Drop,
   Vorschau, Veröffentlichen, Versionshistorie, Warnung bei unbekannten Platzhaltern.
+
+---
+
+## 2026-09-25 · Sitzung 6 · 08:20–10:30
+
+**Issue:** #010 (M5)
+**Version:** 0.1.0
+
+### Erledigt
+
+- Vorlagenliste mit Suche und Filtern, Vorlagenseite mit Versionsgeschichte, Kopfdaten, Duplizieren,
+  Archivieren, JSON-Ex- und -Import
+- Vorlagen-Editor (Sub-Agent): Abschnitte, Schritte, Variablen — anlegen, bearbeiten, löschen,
+  sortieren mit Finger, Maus, Tastatur und Knöpfen; typabhängige Felder, Markdown-Hilfetexte,
+  Platzhalter-Warnung, Vorschau mit Beispielwerten
+- `src/lib/platzhalter.ts` als einzige Quelle der eingebauten Platzhalter — #012 baut darauf auf
+- Erste Playwright-Tests: der Editor wird durch die Oberfläche gefahren, einschließlich Sortieren
+  mit dem Finger bei 390 px
+- Unabhängiger Review: zwei Blocker, sechs weitere Befunde, alle abgearbeitet
+- **496 Tests** grün (vorher 428), dazu 5 E2E-Tests
+
+### Entscheidungen
+
+- **Oberflächen werden gegen den gebauten Stand abgenommen, nie gegen `pnpm dev`.** Der
+  Entwicklungsmodus hydriert in dieser Umgebung nicht; ein Screenshot sieht deshalb richtig aus,
+  während kein Knopf etwas tut. Das ändert die Arbeitsweise für alle folgenden Meilensteine und
+  steht in `CLAUDE.md` und `docs/architektur.md`.
+- **Was nur mit angehängtem React gelingt, gehört in einen Playwright-Test.** Nicht erst in #018:
+  ohne ihn wäre „Sortieren funktioniert am Handy“ eine Behauptung geblieben.
+- **Die Nummer eines Abschnitts kommt aus der Position und wird nie gespeichert.** Die
+  Formatdokumentation sagte bisher das Gegenteil; beim ersten Umsortieren wäre eine gespeicherte
+  Nummer falsch gewesen. Entfernt wird eine vorangestellte Nummer nur beim Trenner `·` und nur,
+  wenn dahinter keine Ziffer steht — „24 · 7 Bereitschaft“ bleibt.
+- **Ein Knopf, der auf eine fehlende Seite zeigt, wird nicht verlinkt.** Galt für die Navigation
+  schon, jetzt auch für „Scannen“.
+- **`format:pruefen` ist ein Tor.** Sonst formatiert `lint-staged` beim Commit nach, und im Commit
+  stehen Änderungen, die niemand gesehen hat.
+
+### Probleme
+
+- **Mein eigener Prüfaufbau hat mich getäuscht.** Ich habe Seiten im Browser angesehen, für gut
+  befunden und weitergemacht — in einem Entwicklungsmodus, in dem nichts anklickbar war. Aufgefallen
+  ist es erst, als ich zum ersten Mal wirklich geklickt habe. Zwei Stunden Suche nach der Ursache,
+  am Ende lag es am Werkzeug und nicht am Code; die Erkenntnis war die Zeit wert.
+- **Ein Kommentar hat wieder eine Zusage gemacht, die kein Test hielt** („ein Test hält das fest“,
+  über der CSP). Dritter Meilenstein in Folge, in dem der Review genau diese Sorte Fehler findet.
+  Ein Kommentar, der eine Garantie behauptet, braucht den Test daneben — oder den Satz nicht.
+- **Der Sub-Agent hat im Browser Dinge geprüft, die dort gar nicht prüfbar waren.** Mein Auftrag
+  hat ihn dorthin geschickt; die Lücke war meine.
+- **Der Editor war bei einer einzigen Vorlage 16 986 px hoch.** Ich habe es im Screenshot gesehen,
+  nicht der Review.
+
+### Nächster Schritt
+
+- #011 Mitarbeiter, Abteilungen und Geräte: Listen mit Suche, Mitarbeiterseite mit Historie,
+  Abteilungen mit Ziel-OU und Standardgruppen, Geräte mit CSV-Import.

docs/issues/010-vorlagen-editor.md

@@ -1,9 +1,9 @@
 # #010 M5 – Vorlagen-Editor
 
-**Status:** offen
+**Status:** erledigt
 **Meilenstein:** v0.1.0
 **Labels:** phase-1, frontend
-**Geschätzt:** 10 h   **Tatsächlich:** –
+**Geschätzt:** 10 h   **Tatsächlich:** 2 h 10 min
 
 ## Ziel
 
@@ -11,21 +11,68 @@ Der Editor, in dem ein Redakteur eine Vorlage baut, ohne den Kopf über Versione
 
 ## Aufgaben
 
-- [ ] Vorlagenliste mit Suche, Filter nach Kategorie und Tag, Kennzeichnung „Entwurf vorhanden“
-- [ ] Editor: Abschnitte und Schritte anlegen, bearbeiten, löschen; Abschnitte mit zweistelliger Nummer (`01 · Vorbereitung`)
-- [ ] Sortieren per Drag & Drop mit `@dnd-kit`, auch am Handy mit dem Finger bedienbar
-- [ ] Je Schritt: Titel, Typ (`HAKEN`, `TEXT`, `ZAHL`, `AUSWAHL`, `DATUM`, `BEFEHL`), Pflicht (roter Stern), Hilfetext als Markdown, Doku-Link
-- [ ] Typabhängige `konfig`-Formulare: Auswahloptionen, Min/Max/Einheit, bei `BEFEHL` die Shell (`powershell`/`bash`/`cmd`), `multiline` und der Befehlstext
-- [ ] Variablen definieren: `key`, Label, Typ, Optionen, Pflicht, Position
-- [ ] Vorschau der Vorlage wie im Lauf, mit Beispielwerten
-- [ ] Veröffentlichen mit Änderungsnotiz, Versionshistorie ansehen, Vorlage duplizieren, JSON-Export und -Import
-- [ ] Warnung im Editor bei unbekannten Platzhaltern in Titel, Hilfetext und Befehlstext
-- [ ] Screenshots Liste, Editor, Historie in `docs/screenshots/m5/`
+- [x] Vorlagenliste mit Suche, Filter nach Kategorie und Tag, Kennzeichnung „Entwurf vorhanden“
+- [x] Editor: Abschnitte und Schritte anlegen, bearbeiten, löschen; Abschnitte mit zweistelliger Nummer (`01 · Vorbereitung`)
+- [x] Sortieren per Drag & Drop mit `@dnd-kit`, auch am Handy mit dem Finger bedienbar
+- [x] Je Schritt: Titel, Typ (`HAKEN`, `TEXT`, `ZAHL`, `AUSWAHL`, `DATUM`, `BEFEHL`), Pflicht (roter Stern), Hilfetext als Markdown, Doku-Link
+- [x] Typabhängige `konfig`-Formulare: Auswahloptionen, Min/Max/Einheit, bei `TEXT` mehrzeilig, bei `BEFEHL` die Shell (`powershell`/`bash`/`cmd`) und der Befehlstext
+- [x] Variablen definieren: `key`, Label, Typ, Optionen, Pflicht, Position
+- [x] Vorschau der Vorlage wie im Lauf, mit Beispielwerten
+- [x] Veröffentlichen mit Änderungsnotiz, Versionshistorie ansehen, Vorlage duplizieren, JSON-Export und -Import
+- [x] Warnung im Editor bei unbekannten Platzhaltern in Titel, Hilfetext und Befehlstext
+- [x] Screenshots Liste, Editor, Historie in `docs/screenshots/m5/`
 
 ## Akzeptanzkriterien
 
-- [ ] Eine Vorlage lässt sich vollständig ohne Umweg über die Datenbank anlegen, sortieren, veröffentlichen
-- [ ] Eine veröffentlichte Version ist im Editor nur lesend; „Bearbeiten“ erzeugt sichtbar einen Entwurf
-- [ ] Unbekannte Platzhalter werden als Warnung angezeigt, blockieren aber das Speichern nicht
-- [ ] Sortieren funktioniert am Handy bei 390 px Breite ohne horizontales Scrollen
-- [ ] Der Markdown-Hilfetext rendert ohne rohes HTML
+- [x] Eine Vorlage lässt sich vollständig ohne Umweg über die Datenbank anlegen, sortieren, veröffentlichen
+- [x] Eine veröffentlichte Version ist im Editor nur lesend; „Bearbeiten“ erzeugt sichtbar einen Entwurf
+- [x] Unbekannte Platzhalter werden als Warnung angezeigt, blockieren aber das Speichern nicht
+- [x] Sortieren funktioniert am Handy bei 390 px Breite ohne horizontales Scrollen
+- [x] Der Markdown-Hilfetext rendert ohne rohes HTML
+
+## Beim Bauen aufgefallen
+
+- **`next dev` hydriert in dieser Umgebung überhaupt nicht.** Die Seiten werden serverseitig
+  gerendert und sehen vollständig richtig aus, aber React hängt sich nie an — kein Knopf tut etwas.
+  Gemessen: im Entwicklungsmodus tragen 2 von 1302 Elementen React-Knoten, im gebauten Stand 1281
+  von 1296. Es liegt nicht an diesem Code: auch ohne `src/proxy.ts` und ohne `output: "standalone"`
+  bleibt es dabei, und der HMR-WebSocket scheitert mit `ERR_INVALID_HTTP_RESPONSE`. Das ist der
+  heimtückischste Befund des Meilensteins, denn **ein Screenshot beweist damit nichts über
+  Bedienbarkeit** — und genau darauf haben sich die Meilensteine #005 bis #009 verlassen. Seitdem
+  steht in `CLAUDE.md`: Oberflächen werden gegen `pnpm build && pnpm start` abgenommen, und was nur
+  mit angehängtem React gelingt, gehört in einen Playwright-Test.
+- **Die CSP hatte im Entwicklungsmodus kein `unsafe-eval`.** React braucht es dort, die Konsole
+  meldete es auf jeder Seite. Behoben — es war nicht die Ursache des Hydrierungsproblems, aber ein
+  echter Fehler. Der ausgelieferte Stand bleibt streng, und der Test dazu prüft jetzt den Proxy
+  selbst statt nur die Funktion darunter: der Review hatte zu Recht beanstandet, dass der
+  Kommentar eine Zusage machte, die kein Test hielt.
+- **Eine abgelaufene Anmeldung hätte im Editor eine Stunde Arbeit vernichtet.** `rechtErforderlich`
+  wirft, der Wurf lief durch die Server Action bis in Nexts Fehlergrenze, und die hängt die Seite
+  aus — samt allem, was noch nicht gespeichert war. Nach zwölf Stunden läuft die Sitzung von selbst
+  ab; es hätte genau die Person getroffen, die lange an einer Vorlage sitzt. Jetzt wird der Fehler
+  gefangen und als Meldung gezeigt, der Aufbau lässt sich bei **jedem** fehlgeschlagenen Speichern
+  als JSON herauskopieren, und es gibt eine deutsche Fehlergrenze.
+- **Eine archivierte Kundenzuordnung verschwand beim Speichern der Kopfdaten.** Der archivierte
+  Kunde fehlte in der Auswahlliste, der Browser wählte die erste Option („für alle Kunden“), und
+  ein Klick auf „Kopfdaten speichern“ machte aus einer kundenspezifischen Vorlage eine für alle
+  sichtbare. Genau das, was der Kommentar über der Unterscheidung „Feld fehlt“ gegen „Feld leer“
+  zu verhindern versprach — er deckte den Fall „Feld da, aber unvollständig“ nicht ab.
+- **Zwei stille Textverfälscher.** `titelOhneNummer` machte aus „24 · 7 Bereitschaft“ ein
+  „7 Bereitschaft“, und `mitBeispielwerten` wertete `$&` im **Ersatztext** als Rückverweis — in
+  #012 wäre daraus ein verfälschter PowerShell-Befehl geworden.
+- **Der Editor war 16 986 px hoch**, weil jeder Schritt dauerhaft aufgeklappt war. Mit den sieben
+  Vorlagen aus #017 (rund 150 Schritte) wäre er unbenutzbar gewesen. Jetzt klappen Schritte,
+  Variablen und Abschnitte zu: dieselbe Vorlage misst 3 482 px am Handy.
+- **`abschnitte.2.schritte.0.titel` ist eine richtige und nutzlose Fehlermeldung.** Daraus wird
+  jetzt „Abschnitt 03, Schritt 1: …“. Ein leeres Pflichtfeld weist weiterhin den ganzen Aufbau ab —
+  aber man findet die Stelle.
+- **Der „Scannen“-Knopf zeigte auf eine Seite, die es nicht gibt.** Next holt Verweise beim
+  Darüberfahren vorab, jede Seite erzeugte also im Hintergrund eine 404. Bis #014 ist er gedämpft
+  und nicht verlinkt — dieselbe Regel, die für die Navigation schon galt.
+- **Eine veröffentlichte Vorlage lässt sich nicht mehr löschen**, auch nicht über einen
+  Kaskadenlöschvorgang: der Trigger aus #009 verweigert es. Beim Aufräumen der Testdaten selbst
+  erlebt. Das ist die Zusage, an der das Archiv hängt — die E2E-Tests archivieren deshalb, statt
+  zu löschen, und brauchen ab #018 eine Wegwerf-Datenbank.
+- **`prettier --check` war rot**, ohne dass ein Tor es bemerkt hätte: `lint-staged` formatiert beim
+  Commit automatisch nach, und das Ergebnis wäre ein Commit mit Änderungen, die niemand gesehen
+  hat. `pnpm format:pruefen` gehört jetzt zu den Toren und zur CI.

docs/issues/README.md

@@ -14,7 +14,7 @@ Diese Dateien sind die Quelle; `pnpm issues:sync` spiegelt sie in den Gitea-Trac
 | #007 | [M2 – Auth, Rollen, Benutzer](007-auth-rollen-benutzer.md) | erledigt | v0.1.0 | 8 h | 1 h 35 min |
 | #008 | [M3 – Betriebsmodus und Kunden](008-betriebsmodus-kunden.md) | erledigt | v0.1.0 | 6 h | 1 h 20 min |
 | #009 | [M4 – Vorlagen-Versionierung im Service](009-vorlagen-versionierung.md) | erledigt | v0.1.0 | 6 h | 1 h 20 min |
-| #010 | [M5 – Vorlagen-Editor](010-vorlagen-editor.md) | offen | v0.1.0 | 10 h | – |
+| #010 | [M5 – Vorlagen-Editor](010-vorlagen-editor.md) | erledigt | v0.1.0 | 10 h | 2 h 10 min |
 | #011 | [M6 – Mitarbeiter, Abteilungen, Geräte](011-mitarbeiter-abteilungen-geraete.md) | offen | v0.1.0 | 9 h | – |
 | #012 | [M7 – Platzhalter, Namensregeln, Escaping](012-platzhalter-namensregeln.md) | offen | v0.1.0 | 8 h | – |
 | #013 | [M8 – Läufe: Service und Abarbeitung](013-laeufe-abarbeitung.md) | offen | v0.1.0 | 14 h | – |
@@ -24,4 +24,4 @@ Diese Dateien sind die Quelle; `pnpm issues:sync` spiegelt sie in den Gitea-Trac
 | #017 | [M12 – Seed der sieben Vorlagen](017-seed-sieben-vorlagen.md) | offen | v0.1.0 | 8 h | – |
 | #018 | [M13 – E2E-Tests, Anleitung, PDF](018-e2e-anleitung-pdf.md) | offen | v0.1.0 | 14 h | – |
 | #019 | [M14 – Betriebswege und Release v0.1.0](019-betrieb-release.md) | offen | v0.1.0 | 10 h | – |
-| | **Summe** | | | **136 h** | **6 h 50 min** |
+| | **Summe** | | | **136 h** | **9 h** |

docs/vorlagen-format.md

@@ -56,7 +56,7 @@ Platzhaltern. **JSON kennt keine Kommentare** — die Zeilen mit `//` müssen vo
     // Die Reihenfolge dieser Liste ist die Reihenfolge in der Ansicht.
     "abschnitte": [
       {
-        "titel": "01 · Vorbereitung",
+        "titel": "Vorbereitung",
         "schritte": [
           { "titel": "Gerät auspacken", "pflicht": true },
           {
@@ -75,7 +75,7 @@ Platzhaltern. **JSON kennt keine Kommentare** — die Zeilen mit `//` müssen vo
         ]
       },
       {
-        "titel": "02 · Konto",
+        "titel": "Konto",
         "schritte": [
           {
             "titel": "Benutzerkonto anlegen",
@@ -135,9 +135,17 @@ dass es jemand merkt.
 
 | Feld       | Pflicht  | Bedeutung                                                                     |
 | ---------- | -------- | ----------------------------------------------------------------------------- |
-| `titel`    | Pflicht  | Überschrift, nicht leer. Üblich mit zweistelliger Nummer: `01 · Vorbereitung`. |
+| `titel`    | Pflicht  | Überschrift, nicht leer und **ohne** Nummer — siehe unten.                    |
 | `schritte` | optional | Liste von Schritten in Abarbeitungsreihenfolge; Standard `[]`.                 |
 
+Abschnitte werden überall mit einer zweistelligen Nummer angezeigt (`01 · Vorbereitung`). Diese
+Nummer wird **aus der Position abgeleitet und nie gespeichert**. Stünde sie im Titel, wäre sie beim
+ersten Umsortieren falsch — und niemand ginge hinterher durch und zöge sie nach. Trägt ein Titel
+dennoch eine vorangestellte Nummer mit `·` als Trenner (ältere Dateien taten das), wird sie beim
+Öffnen im Editor entfernt, damit nicht `01 · 01 · Vorbereitung` dasteht; mit dem nächsten Speichern
+gilt der bereinigte Titel. Andere Trenner bleiben unangetastet: „2. Etage prüfen“ ist ein Titel und
+keine Nummerierung.
+
 ### Schritt
 
 | Feld        | Pflicht  | Bedeutung                                                                        |