twitch4steamdeck/CLAUDE_PROGRESS.md

Twitch4SteamDeck — Fortschritts-Snapshot

Stand: 2026-04-07. Diese Datei dient als Übergabe zwischen Sessions. Lies zuerst: diese Datei + todo.md. Der vollständige Architekturplan liegt unter C:\Users\andre\.claude\plans\smooth-shimmying-parasol.md (im Repo gespiegelt als plan.md).

---

Bereits abgeschlossen

✅ Projekt-Skelett (Electron + Vite + React + TypeScript)

• package.json, tsconfig.json, tsconfig.node.json, tsconfig.web.json
• electron.vite.config.ts, electron-builder.yml, .gitignore
• Main-Prozess Stub: src/main/index.ts (BrowserWindow 1280×800, dunkles Theme)
• Preload-Stub: src/preload/index.ts (contextBridge → window.t4sd)
• Renderer: src/renderer/index.html, src/renderer/src/main.tsx, App.tsx, styles/global.css (Big-Screen-Baseline)
• Status: vom User bestätigt — npm run dev öffnet Fenster mit „Twitch4SteamDeck".

✅ Twitch OAuth Device Code Flow

• src/main/auth/deviceCodeFlow.ts — requestDeviceCode(), pollForToken(), refreshAccessToken(). Endpoints: https://id.twitch.tv/oauth2/device, https://id.twitch.tv/oauth2/token. Polling respektiert interval, slow_down, expired, denied, cancelled.
• src/main/auth/tokenStore.ts — Persistenz via Electron safeStorage (kein keytar/native module), Datei: userData/twitch-tokens.bin. Fallback unverschlüsselt mit 0o600 falls Encryption nicht verfügbar.
• src/main/auth/authService.ts — EventEmitter, Methoden: init(), startDeviceFlow(), cancelFlow(), logout(), getValidAccessToken() (mit Auto-Refresh, 60s Safety-Margin). Scope MVP: ['user:read:follows']. Emittiert 'auth-event'.
• src/main/ipc/handlers.ts — IPC-Kanäle: auth:get-status, auth:start-device-flow, auth:cancel, auth:logout, auth:is-configured, auth:event (main → renderer).
• src/preload/index.ts — exponiert window.t4sd.auth.{isConfigured, getStatus, startDeviceFlow, cancel, logout, onEvent}.
• src/renderer/src/screens/LoginScreen.tsx — Phasen idle | starting | awaiting | error | not-configured, QR-Code via qrcode-Lib, Countdown, Cancel-Button.
• src/renderer/src/App.tsx — Statusbasiertes Routing (logged-out → LoginScreen, logged-in → Platzhalter mit Logout-Button).
• src/renderer/src/types/t4sd.d.ts — globale Window-Typen (manuell synchron zu Preload).
• .env.example — Vorlage für MAIN_VITE_TWITCH_CLIENT_ID.
• Status: Code geschrieben, noch nicht vom User end-to-end getestet.

---

Wo wir gerade stehen

Mitten in: Schritt 1 (Auth) ist code-complete, wartet auf Verifikation durch den User.

Konkret offen:

1. User muss eine Twitch-App auf https://dev.twitch.tv/console/apps registrieren (Public Client, Redirect http://localhost) und die Client-ID in .env eintragen:

   MAIN_VITE_TWITCH_CLIENT_ID=<id>
   

2. npm install muss erneut laufen (neue Deps: qrcode, @types/qrcode).
3. npm run dev starten und den kompletten Login-Flow durchspielen:
   • Button „Mit Twitch verbinden" → QR + Code erscheinen
   • Auf Handy twitch.tv/activate öffnen, Code eingeben
   • App sollte automatisch zu „Eingeloggt"-Platzhalter wechseln
   • Neustart der App → sollte eingeloggt bleiben (Tokens in userData/twitch-tokens.bin)

Mögliche Stolpersteine, die morgen früh zu prüfen sind:

• import.meta.env.MAIN_VITE_TWITCH_CLIENT_ID im Main-Prozess: setzt voraus, dass electron-vite die .env lädt — falls nicht, alternativ process.env.MAIN_VITE_TWITCH_CLIENT_ID oder via define-Plugin in electron.vite.config.ts injizieren.
• TypeScript könnte über import.meta.env im Main-Prozess meckern. tsconfig.node.json hat "types": ["node", "electron-vite/node"] — sollte reichen.
• Renderer-Types: src/renderer/src/types/t4sd.d.ts muss von tsconfig.web.json erfasst werden (ist über src/renderer/**/*.ts abgedeckt).

---

Nächster Schritt morgen (in dieser Reihenfolge)

1. Fragen: „Hat der Login-Flow gestern durchgelaufen? Falls Fehler, welche Logs?"
2. Falls Fehler: Erst diese fixen, bevor neue Features dazukommen.
   • Häufiger Verdächtiger: import.meta.env-Loading im Main → Workaround dokumentiert oben.
3. Falls grün: Direkt in Schritt 2: Twitch Helix-Client + Followed-Channels-Home-Screen einsteigen.
   • Neue Dateien planen: src/main/twitch/helixClient.ts, src/main/twitch/types.ts, IPC-Kanäle twitch:get-followed, twitch:get-live-status, Renderer-Screen src/renderer/src/screens/HomeScreen.tsx mit Spatial-Navigation-Karten.
   • Helix-Endpoints für MVP: GET /users (own), GET /channels/followed, GET /streams (batched).

---

Wie morgen effektiv weiterarbeiten?

Empfehlung: Beim Sessionstart diese drei Dateien in dieser Reihenfolge lesen lassen:

1. CLAUDE_PROGRESS.md (diese Datei) — Snapshot
2. todo.md — Checkboxen-Tracker (jeder erledigte Schritt wird dort sofort abgehakt)
3. plan.md — gespiegelter Architekturplan (Quelle: ~/.claude/plans/smooth-shimmying-parasol.md)

Workflow:

• Vor jeder Subaufgabe: relevanten Abschnitt in todo.md checken.
• Nach Abschluss: Checkbox in todo.md setzen + 1-Zeilen-Update in CLAUDE_PROGRESS.md unter „Bereits abgeschlossen".
• Bei Architekturänderungen: plan.md updaten (nicht nur die Kopie im ~/.claude/plans/).

Erste Anweisung morgen an Claude (copy-paste):

„Lies CLAUDE_PROGRESS.md, todo.md und plan.md. Frag mich, ob der Login-Flow gestern durchgelaufen ist, und mach dann mit dem nächsten offenen Schritt weiter."