Commit Graph
195 Commits
Author SHA1 Message Date
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
mhoennigandClaude Opus 4.8 e97d168ef6 frontend: Mobile-Höhe per 100dvh statt 100vh (Panel hinter Browserleiste)
Auf Mobilgeräten ist 100vh die große Viewport-Höhe inkl. der Fläche hinter der
unteren Browserleiste — Footer und die eingeklappte Editor-Titelzeile rutschen
dahinter und sind nicht antippbar. 100dvh (dynamische Viewport-Höhe) folgt der
sichtbaren Fläche; 100vh bleibt als Fallback für alte Browser.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 19:26:14 +02:00
mhoennigandClaude Opus 4.8 fe818b6c2c frontend: Mobile Sprachwahl als Overlay, eingeklappt nur aktive Sprache
- eingeklappt zeigt die Leiste nur noch die aktive Sprache (kein EN-Default,
  kein „…“); ein Tipp klappt die volle Liste als Overlay über die Kopfzeile auf
  (position:absolute, z-index) statt die Zeile zu verbreitern
- nach Auswahl klappt sie wieder auf die gewählte Sprache ein; Tipp daneben
  schließt ebenfalls; applyMobile() startet eingeklappt
- nur body.mobile betroffen; Desktop (DE EN ES FR + „…“, inline) unverändert
- SPEC §9 (Kleiner Bildschirm) und DECISIONS D17 nachgeführt

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 19:09:01 +02:00
mhoennigandClaude Opus 4.8 63cfd82f07 docs: Link auf das Live-Deployment (GitHub Pages) im README
- prominent oben und in Nutzung/Usage: https://mhoennig.github.io/werkbaum/
- in EN (README.md) und DE (README.de.md)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 18:56:27 +02:00
mhoennigandClaude Opus 4.8 8e8c44bf9d frontend: Günstigster-Pfad-Linie mit Stationspunkten + Nesting-Fix
- gestrichelte, geschwungene Petrol-Linie (Katmull-Rom) durch die Endknoten
  des Pfads; kräftig hinter den Knoten, abgetönte Kopie davor
- blasse, große Stationspunkte nur an echten Blättern (U-Bahn-Plan) — macht
  durchquerte Fremd-/Zwischenknoten eindeutig als "nicht Endknoten" erkennbar
- Linie + Punkte auch im SVG/PNG-Export (hinten/vorne-Schichtung)
- Overlays liegen in #out, erben dessen CSS-zoom (Punkte /zoom umgerechnet);
  Neuzeichnung nach render() und applyLayout()
- Beispiel erweitert: Frontend (M) -> PWA | Web+Nativ (Web[/]+Android+iOS)
- Layout-Fix: all-of unter einer any-of-Alternative wird nur horizontal schmal
  transponiert gestapelt (ul.or>li.has-and>ul.and), sonst schob der breite
  Fächer Alternativknoten und Elternbaum weit nach rechts
- Geist-Knoten-Label "Untergliederung fehlt" -> "…" (alle 9 Sprachen), die
  Erklärung bleibt im Tooltip; der lange Text verbreiterte gestapelte Zellen
- SPEC §5/§9 und DECISIONS D18 nachgeführt, Notiz in frontend/CLAUDE.md

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 18:52:45 +02:00
mhoennigandClaude Opus 4.8 c8f8160eca frontend: Günstigster-Pfad-Hervorhebung per Inversion + implizites M
- Umschalter im Diagramm-Kopf (Default an, Zustand in werkbaum-ui persistiert)
- nötige Knoten: all-of ⇒ alle Kinder, any-of ⇒ günstigste Alternative
  (kleinste rekursive Kosten; Gleichstand ⇒ erste); verworfene zählen nie mit
- Darstellung per Inversion: nicht benötigte Knoten treten blass/entsättigt
  zurück (kein Zusatzrahmen an den ohnehin dichten Knoten-Ecken)
