janpeter/Scrum4Me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scrum4Me Agent 2026-05-09 22:18:21 +02:00
parent 59d2d44a64
commit 29e05d831e
6 changed files with 30 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

6
components/jobs/job-card.tsx
View file

@ -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' })}

4
components/jobs/job-detail-pane.tsx
View file

@ -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">

20
components/jobs/job-usage-pane.tsx
View file

@ -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>
)
}

16
components/jobs/jobs-board.tsx
View file

@ -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>
)
}

4
components/jobs/jobs-column.tsx
View file

@ -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}

2
components/jobs/sprint-sub-tasks-pane.tsx
View file

@ -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 (