claude-desktop/ROADMAP.md
Eddy 120715982b Phasen 12-15: Hooks, VSCodium-Bridge, Programm-Steuerung, Schulungsmodus
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>
2026-04-14 19:10:41 +02:00

52 KiB
Raw Blame History

Claude Desktop — Roadmap

Stand: 14.04.2026

Aktueller Status

Implementiert (Phase 1-4)

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

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

Phase 9: Intelligentes Context-Management ✅ ERLEDIGT

Commit: eb91e54 (14.04.2026)

Das Problem: Context-Verlust nach Compacting

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

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

Lösung: Drei-Schichten-GedÀchtnis

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

Implementiert

  • ✅ src-tauri/src/context.rs (NEU)

    • StickyContext Struct (Schicht 1) — User-Info, Credentials, Projekt, Regeln
    • ProjectContext Struct (Schicht 2) — Entscheidungen, TODOs, Insights
    • ExtractedContext — Kontext vor Compacting extrahieren
    • render() Methoden fÃŒr System-Prompt-Integration
    • Token-SchÀtzung mit estimate_tokens()
  • ✅ Datenbank-Schema (SQLite)

    • sticky_context Tabelle (key, value, priority)
    • compacting_archive Tabelle (Entscheidungen, TODOs, etc.)
    • context_failures Tabelle (fÃŒr Prompt-Optimierung)
  • ✅ Tauri-Commands

    • get_sticky_context() — Schicht 1 laden
    • set_sticky_context() — Eintrag setzen
    • remove_sticky_context() — Eintrag löschen
    • get_project_context() — Schicht 2 aus Archiv
    • extract_context_before_compacting() — Kritisches extrahieren
    • log_context_failure() — Fehler loggen
    • get_full_context() — Kombinierter Prompt
    • list_sticky_context() — Alle EintrÀge auflisten
  • ✅ src/lib/components/ContextPanel.svelte (NEU)

    • Sticky-Context-EintrÀge anzeigen/bearbeiten
    • Eintrags-Typen: User-Info, Regeln, Credentials, Projekt
    • PrioritÀts-Management (1=kritisch bis 4=niedrig)
    • Vorschau des gerenderten Context
    • Token-Anzeige
  • ✅ src/routes/+page.svelte

    • Neuer Tab "📌 Context" im rechten Panel

NachtrÀglich implementiert

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

Noch offen (niedrigere PrioritÀt)

  • Auto-Extraction vor Compacting — Hook automatisch auslösen ✅ (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
  • 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

# 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/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)

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

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

Agent-Typen (fÃŒr Modus B+C)

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

Aufgaben

  • scripts/claude-bridge.js

    • spawnSubAgent(type, task, maxTokens) Funktion
    • summarizeResult(result, maxTokens) — Ergebnis komprimieren
    • Orchestrator-Modus: Main Agent delegiert automatisch
  • Orchestrator-Prompt

    Du bist ein ORCHESTRATOR. Du machst NICHT selbst die Arbeit.
    FÃŒr jede Aufgabe:
    1. Analysiere was nötig ist
    2. Delegiere an passenden Sub-Agent
    3. Warte auf ZUSAMMENFASSUNG (nicht rohe Daten)
    4. Entscheide nÀchsten Schritt
    
    Sub-Agents: Research, Implement, Test, Review
    
  • Sub-Agent-Prompts

    • Research: "Fasse Ergebnisse in max 500 Token zusammen"
    • Implement: "Berichte nur: welche Dateien, was geÀndert"
    • Test: "Berichte nur: passed/failed, Fehlerursache"
  • UI: Agent-Modus Einstellung

    • Settings: Dropdown "Agent-Modus" (Solo / Handlanger / Experten / Auto)
    • "Auto" wÀhlt basierend auf Aufgaben-KomplexitÀt
    • Anzeige in Footer welcher Modus aktiv
  • UI: Agent-Delegation anzeigen

    • AgentView zeigt: Main → Sub-Agent Delegation
    • Bei Handlanger: Exakte Anweisung sichtbar
    • Bei Experten: Agent's eigene Planung sichtbar
    • Ergebnis-Zusammenfassung pro Agent

Verifikation

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

Phase 12: Hook-System fÃŒr Automatisierung ✅ 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

# 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 Extension
    • connectToIDE() — WebSocket zu VSCodium
    • executeIDECommand(command, args) — Befehl ausfÃŒhren
    • getLSPInfo(file, position) — Semantische Infos
  • Neue Tools fÃŒr Claude

    • IDE.openFile(path) — Datei im Editor öffnen
    • IDE.goToLine(path, line) — Zu Zeile springen
    • IDE.formatDocument() — Formatieren
    • IDE.rename(oldName, newName) — Refactoring
    • IDE.findReferences(symbol) — Alle Verwendungen
    • IDE.startDebug(config) — Debugger starten
    • IDE.gitCommit(message) — Via Git-Panel
  • UI: IDE-Status anzeigen

    • Verbindungsstatus zu VSCodium
    • Aktuell offene Datei
    • Cursor-Position

Warum NICHT Computer Use?

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

Verifikation

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

Phase 14: Programm-Steuerung (Nicht nur IDE!) ✅ 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:

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

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

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

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

Aufgaben

  • Playwright Integration aktivieren

    • MCP-Server ist bereits da → Tools verfÃŒgbar machen
    • Dolibarr-Login automatisieren (Session merken)
    • UI in App: Browser-Aktionen anzeigen
  • D-Bus Modul

    • src-tauri/src/dbus.rs (NEU)
    • list_dbus_services() — Was ist verfÃŒgbar?
    • call_dbus_method(service, path, method, args)
    • Wrapper fÃŒr hÀufige Aktionen (Dolphin, Kate)
  • Computer Use (separates Display)

    • src-tauri/src/xdisplay.rs (NEU)
    • start_virtual_display() — Xvfb auf :1 starten
    • capture_display(display_num) — Screenshot
    • send_input(display_num, action) — Maus/Tastatur
    • VNC-Server optional fÃŒr Monitoring
  • UI: Programm-Steuerung Panel

    • Browser-View (Playwright-Screenshots)
    • D-Bus Services auflisten
    • Computer-Use Display einbetten (VNC-Widget)
    • Toggle: "Zeige was Claude gerade bedient"

Entscheidungsbaum fÃŒr Claude

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

Verifikation

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

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

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

Phase 15: PrÀsentations- & Schulungsmodus (Lehrer-Modus) ✅ 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

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):

  1. 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
    
  2. Code-Animation:

    # 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:

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