- fehlende T-Shirt-Größe wird für die Kostenschätzung als M gewertet;
  invertiertes M-Badge (weiß mit Petrol-Rand) macht die Annahme sichtbar
- neue Tooltips i18n (DE-Quelle + 8 Übersetzungen, 50 Keys × 9)
- SPEC §9 (Günstigster Pfad) und DECISIONS D18 mitgeführt

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 16:47:29 +02:00
mhoennigandClaude Opus 4.8 9438935c41 frontend/ci: Getrennte Footer-Links — Name -> Repo, Version -> Commit
Im Footer sind "Werkbaum" und die Versionsnummer jetzt zwei Links:
- "Werkbaum" -> Repo-Startseite (wie bisher).
- Versionsnummer (<a class="ver">) -> exakt der deployte Commit.

CI setzt beim Build sowohl den Versionstext als auch den href der
ver-Anchor: COMMIT_URL=.../commit/$(git rev-parse HEAD); zwei gezielte
seds (href + Text). Lokal zeigt die Version "1.0" und verlinkt die
Commits-Uebersicht als Fallback.

Verifiziert: YAML gueltig; Trockenlauf ersetzt href -> commit/<sha> und
Text -> 1.0.7, "Werkbaum"-Link unveraendert. Preview lokal: Name -> Repo,
Version -> /commits/main.

Doku: README (EN+DE) Deployment + DECISIONS D16 ergaenzt.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 14:47:15 +02:00
mhoennigandClaude Opus 4.8 81bac87d80 frontend: Abstand ueber dem Footer halbiert (28px -> 14px)
Verifiziert: .site-footer margin-top jetzt 14px. Gilt auf allen
Bildschirmen. Keine SPEC-Aenderung.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 14:44:29 +02:00
mhoennigandClaude Opus 4.8 c16866e1f8 frontend: Untertitel um "Requirements" ergaenzt, Kurzfassung auf Mobil
Der Untertitel nennt jetzt auch Requirements(-Baum) — analog zur
Meta-Description. Fuer kleine Bildschirme gibt es eine garantiert
einzeilige Kurzfassung (neuer i18n-Key subtitleShort, 9 Sprachen): zwei
Spans (.sub-full/.sub-short), per body.mobile umgeschaltet; zusaetzlich
white-space:nowrap + ellipsis als Sicherung gegen Umbruch.

Verifiziert (headless): Desktop zeigt die Langfassung mit Requirements,
375px zeigt die Kurzfassung einzeilig ohne Overflow in allen geprueften
Sprachen (de/en/es/fr/ru/ja); i18n konsistent (48 Keys x 9). Normalgroesse
unveraendert (Kurzfassung nur mobil).

SPEC §9 (Kleiner Bildschirm) ergaenzt.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 14:43:56 +02:00
mhoennigandClaude Opus 4.8 cb440af362 frontend: "verworfene"-Toggle als kompakter Icon-Button
Der breite Schalter mit Text wird ein schmaler Druck-Button (29px statt
Schalter+Label): Symbol = gestrichelte Box mit Durchstreichung (spiegelt
den verworfenen Knoten), aria-pressed als Ein/Aus-Zustand (gedrueckt =
petrol gefuellt), Erklaerung per Tooltip (discardedTooltip). Ersetzt die
Checkbox #showc; Zustand jetzt ueber aria-pressed (discardedShown/
setDiscarded), unveraendert in Filter, Speichern und Wiederherstellen.

