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

components/solo/batch-enqueue-blocker-dialog.tsx

@@ -8,6 +8,7 @@ import {
   entityDialogFooterClasses,
   entityDialogHeaderClasses,
 } from '@/components/shared/entity-dialog-layout'
+import { debugProps } from '@/lib/debug'
 
 interface BatchEnqueueBlockerDialogProps {
   open: boolean
@@ -37,7 +38,7 @@ export function BatchEnqueueBlockerDialog({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent showCloseButton={false} className={entityDialogContentClasses}>
+      <DialogContent showCloseButton={false} className={entityDialogContentClasses} {...debugProps('batch-enqueue-blocker-dialog', 'BatchEnqueueBlockerDialog', 'components/solo/batch-enqueue-blocker-dialog.tsx')}>
         <div className={entityDialogHeaderClasses}>
           <DialogTitle className="text-xl font-semibold">Blokkade gedetecteerd</DialogTitle>
         </div>

components/solo/nav-status-indicators.tsx

@@ -4,6 +4,7 @@ import { useSoloStore } from '@/stores/solo-store'
 import type { RealtimeStatus } from '@/stores/solo-store'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import { cn } from '@/lib/utils'
+import { debugProps } from '@/lib/debug'
 
 function RealtimeIndicator({
   status,
@@ -63,7 +64,7 @@ export function SoloNavStatusIndicators({
     workerQuotaPct < minQuotaPct
 
   return (
-    <div className="flex items-center gap-3 px-2">
+    <div className="flex items-center gap-3 px-2" {...debugProps('solo-nav-status-indicators', 'SoloNavStatusIndicators', 'components/solo/nav-status-indicators.tsx')}>
       <RealtimeIndicator
         status={realtimeStatus}
         showConnectingIndicator={showConnectingIndicator}

components/solo/no-active-sprint.tsx

@@ -1,4 +1,5 @@
 import Link from 'next/link'
+import { debugProps } from '@/lib/debug'
 
 interface NoActiveSprintProps {
   productId: string
@@ -7,7 +8,7 @@ interface NoActiveSprintProps {
 
 export function NoActiveSprint({ productId, productName }: NoActiveSprintProps) {
   return (
-    <div className="flex flex-col items-center justify-center h-full gap-4 text-center px-6">
+    <div className="flex flex-col items-center justify-center h-full gap-4 text-center px-6" {...debugProps('no-active-sprint', 'NoActiveSprint', 'components/solo/no-active-sprint.tsx')}>
       <div className="text-4xl text-muted-foreground">🏃</div>
       <h2 className="text-lg font-medium text-foreground">Geen actieve sprint</h2>
       <p className="text-sm text-muted-foreground max-w-sm">

components/solo/product-picker.tsx

@@ -1,4 +1,5 @@
 import Link from 'next/link'
+import { debugProps } from '@/lib/debug'
 
 interface Product {
   id: string
@@ -12,7 +13,7 @@ interface ProductPickerProps {
 
 export function ProductPicker({ products }: ProductPickerProps) {
   return (
-    <div className="p-6 max-w-2xl mx-auto w-full">
+    <div className="p-6 max-w-2xl mx-auto w-full" {...debugProps('product-picker', 'ProductPicker', 'components/solo/product-picker.tsx')}>
       <h1 className="text-xl font-medium text-foreground mb-2">Solo bord</h1>
       <p className="text-sm text-muted-foreground mb-6">
         Kies een product om je persoonlijke Kanban-bord te openen.

components/solo/solo-board.tsx

@@ -10,6 +10,7 @@ import { useSoloStore } from '@/stores/solo-store'
 import { taskStatusToApi } from '@/lib/task-status'
 import { previewEnqueueAllAction, enqueueClaudeJobsBatchAction } from '@/actions/claude-jobs'
 import { BatchEnqueueBlockerDialog } from './batch-enqueue-blocker-dialog'
+import { debugProps } from '@/lib/debug'
 import { Button } from '@/components/ui/button'
 import { DemoTooltip } from '@/components/shared/demo-tooltip'
 import { SplitPane } from '@/components/split-pane/split-pane'
@@ -200,7 +201,7 @@ export function SoloBoard({
   }
 
   return (
-    <div className="flex flex-col h-full p-4 gap-4 min-h-0">
+    <div className="flex flex-col h-full p-4 gap-4 min-h-0" {...debugProps('solo-board', 'SoloBoard', 'components/solo/solo-board.tsx')}>
       <div className="flex items-start justify-between gap-4 shrink-0">
         <div className="min-w-0 flex items-center gap-3">
           <DemoTooltip show={isDemo}>

components/solo/solo-column.tsx

@@ -3,6 +3,7 @@
 import { useDroppable } from '@dnd-kit/core'
 import { cn } from '@/lib/utils'
 import { SoloTaskCard } from './solo-task-card'
+import { debugProps } from '@/lib/debug'
 import type { SoloTask } from './solo-board'
 
 export const COLUMN_CONFIG = {
@@ -40,6 +41,7 @@ export function SoloColumn({ status, tasks, isDemo, onTaskClick }: SoloColumnPro
         'flex flex-col h-full rounded-lg border border-border overflow-hidden',
         isOver && 'ring-2 ring-primary ring-inset',
       )}
+      {...debugProps('solo-column', 'SoloColumn', 'components/solo/solo-column.tsx')}
     >
       <div className={cn('flex items-center gap-2 px-3 py-2', config.headerClass)}>
         <span className="text-sm font-medium">{config.label}</span>

components/solo/solo-task-card.tsx

@@ -10,6 +10,7 @@ import { JOB_STATUS_LABELS, JOB_STATUS_COLORS, JOB_STATUS_ACTIVE } from '@/compo
 import { useSoloStore } from '@/stores/solo-store'
 import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@/components/ui/tooltip'
 import type { SoloTask } from './solo-board'
+import { debugProps } from '@/lib/debug'
 
 const PRIORITY_BORDER: Record<number, string> = {
   1: 'border-l-4 border-l-priority-critical',
@@ -47,6 +48,7 @@ export function SoloTaskCard({ task, isDemo, onClick }: SoloTaskCardProps) {
         isDemo ? 'cursor-pointer' : 'cursor-grab active:cursor-grabbing',
       )}
       {...(!isDemo ? { ...attributes, ...listeners } : {})}
+      {...debugProps('solo-task-card', 'SoloTaskCard', 'components/solo/solo-task-card.tsx')}
     >
       {/* Regel 1: taaknaam + task_code */}
       <div className="flex items-start justify-between gap-2">
@@ -145,6 +147,7 @@ export function SoloTaskCardOverlay({ task }: { task: SoloTask }) {
         'bg-surface-container rounded border border-primary px-3 py-2 shadow-xl opacity-90',
         PRIORITY_BORDER[task.priority],
       )}
+      {...debugProps('solo-task-card-overlay', 'SoloTaskCardOverlay', 'components/solo/solo-task-card.tsx')}
     >
       {/* Regel 1 */}
       <div className="flex items-start justify-between gap-2">

components/solo/task-detail-dialog.tsx

@@ -19,6 +19,7 @@ import { useSoloStore } from '@/stores/solo-store'
 import { enqueueClaudeJobAction, cancelClaudeJobAction } from '@/actions/claude-jobs'
 import { cn } from '@/lib/utils'
 import { getBranchUrl } from '@/lib/job-status-url'
+import { debugProps } from '@/lib/debug'
 import type { SoloTask } from './solo-board'
 
 const STATUS_COLORS: Record<string, string> = {
@@ -380,7 +381,7 @@ function TaskDetailContent({ task, productId, isDemo, repoUrl, onClose }: TaskDe
 export function TaskDetailDialog({ task, productId, isDemo, repoUrl, onClose }: TaskDetailDialogProps) {
   return (
     <Dialog open={!!task} onOpenChange={(open) => { if (!open) onClose() }}>
-      <DialogContent showCloseButton={false} className={entityDialogContentClasses}>
+      <DialogContent showCloseButton={false} className={entityDialogContentClasses} {...debugProps('task-detail-dialog', 'TaskDetailDialog', 'components/solo/task-detail-dialog.tsx')}>
         {task && (
           <TaskDetailContent
             key={task.id}

components/solo/unassigned-stories-sheet.tsx

@@ -10,6 +10,7 @@ import { DemoTooltip } from '@/components/shared/demo-tooltip'
 import { CodeBadge } from '@/components/shared/code-badge'
 import { claimStoryAction } from '@/actions/stories'
 import { cn } from '@/lib/utils'
+import { debugProps } from '@/lib/debug'
 
 export interface UnassignedStoryTask {
   id: string
@@ -156,7 +157,7 @@ export function UnassignedStoriesSheet({
 
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent side="right">
+      <SheetContent side="right" {...debugProps('unassigned-stories-sheet', 'UnassignedStoriesSheet', 'components/solo/unassigned-stories-sheet.tsx')}>
         <SheetHeader>
           <SheetTitle>Openstaande stories</SheetTitle>
         </SheetHeader>