Initialer Import: HA-Panel, Design-System, Companion-App

Drei zusammengehörige Teile in einem Repository:

- homeassistant/  Das fertige, im Einsatz befindliche Home-Assistant-Panel
  (panel_custom Custom Element + pyscript-Backend). Echte Fahrzeug- und
  Personendaten (fahrzeugprofil.json, fahrten.jsonl, tankvorgaenge.jsonl,
  Tankbelege) bleiben per .gitignore außen vor; die anonymisierte Vorlage
  fahrzeugprofil.example.json ist mit dabei.

- design-system/  Eigenständige React-Komponentenbibliothek (@audi-dash/ui),
  die die visuelle Sprache des Panels nachbildet - ohne Audi-Markenzeichen
  und ohne die lizenzierte Hausschrift. Dient als Grundlage für Claude
  Design. War bis hierher ein eigenes Repository und ist in dieses
  eingeschmolzen worden.

- companion-app/  Datenschicht der neuen App DataMetric360 (iOS/Android via
  Capacitor, zusätzlich als Iframe im HA-Dashboard). Noch ohne Oberfläche:
  REST- und WebSocket-Zugriff auf Home Assistant plus Warteschlange für
  Änderungen ohne Netz. Ersetzt das eingespritzte hass-Objekt, das nur
  innerhalb des HA-Frontends existiert.

Dazu die Projektdokumentation: SPECIFICATION.md (Ist-Stand des Panels),
COMPANION_APP_ARCHITECTURE.md (Architekturentscheidungen der neuen App),
AUDIT_2026-08-10.md, DESIGN_BRIEF_DATAMETRIC360.md und der ursprüngliche
Bauauftrag.

Co-Authored-By: Claude Opus 5 <[email protected]>

DESIGN_BRIEF_DATAMETRIC360.md

