Dashboard: Stream-Status und Live-Kennzahlen auf einen Blick #18

New issue

Closed

opened 2026-07-12 01:29:00 +02:00 by frank · 0 comments

frank commented

2026-07-12 01:29:00 +02:00

Owner

Kontext

Die Admin-UI hat aktuell die Bereiche Overlays, Verbindungen, Erweiterungen und Einstellungen. Stream-relevante Live-Daten (Status, Titel, Viewer, Follower, Subs, Bits, aktive Chatter) sind nur verstreut über Connector-Details und den Event-Bus verfügbar — es fehlt eine zentrale Übersicht beim App-Start.

Vorhandene Bausteine:

Twitch-Connector: IRC-Chat, EventSub (Follow/Sub/Raid, siehe #1 / #8)
Helix-Client (get_user_by_login, Token-Refresh) — noch ohne Stream-/Channel-Metriken
OBS-Connector (#2): Szene, Streaming-Status potenziell über WebSocket
Streamer.Bot (#3): reichhaltige Event-Quelle für Chat, Subs, Bits u. a.
Event-Bus + SSE/WebSocket für Echtzeit-Updates an Overlays

Ziel

Neuer Navigationspunkt Dashboard (idealerweise Standard-Seite beim Start) mit kompakter Live-Übersicht für den aktuellen Stream.

Pflicht-KPIs (MVP)

Kennzahl	Beschreibung
Stream-Status	Live / Offline / Unbekannt (mit Zeitstempel „seit …“ bei Live)
Viewer	Aktuelle Zuschauerzahl
Follower	Gesamt-Follower des Channels
Subs	Aktive Subscriptions (Tier-Aufschlüsselung optional)
Bits	Bits im aktuellen Stream (oder heute — im UI klar labeln)
Chatter	Eindeutige Chatter in den letzten 5 Minuten
Stream-Titel	Aktueller Titel (+ Kategorie/Spiel, falls verfügbar)

Erweiterte Kennzahlen (Nice-to-have, im Issue mit aufnehmen)

Uptime der aktuellen Session
Letzte Follows / Subs / Raids (Mini-Feed aus EventSub)
Chat-Nachrichten/min (5-Minuten-Fenster)
OBS: aktuelle Szene, Streaming-/Recording-Status
Connector-Gesundheit (Twitch Chat, EventSub, OBS, Streamer.Bot) als Status-Chips
Thumbnail / Stream-Preview (Helix)

Datenquellen (Vorschlag)

Twitch Helix (periodisch, z. B. alle 30–60 s bei Live-Stream):
- GET /streams → Status, Titel, Viewer, Spiel
- GET /channels/followers → Follower-Count
- GET /chat/chatters → Chatter (letzte 5 min; Scope moderator:read:chatters ggf. ergänzen)
- GET /channels → Titel, Kategorie
Event-Bus / EventSub (Echtzeit-Inkremente):
- Follows, neue Subs, Raids → Session-Zähler und Aktivitäts-Feed
Twitch IRC / Streamer.Bot:
- Chatter-Tracking (eigene 5-Min-Sliding-Window-Aggregation als Fallback, wenn Helix-Chatters nicht verfügbar)
- Bits-Events (Streamer.Bot oder zukünftige EventSub/Cheer-Integration)
OBS WebSocket (#2):
- StreamStateChanged, RecordStateChanged für lokale Streaming-Bestätigung

Backend: neuer aggregierter Snapshot-Endpunkt, z. B. GET /api/dashboard (+ optional SSE-Topic dashboard.updated), der Werte zentral cached und nur bei Änderung pusht.

UI / UX

Karten-Layout mit großen Zahlen und klaren Labels (deutsch)
Stream-Status prominent (Badge: LIVE / OFFLINE)
Bei Offline: letzter bekannter Titel oder „—“, keine irreführenden Live-Zahlen
Auto-Refresh (Polling oder SSE); manueller Refresh-Button
Fehlende Datenquelle → KPI ausgegraut mit Hinweis (z. B. „Twitch nicht verbunden“)
Responsive innerhalb des Tauri-Fensters; konsistent mit bestehendem App.css-Design

Akzeptanzkriterien

Neuer Menüpunkt Dashboard in der Sidebar; sinnvolle Default-Seite
API liefert strukturierten Dashboard-Snapshot (JSON-Schema dokumentiert oder typisiert)
MVP-KPIs werden angezeigt, sobald Twitch verbunden ist und Token/Scopes ausreichen
Chatter-Zahl bezieht sich explizit auf ein 5-Minuten-Fenster (Label in der UI)
Stream-Titel und Live/Offline-Status werden korrekt dargestellt
Connector-Fehler degradieren einzelne KPIs, nicht die ganze Seite
make test / make ci grün; Unit-Tests für Aggregation (Chatter-Fenster, Snapshot-Merge)

Abhängigkeiten / Verknüpfung

Baut auf #1 (EventSub) und Twitch-OAuth auf; ggf. zusätzliche Helix-Scopes
OBS-Status optional über #2
Bits/Subs-Detaildaten optional über #3 (Streamer.Bot)
Nicht duplizieren: Diagnose-Oberfläche aus #16 (Logs) — Dashboard fokussiert auf Stream-KPIs, nicht auf technische Logs

Offene Punkte

Bits-Quelle: Helix (begrenzt) vs. Streamer.Bot vs. EventSub channel.cheer — Priorität klären
Sub-Count: Helix GET /subscriptions vs. EventSub-Inkremente vs. Streamer.Bot
Polling-Intervall vs. rein event-getriebenes Update
Mehrere Channels / Multi-Account (aktuell vermutlich out of scope)

## Kontext Die Admin-UI hat aktuell die Bereiche **Overlays**, **Verbindungen**, **Erweiterungen** und **Einstellungen**. Stream-relevante Live-Daten (Status, Titel, Viewer, Follower, Subs, Bits, aktive Chatter) sind nur verstreut über Connector-Details und den Event-Bus verfügbar — es fehlt eine zentrale Übersicht beim App-Start. Vorhandene Bausteine: - Twitch-Connector: IRC-Chat, EventSub (Follow/Sub/Raid, siehe #1 / #8) - Helix-Client (`get_user_by_login`, Token-Refresh) — noch ohne Stream-/Channel-Metriken - OBS-Connector (#2): Szene, Streaming-Status potenziell über WebSocket - Streamer.Bot (#3): reichhaltige Event-Quelle für Chat, Subs, Bits u. a. - Event-Bus + SSE/WebSocket für Echtzeit-Updates an Overlays ## Ziel Neuer Navigationspunkt **Dashboard** (idealerweise Standard-Seite beim Start) mit kompakter Live-Übersicht für den aktuellen Stream. ### Pflicht-KPIs (MVP) | Kennzahl | Beschreibung | |----------|--------------| | **Stream-Status** | Live / Offline / Unbekannt (mit Zeitstempel „seit …“ bei Live) | | **Viewer** | Aktuelle Zuschauerzahl | | **Follower** | Gesamt-Follower des Channels | | **Subs** | Aktive Subscriptions (Tier-Aufschlüsselung optional) | | **Bits** | Bits im aktuellen Stream (oder heute — im UI klar labeln) | | **Chatter** | Eindeutige Chatter in den letzten 5 Minuten | | **Stream-Titel** | Aktueller Titel (+ Kategorie/Spiel, falls verfügbar) | ### Erweiterte Kennzahlen (Nice-to-have, im Issue mit aufnehmen) - Uptime der aktuellen Session - Letzte Follows / Subs / Raids (Mini-Feed aus EventSub) - Chat-Nachrichten/min (5-Minuten-Fenster) - OBS: aktuelle Szene, Streaming-/Recording-Status - Connector-Gesundheit (Twitch Chat, EventSub, OBS, Streamer.Bot) als Status-Chips - Thumbnail / Stream-Preview (Helix) ## Datenquellen (Vorschlag) 1. **Twitch Helix** (periodisch, z. B. alle 30–60 s bei Live-Stream): - `GET /streams` → Status, Titel, Viewer, Spiel - `GET /channels/followers` → Follower-Count - `GET /chat/chatters` → Chatter (letzte 5 min; Scope `moderator:read:chatters` ggf. ergänzen) - `GET /channels` → Titel, Kategorie 2. **Event-Bus / EventSub** (Echtzeit-Inkremente): - Follows, neue Subs, Raids → Session-Zähler und Aktivitäts-Feed 3. **Twitch IRC / Streamer.Bot**: - Chatter-Tracking (eigene 5-Min-Sliding-Window-Aggregation als Fallback, wenn Helix-Chatters nicht verfügbar) - Bits-Events (Streamer.Bot oder zukünftige EventSub/Cheer-Integration) 4. **OBS WebSocket** (#2): - `StreamStateChanged`, `RecordStateChanged` für lokale Streaming-Bestätigung Backend: neuer aggregierter Snapshot-Endpunkt, z. B. `GET /api/dashboard` (+ optional SSE-Topic `dashboard.updated`), der Werte zentral cached und nur bei Änderung pusht. ## UI / UX - Karten-Layout mit großen Zahlen und klaren Labels (deutsch) - Stream-Status prominent (Badge: LIVE / OFFLINE) - Bei Offline: letzter bekannter Titel oder „—“, keine irreführenden Live-Zahlen - Auto-Refresh (Polling oder SSE); manueller Refresh-Button - Fehlende Datenquelle → KPI ausgegraut mit Hinweis (z. B. „Twitch nicht verbunden“) - Responsive innerhalb des Tauri-Fensters; konsistent mit bestehendem `App.css`-Design ## Akzeptanzkriterien - [ ] Neuer Menüpunkt **Dashboard** in der Sidebar; sinnvolle Default-Seite - [ ] API liefert strukturierten Dashboard-Snapshot (JSON-Schema dokumentiert oder typisiert) - [ ] MVP-KPIs werden angezeigt, sobald Twitch verbunden ist und Token/Scopes ausreichen - [ ] Chatter-Zahl bezieht sich explizit auf ein 5-Minuten-Fenster (Label in der UI) - [ ] Stream-Titel und Live/Offline-Status werden korrekt dargestellt - [ ] Connector-Fehler degradieren einzelne KPIs, nicht die ganze Seite - [ ] `make test` / `make ci` grün; Unit-Tests für Aggregation (Chatter-Fenster, Snapshot-Merge) ## Abhängigkeiten / Verknüpfung - Baut auf #1 (EventSub) und Twitch-OAuth auf; ggf. zusätzliche Helix-Scopes - OBS-Status optional über #2 - Bits/Subs-Detaildaten optional über #3 (Streamer.Bot) - Nicht duplizieren: Diagnose-Oberfläche aus #16 (Logs) — Dashboard fokussiert auf Stream-KPIs, nicht auf technische Logs ## Offene Punkte - [ ] Bits-Quelle: Helix (begrenzt) vs. Streamer.Bot vs. EventSub `channel.cheer` — Priorität klären - [ ] Sub-Count: Helix `GET /subscriptions` vs. EventSub-Inkremente vs. Streamer.Bot - [ ] Polling-Intervall vs. rein event-getriebenes Update - [ ] Mehrere Channels / Multi-Account (aktuell vermutlich out of scope)

frank referenced this issue

2026-07-12 01:33:38 +02:00

Config-Assistant: Geführtes Onboarding bis zum ersten Stream #19

frank referenced this issue from a commit

2026-07-12 01:36:47 +02:00

feat: add live stream dashboard (#18)

frank closed this issue

2026-07-12 01:37:00 +02:00

frank referenced this issue

2026-07-15 18:55:06 +02:00

Analytics Dashboard: Viewerdaten, Wachstum und Revenue-Übersicht #36