Verifiziert (headless): Button toggelt aria-pressed + Petrol-Fuellung,
blendet verworfene Knoten ein/aus, Zustand ueberlebt Reload. Gilt auf
allen Bildschirmen (spart auch mobil Platz).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 14:40:29 +02:00
mhoennigandClaude Opus 4.8 924ca5aaee frontend: Hilfe-Icon statt Menue-Icon fuer den Legenden-Umschalter
Der #legendBtn (nur auf kleinem Bildschirm sichtbar) trug ein Menue-/
Listen-Icon; die Legende ist aber eine Hilfe-/Referenzseite. Jetzt ein
Hilfe-Icon (Kreis mit Fragezeichen). Nur der Button-Inhalt geaendert,
Normalgroesse nicht betroffen (Button dort verborgen).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 14:28:35 +02:00
mhoennigandClaude Opus 4.8 a04b3ef9fa frontend: Modus-Waehler auf kleinem Bildschirm als Reihum-Umschalter
Auf body.mobile zeigt der horizontal/kompakt/vertikal-Waehler nur noch das
aktive Icon (label:has(input:checked)); Tippen schaltet reihum zum naechsten
Modus (horizontal -> kompakt -> vertikal -> …). Spart zwei Drittel Breite.

Verifiziert (headless): mobil ein Icon sichtbar (~40px), 3x Tippen zyklt
horizontal/kompakt/vertikal/horizontal; Desktop unveraendert (3 Icons,
~118px, Direktauswahl ohne Zyklus), keine Konsolenfehler.

SPEC §9 (Kleiner Bildschirm) ergaenzt. Normalgroesse nicht betroffen.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 14:27:15 +02:00
mhoennigandClaude Opus 4.8 ffe70d2d40 frontend: Splitter auf kleinem Bildschirm wieder verfuegbar
Der Gutter wurde auf Mobil faelschlich ganz ausgeblendet. Jetzt bleibt er
sichtbar und ziehbar (die 820-px-Regel liefert das gestapelte Layout inkl.
Gutter); nur die Min/Normal/Max-Buttons bleiben verborgen. Default weiterhin
ein Bereich gross, Umschalten per Titelzeilen-Tap unveraendert, zusaetzlich
Teilen per Ziehen moeglich.

Verifiziert (headless, 375px): Gutter sichtbar, Ziehen erzeugt Custom-Split
(--drow gesetzt, beide Bereiche sichtbar); Default-Einzelansicht und
winbtns-verborgen unveraendert. Normalgroesse nicht betroffen.

SPEC §9 und DECISIONS D17 an "Splitter bleibt" angepasst.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 14:25:19 +02:00
mhoennigandClaude Opus 4.8 9c1f6df225 frontend: Beispiel-Diagramm auf Englisch, Hostsharing-Cloud-Link
Der Default-Beispieltext (INITIAL) ist jetzt englisch (passend zur
englischen Haupt-README). Statt "Cloud" nun "Cooperative Community Cloud"
mit Link https://hostsharing.net (nackte URL -> klickbarer Knoten mit ↗).
README-Screenshot neu erzeugt (englische UI + Inhalt).

SPEC §10 (kanonisches Fixture) bleibt bewusst deutsch: normatives
Beispiel der deutschsprachigen Doku, unabhaengig vom Live-Demo-Text.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 14:23:30 +02:00
mhoennigandClaude Opus 4.8 506bdccd2e frontend: Ein-Bereich-Ansicht + kompakte Legende/Sprachwahl auf Mobil
Auf kleinem Bildschirm (body.mobile per matchMedia, <=640px):
- Immer nur ein Bereich gross (Diagramm ODER Editor); der andere schrumpft
  auf seine Titelzeile und dient als Umschalter (Antippen holt ihn nach
  vorn). Splitter und Min/Normal/Max-Buttons entfallen.
