Eddy 3f600b828e ROADMAP: Performance-Metriken dokumentiert

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

2026-04-14 14:25:50 +02:00

45 KiB

Raw Blame History

Claude Desktop — Roadmap

Stand: 14.04.2026

Aktueller Status

Implementiert (Phase 1-4)

Feature	Status	Commit
Tauri 2.0 + SvelteKit 5 App	✅	Initial
Claude Agent SDK Integration	✅	Phase 2
Live-Streaming Text im Chat	✅	Phase 2
SQLite Persistierung	✅	Phase 3
Guard-Rails System	✅	Phase 3
Claude Bridge (Node.js)	✅	Phase 3
4-Panel Layout (PaneForge)	✅	Phase 4
Tab-Switching	✅	Phase 4
Markdown-Rendering	✅	Phase 4
Activity Panel (Tool-Tracking)	✅	Phase 4
Memory Panel	✅	Phase 4
Audit Log Panel	✅	Phase 4
Agent-View	✅	Phase 4
Modell-Auswahl (Haiku/Sonnet/Opus)	✅	`433e2de`
Session-Historie persistent	✅	`4ba14a5`
STOPP-Button + Escape-Shortcut	✅	Vorhanden
Token/Kosten-Anzeige im Footer	✅	Vorhanden
Modell-Badge (Titlebar + Footer)	✅	`9129163`
Tray-Icon mit Menu	✅	`3c6da3b`
Subagent-Hierarchie (Phase 5)	✅	`6cfcdb2`
System-Monitor (Phase 16)	✅	`adb11fd`
UI: Code-Copy, Edit, Regenerate (Phase 7)	✅	`9d837ef`
Session-Management (Phase 6)	✅	`abaf4eb`
Claude-DB Integration (Phase 8)	✅	`e6bd0de`
Context-Management (Phase 9)	✅	`eb91e54`

Phase 5: Subagent-Hierarchie ✅ ERLEDIGT

Commit: 6cfcdb2 (14.04.2026)

Implementiert

