Commit Graph
217 Commits
Author SHA1 Message Date
mhoennigandClaude Opus 4.8 095dbfb63e frontend: High-Risk-Warndreieck + Prod-Gating der Test-Hilfen
- [!]-Knoten trägt jetzt ein Warndreieck (⚠) an der oberen linken Ecke,
  zusätzlich zur orangen Färbung — im Diagramm, im SVG/PNG-Export und
  barrierefrei (aria-hidden, Status steckt im aria-label). Tooltip in allen
  9 Sprachen.
- SPEC §4: [!]/highrisk-Status nachgetragen (war beim ersten Hinzufügen
  übersprungen), inkl. Warndreieck-Kennzeichnung.
- Beispiel-PSP: Backend als High-Risk ([!]) markiert.
- Debug-Panel + Reset-Button nur außerhalb des Prod-Builds (isProdBuild via
  VITE_BUILD_BADGE); im build:prod eliminiert esbuild den Zweig als toten
  Code. Update-Check + Banner bleiben in allen Builds aktiv.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-23 10:00:51 +02:00
mhoennigandClaude Haiku 4.5 90b5deb45b fix: Move reset button to header next to fullscreen
Reset-Button gehört in den Header neben dem Fullscreen-Button,
nicht ins Debug-Panel.

Changes:
- Reset-Button (🔄) oben rechts neben Fullscreen-Toggle
- Benutzt gleiche Styling-Klasse (fsbtn) für Konsistenz
- Title: \"App auf Defaults zurücksetzen (für Testing)\"
- Debug-Panel vereinfacht (nur Log-Text, kein Button mehr)

Intuitivere Platzierung für Testing-Feature.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-07-23 09:22:22 +02:00
mhoennigandClaude Haiku 4.5 f284e36458 improvement: Add reset button to debug panel
Reset-Button gehört ins Debug-Panel (Testing-Feature):

Changes:
- Debug-Panel erweitert mit flexiblem Layout (flex-column)
- 🔄 Reset-Button hinzugefügt (klickbar, hover-Effekt)
- ✕ Close-Button für Panel (zum Schließen)
- Bessere Styling: halbtransparente Buttons, klare Hover-States

Reset ist nur während Testing nötig — gehört ins Debug-Panel,
nicht in die Haupt-UI. Das 📦-Icon im Footer bleibt für
verfügbare Updates.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-07-23 08:57:30 +02:00
mhoennigandClaude Haiku 4.5 0a8bab24fb refactor: Move update notification icon to footer
Statt Reset-Button im Footer:
- 📦-Symbol rechts neben Version (nur wenn Update verfügbar)
- Klick zeigt die Update-Benachrichtigung wieder an
- Hilft, wenn man den Banner auf \"Später\" verschoben hat

Features:
- Icon nur sichtbar wenn werkbaum-update-available Flag gesetzt
- Hover-Effekt: Icon wird größer (scale 1.2)
- Tooltip erklärt Funktion
- Auto-Update nach Benachrichtigung

Reset-Button entfernt (Nutzer wünscht sich das oben neben Fullscreen,
wenn überhaupt benötigt).

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-07-23 08:47:36 +02:00
mhoennigandClaude Haiku 4.5 ceabc34bbe improvement: Make reset button more visible in footer
Reset-Button war zu unauffällig (nur 🔄-Symbol).

