janpeter/Scrum4Me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
Scrum4Me/docs/specs/dialogs/task-detail.md
Madhura68 d09ec7e77e docs(dialog): inspector-mode formaliseren in patroon-spec 
§ 4a beschrijft hybrid detail+inline-edit dialogen met dynamische
footer en blur-save: bv. TaskDetailDialog. Maakt expliciet wanneer je
deze variant kiest, welke § 4-eisen blijven gelden en welke vervallen
(geen dirty-guard, geen Cmd+Enter, geen full-record schema).

Profiel docs/specs/dialogs/task-detail.md verwijst nu naar § 4a en
documenteert de layout-keuzes (sticky header, scrollable body,
flex-wrap footer met job-status, plan-textarea max-h-[40vh]).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-04 08:47:45 +02:00

3.5 KiB
Raw Blame History

title status audience language last_updated
TaskDetailDialog Profiel active
ai-agent
contributor
nl 2026-05-04

TaskDetailDialog Profiel

Volgt docs/patterns/dialog.md § 4a — inspector-mode. Dit document beschrijft alleen de Solo-specifieke invulling.

Niet te verwarren met TaskDialog (app/_components/tasks/task-dialog.tsx) — dat is de classic create/edit-dialog voor backlog-taken. TaskDetailDialog is een solo-board-specifieke inspector-dialog die een lopende taak laat zien terwijl de Claude-agent eraan werkt.

Doel

Vanuit het solo-board kan de gebruiker op een task-card klikken om:

  • Het implementation_plan te lezen / bewerken (markdown, blur-save)
  • Verify-instellingen te wijzigen (verify_only, verify_required)
  • Claude-job-status en branch-link te zien
  • De huidige taak naar Claude te sturen / te annuleren

Velden

Veld Type Validatie
implementation_plan string | null max 10000, markdown, blur-save
verify_only boolean toggle, direct opgeslagen
verify_required enum 'ALIGNED' | 'ALIGNED_OR_PARTIAL' | 'ANY' radio, direct opgeslagen

URL- of state-pattern

  • Gekozen: state-based — task: SoloTask | null prop uit solo-board. null = dialog gesloten.
  • Reden: solo-board is one-page; de detail-dialog is altijd in context.

Persistence

Geen klassiek form-submit. Wijzigingen schrijven via fetch('/api/tasks/:id', { method: 'PATCH' }) (route handler), getriggerd door:

  • Plan-textarea: blur of debounced auto-save
  • Verify-toggles: direct bij click

Dit valt buiten de standaard "Server Action met form" flow van docs/patterns/dialog.md § 7. Reden: het zijn fine-grained edits van een lopende taak, geen save-dan-sluit-flow.

Drielaagse demo-policy

  • Laag 1 (proxy.ts): /api/tasks/[id]-route is via apiAuth-helper beschermd; demo-write zou geblokkeerd moeten worden in de route handler zelf
  • Laag 2 (route handler): session.isDemo-check in app/api/tasks/[id]/route.ts (PATCH) — verifieer dat dit aanwezig is
  • Laag 3 (UI): <DemoTooltip show={isDemo}> rond plan-textarea en verify-toggles; readOnly resp disabled-state op de controls

Layout

Volgt §4 + §4a inspector-layout:

  • <DialogContent className={entityDialogContentClasses}> voor de outer (responsive breakpoints, max-h, flex column)
  • Sticky header met shrink-0 + px-6 pt-5 pb-4 + border-b border-outline-variant
  • Body in entityDialogBodyClasses (flex-1 overflow-y-auto px-6 py-6 space-y-6) — secties: Beschrijving, Implementatieplan, verify-only toggle, verify-gate select
  • Footer in entityDialogFooterClasses + flex flex-wrap items-center gap-2 — bevat dynamische job-status en context-knoppen (Voer uit / Wacht op agent / Annuleer / Open PR / Open op GitHub / Verify-result)
  • Plan-textarea krijgt max-h-[40vh] zodat een groot plan niet meteen het hele body-gebied claimt; body kan dan scrollen langs de overige secties

Inspector-mode-vinkjes

Volgens § 4a:

  • ✓ Geen useDirtyCloseGuard — wijzigingen direct gepersisteerd
  • ✓ Geen useDialogSubmitShortcut — geen submit
  • ✓ Geen full-record lib/schemas/<entity>.ts — fine-grained PATCH per veld
  • ✓ Dynamische footer met liveness-info (job-status)
  • ✓ Drielaagse demo-policy aanwezig (zie boven)
  • ✓ MD3-tokens, motion, backdrop, focus-return uit § 8.4-8.5 erven via <DialogContent>

Gerelateerde bestanden

  • components/solo/task-detail-dialog.tsx — implementatie
  • app/api/tasks/[id]/route.ts — PATCH-handler
  • stores/solo-store.ts — client-state