ClawdDotNet/Mockup/extracted/mockup/Implementierungsleitfaden.md

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.