Verifikation

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

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

Commit: adb11fd (14.04.2026)

Das Ziel

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

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

Event-Typen (Farbcodiert)

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

Zwei Ansichten

1. Kompakt-Ansicht (Standard)

Eine Zeile pro Event:

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

2. Detail-Ansicht (Klick auf Event)

VollstÀndige Informationen:

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

Was wird geloggt?

API-Events

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

Hook-Events

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

Tool-Events

  • Tool-Name + Parameter (gekÃŒrzt)
  • Ergebnis-Zusammenfassung
  • Dauer
  • Fehler wenn vorhanden

MCP-Events

  • Server-Name
  • Tool/Resource aufgerufen
  • Parameter + Ergebnis
  • Verbindungsstatus

Agent-Events

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

Implementiert

  • ✅ Event-System (Frontend)

    • src/lib/stores/app.ts — MonitorEvent Interface, Stores
    • Ringbuffer (max 1000 Events) im Frontend
    • Derived Stores fÃŒr Stats und Filter
  • ✅ API-Interceptor

    • scripts/claude-bridge.js erweitert
    • sendMonitorEvent() fÃŒr alle Event-Typen
    • Token, Kosten, Latenz geloggt
    • summarizeToolInput() fÃŒr kompakte Tool-Logs
  • ✅ Tool-Logger

    • Automatisch bei tool-start / tool-end
    • Parameter geloggt (gekÃŒrzt)
    • maskSensitive() fÃŒr Passwörter, API-Keys
  • ✅ UI: Monitor-Panel

    • src/lib/components/MonitorPanel.svelte
    • Farbcodierte Event-Liste (🔵🟢🟡🟣🟠🔎⚪)
    • Filter-Dropdown nach Typ
    • Auto-Scroll (toggle)
    • Detail-Ansicht bei Klick
    • Copy-Button fÃŒr JSON
    • Stats-Anzeige (Events, API-Calls, Errors, Latenz)

NachtrÀglich implementiert

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

Alle Phase 16 Features implementiert!

Sensitive Daten maskieren!

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

Datenstruktur

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

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

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

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

SQLite-Schema (optional fÃŒr Persistierung)

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

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

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

Verifikation

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

Nicht geplant / Zukunft

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

Technische Schulden

  • Dead Code in memory.rs (MemorySystem struct entfernt) ✅ (14.04.2026)
  • Warnings bei cargo check beheben ✅ (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