feat(sprint): edit-icoon op PBI (Product Backlog) en story (Sprint Backlog)

- PBI-rij in Product Backlog-kolom: ✎-icoon rechts uitgelijnd, opent PbiDialog
  (rij is nu div role=button i.p.v. nested-button)
- Story-rij in Sprint Backlog-kolom: ✎-icoon vóór de Trash, opent StoryDialog
- SprintStory + PbiWithStories verrijkt met velden die de dialogen lezen
  (description / acceptance_criteria / pbi_id / created_at op story; priority /
  status / description op PBI)
- pbi.status via pbiStatusToApi → PbiStatusApi (DB UPPER_SNAKE → API lowercase)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

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

@@ -3,6 +3,7 @@ import { notFound, redirect } from 'next/navigation'
 import { getSession } from '@/lib/auth'
 import { getAccessibleProduct } from '@/lib/product-access'
 import { prisma } from '@/lib/prisma'
+import { pbiStatusToApi } from '@/lib/task-status'
 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'
@@ -69,6 +70,10 @@ export default async function SprintBoardPage({ params, searchParams }: Props) {
     id: s.id,
     code: s.code,
     title: s.title,
+    description: s.description,
+    acceptance_criteria: s.acceptance_criteria,
+    pbi_id: s.pbi_id,
+    created_at: s.created_at,
     priority: s.priority,
     status: s.status,
     taskCount: s.tasks.length,
@@ -108,10 +113,17 @@ export default async function SprintBoardPage({ params, searchParams }: Props) {
       id: pbi.id,
       code: pbi.code,
       title: pbi.title,
+      priority: pbi.priority,
+      status: pbiStatusToApi(pbi.status),
+      description: pbi.description,
       stories: pbi.stories.map(s => ({
         id: s.id,
         code: s.code,
         title: s.title,
+        description: s.description,
+        acceptance_criteria: s.acceptance_criteria,
+        pbi_id: s.pbi_id,
+        created_at: s.created_at,
         priority: s.priority,
         status: s.status,
         taskCount: 0,

components/sprint/sprint-backlog.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useState, useTransition, useEffect } from 'react'
-import { Trash2, MoreHorizontal, ChevronsUp, ChevronsDown, ListFilter } from 'lucide-react'
+import { Trash2, MoreHorizontal, ChevronsUp, ChevronsDown, ListFilter, Pencil } from 'lucide-react'
 import { useDroppable, useDraggable } from '@dnd-kit/core'
 import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
@@ -22,6 +22,9 @@ import { PRIORITY_BORDER } from '@/components/backlog/backlog-card'
 import { PRIORITY_COLORS } from '@/components/shared/priority-select'
 import { useSprintStore } from '@/stores/sprint-store'
 import { claimStoryAction, unclaimStoryAction, reassignStoryAction, claimAllUnassignedInActiveSprintAction } from '@/actions/stories'
+import { PbiDialog, type PbiDialogState } from '@/components/backlog/pbi-dialog'
+import { StoryDialog, type StoryDialogState } from '@/components/backlog/story-dialog'
+import type { PbiStatusApi } from '@/lib/task-status'
 import { cn } from '@/lib/utils'
 
 const STATUS_COLORS: Record<string, string> = {
@@ -35,6 +38,10 @@ export interface SprintStory {
   id: string
   code: string | null
   title: string
+  description: string | null
+  acceptance_criteria: string | null
+  pbi_id: string
+  created_at: Date
   priority: number
   status: string
   taskCount: number
@@ -52,19 +59,23 @@ export interface PbiWithStories {
   id: string
   code: string | null
   title: string
+  priority: number
+  status: PbiStatusApi
+  description: string | null
   stories: SprintStory[]
 }
 
 // --- Left panel: Sprint Backlog ---
 
 function SortableSprintRow({
-  story, isDemo, onRemove, onSelect, isSelected,
+  story, isDemo, onRemove, onSelect, onEdit, isSelected,
   currentUserId, productId, members, onAssigneeChange,
 }: {
   story: SprintStory
   isDemo: boolean
   onRemove: () => void
   onSelect: () => void
+  onEdit: () => void
   isSelected: boolean
   currentUserId: string
   productId: string
@@ -192,6 +203,16 @@ function SortableSprintRow({
                   </DropdownMenuContent>
                 </DropdownMenu>
               </DemoTooltip>
+              <DemoTooltip show={isDemo}>
+                <button
+                  onClick={e => { e.stopPropagation(); if (!isDemo) onEdit() }}
+                  className="opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-foreground disabled:opacity-40 disabled:cursor-not-allowed"
+                  aria-label="Bewerk story"
+                  disabled={isDemo}
+                >
+                  <Pencil size={14} />
+                </button>
+              </DemoTooltip>
               <DemoTooltip show={isDemo}>
                 <button
                   onClick={e => { e.stopPropagation(); if (!isDemo) onRemove() }}
@@ -230,6 +251,7 @@ export function SprintBacklogLeft({
   const { sprintStoryOrder } = useSprintStore()
   const { setNodeRef, isOver } = useDroppable({ id: 'sprint-zone' })
   const [isPending, startTransition] = useTransition()
+  const [storyDialogState, setStoryDialogState] = useState<StoryDialogState | null>(null)
 
   const unassignedCount = stories.filter(s => s.assignee_id === null).length
   const currentUserUsername = members.find(m => m.userId === currentUserId)?.username ?? null
@@ -291,6 +313,7 @@ export function SprintBacklogLeft({
                 isDemo={isDemo}
                 onRemove={() => onRemove(story.id)}
                 onSelect={() => onSelect(story.id)}
+                onEdit={() => setStoryDialogState({ mode: 'edit', story, productId })}
                 isSelected={selectedStoryId === story.id}
                 currentUserId={currentUserId}
                 productId={productId}
@@ -301,6 +324,11 @@ export function SprintBacklogLeft({
           </SortableContext>
         )}
       </div>
+      <StoryDialog
+        state={storyDialogState}
+        onClose={() => setStoryDialogState(null)}
+        isDemo={isDemo}
+      />
     </div>
   )
 }
@@ -433,10 +461,11 @@ interface SprintBacklogRightProps {
   pbisWithStories: PbiWithStories[]
   sprintStoryIds: Set<string>
   isDemo: boolean
+  productId: string
   onAdd: (storyId: string) => void
 }
 
-export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo, onAdd }: SprintBacklogRightProps) {
+export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo, productId, onAdd }: SprintBacklogRightProps) {
   const [collapsed, setCollapsed] = useState<Set<string>>(() => {
     const auto = new Set<string>()
     for (const pbi of pbisWithStories) {
@@ -449,6 +478,7 @@ export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo, on
   const [filterPriority, setFilterPriority] = useState<number | 'all'>('all')
   const [filterStatus, setFilterStatus] = useState<StoryStatusFilter>('all')
   const [prefsLoaded, setPrefsLoaded] = useState(false)
+  const [pbiDialogState, setPbiDialogState] = useState<PbiDialogState | null>(null)
   const { setNodeRef, isOver } = useDroppable({ id: 'backlog-zone' })
 
   // Hydrate filter prefs from localStorage post-mount (avoids SSR mismatch).
@@ -611,9 +641,12 @@ export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo, on
       >
         {filteredPbis.map(pbi => (
           <div key={pbi.id}>
-            <button
+            <div
+              role="button"
+              tabIndex={0}
               onClick={() => toggle(pbi.id)}
-              className="w-full flex items-center gap-2 px-4 py-1.5 hover:bg-surface-container transition-colors text-left select-none"
+              onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggle(pbi.id) } }}
+              className="group w-full flex items-center gap-2 px-4 py-1.5 hover:bg-surface-container transition-colors text-left select-none cursor-pointer"
             >
               <span className="text-xs">{collapsed.has(pbi.id) ? '▶' : '▼'}</span>
               <span className="text-sm font-medium truncate flex-1">{pbi.title}</span>
@@ -621,7 +654,20 @@ export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo, on
               <span className="text-xs text-muted-foreground">
                 {pbi.stories.filter(s => s.status === 'DONE').length}/{pbi.stories.length} klaar
               </span>
-            </button>
+              <DemoTooltip show={isDemo}>
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    if (!isDemo) setPbiDialogState({ mode: 'edit', productId, pbi: { id: pbi.id, title: pbi.title, code: pbi.code, priority: pbi.priority, status: pbi.status, description: pbi.description } })
+                  }}
+                  className="opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-foreground p-0.5 rounded disabled:opacity-40 disabled:cursor-not-allowed"
+                  aria-label="Bewerk PBI"
+                  disabled={isDemo}
+                >
+                  <Pencil size={14} />
+                </button>
+              </DemoTooltip>
+            </div>
 
             {!collapsed.has(pbi.id) && pbi.stories.map(story => {
               const inSprint = sprintStoryIds.has(story.id)
@@ -654,6 +700,11 @@ export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo, on
           </div>
         ))}
       </div>
+      <PbiDialog
+        state={pbiDialogState}
+        onClose={() => setPbiDialogState(null)}
+        isDemo={isDemo}
+      />
     </div>
   )
 }

components/sprint/sprint-board-client.tsx

@@ -210,6 +210,7 @@ export function SprintBoardClient({
             pbisWithStories={pbisWithStories}
             sprintStoryIds={sprintStoryIds}
             isDemo={isDemo}
+            productId={productId}
             onAdd={handleAdd}
           />,
           <SprintBacklogLeft