From 29e05d831e84f7b926ee03b50da1cf6e4f72ec78 Mon Sep 17 00:00:00 2001
From: Scrum4Me Agent <30029041+madhura68@users.noreply.github.com>
Date: Sat, 9 May 2026 22:18:21 +0200
Subject: [PATCH] feat(PBI-49): add BEM sub-element data-debug-id to
 components/jobs/*

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 components/jobs/job-card.tsx              |  6 +++---
 components/jobs/job-detail-pane.tsx       |  4 +++-
 components/jobs/job-usage-pane.tsx        | 20 ++++++++++++--------
 components/jobs/jobs-board.tsx            | 16 +++++++++-------
 components/jobs/jobs-column.tsx           |  4 ++--
 components/jobs/sprint-sub-tasks-pane.tsx |  2 +-
 6 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/components/jobs/job-card.tsx b/components/jobs/job-card.tsx
index dc27d36..3396000 100644
--- a/components/jobs/job-card.tsx
+++ b/components/jobs/job-card.tsx
@@ -64,7 +64,7 @@ export default function JobCard({
       )}
       {...debugProps('job-card', 'JobCard', 'components/jobs/job-card.tsx')}
     >
-      <div className="flex justify-between items-center gap-2">
+      <div className="flex justify-between items-center gap-2" data-debug-id="job-card__status">
         <span className="text-[10px] px-1.5 py-0.5 rounded border bg-muted text-muted-foreground font-mono">
           {KIND_LABELS[kind]}
         </span>
@@ -72,8 +72,8 @@ export default function JobCard({
           {JOB_STATUS_LABELS[apiStatus]}
         </span>
       </div>
-      <p className="font-medium truncate mt-1">{titleText}</p>
-      <div className="flex items-end justify-between gap-2 mt-0.5">
+      <p className="font-medium truncate mt-1" data-debug-id="job-card__title">{titleText}</p>
+      <div className="flex items-end justify-between gap-2 mt-0.5" data-debug-id="job-card__actions">
         <p className="text-xs text-muted-foreground truncate">{detailText}</p>
         <span className="text-[10px] text-muted-foreground shrink-0 tabular-nums">
           {new Date(createdAt).toLocaleString('nl-NL', { dateStyle: 'short', timeStyle: 'short' })}
diff --git a/components/jobs/job-detail-pane.tsx b/components/jobs/job-detail-pane.tsx
index 236dddc..a5ee13a 100644
--- a/components/jobs/job-detail-pane.tsx
+++ b/components/jobs/job-detail-pane.tsx
@@ -77,6 +77,7 @@ export default function JobDetailPane({ job, isDemo }: JobDetailPaneProps) {
 
   return (
     <div className="overflow-y-auto h-full p-4" {...debugProps('job-detail-pane', 'JobDetailPane', 'components/jobs/job-detail-pane.tsx')}>
+      <div data-debug-id="job-detail-pane__header">
       <FieldRow label="Status">
         <span className={cn('text-xs px-2 py-0.5 rounded-full border font-medium', JOB_STATUS_COLORS[apiStatus])}>
           {JOB_STATUS_LABELS[apiStatus]}
@@ -119,7 +120,8 @@ export default function JobDetailPane({ job, isDemo }: JobDetailPaneProps) {
           </pre>
         ) : '—'}
       </FieldRow>
-      <div className="pt-3 mt-3 border-t border-border/50">
+      </div>
+      <div className="pt-3 mt-3 border-t border-border/50" data-debug-id="job-detail-pane__body">
         <p className="text-xs text-muted-foreground mb-1.5">Beschrijving</p>
         {job.description ? (
           <pre className="text-xs whitespace-pre-wrap break-words bg-muted/40 rounded p-3 font-sans">
diff --git a/components/jobs/job-usage-pane.tsx b/components/jobs/job-usage-pane.tsx
index f14e80a..98158a1 100644
--- a/components/jobs/job-usage-pane.tsx
+++ b/components/jobs/job-usage-pane.tsx
@@ -59,14 +59,18 @@ export default function JobUsagePane({ job }: JobUsagePaneProps) {
 
   return (
     <div className="overflow-y-auto h-full p-4" {...debugProps('job-usage-pane', 'JobUsagePane', 'components/jobs/job-usage-pane.tsx')}>
-      <FieldRow label="Model">{job.modelId ?? '—'}</FieldRow>
-      <FieldRow label="Tokens invoer">{formatNumber(job.inputTokens)}</FieldRow>
-      <FieldRow label="Tokens uitvoer">{formatNumber(job.outputTokens)}</FieldRow>
-      <FieldRow label="Cache read">{formatNumber(job.cacheReadTokens)}</FieldRow>
-      <FieldRow label="Cache write">{formatNumber(job.cacheWriteTokens)}</FieldRow>
-      <FieldRow label="Tokens totaal">{formatNumber(totalTokens || null)}</FieldRow>
-      <FieldRow label="Kosten (USD)">{costLabel}</FieldRow>
-      <FieldRow label="Duur">{formatDuration(job.startedAt, job.finishedAt)}</FieldRow>
+      <div data-debug-id="job-usage-pane__header">
+        <FieldRow label="Model">{job.modelId ?? '—'}</FieldRow>
+      </div>
+      <div data-debug-id="job-usage-pane__table">
+        <FieldRow label="Tokens invoer">{formatNumber(job.inputTokens)}</FieldRow>
+        <FieldRow label="Tokens uitvoer">{formatNumber(job.outputTokens)}</FieldRow>
+        <FieldRow label="Cache read">{formatNumber(job.cacheReadTokens)}</FieldRow>
+        <FieldRow label="Cache write">{formatNumber(job.cacheWriteTokens)}</FieldRow>
+        <FieldRow label="Tokens totaal">{formatNumber(totalTokens || null)}</FieldRow>
+        <FieldRow label="Kosten (USD)">{costLabel}</FieldRow>
+        <FieldRow label="Duur">{formatDuration(job.startedAt, job.finishedAt)}</FieldRow>
+      </div>
     </div>
   )
 }
diff --git a/components/jobs/jobs-board.tsx b/components/jobs/jobs-board.tsx
index 3247cfc..cbd5456 100644
--- a/components/jobs/jobs-board.tsx
+++ b/components/jobs/jobs-board.tsx
@@ -62,7 +62,7 @@ export default function JobsBoard({ initialActiveJobs, initialDoneJobs, isDemo }
         jobId={selectedJobId}
         isSprintJob={selectedJob?.kind === 'SPRINT_IMPLEMENTATION'}
       />
-      <div className="flex gap-1 px-3 pt-3 pb-2 border-b shrink-0">
+      <div className="flex gap-1 px-3 pt-3 pb-2 border-b shrink-0" data-debug-id="jobs-board__toolbar">
         <Button
           size="sm"
           variant={view === 'detail' ? 'default' : 'outline'}
@@ -98,12 +98,14 @@ export default function JobsBoard({ initialActiveJobs, initialDoneJobs, isDemo }
 
   return (
     <div className="h-full" {...debugProps('jobs-board', 'JobsBoard', 'components/jobs/jobs-board.tsx')}>
-      <SplitPane
-        panes={[leftPane, middlePane, rightPane]}
-        defaultSplit={[25, 50, 25]}
-        cookieKey="jobs"
-        tabLabels={['Actief', 'Details', 'Klaar']}
-      />
+      <div className="h-full" data-debug-id="jobs-board__columns">
+        <SplitPane
+          panes={[leftPane, middlePane, rightPane]}
+          defaultSplit={[25, 50, 25]}
+          cookieKey="jobs"
+          tabLabels={['Actief', 'Details', 'Klaar']}
+        />
+      </div>
     </div>
   )
 }
diff --git a/components/jobs/jobs-column.tsx b/components/jobs/jobs-column.tsx
index 1d55a6a..652f8e6 100644
--- a/components/jobs/jobs-column.tsx
+++ b/components/jobs/jobs-column.tsx
@@ -172,7 +172,7 @@ export default function JobsColumn({
 
   return (
     <div className="flex flex-col h-full" {...debugProps('jobs-column', 'JobsColumn', 'components/jobs/jobs-column.tsx')}>
-      <div className="flex items-center justify-between gap-2 px-2 py-1.5 border-b border-border bg-surface-container-low shrink-0">
+      <div className="flex items-center justify-between gap-2 px-2 py-1.5 border-b border-border bg-surface-container-low shrink-0" data-debug-id="jobs-column__header">
         <span className="text-xs font-medium text-muted-foreground px-1">{title}</span>
         <div className="flex items-center gap-1.5 flex-wrap justify-end">
           {Array.from(filterKinds).map((k) => (
@@ -241,7 +241,7 @@ export default function JobsColumn({
           </Popover>
         </div>
       </div>
-      <div className="overflow-y-auto flex-1 p-2 space-y-2">
+      <div className="overflow-y-auto flex-1 p-2 space-y-2" data-debug-id="jobs-column__items">
         {filtered.map((j) => (
           <JobCard
             key={j.id}
diff --git a/components/jobs/sprint-sub-tasks-pane.tsx b/components/jobs/sprint-sub-tasks-pane.tsx
index 2dc2cfa..b59df9a 100644
--- a/components/jobs/sprint-sub-tasks-pane.tsx
+++ b/components/jobs/sprint-sub-tasks-pane.tsx
@@ -45,7 +45,7 @@ function SubTaskList({ jobId }: { jobId: string }) {
   if (subTasks.length === 0) return null
 
   return (
-    <div className="border-b p-2 space-y-1 max-h-44 overflow-y-auto shrink-0">
+    <div className="border-b p-2 space-y-1 max-h-44 overflow-y-auto shrink-0" data-debug-id="sprint-sub-tasks-pane__items">
       {subTasks.map(t => {
         const apiStatus = t.status.toLowerCase() as ClaudeJobStatusApi
         return (