feat(ST-313): merge sprint board into single three-panel view

- TriplePane component with two resizable dividers, localStorage persistence, mobile tabs
- SprintBoardClient replaces SprintBacklogClient + PlanningRightClient
- Left panel: Product Backlog (PBIs with stories to add to sprint)
- Middle panel: Sprint Backlog (stories in sprint, click to select, sortable)
- Right panel: TaskList for selected story
- /sprint/planning redirects to /sprint
- Remove PlanningLeft, PlanningRightClient, SprintBacklogClient

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

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

@@ -3,16 +3,17 @@ import { cookies } from 'next/headers'
 import { getIronSession } from 'iron-session'
 import { SessionData, sessionOptions } from '@/lib/session'
 import { prisma } from '@/lib/prisma'
-import { SprintBacklogClient } from '@/components/sprint/sprint-backlog-client'
+import { SprintBoardClient } from '@/components/sprint/sprint-board-client'
 import { SprintHeader } from '@/components/sprint/sprint-header'
 import type { SprintStory, PbiWithStories } from '@/components/sprint/sprint-backlog'
+import type { Task } from '@/components/sprint/task-list'
 import Link from 'next/link'
 
 interface Props {
   params: Promise<{ id: string }>
 }
 
-export default async function SprintBacklogPage({ params }: Props) {
+export default async function SprintBoardPage({ params }: Props) {
   const { id } = await params
   const session = await getIronSession<SessionData>(await cookies(), sessionOptions)
 
@@ -26,23 +27,40 @@ export default async function SprintBacklogPage({ params }: Props) {
   })
   if (!sprint) redirect(`/products/${id}`)
 
-  // Stories in this sprint
+  // Sprint stories with full task data
   const sprintStories = await prisma.story.findMany({
     where: { sprint_id: sprint.id },
     orderBy: { sort_order: 'asc' },
-    include: { tasks: { select: { id: true, status: true } } },
+    include: {
+      tasks: {
+        orderBy: [{ priority: 'asc' }, { sort_order: 'asc' }],
+      },
+    },
   })
 
-  const sprintStoryItems: SprintStory[] = sprintStories.map((s: (typeof sprintStories)[number]) => ({
+  const sprintStoryItems: SprintStory[] = sprintStories.map(s => ({
     id: s.id,
     title: s.title,
     priority: s.priority,
     status: s.status,
     taskCount: s.tasks.length,
-    doneCount: s.tasks.filter((t: (typeof s.tasks)[number]) => t.status === 'DONE').length,
+    doneCount: s.tasks.filter(t => t.status === 'DONE').length,
   }))
 
-  // All PBIs with their non-sprint stories for the right panel
+  const tasksByStory: Record<string, Task[]> = {}
+  for (const story of sprintStories) {
+    tasksByStory[story.id] = story.tasks.map(t => ({
+      id: t.id,
+      title: t.title,
+      description: t.description,
+      priority: t.priority,
+      status: t.status,
+      story_id: t.story_id,
+      sprint_id: t.sprint_id,
+    }))
+  }
+
+  // All PBIs with their stories for the left (product backlog) panel
   const pbis = await prisma.pbi.findMany({
     where: { product_id: id },
     orderBy: [{ priority: 'asc' }, { sort_order: 'asc' }],
@@ -54,11 +72,11 @@ export default async function SprintBacklogPage({ params }: Props) {
   })
 
   const pbisWithStories: PbiWithStories[] = pbis
-    .filter((pbi: (typeof pbis)[number]) => pbi.stories.length > 0)
+    .filter(pbi => pbi.stories.length > 0)
-    .map((pbi: (typeof pbis)[number]) => ({
+    .map(pbi => ({
       id: pbi.id,
       title: pbi.title,
-      stories: pbi.stories.map((s: (typeof pbi.stories)[number]) => ({
+      stories: pbi.stories.map(s => ({
         id: s.id,
         title: s.title,
         priority: s.priority,
@@ -68,7 +86,7 @@ export default async function SprintBacklogPage({ params }: Props) {
       })),
     }))
 
-  const sprintStoryIdList = sprintStories.map((s: (typeof sprintStories)[number]) => s.id)
+  const sprintStoryIdList = sprintStories.map(s => s.id)
   const isDemo = session.isDemo ?? false
 
   return (
@@ -82,20 +100,18 @@ export default async function SprintBacklogPage({ params }: Props) {
       />
 
       <div className="flex-1 overflow-hidden">
-        <SprintBacklogClient
+        <SprintBoardClient
           productId={id}
           sprintId={sprint.id}
           stories={sprintStoryItems}
           pbisWithStories={pbisWithStories}
           sprintStoryIdList={sprintStoryIdList}
+          tasksByStory={tasksByStory}
           isDemo={isDemo}
         />
       </div>
 
-      <div className="border-t border-border px-4 py-2 bg-surface-container-low shrink-0 flex items-center gap-4">
+      <div className="border-t border-border px-4 py-2 bg-surface-container-low shrink-0">
-        <Link href={`/products/${id}/sprint/planning`} className="text-sm text-primary hover:underline">
-          Sprint Planning →
-        </Link>
         <Link href={`/products/${id}`} className="text-sm text-muted-foreground hover:text-foreground">
           ← Product Backlog
         </Link>

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

@@ -1,134 +1,10 @@
-import { notFound, redirect } from 'next/navigation'
+import { redirect } from 'next/navigation'
-import { cookies } from 'next/headers'
-import { getIronSession } from 'iron-session'
-import { SessionData, sessionOptions } from '@/lib/session'
-import { prisma } from '@/lib/prisma'
-import { SplitPane } from '@/components/split-pane/split-pane'
-import { PlanningLeft } from '@/components/sprint/planning-left'
-import type { Task } from '@/components/sprint/task-list'
-import { SprintHeader } from '@/components/sprint/sprint-header'
-import type { SprintStory } from '@/components/sprint/sprint-backlog'
-import Link from 'next/link'
 
 interface Props {
   params: Promise<{ id: string }>
 }
 
-export default async function SprintPlanningPage({ params }: Props) {
+export default async function SprintPlanningRedirect({ params }: Props) {
   const { id } = await params
-  const session = await getIronSession<SessionData>(await cookies(), sessionOptions)
+  redirect(`/products/${id}/sprint`)
-
-  const product = await prisma.product.findFirst({
-    where: { id, user_id: session.userId },
-  })
-  if (!product) notFound()
-
-  const sprint = await prisma.sprint.findFirst({
-    where: { product_id: id, status: 'ACTIVE' },
-  })
-  if (!sprint) redirect(`/products/${id}`)
-
-  const sprintStories = await prisma.story.findMany({
-    where: { sprint_id: sprint.id },
-    orderBy: { sort_order: 'asc' },
-    include: {
-      tasks: {
-        orderBy: [{ priority: 'asc' }, { sort_order: 'asc' }],
-      },
-    },
-  })
-
-  const sprintStoryItems: SprintStory[] = sprintStories.map((s: (typeof sprintStories)[number]) => ({
-    id: s.id,
-    title: s.title,
-    priority: s.priority,
-    status: s.status,
-    taskCount: s.tasks.length,
-    doneCount: s.tasks.filter((t: (typeof s.tasks)[number]) => t.status === 'DONE').length,
-  }))
-
-  // Tasks by story
-  const tasksByStory: Record<string, Task[]> = {}
-  for (const story of sprintStories) {
-    tasksByStory[story.id] = story.tasks.map((t: (typeof story.tasks)[number]) => ({
-      id: t.id,
-      title: t.title,
-      description: t.description,
-      priority: t.priority,
-      status: t.status,
-      story_id: t.story_id,
-      sprint_id: t.sprint_id,
-    }))
-  }
-
-  const isDemo = session.isDemo ?? false
-
-  return (
-    <div className="flex flex-col h-full">
-      <SprintHeader
-        productId={id}
-        productName={product.name}
-        sprint={sprint}
-        isDemo={isDemo}
-        sprintStories={sprintStoryItems}
-      />
-
-      <div className="flex-1 overflow-hidden">
-        <SplitPane
-          storageKey={`planning-${id}`}
-          left={
-            <PlanningLeft
-              stories={sprintStoryItems}
-            />
-          }
-          right={
-            <PlanningRight
-              sprintId={sprint.id}
-              productId={id}
-              stories={sprintStoryItems}
-              tasksByStory={tasksByStory}
-              isDemo={isDemo}
-            />
-          }
-        />
-      </div>
-
-      <div className="border-t border-border px-4 py-2 bg-surface-container-low shrink-0">
-        <Link href={`/products/${id}/sprint`} className="text-sm text-muted-foreground hover:text-foreground">
-          ← Sprint Backlog
-        </Link>
-      </div>
-    </div>
-  )
 }
-
-// Right panel — shows tasks of selected story
-function PlanningRight({
-  sprintId,
-  productId,
-  stories,
-  tasksByStory,
-  isDemo,
-}: {
-  sprintId: string
-  productId: string
-  stories: SprintStory[]
-  tasksByStory: Record<string, Task[]>
-  isDemo: boolean
-}) {
-  // This is a Server Component wrapper — PlanningLeft manages selection via URL/store
-  // We render TaskList for the first story if only one, or show instruction
-  // The actual selection is client-side via PlanningLeft
-  return (
-    <PlanningRightClient
-      sprintId={sprintId}
-      productId={productId}
-      stories={stories}
-      tasksByStory={tasksByStory}
-      isDemo={isDemo}
-    />
-  )
-}
-
-// We need a client component for the right side that reads selection store
-import { PlanningRightClient } from '@/components/sprint/planning-right-client'

components/split-pane/triple-pane.tsx

@@ -0,0 +1,137 @@
+'use client'
+
+import { useRef, useState, useEffect, useCallback } from 'react'
+import { cn } from '@/lib/utils'
+
+interface TriplePaneProps {
+  left: React.ReactNode
+  middle: React.ReactNode
+  right: React.ReactNode
+  storageKey: string
+  defaultLeft?: number   // % width for left pane
+  defaultMiddle?: number // % width for middle pane, right gets the rest
+  minSize?: number       // minimum px per pane
+}
+
+export function TriplePane({
+  left, middle, right, storageKey,
+  defaultLeft = 28, defaultMiddle = 35, minSize = 180,
+}: TriplePaneProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  const load = (key: string, def: number) => {
+    if (typeof window === 'undefined') return def
+    const stored = localStorage.getItem(`triple-pane:${storageKey}:${key}`)
+    if (stored) {
+      const val = parseFloat(stored)
+      if (!isNaN(val) && val > 0 && val < 100) return val
+    }
+    return def
+  }
+
+  const [leftPct, setLeftPct] = useState(() => load('left', defaultLeft))
+  const [midPct, setMidPct] = useState(() => load('mid', defaultMiddle))
+  const [dragging, setDragging] = useState<'left' | 'right' | null>(null)
+  const [isMobile, setIsMobile] = useState(false)
+  const [activeTab, setActiveTab] = useState<'left' | 'middle' | 'right'>('left')
+
+  useEffect(() => {
+    const check = () => setIsMobile(window.innerWidth < 1024)
+    check()
+    window.addEventListener('resize', check)
+    return () => window.removeEventListener('resize', check)
+  }, [])
+
+  const onMouseMove = useCallback((e: MouseEvent) => {
+    if (!dragging || !containerRef.current) return
+    const rect = containerRef.current.getBoundingClientRect()
+    const width = rect.width
+    const minPct = (minSize / width) * 100
+    const offsetPct = ((e.clientX - rect.left) / width) * 100
+
+    if (dragging === 'left') {
+      const clamped = Math.min(Math.max(offsetPct, minPct), 100 - midPct - minPct)
+      setLeftPct(clamped)
+      localStorage.setItem(`triple-pane:${storageKey}:left`, String(clamped))
+    } else {
+      const clamped = Math.min(Math.max(offsetPct - leftPct, minPct), 100 - leftPct - minPct)
+      setMidPct(clamped)
+      localStorage.setItem(`triple-pane:${storageKey}:mid`, String(clamped))
+    }
+  }, [dragging, leftPct, midPct, minSize, storageKey])
+
+  const onMouseUp = useCallback(() => setDragging(null), [])
+
+  useEffect(() => {
+    if (dragging) {
+      window.addEventListener('mousemove', onMouseMove)
+      window.addEventListener('mouseup', onMouseUp)
+    }
+    return () => {
+      window.removeEventListener('mousemove', onMouseMove)
+      window.removeEventListener('mouseup', onMouseUp)
+    }
+  }, [dragging, onMouseMove, onMouseUp])
+
+  if (isMobile) {
+    const tabs = ['left', 'middle', 'right'] as const
+    const labels = ['Backlog', 'Sprint', 'Taken']
+    return (
+      <div className="flex flex-col h-full">
+        <div className="flex border-b border-border shrink-0">
+          {tabs.map((tab, i) => (
+            <button
+              key={tab}
+              onClick={() => setActiveTab(tab)}
+              className={cn(
+                'flex-1 py-2 text-xs font-medium transition-colors',
+                activeTab === tab
+                  ? 'border-b-2 border-primary text-primary'
+                  : 'text-muted-foreground hover:text-foreground'
+              )}
+            >
+              {labels[i]}
+            </button>
+          ))}
+        </div>
+        <div className="flex-1 overflow-auto">
+          {activeTab === 'left' ? left : activeTab === 'middle' ? middle : right}
+        </div>
+      </div>
+    )
+  }
+
+  const rightPct = 100 - leftPct - midPct
+
+  return (
+    <div ref={containerRef} className="flex h-full overflow-hidden select-none">
+      <div className="flex flex-col overflow-hidden" style={{ width: `${leftPct}%` }}>
+        {left}
+      </div>
+
+      <div
+        onMouseDown={() => setDragging('left')}
+        className={cn(
+          'w-1 shrink-0 bg-border hover:bg-primary transition-colors cursor-col-resize',
+          dragging === 'left' && 'bg-primary'
+        )}
+      />
+
+      <div className="flex flex-col overflow-hidden" style={{ width: `${midPct}%` }}>
+        {middle}
+      </div>
+
+      <div
+        onMouseDown={() => setDragging('right')}
+        className={cn(
+          'w-1 shrink-0 bg-border hover:bg-primary transition-colors cursor-col-resize',
+          dragging === 'right' && 'bg-primary'
+        )}
+      />
+
+      <div className="flex flex-col overflow-hidden" style={{ width: `${rightPct}%` }}>
+        {right}
+      </div>
+    </div>
+  )
+}

components/sprint/planning-left.tsx

@@ -1,57 +0,0 @@
-'use client'
-
-import { useSelectionStore } from '@/stores/selection-store'
-import { PanelNavBar } from '@/components/shared/panel-nav-bar'
-import { Badge } from '@/components/ui/badge'
-import { cn } from '@/lib/utils'
-import type { SprintStory } from './sprint-backlog'
-
-const PRIORITY_COLORS: Record<number, string> = {
-  1: 'bg-priority-critical/15 text-priority-critical border-priority-critical/30',
-  2: 'bg-priority-high/15 text-priority-high border-priority-high/30',
-  3: 'bg-priority-medium/15 text-priority-medium border-priority-medium/30',
-  4: 'bg-priority-low/15 text-priority-low border-priority-low/30',
-}
-const PRIORITY_LABELS: Record<number, string> = { 1: 'Kritiek', 2: 'Hoog', 3: 'Gemiddeld', 4: 'Laag' }
-
-interface PlanningLeftProps {
-  stories: SprintStory[]
-}
-
-export function PlanningLeft({ stories }: PlanningLeftProps) {
-  const { selectedStoryId, selectStory } = useSelectionStore()
-
-  return (
-    <div className="flex flex-col h-full">
-      <PanelNavBar title="Sprint Backlog" />
-      <div className="flex-1 overflow-y-auto">
-        {stories.length === 0 ? (
-          <p className="text-sm text-muted-foreground text-center mt-8 px-4">
-            Geen stories in de Sprint.
-          </p>
-        ) : (
-          stories.map(story => (
-            <div
-              key={story.id}
-              onClick={() => selectStory(story.id)}
-              className={cn(
-                'flex items-center gap-3 px-4 py-2.5 border-b border-border cursor-pointer transition-colors hover:bg-surface-container',
-                selectedStoryId === story.id && 'bg-primary-container text-primary-container-foreground'
-              )}
-            >
-              <div className="flex-1 min-w-0">
-                <p className="text-sm truncate">{story.title}</p>
-                <div className="flex items-center gap-1.5 mt-0.5">
-                  <Badge className={cn('text-[10px] px-1.5 py-0 border', PRIORITY_COLORS[story.priority])}>
-                    {PRIORITY_LABELS[story.priority]}
-                  </Badge>
-                  <span className="text-xs text-muted-foreground">{story.doneCount}/{story.taskCount} klaar</span>
-                </div>
-              </div>
-            </div>
-          ))
-        )}
-      </div>
-    </div>
-  )
-}

components/sprint/planning-right-client.tsx

@@ -1,39 +0,0 @@
-'use client'
-
-import { useSelectionStore } from '@/stores/selection-store'
-import { TaskList } from './task-list'
-import type { Task } from './task-list'
-import type { SprintStory } from './sprint-backlog'
-
-interface PlanningRightClientProps {
-  sprintId: string
-  productId: string
-  stories: SprintStory[]
-  tasksByStory: Record<string, Task[]>
-  isDemo: boolean
-}
-
-export function PlanningRightClient({ sprintId, productId, stories, tasksByStory, isDemo }: PlanningRightClientProps) {
-  const { selectedStoryId } = useSelectionStore()
-
-  const story = stories.find(s => s.id === selectedStoryId)
-  const tasks = selectedStoryId ? (tasksByStory[selectedStoryId] ?? []) : []
-
-  if (!selectedStoryId || !story) {
-    return (
-      <div className="flex items-center justify-center h-full">
-        <p className="text-sm text-muted-foreground">Selecteer een story om de taken te bekijken.</p>
-      </div>
-    )
-  }
-
-  return (
-    <TaskList
-      storyId={selectedStoryId}
-      sprintId={sprintId}
-      productId={productId}
-      tasks={tasks}
-      isDemo={isDemo}
-    />
-  )
-}

components/sprint/sprint-backlog.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { useState } from 'react'
+import { Trash2 } from 'lucide-react'
 import { useDroppable, useDraggable } from '@dnd-kit/core'
 import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
@@ -42,8 +43,14 @@ export interface PbiWithStories {
 // --- Left panel: Sprint Backlog ---
 
 function SortableSprintRow({
-  story, isDemo, onRemove,
+  story, isDemo, onRemove, onSelect, isSelected,
-}: { story: SprintStory; isDemo: boolean; onRemove: () => void }) {
+}: {
+  story: SprintStory
+  isDemo: boolean
+  onRemove: () => void
+  onSelect: () => void
+  isSelected: boolean
+}) {
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: story.id })
   const style = { transform: CSS.Transform.toString(transform), transition, opacity: isDragging ? 0.4 : 1 }
 
@@ -51,7 +58,13 @@ function SortableSprintRow({
     <div
       ref={setNodeRef}
       style={style}
-      className="group flex items-center gap-3 px-4 py-2.5 border-b border-border hover:bg-surface-container transition-colors"
+      onClick={onSelect}
+      className={cn(
+        'group flex items-center gap-3 px-4 py-2.5 border-b border-border cursor-pointer transition-colors',
+        isSelected
+          ? 'bg-primary-container text-primary-container-foreground'
+          : 'hover:bg-surface-container'
+      )}
     >
       {!isDemo && (
         <span
@@ -59,6 +72,7 @@ function SortableSprintRow({
           {...listeners}
           aria-label="Versleep om te sorteren of naar Product Backlog"
           className="text-muted-foreground cursor-grab active:cursor-grabbing shrink-0 select-none text-sm"
+          onClick={e => e.stopPropagation()}
         >
           ⠿
         </span>
@@ -75,9 +89,10 @@ function SortableSprintRow({
       {!isDemo && (
         <button
           onClick={e => { e.stopPropagation(); onRemove() }}
-          className="opacity-0 group-hover:opacity-100 text-xs text-muted-foreground hover:text-error shrink-0"
+          className="opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-error shrink-0"
+          aria-label="Verwijder uit sprint"
         >
-          Verwijderen
+          <Trash2 size={14} />
         </button>
       )}
     </div>
@@ -89,9 +104,11 @@ interface SprintBacklogLeftProps {
   stories: SprintStory[]
   isDemo: boolean
   onRemove: (storyId: string) => void
+  onSelect: (storyId: string) => void
+  selectedStoryId: string | null
 }
 
-export function SprintBacklogLeft({ sprintId, stories, isDemo, onRemove }: SprintBacklogLeftProps) {
+export function SprintBacklogLeft({ sprintId, stories, isDemo, onRemove, onSelect, selectedStoryId }: SprintBacklogLeftProps) {
   const { sprintStoryOrder } = useSprintStore()
   const { setNodeRef, isOver } = useDroppable({ id: 'sprint-zone' })
 
@@ -114,7 +131,7 @@ export function SprintBacklogLeft({ sprintId, stories, isDemo, onRemove }: Sprin
             'text-sm text-muted-foreground text-center mt-8 px-4',
             isOver && 'text-primary'
           )}>
-            {isOver ? 'Loslaten om toe te voegen aan Sprint' : 'Geen stories in de Sprint. Sleep stories vanuit het rechterpaneel.'}
+            {isOver ? 'Loslaten om toe te voegen aan Sprint' : 'Geen stories in de Sprint. Sleep stories vanuit het linkerpaneel.'}
           </p>
         ) : (
           <SortableContext items={orderedStories.map(s => s.id)} strategy={verticalListSortingStrategy}>
@@ -124,6 +141,8 @@ export function SprintBacklogLeft({ sprintId, stories, isDemo, onRemove }: Sprin
                 story={story}
                 isDemo={isDemo}
                 onRemove={() => onRemove(story.id)}
+                onSelect={() => onSelect(story.id)}
+                isSelected={selectedStoryId === story.id}
               />
             ))}
           </SortableContext>
@@ -135,7 +154,15 @@ export function SprintBacklogLeft({ sprintId, stories, isDemo, onRemove }: Sprin
 
 // --- Right panel: Product Backlog grouped by PBI ---
 
-function DraggablePbiStoryRow({ story, isDemo }: { story: SprintStory; isDemo: boolean }) {
+function DraggablePbiStoryRow({
+  story,
+  isDemo,
+  onAdd,
+}: {
+  story: SprintStory
+  isDemo: boolean
+  onAdd: () => void
+}) {
   const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({ id: `pb:${story.id}` })
   const style = transform
     ? { transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`, zIndex: 50, position: 'relative' as const }
@@ -145,8 +172,11 @@ function DraggablePbiStoryRow({ story, isDemo }: { story: SprintStory; isDemo: b
     <div
       ref={setNodeRef}
       style={style}
+      onClick={!isDemo ? onAdd : undefined}
       className={cn(
-        'flex items-center gap-3 px-6 py-2 border-b border-border/50 hover:bg-surface-container transition-colors',
+        'flex items-center gap-3 px-6 py-2 border-b border-border/50 transition-colors',
+        !isDemo && 'cursor-pointer hover:bg-primary/5',
+        isDemo && 'opacity-60',
         isDragging && 'opacity-40'
       )}
     >
@@ -156,6 +186,7 @@ function DraggablePbiStoryRow({ story, isDemo }: { story: SprintStory; isDemo: b
           {...listeners}
           aria-label="Sleep naar Sprint Backlog"
           className="text-muted-foreground cursor-grab active:cursor-grabbing shrink-0 select-none text-sm"
+          onClick={e => e.stopPropagation()}
         >
           ⠿
         </span>
@@ -166,6 +197,9 @@ function DraggablePbiStoryRow({ story, isDemo }: { story: SprintStory; isDemo: b
           {STATUS_LABELS[story.status]}
         </Badge>
       </div>
+      {!isDemo && (
+        <span className="text-xs text-muted-foreground shrink-0">+ toevoegen</span>
+      )}
     </div>
   )
 }
@@ -174,9 +208,10 @@ interface SprintBacklogRightProps {
   pbisWithStories: PbiWithStories[]
   sprintStoryIds: Set<string>
   isDemo: boolean
+  onAdd: (storyId: string) => void
 }
 
-export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo }: SprintBacklogRightProps) {
+export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo, onAdd }: SprintBacklogRightProps) {
   const [collapsed, setCollapsed] = useState<Set<string>>(new Set())
   const { setNodeRef, isOver } = useDroppable({ id: 'backlog-zone' })
 
@@ -228,7 +263,7 @@ export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo }:
                   </div>
                 )
               }
-              return <DraggablePbiStoryRow key={story.id} story={story} isDemo={isDemo} />
+              return <DraggablePbiStoryRow key={story.id} story={story} isDemo={isDemo} onAdd={() => onAdd(story.id)} />
             })}
           </div>
         ))}

components/sprint/sprint-board-client.tsx

@@ -2,14 +2,16 @@
 
 import { useState, useEffect, useTransition } from 'react'
 import {
-  DndContext, DragEndEvent,
+  DndContext, DragEndEvent, DragStartEvent, DragOverlay,
   KeyboardSensor, PointerSensor, useSensor, useSensors, closestCenter,
 } from '@dnd-kit/core'
 import { sortableKeyboardCoordinates, arrayMove } from '@dnd-kit/sortable'
 import { toast } from 'sonner'
-import { SplitPane } from '@/components/split-pane/split-pane'
+import { TriplePane } from '@/components/split-pane/triple-pane'
 import { SprintBacklogLeft, SprintBacklogRight } from './sprint-backlog'
 import type { SprintStory, PbiWithStories } from './sprint-backlog'
+import { TaskList } from './task-list'
+import type { Task } from './task-list'
 import { useSprintStore } from '@/stores/sprint-store'
 import {
   addStoryToSprintAction,
@@ -17,25 +19,28 @@ import {
   reorderSprintStoriesAction,
 } from '@/actions/sprints'
 
-interface SprintBacklogClientProps {
+interface SprintBoardClientProps {
   productId: string
   sprintId: string
   stories: SprintStory[]
   pbisWithStories: PbiWithStories[]
   sprintStoryIdList: string[]
+  tasksByStory: Record<string, Task[]>
   isDemo: boolean
 }
 
-export function SprintBacklogClient({
+export function SprintBoardClient({
   productId,
   sprintId,
   stories,
   pbisWithStories,
   sprintStoryIdList,
+  tasksByStory,
   isDemo,
-}: SprintBacklogClientProps) {
+}: SprintBoardClientProps) {
   const [sprintStories, setSprintStories] = useState<SprintStory[]>(stories)
   const [sprintStoryIds, setSprintStoryIds] = useState<Set<string>>(() => new Set(sprintStoryIdList))
+  const [selectedStoryId, setSelectedStoryId] = useState<string | null>(null)
   const {
     sprintStoryOrder,
     initSprint,
@@ -44,6 +49,7 @@ export function SprintBacklogClient({
     reorderSprintStories,
     rollbackSprint,
   } = useSprintStore()
+  const [activeDragStory, setActiveDragStory] = useState<SprintStory | null>(null)
   const [, startTransition] = useTransition()
 
   useEffect(() => {
@@ -56,7 +62,16 @@ export function SprintBacklogClient({
     useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
   )
 
+  function handleDragStart(event: DragStartEvent) {
+    const id = event.active.id.toString()
+    if (id.startsWith('pb:')) {
+      const story = pbisWithStories.flatMap(p => p.stories).find(s => s.id === id.slice(3))
+      setActiveDragStory(story ?? null)
+    }
+  }
+
   function handleDragEnd(event: DragEndEvent) {
+    setActiveDragStory(null)
     const { active, over } = event
     if (!over) return
 
@@ -64,7 +79,7 @@ export function SprintBacklogClient({
     const overId = over.id.toString()
     const order = sprintStoryOrder[sprintId] ?? sprintStories.map(s => s.id)
 
-    // Dragged from right panel (pb: prefix) → add to sprint
+    // Drag from left (product backlog) → add to sprint (middle)
     if (activeId.startsWith('pb:')) {
       const storyId = activeId.slice(3)
       const droppingOnSprint =
@@ -89,12 +104,13 @@ export function SprintBacklogClient({
       return
     }
 
-    // Dragged from left panel to right panel → remove from sprint
+    // Drag from middle (sprint backlog) → left (product backlog) → remove
     if (overId === 'backlog-zone') {
       const storyData = sprintStories.find(s => s.id === activeId)
       setSprintStoryIds(prev => { const n = new Set(prev); n.delete(activeId); return n })
       setSprintStories(prev => prev.filter(s => s.id !== activeId))
       removeStoryFromSprint(sprintId, activeId)
+      if (selectedStoryId === activeId) setSelectedStoryId(null)
       startTransition(async () => {
         const result = await removeStoryFromSprintAction(activeId)
         if (!result.success) {
@@ -109,10 +125,13 @@ export function SprintBacklogClient({
       return
     }
 
-    // Reorder within sprint
+    // Reorder within sprint (middle panel)
-    if (activeId !== overId && order.includes(overId)) {
+    if (activeId !== overId && !activeId.startsWith('pb:')) {
       const prevOrder = [...order]
-      const newOrder = arrayMove([...order], order.indexOf(activeId), order.indexOf(overId))
+      const newOrder = order.includes(overId)
+        ? arrayMove([...order], order.indexOf(activeId), order.indexOf(overId))
+        : [...order.filter(id => id !== activeId), activeId]
+
       reorderSprintStories(sprintId, newOrder)
       startTransition(async () => {
         const result = await reorderSprintStoriesAction(sprintId, newOrder)
@@ -124,11 +143,30 @@ export function SprintBacklogClient({
     }
   }
 
+  function handleAdd(storyId: string) {
+    if (sprintStoryIds.has(storyId)) return
+    const storyData = pbisWithStories.flatMap(p => p.stories).find(s => s.id === storyId)
+    if (!storyData) return
+    setSprintStoryIds(prev => new Set([...prev, storyId]))
+    setSprintStories(prev => [...prev, storyData])
+    addStoryToSprint(sprintId, storyId)
+    startTransition(async () => {
+      const result = await addStoryToSprintAction(sprintId, storyId)
+      if (!result.success) {
+        setSprintStoryIds(prev => { const n = new Set(prev); n.delete(storyId); return n })
+        setSprintStories(prev => prev.filter(s => s.id !== storyId))
+        removeStoryFromSprint(sprintId, storyId)
+        toast.error(result.error ?? 'Toevoegen mislukt')
+      }
+    })
+  }
+
   function handleRemove(storyId: string) {
     const storyData = sprintStories.find(s => s.id === storyId)
     setSprintStoryIds(prev => { const n = new Set(prev); n.delete(storyId); return n })
     setSprintStories(prev => prev.filter(s => s.id !== storyId))
     removeStoryFromSprint(sprintId, storyId)
+    if (selectedStoryId === storyId) setSelectedStoryId(null)
     startTransition(async () => {
       const result = await removeStoryFromSprintAction(storyId)
       if (!result.success) {
@@ -142,26 +180,60 @@ export function SprintBacklogClient({
     })
   }
 
+  const selectedTasks = selectedStoryId ? (tasksByStory[selectedStoryId] ?? []) : []
+
   return (
-    <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+    <DndContext
-      <SplitPane
+      id="sprint-board"
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+    >
+      <TriplePane
         storageKey={`sprint-${productId}`}
         left={
+          <SprintBacklogRight
+            pbisWithStories={pbisWithStories}
+            sprintStoryIds={sprintStoryIds}
+            isDemo={isDemo}
+            onAdd={handleAdd}
+          />
+        }
+        middle={
           <SprintBacklogLeft
             sprintId={sprintId}
             stories={sprintStories}
             isDemo={isDemo}
             onRemove={handleRemove}
+            onSelect={setSelectedStoryId}
+            selectedStoryId={selectedStoryId}
           />
         }
         right={
-          <SprintBacklogRight
+          selectedStoryId ? (
-            pbisWithStories={pbisWithStories}
+            <TaskList
-            sprintStoryIds={sprintStoryIds}
+              storyId={selectedStoryId}
-            isDemo={isDemo}
+              sprintId={sprintId}
-          />
+              productId={productId}
+              tasks={selectedTasks}
+              isDemo={isDemo}
+            />
+          ) : (
+            <div className="flex items-center justify-center h-full">
+              <p className="text-sm text-muted-foreground">Selecteer een story om de taken te bekijken.</p>
+            </div>
+          )
         }
       />
+      <DragOverlay>
+        {activeDragStory && (
+          <div className="flex items-center gap-3 px-6 py-2 bg-popover border border-primary rounded shadow-lg text-sm opacity-95 w-72">
+            <span className="text-muted-foreground select-none">⠿</span>
+            <span className="truncate flex-1">{activeDragStory.title}</span>
+          </div>
+        )}
+      </DragOverlay>
     </DndContext>
   )
 }

components/sprint/task-list.tsx

@@ -119,22 +119,28 @@ function EditSubmitButton() {
 }
 
 function CreateTaskForm({ storyId, sprintId, onDone }: { storyId: string; sprintId: string; onDone: () => void }) {
-  const [, formAction] = useActionState(
+  const [state, formAction] = useActionState(
     async (_prev: unknown, fd: FormData) => {
       const result = await createTaskAction(_prev, fd)
-      if (result?.success) onDone()
+      if (result?.success) { onDone(); return result }
+      if (result?.error) toast.error(typeof result.error === 'string' ? result.error : 'Aanmaken mislukt')
       return result
     },
     undefined
   )
   return (
-    <form action={formAction} className="flex gap-2 px-4 py-2 border-b border-border">
+    <form action={formAction} className="flex flex-col gap-1.5 px-4 py-2 border-b border-border">
       <input type="hidden" name="storyId" value={storyId} />
       <input type="hidden" name="sprintId" value={sprintId} />
       <input type="hidden" name="priority" value="2" />
-      <Input name="title" autoFocus placeholder="Taaknaam…" className="h-7 text-sm flex-1" required />
+      <div className="flex gap-2">
-      <CreateSubmitButton />
+        <Input name="title" autoFocus placeholder="Taaknaam…" className="h-7 text-sm flex-1" required />
-      <Button type="button" variant="ghost" size="sm" className="h-7" onClick={onDone}>×</Button>
+        <CreateSubmitButton />
+        <Button type="button" variant="ghost" size="sm" className="h-7" onClick={onDone}>×</Button>
+      </div>
+      {state && 'error' in state && typeof state.error === 'string' && (
+        <p className="text-xs text-destructive">{state.error}</p>
+      )}
     </form>
   )
 }
@@ -219,6 +225,7 @@ export function TaskList({ storyId, sprintId, productId: _productId, tasks, isDe
           </div>
         ) : (
           <DndContext
+            id="task-list"
             sensors={sensors}
             collisionDetection={closestCenter}
             onDragStart={e => setActiveDragId(e.active.id as string)}