claude-desktop/ROADMAP.md

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

---

## Phase 5: Subagent-Hierarchie (KRITISCH)

### Problem
Der aktuelle `claude-bridge.js` behandelt nur einen Main-Agent. Wenn Claude das Task-Tool nutzt und Subagents (Explore, Plan, Bash) spawnt, werden diese **nicht angezeigt**.

### Ziel
```
┌─ Main Agent (claude-opus-4)
│  ├─ Explore Agent (Codebase durchsuchen)
│  │  └─ Tool: Grep "handleError"
│  └─ Plan Agent (Implementierung planen)
│     └─ Tool: Read README.md
```

### Aufgaben

- [ ] **scripts/claude-bridge.js**
  - [ ] `subagent_start` Event-Handler hinzufugen
  - [ ] `subagent_stop` Event-Handler hinzufugen
  - [ ] `parentAgentId` und `depth` im Event-Payload senden

- [ ] **src-tauri/src/claude.rs**
  - [ ] `AgentEvent` Struct erweitern: `parent_id: Option<String>`
  - [ ] Hierarchie-Info an Frontend weitergeben

- [ ] **src/lib/stores/app.ts**
  - [ ] `Agent` Interface erweitern:
    ```typescript
    interface Agent {
      id: string;
      parentAgentId?: string;  // NEU
      depth: number;           // NEU: 0 = Main, 1 = Subagent, etc.
      type: 'main' | 'explore' | 'plan' | 'bash';
      // ...
    }
    ```

- [ ] **src/lib/components/AgentView.svelte**
  - [ ] Baumansicht mit Einruckung implementieren
  - [ ] Linien zwischen Parent/Child
  - [ ] Subagent-Badge anzeigen
  - [ ] Collapsed/Expanded State pro Agent

### Verifikation
```bash
# App starten, Prompt eingeben der Task-Tool triggert
# Prufen: AgentView zeigt verschachtelte Hierarchie
```

---

## Phase 6: Session-Management Verbesserungen

### Problem
1. Session wird nur geladen wenn SessionList-Panel sichtbar ist
2. `agentId` geht bei DB-Speicherung verloren
3. Kein Compacting — alte Sessions werden unbegrenzt gross
4. `claude_session_id` wird nicht fur SDK-Fortsetzung genutzt

### Aufgaben

- [ ] **src/routes/+layout.svelte**
  - [ ] Session-Auto-Load bei App-Start (nicht nur in SessionList)
  ```typescript
  onMount(async () => {
    const active = await invoke('get_active_session');
    if (active) {
      currentSessionId.set(active.id);
      const messages = await invoke('load_messages', { sessionId: active.id });
      setMessagesFromDb(messages);
    }
  });
  ```

- [ ] **src-tauri/src/db.rs**
  - [ ] `agent_id` Spalte in `messages` Tabelle
  - [ ] Migration fur bestehende Daten
  - [ ] `compact_session(session_id, keep_last_n)` Funktion
  - [ ] `archive_messages(session_id, before_timestamp)` Funktion

- [ ] **src/lib/stores/app.ts**
  - [ ] `DbMessage` Interface: `agent_id?: string`
  - [ ] `messageToDb()` anpassen

- [ ] **Compacting-Logik**
  - [ ] Bei > 50 Nachrichten: Altere zusammenfassen
  - [ ] Summary-Nachricht: "Bisheriger Kontext: ..."
  - [ ] Original-Nachrichten in `messages_archive` Tabelle

- [ ] **Claude-Session-ID nutzen**
  - [ ] Bei `send_message`: Session-ID an SDK ubergeben
  - [ ] `--resume` Flag nutzen fur Fortsetzung

### Verifikation
```bash
# App starten → Letzte Session automatisch geladen (ohne SessionList)
# 100 Nachrichten senden → Compacting aktiv
# App beenden → Neu starten → Exakt gleicher Stand
```

---

## Phase 7: UI-Verbesserungen

### Features die fehlen (Standard bei ChatGPT, Claude.ai, Cursor)

