RichardandClaude Opus 5
33d95a6c3f
Sicherungspunkt vor dem Aufraeumen. Buendelt die Arbeit, die seit dem Abschluss der Avalonia-Portierung im Arbeitsverzeichnis lag. Oberflaeche - Entwurf aus Mockup/ umgesetzt: Theme.axaml (Farben je Thema, Barlow als mitgelieferte Schrift), Icons.axaml (Symbolgeometrien), Shell.axaml (eigene ControlThemes statt Fluent umzufaerben). - Neue Steuerelemente StrokeIcon und BlueprintFrame, Seiten fuer Token-Verbrauch und Agenten-Chats, Werkzeug-Einstellungen als Seite statt eigenem Fenster, Texteditor-Fenster. - ThemeManager mit hellem und dunklem Thema; die beiden Pinsel-Konverter entfallen, weil ein fester Farbwert den Themenwechsel nicht ueberlebt. Rocket.Chat - Neues Tool-Projekt (Client, Konfiguration, Workspace-Dateien) nach der Bauform des Telegram-Tools: rocketchat_poll als Tool-Job, geweckt wird nur, wenn wirklich etwas anliegt. - send_file ist freigabepflichtig, send_message bewusst nicht: Der Raum ist Arbeitsraum, der Schutz sitzt an der Raum-Allowlist. - Konzept-Doc um die Messung gegen die echte Instanz 8.7 ergaenzt; drei Annahmen waren falsch und sind korrigiert. Deploymentcenter - DC6 (Update anwenden) und DC7 (Erstinstallation ueber setup.json) erledigt, DC3 fuer win-x64/dev; deploy/publish.py als Release-Strecke. - AppHost.DisposeAsync gegen doppeltes Herunterfahren gesperrt - sonst ueberschreibt eine zweite Abmeldung den Wartungszustand am Watchdog. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
97 lines
6.1 KiB
Markdown
97 lines
6.1 KiB
Markdown
# 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.
|