✅ scripts/claude-bridge.js — Subagent-Tracking
- Map activeSubagents für Tool-ID → Agent-Info
- SUBAGENT_TOOLS erkennt Task/Agent Tool-Calls
- subagent-started / subagent-stopped Events
- parentAgentId, depth, model im Payload
✅ src/lib/stores/app.ts — Agent mit Hierarchie
- Agent.parentAgentId?: string
- Agent.depth: number
- buildAgentTree() → rekursive Baumstruktur
- agentTree derived Store
✅ src/lib/stores/events.ts — Event-Handler
- SubagentEvent Interface
- Listener für subagent-started, subagent-stopped
- addSubAgent() mit Parent-Verknüpfung
✅ src/lib/components/AgentView.svelte — Baumansicht
- Rekursives {#snippet agentNode} für Hierarchie
- Einrückung mit CSS --depth Variable
- Verbindungslinien zwischen Parent/Child
- Collapse/Expand per Agent
- Typ-Icons (🎯 Main, 🔍 Explore, 📋 Plan, etc.)

Phase 6: Session-Management Verbesserungen ✅ ERLEDIGT

Commit: abaf4eb (14.04.2026)

Implementiert

✅ Session Auto-Load bei App-Start
- +layout.svelte lädt aktive Session in onMount
- Session-Stats werden wiederhergestellt (Tokens, Kosten)
- Nachrichten aus DB geladen
✅ agent_id in messages-Tabelle
- ChatMessage Struct erweitert
- DB-Schema enthält agent_id Spalte
- DbMessage Interface angepasst
✅ Session-Compacting
- compact_session(session_id, keep_last) Funktion
- Fasst alte Nachrichten in Summary zusammen
- Standard: 30 letzte Nachrichten behalten
- Tauri Command registriert

Nachträglich implementiert

✅ Token-basiertes Compacting — Warnung bei ~40k Token mit Bestätigungs-Dialog (ab95af2)

Noch offen (niedrigere Priorität)

Claude-Session-ID nutzen — SDK-Fortsetzung mit --resume

Phase 7: UI-Verbesserungen ✅ ERLEDIGT

Commit: 9d837ef (14.04.2026)

Implementiert

✅ Code-Block mit Copy-Button
- Custom marked Renderer für .code-block-wrapper
- Svelte action addCopyButtons mit MutationObserver
- Sprach-Label oben links
- 📋 Copy-Button oben rechts
- Funktioniert auch beim Streaming
✅ Nachricht bearbeiten (Edit)
- ✏️ Button bei User-Nachrichten (hover)
- Inline-Textarea im Edit-Modus
- "Speichern & Senden" → löscht folgende Nachrichten
- Escape zum Abbrechen
✅ Antwort regenerieren (Regenerate)
- 🔄 Button bei letzter Assistant-Nachricht
- Löscht Antwort, sendet User-Nachricht erneut
- Nur wenn nicht isProcessing

Nachträglich implementiert

✅ DiffView.svelte — Diff-Ansicht für Edit-Tool Ergebnisse (2653b4f)
✅ FilePreview.svelte — Dateivorschau für Read-Tool Ergebnisse (2653b4f)
✅ Keyboard Shortcuts — Ctrl+K (Focus), Ctrl+Enter (Senden), Ctrl+Shift+K (Leeren) (56eb2f5)

Phase 8: Claude-DB Integration ✅ ERLEDIGT

Commit: e6bd0de (14.04.2026)

Problem

Die App hat keinen direkten Zugriff auf die zentrale Wissensbasis (claude DB auf 192.168.155.1).

Ziel

Wissensbasis durchsuchen direkt in der App
Erkenntnisse speichern ("Das merken")
Skills/Hooks/Patterns aus DB laden

Implementiert

✅ src-tauri/src/knowledge.rs (NEU)
- MySQL-Verbindung zu claude-db (192.168.155.1:3306)
- search_knowledge(query) — Volltextsuche mit MATCH AGAINST
- save_knowledge(entry) — Neuer Eintrag speichern
- get_knowledge(id) — Einzelnen Eintrag laden
- get_knowledge_categories() — Kategorien mit Count
- get_recent_knowledge() — Letzte Einträge
- test_knowledge_connection() — Verbindungstest
✅ src-tauri/Cargo.toml
- mysql_async = "0.34" Dependency hinzugefügt
✅ src-tauri/src/lib.rs
- Knowledge-Modul registriert (mod knowledge)
- Alle Tauri-Commands exportiert
✅ src/lib/components/KnowledgePanel.svelte (NEU)
- Suchfeld mit Enter-Trigger
- Kategorie-Filter Chips
- Ergebnisliste mit Relevanz-Score
- Detail-Modal bei Klick
- "Das merken" Dialog mit Formular
- Verbindungsstatus-Anzeige
✅ src/routes/+page.svelte
- Neuer Tab "Wissen" (📚) im mittleren Panel
- KnowledgePanel eingebunden

Nachträglich implementiert

✅ "Das merken" im Chat — 💡 Button bei Nachrichten, Modal-Dialog (56eb2f5)

Noch offen (niedrigere Priorität)

Sticky Context — Automatisch beim Chat-Start laden

Verifikation

# Wissensbasis durchsuchen → Ergebnisse in App
# "Das merken" klicken → Eintrag in claude.knowledge
# Kategorie-Filter → Einträge filtern

Phase 9: Intelligentes Context-Management ✅ ERLEDIGT

Commit: eb91e54 (14.04.2026)

Das Problem: Context-Verlust nach Compacting

Compacting ist notwendig (Token-Limit, Kosten, Latenz), aber dabei geht kritischer Kontext verloren:

Zugänge (DB-Hosts, API-Keys)
Projekt-Kontext (CLAUDE.md)
Getroffene Entscheidungen
Aktuelle Aufgabe

Lösung: Drei-Schichten-Gedächtnis

┌─────────────────────────────────────────────────────────────┐
│  SCHICHT 1: IMMER PRÄSENT (~200 Token)                      │
│  • User-Info (Name, Firma)                                  │
│  • Aktive Zugänge (komprimiert)                             │
│  • Aktuelle Projekt-ID + Phase                              │
│  → Bei JEDEM API-Call dabei                                 │
├─────────────────────────────────────────────────────────────┤
│  SCHICHT 2: PROJEKT-KONTEXT (~500 Token)                    │
│  • CLAUDE.md (komprimiert)                                  │
│  • Architektur-Entscheidungen                               │
│  • Offene TODOs                                             │
│  → Nach Compacting neu injiziert                            │
├─────────────────────────────────────────────────────────────┤
│  SCHICHT 3: WISSENS-HINTS (on-demand)                       │
│  • Relevante DB-Einträge                                    │
│  • Ähnliche Probleme/Lösungen                               │
│  → Bei Tool-Aufrufen automatisch geladen                    │
└─────────────────────────────────────────────────────────────┘

Implementiert

✅ src-tauri/src/context.rs (NEU)
- StickyContext Struct (Schicht 1) — User-Info, Credentials, Projekt, Regeln
- ProjectContext Struct (Schicht 2) — Entscheidungen, TODOs, Insights
- ExtractedContext — Kontext vor Compacting extrahieren
- render() Methoden für System-Prompt-Integration
- Token-Schätzung mit estimate_tokens()
✅ Datenbank-Schema (SQLite)
- sticky_context Tabelle (key, value, priority)
- compacting_archive Tabelle (Entscheidungen, TODOs, etc.)
- context_failures Tabelle (für Prompt-Optimierung)
✅ Tauri-Commands
- get_sticky_context() — Schicht 1 laden
- set_sticky_context() — Eintrag setzen
- remove_sticky_context() — Eintrag löschen
- get_project_context() — Schicht 2 aus Archiv
- extract_context_before_compacting() — Kritisches extrahieren
- log_context_failure() — Fehler loggen
- get_full_context() — Kombinierter Prompt
- list_sticky_context() — Alle Einträge auflisten
✅ src/lib/components/ContextPanel.svelte (NEU)
- Sticky-Context-Einträge anzeigen/bearbeiten
- Eintrags-Typen: User-Info, Regeln, Credentials, Projekt
- Prioritäts-Management (1=kritisch bis 4=niedrig)
- Vorschau des gerenderten Context
- Token-Anzeige
✅ src/routes/+page.svelte
- Neuer Tab "📌 Context" im rechten Panel

Nachträglich implementiert

✅ Bridge-Integration — Context bei jedem API-Call injizieren (2653b4f)
- claude-bridge.js: Sticky Context als Prefix zur Nachricht
- claude.rs: Context automatisch aus DB laden

Noch offen (niedrigere Priorität)

Auto-Extraction vor Compacting — Hook automatisch auslösen
Validation — Prüfen ob Claude den Context nutzt
Wissens-Hints — On-demand aus claude-db laden

Verifikation

# Context-Panel öffnen → Einträge hinzufügen
# Vorschau → <critical-context> Tags sichtbar
# Nachricht senden → Monitor zeigt "+XX ctx" Token

Phase 10: Sprach-Interface (Optional)

Technologie-Stack

Komponente	Technologie	Ort
Speech-to-Text	Whisper.cpp	Lokal
Voice Activity Detection	Silero VAD	Lokal
Text-to-Speech	OpenAI TTS API	Cloud
Audio-Capture	Web Audio API	Browser

Aufgaben

Whisper Integration
- whisper.cpp als Tauri-Sidecar oder WASM
- Streaming-Transkription
- Deutsch-Modell (small oder medium)
VAD (Voice Activity Detection)
- Erkennt wann User aufhort zu sprechen
- Pause > 1.5s → Nachricht senden
TTS (Text-to-Speech)
- OpenAI TTS API Integration
- Streaming-Wiedergabe
- Interrupt bei User-Sprache
UI
- Mikrofon-Button in Chat
- Pegel-Anzeige
- Transkript live anzeigen

Aufwand

Gross — eigenes Teilprojekt, 2-3 Wochen

Phase 11: Multi-Agent-Architektur (Context-Einsparung)

Die drei Agent-Modi (einstellbar!)

┌─────────────────────────────────────────────────────────────┐
│  MODUS A: SOLO (Standard für kleine Aufgaben)               │
│  Main macht alles selbst, keine Subagents                   │
│  → Kein Overhead, schnell, für Triviales                    │
├─────────────────────────────────────────────────────────────┤
│  MODUS B: HANDLANGER (Main denkt, Rest führt aus)           │
│  Main: "Lies Datei X, such Y, gib Zeilen 10-20"             │
│  Sub: Führt EXAKT aus, denkt NICHT selbst                   │
│  → Für komplexe Aufgaben mit viel Koordination              │
├─────────────────────────────────────────────────────────────┤
│  MODUS C: AUTONOME EXPERTEN (jeder denkt selbst)            │
│  Main: "Implementiere Feature X"                            │
│  Research: Plant SELBST wie er sucht                        │
│  Implement: Plant SELBST die Architektur                    │
│  → Für parallelisierbare Aufgaben, Experten-Wissen          │
└─────────────────────────────────────────────────────────────┘

Wann welcher Modus?

Aufgabe	Modus	Grund
"Fix Typo in Zeile 42"	Solo	Trivial
"Lies 50 Dateien, finde Bug"	Handlanger	Main koordiniert
"Implementiere OAuth2 komplett"	Experten	Jeder Teil braucht Planung
"Erkläre den Code"	Solo	Nur Analyse

Automatische Modus-Wahl (optional)

function chooseMode(task) {
  const tokens = estimateTokens(task);
  const complexity = analyzeComplexity(task);

  if (tokens < 1000 && complexity === 'simple') return 'solo';
  if (complexity === 'coordination_heavy') return 'handlanger';
  if (complexity === 'parallelizable') return 'experten';
  return 'solo'; // Default
}

Agent-Typen (für Modus B+C)

Agent	Aufgabe	Modus B (Handlanger)	Modus C (Experte)
Research	Code durchsuchen	"Lies X, gib Y"	"Finde selbst was relevant ist"
Implement	Code schreiben	"Schreib exakt das"	"Implementiere nach Best Practices"
Test	Testen	"Führe diese Tests aus"	"Schreib und führe passende Tests"
Review	Prüfen	"Prüfe auf X, Y, Z"	"Finde selbst Probleme"

Aufgaben

scripts/claude-bridge.js
- spawnSubAgent(type, task, maxTokens) Funktion
- summarizeResult(result, maxTokens) — Ergebnis komprimieren
- Orchestrator-Modus: Main Agent delegiert automatisch

Orchestrator-Prompt

Du bist ein ORCHESTRATOR. Du machst NICHT selbst die Arbeit.
Für jede Aufgabe:
1. Analysiere was nötig ist
2. Delegiere an passenden Sub-Agent
3. Warte auf ZUSAMMENFASSUNG (nicht rohe Daten)
4. Entscheide nächsten Schritt

Sub-Agents: Research, Implement, Test, Review

Sub-Agent-Prompts
- Research: "Fasse Ergebnisse in max 500 Token zusammen"
- Implement: "Berichte nur: welche Dateien, was geändert"
- Test: "Berichte nur: passed/failed, Fehlerursache"
UI: Agent-Modus Einstellung
- Settings: Dropdown "Agent-Modus" (Solo / Handlanger / Experten / Auto)
- "Auto" wählt basierend auf Aufgaben-Komplexität
- Anzeige in Footer welcher Modus aktiv
UI: Agent-Delegation anzeigen
- AgentView zeigt: Main → Sub-Agent Delegation
- Bei Handlanger: Exakte Anweisung sichtbar
- Bei Experten: Agent's eigene Planung sichtbar
- Ergebnis-Zusammenfassung pro Agent

Verifikation

# Große Aufgabe starten
# Prüfen: Main Agent delegiert statt selbst zu arbeiten
# Prüfen: Sub-Agent Ergebnisse sind komprimiert
# Prüfen: Main Agent Context bleibt klein

Phase 12: Hook-System für Automatisierung

Konzept

Hooks die automatisch bei bestimmten Events laufen:

Hook	Wann	Was
`SessionStart`	App startet	Schicht 1+2 laden
`PreToolUse`	Vor jedem Tool	Wissens-Hints aus DB
`PostToolUse`	Nach Tool	Bei Fehler → Pattern speichern
`BeforeCompacting`	Vor Komprimierung	Kritisches extrahieren
`AfterCompacting`	Nach Komprimierung	Schicht 1+2 injizieren

Aufgaben

src-tauri/src/hooks.rs (NEU)
- HookManager Struct
- register_hook(event, callback)
- fire_hook(event, payload)
scripts/hooks/ (NEU)
- session-start.js → Lädt Projekt-Kontext
- pre-tool.js → Wissens-Hints aus claude-db
- post-tool.js → Fehler-Patterns speichern
- before-compacting.js → Kritisches extrahieren
- after-compacting.js → Context wiederherstellen
UI: Hook-Konfiguration
- Settings-Panel: Hooks ein/ausschalten
- Hook-Log im Audit-Panel

Verifikation

# Session starten → Hook-Log zeigt "Kontext geladen"
# Tool aufrufen → Hook-Log zeigt "Wissens-Hints: 3 gefunden"
# Fehler provozieren → Pattern wird gespeichert

Claude-DB Schema-Erweiterungen

Neue Tabellen für die zentrale Wissensbasis (192.168.155.1):

-- Projekt-Kontext (für Schicht 2)
CREATE TABLE project_context (
    id INT PRIMARY KEY AUTO_INCREMENT,
    project_id VARCHAR(100),
    type ENUM('claude_md', 'architecture', 'decision', 'todo', 'insight'),
    content TEXT,
    priority INT DEFAULT 5,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    expires_at TIMESTAMP NULL,
    INDEX idx_project (project_id)
);

-- Credentials (verschlüsselt)
CREATE TABLE credentials (
    id INT PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(100) UNIQUE,
    type ENUM('mysql', 'api', 'ssh', 'oauth'),
    value_encrypted BLOB,
    inject_pattern TEXT,  -- Regex: wann automatisch laden
    last_used TIMESTAMP
);

-- Compacting-Archive
CREATE TABLE compacting_archive (
    id INT PRIMARY KEY AUTO_INCREMENT,
    session_id VARCHAR(100),
    extracted_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    decisions JSON,
    open_questions JSON,
    key_insights JSON,
    zugaenge JSON
);

-- Begriff-Cache (für schnelle Wissens-Hints)
CREATE TABLE concept_cache (
    concept VARCHAR(100) PRIMARY KEY,
    relevant_knowledge_ids JSON,
    last_queried TIMESTAMP,
    hit_count INT DEFAULT 0
);

Phase 13: VSCodium Integration (IDE-Steuerung)

Das Ziel

Claude bedient VSCodium komplett — OHNE deine Maus zu blockieren.

Architektur

Claude Desktop ←→ VSCode Extension Bridge ←→ VSCodium
     │                    │
     │                    ├─ VSCode Commands (Tabs, Panels, Git)
     │                    ├─ LSP (Refactoring, Go-To, Find References)
     │                    └─ Debug Adapter (Breakpoints, Step)
     │
     └─ Kein Computer Use! Keine Screenshots! Keine Maus-Simulation!

Was Claude damit kann

Aktion	Wie	Aktuell?
Datei öffnen	`workbench.action.files.openFile`	❌ Nein
Code formatieren	`editor.action.formatDocument`	❌ Nein
Suche in Projekt	`workbench.action.findInFiles`	❌ Nein
Git Commit	`git.commit`	❌ (nur CLI)
Debugger starten	`workbench.action.debug.start`	❌ Nein
Refactoring	LSP `textDocument/rename`	❌ Nein
Go-To Definition	LSP `textDocument/definition`	❌ Nein
Terminal öffnen	`workbench.action.terminal.new`	❌ Nein

Aufgaben

VSCode Extension: Claude Bridge
- Neues Extension-Projekt erstellen
- WebSocket-Server für Kommunikation mit Claude Desktop
- Command-Executor: VSCode Commands ausführen
- LSP-Bridge: Language Server Anfragen weiterleiten
- Status-Reporter: Was ist gerade offen? Wo ist Cursor?
Claude Desktop: IDE-Connector
- src-tauri/src/ide.rs — Verbindung zur Extension
- connectToIDE() — WebSocket zu VSCodium
- executeIDECommand(command, args) — Befehl ausführen
- getLSPInfo(file, position) — Semantische Infos
Neue Tools für Claude
- IDE.openFile(path) — Datei im Editor öffnen
- IDE.goToLine(path, line) — Zu Zeile springen
- IDE.formatDocument() — Formatieren
- IDE.rename(oldName, newName) — Refactoring
- IDE.findReferences(symbol) — Alle Verwendungen
- IDE.startDebug(config) — Debugger starten
- IDE.gitCommit(message) — Via Git-Panel
UI: IDE-Status anzeigen
- Verbindungsstatus zu VSCodium
- Aktuell offene Datei
- Cursor-Position

Warum NICHT Computer Use?

Aspekt	Computer Use	Extension Commands
Geschwindigkeit	Langsam (Screenshots)	Sofort
Zuverlässigkeit	Fehleranfällig	100% präzise
Maus blockiert?	Ja	Nein
Kosten	Hoch (viele API-Calls)	Minimal
Extra Display?	Ja (oder VM)	Nein

Verifikation

# Claude Desktop starten, VSCodium starten
# In Claude: "Öffne die Datei src/lib.rs"
# → VSCodium öffnet die Datei, DU kannst weiter tippen
# In Claude: "Formatiere das Dokument"
# → Code wird formatiert, ohne dass du was tust

Phase 14: Programm-Steuerung (Nicht nur IDE!)

Das Problem

Terminal ist ein Flaschenhals für:

GUI-Programme (Dolibarr im Browser, Systemeinstellungen)
Visuelle Aufgaben (Screenshots prüfen, UI testen)
Programme ohne CLI (viele Desktop-Apps)

Lösungs-Stack (je nach Programm-Typ)

┌────────────────────────────────────────────────────────────────┐
│  PROGRAMM-TYP           │  STEUERUNG                           │
├────────────────────────────────────────────────────────────────┤
│  VSCodium/IDE           │  Extension Commands (Phase 13)       │
│  Browser/Web-Apps       │  Playwright MCP ← Dolibarr!          │
│  Terminal/CLI           │  Bash (bereits vorhanden)            │
│  Native Linux-Apps      │  D-Bus + XDG-Portals                 │
│  Alles andere           │  Computer Use (separates Display)    │
└────────────────────────────────────────────────────────────────┘

Priorität 1: Playwright für Web-Apps (Dolibarr!)

Der Playwright MCP-Server ist bereits konfiguriert! Damit kann Claude:

Aktion	Playwright-Tool	Use Case
Seite öffnen	`browser_navigate`	Dolibarr aufrufen
Element klicken	`browser_click`	Buttons, Links
Formular ausfüllen	`browser_fill_form`	Daten eingeben
Screenshot	`browser_take_screenshot`	UI prüfen
Warten	`browser_wait_for`	Auf Ladezeit warten
Snapshot (DOM)	`browser_snapshot`	Struktur analysieren

Vorteil: Läuft im Hintergrund, blockiert NICHT deine Maus!

Priorität 2: D-Bus für Linux-Apps

Viele Linux-Programme sind über D-Bus steuerbar:

# Beispiele
dbus-send --session --dest=org.kde.dolphin ...  # Dateimanager
dbus-send --session --dest=org.kde.kate ...     # Kate Editor
qdbus org.freedesktop.Notifications ...         # Benachrichtigungen

Priorität 3: Computer Use (Notfall-Option)

Für Programme die KEINE API/CLI/D-Bus haben:

┌─────────────────────────────────────────────────────────────┐
│  LÖSUNG: Separates Display (:1)                              │
│                                                              │
│  Display :0 (Haupt)     │  Display :1 (Claude)              │
│  ├─ Dein Desktop        │  ├─ Xvfb (virtuell)               │
│  ├─ Deine Maus ✓        │  ├─ Claude steuert                │
│  └─ Kein Konflikt       │  └─ VNC-Zugang optional           │
│                                                              │
│  Du arbeitest normal    │  Claude bedient GUI-Programme     │
└─────────────────────────────────────────────────────────────┘

Aufgaben

Playwright Integration aktivieren
- MCP-Server ist bereits da → Tools verfügbar machen
- Dolibarr-Login automatisieren (Session merken)
- UI in App: Browser-Aktionen anzeigen
D-Bus Modul
- src-tauri/src/dbus.rs (NEU)
- list_dbus_services() — Was ist verfügbar?
- call_dbus_method(service, path, method, args)
- Wrapper für häufige Aktionen (Dolphin, Kate)
Computer Use (separates Display)
- src-tauri/src/xdisplay.rs (NEU)
- start_virtual_display() — Xvfb auf :1 starten
- capture_display(display_num) — Screenshot
- send_input(display_num, action) — Maus/Tastatur
- VNC-Server optional für Monitoring
UI: Programm-Steuerung Panel
- Browser-View (Playwright-Screenshots)
- D-Bus Services auflisten
- Computer-Use Display einbetten (VNC-Widget)
- Toggle: "Zeige was Claude gerade bedient"

Entscheidungsbaum für Claude

Aufgabe erhalten
     │
     ├─ Ist es eine Web-App? ────────────→ Playwright
     │
     ├─ Ist es VSCodium/IDE? ────────────→ Extension Commands
     │
     ├─ Hat das Programm CLI? ───────────→ Terminal/Bash
     │
     ├─ Hat das Programm D-Bus? ─────────→ D-Bus
     │
     └─ Alles andere ────────────────────→ Computer Use (Display :1)

Verifikation

# Test: Playwright
# Claude: "Öffne Dolibarr und zeige mir die offenen Rechnungen"
# → Browser öffnet, navigiert, Screenshot im App

# Test: D-Bus
# Claude: "Öffne Dolphin im Ordner ~/Downloads"
# → Dolphin öffnet sich mit dem Ordner

# Test: Computer Use
# Claude: "Öffne LibreOffice und erstelle ein Dokument"
# → Display :1 zeigt LibreOffice, VNC optional zum Zuschauen

Phase 15: Präsentations- & Schulungsmodus (Lehrer-Modus)

Das Ziel

Claude als Lehrer — erklärt, visualisiert, programmiert langsam und nachvollziehbar.

┌─────────────────────────────────────────────────────────────────┐
│  NORMALER MODUS              │  SCHULUNGSMODUS                  │
│  • Claude arbeitet schnell   │  • Claude erklärt jeden Schritt  │
│  • Ergebnis im Chat          │  • Visualisierungen live         │
│  • Effizient                 │  • Code wird "getippt"           │
│                              │  • Pause/Play jederzeit          │
│                              │  • Geschwindigkeit einstellbar   │
└─────────────────────────────────────────────────────────────────┘

Features

1. Präsentationsfenster

Separates Fenster (oder Panel) für Visualisierungen:

┌─────────────────────────────────────────────────────────────────┐
│  Präsentation                                        [─][□][×]  │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│         ┌─────────┐                                            │
│         │ Thema   │                                            │
│         └────┬────┘                                            │
│      ┌───────┼───────┐                                         │
│      ▼       ▼       ▼                                         │
│  ┌───────┐ ┌───────┐ ┌───────┐                                │
│  │Punkt 1│ │Punkt 2│ │Punkt 3│    ← Live Mindmap              │
│  └───────┘ └───────┘ └───────┘                                │
│                                                                 │
├─────────────────────────────────────────────────────────────────┤
│  ◀◀  ▶ Pause  ▶▶  │  Geschwindigkeit: [████░░░░] 60%  │ 📢 TTS │
└─────────────────────────────────────────────────────────────────┘

2. Visualisierungs-Typen

Typ	Technologie	Use Case
Mindmap	Mermaid.js	Konzepte erklären
Flowchart	Mermaid.js	Programmablauf
Sequenzdiagramm	Mermaid.js	API-Calls, Prozesse
Code	Monaco Editor	Live Coding
Architektur	Mermaid/D3.js	System-Übersicht
Freihand	Excalidraw	Skizzen
Terminal	xterm.js	Befehle zeigen

3. Animiertes Coding

Claude "tippt" Code langsam — wie ein Mensch:

// Geschwindigkeit einstellbar: 30-200 WPM
function animateCode(code: string, wpm: number) {
  const charDelay = 60000 / (wpm * 5); // ~5 Zeichen/Wort
  for (const char of code) {
    await sleep(charDelay);
    appendChar(char);
    highlightLine(currentLine);
  }
}

Features:

Syntax-Highlighting während des Tippens
Cursor-Animation
Zeile wird hervorgehoben
Erklärung erscheint parallel (Chat oder TTS)

4. Erklär-Modus

Claude erklärt während er arbeitet:

┌─ Code-Panel ──────────────┬─ Erklärung ─────────────────────────┐
│                           │                                      │
│  function add(a, b) {     │  "Ich definiere eine Funktion       │
│    return a + b; ← cursor │   namens 'add' mit zwei Parametern. │
│  }                        │   Diese gibt die Summe zurück."     │
│                           │                                      │
│                           │  [🔊 Vorlesen]                       │
└───────────────────────────┴──────────────────────────────────────┘

5. Interaktive Elemente

Pause — Jederzeit anhalten
Zurück — Letzten Schritt wiederholen
Frage stellen — Unterbricht Präsentation
Geschwindigkeit — Slider (langsam ↔ schnell)
TTS ein/aus — Sprachausgabe toggle
Vollbild — Für Präsentationen

Schulungs-Modi

┌─────────────────────────────────────────────────────────────────┐
│  MODUS: ERKLÄRER                                                │
│  Claude erklärt ein Konzept mit Visualisierungen                │
│  "Erkläre mir wie async/await funktioniert"                     │
│  → Mindmap + Flowchart + Code-Beispiele                         │
├─────────────────────────────────────────────────────────────────┤
│  MODUS: LIVE CODING                                             │
│  Claude programmiert langsam und erklärt jeden Schritt          │
│  "Zeig mir wie man einen REST-API-Client baut"                  │
│  → Code wird getippt, jede Zeile erklärt                        │
├─────────────────────────────────────────────────────────────────┤
│  MODUS: WALKTHROUGH                                             │
│  Claude führt durch existierenden Code                          │
│  "Erkläre mir diese Datei"                                      │
│  → Code wird Zeile für Zeile durchgegangen                      │
├─────────────────────────────────────────────────────────────────┤
│  MODUS: KONFIGURATION                                           │
│  Claude erklärt Config-Dateien                                  │
│  "Erkläre mir die nginx.conf"                                   │
│  → Optionen werden einzeln erklärt + visualisiert               │
└─────────────────────────────────────────────────────────────────┘

Aufgaben

Präsentationsfenster
- Neues Tauri-Window für Präsentation
- Kann neben Hauptfenster existieren
- Steuerleiste (Play/Pause/Speed)
- Vollbild-Toggle
Mermaid.js Integration
- src/lib/components/MermaidDiagram.svelte
- Live-Rendering von Diagrammen
- Animierte Knoten-Hinzufügung
- Zoom und Pan
Animiertes Code-Panel
- src/lib/components/AnimatedCode.svelte
- Monaco Editor mit Tipp-Animation
- Geschwindigkeits-Kontrolle
- Zeilen-Highlighting
- Cursor-Animation
Erklär-System
- Claude generiert Erklärungen parallel zum Code
- Synchronisation: Code-Position ↔ Erklärung
- Optional: TTS für Erklärungen (Phase 10)
Schulungs-Prompts
- Spezieller System-Prompt für Lehrer-Modus
- "Du bist ein geduldiger Lehrer. Erkläre jeden Schritt."
- Strukturierte Ausgabe: {code, explanation, visualization}
UI: Modus-Wechsel
- Button: "Schulungsmodus aktivieren"
- Oder: "Erkläre mir das" Button bei jeder Antwort
- Settings: Standard-Geschwindigkeit, TTS an/aus
Excalidraw-ähnliche Skizzen
- Für Freihand-Diagramme
- Claude kann "zeichnen" (Koordinaten → Shapes)
- Export als PNG/SVG

Beispiel-Ablauf

User: "Erkläre mir wie Git Branches funktionieren"

Claude (Schulungsmodus):

Mindmap erscheint:

mindmap
  root((Git Branches))
    Was ist ein Branch?
      Zeiger auf Commit
      Leichtgewichtig
    Warum Branches?
      Parallele Entwicklung
      Features isolieren
    Befehle
      git branch
      git checkout
      git merge

Code-Animation:

# Neuen Branch erstellen
git branch feature-login  ← tippt langsam

# Zum Branch wechseln
git checkout feature-login

Erklärung (parallel):

"Ein Branch ist wie ein paralleles Universum für deinen Code. Du kannst Änderungen machen ohne den Hauptcode zu beeinflussen..."

Flowchart:

gitGraph
  commit id: "Initial"
  branch feature-login
  commit id: "Login-Form"
  checkout main
  commit id: "Hotfix"
  merge feature-login

Verifikation

# Test: Schulungsmodus aktivieren
# "Erkläre mir Promises in JavaScript"
# → Präsentationsfenster öffnet sich
# → Mindmap erscheint animiert
# → Code wird langsam getippt
# → Erklärungen synchron angezeigt
# → Pause funktioniert
# → Geschwindigkeit änderbar

Phase 16: System-Monitor (Debug-Panel) ✅ ERLEDIGT

Commit: adb11fd (14.04.2026)

Das Ziel

Echtzeit-Einblick was im Hintergrund passiert — vom Programm generiert, NICHT von der KI!

┌─────────────────────────────────────────────────────────────────┐
│  System-Monitor                                    [Filter ▼]   │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  14:32:01.234  🔵 API    → claude-3-opus  [1.2s]  2.4k tok     │
│  14:32:02.891  🟢 HOOK   SessionStart fired                     │
│  14:32:03.012  🟡 TOOL   Read src/lib.rs (245 lines)            │
│  14:32:03.456  🔵 API    ← Response streaming...                │
│  14:32:04.123  🟡 TOOL   Grep "handleError" (3 matches)         │
│  14:32:04.567  🟣 MCP    playwright.browser_navigate            │
│  14:32:05.234  🔴 ERROR  Connection timeout (retry 1/3)         │
│  14:32:05.890  🟢 HOOK   PreToolUse → injected 2 hints          │
│                                                                 │
├─────────────────────────────────────────────────────────────────┤
│  ▶ Details: API Request claude-3-opus                    [Copy] │
│  ┌─────────────────────────────────────────────────────────────┐│
│  │ Model: claude-3-opus-20240229                               ││
│  │ Input: 12,456 tokens                                        ││
│  │ Output: 2,341 tokens                                        ││
│  │ Cost: $0.42                                                 ││
│  │ Latency: 1,234ms (first token: 234ms)                       ││
│  │ System Prompt: 2,100 tokens                                 ││
│  │ Context: Session abc123, Turn 5                             ││
│  └─────────────────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────────────────┘

Event-Typen (Farbcodiert)

Farbe	Typ	Was wird geloggt
🔵 Blau	API	Requests/Responses zu Claude API
🟢 Grün	HOOK	Hook-Ausführungen (SessionStart, PreTool, etc.)
🟡 Gelb	TOOL	Tool-Aufrufe (Read, Grep, Edit, Bash)
🟣 Lila	MCP	MCP-Server Kommunikation
🟠 Orange	AGENT	Subagent Start/Stop/Delegation
🔴 Rot	ERROR	Fehler, Timeouts, Retries
⚪ Grau	DEBUG	Interne Events (optional)

Zwei Ansichten

1. Kompakt-Ansicht (Standard)

Eine Zeile pro Event:

14:32:01  🔵 API  → claude-3-opus [1.2s] 2.4k tok

2. Detail-Ansicht (Klick auf Event)

Vollständige Informationen:

{
  "type": "api_request",
  "timestamp": "2026-04-14T14:32:01.234Z",
  "model": "claude-3-opus-20240229",
  "input_tokens": 12456,
  "output_tokens": 2341,
  "latency_ms": 1234,
  "first_token_ms": 234,
  "cost_usd": 0.42,
  "session_id": "abc123",
  "turn": 5,
  "tools_available": ["Read", "Edit", "Bash", ...],
  "system_prompt_tokens": 2100
}

Was wird geloggt?

API-Events

Request gesendet (Modell, Token-Schätzung)
Streaming gestartet
Response komplett (Token, Kosten, Latenz)
Errors (Rate Limit, Timeout, etc.)

Hook-Events

Hook Name + Zeitpunkt
Payload (gekürzt)
Ergebnis (injizierte Hints, blockiert, etc.)
Dauer

Tool-Events

Tool-Name + Parameter (gekürzt)
Ergebnis-Zusammenfassung
Dauer
Fehler wenn vorhanden

MCP-Events

Server-Name
Tool/Resource aufgerufen
Parameter + Ergebnis
Verbindungsstatus

Agent-Events

Agent gestartet (ID, Typ, Parent)
Agent beendet (Tokens verbraucht)
Delegation (von → an)

Implementiert

✅ Event-System (Frontend)
- src/lib/stores/app.ts — MonitorEvent Interface, Stores
- Ringbuffer (max 1000 Events) im Frontend
- Derived Stores für Stats und Filter
✅ API-Interceptor
- scripts/claude-bridge.js erweitert
- sendMonitorEvent() für alle Event-Typen
- Token, Kosten, Latenz geloggt
- summarizeToolInput() für kompakte Tool-Logs
✅ Tool-Logger
- Automatisch bei tool-start / tool-end
- Parameter geloggt (gekürzt)
- maskSensitive() für Passwörter, API-Keys
✅ UI: Monitor-Panel
- src/lib/components/MonitorPanel.svelte
- Farbcodierte Event-Liste (🔵🟢🟡🟣🟠🔴⚪)
- Filter-Dropdown nach Typ
- Auto-Scroll (toggle)
- Detail-Ansicht bei Klick
- Copy-Button für JSON
- Stats-Anzeige (Events, API-Calls, Errors, Latenz)

Nachträglich implementiert

✅ Log-Export — JSON/Text Download Buttons (88f2d22)
✅ Live Token-Anzeige — Im Chat-Header mit Farbcodierung (84dc806)
✅ Backend-Persistierung — SQLite für Monitor-Events (9d73684)
- monitor_events Tabelle mit Auto-Cleanup (7 Tage)
- CRUD-Methoden + Tauri Commands
- Frontend lädt Events beim Start, speichert bei neuen Events
✅ Performance-Metriken — Kosten-Tracker + Statistiken (6b8f281)
- PerformancePanel.svelte mit Kosten, Token, Latenz
- Neuer Tab "📈 Kosten" im mittleren Panel
- Latenz-Verteilung (Min, P50, P95, Max)
- Session-Vergleich

Alle Phase 16 Features implementiert!

Sensitive Daten maskieren!

function maskSensitive(data: string): string {
  return data
    .replace(/password[=:]\s*\S+/gi, 'password=***')
    .replace(/api[_-]?key[=:]\s*\S+/gi, 'api_key=***')
    .replace(/bearer\s+\S+/gi, 'Bearer ***')
    .replace(/sk-[a-zA-Z0-9]+/g, 'sk-***');
}

Datenstruktur

interface MonitorEvent {
  id: string;
  timestamp: Date;
  type: 'api' | 'hook' | 'tool' | 'mcp' | 'agent' | 'error' | 'debug';

  // Kompakt-Ansicht
  summary: string;  // "→ claude-3-opus [1.2s] 2.4k tok"

  // Detail-Ansicht
  details: {
    // Je nach Typ unterschiedlich
    [key: string]: any;
  };

  // Metadaten
  session_id?: string;
  agent_id?: string;
  duration_ms?: number;
  error?: string;
}

SQLite-Schema (optional für Persistierung)

CREATE TABLE monitor_events (
  id TEXT PRIMARY KEY,
  timestamp TEXT NOT NULL,
  type TEXT NOT NULL,
  summary TEXT NOT NULL,
  details JSON,
  session_id TEXT,
  agent_id TEXT,
  duration_ms INTEGER,
  error TEXT,

  INDEX idx_timestamp (timestamp),
  INDEX idx_type (type),
  INDEX idx_session (session_id)
);

-- Automatisch alte Events löschen (> 7 Tage)
CREATE TRIGGER cleanup_old_events
AFTER INSERT ON monitor_events
BEGIN
  DELETE FROM monitor_events
  WHERE timestamp < datetime('now', '-7 days');
END;

Verifikation

# Test: Monitor-Panel öffnen
# Nachricht senden → Events erscheinen live
# 🔵 API Request/Response sichtbar
# 🟡 Tool-Aufrufe sichtbar
# Auf Event klicken → Details erscheinen
# Filter auf "ERROR" → nur Fehler sichtbar
# Export → JSON-Datei mit allen Events

Nicht geplant / Zukunft

MCP-Server Integration in App
Plugin-System
Multi-User / Team-Features
Cloud-Sync zwischen Geraten

Technische Schulden

Dead Code in memory.rs (MemorySystem struct ungenutzt)
Warnings bei cargo check beheben
TypeScript strict mode aktivieren
E2E Tests mit Playwright
CI/CD Pipeline (Forgejo Runner)

Build & Entwicklung

# Entwicklung
cd "/mnt/17 - Entwicklungen/20 - Projekte/ClaudeDesktop"
CARGO_TARGET_DIR=/tmp/claude-desktop-target nix-shell --run "npx tauri dev"

# Produktion (AppImage)
CARGO_TARGET_DIR=/tmp/claude-desktop-target nix-shell --run "npx tauri build"

Commits Ubersicht

Datum	Commit	Beschreibung
13.04.2026	Initial	Grundgerust
13.04.2026	Phase 2	Claude SDK + Events
13.04.2026	Phase 3	SQLite, Guard-Rails, Bridge
13.04.2026	Phase 4	Tabs, Markdown, UI
14.04.2026	`433e2de`	Modell-Auswahl
14.04.2026	`4ba14a5`	Session-Historie
14.04.2026	`9129163`	Titlebar aufgeraumt
14.04.2026	`3c6da3b`	Tray-Icon
14.04.2026	`6cfcdb2`	Phase 5: Subagent-Hierarchie
14.04.2026	`adb11fd`	Phase 16: System-Monitor
14.04.2026	`9d837ef`	Phase 7: UI Code-Copy, Edit, Regenerate
14.04.2026	`abaf4eb`	Phase 6: Session-Management, Auto-Load, Compacting
14.04.2026	`e6bd0de`	Phase 8: Claude-DB Integration, KnowledgePanel
14.04.2026	`eb91e54`	Phase 9: Context-Management, ContextPanel
14.04.2026	`2653b4f`	Bridge-Context Integration, DiffView, FilePreview
14.04.2026	`56eb2f5`	Keyboard Shortcuts + "Das merken" Button
14.04.2026	`ab95af2`	Token-basiertes Compacting mit Dialog
14.04.2026	`84dc806`	Live Token-Anzeige im Chat-Header
14.04.2026	`88f2d22`	Log-Export im Monitor-Panel
14.04.2026	`9d73684`	Monitor-Events Backend-Persistierung
14.04.2026	`6b8f281`	Performance-Panel (Kosten-Tracker, Statistiken)

45 KiB Raw Blame History Unescape Escape

Claude Desktop — Roadmap

Aktueller Status

Implementiert (Phase 1-4)

Phase 5: Subagent-Hierarchie ✅ ERLEDIGT

Implementiert

Phase 6: Session-Management Verbesserungen ✅ ERLEDIGT

Implementiert

Nachträglich implementiert

Noch offen (niedrigere Priorität)

Phase 7: UI-Verbesserungen ✅ ERLEDIGT

Implementiert

Nachträglich implementiert

Phase 8: Claude-DB Integration ✅ ERLEDIGT

Problem

Ziel

Implementiert

Nachträglich implementiert

Noch offen (niedrigere Priorität)

Verifikation

Phase 9: Intelligentes Context-Management ✅ ERLEDIGT

Das Problem: Context-Verlust nach Compacting

Lösung: Drei-Schichten-Gedächtnis

Implementiert

Nachträglich implementiert

Noch offen (niedrigere Priorität)

Verifikation

Phase 10: Sprach-Interface (Optional)

Technologie-Stack

Aufgaben

Aufwand

Phase 11: Multi-Agent-Architektur (Context-Einsparung)

Die drei Agent-Modi (einstellbar!)

Wann welcher Modus?

Automatische Modus-Wahl (optional)

Agent-Typen (für Modus B+C)

Aufgaben

Verifikation

Phase 12: Hook-System für Automatisierung

Konzept

Aufgaben

Verifikation

Claude-DB Schema-Erweiterungen

Phase 13: VSCodium Integration (IDE-Steuerung)

Das Ziel

Architektur

Was Claude damit kann

Aufgaben

Warum NICHT Computer Use?

Verifikation

Phase 14: Programm-Steuerung (Nicht nur IDE!)

Das Problem

Lösungs-Stack (je nach Programm-Typ)

Priorität 1: Playwright für Web-Apps (Dolibarr!)

Priorität 2: D-Bus für Linux-Apps

Priorität 3: Computer Use (Notfall-Option)

Aufgaben

Entscheidungsbaum für Claude

Verifikation

Phase 15: Präsentations- & Schulungsmodus (Lehrer-Modus)

Das Ziel

Features

1. Präsentationsfenster

2. Visualisierungs-Typen

3. Animiertes Coding

4. Erklär-Modus

5. Interaktive Elemente

Schulungs-Modi

Aufgaben

Beispiel-Ablauf

Verifikation

Phase 16: System-Monitor (Debug-Panel) ✅ ERLEDIGT

Das Ziel

Event-Typen (Farbcodiert)

Zwei Ansichten

1. Kompakt-Ansicht (Standard)

2. Detail-Ansicht (Klick auf Event)

Was wird geloggt?

API-Events

Hook-Events

45 KiB

Raw Blame History