feat(frontend): add session and playlist API client

docs/logboek.md

@@ -1,6 +1,6 @@
 # Logboek
 
-Bijgehouden tijdens de bouw. Per blok: wat ik deed, waarom, wat ik heb laten
+Bijgehouden tijdens de bouw. Per stap: wat ik deed, waarom, wat ik heb laten
 vallen.
 ## Dag 1 - korte sessie in de avond
 ### Opzet
@@ -108,7 +108,7 @@ Wat ik heb laten vallen of uitgesteld:
 
 - Refinements doen geen nieuwe search-ronde: turn 2 herordent de bestaande
   geverifieerde pool. Sneller en consistent, maar een refinement haalt
-  geen nieuwe nummers op. Dit is een bewuste afweging, mocht er tijd over 
+  geen nieuwe nummers op. Dit is een bewuste afweging, mocht er tijd over
   zijn is dit 1 van de uitbreidingen die ik op zou kunnen pakken.
 
 ### Streaming API
@@ -120,7 +120,7 @@ Wat ik deed:
   client-disconnect stopt de stream en de grounding.
 - Playlist-endpoint dat schrijft met een vaste naam-prefix, zodat
   aangemaakte playlists later in bulk op te ruimen zijn (ik gebruik mijn
-  persoonlijke spotify account/abbonement voor de demo)..
+  persoonlijke spotify account/abonnement voor de demo).
 - Request-timing middleware met per-request counters (Spotify calls, cache
   hits, LLM tokens) in gestructureerde logs.
 - Seed session voor gehost draaien: in live mode installeert een refresh
@@ -149,7 +149,7 @@ Waarom:
 
 - De quota is per developer-account en per dag; bulk-werk zoals fixtures
   opnemen moet dus gebudgetteerd, en het cache-ontwerp (naam-naar-id,
-  smaakprofiel) is  noodzakelijk om binnen de quota te blijven.
+  smaakprofiel) is noodzakelijk om binnen de quota te blijven.
 
 ### Meer live-test fixes
 
@@ -179,3 +179,25 @@ Waarom:
   foutmelding die echte resultaten verbergt is dat niet. Bij "verras me
   met iets nieuws" vragen valt een groot deel van de kandidaten af bij de
   verificatie, dus juist daar telt dit. Een weg om dit potentieel te voorkomen/verbeteren in de toekomst is het verbeteren van de prompt, of de LLM met behulp van een derde partij API die zonder de Spotify API te overbelasten gebruikt kan worden om echte nummers te vinden.
+
+### Frontend: fundament
+
+Voor de frontend heb ik gedurende de eerste paar uur op de achtergrond Open Design (een
+design-tool) laten lopen. Ik ben geen visual designer, maar op deze manier lukt het mij om met minimale
+effort een geschikt UI bouwpakket te ontwikkelen. De oplevering heeft zo'n vorm dat ik het
+gemakkelijk door een cli agent kan laten uitbouwen in Vue.
+
+Wat ik deed:
+
+- Design tokens uit het ontwerppakket (donker thema, typografie, spacing,
+  motion) als basis voor alle componenten.
+- Typed stream client: fetch met een ReadableStream, regelgebaseerde
+  NDJSON-parsing naar de contract-events, en AbortController-cancellation
+  zodra een nieuwe vraag start.
+- API client voor sessie-status, logout en playlist-save.
+
+Waarom:
+
+- De frontend is de tweede consument van het bevroren contract: elke event
+  wordt tegen de TypeScript-union gevalideerd in plaats van los geparst;
+  wat niet valideert is een transport failure, geen gok.