Madhura68
d09ec7e77e
§ 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>
73 lines
3.5 KiB
Markdown
73 lines
3.5 KiB
Markdown
---
|
|
title: "TaskDetailDialog Profiel"
|
|
status: active
|
|
audience: [ai-agent, contributor]
|
|
language: nl
|
|
last_updated: 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
|