M14: TaskDialog (create/edit) + story auto-promotion (#21)

* chore(ST-1112): add deps for task dialog

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(ST-1112): add shared zod schema for task dialog

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(ST-1112): add missing MD3 tokens for task dialog

outline-variant, on-error-container, status-review (light + dark)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(ST-1112): add saveTask and deleteTask server actions for TaskDialog

Unified create/edit action (saveTask) replaces separate formData-based
actions for the new TaskDialog. Uses shared zod schema, structured
SaveTaskResult union type, and context-aware revalidatePath for both
sprint and backlog routes.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(ST-1112): add TaskDialog component (create & edit mode)

Builds the full TaskDialog on top of the existing @base-ui/react
Dialog primitive. Covers create mode, edit mode (status field +
created_at metadata + delete), dirty-check AlertDialog, delete
confirm AlertDialog, Cmd+Enter submit, and per-field char counters.
Uses react-hook-form + zodResolver against the shared taskSchema.
Priority and status are extracted to PrioritySegmented and
StatusSelect sub-components using MD3 tokens throughout.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(ST-1112): refactor task-list to open TaskDialog via URL params

Replaces inline create/edit forms with router.push navigation:
- Clicking a task row → ?editTask=<id>
- "+ Taak" button → ?newTask=1&storyId=<storyId>
Removes CreateTaskForm, EditSubmitButton, updateTaskAction, and
createTaskAction from the component. Status toggle and DnD remain
unchanged. Rows now have cursor-pointer and keyboard a11y.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(ST-1112): wire TaskDialog into sprint page via searchParams

Sprint page now reads ?newTask, ?storyId, and ?editTask query params.
For edit mode: fetches the task server-side with productAccessFilter
scope (invalid/foreign IDs redirect to closePath). Renders TaskDialog
when either param is present. closePath is the sprint route without
query params.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(ST-1112): add Suspense skeleton for edit-mode task loading

Extracts task fetch into EditTaskLoader (async server component) so
the sprint board renders immediately while the task loads.
TaskDialogSkeleton shows 3 grey bars during the fetch. Invalid or
out-of-scope task IDs redirect to closePath.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(ST-1112): render description as markdown in task-detail-dialog

Solo task detail now renders description via react-markdown +
remark-gfm with prose styling. Sanitizes script/iframe elements.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* test(ST-1112): add saveTask/deleteTask server action tests

Covers all three demo-policy layers and cross-tenant scope:
demo blocked (403), unauthenticated blocked, validation 422,
edit cross-tenant forbidden, create cross-tenant forbidden,
and happy-path for both edit and create.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(ST-1112): add updateTaskStatusWithStoryPromotion helper

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(ST-1112): wire story-promotion into saveTask and PATCH /api/tasks/:id

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* docs(ST-1112): add task-dialog doc and architecture note

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* chore: extend allowed tools in settings.local.json

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(ST-1113): add 200ms animation-delay to TaskDialogSkeleton to prevent flicker

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(ST-1114): add DirtyCloseGuard reusable component for dirty-form close confirmation

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(ST-1114): add shared Markdown wrapper, apply to task-detail and story-dialog

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* chore: allow grep -E pattern in settings.local.json

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

app/(app)/products/[id]/sprint/page.tsx

@@ -1,3 +1,4 @@
+import { Suspense } from 'react'
 import { notFound, redirect } from 'next/navigation'
 import { getSession } from '@/lib/auth'
 import { getAccessibleProduct } from '@/lib/product-access'
@@ -6,14 +7,24 @@ import { SprintBoardClient } from '@/components/sprint/sprint-board-client'
 import { SprintHeader } from '@/components/sprint/sprint-header'
 import type { SprintStory, PbiWithStories, ProductMember } from '@/components/sprint/sprint-backlog'
 import type { Task } from '@/components/sprint/task-list'
+import { TaskDialog } from '@/app/_components/tasks/task-dialog'
+import { EditTaskLoader } from '@/app/_components/tasks/edit-task-loader'
+import { TaskDialogSkeleton } from '@/app/_components/tasks/task-dialog-skeleton'
 import Link from 'next/link'
 
 interface Props {
   params: Promise<{ id: string }>
+  searchParams: Promise<{
+    newTask?: string
+    storyId?: string
+    editTask?: string
+  }>
 }
 
-export default async function SprintBoardPage({ params }: Props) {
+export default async function SprintBoardPage({ params, searchParams }: Props) {
   const { id } = await params
+  const { newTask, storyId: storyIdParam, editTask } = await searchParams
+
   const session = await getSession()
   if (!session.userId) redirect('/login')
 
@@ -104,6 +115,7 @@ export default async function SprintBoardPage({ params }: Props) {
 
   const sprintStoryIdList = sprintStories.map(s => s.id)
   const isDemo = session.isDemo ?? false
+  const closePath = `/products/${id}/sprint`
 
   return (
     <div className="flex flex-col h-full">
@@ -134,6 +146,27 @@ export default async function SprintBoardPage({ params }: Props) {
           ← Product Backlog
         </Link>
       </div>
+
+      {newTask && (
+        <TaskDialog
+          storyId={storyIdParam}
+          productId={id}
+          closePath={closePath}
+          isDemo={isDemo}
+        />
+      )}
+
+      {editTask && !newTask && (
+        <Suspense fallback={<TaskDialogSkeleton />}>
+          <EditTaskLoader
+            taskId={editTask}
+            userId={session.userId}
+            productId={id}
+            closePath={closePath}
+            isDemo={isDemo}
+          />
+        </Suspense>
+      )}
     </div>
   )
 }

app/_components/tasks/edit-task-loader.tsx

@@ -0,0 +1,47 @@
+import { redirect } from 'next/navigation'
+import { prisma } from '@/lib/prisma'
+import { productAccessFilter } from '@/lib/product-access'
+import { TaskDialog } from './task-dialog'
+
+interface EditTaskLoaderProps {
+  taskId: string
+  userId: string
+  productId: string
+  closePath: string
+  isDemo: boolean
+}
+
+export async function EditTaskLoader({
+  taskId,
+  userId,
+  productId,
+  closePath,
+  isDemo,
+}: EditTaskLoaderProps) {
+  const task = await prisma.task.findFirst({
+    where: {
+      id: taskId,
+      story: { product: productAccessFilter(userId) },
+    },
+    select: {
+      id: true,
+      title: true,
+      description: true,
+      implementation_plan: true,
+      priority: true,
+      status: true,
+      created_at: true,
+    },
+  })
+
+  if (!task) redirect(closePath)
+
+  return (
+    <TaskDialog
+      task={task}
+      productId={productId}
+      closePath={closePath}
+      isDemo={isDemo}
+    />
+  )
+}

app/_components/tasks/priority-segmented.tsx

@@ -0,0 +1,56 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+
+const PRIORITIES = [
+  {
+    value: 1,
+    label: 'P1 Critical',
+    selected: 'bg-error-container text-on-error-container border-transparent',
+  },
+  {
+    value: 2,
+    label: 'P2 High',
+    selected: 'bg-priority-high/15 text-priority-high border-priority-high/30',
+  },
+  {
+    value: 3,
+    label: 'P3 Medium',
+    selected: 'bg-primary text-primary-foreground border-transparent',
+  },
+  {
+    value: 4,
+    label: 'P4 Low',
+    selected: 'bg-muted text-foreground border-border',
+  },
+]
+
+interface PrioritySegmentedProps {
+  value: number
+  onChange: (value: number) => void
+  disabled?: boolean
+}
+
+export function PrioritySegmented({ value, onChange, disabled }: PrioritySegmentedProps) {
+  return (
+    <div className="flex gap-1 flex-wrap" role="group" aria-label="Prioriteit">
+      {PRIORITIES.map(p => (
+        <button
+          key={p.value}
+          type="button"
+          onClick={() => !disabled && onChange(p.value)}
+          aria-pressed={value === p.value}
+          disabled={disabled}
+          className={cn(
+            'rounded-lg border px-3 py-1.5 text-sm transition-colors disabled:opacity-50 disabled:cursor-not-allowed',
+            value === p.value
+              ? cn('font-medium', p.selected)
+              : 'border-border text-muted-foreground hover:bg-muted hover:text-foreground',
+          )}
+        >
+          {p.label}
+        </button>
+      ))}
+    </div>
+  )
+}

app/_components/tasks/status-select.tsx

@@ -0,0 +1,55 @@
+'use client'
+
+import type { TaskStatus } from '@prisma/client'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+} from '@/components/ui/select'
+import { cn } from '@/lib/utils'
+
+const STATUS_CONFIG: Record<TaskStatus, { label: string; dot: string }> = {
+  TO_DO: { label: 'To Do', dot: 'bg-muted-foreground' },
+  IN_PROGRESS: { label: 'Bezig', dot: 'bg-status-in-progress' },
+  REVIEW: { label: 'Review', dot: 'bg-status-review' },
+  DONE: { label: 'Klaar', dot: 'bg-status-done' },
+}
+
+const STATUS_ORDER: TaskStatus[] = ['TO_DO', 'IN_PROGRESS', 'REVIEW', 'DONE']
+
+function StatusIndicator({ status }: { status: TaskStatus }) {
+  return (
+    <span className="flex items-center gap-2">
+      <span className={cn('size-2.5 rounded-full shrink-0', STATUS_CONFIG[status].dot)} />
+      {STATUS_CONFIG[status].label}
+    </span>
+  )
+}
+
+interface StatusSelectProps {
+  value?: TaskStatus
+  onChange: (value: TaskStatus) => void
+  disabled?: boolean
+}
+
+export function StatusSelect({ value = 'TO_DO', onChange, disabled }: StatusSelectProps) {
+  return (
+    <Select
+      value={value}
+      onValueChange={(v) => onChange(v as TaskStatus)}
+      disabled={disabled}
+    >
+      <SelectTrigger className="w-48">
+        <StatusIndicator status={value} />
+      </SelectTrigger>
+      <SelectContent>
+        {STATUS_ORDER.map(status => (
+          <SelectItem key={status} value={status}>
+            <StatusIndicator status={status} />
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  )
+}

app/_components/tasks/task-dialog-skeleton.tsx

@@ -0,0 +1,42 @@
+import { Skeleton } from '@/components/ui/skeleton'
+import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog'
+import { cn } from '@/lib/utils'
+
+export function TaskDialogSkeleton() {
+  return (
+    <Dialog open>
+      <DialogContent
+        showCloseButton={false}
+        className={cn(
+          'flex flex-col p-0 gap-0',
+          'max-h-[90vh] w-full max-w-[calc(100%-2rem)]',
+          'sm:max-w-[90vw] sm:max-h-[85vh]',
+          'lg:max-w-[50vw] lg:min-w-[480px]',
+          '[animation-delay:200ms] [animation-fill-mode:backwards]',
+        )}
+      >
+        <DialogTitle className="sr-only">Taak laden…</DialogTitle>
+
+        {/* Header */}
+        <div className="px-6 pt-5 pb-4 border-b border-outline-variant shrink-0">
+          <Skeleton className="h-7 w-40" />
+        </div>
+
+        {/* Body — 3 bars mimicking title + description + plan */}
+        <div className="flex-1 px-6 py-6 space-y-6">
+          <Skeleton className="h-14 w-full" />
+          <Skeleton className="h-24 w-full" />
+          <Skeleton className="h-32 w-full" />
+        </div>
+
+        {/* Footer */}
+        <div className="border-t border-outline-variant px-6 py-4 shrink-0">
+          <div className="flex justify-end gap-2">
+            <Skeleton className="h-8 w-24" />
+            <Skeleton className="h-8 w-24" />
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

app/_components/tasks/task-dialog.tsx

@@ -0,0 +1,424 @@
+'use client'
+
+import { useState, useTransition } from 'react'
+import { useRouter } from 'next/navigation'
+import { useForm, Controller } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import TextareaAutosize from 'react-textarea-autosize'
+import { toast } from 'sonner'
+import { Loader2 } from 'lucide-react'
+import type { TaskStatus } from '@prisma/client'
+import { taskSchema, type TaskInput } from '@/lib/schemas/task'
+import { saveTask, deleteTask } from '@/actions/tasks'
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogAction,
+  AlertDialogCancel,
+} from '@/components/ui/alert-dialog'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { DemoTooltip } from '@/components/shared/demo-tooltip'
+import { PrioritySegmented } from './priority-segmented'
+import { StatusSelect } from './status-select'
+import { cn } from '@/lib/utils'
+
+export interface TaskDialogTask {
+  id: string
+  title: string
+  description: string | null
+  implementation_plan: string | null
+  priority: number
+  status: TaskStatus
+  created_at: Date
+}
+
+interface TaskDialogProps {
+  task?: TaskDialogTask
+  storyId?: string
+  productId: string
+  closePath: string
+  isDemo?: boolean
+}
+
+function CharCount({ value, max }: { value: string; max: number }) {
+  const len = (value ?? '').length
+  if (len < Math.floor(max * 0.75)) return null
+  return (
+    <span className="text-xs text-muted-foreground text-right block mt-1">
+      {len} / {max}
+    </span>
+  )
+}
+
+const textareaClass = cn(
+  'flex w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-sm',
+  'transition-colors outline-none placeholder:text-muted-foreground resize-none',
+  'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50',
+  'overflow-y-auto',
+)
+
+export function TaskDialog({ task, storyId, productId, closePath, isDemo = false }: TaskDialogProps) {
+  const router = useRouter()
+  const [isPending, startTransition] = useTransition()
+  const [confirmClose, setConfirmClose] = useState(false)
+  const [confirmDelete, setConfirmDelete] = useState(false)
+  const isEdit = !!task
+
+  const form = useForm<TaskInput>({
+    resolver: zodResolver(taskSchema),
+    mode: 'onTouched',
+    defaultValues: {
+      title: task?.title ?? '',
+      description: task?.description ?? '',
+      implementation_plan: task?.implementation_plan ?? '',
+      priority: task?.priority ?? 3,
+      status: task?.status,
+    },
+  })
+
+  function handleClose() {
+    router.push(closePath)
+  }
+
+  function handleAttemptClose() {
+    if (form.formState.isDirty) {
+      setConfirmClose(true)
+    } else {
+      handleClose()
+    }
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent) {
+    if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+      e.preventDefault()
+      form.handleSubmit(onSubmit)()
+    }
+  }
+
+  function onSubmit(data: TaskInput) {
+    startTransition(async () => {
+      const result = await saveTask(data, {
+        taskId: task?.id,
+        storyId,
+        productId,
+      })
+
+      if (result.ok) {
+        toast.success(isEdit ? 'Taak opgeslagen' : 'Taak aangemaakt')
+        router.push(closePath)
+        return
+      }
+
+      if (result.code === 422 && result.error === 'validation') {
+        for (const [field, errors] of Object.entries(result.fieldErrors)) {
+          form.setError(field as keyof TaskInput, { message: errors[0] })
+        }
+        const firstError = Object.keys(result.fieldErrors)[0] as keyof TaskInput
+        form.setFocus(firstError)
+        return
+      }
+
+      if (result.code === 403) {
+        toast.error(
+          result.error === 'demo_readonly'
+            ? 'Demo-modus: opslaan uitgeschakeld'
+            : 'Geen toegang',
+        )
+        return
+      }
+
+      toast.error('Er ging iets mis. Probeer het opnieuw.', {
+        action: { label: 'Opnieuw', onClick: () => form.handleSubmit(onSubmit)() },
+      })
+    })
+  }
+
+  function handleDelete() {
+    if (!task) return
+    setConfirmDelete(false)
+    startTransition(async () => {
+      const result = await deleteTask(task.id, { productId })
+      if (result.ok) {
+        toast.success('Taak verwijderd')
+        router.push(closePath)
+        return
+      }
+      if (result.code === 403) {
+        toast.error(
+          result.error === 'demo_readonly'
+            ? 'Demo-modus: verwijderen uitgeschakeld'
+            : 'Geen toegang',
+        )
+        return
+      }
+      toast.error('Verwijderen mislukt')
+    })
+  }
+
+  return (
+    <>
+      <Dialog open onOpenChange={(open) => { if (!open) handleAttemptClose() }}>
+        <DialogContent
+          showCloseButton={false}
+          onKeyDown={handleKeyDown}
+          className={cn(
+            'flex flex-col p-0 gap-0',
+            'max-h-[90vh] w-full max-w-[calc(100%-2rem)]',
+            'sm:max-w-[90vw] sm:max-h-[85vh]',
+            'lg:max-w-[50vw] lg:min-w-[480px]',
+          )}
+        >
+          {/* Sticky header */}
+          <div className="flex items-center justify-between px-6 pt-5 pb-4 border-b border-outline-variant shrink-0">
+            <DialogTitle className="text-xl font-semibold">
+              {isEdit ? 'Taak bewerken' : 'Nieuwe taak'}
+            </DialogTitle>
+            {isEdit && (
+              <span className="text-xs text-muted-foreground">
+                Aangemaakt:{' '}
+                {new Intl.DateTimeFormat('nl-NL', {
+                  day: 'numeric',
+                  month: 'short',
+                  year: 'numeric',
+                }).format(new Date(task.created_at))}
+              </span>
+            )}
+          </div>
+
+          {/* Scrollable form body */}
+          <div className="flex-1 overflow-y-auto px-6 py-6 space-y-6">
+            {/* Title */}
+            <div>
+              <label className="text-sm font-medium mb-2 block">
+                Titel <span className="text-destructive">*</span>
+              </label>
+              <Input
+                {...form.register('title')}
+                aria-invalid={!!form.formState.errors.title}
+                autoFocus
+                placeholder="Taaknaam..."
+                className="h-14"
+                onKeyDown={(e) => { if (e.key === 'Enter') e.preventDefault() }}
+              />
+              {form.formState.errors.title && (
+                <p className="text-xs text-destructive mt-1">
+                  {form.formState.errors.title.message}
+                </p>
+              )}
+            </div>
+
+            {/* Description */}
+            <div>
+              <label className="text-sm font-medium mb-2 block">Omschrijving</label>
+              <Controller
+                control={form.control}
+                name="description"
+                render={({ field }) => (
+                  <>
+                    <TextareaAutosize
+                      {...field}
+                      value={field.value ?? ''}
+                      aria-invalid={!!form.formState.errors.description}
+                      minRows={3}
+                      maxRows={6}
+                      placeholder="Optionele omschrijving..."
+                      className={cn(
+                        textareaClass,
+                        form.formState.errors.description &&
+                          'border-destructive ring-3 ring-destructive/20',
+                      )}
+                    />
+                    <CharCount value={field.value ?? ''} max={2000} />
+                    <p className="text-xs text-muted-foreground mt-1">
+                      Markdown ondersteund (lijstjes, **vet**, `code`)
+                    </p>
+                  </>
+                )}
+              />
+              {form.formState.errors.description && (
+                <p className="text-xs text-destructive mt-1">
+                  {form.formState.errors.description.message}
+                </p>
+              )}
+            </div>
+
+            {/* Implementation plan */}
+            <div>
+              <label className="text-sm font-medium mb-2 block">Implementatieplan</label>
+              <Controller
+                control={form.control}
+                name="implementation_plan"
+                render={({ field }) => (
+                  <>
+                    <TextareaAutosize
+                      {...field}
+                      value={field.value ?? ''}
+                      aria-invalid={!!form.formState.errors.implementation_plan}
+                      minRows={5}
+                      maxRows={12}
+                      placeholder="Optioneel implementatieplan..."
+                      className={cn(
+                        textareaClass,
+                        form.formState.errors.implementation_plan &&
+                          'border-destructive ring-3 ring-destructive/20',
+                      )}
+                    />
+                    <CharCount value={field.value ?? ''} max={10000} />
+                    <p className="text-xs text-muted-foreground mt-1">
+                      Markdown ondersteund (lijstjes, **vet**, `code`)
+                    </p>
+                  </>
+                )}
+              />
+              {form.formState.errors.implementation_plan && (
+                <p className="text-xs text-destructive mt-1">
+                  {form.formState.errors.implementation_plan.message}
+                </p>
+              )}
+            </div>
+
+            {/* Priority */}
+            <div>
+              <label className="text-sm font-medium mb-2 block">Prioriteit</label>
+              <Controller
+                control={form.control}
+                name="priority"
+                render={({ field }) => (
+                  <PrioritySegmented
+                    value={field.value}
+                    onChange={field.onChange}
+                    disabled={isPending}
+                  />
+                )}
+              />
+            </div>
+
+            {/* Status — edit only */}
+            {isEdit && (
+              <div>
+                <label className="text-sm font-medium mb-2 block">Status</label>
+                <Controller
+                  control={form.control}
+                  name="status"
+                  render={({ field }) => (
+                    <StatusSelect
+                      value={field.value}
+                      onChange={field.onChange}
+                      disabled={isPending}
+                    />
+                  )}
+                />
+              </div>
+            )}
+          </div>
+
+          {/* Sticky footer */}
+          <div className="border-t border-outline-variant px-6 py-4 shrink-0">
+            <div className="flex items-center justify-between gap-2">
+              {isEdit ? (
+                <DemoTooltip show={isDemo}>
+                  <Button
+                    type="button"
+                    variant="destructive"
+                    disabled={isPending || isDemo}
+                    onClick={() => setConfirmDelete(true)}
+                  >
+                    Verwijderen
+                  </Button>
+                </DemoTooltip>
+              ) : (
+                <div />
+              )}
+
+              <div className="flex gap-2">
+                <Button
+                  type="button"
+                  variant="ghost"
+                  onClick={handleAttemptClose}
+                  disabled={isPending}
+                >
+                  Annuleren
+                </Button>
+                <DemoTooltip show={isDemo}>
+                  <Button
+                    type="button"
+                    disabled={isPending || isDemo}
+                    onClick={form.handleSubmit(onSubmit)}
+                  >
+                    {isPending ? (
+                      <>
+                        <Loader2 className="size-4 animate-spin" />
+                        {isEdit ? 'Opslaan...' : 'Aanmaken...'}
+                      </>
+                    ) : isEdit ? (
+                      'Opslaan'
+                    ) : (
+                      'Aanmaken'
+                    )}
+                  </Button>
+                </DemoTooltip>
+              </div>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* Dirty-check confirm */}
+      <AlertDialog open={confirmClose} onOpenChange={setConfirmClose}>
+        <AlertDialogContent size="sm">
+          <AlertDialogHeader>
+            <AlertDialogTitle>Wijzigingen niet opgeslagen</AlertDialogTitle>
+            <AlertDialogDescription>
+              Wil je de wijzigingen weggooien?
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel onClick={() => setConfirmClose(false)}>
+              Terug
+            </AlertDialogCancel>
+            <AlertDialogAction
+              variant="destructive"
+              onClick={() => { setConfirmClose(false); handleClose() }}
+            >
+              Weggooien
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {/* Delete confirm */}
+      <AlertDialog open={confirmDelete} onOpenChange={setConfirmDelete}>
+        <AlertDialogContent size="sm">
+          <AlertDialogHeader>
+            <AlertDialogTitle>Taak verwijderen</AlertDialogTitle>
+            <AlertDialogDescription>
+              Weet je zeker dat je deze taak wilt verwijderen? Dit kan niet ongedaan worden gemaakt.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel onClick={() => setConfirmDelete(false)}>
+              Annuleren
+            </AlertDialogCancel>
+            <AlertDialogAction
+              variant="destructive"
+              disabled={isPending}
+              onClick={handleDelete}
+            >
+              {isPending ? <Loader2 className="size-4 animate-spin" /> : 'Verwijderen'}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  )
+}

app/api/tasks/[id]/route.ts

@@ -2,6 +2,7 @@ import { authenticateApiRequest } from '@/lib/api-auth'
 import { prisma } from '@/lib/prisma'
 import { z } from 'zod'
 import { TASK_STATUS_API_VALUES, taskStatusFromApi, taskStatusToApi } from '@/lib/task-status'
+import { updateTaskStatusWithStoryPromotion } from '@/lib/tasks-status-update'
 
 // `review` is a valid TaskStatus in the DB and the kanban-board UI, but the
 // sprint task list (components/sprint/task-list.tsx) does not yet render it.
@@ -82,14 +83,28 @@ export async function PATCH(
     }
   }
 
-  const updated = await prisma.task.update({
-    where: { id },
-    data: {
-      ...(dbStatus !== undefined && dbStatus !== null && { status: dbStatus }),
-      ...(parsed.data.implementation_plan !== undefined && {
-        implementation_plan: parsed.data.implementation_plan,
-      }),
-    },
+  const updated = await prisma.$transaction(async (tx) => {
+    const planUpdate = parsed.data.implementation_plan !== undefined
+      ? await tx.task.update({
+          where: { id },
+          data: { implementation_plan: parsed.data.implementation_plan },
+          select: { id: true, status: true, implementation_plan: true },
+        })
+      : null
+
+    if (dbStatus !== undefined && dbStatus !== null) {
+      const result = await updateTaskStatusWithStoryPromotion(id, dbStatus, tx)
+      return {
+        id: result.task.id,
+        status: result.task.status,
+        implementation_plan: result.task.implementation_plan,
+      }
+    }
+
+    if (planUpdate) return planUpdate
+
+    // Should not reach here — patchSchema rejects bodies without status or implementation_plan.
+    throw new Error('Geen wijzigingen')
   })
 
   return Response.json({

app/globals.css

@@ -1,4 +1,5 @@
 @import "tailwindcss";
 @import "tw-animate-css";
+@plugin "@tailwindcss/typography";
 
 @import "./styles/theme.css";

app/styles/theme.css

@@ -73,9 +73,16 @@
   --switch-background: #79767d;
   --ring: var(--primary);
 
+  /* MD3 Outline Variant */
+  --outline-variant: #c5c6d0;
+
+  /* MD3 On-Error-Container */
+  --on-error-container: #410002;
+
   /* Project Management Specific Colors */
   --status-todo: #6750a4;
   --status-in-progress: #0061a4;
+  --status-review: #7b5ea7;
   --status-done: #006e1c;
   --status-blocked: #ba1a1a;
 
@@ -177,9 +184,16 @@
   --switch-background: #898790;
   --ring: var(--primary);
 
+  /* MD3 Outline Variant */
+  --outline-variant: #45464f;
+
+  /* MD3 On-Error-Container */
+  --on-error-container: #ffdad6;
+
   /* Project Management Specific Colors */
   --status-todo: #cfbdfe;
   --status-in-progress: #9fcbfa;
+  --status-review: #c9b6ef;
   --status-done: #77db77;
   --status-blocked: #ffb4ab;
 
@@ -256,6 +270,7 @@
   --color-error-foreground: var(--error-foreground);
   --color-error-container: var(--error-container);
   --color-error-container-foreground: var(--error-container-foreground);
+  --color-on-error-container: var(--on-error-container);
 
   --color-info: var(--info);
   --color-info-foreground: var(--info-foreground);
@@ -273,6 +288,7 @@
   --color-accent-foreground: var(--accent-foreground);
   --color-destructive: var(--destructive);
   --color-destructive-foreground: var(--destructive-foreground);
+  --color-outline-variant: var(--outline-variant);
   --color-border: var(--border);
   --color-input: var(--input);
   --color-input-background: var(--input-background);
@@ -282,6 +298,7 @@
   /* Project management colors */
   --color-status-todo: var(--status-todo);
   --color-status-in-progress: var(--status-in-progress);
+  --color-status-review: var(--status-review);
   --color-status-done: var(--status-done);
   --color-status-blocked: var(--status-blocked);