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 <noreply@anthropic.com>

design-system/src/components/ProgressRing/ProgressRing.tsx

@@ -0,0 +1,50 @@
+import * as React from "react";
+import { Fig } from "../Fig/Fig";
+
+export interface ProgressRingProps {
+  /** 0-100 */
+  percent: number;
+  /** Center figure - defaults to the rounded percent value. */
+  value?: React.ReactNode;
+  unit?: string;
+  label?: React.ReactNode;
+  size?: number;
+  className?: string;
+}
+
+const RADIUS = 64;
+const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+
+export function ProgressRing({
+  percent,
+  value,
+  unit,
+  label,
+  size = 150,
+  className,
+}: ProgressRingProps) {
+  const clamped = Math.max(0, Math.min(100, percent));
+  const offset = CIRCUMFERENCE * (1 - clamped / 100);
+  const classes = ["ads-ring"];
+  if (className) classes.push(className);
+
+  return (
+    <div className={classes.join(" ")} style={{ width: size, height: size }}>
+      <svg viewBox="0 0 150 150" width={size} height={size}>
+        <circle cx="75" cy="75" r={RADIUS} className="ads-ring__track" />
+        <circle
+          cx="75"
+          cy="75"
+          r={RADIUS}
+          className="ads-ring__arc"
+          strokeDasharray={CIRCUMFERENCE}
+          strokeDashoffset={offset}
+        />
+      </svg>
+      <span className="ads-ring__mid">
+        <Fig value={value ?? Math.round(clamped)} unit={unit} />
+        {label !== undefined && <span className="ads-label">{label}</span>}
+      </span>
+    </div>
+  );
+}