| Feature | Prioritat |
|---------|-----------|
| Nachricht bearbeiten | Hoch |
| Antwort regenerieren | Hoch |
| Code-Block Copy-Button | Hoch |
| Diff-View fur Anderungen | Hoch |
| File-Preview inline | Mittel |
| Conversation Fork | Niedrig |

### Aufgaben

- [ ] **src/lib/components/MessageBubble.svelte** (oder ChatPanel)
  - [ ] Edit-Button bei User-Nachrichten
  - [ ] Regenerate-Button bei Assistant-Nachrichten
  - [ ] Inline-Editor fur Nachrichtenbearbeitung

- [ ] **src/lib/components/CodeBlock.svelte** (NEU)
  - [ ] Syntax-Highlighting (bereits via marked?)
  - [ ] Copy-Button oben rechts
  - [ ] Sprache anzeigen
  - [ ] Zeilennummern optional

- [ ] **src/lib/components/DiffView.svelte** (NEU)
  - [ ] Split-View: Alt | Neu
  - [ ] Unified-View: +/- Zeilen
  - [ ] Syntax-Highlighting
  - [ ] Wird bei Edit-Tool-Results angezeigt

- [ ] **src/lib/components/FilePreview.svelte** (NEU)
  - [ ] Bei Read-Tool: Dateiinhalt inline anzeigen
  - [ ] Collapsible (eingeklappt by default)
  - [ ] Syntax-Highlighting nach Dateiendung

- [ ] **Keyboard Shortcuts**
  - [ ] Cmd/Ctrl+Enter = Senden
  - [ ] Cmd/Ctrl+Shift+Enter = Senden ohne Tools
  - [ ] Cmd/Ctrl+K = Input fokussieren

### Verifikation
```bash
# User-Nachricht bearbeiten → Neue Antwort generiert
# Code-Block → Copy-Button kopiert in Clipboard
# Edit-Tool → Diff-View zeigt Anderungen
```

---

## Phase 8: Claude-DB Integration

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

### Aufgaben

- [ ] **src-tauri/src/knowledge.rs** (NEU)
  - [ ] MySQL-Verbindung zu claude-db
  - [ ] `search_knowledge(query)` — Volltextsuche
  - [ ] `save_knowledge(entry)` — Neuer Eintrag
  - [ ] `get_sticky_context()` — Fur Claude-Prompt

- [ ] **src-tauri/src/lib.rs**
  - [ ] Knowledge-Modul registrieren
  - [ ] Tauri-Commands exportieren

- [ ] **src/lib/components/KnowledgePanel.svelte** (NEU)
  - [ ] Suchfeld fur Wissensbasis
  - [ ] Ergebnisliste mit Titel, Tags, Preview
  - [ ] Detail-View fur einzelnen Eintrag

- [ ] **"Das merken" Feature**
  - [ ] Button in Chat bei wichtigen Erkenntnissen
  - [ ] Modal: Kategorie, Tags, Titel eingeben
  - [ ] Speichert in `knowledge` Tabelle

- [ ] **Sticky Context**
  - [ ] Beim Chat-Start: Sticky-Eintrage laden
  - [ ] Als System-Prompt an Claude senden

### Verifikation
```bash
# Wissensbasis durchsuchen → Ergebnisse in App
# "Das merken" klicken → Eintrag in claude.knowledge
# Neuer Chat → Sticky Context wird geladen
```

---

## Phase 9: Intelligentes Context-Management (WICHTIG)