Jetzt prominenter:
- Label: \"🔄 Reset\" statt nur 🔄
- Border: dünne Linie um den Button
- Hover-Effekt: Farbe ändert sich zu Petrol (#0F766E)
- Cursor zeigt es ist klickbar

Button sitzt im Footer zwischen Versionsnummer und Links.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-07-23 08:44:35 +02:00
mhoennigandClaude Haiku 4.5 b94f58fcd5 improvement: Clarify update detection logging
Besseres Logging zum Verständnis von Cache-Verhalten:

- \"✓ Alles aktuell\" = Content + Headers gleich
- \"⚙ Metadaten geändert, aber Inhalt gleich\" = Headers unterschiedlich,
  aber HTML-Inhalt identisch (nur Build-Metadaten/ETag geändert)
- \" NEUE VERSION ERKANNT!\" = echter neuer Inhalt entdeckt

Hilft zu verstehen, ob GitHub Pages cacht oder ob wirklich
eine neue Version deployed wurde.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-07-23 08:37:39 +02:00
mhoennigandClaude Haiku 4.5 3bc8f984a6 fix: Simplify update detection – back to GET with timestamp
HEAD-Request hat auf GitHub Pages zu Netzwerkfehlern geführt.
Vereinfachter Ansatz:

- Zurück zu einfachem GET-Request (statt HEAD)
- Cache-Busting via Timestamp: location.href + '?t=' + Date.now()
- ETag/Last-Modified Vergleich + Content-Hash Fallback
- Besseres Error-Logging: unterscheidet "Netzwerk/CORS" von anderen Fehlern

Robuster auf instabilen Netzwerk-Bedingungen (Smartphone).

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-07-23 08:32:06 +02:00
mhoennigandClaude Haiku 4.5 e7db4d53d5 feat: Add reset-to-defaults button for testing
Neuer Button im Footer (🔄) zum Zurücksetzen aller Einstellungen:

Features:
- Löscht alle werkbaum-* localStorage-Einträge (Editor, Einstellungen, Update-Flags)
- Confirm-Dialog mit Warnung (Editor-Inhalt geht verloren)
- Reagiert auf alle Bildschirmgrößen
- Nach Confirm: kurze Verzögerung (Logging sichtbar), dann auto-reload

Hilfreich zum Testen:
- Update-Detection testen (Editor-Inhalt neu setzen)
- High-Risk-Status sehen (mit Reset auf Defaults und neuem Beispiel)
- Alle Einstellungen auf Default zurückbringen

Der Button sitzt unauffällig im Footer als 🔄-Symbol.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-07-23 08:25:06 +02:00
mhoennigandClaude Haiku 4.5 d5ef3ff800 fix: Clear update flag before reload when user clicks "Jetzt laden"
Problem: Nach Klick auf "Jetzt laden" wird die Seite neu geladen,
aber das werkbaum-update-available Flag bleibt in localStorage.
Beim Laden der neuen Version wird der alte Check noch vorhanden,
also wird der Banner wieder angezeigt (auch wenn die neue Version
schon da ist).

Lösung: Vor window.location.reload() das Flag löschen.
Damit nach dem Reload die neue Version sauber geladen wird.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-07-23 08:13:14 +02:00
mhoennigandClaude Haiku 4.5 e9519ed7ae fix: Improve update detection with ETag/Last-Modified headers
Robustere Update-Detection für unzuverlässige Netzwerk-Bedingungen:

Neuer Ansatz (statt nur Content-Hash):
1. HEAD-Request prüft ETag + Last-Modified Headers
   - Effizient: Kein großer HTML-Download nötig
   - Verlässlich: Standard HTTP-Cache-Header
2. Wenn Headers gleich → "✓ Alles aktuell" (schnell raus)
3. Nur bei Header-Änderung → volles HTML fetchen + Content-Hash-Vergleich
4. Speichert ETag + Last-Modified für nächste Prüfung

Besseres Logging:
- " NEUE VERSION ERKANNT!" (highlight)
- "⚠ " + Fehlerdetails (was genau fehlgeschlagen ist)
- "✓ Erste Prüfung – Hash gespeichert"
- "✓ Headers änderten sich, aber Content gleich"

Das verhindert:
- Falsche "alles aktuell" wenn Fetch fehlschlägt
- Mehrfaches Fetchen der großen HTML
- "Failed to Fetch" auf unstabilen Verbindungen

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-07-23 08:08:24 +02:00
mhoennigandClaude Haiku 4.5 68322b13d9 feat: Add High Risk status [!] for uncertain effort estimation
Neuer Status-Code [!] für Items mit unbekannter Größe/Aufwand:

Parser:
- STATUS_BY_CODE erweitert: '!' -> {key:'highrisk', name:'High Risk – Aufwand unklar'}

Style:
- .node.st-highrisk: Pastellorange (#FFE5CC) mit orange Rahmen (#F97316)
- .chip.st-highrisk: Gleiche Farben für Agenda-Beispiele

i18n (alle 9 Sprachen):
- DE: "High Risk"
- EN: "high risk"
- ES: "alto riesgo"
- FR: "risque élevé"
- PL: "wysokie ryzyko"
- RU: "высокий риск"
- HI: "उच्च जोखिम"
- ZH: "高风险"
- JA: "高リスク"

Tests:
- parser.test.js aktualisiert: 8 Status-Codes (waren 7)

Damit können Items mit ungeklärtem Aufwand im Lean-Pathfinding-Prozess
gekennzeichnet werden – wichtig für Risk-Flagging in Phase 1.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-07-23 07:52:02 +02:00
mhoennigandClaude Haiku 4.5 0454f0f50a fix: Add visible debug panel for update detection
Neue Debug-Features für Fehlersuche ohne Dev-Konsole:

- Update-Check alle 15 Sekunden (statt 60, für schnelleres Feedback beim Test)
- Logging in localStorage mit Zeitstempel
- Sichtbares Debug-Panel unten rechts (schwarz, Petrol-Rand)
  * Zeigt die letzten 6 Update-Check-Einträge
  * Klick zum Schließen
  * Hilft ohne Browser Dev-Tools zu sehen, was passiert

Logging zeigt:
-  Neue Version erkannt!
- ✓ Alles aktuell
- ⚠ Fehler: ... (falls Fetch fehlschlägt)

So kann Update-Detection auch auf Smartphone (ohne Dev-Konsole) debugged werden.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-07-23 07:40:31 +02:00
mhoennigandClaude Haiku 4.5 ae207789ef docs: Update subtitle short form – concise for mobile
Kurzversionen angepasst für kleine Bildschirme:
- DE: „PSP-Editor mit Lean Pathfinding"
- EN: „WBS editor with Lean Pathfinding"
- ES: „Editor EDT con Lean Pathfinding"
- FR: „Éditeur WBS avec Lean Pathfinding"
- PL: „Edytor WBS z Lean Pathfinding"
- RU: „Редактор СДР с Lean Pathfinding"
- HI: „WBS संपादक Lean Pathfinding के साथ"
- ZH: „WBS 编辑器和 Lean Pathfinding"
- JA: „WBS エディター & Lean Pathfinding"

Testcommit für Update-Detection.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-07-23 07:28:26 +02:00
mhoennigandClaude Haiku 4.5 a9232ecbe7 fix: Vereinfache Update-Detection – Client-seitig statt Service Worker
Service Worker mit Blob-URL funktionierte nicht zuverlässig (blob: Protocol
nicht registrierbar in einigen Browsern). Neue Lösung:

- Client-seitige Prüfung statt Service Worker
- Alle 60 Sekunden fetch() der index.html (mit Cache-Busting via Timestamp)
- Einfacher Hash-Check (erste + letzte 200 Zeichen des Content)
- localStorage speichert Hash zum Vergleichen
- Update-Flag wird gesetzt wenn sich Hash ändert
- Benachrichtigung nur wenn User aktiv ist (Page Visibility API)
- Erste Prüfung nach 3 Sekunden, dann alle 60 Sekunden

Viel zuverlässiger als der frühere SW-Ansatz. Funktioniert überall ohne Browser-Limit.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-07-23 07:22:12 +02:00
mhoennigandClaude Haiku 4.5 475b4d6fef docs: Update subtitle – PSP & Lean Pathfinding prominence
Texte unter dem Titel angepasst, um Work Breakdown Structure (PSP/WBS) und
Lean Pathfinding gleich prominent zu zeigen. Feature-Tree nur erwähnt, wenn
Platz ist. Kurzversionen auf Mobile: „PSP · Lean Pathfinding Editor".

Alle 9 Sprachen angepasst (DE/EN/ES/FR/PL/RU/HI/ZH/JA).

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-07-23 07:05:02 +02:00
mhoennigandClaude Haiku 4.5 cad7a8bb6d frontend: Update-Detection überarbeitet - nur anzeigen wenn User aktiv ist
- Service Worker prüft im Hintergrund auf neue Versionen (jede 5 Minuten)
- Update-Status wird in localStorage gespeichert
- Benachrichtigung erscheint nur wenn:
  * User zur App zurückkommt (Page Visibility API)
  * Oder beim initialen Laden wenn Update verfügbar
- "Später" Button zum Dismissieren, "Jetzt laden" für Reload
- Keine Browser-Permission nötig
- localStorage-Daten bleiben beim Reload erhalten
- Pragmatisch: User sieht Updates nur wenn er arbeitet

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-07-23 06:48:16 +02:00
mhoennigandClaude Haiku 4.5 a9d2cf3054 frontend: Service Worker für Update-Detection hinzufügen
- Service Worker prüft periodisch auf neue Versionen (jede Minute)
- Bei verfügbarem Update: Benachrichtigung oben auf der Seite
- "Jetzt laden" Button triggert page reload
- Benachrichtigung verschwindet nach 30s oder bei Klick
- Service Worker als Blob registriert (Single-File-App kompatibel)
- localStorage-Daten bleiben erhalten beim Reload

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-07-23 06:37:30 +02:00
mhoennigandClaude Haiku 4.5 1c92c66c18 frontend: Fix duplicate variable declarations in ResizeObserver scope
- Rename variables to avoid conflicts with existing declarations
- Wrap ResizeObserver code in IIFE for local scope isolation
- Fixes build error: 'editorPanel' and 'legendBtn' already declared

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-07-23 06:25:08 +02:00
mhoennigandClaude Haiku 4.5 7e30a3217a frontend: Editor-Panel Copy & Agenda Buttons nur sichtbar wenn Panel offen genug ist
- ResizeObserver überwacht .editor-body Höhe
- Copy und Agenda Buttons werden versteckt wenn Body-Höhe < Head-Höhe
- Schwellwert: Buttons nur sichtbar wenn mindestens Titelzeilenhöhe Inhalt vorhanden ist

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-07-23 06:09:20 +02:00
mhoennigandClaude Haiku 4.5 a4ea1f760a frontend: Konsistente Höhe für Zoom-Controls in collapsed/expanded State
- Feste Höhe von 28px für .zoomctl (collapsed und expanded)
- Padding für .zoomToggle angepasst auf 4px 8px (gleich wie andere Buttons)
- SVG-Größe auf 16x16 optimiert

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-07-23 05:52:47 +02:00
mhoennigandClaude Haiku 4.5 640cb95c27 frontend: Zoom-Controls mit Auto-Collapse-Funktion
- Zoom-Controls collapse automatisch nach 3 Sekunden Inaktivität
- Toggle-Button mit Lupe+Plus-Symbol zum Expandieren der Controls
- Position weiter nach rechts-unten verschoben (6px)
- Event-Delegation für zuverlässige Click-Erfassung
- Lazy-Loading der DOM-Elemente für robuste Initialisierung

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-07-22 21:16:03 +02:00
mhoennig 154e3e92e2 docs: LEAN-PATHFINDING.md hinzugefügt (Feature-Roadmap)
Erstellt eine detaillierte Roadmap für Lean Pathfinding: Abhängigkeits-Tracking, Velocity-basierte Kostenschätzung, Kritischer Pfad, Optimierungs-Tools, KI-Features und Integrationen.
2026-07-22 11:59:18 +02:00
mhoennig a334c60fd1 frontend: Add privacy link with multilingual support
Introduced a "Privacy" link in the footer, localized for supported languages. Default to German for DE UI, and English for all others.
2026-07-22 11:20:38 +02:00
mhoennig a92a87f135 frontend: kleinere UI-Bereinigungen (Code & i18n)
- Redundante Rückgabewerte in `overlaySvg()` entfernt
- `aria-labelledby` des Editors ersetzt durch `aria-label` für klarere i18n-Texte
2026-07-22 11:07:42 +02:00
mhoennig 6f9854db52 frontend: Add ARIA enhancements for better accessibility
Attached the `aria-labelledby` attribute to the editor textarea and added an ID to the editor title. Corrected the relative path for the script reference.
2026-07-22 10:51:25 +02:00
mhoennig ae8c32786d frontend: Cleanup mobile viewport height logic for better compatibility
Removed redundant CSS fallbacks for mobile viewport height and replaced them with a streamlined `@supports` block to handle `dvh`-capable browsers. Clarified comments to reduce warnings and improve maintainability.
2026-07-22 10:44:56 +02:00
mhoennig 1cf60e2a75 frontend: Integrate self-hosted IBM Plex fonts, replace Google Fonts
IBM Plex Sans and Mono are now embedded locally (`woff2`) under `src/fonts`, licensed under SIL OFL 1.1. Removed external `<link>` to Google Fonts for enhanced privacy and compliance. Updated `style.css` with `@font-face` and unicode ranges for `latin` and `latin-ext` subsets. Added license details to documentation.
2026-07-22 10:33:09 +02:00
mhoennigandClaude Opus 4.8 0b6438c54d frontend: Footer-Credit "Vibe-Coded" -> "Built with Claude Code"
"Claude Code" bleibt als Produktname unveraendert. Der Credit ist hartkodiert
(kein data-i18n) und damit wie zuvor sprachunabhaengig englisch — keine
Uebersetzungen betroffen.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-22 09:47:40 +02:00
mhoennigandClaude Opus 4.8 350b0db7ee scripts/deploy-prod: Ziel aus Wurzel-.env statt scripts/deploy.env
DEPLOY_TARGET wird jetzt aus der .env im Repo-Wurzelordner gelesen (die von der
bestehenden .gitignore-Regel ohnehin ignoriert wird; Vite liest sie nicht, da
dessen Env unter frontend/ liegt). scripts/deploy.env(.example) entfaellt; neue
Vorlage .env.example im Wurzelordner. Argument hat weiterhin Vorrang, ~ bleibt
fuer die Remote-Seite erhalten (kein source).

.gitignore: eigene scripts/deploy.env-Zeile zurueckgenommen, Kommentar an der
.env-Regel ergaenzt. README (de/en) entsprechend aktualisiert.

Lokal verifiziert: Fallback liest aus Wurzel-.env, .env ignoriert, .env.example
getrackt.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-22 07:15:32 +02:00
mhoennigandClaude Opus 4.8 6b83af7d73 scripts/deploy-prod: Ziel aus git-ignorierter scripts/deploy.env (Fallback)
Ohne Ziel-Argument liest das Skript DEPLOY_TARGET aus scripts/deploy.env
(git-ignoriert; Vorlage scripts/deploy.env.example ist eingecheckt). Argument
hat weiterhin Vorrang.

Der Wert wird bewusst NICHT via `source` gelesen, weil bash bei `host:~/pfad`
die Tilde nach dem ':' lokal expandieren wuerde; stattdessen roh ausgelesen,
Whitespace/CR + umgebende Quotes gestrippt, das ~ bleibt fuer die Remote-Seite
erhalten. Lokal verifiziert: Fallback greift, ~ bleibt in unquoted/single-/
double-quoted erhalten (kein lokales $HOME), Quotes entfernt.

.gitignore: scripts/deploy.env ergaenzt (die vorhandene .env-Regel greift wegen
des abweichenden Dateinamens nicht). README (de/en) aktualisiert; Beispielpfad
auf die htdocs-ssl-Direktaufschaltung umgestellt.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-22 07:05:40 +02:00
mhoennigandClaude Opus 4.8 ecf767cfb5 scripts/deploy-prod: ACME-Challenge vor --delete schuetzen
rsync --filter='protect /.well-known/***' bewahrt am Ziel liegende
.well-known-Dateien (Let's-Encrypt-Challenge waehrend einer Erneuerung) vor dem
--delete, obwohl sie nicht in der Quelle liegen. Verhindert die Race Condition,
dass ein Deploy eine laufende Zertifikatserneuerung abraeumt. Bedient
Hostsharing die Challenge ausserhalb des Docroots, ist es ein No-op.

Lokal verifiziert: .well-known/acme-challenge/testtoken ueberlebt den Deploy,
eine sonstige Alt-Datei wird weiterhin per --delete entfernt.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-22 06:58:14 +02:00
mhoennigandClaude Opus 4.8 483bd89d25 scripts/deploy-prod: web-taugliche Rechte erzwingen (--chmod=D755,F644)
mktemp -d legt das Staging-Verzeichnis mit 0700 an; rsync -a uebertrug diesen
Modus auf das Ziel-Verzeichnis, sodass der Webserver es nicht betreten konnte
(Apache 403 "Server unable to read htaccess file, denying access to be safe" —
die .htaccess-Suche selbst ist normal, der Zugriff scheiterte an den Rechten).

Fix: rsync mit --chmod=D755,F644, unabhaengig von lokalen mktemp-/umask-Rechten.
Lokal verifiziert: Ziel wird 755, Dateien 644 (auch wenn das Ziel vorher 700 war).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-22 06:31:35 +02:00
mhoennigandClaude Opus 4.8 18363d46c7 readme: Prod-Deployment (werkbaum.javagil.de) neben dem Latest-Build verlinken
Im "Live ausprobieren"-Banner steht jetzt die stabile Prod-Instanz
https://werkbaum.javagil.de voran, der GitHub-Pages-Link bleibt als
"latest build 🚧" daneben. Der "gehosteter Editor"-Verweis im Fliesstext
zeigt ebenfalls auf die stabile Instanz. DE + EN.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-22 06:17:07 +02:00
mhoennigandClaude Opus 4.8 ec6d2124de scripts: deploy-prod.sh — Prod-Installation via rsync/SSH spiegeln
Neues Skript scripts/deploy-prod.sh baut das badge-freie Prod-Bundle
(npm run build:prod), stellt es lokal wie der Pages-Workflow zusammen
(LICENSE danebenlegen + ../LICENSE-Link geradeziehen, Footer-Version +
Commit-Link) und spiegelt es per rsync --delete ueber SSH in ein als Argument
uebergebenes Zielverzeichnis — am Ziel bleibt nichts Altes stehen.

- Pflichtargument: rsync-Ziel (z. B. user@host:~/doms/.../subs-ssl/werkbaum/).
- Ohne -y erst --dry-run-Vorschau + Rueckfrage (--delete ist destruktiv).
- Warnt bei unsauberem Arbeitsbaum (Commit-Link zeigt auf HEAD).
- node_modules-Guard: npm ci nur wenn noetig.

End-to-End gegen ein lokales Ziel verifiziert: --delete raeumt Alt-Datei und
Alt-Unterordner weg, deployte index.html enthaelt 0x 🚧/🔧 (nur die ungenutzte
CSS-Regel), LICENSE danebengelegt + Link auf "LICENSE", Version 1.0.x + Commit.

Doku: README (de/en) Abschnitt Prod-Installation, DECISIONS D16 (warum die
sed-Zusammenstellung bewusst in Workflow UND Skript liegt).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-22 06:13:27 +02:00
mhoennigandClaude Opus 4.8 6f184222a6 frontend: Build-Badge näher an den Titel (Emoji-Eigenluft kompensiert)
Der sichtbare Abstand kam fast ganz vom internen Weißraum des Emoji-Glyphs
(~11px), nicht vom margin. margin-left auf -.5em gesetzt -> Abstand
Titelende->Badge von 12px auf 5px. Laufzeit-gemessen im Dev-Server.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-22 06:00:42 +02:00
mhoennigandClaude Opus 4.8 0f27bab905 frontend/ci: Build-Hinweis in die App-Quelle, env-gesteuert; Prod-Build ohne
Der Latest-Build-Hinweis wandert vom Workflow-sed in die App (app.js,
mountBuildBadge), damit ihn auch der Dev-Server zeigt — ein Post-Build-sed
erreicht den Dev-Server nicht. Logik umgekehrt: Hinweis ist der Normalfall,
nur die produktive Installation schaltet ihn ab.

Drei Zustaende ueber Vite-Env VITE_BUILD_BADGE (Auswertung in app.js):
- Dev-Server (import.meta.env.DEV) -> 🔧 "Vorschau/lokaler Entwicklungsstand"
- Default `npm run build` (Env ungesetzt) -> 🚧 "latest build"; der Pages-
  Deploy nutzt den Default und traegt den Hinweis dadurch automatisch (die
  sed-Injektion entfaellt).
- `npm run build:prod` (Vite-Modus prod, .env.prod: VITE_BUILD_BADGE=none)
  -> KEIN Badge; esbuild eliminiert den Zweig als toten Code.

Verifiziert zur Laufzeit (Dev + `vite preview` auf beiden Builds): 🔧 im Dev,
🚧 im Default-Build, gar nichts im Prod-Build (Titel sauber "Werkbaum").
34 Vitest-Tests gruen, Workflow-YAML/Shell gueltig.

Doku: D16 fortgeschrieben (quellbasiert/env statt sed, Begruendung); README
(de/en) mit Prod-Build-Anleitung inkl. LICENSE-/Versions-Caveats; frontend/
CLAUDE.md; .claude/launch.json bekommt einen frontend-dist-Preview (vite
preview, Port 8138) zum Verifizieren gebauter Dateien.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-22 05:56:59 +02:00
mhoennigandClaude Opus 4.8 b7bf9182ea ci/pages: Latest-Build-Hinweis (Symbol + Tooltip) hinter dem Titel
Der Pages-Deploy ist der frischeste Entwicklungsstand und kann Fehler
enthalten; die stabile Instanz laeuft woanders. Damit nur diese
Veroeffentlichung markiert ist, injiziert der Workflow nach demselben Muster
wie Version/LICENSE — also NUR auf der Site-Kopie — hinter dem Titel (Anker
</h1>, im Bundle eindeutig) ein kleines Symbol mit zweisprachigem Tooltip
(<span class="build-badge">🚧</span>). Quelle bleibt unberuehrt: ein schlichter
`npm run build` erzeugt die Datei ohne Hinweis. Als Deploy-Metainfo bewusst
nicht im I18N-Objekt (D14). D16 fortgeschrieben.

Verifiziert gegen das echte dist-Bundle: Badge genau 1x, Version 1.0.x +
Commit-Link unveraendert, frontend/index.html traegt 0 Badges.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-22 05:43:39 +02:00
mhoennigandClaude Opus 4.8 6bfb4d1fad docs/roadmap: Nutzen-Attribut + gestaffelter Pfad als Ideen ergaenzt
Zwei zusammenhaengende Ideen unter "Kleinere Ideen" festgehalten, aufbauend
auf dem Aufwands-Rollup:
- Nutzen/Wert je Knoten als Gegenstueck zur Kosten-Groesse (Nutzen/Kosten-
  Priorisierung, WSJF-artig); Syntax bewusst offen gelassen (SPEC-first).
- Gestaffelter "guenstigster Pfad": D18 status-bewusst machen (fertig/prod =
  erledigt), nur den offenen Rest hervorheben und zur naechsten, per Nutzen
  gewaehlten Ausbaustufe weiterspringen.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-22 05:35:49 +02:00
mhoennigandClaude Opus 4.8 0a8b3659ea frontend: Fehlertolerantes Parsen — unbekannte Statuszeichen melden
TASKS Phase 2 (Phase 2 abgeschlossen). Der Parser erfasst die Statusbox jetzt
als beliebiges Einzelzeichen `\[([^\]])\]` und validiert gegen STATUS_BY_CODE.
Unbekannte Codes (z. B. [z]) werden nicht mehr still ins Label geschluckt,
sondern als {type:'unknownStatus', line, code} in parse().warnings gemeldet;
der Knoten bleibt neutral, Folgezeilen unberührt. Mehrzeichige Klammern ([xyz])
sind keine Statusbox und bleiben im Label (kein Fehlalarm).

render() in app.js führt Parser- und Renderer-Warnungen zusammen (nach Zeile
sortiert) und zeigt sie via formatWarning. Neuer i18n-Key unknownStatusWarn in
allen 9 Sprachen.

Verifiziert: mehrere unbekannte Codes -> zeilensortierte, lokalisierte
Warnungen (DE/EN), Knoten neutral, keine Konsolenfehler. tests/parser.test.js
+5 (34 Tests grün). SPEC §4 + CLAUDE ergänzt.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 21:16:34 +02:00
mhoennigandClaude Opus 4.8 8d3ac63574 frontend: Druck-Stylesheet — nur das Diagramm drucken
TASKS Phase 2. @media print in style.css blendet Kopfzeile, Editor-Panel,
Splitter, alle Bedienelemente des Diagramm-Kopfs, Warnungen und Footer aus; das
Diagramm füllt die Seite (App-Grid -> Block, Overflow sichtbar) und darf über
mehrere Seiten laufen. Statusfarben werden mitgedruckt (print-color-adjust:
exact), Knoten brechen nicht über den Seitenrand (break-inside: avoid), der
Günstigster-Pfad-Overlay (in #out) kommt mit.

Verifiziert per Druck-Emulation (Regeln testweise als Screen-Style angewendet):
Editor/Kopf/Splitter/Warnungen/Footer display:none, Diagramm sichtbar, 18
Knoten, Farben + Pfadlinie erhalten. SPEC §9 (Druck) ergänzt.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 21:12:07 +02:00
mhoennigandClaude Opus 4.8 15699c321c frontend: Barrierefreiheit — aria-Labels, Fokusreihenfolge, Live-Region
TASKS Phase 2. Jeder Diagramm-Knoten bekommt in render.js (nodeAria) einen
sprechenden, lokalisierten aria-label: Label + Status + Aufwand (inkl.
„(angenommen)" beim impliziten M) + Zuständige + Link. Die rein visuellen
Badges (Größe, Tags, ↗) sind aria-hidden, damit der Screenreader nicht „M",
„anna", „↗" kryptisch doppelt vorliest. Neue a11y*-i18n-Keys in allen 9
Sprachen.

Alle Knoten sind fokussierbar (tabindex=0 bzw. der Link) in Dokument-/Lese-
reihenfolge; sichtbarer :focus-visible-Rahmen (Petrol). #warn ist eine
Live-Region (role=status, aria-live=polite) — neue Warnungen werden angesagt.

Verifiziert: aria-label folgt dem Sprachwechsel (DE/EN), Badges aria-hidden,
keine visuelle Regression, keine Konsolenfehler. Renderer-Snapshots
aktualisiert (29 Tests grün). SPEC §9 (Barrierefreiheit) + CLAUDE ergänzt.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 21:08:41 +02:00
mhoennigandClaude Opus 4.8 32a02021ed frontend: Warnungs-Modell vereinheitlichen (strukturiert: Typ + Zeile)
TASKS Phase 1 (abgeschlossen). Warnungen sind jetzt maschinenlesbare Objekte
{type, line, ...data} statt vorformatierter Strings: der Renderer emittiert
{type:'mixedGate', line, label}; src/warnings.js `formatWarning(w, t)` macht
daraus an EINER Stelle den lokalisierten, HTML-escapten Anzeigetext. Damit sind
Typ und Zeilennummer sortier-/filter-/testbar, und Phase 2 (unbekannte
Statuszeichen -> {type:'unknownStatus', line, code}) dockt ohne Formatstreuung an.

tests/warnings.test.js + Mixed-Gate-Test im Renderer (29 Tests grün).
Ende-zu-Ende im Browser verifiziert (lokalisierte Warnung mit Zeile + Label).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 21:01:43 +02:00
mhoennigandClaude Opus 4.8 5905712aa5 frontend: Renderer + Modell headless auslagern (src/model.js, src/render.js)
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>
2026-07-21 20:58:47 +02:00
mhoennigandClaude Opus 4.8 7c8f216589 frontend: Parser-Unit-Tests (Vitest) gegen SPEC §10 + Randfälle
TASKS Phase 1. tests/parser.test.js mit dem kanonischen SPEC-§10-Beispiel als
Fixture und den geforderten Randfällen: URL mit @, %% am Zeilenanfang/-ende,
leere Labels, mehrere Wurzeln, Tab = 2 Leerzeichen, ungleichmäßige Einrückung,
gemischte Gates, x/X + case-insensitive Größe, Vokabular-Exporte. 18 Tests grün.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 20:51:30 +02:00
mhoennigandClaude Opus 4.8 80d05a33a2 frontend: Parser nach src/parser.js auslagern (headless)
TASKS Phase 1. `parse`, `STATUS_BY_CODE` und `SIZE_RANK` wandern unverändert
in ein eigenes, DOM-freies Modul (SPEC §1–§8 normativ); app.js importiert sie.
Vorbereitung für die Parser-Unit-Tests (nächste Checkbox) und den SVG-/Mermaid-
Renderer, die den Parser headless nutzen.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 20:49:45 +02:00
mhoennigandClaude Opus 4.8 78d1000f61 frontend: Projektgerüst mit Vite — Single-HTML in ES-Module + Bündelung
Erster Schritt der Modularisierung (ROADMAP „tragfähige Codebasis",
TASKS Phase 1). Der bisher einzelne index.html-Prototyp wird zur Vite-App:

- CSS -> src/style.css, gesamtes JS -> src/app.js (noch als ein Modul;
  Parser/Renderer werden in den folgenden Checkboxen herausgelöst).
- index.html ist der Vite-Entry (<script type="module" src="/src/app.js">).
- npm run build (vite + vite-plugin-singlefile) inlint JS+CSS+Favicon (als
  data:-URI) in EINE self-contained dist/index.html -> bleibt file://-tauglich.
- Vitest als Testrunner eingerichtet (tests/, passWithNoTests bis Schritt 2/3).
- Pages-Workflow: Node + npm ci + npm test + npm run build, deployt dist/;
  Favicon-sed entfällt (inline), nur ../LICENSE + Footer-Version bleiben.
- .claude/launch.json auf Vite-Dev-Server (Port 8137) umgestellt.

Entscheidung als D19 dokumentiert (weicht D11 „kein Build-Zwang" bewusst auf,
hält aber D16 file://-Versprechen über die gebündelte Datei). README (de/en)
und frontend/CLAUDE.md um Dev-/Build-/Test-Workflow ergänzt.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 20:47:23 +02:00
mhoennigandClaude Opus 4.8 ad57707dbc frontend: Mobiler Splitter stufenlos + Titelzeilen-Tap maximiert
Auf dem Smartphone hatte der Splitter zwei Fehler: nach dem ersten Ziehen
rastete er in eine feste Aufteilung und ließ sich nicht mehr bewegen (die
Titelzeile im Snap-Rand fing jeden weiteren Zug ab), und das Tippen auf eine
Titelzeile klappte das Panel nicht mehr aus (der Handler verlangte den
collapsed-Zustand, den ein freier Zug aufhob).

Mobil jetzt kontinuierlich statt diskret:
- Grid-Zeilen-Minima --pmin-d/--pmin-e = gemessene Kopfhöhen (syncPanelMins),
  dadurch bleiben beide Titelzeilen immer stehen (kein Snap/Collapse).
- Gutter-Drag ruft setMobileDrow() (klemmt --drow frei) — jederzeit beweglich.
- Tipp auf eine Titelzeile maximiert dieses Panel (das andere = Titelzeile).
- applyLayout ruft auf Mobil kein applySplit (behält --drow bei Moduswechsel);
  seg-Klick stoppt Propagation, damit er die Titelzeile nicht mit-maximiert.
- Default: Diagramm maximiert. Desktop behält das diskrete Modell + Buttons.

SPEC §9, DECISIONS D17 und frontend/CLAUDE.md nachgeführt.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 20:24:05 +02:00
mhoennigandClaude Opus 4.8 779ac10cdf frontend: Mobile Download-Buttons als Overlay-Menü (kein Zeilenumbruch)
Auf kleinen Screens brach die Diagramm-Titelzeile um, weil die Download-Buttons
mit „SVG“/„PNG“-Textlabels zu breit sind. Sie klappen jetzt auf Mobil hinter
einen einzelnen Download-Icon zusammen (dlGroup/dlTrigger/dlmenu); ein Tipp
zeigt die Formatwahl als Dropdown-Overlay unter der Kopfzeile, Auswahl oder
Tipp daneben schließt. „Kopieren“ bleibt sichtbar. Desktop unverändert (SVG/PNG
inline). Neuer i18n-Key downloadMenu (9 Sprachen), SPEC §9 nachgeführt.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 19:56:53 +02:00
mhoennigandClaude Opus 4.8 ae3b73bb57 frontend: Vertikal — any-of-Alternative mit all-of-Kindern an Abzweig anbinden
Im vertikalen Modus zentriert li.has-and den Alternativknoten (z. B. „Web+Nativ")
vertikal mittig zu seinem Rechts-Fächer; der einkommende any-of-Abzweig saß aber
weiter bei 23 px und traf den Knoten nicht mehr — er war von seiner Linie von
oben abgetrennt. Fix nur für .tree.vertical ul.or>li.has-and: symmetrisches
Padding hält die Knotenmitte bei 50 %, Abzweig (::before) und Rail-Endkante
(:last-child::after) auf 50 %. Horizontal/kompakt unberührt. D18 nachgeführt.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 19:43:17 +02:00
mhoennigandClaude Opus 4.8 01c0ddd848 frontend: Mobile-Höhe zusätzlich per visualViewport (Brave-Overlay-Leiste)
100dvh versagt bei Browsern, die ihre untere Leiste als Overlay zeichnen
(z. B. Brave): dvh meldet weiter die volle Höhe, Footer/Editor-Titelzeile
verschwinden dahinter. JS setzt nun --app-height aus window.visualViewport
.height (wirklich sichtbare Fläche), aktualisiert bei resize/orientationchange.
CSS-Kaskade bleibt Fallback: vh -> dvh -> var(--app-height).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 19:33:46 +02:00