feat(jobs): JobCard breadcrumb + datum-fallback per kind

Voeg productCode/pbiCode/storyCode/startedAt/finishedAt toe aan
JobCardProps; bouw breadcrumb per job-kind en toon finishedAt → startedAt
→ createdAt als datum. JobsColumn geeft de nieuwe velden door.

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

components/jobs/job-card.tsx

@@ -17,10 +17,15 @@ interface JobCardProps {
   sprintGoal?: string | null
   sprintCode?: string | null
   productName: string
+  productCode?: string | null
+  pbiCode?: string | null
+  storyCode?: string | null
   branch?: string | null
   error?: string | null
   summary?: string | null
   createdAt: Date | string
+  startedAt?: Date | string | null
+  finishedAt?: Date | string | null
   isSelected?: boolean
   onClick?: () => void
 }
@@ -36,7 +41,8 @@ const KIND_LABELS: Record<ClaudeJobKind, string> = {
 
 export default function JobCard({
   kind, status, taskCode, taskTitle, ideaCode, ideaTitle,
-  sprintGoal, sprintCode, productName, branch, error, createdAt, isSelected, onClick,
+  sprintGoal, sprintCode, productName, productCode, pbiCode, storyCode,
+  branch, error, createdAt, startedAt, finishedAt, isSelected, onClick,
 }: JobCardProps) {
   let titleText: string
   if (kind === 'TASK_IMPLEMENTATION') {
@@ -52,7 +58,19 @@ export default function JobCard({
     titleText = 'Job'
   }
 
+  let breadcrumb: string
+  if (kind === 'TASK_IMPLEMENTATION') {
+    breadcrumb = [productCode ?? productName, pbiCode, storyCode].filter(Boolean).join(' ')
+  } else if (kind === 'IDEA_GRILL' || kind === 'IDEA_MAKE_PLAN' || kind === 'IDEA_REVIEW_PLAN' || kind === 'PLAN_CHAT') {
+    breadcrumb = [productCode ?? productName, ideaCode].filter(Boolean).join(' ')
+  } else if (kind === 'SPRINT_IMPLEMENTATION') {
+    breadcrumb = [productCode ?? productName, sprintCode].filter(Boolean).join(' ')
+  } else {
+    breadcrumb = productCode ?? productName
+  }
+
   const detailText = branch || (error ? error.slice(0, 80) : null) || productName
+  const displayDate = finishedAt ?? startedAt ?? createdAt
 
   const apiStatus = jobStatusToApi(status)
 
@@ -65,11 +83,16 @@ export default function JobCard({
       )}
       {...debugProps('job-card', 'JobCard', 'components/jobs/job-card.tsx')}
     >
-      <div className="flex justify-between items-center gap-2" data-debug-id="job-card__status">
+      <div className="flex 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">
+        <span className="text-[10px] px-1.5 py-0.5 rounded border bg-muted text-muted-foreground font-mono shrink-0">
           {KIND_LABELS[kind]}
         </span>
-        <span className={cn('text-xs px-2 py-0.5 rounded-full border font-medium', JOB_STATUS_COLORS[apiStatus])}>
+        {breadcrumb && (
+          <span className="truncate font-mono text-[10px] text-muted-foreground flex-1 min-w-0">
+            {breadcrumb}
+          </span>
+        )}
+        <span className={cn('text-xs px-2 py-0.5 rounded-full border font-medium shrink-0 ml-auto', JOB_STATUS_COLORS[apiStatus])}>
           {JOB_STATUS_LABELS[apiStatus]}
         </span>
       </div>
@@ -77,7 +100,7 @@ export default function JobCard({
       <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' })}
+          {new Date(displayDate).toLocaleString('nl-NL', { dateStyle: 'short', timeStyle: 'short' })}
         </span>
       </div>
     </div>

components/jobs/jobs-column.tsx

@@ -246,10 +246,15 @@ export default function JobsColumn({
             sprintGoal={j.sprintGoal}
             sprintCode={j.sprintCode}
             productName={j.productName}
+            productCode={j.productCode}
+            pbiCode={j.pbiCode}
+            storyCode={j.storyCode}
             branch={j.branch}
             error={j.error}
             summary={j.summary}
             createdAt={j.createdAt}
+            startedAt={j.startedAt}
+            finishedAt={j.finishedAt}
             isSelected={j.id === selectedJobId}
             onClick={() => onSelect(j.id)}
           />