feat(solo-dialogs): layout-conformance + entity-profielen

Story 6 van PBI "Alle dialogen conform docs/patterns/dialog.md". - batch-enqueue-blocker-dialog: entityDialog* layout-classes - task-detail-dialog: entityDialog* layout-classes (rest van interne layout blijft custom — hybride detail+blur-save view) - docs/specs/dialogs/task-detail.md — profiel dat het blur-save + PATCH-route patroon documenteert (afwijking van klassieke Server-Action+form flow) - docs/specs/dialogs/batch-enqueue-blocker.md — profiel voor informational confirm-dialog Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-04 07:32:57 +02:00 · 2026-05-04 07:32:57 +02:00 · 0a58557e9d
commit 0a58557e9d
parent 784791d8f9
5 changed files with 157 additions and 34 deletions
--- a/components/solo/batch-enqueue-blocker-dialog.tsx
+++ b/components/solo/batch-enqueue-blocker-dialog.tsx
@ -1,8 +1,13 @@
 'use client'

-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog'
 import { Button } from '@/components/ui/button'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+import {
+  entityDialogContentClasses,
+  entityDialogFooterClasses,
+  entityDialogHeaderClasses,
+} from '@/components/shared/entity-dialog-layout'

 interface BatchEnqueueBlockerDialogProps {
  open: boolean
@ -32,12 +37,12 @@ export function BatchEnqueueBlockerDialog({

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-md">
-        <DialogHeader>
-          <DialogTitle>Blokkade gedetecteerd</DialogTitle>
-        </DialogHeader>
+      <DialogContent showCloseButton={false} className={entityDialogContentClasses}>
+        <div className={entityDialogHeaderClasses}>
+          <DialogTitle className="text-xl font-semibold">Blokkade gedetecteerd</DialogTitle>
+        </div>

-        <div className="space-y-3 py-2 text-sm text-foreground">
+        <div className="flex-1 overflow-y-auto px-6 py-6 space-y-6 text-sm text-foreground">
          <p>
            {BLOCKER_REASON_LABELS[blockerReason]}:{' '}
            <span className="font-medium">{blockerLabel}</span>.
@ -53,33 +58,35 @@ export function BatchEnqueueBlockerDialog({
          )}
        </div>

-        <div className="flex justify-end gap-2 pt-2 border-t border-outline-variant">
-          <Button variant="ghost" onClick={onCancel}>
-            Annuleer
-          </Button>
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger
-                render={
-                  <span>
-                    <Button
-                      onClick={onConfirm}
-                      disabled={noTasksBeforeBlocker}
-                    >
-                      {prefixCount === 1
-                        ? `Stuur ${prefixCount} taak tot aan blokkade`
-                        : `Stuur ${prefixCount} taken tot aan blokkade`}
-                    </Button>
-                  </span>
-                }
-              />
-              {noTasksBeforeBlocker && (
-                <TooltipContent side="top" className="text-xs">
-                  Geen taken vóór blokkade
-                </TooltipContent>
-              )}
-            </Tooltip>
-          </TooltipProvider>
+        <div className={entityDialogFooterClasses}>
+          <div className="flex justify-end gap-2">
+            <Button variant="ghost" onClick={onCancel}>
+              Annuleer
+            </Button>
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger
+                  render={
+                    <span>
+                      <Button
+                        onClick={onConfirm}
+                        disabled={noTasksBeforeBlocker}
+                      >
+                        {prefixCount === 1
+                          ? `Stuur ${prefixCount} taak tot aan blokkade`
+                          : `Stuur ${prefixCount} taken tot aan blokkade`}
+                      </Button>
+                    </span>
+                  }
+                />
+                {noTasksBeforeBlocker && (
+                  <TooltipContent side="top" className="text-xs">
+                    Geen taken vóór blokkade
+                  </TooltipContent>
+                )}
+              </Tooltip>
+            </TooltipProvider>
+          </div>
        </div>
      </DialogContent>
    </Dialog>
--- a/components/solo/task-detail-dialog.tsx
+++ b/components/solo/task-detail-dialog.tsx
@ -5,6 +5,7 @@ import Link from 'next/link'
 import { toast } from 'sonner'
 import { Markdown } from '@/components/markdown'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { entityDialogContentClasses } from '@/components/shared/entity-dialog-layout'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { Textarea } from '@/components/ui/textarea'
@ -373,7 +374,7 @@ function TaskDetailContent({ task, productId, isDemo, repoUrl, onClose }: TaskDe
 export function TaskDetailDialog({ task, productId, isDemo, repoUrl, onClose }: TaskDetailDialogProps) {
  return (
    <Dialog open={!!task} onOpenChange={(open) => { if (!open) onClose() }}>
-      <DialogContent className="sm:max-w-lg">
+      <DialogContent showCloseButton={false} className={entityDialogContentClasses}>
        {task && (
          <TaskDetailContent
            key={task.id}
--- a/docs/INDEX.md
+++ b/docs/INDEX.md
@ -23,10 +23,12 @@ Auto-generated on 2026-05-04 from front-matter and headings.

 | Title | Status | Updated |
 |---|---|---|
+| [BatchEnqueueBlockerDialog Profiel](./specs/dialogs/batch-enqueue-blocker.md) | active | 2026-05-04 |
 | [PbiDialog Profiel](./specs/dialogs/pbi.md) | active | 2026-05-04 |
 | [ProductDialog Profiel](./specs/dialogs/product.md) | active | 2026-05-04 |
 | [Sprint Dialogs Profiel](./specs/dialogs/sprint.md) | active | 2026-05-04 |
 | [StoryDialog Profiel](./specs/dialogs/story.md) | active | 2026-05-04 |
+| [TaskDetailDialog Profiel](./specs/dialogs/task-detail.md) | active | 2026-05-04 |
 | [TaskDialog Profiel](./specs/dialogs/task.md) | active | 2026-05-03 |
 | [Scrum4Me — Functionele Specificatie](./specs/functional.md) | active | 2026-05-03 |
 | [DevPlanner — User Personas](./specs/personas.md) | active | 2026-05-03 |
--- a/docs/specs/dialogs/batch-enqueue-blocker.md
+++ b/docs/specs/dialogs/batch-enqueue-blocker.md
@ -0,0 +1,48 @@
+---
+title: "BatchEnqueueBlockerDialog Profiel"
+status: active
+audience: [ai-agent, contributor]
+language: nl
+last_updated: 2026-05-04
+---
+
+# BatchEnqueueBlockerDialog Profiel
+
+> Volgt `docs/patterns/dialog.md`. Dit is een **informational / confirm-dialog** zonder eigen entiteit — geen schema, geen demo-policy, geen server actions.
+
+## Doel
+
+Wanneer de gebruiker in solo-mode "stuur volgende N taken naar Claude" probeert maar er een blokkade voor de N-de taak ligt (een PBI op `blocked` of een taak op `review`), stopt de UI het in deze dialog en biedt aan om alleen de taken **vóór** de blokkade te queuen.
+
+## Modus
+
+Confirm-dialog. Geen create/edit/detail. Geen form.
+
+## Props
+
+```ts
+{
+  open: boolean
+  onOpenChange: (v: boolean) => void
+  prefixCount: number          // hoeveel taken vóór de blokkade liggen
+  blockerReason: 'task-review' | 'pbi-blocked'
+  blockerLabel: string         // titel van de blokkerende PBI/taak
+  onConfirm: () => void        // alleen taken vóór de blokkade queuen
+  onCancel: () => void         // helemaal annuleren
+}
+```
+
+## URL- of state-pattern
+
+- Gekozen: **state-based** — gerendeerd door `solo-board` met een `BatchEnqueueState | null`-prop.
+
+## Layout
+
+Gebruikt `entityDialogContentClasses` voor responsive sizing.
+
+## Bewust NIET in v1
+
+- ❌ **Geen demo-policy** — de dialog schrijft niet zelf; demo-blokkering vindt plaats wanneer `onConfirm` de daadwerkelijke `enqueueClaudeJobAction` aanroept (laag 2 demo-check zit daar).
+- ❌ **Geen schema** — geen veldwaarden in/uit; alleen confirm/cancel.
+- ❌ **Geen dirty-close-guard** — geen state om dirty te raken.
+- ❌ **Geen Cmd/Ctrl+Enter** — niet zinvol voor confirm-only.
--- a/docs/specs/dialogs/task-detail.md
+++ b/docs/specs/dialogs/task-detail.md
@ -0,0 +1,65 @@
+---
+title: "TaskDetailDialog Profiel"
+status: active
+audience: [ai-agent, contributor]
+language: nl
+last_updated: 2026-05-04
+---
+
+# TaskDetailDialog Profiel
+
+> Volgt `docs/patterns/dialog.md`. Dit document beschrijft alleen de Solo-specifieke afwijkingen.
+
+> **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 detail+edit-overlay 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
+
+Gebruikt `entityDialogContentClasses` voor responsive sizing (§4 spec). Body-layout intern is custom (gegroepeerde secties in plaats van form-fields) want het is een hybride detail+edit-view, niet een klassiek form.
+
+## Bewust NIET in v1
+
+- ❌ **Klassiek save-dan-sluit-form** — blur-save is bewust gekozen omdat de gebruiker tussendoor de plan-tekst herziet terwijl Claude bezig is.
+- ❌ **Dirty-close-guard** — niet relevant zonder klassiek submit-form; wijzigingen worden direct gepersisteerd.
+- ❌ **Cmd/Ctrl+Enter shortcut** — geen submit, dus n.v.t.
+- ❌ **422-fieldErrors** — fine-grained PATCH-route geeft simpele 200/400/403; geen veldgewijze rendering nodig in deze UX.
+
+## Gerelateerde bestanden
+
+- `components/solo/task-detail-dialog.tsx` — implementatie
+- `app/api/tasks/[id]/route.ts` — PATCH-handler
+- `stores/solo-store.ts` — client-state