Phase 12 Hook-System (hooks.rs + HooksPanel):
- HookManager mit Event-Registry + Ausfuehrungs-Log
- 5 Built-in Hooks (SessionStart, PreToolUse, PostToolUse,
BeforeCompacting, AfterCompacting)
- Tauri-Commands: list_hooks, set_hook_enabled, get_hook_executions, fire_hook
- HooksPanel.svelte mit Live-Ausfuehrungs-Log
Phase 13 VSCodium-Integration:
- vscode-extension/: WebSocket-Server auf Port 7890
(Commands: openFile, goToLine, formatDocument, findInFiles,
openTerminal, getStatus, executeCommand, ping)
- src-tauri/src/ide.rs: WebSocket-Client via tokio-tungstenite
- IdePanel.svelte: Status, Port-Konfig, Ping-Test, Live-Anzeige aktive Datei
Phase 14 Programm-Steuerung (programs.rs + ProgramsPanel):
- D-Bus: dbus_call + dbus_list_services
- Xvfb: start/stop/status + screenshot (scrot)
- Playwright-Info (MCP-Verweis)
- ProgramsPanel mit 4 Sektionen (VSCodium, Playwright, D-Bus, Xvfb)
Phase 15 Schulungsmodus (teaching.rs + presentation/+page.svelte):
- Separates Tauri-Webview-Fenster
- MermaidDiagram.svelte (dynamic import mermaid)
- AnimatedCode.svelte mit WPM-Steuerung
- Tauri-Commands: presentation_open/close/send_slide/clear
- ð-Button in der Titelbar
- Capabilities um core:webview:allow-create-webview-window erweitert
Deps:
- Cargo: +tokio-tungstenite 0.23, +futures-util 0.3
- npm: +mermaid ^11.4.0 (npm install erforderlich)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
52 KiB
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 |
| 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 |
Phase 5: Subagent-Hierarchie â ERLEDIGT
Commit:
6cfcdb2(14.04.2026)
Implementiert
-
â scripts/claude-bridge.js â Subagent-Tracking
- Map
activeSubagentsfÃŒr Tool-ID â Agent-Info SUBAGENT_TOOLSerkennt Task/Agent Tool-Callssubagent-started/subagent-stoppedEventsparentAgentId,depth,modelim Payload
- Map
-
â src/lib/stores/app.ts â Agent mit Hierarchie
Agent.parentAgentId?: stringAgent.depth: numberbuildAgentTree()â rekursive BaumstrukturagentTreederived Store
-
â src/lib/stores/events.ts â Event-Handler
SubagentEventInterface- 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
--depthVariable - Verbindungslinien zwischen Parent/Child
- Collapse/Expand per Agent
- Typ-Icons (ð¯ Main, ð Explore, ð Plan, etc.)
- Rekursives
Phase 6: Session-Management Verbesserungen â ERLEDIGT
Commit:
abaf4eb(14.04.2026)
Implementiert
-
â Session Auto-Load bei App-Start
+layout.sveltelÀdt aktive Session inonMount- Session-Stats werden wiederhergestellt (Tokens, Kosten)
- Nachrichten aus DB geladen
-
â agent_id in messages-Tabelle
ChatMessageStruct erweitert- DB-Schema enthÀlt
agent_idSpalte DbMessageInterface 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
sessionIdin query() Optionen
Alle Phase 6 Features implementiert!
Phase 7: UI-Verbesserungen â ERLEDIGT
Commit:
9d837ef(14.04.2026)
Implementiert
-
â Code-Block mit Copy-Button
- Custom
markedRenderer fÃŒr.code-block-wrapper - Svelte action
addCopyButtonsmit MutationObserver - Sprach-Label oben links
- ð Copy-Button oben rechts
- Funktioniert auch beim Streaming
- Custom
-
â 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 AGAINSTsave_knowledge(entry)â Neuer Eintrag speichernget_knowledge(id)â Einzelnen Eintrag ladenget_knowledge_categories()â Kategorien mit Countget_recent_knowledge()â Letzte EintrÀgetest_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
- Knowledge-Modul registriert (
-
â 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_contextTauri Command erstellt- Frontend ruft Command in
+layout.svelteauf - Context-Status im Footer angezeigt (ð +XXctx)
- EnthÀlt Anzahl EintrÀge und Token-SchÀtzung
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)
StickyContextStruct (Schicht 1) â User-Info, Credentials, Projekt, RegelnProjectContextStruct (Schicht 2) â Entscheidungen, TODOs, InsightsExtractedContextâ Kontext vor Compacting extrahierenrender()Methoden fÃŒr System-Prompt-Integration- Token-SchÀtzung mit
estimate_tokens()
-
â Datenbank-Schema (SQLite)
sticky_contextTabelle (key, value, priority)compacting_archiveTabelle (Entscheidungen, TODOs, etc.)context_failuresTabelle (fÃŒr Prompt-Optimierung)
-
â Tauri-Commands
get_sticky_context()â Schicht 1 ladenset_sticky_context()â Eintrag setzenremove_sticky_context()â Eintrag löschenget_project_context()â Schicht 2 aus Archivextract_context_before_compacting()â Kritisches extrahierenlog_context_failure()â Fehler loggenget_full_context()â Kombinierter Promptlist_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 Nachrichtclaude.rs: Context automatisch aus DB laden
Noch offen (niedrigere PrioritÀt)
- Auto-Extraction vor Compacting â Hook automatisch auslösen â
(14.04.2026)
performCompacting()ruft jetztextract_context_before_compacting()auf- Entscheidungen, TODOs, Key-Insights werden vor Compacting archiviert
- Validation â PrÃŒfen ob Claude den Context nutzt
- 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.)
activeKnowledgeHintsStore im Frontend- Anzeige im KnowledgePanel
Verifikation
# 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
-
Whisper Integration
- OpenAI Whisper API fÃŒr STT
- Deutsch als Default-Sprache
- Audio-Upload als multipart/form-data
-
VAD (Voice Activity Detection)
- Audio-Level-basierte Stille-Erkennung
- Pause > 1.5s â Aufnahme automatisch stoppen
- Konfigurierbare Schwellwerte
-
TTS (Text-to-Speech)
- OpenAI TTS API Integration
- 6 Stimmen verfÃŒgbar (Alloy, Echo, Fable, Onyx, Nova, Shimmer)
- Audio als Base64 zurÃŒckgeben
-
UI
- Mikrofon-Button neben Send-Button
- Echtzeit-Pegel-Anzeige (animiert)
- Aufnahme-Status (pulsierend)
- Live-Transkript-Anzeige
Dateien
src-tauri/src/voice.rsâ Backend fÃŒr STT/TTSsrc/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
- Handlanger:
- â
Backend: Mode-Persistenz beim Bridge-Start (
claude.rs)- Gespeicherter Modus wird nach
bridge-readyautomatisch gesetzt agent_modeSetting in SQLite
- Gespeicherter Modus wird nach
- â
Generische Event-Weiterleitung (
claude.rs)- Unbekannte Bridge-Events werden automatisch ans Frontend emit'et
- Löst
subagent-started,monitor-event,mode-changedetc.
- â
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-chosenEvent ans Frontend
- â
Custom Sub-Agent-Definitionen via SDK
agentsOption- 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_typeder verfÃŒgbaren Custom Agents - Anweisung: Formuliere WAS (Experten) oder EXAKT WIE (Handlanger)
- Verweisen explizit auf
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)
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)FunktionsummarizeResult(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 â 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-firedans 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)
HookManagerStructregister_hook(event, callback)fire_hook(event, payload)
-
scripts/hooks/ (NEU)
session-start.jsâ LÀdt Projekt-Kontextpre-tool.jsâ Wissens-Hints aus claude-dbpost-tool.jsâ Fehler-Patterns speichernbefore-compacting.jsâ Kritisches extrahierenafter-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) â 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)
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 ExtensionconnectToIDE()â WebSocket zu VSCodiumexecuteIDECommand(command, args)â Befehl ausfÃŒhrengetLSPInfo(file, position)â Semantische Infos
-
Neue Tools fÃŒr Claude
IDE.openFile(path)â Datei im Editor öffnenIDE.goToLine(path, line)â Zu Zeile springenIDE.formatDocument()â FormatierenIDE.rename(oldName, newName)â RefactoringIDE.findReferences(symbol)â Alle VerwendungenIDE.startDebug(config)â Debugger startenIDE.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!) â 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_screenshotvia scrot - Playwright-Info: Verweis auf MCP-Server fÃŒr Browser-Automation
- D-Bus:
- â
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:
# 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 startencapture_display(display_num)â Screenshotsend_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) â 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
- Tauri-Commands:
- â
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
- Dynamischer
- â
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-windowerweitert
Voraussetzung
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:
// 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.jserweitertsendMonitorEvent()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
- Automatisch bei
-
â 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_eventsTabelle 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 entfernt) â (14.04.2026) - Warnings bei
cargo checkbeheben â (14.04.2026) - 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) |
| 14.04.2026 | be65dee |
Claude-Session-ID fÃŒr SDK-Fortsetzung |