mhoennigandClaude Opus 4.8
5905712aa5
TASKS Phase 1. Baum-/Kostenlogik -> model.js (gateOf, needsBreakdown, visibleChildren, computeCheapSet, cheapCls), HTML-Erzeugung -> render.js (renderTreeHtml). Beide sind headless: UI-State (verworfene einblenden, günstigster Pfad) kommt als Parameter herein statt aus Globals; nur cheapPathOn bleibt UI-State in app.js. render() in app.js ist jetzt die dünne DOM-Anbindung. Snapshot-Tests (tests/render.test.js): Grundzustand, günstigster Pfad, verworfene einblenden, Geister-Knoten („Untergliederung fehlt"), plus die Zusicherung, dass der Renderer nie eine Modus-Klasse erzeugt (Modus = CSS-Container-Klasse in app.js -> ein Snapshot deckt alle drei Modi). 24 Tests grün. Byte-identisches Rendering im Browser verifiziert (18 Knoten, 6 Blätter, 3 Geister, Toggles ok, keine Konsolenfehler). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2.5 KiB
2.5 KiB
Aufgaben
Abhaken beim Erledigen; neue Aufgaben unten anfügen.
Phase 1 — Modularisierung & Tests
- Projektgerüst:
src/(parser.js, model.js, render.js, app.js),tests/,index.htmlbindet Module ein; weiterhin ohne Build nutzbar (ES-Module) oder mit minimalem Setup (Vite) — Entscheidung dokumentieren. → Vite gewählt (D19):src/als ES-Module,npm run buildbündelt zu einer self-containeddist/index.html(file://-tauglich). Gerüst steht (aktuellsrc/app.js+src/style.css); Parser/Renderer werden in den folgenden Checkboxen herausgelöst. - Parser extrahieren; Verhalten exakt wie in
docs/SPEC.md§1–§8. →src/parser.jsexportiertparse,STATUS_BY_CODE,SIZE_RANK(headless, kein DOM);app.jsimportiert sie. - Unit-Tests für den Parser (Vitest): kanonisches Beispiel aus SPEC §10
als Fixture; Randfälle: gemischte Gates, Tabs/ungleichmäßige Einrückung,
URL mit
@, mehrere Wurzeln, leere Labels,%%am Zeilenanfang/-ende. →tests/parser.test.js(18 Tests). - Renderer extrahieren (HTML-String-Erzeugung), Snapshot-Tests für
Normal- und Vertikalmodus sowie „Untergliederung fehlt“.
→
src/model.js(Baum-/Kostenlogik) +src/render.js(renderTreeHtml, headless);app.jsreicht UI-State als Parameter herein.tests/render.test.js(6 Tests, Snapshots). Anm.: der Modus (horizontal/vertikal/kompakt) ist reine CSS-Container-Klasse und ändert den Renderer-String nicht — ein Snapshot deckt alle drei Modi ab. - Warnungs-Modell vereinheitlichen (Zeilennummern, Typen).
Phase 2 — Qualität
- Barrierefreiheit: Fokusreihenfolge, aria-Labels für Status/Größe/Tags.
- Druck-Stylesheet (Diagramm ohne Editor-Panel).
- Fehlertolerantes Parsen weiter ausbauen (unbekannte Statuszeichen melden).
Deployment
- GitHub-Pages-Workflow angelegt (
.github/workflows/pages.yml, siehe docs/DECISIONS.md D16).
Phase 3 — Integrationen (siehe docs/ROADMAP.md)
- Backend-Gerüst per Spring Initializr in
backend/anlegen (Kotlin, Gradle Kotlin DSL, JDK 21; Konventionen: backend/CLAUDE.md). - SVG-Renderer (Layout-Engine) als gemeinsame Basis für Export und Mermaid-Plugin.
- Mermaid-Plugin-Spike: Detektor + Registrierung, ein Minimalbaum.
- Taiga-Spike:
#ref-Syntax parsen, Status via REST-API auflösen (read-only), Mapping konfigurierbar.