0a447591da
All checks were successful
Build AppImage / build (push) Successful in 7m51s
- KB-Hints werden automatisch in jeden Claude-Prompt injiziert - SQL-Queries berücksichtigen jetzt Priority (DESC) - Voice-zu-Claude-Pipeline: Sprache → Transkription → Claude → TTS - Hook-System feuert echte Events (SessionStart, Pre/PostToolUse) - Pattern-Detektion bei Tool-Fehlern aktiviert - Slash-Command Autocomplete mit CommandPalette - Updater abgesichert: Lock-Datei, Prozess-Guard, Bestätigungs-Dialog - ROADMAP.md und CHANGELOG.md aktualisiert Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1434 lines
54 KiB
Markdown
1434 lines
54 KiB
Markdown
# Claude Desktop — Roadmap
|
||
|
||
Stand: 20.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 |
|
||
| **Multi-Agent-Modi (Phase 11 — Basis)** | ✅ | 14.04.2026 |
|
||
| **Multi-Agent-Ausbau (Phase 11 — Vollendung)** | ✅ | 14.04.2026 |
|
||
| **Hook-System (Phase 12)** | ✅ | 14.04.2026 |
|
||
| **VSCodium-Integration (Phase 13)** | ✅ | 14.04.2026 |
|
||
| **Programm-Steuerung (Phase 14)** | ✅ | 14.04.2026 |
|
||
| **Schulungsmodus (Phase 15)** | ✅ | 14.04.2026 |
|
||
| **Aktivierung & Quick-Wins (Phase 1.5)** | ✅ | 20.04.2026 |
|
||
|
||
### Phase 1.5: Aktivierung & Quick-Wins ✅ ERLEDIGT (20.04.2026)
|
||
|
||
| Feature | Status | Datei(en) |
|
||
|---------|--------|-----------|
|
||
| SQL Priority-Fix: KB-Queries mit `priority DESC` | ✅ | `knowledge.rs` |
|
||
| KB-Hints in Claude-Prompt: Relevante Wissensbasis-Einträge automatisch injiziert | ✅ | `claude.rs`, `knowledge.rs` |
|
||
| Voice → Claude → TTS: `sendToClaudeWithTts()` Pipeline | ✅ | `VoicePanel.svelte` |
|
||
| Hook-System aktiviert: SessionStart, PreToolUse, PostToolUse feuern echte Events | ✅ | `hooks.rs`, `events.ts` |
|
||
| Pattern-Detektion: Tool-Fehler gegen bekannte Patterns prüfen | ✅ | `events.ts` |
|
||
| Slash-Command Autocomplete: `/`-Eingabe zeigt Dropdown | ✅ | `commands.rs`, `CommandPalette.svelte`, `ChatPanel.svelte` |
|
||
| Updater-Absicherung: Lock-Datei, Prozess-Guard, Graceful Shutdown, Bestätigungsdialog | ✅ | `update.rs`, `lib.rs`, `UpdateDialog.svelte` |
|
||
|
||
---
|
||
|
||
## 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) ✅ ERLEDIGT
|
||
|
||
> **Basis-Implementierung:** 14.04.2026 (Tool-Filterung + Persistenz + UI-Badge)
|
||
|
||
### Implementiert (Basis)
|
||
|
||
- ✅ **Bridge: Tool-Filterung je Modus** (`scripts/claude-bridge.js`)
|
||
- Handlanger: `allowedTools = ['Task', 'TodoWrite']` — erzwingt Delegation
|
||
- Experten: `allowedTools = ['Task', 'TodoWrite', 'Read', 'Grep', 'Glob']` — darf sondieren, nicht schreiben
|
||
- Solo/Auto: keine Einschränkung
|
||
- ✅ **Backend: Mode-Persistenz beim Bridge-Start** (`claude.rs`)
|
||
- Gespeicherter Modus wird nach `bridge-ready` automatisch gesetzt
|
||
- `agent_mode` Setting in SQLite
|
||
- ✅ **Generische Event-Weiterleitung** (`claude.rs`)
|
||
- Unbekannte Bridge-Events werden automatisch ans Frontend emit'et
|
||
- Löst `subagent-started`, `monitor-event`, `mode-changed` etc.
|
||
- ✅ **UI: Modus-Badge im Footer** (`+layout.svelte`)
|
||
- Farbcodiert: 👷 Handlanger (orange), 🎓 Experten (lila), 🤖 Auto (cyan)
|
||
- ✅ **Frontend: mode-changed Listener** (`events.ts`)
|
||
- Badge aktualisiert sich bei Modus-Wechsel live
|
||
|
||
### Ausbau-Implementierung (14.04.2026)
|
||
|
||
- ✅ **AUTO-Modus Keyword-Heuristik** (`chooseAutoMode()` in Bridge)
|
||
- < 80 Zeichen → solo
|
||
- "implementiere/refactor/baue…" → experten
|
||
- "lies/suche/finde/analysiere…" + > 120 Zeichen → handlanger
|
||
- > 300 Zeichen ohne klare Keywords → handlanger (safer default)
|
||
- Sendet `auto-mode-chosen` Event ans Frontend
|
||
- ✅ **Custom Sub-Agent-Definitionen via SDK `agents` Option**
|
||
- **Handlanger**: Sub-Agent "worker" auf **Haiku** — nur Ausführung, max 500 Tokens Rückmeldung
|
||
- **Experten**: 4 autonome Agents
|
||
- `research` — Code/Docs durchsuchen (Read, Grep, Glob, Bash)
|
||
- `implement` — Code schreiben nach Best-Practices (volle Tools)
|
||
- `test` — Testfälle wählen und ausführen (volle Tools)
|
||
- `review` — Code prüfen auf Qualität/Sicherheit (read-only)
|
||
- Experten erben Modell (`model: 'inherit'`), Handlanger nutzt explizit Haiku
|
||
- ✅ **AgentView: Delegations-Badge**
|
||
- Bei Sub-Agent-Knoten wird der aktuelle Delegations-Modus farbcodiert angezeigt
|
||
- 👷 Handlanger (orange), 🎓 Experten (lila), 🤖 Auto (cyan)
|
||
- ✅ **Orchestrator-Prompts angepasst**
|
||
- Verweisen explizit auf `subagent_type` der verfügbaren Custom Agents
|
||
- Anweisung: Formuliere WAS (Experten) oder EXAKT WIE (Handlanger)
|
||
|
||
### Alle Phase 11 Features implementiert!
|
||
|
||
### 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 ✅ ERLEDIGT
|
||
|
||
> **Implementiert:** 14.04.2026
|
||
|
||
### Implementiert
|
||
- ✅ `src-tauri/src/hooks.rs` — HookManager mit Event-Registry + Ausführungs-Log
|
||
- ✅ HookEvent Enum: SessionStart, PreToolUse, PostToolUse, BeforeCompacting, AfterCompacting, ContextFailure, AgentStarted
|
||
- ✅ 5 Built-in Hooks: load-sticky-context, inject-knowledge-hints, save-failure-pattern, extract-critical-context, reinject-context
|
||
- ✅ Tauri-Commands: list_hooks, set_hook_enabled, get_hook_executions, fire_hook
|
||
- ✅ Event `hook-fired` ans Frontend
|
||
- ✅ HooksPanel.svelte im Rechts-Panel (🪝 Hooks Tab)
|
||
- Hooks gruppiert nach Event
|
||
- Ein/Aus-Toggle pro Hook
|
||
- Live Ausführungs-Log (50 Einträge)
|
||
|
||
### ⏸ Detail
|
||
|
||
### 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) ✅ ERLEDIGT
|
||
|
||
> **Implementiert:** 14.04.2026
|
||
|
||
### Implementiert
|
||
- ✅ **VSCode Extension** unter `vscode-extension/`
|
||
- WebSocket-Server auf Port 7890 (nur 127.0.0.1)
|
||
- Commands: ping, openFile, goToLine, formatDocument, findInFiles, openTerminal, getStatus, executeCommand
|
||
- Status-Bar Anzeige im Editor
|
||
- Auto-Connect konfigurierbar
|
||
- ✅ **src-tauri/src/ide.rs** — WebSocket-Client
|
||
- `ide_connect`, `ide_disconnect`, `ide_status`, `ide_call`
|
||
- tokio-tungstenite für WebSocket
|
||
- Pending-Requests Map für Response-Matching
|
||
- ✅ **IdePanel.svelte** — Teil von ProgramsPanel
|
||
- Verbindungsstatus + Port-Konfiguration
|
||
- Zeigt aktive Datei + Cursor-Zeile live
|
||
- Ping-Test Button
|
||
|
||
### Setup (einmalig)
|
||
```bash
|
||
cd vscode-extension
|
||
npm install
|
||
npm run compile
|
||
# Dann in VSCodium: F5 für Extension Development Host
|
||
```
|
||
|
||
### ⏸ Detail
|
||
|
||
### 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!) ✅ ERLEDIGT
|
||
|
||
> **Implementiert:** 14.04.2026
|
||
|
||
### Implementiert
|
||
- ✅ **src-tauri/src/programs.rs** — 3-teiliges Modul
|
||
- **D-Bus**: `dbus_call(service, path, method, args)` + `dbus_list_services()`
|
||
- **Xvfb**: `xvfb_start/stop/status` + `xvfb_screenshot` via scrot
|
||
- **Playwright-Info**: Verweis auf MCP-Server für Browser-Automation
|
||
- ✅ **ProgramsPanel.svelte** — Tab im Mittel-Panel (🖥️ Programme)
|
||
- 4 Section-Tabs: VSCodium / Playwright / D-Bus / Xvfb
|
||
- D-Bus Service-Liste mit Live-Abruf
|
||
- Xvfb-Start/Stop + Screenshot-Anzeige
|
||
- ✅ **IdePanel** eingebettet in Programme-Tab
|
||
|
||
### ⏸ Detail
|
||
|
||
### 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) ✅ ERLEDIGT
|
||
|
||
> **Implementiert:** 14.04.2026
|
||
|
||
### Implementiert
|
||
- ✅ **src-tauri/src/teaching.rs** — öffnet separates Webview-Fenster
|
||
- Tauri-Commands: `presentation_open/close/send_slide/clear`
|
||
- Events `presentation-slide` + `presentation-clear`
|
||
- ✅ **Route `/presentation/+page.svelte`** — eigenes Fenster
|
||
- Slide-Navigation (←/→/Space)
|
||
- Geschwindigkeits-Slider (60-400 WPM)
|
||
- Play/Pause-Steuerung
|
||
- ✅ **MermaidDiagram.svelte** — Live-Rendering mit dark theme
|
||
- Dynamischer `import('mermaid')` zur Laufzeit
|
||
- Fehleranzeige bei Parse-Fehlern
|
||
- ✅ **AnimatedCode.svelte** — Tipp-Animation
|
||
- Konfigurable WPM (Wörter pro Minute)
|
||
- Play/Pause/Reset/Skip Controls
|
||
- Blinkender Cursor während Animation
|
||
- ✅ **🎓 Button in der Titelbar** — öffnet Präsentationsfenster
|
||
- ✅ **Capabilities** um `core:webview:allow-create-webview-window` erweitert
|
||
|
||
### Voraussetzung
|
||
```bash
|
||
npm install # wegen neuer mermaid dependency
|
||
```
|
||
|
||
### ⏸ Detail
|
||
|
||
### 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
|
||
```
|
||
|
||
---
|
||
|
||
## In Arbeit / Geplant
|
||
|
||
### Phase 2.0: Proaktive Intelligenz (geplant)
|
||
- [ ] MySQL Pool als Managed State (Effizienz-Fix für knowledge.rs)
|
||
- [ ] Proaktive KB-Abfrage bei SessionStart
|
||
- [ ] Themen-Erkennung aus User-Nachrichten für KB-Suche
|
||
- [ ] Auto-Fehler-Pattern-Speicherung (3x gleicher Fehler → Pattern)
|
||
|
||
### Phase 2.1: Desktop-Zugriff erweitern (geplant)
|
||
- [ ] Guard-Rails in Claude-Bridge einbauen
|
||
- [ ] Desktop-Steuerung erweitern (open_application, focus_window, type_text)
|
||
- [ ] VSCodium-Extension fertigstellen (Auto-Connect, IDE-Status im Context)
|
||
|
||
### Phase 2.2: Voice fertigstellen & lokal (geplant)
|
||
- [ ] Lokales Whisper (whisper.cpp) als Fallback
|
||
- [ ] Piper-TTS lokal mit deutscher Stimme
|
||
- [ ] Vollständiger Voice-Conversation-Loop
|
||
- [ ] Mikrofon-Button im ChatPanel (Option A)
|
||
- [ ] Fullscreen Voice-Gesprächsmodus (Option B)
|
||
|
||
### Phase 2.3: UX & Polish (Zukunft)
|
||
- [ ] Globaler Voice/Text Modus-Toggle
|
||
- [ ] Voice und Chat teilen eine Session nahtlos
|
||
- [ ] Hands-free Modus
|
||
|
||
---
|
||
|
||
## 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 |
|
||
| 20.04.2026 | 3993387 | Security-Fixes + UI-Verbesserungen |
|
||
| 20.04.2026 | 506f1d3 | Auto-Updater: Package Registry + update.json |
|
||
| 20.04.2026 | 29cce7f | UI-Polish: Icon, Stop-Button, Chat-Queue, Update-Safety |
|
||
| 20.04.2026 | (wip) | **Phase 1.5:** Aktivierung & Quick-Wins |
|