Sprint: Messages-details in uitklaprij, tabel op volle breedte #77

Merged
janpeter merged 3 commits from claude/optimistic-carson-85d073 into main 2026-08-06 09:01:54 +02:00
Owner

Het detailpaneel van 24rem rechts van de messages-tabel kostte de tabel een kwart van zijn breedte en dwong tot heen-en-weer kijken tussen rij en paneel. De details staan nu onder de rij zelf.

Wat er verandert

  • Uitklaprij met accordion-gedrag. Klikken op een rij klapt de details eronder uit; nog een klik sluit hem, en een tweede rij openen sluit de eerste.
  • Toegankelijke toggle. Elke rij begint met een echte <button> met chevron, aria-expanded en aria-controls, plus een sr-only naam ("Details tonen"/"Details verbergen"). Die knop heeft bewust geen eigen handler: zijn klik — ook die van Enter/Space — bubbelt naar de rij, zodat muis en toetsenbord een pad delen en er geen dubbele toggle ontstaat. De acties-cel houdt zijn stopPropagation, dus cancel/requeue/delete klappen niets uit.
  • DetailPanelMessageDetail, niet-nullable message, en de inhoud in drie kolommen: metadata + ID | body | meta-JSON + reply-formulier.
  • Alleen de tabel wordt breder. De tabelcontainer breekt uit de w-[90%]-container; kop, filterbalk, retentiebalk en danger zone blijven op 90%.

Waarom geen base-ui Accordion-component

Die rendert div's en past niet in een <table> zonder de kolomuitlijning en de tabel-semantiek op te geven. De afweging (en de twee afgewezen alternatieven) staat in docs/superpowers/specs/2026-08-06-messages-uitklaprij-design.md.

Dit laat de w-[90%]-keuze uit specs/idea-166-spec bewust los voor de tabel — de enige component die de extra breedte echt gebruikt.

Verificatie

npm run verify groen: lint, typecheck en 801 tests (114 bestanden). Vier nieuwe tests in __tests__/app/queue-messages-view.test.tsx dekken openen, sluiten, een-tegelijk en de actieknop-uitzondering; de bestaande cancel- en clear-suites bleven ongewijzigd groen.

Nog niet visueel in de browser bekeken — /queue/messages zit achter requireWorkersAdmin.

Sprint S-2026-08-06-1 / PBI-17 / ST-041.

Het detailpaneel van 24rem rechts van de messages-tabel kostte de tabel een kwart van zijn breedte en dwong tot heen-en-weer kijken tussen rij en paneel. De details staan nu onder de rij zelf. ## Wat er verandert - **Uitklaprij met accordion-gedrag.** Klikken op een rij klapt de details eronder uit; nog een klik sluit hem, en een tweede rij openen sluit de eerste. - **Toegankelijke toggle.** Elke rij begint met een echte `<button>` met chevron, `aria-expanded` en `aria-controls`, plus een sr-only naam ("Details tonen"/"Details verbergen"). Die knop heeft bewust geen eigen handler: zijn klik — ook die van Enter/Space — bubbelt naar de rij, zodat muis en toetsenbord een pad delen en er geen dubbele toggle ontstaat. De acties-cel houdt zijn `stopPropagation`, dus cancel/requeue/delete klappen niets uit. - **`DetailPanel` → `MessageDetail`**, niet-nullable message, en de inhoud in drie kolommen: metadata + ID | body | meta-JSON + reply-formulier. - **Alleen de tabel wordt breder.** De tabelcontainer breekt uit de `w-[90%]`-container; kop, filterbalk, retentiebalk en danger zone blijven op 90%. ## Waarom geen base-ui `Accordion`-component Die rendert `div`'s en past niet in een `<table>` zonder de kolomuitlijning en de tabel-semantiek op te geven. De afweging (en de twee afgewezen alternatieven) staat in `docs/superpowers/specs/2026-08-06-messages-uitklaprij-design.md`. Dit laat de `w-[90%]`-keuze uit `specs/idea-166-spec` bewust los voor de tabel — de enige component die de extra breedte echt gebruikt. ## Verificatie `npm run verify` groen: lint, typecheck en 801 tests (114 bestanden). Vier nieuwe tests in `__tests__/app/queue-messages-view.test.tsx` dekken openen, sluiten, een-tegelijk en de actieknop-uitzondering; de bestaande cancel- en clear-suites bleven ongewijzigd groen. Nog niet visueel in de browser bekeken — `/queue/messages` zit achter `requireWorkersAdmin`. Sprint S-2026-08-06-1 / PBI-17 / ST-041.
Legt vast waarom er geen base-ui Accordion-component komt (past niet in een
<table>) en hoe de w-[90%]-container uit idea-166-spec alleen voor de tabel
wordt losgelaten.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
feat(messages): details in uitklaprij, tabel op volle breedte
All checks were successful
CI / Verify (pull_request) Successful in 1m52s
a5d169975a
Het detailpaneel van 24rem rechts kostte de tabel een kwart van zijn breedte
en dwong tot heen-en-weer kijken. De details staan nu onder de rij zelf, met
accordion-gedrag: een tweede open rij sluit de eerste.

De tabel breekt uit de w-[90%]-container omdat hij de enige is die de extra
breedte gebruikt; kop, filterbalk, retentie en danger zone blijven op 90%.

Geen base-ui Accordion-component: die rendert div's en past niet in een
<table> zonder de kolomuitlijning op te geven. De toggle is wel een echte
button met aria-expanded/aria-controls, zonder eigen handler - zijn klik
bubbelt naar de rij, zodat muis en toetsenbord een pad delen.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
s4m-codex-reviewer approved these changes 2026-08-06 08:50:51 +02:00
Dismissed
s4m-codex-reviewer left a comment

