fix(frontend): harden the streaming ui and extract copy and constants
Some checks are pending
ci / backend (push) Waiting to run
ci / frontend (push) Waiting to run

This commit is contained in:
Justin Visser 2026-08-10 15:42:18 +02:00
parent 036ef3cc6f
commit a3af8f45cc
36 changed files with 1662 additions and 226 deletions

View file

@ -239,3 +239,37 @@ Wat ik heb laten vallen of uitgesteld:
en de server bewaart niets; een history-lijst kan later contract-schoon
via localStorage, zonder server-state. Potentiele extra als er tijd
over is, geen onderdeel van de kern.
### Frontend: review-pass op de conversie
De findings hieronder komen uit twee richtingen: een adversarial review
die ik op de conversie heb laten draaien, en mijn eigen review van de
code. Beide sets zijn in dezelfde pass verwerkt.
Wat ik deed:
- Uit de adversarial review. De grootste finding: API-strings gingen
ongefilterd een href in (URL-injectie mogelijk!); links worden nu alleen
gezet voor https-URLs op open.spotify.com.
- Verder: een expliciete phase machine op de event-stream (metadata, dan
tracks/warnings, dan precies 1 keer done of error; al het andere is een
transport failure), een race gefixt waarbij een snelle nieuwe vraag een
afgeronde beurt als cancelled kon markeren, response-body cancellation
op parse-fouten, query-invoer begrensd op de request-limiet, warnings
in een live region voor screenreaders, focus-herstel van het dev panel,
en contrast op WCAG AA gebracht.
- Een vitest-suite toegevoegd (26 tests) die de NDJSON-parser op
gefragmenteerde chunks, error-terminaliteit, de request-caps en
abort-races vastlegt; draait mee in CI.
- Alle user-facing tekst uit de componenten geextraheerd naar 1 getypeerde
messages-module (i18n-klaar zonder er nu een framework voor mee te nemen),
alle magic numbers vervangen door
benoemde constants met per waarde een reden (de request-caps verwijzen
expliciet naar de backend schema-bounds), en dichtgeschreven TypeScript
herschreven naar leesbare code zonder gedragsverandering.
Waarom:
- Machine-geconverteerde UI-code krijgt dezelfde behandeling als de
backend: een review-pass met concrete findings en een test-suite die de
contractkritische randen vastzet, voordat het richting main gaat.