diff --git a/AGENTS.md b/AGENTS.md index 79ce5ae..c1d2493 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -1,6 +1,6 @@ # AGENTS.md — Project state, review findings, open items, and working rules -**Last updated: 2026-08-12** (Setup-menu polish batch). This file is the entry point for every new agent +**Last updated: 2026-08-13** (design/CI review added, see `DESIGN_REVIEW_2026-08-13.md`). This file is the entry point for every new agent session: what this repo is, what is finished, what is missing, and how to work here. Detail lives in the linked documents — this file points, it does not duplicate. @@ -128,6 +128,21 @@ capacitor/iframe/browser (`umgebung.ts`), types + entity table (`types.ts`), fac ## Review findings (2026-08-11) +### Design/CI review of `main` (2026-08-13) — see `DESIGN_REVIEW_2026-08-13.md` + +Code review of all UI layers plus headless-browser screenshots of the panel (mock `hass`), +checked against the repo's own Audi-CI rules. Headlines: the iOS overlay +(`audi-dashboard-ios.css`) overrides the documented palette/radii, adds shadows/blur and turns +red into a fill color **without any recorded decision** (visible e.g. as a red-filled "Abbrechen" +next to a black "Speichern" in the setup popup); `design-system/` still carries pre-audit state +(old low-contrast `--fg3 #657081`, no focus styles at all, 13.5px inputs, 34px icon buttons); +the `design/` export's RS-6 error extends into the technical sample data (73 l tank, 285/30 R22, +FIN series 4G). Four browser-verified rendering defects: switches stretched by +`.feld label{flex:1 1 auto}` (state display becomes ambiguous), double "offen" in the trip list, +empty oil-change tile when the service book is empty, and fragmented Leaflet rendering in all +three maps (verify on a real device). Positives: the 300/400 font-weight rule and de-DE +formatting hold everywhere; `design-system/` is verifiably brand-free. + ### HA panel — known gaps (most also in SPECIFICATION.md §7) - **GPS is dead schema for trip records specifically:** `start_lat/lon`, addresses, `route`, diff --git a/DESIGN_REVIEW_2026-08-13.md b/DESIGN_REVIEW_2026-08-13.md new file mode 100644 index 0000000..43c0364 --- /dev/null +++ b/DESIGN_REVIEW_2026-08-13.md @@ -0,0 +1,258 @@ +# Design-Review des `main`-Branch — Abgleich gegen die Audi-CI-Vorgaben des Repos + +**Datum:** 2026-08-13 · **Gegenstand:** `origin/main` @ `2a3c4f2` („Zugangswege zum privaten +Repository dokumentieren und trennen") · **Nur Befunde, keine Änderungen.** + +> Hinweis vorab: Das **lokale** `main` hängt 28 Commits hinter `origin/main`. Dieses Review +> basiert auf `origin/main` — der Stand mit FMM003-Umstellung, Setup-Menü, Standort-Feature und +> der scharf geschalteten iOS-/Großbildschirm-Auflage. + +## Methode + +1. **Vorgaben-Checkliste** aus den Repo-Dokumenten destilliert (`bauauftrag.md`, + `SPECIFICATION.md`, `AUDIT_2026-08-10.md`, `DESIGN_BRIEF_DATAMETRIC360.md`, `AGENTS.md`, + `design-system/`-Tokens) — Farben, Typografie, Layout, Marke, Formate, Interaktion, A11y. +2. **Code-Review** aller UI-Schichten auf `main` gegen diese Checkliste: + `homeassistant/www/` (Panel-JS + beide CSS), `design/`-Export, `design-system/`, + `companion-app/`. +3. **Browser-Test mit Screenshots:** Das Panel wurde in einem Harness mit Mock-`hass`-Objekt + und realistischen Beispieldaten (Beispielprofil, 5 Fahrten, 3 Tankvorgänge, Fahrzeugstatus, + Setup-Katalog) headless in Chromium gerendert — iPhone-Viewport (390×844, hell + dunkel) und + Desktop (1440×900, Großbildlayout ≥860 px), alle 5 Tabs plus 10 Unterseiten, Einstellungen, + Einrichten-Formular und Setup-Popup. ~40 Screenshots, Pfade im Annex. + +**Grenzen:** Kein echtes Home Assistant, kein echtes iOS-Gerät. Native Steuerelemente +(``) und Leaflet-Verhalten können im Harness abweichen — solche Befunde sind +unten ausdrücklich als „am Gerät verifizieren" markiert. + +--- + +## Kernaussagen (TL;DR) + +1. **Die iOS-Auflage (`audi-dashboard-ios.css`) ist der größte offene CI-Konflikt.** Sie ersetzt + die dokumentierte Audi-Palette durch iOS-Systemfarben, führt Schatten und Blur ein, ändert den + Kachelradius auf 16 px und macht Rot zur Flächenfüllung — alles Verstöße gegen in mehreren + Dokumenten wiederholte, bindende Regeln, und **nirgends als Entscheidung dokumentiert** + (`design/README.md` sagt selbst, das sei „noch zu klären", faktisch ist es seit 2026-08-11 + produktiv). +2. **Die Rot-Semantik ist dadurch invertiert.** `ios.css` füllt jeden `.aktion`-Knopf rot. Sichtbare + Folge (Screenshots): im Setup-Popup ist **„Abbrechen" rot gefüllt und „Speichern" schwarz**; + „Einrichten", „Setup — Sensoren zuordnen", „In den Kalender übernehmen" und die + Notruf-/Telefonnummern sind großflächig rote Balken. Der Audit-Befund A7 („Rot bleibt Akzent + und Destruktiv") ist damit rückgebaut. +3. **`design-system/` (Basis für DataMetric360) trägt den Vor-Audit-Stand:** kontrastschwaches + `--fg3 #657081` (WCAG-AA-Fail, im Panel längst korrigiert), Versalien-Sperrschrift in 6+ + Komponenten, **kein einziger Fokus-Stil in der ganzen Bibliothek**, Formularfelder 13,5 px + (iOS-Zoom-Falle), IconButton 34 px. Wer die App darauf aufbaut, erbt behobene Fehler zurück. +4. **Vier echte Darstellungs-/Zustandsfehler im Panel, im Browser nachgewiesen** (unten F1–F4), + darunter gestreckte Schalter mit widersprüchlicher Zustandsanzeige (Ursache identifiziert: + `.feld label { flex: 1 1 auto }` trifft auch `label.switch`). +5. **Positiv:** Schriftgewichts-Regel (nur 300/400) wird zu 100 % gehalten, de-DE-Formate sind + praktisch lückenlos, `design-system/` ist nachweislich **marken-frei** (Lizenzregel bestanden), + die Marke steht auf jedem Layout genau einmal, und die neuen main-Features sind bei + aria-Attributen überdurchschnittlich sorgfältig. + +--- + +## A. Grundsatzkonflikt: iOS-Auflage vs. Audi-CI (hoch) + +Verbindlich laut `bauauftrag.md` §Design, `SPECIFICATION.md` §Design und Audit: Palette als +Rollen (Nacht `#161b23`/`#1f2733`, Tag `#FFFFFF`/`#f2f2f2`), Signalfarben `#15da15/#ffaa00/#fd2c4e`, +Kachelradius 20 px, **keine Schatten, keine Verläufe** (einzige Ausnahme Fahrbahn/`.szene`), +Rot `#F50537` nur als Akzent. Die seit 2026-08-11 aktive `audi-dashboard-ios.css` bricht das +systematisch: + +| Regel | ios.css-Ist | Fundstelle | +|---|---|---| +| Nacht-Canvas `#161b23` | `#0C1014` | `audi-dashboard-ios.css:21-41` | +| Tag: Canvas weiß, Kachel `#f2f2f2` | **invertiert**: Canvas `#F2F2F7`, Kachel `#FFFFFF` | ebd. | +| Audi-Signalfarben | iOS-Systemfarben `#30D158/#FFD60A/#FF453A` bzw. `#34C759/#FF9F0A/#FF3B30` | ebd. | +| Kachelradius 20 px (`--r-tile`) | `--r-tile: 16px` | `audi-dashboard-ios.css:16` | +| Keine Schatten/Blur | `box-shadow` auf Segmented Control, Switch-Knopf, Popups; `backdrop-filter: blur()` auf Tabbar/Popups | `:116, :135, :156-166` | +| Rot nie als Fläche | `.aktion{background:var(--ios-tint)}`, roter Schalter, `.tab.on` rot hinterlegt | `:118-136, :221` | +| Safe-Area-Insets (Audit B1) | ersetzt durch Festwerte `padding:56px` / `26px` | `:65, :163` | +| Trefferfläche ≥44 px (Audit B6) | `.back` auf **34×34 px** gedrückt | `:69` | + +Dazu kommt: `.setup-popup` und `.standortmenu` schreiben `border-radius: 20px` als **Literal** +fest (`audi-dashboard.css:895, :744`) — mit dem ios-Token 16 px sind Popups sichtbar runder als +alle Kacheln daneben. + +**Empfehlungscharakter (keine Umsetzung hier):** Entweder die iOS-Optik als neue verbindliche +Linie dokumentieren (und `bauauftrag.md`-/`SPECIFICATION.md`-Regeln als ÜBERHOLT markieren, wie +es die Projektkonvention für Entscheidungen vorsieht) — oder die Auflage auf das zurückschneiden, +was mit der CI vereinbar ist. Der jetzige Zustand ist ein unbeschlossener Bruch. + +## B. Rot-Semantik invertiert (hoch, visuell belegt) + +- **Setup-Popup: „Abbrechen" rot gefüllt, „Speichern" schwarz** (Screenshot + `iphone-hell-15e-setup-popup.png`). Nach der eigenen Systematik (`.aktion` = + Umriss-Sekundäraktion, `.primaer` = gefüllt, Rot = destruktiv) liegt die Signalfarbe auf der + falschen Aktion. +- Gleiche Ursache (`ios.css .aktion`-Füllung) auf: „Einrichten" (Einstellungen), „Setup — + Sensoren zuordnen" + schwarzes „Fertig" daneben (Einrichten-Formular), „In den Kalender + übernehmen" (Service, Reifen), beide Notrufnummern (Versicherung — drei rote Großflächen + untereinander auf einer Seite, `iphone-hell-07-versicherung.png`). +- Ebenfalls rot gefüllt: alle Schalter im Ein-Zustand (A7-Rückbau), aktive Navigation + (`.tab.on` rosa hinterlegt, Desktop-Sidebar). +- Kleinere Fälle: `--red` als Balkensegment für die neutrale Kategorie „Arbeitsweg" + (`audi-dashboard-app.js:2423`) und im Versicherungs-Beitragsbalken (`:1628`). + +## C. `design-system/` — Vor-Audit-Stand als DataMetric360-Basis (hoch) + +| Befund | Fundstelle | Schwere | +|---|---|---| +| `--fg3: #657081` — der im Audit als kontrastschwach identifizierte Wert (3,0:1 auf `--tile`), im Panel seit 2026-08-10 auf `#8a94a3` korrigiert; Bibliothek **und** `design/_ds`-Bundle tragen ihn weiter | `design-system/src/tokens/tokens.css:33`, `design/_ds/.../_ds_bundle.css:20` | hoch | +| **Kein einziger Fokus-Stil** in Tokens + allen 20 Komponenten (Audit fordert `:focus-visible` 2 px `#F50537`; das Panel hat ihn) | gesamtes Paket, grep-verifiziert | hoch | +| Formularfelder **13,5 px** → iOS-Auto-Zoom (Audit-Regel ≥16 px); propagiert bis in den `design/`-Entwurf (Bundle-Regel gewinnt gegen `.dm-in`) | `Feld/Feld.css:24-33`; `DM360.dc.html:24/41/44/422-428` | hoch | +| Versalien-Sperrschrift in 6 Komponenten über die bekannten `.ads-label`/`.ads-eyebrow` hinaus; StatGrid/TabBar mit nur **9 px** | `ActionButton.css:7`, `Pill.css:6`, `Seg.css:14`, `SwipeRow.css:16`, `StatGrid.css:15`, `TabBar.css:39` | mittel | +| TabBar: aktiver Tab = **roter Oberkantenstrich** statt gefüllter Pille — exakt das Muster, das der Audit (B5) im Panel abgeschafft hat | `TabBar.css:22-24` | mittel | +| Trefferflächen: IconButton 34×34, Switch 46×27, Popup-Items ≈34 px, Seg ≈35 px | jeweilige Komponenten-CSS | mittel | +| Literalfarben (`#fff` auf Switch-Knopf und SwipeRow) | `Switch.css:35`, `SwipeRow.css:11` | niedrig | +| Englischer Default-UI-Text `deleteLabel = "Delete"` | `SwipeRow.tsx:27` | niedrig | +| **Positiv: Markenreinheit bestanden** — keine Fonts/Ringe/Typenschilder im Paket (Lizenzregel eingehalten); keine Gewichte ≥500, keine Schatten, Radius über Token | — | ✓ | + +## D. `design/`-Export (mittel) + +- **Der RS-6-Fehler reicht bis in die Fachdaten**, nicht nur Badge/Name: „V8 biturbo · 600 PS", + 441 kW, 3.996 cm³, 2.150 kg, Tank **73 l** (RS 4: 58 l), Reifen **285/30 R22**, FIN-Baureihe + „4G" statt „8W" (`DM360.dc.html:116-628` diverse). Die korrekten RS-4-Schilder liegen bereits + unter `design/uploads/RS-S Badges/` — nur `assets/` enthält die RS-6-Kopien. +- **`design/datametric360-ios.css` und `homeassistant/www/audi-dashboard-ios.css` sind divergente + Geschwister**, keine Kopien: der `.ads`-Variante fehlen Fokusring, gefüllte Tab-Pille (sie färbt + stattdessen das Icon rot) und das komplette ≥860-px-Layout; die Panel-Variante hat dafür die + Schatten. Zwei Wahrheiten für dieselbe Optik → Drift vorprogrammiert. +- **Einstellungen-Einstieg widersprüchlich:** Entwurf + `DESIGN_BRIEF` sagen Zahnrad oben rechts, + Panel/`SPECIFICATION` sagen Audi-Ringe (Zahnrad erst ≥860 px). Vor der App-Umsetzung entscheiden. +- IconButton-Hints 36 px (`DM360.dc.html:78, 90`); variable Audi Type mit `font-weight: 100 900` + registriert (lädt zur Verletzung der 300/400-Regel ein, genutzt werden nur 300/400); + Literalfarben/Schatten im Präsentationsrahmen (nur Board, nicht App-UI). +- `companion-app/` auf `main` ist nur die Datenschicht; der dort noch offene Feldnamen-Defekt + (`tank_prozent`/`sicher_abgestellt`/`sicherheit` vs. Backend) ist auf dem Arbeitsbranch behoben + und löst sich beim Merge — bis dahin auf `main` latent. + +## E. Panel-Frontend: weitere Verstöße gegen die Vorgaben (Auswahl) + +**Farben nur als Tokens:** +- **iOS-Systemblau `#0A84FF`** als palettenfremde Farbe für den Nutzer-Pin + (`audi-dashboard.css:702, :707`) — Blau existiert in der Palette nicht. (hoch) +- Kartensteuerung komplett aus Literalen (`rgba(16,20,26,.84)`, `#fff`, `#101418`; + `audi-dashboard.css:722-734`), Leaflet-Startmarker `#fff`/`#000` + (`audi-dashboard-app.js:459`), Scrims 2× `rgba(0,0,0,.45)` ohne Token. (mittel/niedrig) + +**Typografie:** +- **Zweite und dritte Versalien-Stelle** neben `.eyebrow`: `.setup-gruppe-titel` (uppercase, + .1em — im Setup-Popup sichtbar) und `.marke-logo .ph` (`audi-dashboard.css:913, :481`). (mittel) +- Die selbst gesetzte Regel „`--fg3` nie unter 12 px" wird an ≥7 Stellen gebrochen + (`.sync` 10,5 px, `.quad .l` 11 px, `row dd small` 11,5 px, mehrere Inline-11-px; + Kontrast 4,6:1 ist unter der WCAG-Großtext-Schwelle für so kleine Schrift). (mittel) + +**Layout/A11y:** +- Schatten/Blur auch im **Haupt-CSS** (nicht nur ios.css): Pins, Kartensteuerung + (+`backdrop-filter`), Standortmenü, Setup-Entitätenliste (`audi-dashboard.css:697-745, :950`). (mittel) +- Trefferflächen <44 px bei neuen Elementen: Standortmenü-Schließen 32 px, + Setup-Reset 26 px, Fahrtart-Pille ≈31 px, `.rings` im Basis-CSS nur 42×24 px (erst ios.css + hebt an — ohne geladene Auflage ist der einzige Einstellungszugang zu klein). (mittel) +- Bei ausgeschalteter Tab-Beschriftung sind **alle fünf Tabs namenlos** (Text per + `display:none`, SVG `aria-hidden`, kein `aria-label`; `audi-dashboard-app.js:3072-3074`, + `audi-dashboard.css:266`). (mittel) +- Escape schließt Sheet und Setup, aber nicht Bildmenü/SmartDeal-Popup/Standortmenü. (niedrig) +- Koordinaten als einzige nicht-de-DE-Zahl im UI (`toFixed(4)` mit Punkt, + `audi-dashboard-app.js:786-789`). (niedrig) + +**Auf `main` bereits behoben** (bekannte Befunde, die nicht mehr gelten): die Ringe sind +inzwischen ein echter `