# ClawdDotNet UI — Implementierungsleitfaden für Avalonia

Dieses Verzeichnis enthält das HTML-Mockup (`ClawdDotNet-UI-Mockup.dc.html`, im Browser öffnen)
und diese Anleitung zur Übertragung nach Avalonia. Das Mockup ist eine Design-Referenz — keine
lauffähige App. Ziel-Codebasis: `src/ClawdDotNet.Desktop`.

## 1. Was sich ändert

- **Dunkelmodus** mit Schnellumschalter in der Kopfzeile.
- **Sidebar-Navigation** statt `TabControl` mit `TabStripPlacement="Left"` — zuklappbar auf Icon-Breite.
- **Instanzauswahl/-erstellung/-wechsel** als ein Dialog (ersetzt `InstancePickerWindow` in seiner
  Doppelrolle als Start-Auswahl UND `OnOpenInstanceManager`-Reopen). Zeigt Status-Punkt + Logo-Monogramm.
- **Agenten-Seite**: wieder wie in WinForms in vier Quadranten (Liste/Einstellungen oben,
  Werkzeuge/Werkzeug-Einstellungen unten), aber mit ziehbaren Splittern statt `PropertyGrid`,
  und flachen Feldern statt verschachtelter Tabs.
- **Werkzeugleisten** ergänzt bei Jobs (inkl. Aktivieren/Deaktivieren), Diensten, Logs.
- **Statusleiste** erweitert um OpenRouter-API-Status und Token/Kosten-Kurzinfo (1h/24h, Credits).
- **Benachrichtigungsleiste** für instanzübergreifende Probleme (Exceptions, aufgebrauchte Limits).
- **Neue Menügruppe "Analyse"**: Tokennutzung (Charts + Tabelle), Agenten-Chats (Verlauf zwischen
  zwei Agenten, siehe `docs/Agentenkommunikation-Konzept.md` für das Datenmodell `AgentMessages`).

## 2. Design-Tokens

Farben als `ResourceDictionary` mit `ThemeDictionaries` (Light/Dark), Zugriff per `DynamicResource`
— nie feste Farbwerte in AXAML (siehe Prüfliste in `Avalonia-Portierungsleitfaden.md`).

```
Light: Bg #f2f2f3 · Surface #e9e9ea · Text #1d1f20 · Accent #5980a6 · Divider #1d1f20 @16%
Dark:  Bg #1a1c1e · Surface #232527 · Text #eef0f1 · Accent #7ea3c6 · Divider #eef0f1 @16%
```

Vollständige Ramp-Werte (Neutral/Accent 100–900, je Theme gespiegelt) stehen im `<script>`-Block
des Mockups (`LIGHT`/`DARK`-Konstanten) — 1:1 als Farbressourcen übernehmen.

- **Typografie**: Barlow Condensed (Überschriften) über Barlow (Fließtext), beide Google Fonts,
  als `FontFamily` einbetten (`Assets/Fonts/`, `avares://…` referenzieren).
- **Radius**: durchgehend eckig (0px) — Cards, Buttons, Inputs ohne `CornerRadius`.
- **Rahmen-Motiv ("Blueprint")**: Cards/Dialoge/primäre Buttons mit 1px Divider-Rahmen + vier
  kleinen "+"-Eckmarkierungen. Als wiederverwendbares `ControlTemplate` oder `UserControl`
  (`BlueprintFrame`) umsetzen, nicht pro Stelle neu zeichnen.

## 3. Screen-für-Screen

**Hauptfenster** (`MainWindow.axaml`): `TabControl` durch `DockPanel` + eigene Sidebar ersetzen —
`ItemsControl` über `Pages`, Icons per `PathIcon`/`Svg`, aktive Zeile per Style-Trigger auf
`SelectedPage`. Sidebar-Breite als `GridLength`, Zuklapp-Zustand als `bool` im
`MainWindowViewModel`, Breite per `Setter`/`Trigger` oder simple Wertumschaltung 240↔64px.