Verdict: APPROVED

Geen gekoppeld plan gevonden — beoordeeld op codekwaliteit + product-standaarden.

Findings

  • Geen findings.

Review

De diff vervangt het zijpaneel op /queue/messages door een tabel-uitklaprij met accordion-gedrag en behoudt de bestaande operationele acties: cancel, requeue, delete en reply. Dit sluit aan op de productdoc voor Queue messages: de pagina blijft admin-only, live-ververst via de bestaande client-root en blijft gericht op beheer van agent_message-berichten.

De implementatie is voldoende scherp begrensd: alleen MessagesView, de bijbehorende tests en een ontwerpnotitie zijn geraakt. De nieuwe tests dekken openen, sluiten, één-open-rij-gedrag en het voorkomen van accidental expansion via actieknoppen. Geen blokkerende risico's gevonden in architectuur, a11y-basics, statebeheer of regressiedekking.

# Verdict: APPROVED Geen gekoppeld plan gevonden — beoordeeld op codekwaliteit + product-standaarden. ## Findings - Geen findings. ## Review De diff vervangt het zijpaneel op `/queue/messages` door een tabel-uitklaprij met accordion-gedrag en behoudt de bestaande operationele acties: cancel, requeue, delete en reply. Dit sluit aan op de productdoc voor Queue messages: de pagina blijft admin-only, live-ververst via de bestaande client-root en blijft gericht op beheer van `agent_message`-berichten. De implementatie is voldoende scherp begrensd: alleen `MessagesView`, de bijbehorende tests en een ontwerpnotitie zijn geraakt. De nieuwe tests dekken openen, sluiten, één-open-rij-gedrag en het voorkomen van accidental expansion via actieknoppen. Geen blokkerende risico's gevonden in architectuur, a11y-basics, statebeheer of regressiedekking.
fix(messages): tabel terug naar 90% en tijden altijd relatief
All checks were successful
CI / Verify (pull_request) Successful in 2m9s
807fce7ba7
De volle-breedte tabel oogde te breed naast de 90%-kop; hij staat nu in
dezelfde container als de rest.

formatRelative viel na 24 uur terug op een kale datum, terwijl vrijwel elk
bericht in de queue ouder is dan een dag - de kolom 'aangemaakt' toonde
daardoor vooral datums. De ladder loopt nu door via dagen, weken, maanden en
jaren; de absolute datum-tijd blijft de tooltip. Raakt ook de workers-lijst,
die dezelfde helper gebruikt.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
s4m-codex-reviewer left a comment

Verdict: REQUEST_CHANGES

Geen gekoppeld plan gevonden — beoordeeld op codekwaliteit + product-standaarden.

Findings

  • errorapp/(app)/queue/messages/_components/messages-view.tsx:258 — De PR-titel en de toegevoegde ontwerpdoc specificeren dat de messages-tabel naar volle schermbreedte moet uitbreken, maar de tabel staat nog steeds in een mx-auto w-[90%] container. Daardoor krijgt de tabel niet de beoogde extra breedte; alleen het oude rechter detailpaneel verdwijnt. Maak de tabelcontainer daadwerkelijk full-width volgens de eigen scope, en houd alleen kop/filter/retentie/danger-zone op 90%.

  • warningnode_modules:1 — De PR verwijdert een tracked absolute node_modules-symlink. Dat is waarschijnlijk terecht vanuit repo-hygiene, maar deze wijziging staat los van de messages-layout en kan lokale worker-/verify-setups beïnvloeden als die symlink bewust was ingecheckt. Laat dit bij voorkeur buiten deze PR of documenteer expliciet waarom deze cleanup onderdeel van de wijziging is.

Reviewlog

De accordion-rijen, detailrendering en toegevoegde tests lijken in grote lijnen passend bij de Queue messages-pagina zoals gedocumenteerd. De blocker is dat de kernclaim “tabel op volle breedte” niet daadwerkelijk is doorgevoerd.

# Verdict: REQUEST_CHANGES Geen gekoppeld plan gevonden — beoordeeld op codekwaliteit + product-standaarden. ## Findings - **error** — `app/(app)/queue/messages/_components/messages-view.tsx:258` — De PR-titel en de toegevoegde ontwerpdoc specificeren dat de messages-tabel naar volle schermbreedte moet uitbreken, maar de tabel staat nog steeds in een `mx-auto w-[90%]` container. Daardoor krijgt de tabel niet de beoogde extra breedte; alleen het oude rechter detailpaneel verdwijnt. Maak de tabelcontainer daadwerkelijk full-width volgens de eigen scope, en houd alleen kop/filter/retentie/danger-zone op 90%. - **warning** — `node_modules:1` — De PR verwijdert een tracked absolute `node_modules`-symlink. Dat is waarschijnlijk terecht vanuit repo-hygiene, maar deze wijziging staat los van de messages-layout en kan lokale worker-/verify-setups beïnvloeden als die symlink bewust was ingecheckt. Laat dit bij voorkeur buiten deze PR of documenteer expliciet waarom deze cleanup onderdeel van de wijziging is. ## Reviewlog De accordion-rijen, detailrendering en toegevoegde tests lijken in grote lijnen passend bij de Queue messages-pagina zoals gedocumenteerd. De blocker is dat de kernclaim “tabel op volle breedte” niet daadwerkelijk is doorgevoerd.
Sign in to join this conversation.
No reviewers
No labels
No milestone
No project
No assignees
2 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
janpeter/scrum4me-workers!77
No description provided.