- Legende von der Bereichs-Umschaltung entkoppelt: eigener Umschalter
  (#legendBtn) im Editor-Kopf statt der dauerhaften "AGENDA"-Zeile, damit
  sie zugeklappt keinen Platz kostet (neuer i18n-Key legendTooltip, 9 Spr.).
- Sprachwahl schlank: nur EN + aktive Sprache + "…" (klappt alle auf); die
  aktive Sprache wird auch als "extra" eingeblendet, Auto-Aufklappen entfaellt.
- Default Vollbild auf Mobil (nur ohne gespeicherte Nutzerwahl).

Verifiziert (headless, 375px): body.mobile gesetzt, Diagramm-Default +
Editor als Titelzeile, Umschalten per Tap, Legenden-Toggle, Sprachleiste
DE+EN+…/Aufklappen zeigt alle 9/aktives Extra bleibt sichtbar, Vollbild an,
keine Konsolenfehler; Desktop unveraendert (beide Panels, 4 Sprachen,
Legendenbutton verborgen). i18n konsistent (47 Keys x 9).

SPEC §9 (Kleiner Bildschirm) + DECISIONS D17 + frontend/CLAUDE.md ergaenzt.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 14:14:31 +02:00
mhoennigandClaude Opus 4.8 ac81f0a209 frontend: Mehr Abstand zwischen gestapelten Knoten (vertikal/kompakt)
In den transponierten Modi ueberlappte das Groessen-Badge (oben rechts)
eines Knotens oft mit den Namens-Tags (unten rechts) des Knotens darueber
(gemessen: nur 10 px Luecke, 6 px Ueberlappung). Jetzt +20 px Abstand
nach unten fuer gestapelte Blaetter/any-of/kompakt (Luecke 25 px, ~9 px
Freiraum); der obere 23-px-Abzweig bleibt unveraendert. Vertikal
zentrierte all-of-Zwischenknoten bekommen den Abstand symmetrisch (16 px),
damit ihr 50%-Abzweig auf der Knotenmitte bleibt.

Verifiziert (headless): keine Ueberlappung mehr; alle Abzweige treffen die
Knotenmitte (|delta| <= 1 px) in vertikal und kompakt. Horizontal
unveraendert. SPEC §9 (Geometrie-Invarianten) ergaenzt.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 14:04:30 +02:00
mhoennigandClaude Opus 4.8 0519534106 frontend: Footer-Credit kuerzen, Modellnamen als Tooltip
"Vibe-Coded with Claude Code Fable 5 and Opus 4.8" wird zu
"Vibe-Coded with Claude Code"; "Fable 5 and Opus 4.8" steckt als
title-Tooltip im span.vibe (gepunktete Unterstreichung, cursor:help).
Spart Platz auf allen Bildschirmen. Keine SPEC-Aenderung.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 14:01:35 +02:00
mhoennigandClaude Opus 4.8 c380a8ac63 ci: Version aus VERSION-Datei + Commit-Anzahl statt Run-Nummer
Micro-Version jetzt commit-basiert statt aus github.run_number:
- Major.Minor in neuer Datei VERSION (per Bump-Commit gepflegt).
- Micro = Commits seit dem letzten VERSION-Bump
  (git rev-list --count <VERSION-Commit>..HEAD) -> beginnt nach einem
  Bump wieder bei 0 (SemVer-artig, z. B. 1.0.0, 1.0.1, dann 1.1.0).
- checkout mit fetch-depth: 0 (flacher Klon zaehlte sonst nur 1 Commit).
- sed ersetzt jetzt ">Werkbaum <ziffern></a>" (regex), damit auch nach
  einem Major/Minor-Bump im Quelltext getroffen wird; viewport-/xml-1.0
  bleiben unberuehrt.

Vorteil ggue. Run-Nummer: vollstaendig aus dem Repo reproduzierbar,
zaehlt keine fehlgeschlagenen/manuellen Laeufe, kein Rueckschreiben.

Doku: README (EN+DE) Deployment-Abschnitt und DECISIONS D16 aktualisiert.
Keine SPEC-Aenderung (Notation unberuehrt).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 13:51:10 +02:00
mhoennigandClaude Opus 4.8 aa16665853 ci: Micro-Version im Footer aus der Run-Nummer setzen
Beim Site-Build ersetzt der Workflow ">Werkbaum 1.0</a>" durch
">Werkbaum 1.0.${{ github.run_number }}</a>" (per sed, nur auf der
Site-Kopie). Die Micro-Version steigt so bei jedem Deployment monoton
um 1 — ohne Commit/Tag zurueck ins Repo und ohne selbstausloesenden
Deploy-Zyklus. run_number via env BUILD_VERSION injiziert. "1.0" bleibt
die manuell gepflegte Basis und die Version beim lokalen Oeffnen; die
viewport-/xml-"1.0" bleiben unberuehrt (Anker >...</a> als Ziel).

Doku: README (EN+DE) Deployment-Abschnitt und DECISIONS D16 ergaenzt.
Keine SPEC-Aenderung (Notation unberuehrt).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 13:43:45 +02:00
mhoennigandClaude Opus 4.8 7c39da7b44 frontend: GUI-Zustand und Editortext im Browser speichern
Ohne Backend bleiben Einstellungen und Text ueber ein Neuladen erhalten
(localStorage). Gespeichert: Editortext (werkbaum-src) und GUI-Zustand
(werkbaum-ui: Modus, verworfene, Split-Zustand inkl. freier Drag-Groesse
--col/--drow, Zoom, Vollbild); Sprache bleibt in werkbaum-lang.

saveUI()/saveSrc() haengen an allen Zustandsaenderungen (Layout, Toggle,
Fenster-Buttons, Splitter-Drag, Zoom, Vollbild, Texteingabe);
restoreState() stellt beim Laden alles wieder her und unterdrueckt
waehrenddessen ueber restoring=true das Zurueckschreiben. Fehlender Text
faellt auf das Beispiel (INITIAL) zurueck, ein leerer bleibt leer.

Verifiziert (headless): Text, Modus, verworfene, Zoom, Vollbild,
Custom-Split (--col) und Minimier-Zustand ueberstehen ein Reload;
keine Konsolenfehler. Keine SPEC-Aenderung (Notation unberuehrt);
localStorage-Schluessel in frontend/CLAUDE.md dokumentiert.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 13:42:27 +02:00
mhoennigandClaude Opus 4.8 4031dba4bd frontend: Impressum-Link im Footer (mehrsprachig)
Link auf https://michael.hoennig.de/imprint.html am Ende des Footers.
Neuer i18n-Key "imprint": deutsch nur "Impressum", in allen anderen
Sprachen die uebersetzte Bezeichnung mit "(Impressum)" in Klammern
dahinter (z. B. EN "Imprint (Impressum)", FR "Mentions legales
(Impressum)"). Keine SPEC-Aenderung (Notation unberuehrt).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 13:38:20 +02:00
mhoennigandClaude Opus 4.8 0219bb1b5a docs: Englisch als Haupt-README, Deutsch nach README.de.md, Screenshot
Auf Wunsch ist die englische Fassung jetzt die Haupt-README.md; die
deutsche Fassung liegt als README.de.md. Sprachlinks oben in beiden
Dateien angepasst. Der Hinweis in README.md stellt klar, dass die
ausfuehrliche Doku unter docs/ weiterhin auf Deutsch gepflegt wird.

Screenshot der laufenden App (docs/screenshot.png, headless Chrome gegen
den lokalen Dev-Server) im Abschnitt Usage/Nutzung eingebunden.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 13:30:42 +02:00
mhoennigandClaude Opus 4.8 7911cb10c5 docs: Englische README-Uebersetzung (README.en.md)
Deutsch bleibt Quellsprache (CLAUDE: "Doku auf Deutsch"), daher die
Uebersetzung als separate README.en.md statt README.md zu ersetzen.
Wechselseitige Sprachlinks oben in beiden Dateien; Hinweis in der
englischen Fassung, dass sie eine Convenience-Uebersetzung ist und der
deutschen Vorlage hinterherhaengen kann.

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