# UI-Sollmodell – Control Plane

## Zielbild
- **Operator-first**: Das UI muss schnell erfassbar sein, ohne verschwenderischen Glanz. Klar strukturierte Oberflächen mit nordisch-kühlen Tönen, typografischer Klarheit und ausreichend Weißraum ermöglichen fokussiertes Arbeiten ohne Ablenkung.
- **Helles Farbschema**: Weiß- und Graustufen dominieren, Akzente bleiben zurückhaltend (tiefe Blau- oder Grünwerte für Aktionen/Status). Kein Neon, kein Cyber-Punk-Glanz, keine animierten Nebel.
- **Vertrauensein: Live-Status & Kontrolle auf einen Blick**: Wichtigste Telemetrie und Schalter werden ohne Scrollen sichtbar. Historien und Auditdaten leben in eigenen, abrufbaren Tabs.

## Informationsarchitektur & Tabs
Statt des current long-scroll Layouts treten klar abgegrenzte Top-Level-Tabs. Jeder Tab bekommt eine eindeutige Verantwortung.

### 1. Overview & Status
**Zweck**: Schnellcheck, ob Sender/Control Plane gesund ist. Live-Hero, Status-Zustand, Aktivitäts-Metriken.
**Inhalte**:
- Hero-Panel mit Frequenz, TX-Status, Connection-LED, Zustandshinweis
- Schnellmetriken (Chunks, Samples, Underruns, Uptime, Rate)
- Visuelle Health-Sparkbars (Audio Buffer, Stream Health, TX Activity)
- Kurznotizen zum letzten Fehler/Runtime-State (z.B. Bullet unter Hero)
- Kompaktes „Last Update / Runtime Age“-Widget
> Alles bleibt hier; nichts anderes.

### 2. Transmission Control
**Zweck**: Alle live-änderbaren Controls bündeln, damit ein Operator schnell Eingriffe macht.
**Inhalte**:
- TX Buttons (Start/Stop/Refresh) + große Hinweisfläche („Danger“-Status nur hier sichtbar, mit klarer Trennung)
- Frequency Panel (Slider, Eingabe, Presets, Apply/Reset)
- RDS Text Panel (PS/RT, Char-Counter, Presets)
- Switches (Stereo, RDS, Limiter)
- Optional: Danger Zone (Reset Fault / Hard Refresh) als separater Sub-Panel innerhalb des Tabs

### 3. Diagnostics & Health
**Zweck**: Tiefere Einblicke, wenn etwas nicht stimmt.
**Inhalte**:
- Health-Dashboard (HTTP/Runtime/Queue/Buffer, Zeit seit Update) als strukturierte Key-Value-Liste
- Meter + Trend-Sparklines (High Watermark, Queue Fill)
- Control Audit (Reject Counts)
- Transition History + Fault History (pflege kurzer Listen)
> Diese Inhalte verschwinden vom Overview, sitzen gebündelt im Diagnostics-Tab.

### 4. Activity & Logs
**Zweck**: Chronologische Einblicke und Auditierung.
**Inhalte**:
- Activity Log (komprimiert + scrollbar)
- Keyboard Shortcuts / Cheatsheet (ggf. als Suchleiste im Tab)
- Optional: kleine Info-Karte über Backend-Version, Live Config

### Tab-Wechsel & Mobile
- Tabs als saturated horizontal/vertical nav mit Indikatoren (keine unwichtigen Animationen).
- Mobile: Tab-Inhalte untereinander, Tab-Bar sticky oben, Panels innerhalb Tabs collapsible.

## Auch weiterhin auf Overview
- Hero mit Frequenz & TX-Status
- Schnellmetriken + Hauptstatus-Messwerte
- Kompaktes Toast/Status-Fenster
> Diagnosen, Logs, Toggels und History wandern in eigene Tabs.

## Visuelle Stilprinzipien
1. **Palette**: Hintergrund `#f7f8fb`, Flächen `#ffffff`, `#eef0f3`, `#d7dcdf`; Text `#111724`/`#3b3f45`; Akzente `#1f4d9d`, `#0d944a` für positive Aktionen, `#b03030` für Fehler.
2. **Typografie**: Sans-Serif (z. B. `Inter` oder `Libre Franklin`), Gewichtung durch Größe statt Glow. Monospaced nur für Messwerte/Logs.
3. **Container**: Schatten weich (z. B. `0 8px 24px rgba(15,23,42,0.08)`), Ecken leicht gerundet (`8px`).
4. **Tabs/Navigation**: Prägnante Tab-Bar mit Underline/Border-Highlight. Klarer Fokuszustand, deutliche Hover/Active, keine Glüh-Effekte.
5. **Buttons**: Volume-sichere Farbflächen (z. B. `#0d944a`) auf weißem Hintergrund, sekundäre Buttons Outlines, Danger red minimal.
6. **Status-Indikatoren**: Nicht mehr „glow“; statische Icons oder leichte Capsules, ggf. Label (LIVE/IDLE) in Kapitälchen.
7. **Spacing**: Gitter (max-width 1200px) mit konsistentem `24px`-Gutter, `14px` Zwischenräume.

## Nächste Schritte
1. **Tab-Start**: Wrapper für Tabs + Content-Sektionen in `internal/control/ui.html`. Beginn mit statischem Tab-Layout (z. B. `nav` + `section`s) und Platzhalter für Inhalte.
2. **Palette-Refactoring**: CSS-Variablen neu definieren (heller Hintergrund, neue Akzentfarben) und Grundflächen anpassen.
3. **Menu-State**: Simplify hero/medicine to new layout, move quick-grid + signal cards into Review `Overview` tab.
4. **Logik**: Tab-Switching via minimal JS (klassische `data-tab`), keine komplette re-rendering.

## Offene Fragen
- Welche Panels bleiben collapsible in den Tabs (z. B. Danger Zone vs separate CTA)?
- Soll es ein persistentes „Status banner“ (z. B. oben) über allen Tabs geben?
- Wie viel Redundanz darf es zwischen Overview und Control geben (z. B. TX-Buttons)?