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

components/backlog/backlog-card.tsx

@@ -3,6 +3,7 @@
 import { forwardRef } from 'react'
 import { cn } from '@/lib/utils'
 import { CodeBadge } from '@/components/shared/code-badge'
+import { debugProps } from '@/lib/debug'
 
 export const PRIORITY_BORDER: Record<number, string> = {
   1: 'border-l-4 border-l-priority-critical',
@@ -38,6 +39,7 @@ export const BacklogCard = forwardRef<HTMLDivElement, BacklogCardProps>(function
         className,
       )}
       {...rest}
+      {...debugProps('backlog-card', 'BacklogCard', 'components/backlog/backlog-card.tsx')}
     >
       <div className="flex items-start justify-between gap-2">
         <p className="text-sm leading-snug line-clamp-2 flex-1">{title}</p>

components/backlog/empty-panel.tsx

@@ -2,6 +2,7 @@
 
 import { Button } from '@/components/ui/button'
 import { DemoTooltip } from '@/components/shared/demo-tooltip'
+import { debugProps } from '@/lib/debug'
 
 interface EmptyPanelProps {
   title?: string
@@ -15,7 +16,7 @@ interface EmptyPanelProps {
 
 export function EmptyPanel({ title, message, action }: EmptyPanelProps) {
   return (
-    <div className="p-8 text-center text-muted-foreground space-y-3">
+    <div className="p-8 text-center text-muted-foreground space-y-3" {...debugProps('empty-panel', 'EmptyPanel', 'components/backlog/empty-panel.tsx')}>
       {title && <p className="text-sm font-medium text-foreground">{title}</p>}
       <p className="text-sm">{message}</p>
       {action && (

components/backlog/pbi-dialog.tsx

@@ -27,6 +27,7 @@ import {
 } from '@/components/shared/entity-dialog-layout'
 import { createPbiAction, updatePbiAction } from '@/actions/pbis'
 import type { PbiStatusApi } from '@/lib/task-status'
+import { debugProps } from '@/lib/debug'
 
 export interface PbiDialogPbi {
   id: string
@@ -120,6 +121,7 @@ export function PbiDialog({ state, onClose, isDemo = false }: PbiDialogProps) {
           showCloseButton={false}
           onKeyDown={handleKeyDown}
           className={entityDialogContentClasses}
+          {...debugProps('pbi-dialog', 'PbiDialog', 'components/backlog/pbi-dialog.tsx')}
         >
           <div className={entityDialogHeaderClasses}>
             <DialogTitle className="text-xl font-semibold">

components/backlog/pbi-list.tsx

@@ -31,6 +31,7 @@ import { useBacklogStore } from '@/stores/backlog-store'
 import { deletePbiAction } from '@/actions/pbis'
 import { reorderPbisAction, updatePbiPriorityAction } from '@/actions/stories'
 import { cn } from '@/lib/utils'
+import { debugProps } from '@/lib/debug'
 import { PbiDialog, type PbiDialogState } from './pbi-dialog'
 import { BacklogCard } from './backlog-card'
 import { EmptyPanel } from './empty-panel'
@@ -390,7 +391,7 @@ export function PbiList({ productId, isDemo }: PbiListProps) {
   const activePbi = activeDragId ? pbiMap[activeDragId] : null
 
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex flex-col h-full" {...debugProps('pbi-list', 'PbiList', 'components/backlog/pbi-list.tsx')}>
       <div className="flex items-center justify-end gap-2 px-4 py-2 border-b border-border bg-surface-container-low shrink-0">
         {filterPriority !== 'all' && (
           <button

components/backlog/story-dialog.tsx

@@ -38,6 +38,7 @@ import {
 } from '@/components/shared/entity-dialog-layout'
 import { createStoryAction, updateStoryAction, deleteStoryAction, getStoryLogsAction } from '@/actions/stories'
 import { cn } from '@/lib/utils'
+import { debugProps } from '@/lib/debug'
 import type { Story } from './story-panel'
 
 export type StoryDialogState =
@@ -147,6 +148,7 @@ export function StoryDialog({ state, onClose, isDemo = false }: StoryDialogProps
           showCloseButton={false}
           onKeyDown={handleKeyDown}
           className={entityDialogContentClasses}
+          {...debugProps('story-dialog', 'StoryDialog', 'components/backlog/story-dialog.tsx')}
         >
           <div className={cn(entityDialogHeaderClasses, 'flex-col items-stretch gap-1')}>
             <div className="flex items-start gap-2">

components/backlog/story-panel.tsx

@@ -30,6 +30,7 @@ import { usePlannerStore } from '@/stores/planner-store'
 import { useBacklogStore } from '@/stores/backlog-store'
 import { reorderStoriesAction } from '@/actions/stories'
 import { StoryDialog, type StoryDialogState } from './story-dialog'
+import { debugProps } from '@/lib/debug'
 import { BacklogCard } from './backlog-card'
 import { EmptyPanel } from './empty-panel'
 import { DemoTooltip } from '@/components/shared/demo-tooltip'
@@ -210,7 +211,7 @@ export function StoryPanel({ productId, isDemo }: StoryPanelProps) {
   const hasActiveFilters = filterStatus !== null || filterPriority !== null
 
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex flex-col h-full" {...debugProps('story-panel', 'StoryPanel', 'components/backlog/story-panel.tsx')}>
       <PanelNavBar
         title="Stories"
         actions={

components/backlog/task-panel.tsx

@@ -30,6 +30,7 @@ import { useSelectionStore } from '@/stores/selection-store'
 import { useBacklogStore, type BacklogTask } from '@/stores/backlog-store'
 import { reorderTasksAction } from '@/actions/tasks'
 import { BacklogCard } from './backlog-card'
+import { debugProps } from '@/lib/debug'
 import { EmptyPanel } from './empty-panel'
 import { cn } from '@/lib/utils'
 
@@ -158,9 +159,11 @@ export function TaskPanel({ isDemo, closePath }: TaskPanelProps) {
     </DemoTooltip>
   )
 
+  const dp = debugProps('task-panel', 'TaskPanel', 'components/backlog/task-panel.tsx')
+
   if (tasks === null) {
     return (
-      <div className="flex flex-col h-full">
+      <div className="flex flex-col h-full" {...dp}>
         <PanelNavBar title="Taken" actions={navActions} />
         <EmptyPanel message="Selecteer een story om de taken te bekijken." />
       </div>
@@ -169,7 +172,7 @@ export function TaskPanel({ isDemo, closePath }: TaskPanelProps) {
 
   if (tasks.length === 0) {
     return (
-      <div className="flex flex-col h-full">
+      <div className="flex flex-col h-full" {...dp}>
         <PanelNavBar title="Taken" actions={navActions} />
         <EmptyPanel
           message="Nog geen taken voor deze story."
@@ -186,7 +189,7 @@ export function TaskPanel({ isDemo, closePath }: TaskPanelProps) {
   const activeTask = activeDragId ? tasks.find((t) => t.id === activeDragId) : null
 
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex flex-col h-full" {...dp}>
       <PanelNavBar title="Taken" actions={navActions} />
       <div className="flex-1 overflow-y-auto p-3">
         <DndContext