Add implementation plan: log viewer and auto-reload

docs/superpowers/plans/2026-05-10-log-viewer-autoreload.md

@@ -0,0 +1,384 @@
+# Log-Viewer und Auto-Reload Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Letzten 10 Zeilen von usage.log/error.log in der Settings-Sektion anzeigen; alle Daten alle 5 Minuten automatisch neu laden; Zeitstempel der letzten Aktualisierung im Header.
+
+**Architecture:** Neuer Backend-Endpunkt `GET /api/logs/{name}` in `admin.py` liest die letzten 10 Zeilen aus den Logdateien. `SettingsSection` bekommt einen `refreshKey`-Prop, den `App` alle 5 Minuten inkrementiert — das triggert einen neuen `useEffect`-Lauf. `App` hält den `lastUpdated`-Timestamp und zeigt ihn im Header.
+
+**Tech Stack:** FastAPI (Python), React 18, axios, CSS
+
+---
+
+### Task 1: Backend-Endpunkt `GET /api/logs/{name}`
+
+**Files:**
+- Modify: `backend/admin.py`
+- Create: `backend/tests/test_admin_logs.py`
+
+- [ ] **Schritt 1: Test schreiben**
+
+Datei `backend/tests/test_admin_logs.py` anlegen:
+
+```python
+import os
+import pytest
+from fastapi.testclient import TestClient
+
+os.environ.setdefault("ADMIN_PASSWORD", "test-admin-pw")
+os.environ.setdefault("OLLAMA_URL", "http://127.0.0.1:9999")
+
+
+@pytest.fixture
+def client(tmp_path):
+    log_file = tmp_path / "usage.log"
+    log_file.write_text("\n".join(f"Zeile {i}" for i in range(1, 16)) + "\n")
+    (tmp_path / "error.log").write_text("Fehler A\nFehler B\n")
+    os.environ["LOG_FILE"] = str(log_file)
+
+    from database import Base, engine
+    Base.metadata.drop_all(bind=engine)
+    Base.metadata.create_all(bind=engine)
+
+    from admin import app
+    yield TestClient(app, raise_server_exceptions=False)
+
+    Base.metadata.drop_all(bind=engine)
+    os.environ.pop("LOG_FILE", None)
+
+
+AUTH = {"Authorization": "Bearer test-admin-pw"}
+
+
+def test_logs_usage_returns_last_10_lines(client):
+    resp = client.get("/api/logs/usage", headers=AUTH)
+    assert resp.status_code == 200
+    lines = resp.json()["lines"]
+    assert len(lines) == 10
+    assert lines[-1] == "Zeile 15"
+    assert lines[0] == "Zeile 6"
+
+
+def test_logs_error_returns_content(client):
+    resp = client.get("/api/logs/error", headers=AUTH)
+    assert resp.status_code == 200
+    assert resp.json()["lines"] == ["Fehler A", "Fehler B"]
+
+
+def test_logs_missing_file_returns_empty(client, tmp_path):
+    os.environ["LOG_FILE"] = str(tmp_path / "nonexistent.log")
+    resp = client.get("/api/logs/usage", headers=AUTH)
+    assert resp.status_code == 200
+    assert resp.json()["lines"] == []
+
+
+def test_logs_invalid_name_returns_400(client):
+    resp = client.get("/api/logs/secret", headers=AUTH)
+    assert resp.status_code == 400
+
+
+def test_logs_requires_auth(client):
+    resp = client.get("/api/logs/usage")
+    assert resp.status_code == 401
+```
+
+- [ ] **Schritt 2: Test zum Scheitern bringen**
+
+```bash
+cd backend
+/Users/oliver/Development/Technologien/llm_quota/.venv/bin/python3 -m pytest tests/test_admin_logs.py -v
+```
+
+Erwartung: alle Tests FAIL mit 404 oder AttributeError (Endpunkt existiert nicht).
+
+- [ ] **Schritt 3: Endpunkt in `admin.py` implementieren**
+
+Direkt vor der Static-File-Mount-Zeile (`_dist = ...`) einfügen:
+
+```python
+@app.get("/api/logs/{name}")
+async def get_log_lines(name: str, _ = Depends(require_admin_auth)):
+    if name not in ("usage", "error"):
+        raise HTTPException(status_code=400, detail="name must be 'usage' or 'error'")
+    log_file = Path(os.getenv("LOG_FILE", "logs/usage.log"))
+    path = log_file if name == "usage" else log_file.parent / "error.log"
+    try:
+        lines = path.read_text(encoding="utf-8").splitlines()
+        return {"lines": lines[-10:]}
+    except FileNotFoundError:
+        return {"lines": []}
+```
+
+- [ ] **Schritt 4: Tests laufen lassen**
+
+```bash
+cd backend
+/Users/oliver/Development/Technologien/llm_quota/.venv/bin/python3 -m pytest tests/test_admin_logs.py -v
+```
+
+Erwartung: alle 5 Tests PASS.
+
+- [ ] **Schritt 5: Gesamte Test-Suite prüfen**
+
+```bash
+cd backend
+/Users/oliver/Development/Technologien/llm_quota/.venv/bin/python3 -m pytest tests/ -q
+```
+
+Erwartung: alle Tests PASS, keine Regressionen.
+
+- [ ] **Schritt 6: Commit**
+
+```bash
+git add backend/admin.py backend/tests/test_admin_logs.py
+git commit -m "Add GET /api/logs/{name} endpoint to admin API"
+```
+
+---
+
+### Task 2: Log-Anzeige in `SettingsSection`
+
+**Files:**
+- Modify: `frontend/src/main.jsx`
+- Modify: `frontend/src/styles.css`
+
+- [ ] **Schritt 1: `refreshKey`-Prop und Log-State in `SettingsSection` ergänzen**
+
+In `main.jsx`, `SettingsSection`-Signatur und State ändern:
+
+```jsx
+function SettingsSection({ password, refreshKey }) {
+  // bestehende States beibehalten, neu hinzufügen:
+  const [usageLog, setUsageLog] = useState([]);
+  const [errorLog, setErrorLog] = useState([]);
+```
+
+- [ ] **Schritt 2: Log-Fetch in den bestehenden `useEffect` integrieren**
+
+Den bestehenden `useEffect` in `SettingsSection` (Zeilen 110–122) ersetzen:
+
+```jsx
+  useEffect(() => {
+    const headers = authHeaders(password);
+    Promise.all([
+      axios.get('/api/settings', { headers }),
+      axios.get('/api/proxy-info', { headers }),
+      axios.get('/api/logs/usage', { headers }),
+      axios.get('/api/logs/error', { headers }),
+    ]).then(([settingsRes, proxyRes, usageRes, errorRes]) => {
+      const s = settingsRes.data;
+      setSettings(s);
+      setProxyEndpoint(proxyRes.data.endpoint);
+      setAppVersion(proxyRes.data.version);
+      setUsageLog(usageRes.data.lines);
+      setErrorLog(errorRes.data.lines);
+      fetchModels(s.ollama_url, s.force_model);
+    }).catch(() => setError('Einstellungen konnten nicht geladen werden.'));
+  }, [refreshKey]);
+```
+
+Wichtig: `[refreshKey]` statt `[]` als Dependency-Array, damit ein neuer `refreshKey` einen Re-Fetch auslöst.
+
+- [ ] **Schritt 3: Log-Anzeige am Ende von `SettingsSection` einfügen**
+
+Den `return`-Block von `SettingsSection` — direkt vor dem schließenden `</section>` — erweitern:
+
+```jsx
+        <div className="log-section">
+          <h3>Nutzungslog (letzte 10 Einträge)</h3>
+          <pre className="log-pre">
+            {usageLog.length > 0 ? usageLog.join('\n') : '— keine Einträge —'}
+          </pre>
+          {errorLog.length > 0 && (
+            <>
+              <h3>Fehlerlog</h3>
+              <pre className="log-pre log-pre-error">{errorLog.join('\n')}</pre>
+            </>
+          )}
+        </div>
+```
+
+Der vollständige `return` von `SettingsSection` sieht dann so aus:
+
+```jsx
+  return (
+    <section>
+      <h2>Einstellungen</h2>
+      <form onSubmit={handleSave} className="settings-form">
+        {/* ... bestehende settings-rows ... */}
+        {error && <div className="error">{error}</div>}
+        {saved && <div className="success">Gespeichert.</div>}
+        <button type="submit">Speichern</button>
+      </form>
+      <div className="log-section">
+        <h3>Nutzungslog (letzte 10 Einträge)</h3>
+        <pre className="log-pre">
+          {usageLog.length > 0 ? usageLog.join('\n') : '— keine Einträge —'}
+        </pre>
+        {errorLog.length > 0 && (
+          <>
+            <h3>Fehlerlog</h3>
+            <pre className="log-pre log-pre-error">{errorLog.join('\n')}</pre>
+          </>
+        )}
+      </div>
+    </section>
+  );
+```
+
+- [ ] **Schritt 4: CSS ergänzen**
+
+Am Ende von `frontend/src/styles.css` anhängen:
+
+```css
+.log-section {
+  margin-top: 24px;
+  border-top: 1px solid #eee;
+  padding-top: 16px;
+}
+
+.log-section h3 {
+  font-size: 13px;
+  font-weight: 600;
+  color: #555;
+  margin: 0 0 6px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.log-pre {
+  background: #1e2a35;
+  color: #c8d6df;
+  font-family: 'Menlo', 'Consolas', monospace;
+  font-size: 11px;
+  line-height: 1.6;
+  padding: 10px 14px;
+  border-radius: 4px;
+  margin: 0 0 14px;
+  overflow-x: auto;
+  white-space: pre;
+}
+
+.log-pre-error {
+  background: #2d1b1b;
+  color: #f5a0a0;
+}
+```
+
+- [ ] **Schritt 5: Manueller Browser-Test**
+
+Dev-Server starten (`./start.sh`), Admin-UI öffnen (`http://localhost:5173`), anmelden. Unter den Einstellungen müssen die letzten 10 Zeilen von `usage.log` erscheinen. Wenn `error.log` leer ist, kein Fehlerlog-Block sichtbar.
+
+- [ ] **Schritt 6: Commit**
+
+```bash
+git add frontend/src/main.jsx frontend/src/styles.css
+git commit -m "Show last 10 log lines in settings section"
+```
+
+---
+
+### Task 3: Auto-Reload alle 5 Minuten + Zeitstempel
+
+**Files:**
+- Modify: `frontend/src/main.jsx`
+- Modify: `frontend/src/styles.css`
+
+- [ ] **Schritt 1: `refreshKey` und `lastUpdated` State in `App` ergänzen**
+
+Im `App`-Component direkt nach den bestehenden `useState`-Deklarationen:
+
+```jsx
+  const [refreshKey, setRefreshKey] = useState(0);
+  const [lastUpdated, setLastUpdated] = useState(null);
+```
+
+- [ ] **Schritt 2: `fetchApiKeys` so anpassen, dass `lastUpdated` gesetzt wird**
+
+Die bestehende `fetchApiKeys`-Funktion in `App` (Zeilen 215–221) ersetzen:
+
+```jsx
+  const fetchApiKeys = async () => {
+    try {
+      const res = await axios.get('/api/api-keys', { headers: authHeaders(password) });
+      setApiKeys(res.data);
+      setLastUpdated(new Date());
+    } catch {
+      setError('API-Keys konnten nicht geladen werden.');
+    }
+  };
+```
+
+- [ ] **Schritt 3: `setInterval` in `App` einbauen**
+
+Den bestehenden `useEffect` in `App` (Zeilen 210–213) ersetzen:
+
+```jsx
+  useEffect(() => {
+    if (!password) { setLoading(false); return; }
+    fetchApiKeys().finally(() => setLoading(false));
+
+    const timer = setInterval(() => {
+      fetchApiKeys();
+      setRefreshKey(k => k + 1);
+    }, 5 * 60 * 1000);
+
+    return () => clearInterval(timer);
+  }, [password]);
+```
+
+- [ ] **Schritt 4: `refreshKey` an `SettingsSection` übergeben**
+
+In der `return`-Anweisung von `App` den `SettingsSection`-Aufruf anpassen:
+
+```jsx
+      <SettingsSection password={password} refreshKey={refreshKey} />
+```
+
+- [ ] **Schritt 5: Zeitstempel im Header anzeigen**
+
+Den `header`-Block in `App` ersetzen:
+
+```jsx
+      <div className="header">
+        <h1>Ollama Proxy Admin</h1>
+        <div className="header-right">
+          {lastUpdated && (
+            <span className="last-updated">
+              Aktualisiert: {lastUpdated.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })}
+            </span>
+          )}
+          <button onClick={logout}>Abmelden</button>
+        </div>
+      </div>
+```
+
+- [ ] **Schritt 6: CSS für Header-Right und Zeitstempel**
+
+Am Ende von `frontend/src/styles.css` anhängen:
+
+```css
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.last-updated {
+  font-size: 12px;
+  color: #95a5a6;
+}
+```
+
+- [ ] **Schritt 7: Manueller Browser-Test**
+
+Admin-UI öffnen. Nach dem Login: Zeitstempel erscheint oben rechts (HH:MM). Nach 5 Minuten müssen Keys und Logs automatisch aktualisiert werden — Timestamp springt auf neue Uhrzeit.
+
+Zum Schnelltest: Intervall testweise auf `5000` (5 Sekunden) setzen, prüfen, dann wieder auf `5 * 60 * 1000` zurücksetzen.
+
+- [ ] **Schritt 8: Commit**
+
+```bash
+git add frontend/src/main.jsx frontend/src/styles.css
+git commit -m "Add 5-minute auto-reload and last-updated timestamp to admin UI"
+```