claude-desktop/ROADMAP.md
Eddy f51241efa6 Phase 10 Sprach-Interface + Phase 9 Nacharbeiten
Voice (Phase 10):
- voice.rs: OpenAI Whisper (STT) + TTS Backend
- ChatPanel: Mikrofon-Button, VAD (Pause 1.5s), Live-Pegel
- SettingsPanel: OpenAI-Key Konfiguration

Phase 9 Nacharbeiten:
- Auto-Extract vor Compacting (Entscheidungen/TODOs/Insights)
- get_tool_hints() - relevante KB-Eintraege bei Tool-Start
- activeKnowledgeHints Store, Anzeige im KnowledgePanel

Tech-Schulden:
- Dead-Code in memory.rs entfernt (MemorySystem struct)
- cargo-check Warnings behoben

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-14 18:24:28 +02:00

1256 lines
46 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# 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 |
| **Sprach-Interface (Phase 10)** | ✅ | 14.04.2026 |
---
## 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)
-**Claude-Session-ID** — SDK-Fortsetzung für nahtlose Konversationen (be65dee)
- Session-ID aus claude-result Event speichern
- Bei neuen Nachrichten automatisch fortsetzen
- Bridge nutzt `sessionId` in query() Optionen
### Alle Phase 6 Features implementiert!
---
## 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)
### Nachträglich implementiert (14.04.2026)
-**Sticky Context Auto-Load** — Context wird beim App-Start automatisch geladen und an die Bridge gesendet
- `init_sticky_context` Tauri Command erstellt
- Frontend ruft Command in `+layout.svelte` auf
- Context-Status im Footer angezeigt (📌 +XXctx)
- Enthält Anzahl Einträge und Token-Schätzung
### Verifikation
```bash
# 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)
- [x] **Auto-Extraction vor Compacting** — Hook automatisch auslösen ✅ (14.04.2026)
- `performCompacting()` ruft jetzt `extract_context_before_compacting()` auf
- Entscheidungen, TODOs, Key-Insights werden vor Compacting archiviert
- [ ] **Validation** — Prüfen ob Claude den Context nutzt
- [x] **Wissens-Hints** — On-demand aus claude-db laden ✅ (14.04.2026)
- `get_tool_hints()` lädt relevante Einträge bei Tool-Start
- Intelligentes Keyword-Mapping (npm, git, docker, dolibarr, etc.)
- `activeKnowledgeHints` Store im Frontend
- Anzeige im KnowledgePanel
### Verifikation
```bash
# Context-Panel öffnen → Einträge hinzufügen
# Vorschau → <critical-context> Tags sichtbar
# Nachricht senden → Monitor zeigt "+XX ctx" Token
```
---
## Phase 10: Sprach-Interface ✅ ERLEDIGT
> **Implementiert:** 14.04.2026
### Technologie-Stack
| Komponente | Technologie | Ort |
|------------|-------------|-----|
| Speech-to-Text | OpenAI Whisper API | Cloud |
| Voice Activity Detection | Custom (Audio Level) | Browser |
| Text-to-Speech | OpenAI TTS API | Cloud |
| Audio-Capture | Web Audio API | Browser |
### Implementiert
- [x] **Whisper Integration**
- [x] OpenAI Whisper API für STT
- [x] Deutsch als Default-Sprache
- [x] Audio-Upload als multipart/form-data
- [x] **VAD (Voice Activity Detection)**
- [x] Audio-Level-basierte Stille-Erkennung
- [x] Pause > 1.5s → Aufnahme automatisch stoppen
- [x] Konfigurierbare Schwellwerte
- [x] **TTS (Text-to-Speech)**
- [x] OpenAI TTS API Integration
- [x] 6 Stimmen verfügbar (Alloy, Echo, Fable, Onyx, Nova, Shimmer)
- [x] Audio als Base64 zurückgeben
- [x] **UI**
- [x] Mikrofon-Button neben Send-Button
- [x] Echtzeit-Pegel-Anzeige (animiert)
- [x] Aufnahme-Status (pulsierend)
- [x] Live-Transkript-Anzeige
### Dateien
- `src-tauri/src/voice.rs` — Backend für STT/TTS
- `src/lib/components/ChatPanel.svelte` — UI + Audio-Capture
### Konfiguration
Benötigt `OPENAI_API_KEY` Umgebungsvariable für Whisper + TTS.
### Zukünftige Verbesserungen
- [ ] Lokales Whisper.cpp als Alternative (offline-fähig)
- [ ] Streaming-TTS für längere Texte
- [ ] Push-to-Talk Modus
---
## 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)
```javascript
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
```bash
# 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
```bash
# 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):
```sql
-- 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
```bash
# 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:
```bash
# 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
```bash
# 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:
```typescript
// 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):**
1. **Mindmap erscheint:**
```mermaid
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
```
2. **Code-Animation:**
```bash
# Neuen Branch erstellen
git branch feature-login ← tippt langsam
# Zum Branch wechseln
git checkout feature-login
```
3. **Erklärung (parallel):**
> "Ein Branch ist wie ein paralleles Universum für deinen Code.
> Du kannst Änderungen machen ohne den Hauptcode zu beeinflussen..."
4. **Flowchart:**
```mermaid
gitGraph
commit id: "Initial"
branch feature-login
commit id: "Login-Form"
checkout main
commit id: "Hotfix"
merge feature-login
```
### Verifikation
```bash
# 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:
```json
{
"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!
```typescript
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
```typescript
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)
```sql
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
```bash
# 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
- [x] Dead Code in `memory.rs` (MemorySystem struct entfernt) ✅ (14.04.2026)
- [x] Warnings bei `cargo check` beheben ✅ (14.04.2026)
- [ ] TypeScript strict mode aktivieren
- [ ] E2E Tests mit Playwright
- [ ] CI/CD Pipeline (Forgejo Runner)
---
## Build & Entwicklung
```bash
# 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) |
| 14.04.2026 | be65dee | Claude-Session-ID für SDK-Fortsetzung |