Sprint: Jobs scherm (#209)

* refactor(jobs): extraheer job-mapper naar lib/jobs-mapper.ts + voeg breadcrumb-velden toe

Verplaatst JobWithRelations, JOB_INCLUDE, RawJob, PriceRow, pickDescription,
computeCost en mapJob naar lib/jobs-mapper.ts (zonder 'use server'). Voegt
buildPriceMap helper toe en breidt de types uit met productCode, storyCode en
pbiCode via task->story->pbi en product.code includes.

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

* feat(jobs): voeg GET /api/jobs/[id] route toe + tests

* feat(jobs): useJobsRealtime fetch-on-unknown met dedup-Set

Wanneer een SSE-event een onbekend job_id bevat, haalt de hook de volledige
job op via GET /api/jobs/[id] en upsert die in de store. Een inFlight-Set
voorkomt gelijktijdige dubbele fetches voor hetzelfde job_id. Bekende jobs
blijven de bestaande partial-upsert gebruiken. Zelfde logica in jobs_initial.

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

* 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>

* test(jobs): JobCard breadcrumb + datum-fallback tests

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Janpeter Visser 2026-05-15 01:25:20 +02:00 committed by GitHub
parent 3d52fe4958
commit 2a6386163c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 605 additions and 156 deletions

View file

@ -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">
<span className="text-[10px] px-1.5 py-0.5 rounded border bg-muted text-muted-foreground font-mono">
<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 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>