@@ -0,0 +1,86 @@
+# DataMetric360 — Design brief for Claude Design
+
+Paste the block below into a **new Claude Design project** that has the **"Audi Dashboard UI"** design
+system attached. Then iterate screen by screen. See the step-by-step in the chat/companion doc.
+
+---
+
+## Prompt to paste
+
+```
+Entwirf eine App namens "DataMetric360" — eine private Fahrzeug-App für ein einzelnes Auto.
+Nutze ausschließlich die Komponenten aus dem angehängten Design-System (Audi Dashboard UI).
+
+WICHTIG — Grundlagen:
+- Dunkles Theme ("Nacht") ist Standard, helles Theme ("Tag") existiert als Umschaltung.
+- Keine Schatten, keine Verläufe. Flache Kacheln, Pill-Buttons, Haarlinien als Trenner.
+- Zahlen im deutschen Format (1.234,5 · Komma als Dezimaltrennzeichen).
+- Alle Texte auf Deutsch.
+- Schriftgewichte nur 300 und 400 — niemals fett/600+.
+
+RESPONSIVE — das ist zentral:
+Die App läuft in zwei Kontexten und muss beide gleich gut bedienen:
+1. Smartphone (iPhone/Android, ca. 390–430px breit) — Hauptkontext, Bedienung mit dem Daumen,
+   Tab-Leiste unten.
+2. Großer Bildschirm (Desktop/Tablet, eingebettet in ein Home-Assistant-Dashboard, ab ca. 1000px).
+   Hier soll das Layout NICHT einfach eine zentrierte schmale Handy-Spalte sein, sondern die
+   Fläche sinnvoll nutzen: mehrspaltige Kachel-Anordnung, Navigation seitlich statt unten,
+   Listen und Detailansicht nebeneinander statt nacheinander.
+Zeige für jeden Hauptbildschirm beide Varianten.
+
+BILDSCHIRME (Hauptnavigation, 5 Bereiche):
+1. "Übersicht" — Fahrzeugfoto, Modellbezeichnung, Kennzeichen, Status "sicher abgestellt",
+   Reichweite + Tankfüllstand als große Zahl mit Fortschrittsbalken, Kilometerstand,
+   nächster Service, letzte Fahrt und letzte Tankung als Vorschau.
+2. "Mein Audi" — Übersichtsseite mit Fotogalerie und Kacheln, die zu Unterseiten führen:
+   Fahrzeugdaten/Technik, Service, Reifen, Versicherung & Steuer.
+3. "Fahrten" — Liste aller Fahrten, gruppiert nach Jahr und Monat (aufklappbar).
+   Pro Fahrt: Datum, Uhrzeit, Strecke in km, Dauer, Fahrtart (privat/Arbeitsweg).
+   Plus eine Detailansicht einer einzelnen Fahrt mit Karte, Start-/Zieladresse,
+   Durchschnitts- und Höchstgeschwindigkeit.
+4. "Statistik" — ausgewertete Kennzahlen über wählbare Zeiträume: gefahrene Strecke,
+   Fahrzeit, Verbrauch, Kosten, Aufteilung Tag/Nacht, Aufteilung privat/Arbeitsweg.
+5. "Tanken" — Liste der Tankvorgänge (Jahr/Monat gruppiert), pro Eintrag Datum, Liter,
+   Preis pro Liter, Gesamtbetrag, Tankstelle. Plus Detailansicht eines Tankvorgangs
+   mit Beleg-Upload.
+
+ZUSÄTZLICHE BILDSCHIRME:
+6. "Einstellungen" — erreichbar über ein Zahnrad oben rechts, nicht über die Tab-Leiste.
+   Fahrzeugdaten bearbeiten (FIN, Kennzeichen, Modell), Theme-Umschaltung,
+   Foto-Verwaltung, Datenexport, Backup.
+7. "Ersteinrichtung" (Onboarding, einmalig beim ersten Start) — der Nutzer verbindet die App
+   mit seinem eigenen Server: Feld für die Server-Adresse, Feld zum Einfügen eines
+   Zugangs-Tokens, alternativ ein Button "QR-Code scannen". Freundlich und knapp erklärt,
+   kein technisches Kauderwelsch.
+
+NEU UND WICHTIG — Live-Daten:
+Das Fahrzeug sendet jetzt laufend Live-Telemetrie (Position, Geschwindigkeit, Drehzahl,
+Zündung an/aus, Tankfüllstand). Entwirf dafür:
+- Eine "Fahrt läuft gerade"-Ansicht: Live-Karte mit aktueller Position, aktuelle
+  Geschwindigkeit groß, bisherige Strecke und Dauer der laufenden Fahrt.
+- Auf der Übersicht: ein deutlich sichtbarer Hinweis, wenn das Fahrzeug gerade fährt,
+  mit Absprung in diese Live-Ansicht.
+
+OFFLINE-ZUSTAND:
+Die App kann ihren Server nicht immer erreichen. Entwirf einen unaufdringlichen, aber
+eindeutigen "Offline"-Hinweis in der Kopfzeile: die zuletzt geladenen Daten bleiben sichtbar,
+sind aber erkennbar nicht aktuell. Zeige außerdem, wie Änderungen aussehen, die offline
+gemacht wurden und noch auf Übertragung warten (z. B. ein hochgeladener Beleg in einer
+Warteschlange).
+
+LEERE ZUSTÄNDE:
+Zeige für Fahrten, Tankvorgänge und Statistik jeweils auch den Zustand "noch keine Daten
+vorhanden" — freundlich formuliert, mit einem Hinweis, was als Nächstes passiert.
+```
+
+---
+
+## Notes for the implementation step (me, afterwards)
+
+- Import via `DesignSync` from the resulting project, same as the Design-Audit task.
+- Target repo: a new `companion-app/` (Vite + React + TypeScript + Capacitor), consuming
+  `@audi-dash/ui` from `design-system/`.
+- The design system ships **no Audi brand assets** (licence constraint) — but DataMetric360 is sideload-only
+  and therefore inside the private-installation scope, so real fonts/rings/badges get added back at
+  implementation time from `homeassistant/www/`, **not** into `design-system/`.
+- Data layer: HA REST + WebSocket, see `COMPANION_APP_ARCHITECTURE.md` §3.