frankenbot/FEATURES.md

# Neue Features - Streaming UI & Email Integration

## 1. 🎬 Streaming-UI für Agent-Responses

### Problem
- Lange Wartezeiten bei Agent-Anfragen ohne Feedback
- Nutzer wusste nicht, ob das System noch aktiv ist

### Lösung
Eine neue **Server-Sent Events (SSE)** basierte Streaming-UI zeigt live Feedback während der Agent-Verarbeitung.

### Features
✨ **Live-Updates während Verarbeitung**
- "⏳ Agent arbeitet..." - Status während Verarbeitung
- "🤖 Aktiver Agent: [Name]" - Angezeigter delegierter Agent
- Schrittweise Antwort-Chunks streaming zum Browser
- "✓ Verarbeitung abgeschlossen" - Erfolgsbestätigung

### Technische Details
- **Timeout erhöht** auf 300 Sekunden (war: 120s)
- **Neue Route**: `/api/agent-stream` (POST, JSON)
- **Technologie**: Server-Sent Events (fetch mit ReadableStream)
- **UI Button**: "Live-Antwort anfordern" im Orchestrator

### Verwendung
1. Gehe zu `/orchestrator`
2. Gib eine Anfrage ein
3. Klick auf "Live-Antwort anfordern" Button
4. Beobachte die Live-Updates der Antwort in Echtzeit
5. Alternativ: "Klassisch senden" für alte Methode

### Implementierte Dateien
- `app.py`: 
  - SSE-Route `/api/agent-stream` (Zeilen 250-288)
  - Timeout erhöht auf 300s (Zeile 67)
- `templates/orchestrator.html`:
  - Neue Button "Live-Antwort anfordern" 
  - JavaScript Streaming-Handler mit EventSource-Parser

---

## 2. 📧 Email-Integration (IMAP/SMTP)

### Problem
- Keine Email-Verwaltung in der Agenten-Plattform
- Manual Zugriff auf Emails außerhalb des Systems

### Lösung
Vollständige **Email-Management-Interface** mit IMAP/SMTP Support

### Features
✨ **Emails empfangen** (IMAP)
- Automatisches Laden der letzten 10 Emails
- Subject, From, Date, Preview anzeigen
- Email-Body vollständig abrufen und anzeigen
- Modal-Dialog für Detail-View

✨ **Emails versenden** (SMTP)
- Web-UI zum Schreiben neuer Emails
- Empfänger, Betreff, Nachricht eingeben
- Sofort versenden über SMTP

✨ **Web-Interface**
- Neue Route: `/emails`
- Email-Verwaltung Dashboard
- Konfiguration-Status Display
- Live-Liste der eingehenden Emails

### Konfiguration

#### Setup mit Gmail (Beispiel)

1. **2-Faktor-Authentifizierung aktivieren** (erforderlich)
   - Google Account-Einstellungen → Sicherheit
   - "Bestätigung in zwei Schritten" aktivieren

2. **App-spezifisches Passwort generieren**
   - https://myaccount.google.com/apppasswords
   - Gerät: "Mail", OS: "Windows" → 16-Zeichen Passwort kopieren

3. **Umgebungsvariablen setzen**
   ```bash
   export IMAP_SERVER=imap.gmail.com
   export SMTP_SERVER=smtp.gmail.com
   export EMAIL_ADDRESS=deine-email@gmail.com
   export EMAIL_PASSWORD=app-spezifisches-passwort
   export IMAP_PORT=993
   export SMTP_PORT=587
   ```

4. **Oder `.env` Datei erstellen**
   ```
   cp .env.example .env
   # Bearbeite .env mit deinen Credentials
   ```

#### Andere Email-Provider

**Outlook/Office365:**
```
IMAP_SERVER=imap-mail.outlook.com
SMTP_SERVER=smtp-mail.outlook.com
IMAP_PORT=993
SMTP_PORT=587
```

**Yahoo:**
```
IMAP_SERVER=imap.mail.yahoo.com
SMTP_SERVER=smtp.mail.yahoo.com
IMAP_PORT=993
SMTP_PORT=587
```

### Verwendung
1. Gehe zu `/emails`
2. Sehe Konfiguration-Status
3. Schreibe neue Email im linken Panel:
   - Empfänger-Email
   - Betreff
   - Nachricht
   - "Versenden" Button
4. Betrachte Posteingang im rechten Panel:
   - Klick auf Email um Body anzusehen
   - Modal zeigt vollständige Nachricht

### Implementierte Dateien
- `app.py`:
  - Email-Config Variable (Zeilen 29-36)
  - `get_emails()` - IMAP Abfrage (Zeilen 194-221)
  - `get_email_preview()` - Text-Extrakt (Zeilen 224-232)
  - `get_email_body()` - Vollständiger Body (Zeilen 235-259)
  - `send_email()` - SMTP Versand (Zeilen 262-284)
  - Route `/emails` (Zeilen 483-509)
  - Route `/emails/<email_id>` Detail (Zeilen 512-520)

- `templates/emails.html` - Komplettes Email-Management UI
- `.env.example` - Konfiguration-Template

### Navigation
Alle HTML-Templates wurden aktualisiert mit Email-Navigationsllink:
- `index.html`
- `chat.html`
- `tasks.html`
- `files.html`
- `agents.html`
- `orchestrator.html`

---

## 🔒 Sicherheit

### Email-Sicherheit
- **Keine Passwörter im Code** - Nur Umgebungsvariablen
- **SSL/TLS Standard** für IMAP (Port 993) und SMTP (Port 587)
- **App-spezifische Passwörter** empfohlen (Gmail)
- **STARTTLS** für SMTP-Verbindung

### SSE-Sicherheit
- Standard Flask CORS-Handling
- JSON-basierte Events (nicht injizierbar)
- Stream Timeouts (300s max)

---

## 🚀 Performance

### Streaming
- Chunks: 50 Zeichen pro Event für Responsiveness
- Non-blocking Stream Reader
- Browser-seitige Aggregation

### Email
- Letzte 10 Emails gecacht
- Lazy Loading des Email-Body (on click)
- Connection pooling (connect/disconnect pro Aktion)

---

## 📝 API Endpoints

| Route | Methode | Beschreibung |
|-------|---------|-------------|
| `/api/agent-stream` | POST | SSE Streaming Agent Response |
| `/emails` | GET | Email Management Dashboard |
| `/emails` | POST | Send Email (form) |
| `/emails/<id>` | GET | Get Email Body (JSON) |

---

## 🛠️ Technologie-Stack

- **IMAP**: Python `imaplib` (Standard Library)
- **SMTP**: Python `smtplib` + `email.mime` (Standard Library)  
- **Streaming**: Flask Response + Server-Sent Events
- **Frontend**: Bootstrap 5 + Vanilla JavaScript (Fetch API)

---

## ✅ Checkliste

- [x] Timeout auf 300s erhöht
- [x] `/api/agent-stream` SSE-Route
- [x] Streaming UI mit Live-Updates
- [x] Email-Konfiguration mit Umgebungsvariablen
- [x] IMAP Email-Abruf
- [x] SMTP Email-Versand
- [x] Email-Management Web-UI
- [x] Modal für Email-Detail-View
- [x] Alle Navigation-Links aktualisiert
- [x] `.env.example` Template
- [x] Fehlerbehandlung für fehlende Config