feat(PBI-49): add debugProps to backlog/, sprint/, solo/ components

components/sprint/new-sprint-dialog.tsx

@@ -21,6 +21,7 @@ import {
   entityDialogHeaderClasses,
 } from '@/components/shared/entity-dialog-layout'
 import { createSprintWithPbisAction } from '@/actions/sprints'
+import { debugProps } from '@/lib/debug'
 
 interface NewSprintDialogProps {
   open: boolean
@@ -102,6 +103,7 @@ export function NewSprintDialog({
           showCloseButton={false}
           onKeyDown={handleKeyDown}
           className={entityDialogContentClasses}
+          {...debugProps('new-sprint-dialog', 'NewSprintDialog', 'components/sprint/new-sprint-dialog.tsx')}
         >
           <div className={entityDialogHeaderClasses}>
             <DialogTitle className="text-xl font-semibold">Nieuwe sprint</DialogTitle>

components/sprint/sprint-backlog.tsx

@@ -26,6 +26,7 @@ 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'
+import { debugProps } from '@/lib/debug'
 
 const STATUS_COLORS: Record<string, string> = {
   OPEN: 'bg-status-todo/15 text-status-todo border-status-todo/30',
@@ -276,7 +277,7 @@ export function SprintBacklogLeft({
   const orderedStories = order.map(id => storyMap[id]).filter(Boolean)
 
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex flex-col h-full" {...debugProps('sprint-backlog-left', 'SprintBacklogLeft', 'components/sprint/sprint-backlog.tsx')}>
       <PanelNavBar
         title="Sprint Backlog"
         actions={
@@ -631,7 +632,7 @@ export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo, pr
   )
 
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex flex-col h-full" {...debugProps('sprint-backlog-right', 'SprintBacklogRight', 'components/sprint/sprint-backlog.tsx')}>
       <PanelNavBar title="Product Backlog" actions={headerActions} />
       <div
         ref={setNodeRef}

components/sprint/sprint-header.tsx

@@ -32,6 +32,7 @@ import {
 } from '@/components/shared/entity-dialog-layout'
 import { updateSprintGoalAction, updateSprintDatesAction, completeSprintAction, setAllSprintTasksDoneAction } from '@/actions/sprints'
 import type { SprintStory } from './sprint-backlog'
+import { debugProps } from '@/lib/debug'
 
 interface Sprint {
   id: string
@@ -130,7 +131,7 @@ export function SprintHeader({ productId: _productId, productName, sprint, isDem
   }
 
   return (
-    <div className="px-4 py-3 border-b border-border bg-surface-container-low shrink-0">
+    <div className="px-4 py-3 border-b border-border bg-surface-container-low shrink-0" {...debugProps('sprint-header', 'SprintHeader', 'components/sprint/sprint-header.tsx')}>
       <div className="flex items-center justify-between gap-4">
         <div className="min-w-0 flex-1">
           <div className="flex items-center gap-2">

components/sprint/sprint-run-controls.tsx

@@ -19,6 +19,7 @@ import {
   DialogTitle,
 } from '@/components/ui/dialog'
 import { type PauseContext, pauseReasonLabel } from '@/lib/pause-context'
+import { debugProps } from '@/lib/debug'
 
 type SprintStatusValue = 'OPEN' | 'CLOSED' | 'ARCHIVED' | 'FAILED'
 type SprintRunStatusValue =
@@ -210,7 +211,7 @@ export function SprintRunControls({
       </div>
 
       <Dialog open={blockers !== null} onOpenChange={(open) => { if (!open) setBlockers(null) }}>
-        <DialogContent className="max-w-lg">
+        <DialogContent className="max-w-lg" {...debugProps('sprint-run-controls', 'SprintRunControls', 'components/sprint/sprint-run-controls.tsx')}>
           <DialogHeader>
             <DialogTitle>Sprint kan nog niet starten</DialogTitle>
             <DialogDescription>

components/sprint/start-sprint-button.tsx

@@ -22,6 +22,7 @@ import {
 } from '@/components/shared/entity-dialog-layout'
 import { createSprintAction } from '@/actions/sprints'
 import { useSelectionStore } from '@/stores/selection-store'
+import { debugProps } from '@/lib/debug'
 import { useBacklogStore } from '@/stores/backlog-store'
 
 interface StartSprintButtonProps {
@@ -89,6 +90,7 @@ export function StartSprintButton({ productId, isDemo = false }: StartSprintButt
           showCloseButton={false}
           onKeyDown={handleKeyDown}
           className={entityDialogContentClasses}
+          {...debugProps('start-sprint-button', 'StartSprintButton', 'components/sprint/start-sprint-button.tsx')}
         >
           <div className={entityDialogHeaderClasses}>
             <DialogTitle className="text-xl font-semibold">Nieuwe Sprint starten</DialogTitle>

components/sprint/task-list.tsx

@@ -21,6 +21,7 @@ import { PRIORITY_BORDER } from '@/components/backlog/backlog-card'
 import { useSprintStore } from '@/stores/sprint-store'
 import { updateTaskStatusAction, reorderTasksAction } from '@/actions/tasks'
 import { DemoTooltip } from '@/components/shared/demo-tooltip'
+import { debugProps } from '@/lib/debug'
 import { cn } from '@/lib/utils'
 
 const STATUS_CYCLE: Record<string, 'TO_DO' | 'IN_PROGRESS' | 'DONE'> = {
@@ -200,7 +201,7 @@ export function TaskList({ storyId, sprintId: _sprintId, productId: _productId,
   }
 
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex flex-col h-full" {...debugProps('task-list', 'TaskList', 'components/sprint/task-list.tsx')}>
       <PanelNavBar
         title="Taken"
         actions={