# DevChef — Bedienungsanleitung

## 1. Widget in deine Webapp einbinden

Kopiere `widget/devchef.js` auf deinen Webserver und füge den `<script>`-Tag vor `</body>` ein:

```html
<script src="/assets/devchef.js"
  data-project="mein-projekt"
  data-endpoint="https://meinserver.de/devchef-relay.php">
</script>
```

Das Widget startet sofort und:
- Loggt alle `console.log/warn/error`-Aufrufe
- Fängt JavaScript-Fehler und unbehandelte Promises
- Trackt alle fetch/XHR-Requests mit Status und Dauer
- Misst Performance (Long Tasks, LCP, Layout Shifts)

## 2. Floating Panel verwenden

Im Browser siehst du einen **orangefarbenen ◆ Button** (unten rechts):
- Klicken → Panel öffnet sich
- **ALL / CON / ERR / NET / PERF** — Filter nach Typ
- **Copy JSON** — Daten in Zwischenablage
- **Download** — JSON-Datei herunterladen
- **Clear** — Buffer leeren
- Roter Counter-Badge = Anzahl Fehler

## 3. Bridge starten (für MCP)

```bash
# Lokal (Entwicklung)
cd bridge
pip install -r requirements.txt
python devchef_bridge.py

# Docker
docker compose up -d
```

Bridge läuft auf Port 8099. Claude Code verbindet sich via MCP SSE.

## 4. MCP in Claude Code konfigurieren

Die `.claude/mcp.json` ist bereits vorhanden. Claude Code verbindet sich automatisch wenn die Bridge läuft.

**Verfügbare MCP-Befehle:**

```
devchef_projects              — Aktive Projekte anzeigen
devchef_read (project=...)    — Entries lesen
devchef_errors (project=...)  — Nur Fehler
devchef_network (project=...) — Network-Log
devchef_stats (project=...)   — Statistik
```

## 5. Kunden-Feedback aktivieren

```html
<script src="/assets/devchef.js"
  data-project="mein-projekt"
  data-feedback="true">
</script>
```

Zusätzliche Buttons erscheinen:
- **Lila ✎** → Annotation-Modus: Rahmen, Pfeile, Pins auf die Seite zeichnen
- **Blauer 💬** → Feedback-Liste anzeigen

Im Annotation-Modus:
1. Werkzeug wählen (□ Rahmen, → Pfeil, 〰 Freihand, ● Pin)
2. Farbe wählen
3. Auf der Seite zeichnen
4. Kommentar eingeben → Absenden

## 6. PHP Relay (Shared Hosting)

Lade `relay/devchef-relay.php` per FTP auf deinen Server hoch.

```html
<script src="devchef.js"
  data-endpoint="https://deine-domain.de/devchef-relay.php">
</script>
```

Daten werden in `.devchef/{projekt}/` gespeichert (automatisch vor Direktzugriff geschützt).

Abfragen via curl:

```bash
# Alle Projekte
curl "https://deine-domain.de/devchef-relay.php?action=projects"

# Letzte 20 Errors
curl "https://deine-domain.de/devchef-relay.php?action=errors&project=mein-projekt&last_n=20"

# Statistik
curl "https://deine-domain.de/devchef-relay.php?action=stats&project=mein-projekt"
```

## 7. Odoo-Integration (Fehler als Tasks anlegen)

Umgebungsvariablen setzen:

```bash
export ODOO_URL=https://odoo.example.com
export ODOO_DB=meine-datenbank
export ODOO_USER=admin@example.com
export ODOO_PASSWORD=geheimespasswort
export ODOO_PROJECT_ID=5
```

Workflow in Claude Code:

```
1. devchef_odoo_triage (project=mein-projekt) — Fehler gruppieren
2. Review: Welche sind neu? Welche schon als Task?
3. devchef_odoo_create_task — Einzelnen Task erstellen
   ODER
   devchef_odoo_bulk_create — Alle neuen Fehler auf einmal
```

## 8. Offline-Nutzung (ohne Bridge)

```js
// Im Browser-Konsole:
copy(DevChef.exportJSON())
// → JSON ist in Zwischenablage → in Claude Code einfügen
```