### 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                    │
└─────────────────────────────────────────────────────────────┘
```

### Aufgaben

- [ ] **src-tauri/src/context.rs** (NEU)
  - [ ] `StickyContext` Struct (Schicht 1)
  - [ ] `ProjectContext` Struct (Schicht 2)
  - [ ] `get_sticky_context()` → ~200 Token
  - [ ] `get_project_context(project_id)` → ~500 Token
  - [ ] `extract_critical_before_compacting()` → JSON

- [ ] **src-tauri/src/credentials.rs** (NEU)
  - [ ] Credentials aus DB laden (verschlüsselt)
  - [ ] `inject_for_context(tool_name)` → Zugang wenn nötig
  - [ ] Credentials NIE im Chat-Verlauf speichern

- [ ] **scripts/claude-bridge.js**
  - [ ] Schicht 1 bei jedem `query()` Call als System-Prompt
  - [ ] Hook vor Compacting: `extract_critical_before_compacting()`
  - [ ] Hook nach Compacting: `restore_critical_context()`

- [ ] **Datenbank-Schema** (SQLite lokal)
  ```sql
  CREATE TABLE sticky_context (
    key TEXT PRIMARY KEY,
    value TEXT,
    priority INT  -- 1=kritisch, niemals entfernen
  );

  CREATE TABLE compacting_archive (
    id INTEGER PRIMARY KEY,
    session_id TEXT,
    extracted_at TEXT,
    decisions JSON,
    open_questions JSON,
    key_insights JSON
  );
  ```

- [ ] **Pre-Tool-Hook: Wissens-Hints**
  - [ ] Bei Tool-Aufruf: Schlüsselwörter extrahieren
  - [ ] Claude-DB nach relevantem Wissen durchsuchen
  - [ ] Als `<knowledge-hint>` injizieren (max 200 Token)

### Wichtig: Nicht ALLES wiederherstellen!

```
❌ FALSCH: 130.000 Token zurück injizieren
   → Sofort wieder Compacting → Endlosschleife

✅ RICHTIG: 700 Token kritischen Kontext
   Schicht 1: 200 Token (Zugänge, User)
   Schicht 2: 500 Token (Projekt, Entscheidungen)
```

### Enforcement: Sicherstellen dass Claude den Kontext NUTZT

**Problem:** Injizierter Kontext kann ignoriert werden (Lost in the Middle, keine Anweisung)

**Lösung 1: Position**
- Schicht 1 → System Prompt (höchste Priorität)
- Schicht 2 → Letzter System-Reminder vor User-Nachricht (Recency Bias)

**Lösung 2: Explizite Anweisungen**
```
<critical-context>
Du MUSST folgende Zugänge verwenden (NICHT nachfragen!):
- DB: 192.168.155.11 / dolibarr_test
Diese Daten sind AKTUELL und KORREKT.
</critical-context>
```

**Lösung 3: Validierung nach Antwort**
- [ ] `validateResponse()` in claude-bridge.js
- [ ] Prüft: Hat Claude nach Infos gefragt die injiziert waren?
- [ ] Wenn ja: Automatisch Retry mit Korrektur-Hinweis

**Lösung 4: Feedback-Loop**
- [ ] `context_failures` Tabelle in SQLite
- [ ] Speichert wenn Kontext ignoriert wurde
- [ ] Pattern erkennen → Prompts verbessern

### Aufgaben (Enforcement)

- [ ] **scripts/claude-bridge.js**
  - [ ] System Prompt Builder mit `<critical-context>` Tags
  - [ ] Schicht 1 am Anfang, Schicht 2 am Ende
  - [ ] `validateResponse()` nach jeder Antwort
  - [ ] Auto-Retry bei Kontext-Ignorierung (max 1x)

- [ ] **src-tauri/src/db.rs**
  - [ ] `context_failures` Tabelle
  - [ ] `log_context_failure(session_id, context, expected, actual)`
  - [ ] `get_failure_patterns()` für Prompt-Optimierung

- [ ] **UI: Warnung bei Regel-Verletzung**
  - [ ] Toast/Banner wenn Claude Regel ignoriert
  - [ ] Option: "Erneut versuchen mit Hinweis"

### Verifikation
```bash
# Lange Session (>100 Nachrichten) → Compacting passiert
# Danach: Zugänge noch bekannt? Projekt-Kontext da?
# Tool aufrufen → Relevante Hints erscheinen?
```

---

## Phase 10: Sprach-Interface (Optional)

### Technologie-Stack

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

### Aufgaben

- [ ] **Whisper Integration**
  - [ ] whisper.cpp als Tauri-Sidecar oder WASM
  - [ ] Streaming-Transkription
  - [ ] Deutsch-Modell (small oder medium)

- [ ] **VAD (Voice Activity Detection)**
  - [ ] Erkennt wann User aufhort zu sprechen
  - [ ] Pause > 1.5s → Nachricht senden

- [ ] **TTS (Text-to-Speech)**
  - [ ] OpenAI TTS API Integration
  - [ ] Streaming-Wiedergabe
  - [ ] Interrupt bei User-Sprache

- [ ] **UI**
  - [ ] Mikrofon-Button in Chat
  - [ ] Pegel-Anzeige
  - [ ] Transkript live anzeigen

### Aufwand
Gross — eigenes Teilprojekt, 2-3 Wochen

---

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

### Die drei Agent-Modi (einstellbar!)

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

### Wann welcher Modus?

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

### Automatische Modus-Wahl (optional)

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

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

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

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

### Aufgaben

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

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

  Sub-Agents: Research, Implement, Test, Review
  ```

