feat(PBI-49): add BEM sub-element data-debug-id to components/solo/*

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

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

@@ -43,7 +43,7 @@ export function BatchEnqueueBlockerDialog({
           <DialogTitle className="text-xl font-semibold">Blokkade gedetecteerd</DialogTitle>
         </div>
 
-        <div className="flex-1 overflow-y-auto px-6 py-6 space-y-6 text-sm text-foreground">
+        <div className="flex-1 overflow-y-auto px-6 py-6 space-y-6 text-sm text-foreground" data-debug-id="batch-enqueue-blocker-dialog__content">
           <p>
             {BLOCKER_REASON_LABELS[blockerReason]}:{' '}
             <span className="font-medium">{blockerLabel}</span>.
@@ -61,7 +61,7 @@ export function BatchEnqueueBlockerDialog({
 
         <div className={entityDialogFooterClasses}>
           <div className="flex justify-end gap-2">
-            <Button variant="ghost" onClick={onCancel}>
+            <Button variant="ghost" onClick={onCancel} data-debug-id="batch-enqueue-blocker-dialog__cancel">
               Annuleer
             </Button>
             <TooltipProvider>
@@ -72,6 +72,7 @@ export function BatchEnqueueBlockerDialog({
                       <Button
                         onClick={onConfirm}
                         disabled={noTasksBeforeBlocker}
+                        data-debug-id="batch-enqueue-blocker-dialog__confirm"
                       >
                         {prefixCount === 1
                           ? `Stuur ${prefixCount} taak tot aan blokkade`

components/solo/no-active-sprint.tsx

@@ -10,7 +10,7 @@ export function NoActiveSprint({ productId, productName }: NoActiveSprintProps)
   return (
     <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>
+      <h2 className="text-lg font-medium text-foreground" data-debug-id="no-active-sprint__title">Geen actieve sprint</h2>
       <p className="text-sm text-muted-foreground max-w-sm">
         Er is nog geen actieve sprint voor <span className="font-medium text-foreground">{productName}</span>.
         Start een sprint in het Sprint Board om hier je taken te zien.
@@ -18,6 +18,7 @@ export function NoActiveSprint({ productId, productName }: NoActiveSprintProps)
       <Link
         href={`/products/${productId}/sprint`}
         className="text-sm text-primary hover:underline"
+        data-debug-id="no-active-sprint__cta"
       >
         Naar Sprint Board →
       </Link>

components/solo/product-picker.tsx

@@ -27,7 +27,7 @@ export function ProductPicker({ products }: ProductPickerProps) {
           </Link>
         </div>
       ) : (
-        <div className="grid gap-2">
+        <div className="grid gap-2" data-debug-id="product-picker__items">
           {products.map(product => (
             <Link
               key={product.id}

components/solo/realtime-bridge.tsx

@@ -11,6 +11,7 @@
 
 import { useSoloRealtime } from '@/lib/realtime/use-solo-realtime'
 
+// render-loos — geen JSX-root, data-debug-id niet van toepassing
 export function SoloRealtimeBridge({ productId }: { productId: string | null }) {
   useSoloRealtime(productId)
   return null

components/solo/solo-board.tsx

@@ -202,7 +202,7 @@ export function SoloBoard({
 
   return (
     <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="flex items-start justify-between gap-4 shrink-0" data-debug-id="solo-board__header">
         <div className="min-w-0 flex items-center gap-3">
           <DemoTooltip show={isDemo}>
             <Button
@@ -232,7 +232,7 @@ export function SoloBoard({
         onDragStart={handleDragStart}
         onDragEnd={handleDragEnd}
       >
-        <div className="flex-1 min-h-0">
+        <div className="flex-1 min-h-0" data-debug-id="solo-board__columns">
           <SplitPane
             cookieKey={`solo-${productId}`}
             defaultSplit={[33, 33, 34]}

components/solo/solo-column.tsx

@@ -43,12 +43,12 @@ export function SoloColumn({ status, tasks, isDemo, onTaskClick }: SoloColumnPro
       )}
       {...debugProps('solo-column', 'SoloColumn', 'components/solo/solo-column.tsx')}
     >
-      <div className={cn('flex items-center gap-2 px-3 py-2', config.headerClass)}>
+      <div className={cn('flex items-center gap-2 px-3 py-2', config.headerClass)} data-debug-id="solo-column__header">
         <span className="text-sm font-medium">{config.label}</span>
         <span className="text-xs opacity-60 ml-auto">{tasks.length}</span>
       </div>
 
-      <div className="flex-1 flex flex-col gap-2 p-2 overflow-y-auto min-h-[140px]">
+      <div className="flex-1 flex flex-col gap-2 p-2 overflow-y-auto min-h-[140px]" data-debug-id="solo-column__tasks">
         {tasks.map(task => (
           <SoloTaskCard
             key={task.id}

components/solo/solo-task-card.tsx

@@ -51,7 +51,7 @@ export function SoloTaskCard({ task, isDemo, onClick }: SoloTaskCardProps) {
       {...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">
+      <div className="flex items-start justify-between gap-2" data-debug-id="solo-task-card__title">
         <p className="text-sm text-foreground leading-snug flex-1">{task.title}</p>
         {task.task_code && (
           <TooltipProvider>
@@ -108,7 +108,7 @@ export function SoloTaskCard({ task, isDemo, onClick }: SoloTaskCardProps) {
       </div>
 
       {/* Regel 4: story-info + job-badge */}
-      <div className="flex items-center justify-between gap-2 mt-0.5">
+      <div className="flex items-center justify-between gap-2 mt-0.5" data-debug-id="solo-task-card__status">
         <p className="text-xs text-muted-foreground truncate flex-1">
           {task.story_code && <span className="font-mono mr-1">{task.story_code}</span>}
           {task.story_title}

components/solo/task-detail-dialog.tsx

@@ -207,7 +207,7 @@ function TaskDetailContent({ task, productId, isDemo, repoUrl, onClose }: TaskDe
         </p>
       </div>
 
-      <div className={entityDialogBodyClasses}>
+      <div className={entityDialogBodyClasses} data-debug-id="task-detail-dialog__content">
         {task.description && (
           <div>
             <p className="text-xs font-medium text-muted-foreground mb-1.5">Beschrijving</p>

components/solo/unassigned-stories-sheet.tsx

@@ -162,7 +162,7 @@ export function UnassignedStoriesSheet({
           <SheetTitle>Openstaande stories</SheetTitle>
         </SheetHeader>
 
-        <div className="flex-1 overflow-y-auto">
+        <div className="flex-1 overflow-y-auto" data-debug-id="unassigned-stories-sheet__content">
           {stories.length === 0 ? (
             <div className="flex items-center justify-center h-32">
               <p className="text-sm text-muted-foreground text-center">
@@ -170,7 +170,7 @@ export function UnassignedStoriesSheet({
               </p>
             </div>
           ) : (
-            <div className="flex flex-col gap-2">
+            <div className="flex flex-col gap-2" data-debug-id="unassigned-stories-sheet__items">
               {stories.map(story => (
                 <ClaimStoryRow
                   key={story.id}