**Instanzdialog**: `InstancePickerViewModel` um `Status` (running/stopped/error) und `LogoPath`
erweitern (`InstanceInfo`-Modell). Status kommt vermutlich aus einem Health-Check pro Instanz
(separater Prozess/`AppHost` pro Instanz — prüfen, wie Multi-Instanz-Erkennung technisch geht,
da aktuell nur eine Instanz pro Prozess läuft). Logo: Pfad in `InstanceSettings.json` ablegen,
`Image`-Control mit Fallback-Monogramm.

**Agenten-Seite**: `Grid` mit `RowDefinitions="*,Auto,*"` + `GridSplitter` (Zeile 2) für
oben/unten, je Bereich `Grid` mit `ColumnDefinitions="Auto,Auto,*"` + `GridSplitter` (Spalte 2)
für Liste/Detail. Ersetzt beide `SplitContainer` aus der WinForms-Vorlage — Avalonia bringt
`GridSplitter` nativ mit, `MinWidth`/`MinHeight` statt fixer `SplitterDistance` setzen.
Identity/Soul-Buttons öffnen ein kleines Editor-Fenster (`TextEditorWindow` mit `TextBox
AcceptsReturn`), analog zu WinForms `btn_editIdentity`/`btn_editSoul`.

**Werkzeugleisten** (Jobs/Services/Logs): 1:1 aus den bestehenden `TasksPageView.axaml` /
`LogPageView.axaml` übernehmen — die Toolbars existieren dort bereits, nur die neue
Aktivieren/Deaktivieren-Aktion bei Jobs ist neu (`JobDisplayEntry.Status` umschalten,
`RelayCommand` in `TasksPageViewModel`).

**Statusleiste**: `OpenRouterStatusService` ist bereits fertig (`StatusText`, `CreditsText`,
`CreditsTooltip`, `IsApiReachable`) — nur in `MainWindowViewModel`/`StatusBar` binden, aktuell
ungenutzt.

**Benachrichtigungsleiste**: braucht einen neuen Dienst, der Fehler/Limits *anderer* Instanzen
sieht — das ist der größte neue Baustein, da `AppHost` heute nur die aktuell laufende Instanz
kennt. Einfachster Weg: beim Start alle `InstanceSettings.json`/`TokenUsage.json` im
Instanzverzeichnis lesen (ohne den vollen `AppHost` der anderen Instanz zu starten) und auf
offensichtliche Signale prüfen (Guthaben 0, Fehlerzähler in Logs). Sauberer, aber größerer
Wurf: ein leichtgewichtiger Cross-Instance-Status, den jede laufende Instanz in eine gemeinsame
Datei schreibt.

**Analyse-Seiten**: Tokennutzung liest aus `TokenUsageFile`/`TokenUsageRecord` (bereits vorhanden,
siehe `Models/TokenUsageRecord.cs`) — nur Aggregation (pro Tag/Agent/Modell) und ein Chart-Control
fehlen (z. B. `LiveChartsCore.SkiaSharpView.Avalonia`, oder für die einfachen Balken im Mockup
reicht ein simples `ItemsControl` mit `Rectangle`-Höhen wie im Mockup — keine Chart-Library nötig,
wenn nur Balken/Linien gebraucht werden). Agenten-Chats braucht den in
`docs/Agentenkommunikation-Konzept.md` beschriebenen `AgentMessages`-Speicher — die Seite selbst
ist nur zwei `ComboBox` + gefilterte `ItemsControl` wie im Chat-Tab.

## 4. Nicht im Mockup, aber zu beachten

- Alle Regeln aus `docs/Avalonia-Portierungsleitfaden.md` Abschnitt 2 und 4 gelten unverändert
  (Schichtschnitt App/Desktop, `Dispatcher.UIThread`, `AppPaths.DataDirectory`, keine
  `MessageBox`/WinForms-Reste).
- Das Mockup zeigt Wireframe-Icons als Inline-SVG; in Avalonia mit `PathIcon` + Lucide-Pfaden
  oder als `.svg`-Assets über `Avalonia.Svg` einbinden (Stroke-Width 1.5, siehe Icon-Namen im
  Mockup-Quelltext als Anhaltspunkt für die Lucide-Auswahl).
- Splitter-Positionen, Sidebar-Zuklappzustand und Analyse-Filter sollten persistiert werden
  (`SettingsManager`), damit sie den Neustart überleben.