- [ ] **Sub-Agent-Prompts**
  - [ ] Research: "Fasse Ergebnisse in max 500 Token zusammen"
  - [ ] Implement: "Berichte nur: welche Dateien, was geändert"
  - [ ] Test: "Berichte nur: passed/failed, Fehlerursache"

- [ ] **UI: Agent-Modus Einstellung**
  - [ ] Settings: Dropdown "Agent-Modus" (Solo / Handlanger / Experten / Auto)
  - [ ] "Auto" wählt basierend auf Aufgaben-Komplexität
  - [ ] Anzeige in Footer welcher Modus aktiv

- [ ] **UI: Agent-Delegation anzeigen**
  - [ ] AgentView zeigt: Main → Sub-Agent Delegation
  - [ ] Bei Handlanger: Exakte Anweisung sichtbar
  - [ ] Bei Experten: Agent's eigene Planung sichtbar
  - [ ] Ergebnis-Zusammenfassung pro Agent

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

---

## Phase 12: Hook-System für Automatisierung

### Konzept

Hooks die automatisch bei bestimmten Events laufen:

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

### Aufgaben

- [ ] **src-tauri/src/hooks.rs** (NEU)
  - [ ] `HookManager` Struct
  - [ ] `register_hook(event, callback)`
  - [ ] `fire_hook(event, payload)`

- [ ] **scripts/hooks/** (NEU)
  - [ ] `session-start.js` → Lädt Projekt-Kontext
  - [ ] `pre-tool.js` → Wissens-Hints aus claude-db
  - [ ] `post-tool.js` → Fehler-Patterns speichern
  - [ ] `before-compacting.js` → Kritisches extrahieren
  - [ ] `after-compacting.js` → Context wiederherstellen

- [ ] **UI: Hook-Konfiguration**
  - [ ] Settings-Panel: Hooks ein/ausschalten
  - [ ] Hook-Log im Audit-Panel

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

---

## Claude-DB Schema-Erweiterungen

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

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

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

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

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

---

## Phase 13: VSCodium Integration (IDE-Steuerung)

### Das Ziel

Claude bedient VSCodium komplett — OHNE deine Maus zu blockieren.

### Architektur

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

### Was Claude damit kann

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

### Aufgaben

- [ ] **VSCode Extension: Claude Bridge**
  - [ ] Neues Extension-Projekt erstellen
  - [ ] WebSocket-Server für Kommunikation mit Claude Desktop
  - [ ] Command-Executor: VSCode Commands ausführen
  - [ ] LSP-Bridge: Language Server Anfragen weiterleiten
  - [ ] Status-Reporter: Was ist gerade offen? Wo ist Cursor?

- [ ] **Claude Desktop: IDE-Connector**
  - [ ] `src-tauri/src/ide.rs` — Verbindung zur Extension
  - [ ] `connectToIDE()` — WebSocket zu VSCodium
  - [ ] `executeIDECommand(command, args)` — Befehl ausführen
  - [ ] `getLSPInfo(file, position)` — Semantische Infos

- [ ] **Neue Tools für Claude**
  - [ ] `IDE.openFile(path)` — Datei im Editor öffnen
  - [ ] `IDE.goToLine(path, line)` — Zu Zeile springen
  - [ ] `IDE.formatDocument()` — Formatieren
  - [ ] `IDE.rename(oldName, newName)` — Refactoring
  - [ ] `IDE.findReferences(symbol)` — Alle Verwendungen
  - [ ] `IDE.startDebug(config)` — Debugger starten
  - [ ] `IDE.gitCommit(message)` — Via Git-Panel

- [ ] **UI: IDE-Status anzeigen**
  - [ ] Verbindungsstatus zu VSCodium
  - [ ] Aktuell offene Datei
  - [ ] Cursor-Position

### Warum NICHT Computer Use?

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

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

---

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

### Das Problem

Terminal ist ein Flaschenhals für:
- **GUI-Programme** (Dolibarr im Browser, Systemeinstellungen)
- **Visuelle Aufgaben** (Screenshots prüfen, UI testen)
- **Programme ohne CLI** (viele Desktop-Apps)

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

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

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

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

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

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

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

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

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

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

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

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

### Aufgaben

- [ ] **Playwright Integration aktivieren**
  - [ ] MCP-Server ist bereits da → Tools verfügbar machen
  - [ ] Dolibarr-Login automatisieren (Session merken)
  - [ ] UI in App: Browser-Aktionen anzeigen

- [ ] **D-Bus Modul**
  - [ ] `src-tauri/src/dbus.rs` (NEU)
  - [ ] `list_dbus_services()` — Was ist verfügbar?
  - [ ] `call_dbus_method(service, path, method, args)`
  - [ ] Wrapper für häufige Aktionen (Dolphin, Kate)

- [ ] **Computer Use (separates Display)**
  - [ ] `src-tauri/src/xdisplay.rs` (NEU)
  - [ ] `start_virtual_display()` — Xvfb auf :1 starten
  - [ ] `capture_display(display_num)` — Screenshot
  - [ ] `send_input(display_num, action)` — Maus/Tastatur
  - [ ] VNC-Server optional für Monitoring

- [ ] **UI: Programm-Steuerung Panel**
  - [ ] Browser-View (Playwright-Screenshots)
  - [ ] D-Bus Services auflisten
  - [ ] Computer-Use Display einbetten (VNC-Widget)
  - [ ] Toggle: "Zeige was Claude gerade bedient"

### Entscheidungsbaum für Claude

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

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

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

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

---

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

### Das Ziel

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

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

### Features

#### 1. Präsentationsfenster

Separates Fenster (oder Panel) für Visualisierungen:

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

#### 2. Visualisierungs-Typen

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

#### 3. Animiertes Coding

Claude "tippt" Code langsam — wie ein Mensch:

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

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

#### 4. Erklär-Modus

Claude erklärt **während** er arbeitet:

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

#### 5. Interaktive Elemente

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

### Schulungs-Modi

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

### Aufgaben

- [ ] **Präsentationsfenster**
  - [ ] Neues Tauri-Window für Präsentation
  - [ ] Kann neben Hauptfenster existieren
  - [ ] Steuerleiste (Play/Pause/Speed)
  - [ ] Vollbild-Toggle

- [ ] **Mermaid.js Integration**
  - [ ] `src/lib/components/MermaidDiagram.svelte`
  - [ ] Live-Rendering von Diagrammen
  - [ ] Animierte Knoten-Hinzufügung
  - [ ] Zoom und Pan

- [ ] **Animiertes Code-Panel**
  - [ ] `src/lib/components/AnimatedCode.svelte`
  - [ ] Monaco Editor mit Tipp-Animation
  - [ ] Geschwindigkeits-Kontrolle
  - [ ] Zeilen-Highlighting
  - [ ] Cursor-Animation

- [ ] **Erklär-System**
  - [ ] Claude generiert Erklärungen parallel zum Code
  - [ ] Synchronisation: Code-Position ↔ Erklärung
  - [ ] Optional: TTS für Erklärungen (Phase 10)

- [ ] **Schulungs-Prompts**
  - [ ] Spezieller System-Prompt für Lehrer-Modus
  - [ ] "Du bist ein geduldiger Lehrer. Erkläre jeden Schritt."
  - [ ] Strukturierte Ausgabe: `{code, explanation, visualization}`

- [ ] **UI: Modus-Wechsel**
  - [ ] Button: "Schulungsmodus aktivieren"
  - [ ] Oder: "Erkläre mir das" Button bei jeder Antwort
  - [ ] Settings: Standard-Geschwindigkeit, TTS an/aus

- [ ] **Excalidraw-ähnliche Skizzen**
  - [ ] Für Freihand-Diagramme
  - [ ] Claude kann "zeichnen" (Koordinaten → Shapes)
  - [ ] Export als PNG/SVG

### Beispiel-Ablauf

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

**Claude (Schulungsmodus):**

1. **Mindmap erscheint:**
   ```mermaid
   mindmap
     root((Git Branches))
       Was ist ein Branch?
         Zeiger auf Commit
         Leichtgewichtig
       Warum Branches?
         Parallele Entwicklung
         Features isolieren
       Befehle
         git branch
         git checkout
         git merge
   ```

2. **Code-Animation:**
   ```bash
   # Neuen Branch erstellen
   git branch feature-login  ← tippt langsam

   # Zum Branch wechseln
   git checkout feature-login
   ```

3. **Erklärung (parallel):**
   > "Ein Branch ist wie ein paralleles Universum für deinen Code.
   > Du kannst Änderungen machen ohne den Hauptcode zu beeinflussen..."

4. **Flowchart:**
   ```mermaid
   gitGraph
     commit id: "Initial"
     branch feature-login
     commit id: "Login-Form"
     checkout main
     commit id: "Hotfix"
     merge feature-login
   ```

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

---

## Phase 16: System-Monitor (Debug-Panel)

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

### Aufgaben

- [ ] **Event-System im Backend**
  - [ ] `src-tauri/src/monitor.rs` (NEU)
  - [ ] `EventBus` Struct mit Ringbuffer (max 10.000 Events)
  - [ ] `emit_event(type, data)` — Thread-safe
  - [ ] Events an Frontend via Tauri Events
  - [ ] Persistierung optional (SQLite)

- [ ] **API-Interceptor**
  - [ ] `scripts/claude-bridge.js` erweitern
  - [ ] Vor/Nach jedem `query()` Call loggen
  - [ ] Token zählen, Kosten berechnen
  - [ ] Latenz messen (first token, total)

- [ ] **Hook-Logger**
  - [ ] Bei jedem Hook-Fire: Event emittieren
  - [ ] Payload (gekürzt auf 500 Zeichen)
  - [ ] Ergebnis + Dauer

- [ ] **Tool-Logger**
  - [ ] Wrapper um jedes Tool
  - [ ] Parameter loggen (sensitive Daten maskieren)
  - [ ] Ergebnis-Zusammenfassung
  - [ ] Fehler + Stack Trace

- [ ] **UI: Monitor-Panel**
  - [ ] `src/lib/components/MonitorPanel.svelte` (NEU)
  - [ ] Virtualisierte Liste (Performance bei vielen Events)
  - [ ] Farbcodierung nach Event-Typ
  - [ ] Filter-Dropdown (nur API, nur Errors, etc.)
  - [ ] Suchfeld
  - [ ] Auto-Scroll (abschaltbar)
  - [ ] Detail-Ansicht bei Klick
  - [ ] Copy-Button für Details

- [ ] **Log-Export**
  - [ ] Als JSON exportieren
  - [ ] Als Text (lesbar) exportieren
  - [ ] Zeitraum wählbar

- [ ] **Performance-Metriken**
  - [ ] Sidebar-Widget: Requests/min, Avg Latency
  - [ ] Token-Verbrauch Grafik (letzte Stunde)
  - [ ] Kosten-Tracker (Session, Tag, Monat)

### Sensitive Daten maskieren!

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

### Datenstruktur

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

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

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

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

### SQLite-Schema (optional für Persistierung)

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

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

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

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

---

## Nicht geplant / Zukunft
- [ ] MCP-Server Integration in App
- [ ] Plugin-System
- [ ] Multi-User / Team-Features
- [ ] Cloud-Sync zwischen Geraten

---

## Technische Schulden

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

---

## Build & Entwicklung

```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 |