Sprint: UI taken/ (#149)

* feat(PBI-58): Vitest-tests voor SoloTaskCard veldmapping en 4-regels layout

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

* feat(PBI-59): server action fetchJobsPageData voor jobs-pagina

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

* feat(PBI-59): SSE-route /api/realtime/jobs voor user-scoped job-events

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

* feat(PBI-59): JobCard component voor jobs-pagina

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

* feat(PBI-59): JobDetailPane component voor jobs-pagina

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

* feat(PBI-59): API route GET /api/jobs/[id]/sub-tasks voor sprint task executions

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

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

__tests__/components/solo/solo-task-card.test.tsx

@@ -0,0 +1,84 @@
+// @vitest-environment jsdom
+import '@testing-library/jest-dom'
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import type { SoloTask } from '@/components/solo/solo-board'
+
+vi.mock('@/components/ui/tooltip', () => ({
+  TooltipProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  Tooltip: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  TooltipTrigger: ({ children }: { children?: React.ReactNode }) => <>{children}</>,
+  TooltipContent: ({ children }: { children: React.ReactNode }) => <span data-testid="tooltip-content">{children}</span>,
+}))
+vi.mock('@dnd-kit/core', () => ({
+  useDraggable: () => ({ attributes: {}, listeners: {}, setNodeRef: vi.fn(), transform: null, isDragging: false }),
+}))
+vi.mock('@/stores/solo-store', () => ({
+  useSoloStore: () => null,
+}))
+vi.mock('@/components/shared/code-badge', () => ({
+  CodeBadge: ({ code }: { code: string }) => <span data-testid="code-badge">{code}</span>,
+}))
+
+import { SoloTaskCard, SoloTaskCardOverlay } from '@/components/solo/solo-task-card'
+
+function makeSoloTask(overrides: Partial<SoloTask> = {}): SoloTask {
+  return {
+    id: 'task-1',
+    title: 'Taak titel',
+    description: 'Omschrijving van de taak die langer is dan tachtig tekens voor test',
+    implementation_plan: null,
+    priority: 2,
+    sort_order: 0,
+    status: 'TO_DO',
+    verify_only: false,
+    verify_required: 'ALIGNED',
+    story_id: 'story-1',
+    story_code: 'ST-1',
+    story_title: 'Story titel',
+    task_code: 'T-1',
+    pbi_code: 'PBI-1',
+    pbi_title: 'PBI titel',
+    pbi_description: 'PBI omschrijving',
+    ...overrides,
+  }
+}
+
+describe('SoloTaskCard', () => {
+  it('toont taaknaam, task_code, pbi_code, story_code, story_title', () => {
+    render(<SoloTaskCard task={makeSoloTask()} isDemo={false} onClick={vi.fn()} />)
+    expect(screen.getAllByText('Taak titel').length).toBeGreaterThan(0)
+    expect(screen.getAllByText('T-1').length).toBeGreaterThan(0)
+    expect(screen.getAllByText('PBI-1').length).toBeGreaterThan(0)
+    expect(screen.getByText('ST-1')).toBeInTheDocument()
+    expect(screen.getByText('Story titel')).toBeInTheDocument()
+  })
+
+  it('verbergt pbi_code badge als pbi_code null is', () => {
+    render(<SoloTaskCard task={makeSoloTask({ pbi_code: null })} isDemo={false} onClick={vi.fn()} />)
+    const badges = screen.queryAllByTestId('code-badge')
+    const codes = badges.map(b => b.textContent)
+    expect(codes).not.toContain('PBI-1')
+  })
+
+  it('verbergt description als description null is', () => {
+    const task = makeSoloTask({ description: null })
+    render(<SoloTaskCard task={task} isDemo={false} onClick={vi.fn()} />)
+    expect(screen.queryByText(/Omschrijving/)).toBeNull()
+  })
+
+  it('toont description als tekst', () => {
+    render(<SoloTaskCard task={makeSoloTask()} isDemo={false} onClick={vi.fn()} />)
+    expect(screen.getAllByText('Omschrijving van de taak die langer is dan tachtig tekens voor test').length).toBeGreaterThan(0)
+  })
+})
+
+describe('SoloTaskCardOverlay', () => {
+  it('toont taaknaam en codes zonder tooltip-wrappers', () => {
+    render(<SoloTaskCardOverlay task={makeSoloTask()} />)
+    expect(screen.getByText('Taak titel')).toBeInTheDocument()
+    expect(screen.getByText('T-1')).toBeInTheDocument()
+    expect(screen.getByText('PBI-1')).toBeInTheDocument()
+    expect(screen.queryAllByTestId('tooltip-content')).toHaveLength(0)
+  })
+})

actions/jobs-page.ts

@@ -0,0 +1,114 @@
+'use server'
+
+import { prisma } from '@/lib/prisma'
+import { getSession } from '@/lib/auth'
+import type { ClaudeJobKind, ClaudeJobStatus, VerifyResult } from '@prisma/client'
+
+export type JobWithRelations = {
+  id: string
+  kind: ClaudeJobKind
+  status: ClaudeJobStatus
+  taskCode: string | null
+  taskTitle: string | null
+  ideaCode: string | null
+  ideaTitle: string | null
+  sprintGoal: string | null
+  sprintCode: string | null
+  productName: string
+  modelId: string | null
+  inputTokens: number | null
+  outputTokens: number | null
+  cacheReadTokens: number | null
+  cacheWriteTokens: number | null
+  branch: string | null
+  prUrl: string | null
+  error: string | null
+  summary: string | null
+  verifyResult: VerifyResult | null
+  startedAt: Date | null
+  finishedAt: Date | null
+  createdAt: Date
+  sprintRunId: string | null
+}
+
+const JOB_INCLUDE = {
+  task: { select: { code: true, title: true } },
+  idea: { select: { code: true, title: true } },
+  product: { select: { name: true } },
+  sprint_run: { include: { sprint: { select: { sprint_goal: true, code: true } } } },
+} as const
+
+function mapJob(j: {
+  id: string
+  kind: ClaudeJobKind
+  status: ClaudeJobStatus
+  model_id: string | null
+  input_tokens: number | null
+  output_tokens: number | null
+  cache_read_tokens: number | null
+  cache_write_tokens: number | null
+  branch: string | null
+  pr_url: string | null
+  error: string | null
+  summary: string | null
+  verify_result: VerifyResult | null
+  started_at: Date | null
+  finished_at: Date | null
+  created_at: Date
+  sprint_run_id: string | null
+  task: { code: string | null; title: string } | null
+  idea: { code: string | null; title: string } | null
+  product: { name: string }
+  sprint_run: { sprint: { sprint_goal: string; code: string | null } } | null
+}): JobWithRelations {
+  return {
+    id: j.id,
+    kind: j.kind,
+    status: j.status,
+    taskCode: j.task?.code ?? null,
+    taskTitle: j.task?.title ?? null,
+    ideaCode: j.idea?.code ?? null,
+    ideaTitle: j.idea?.title ?? null,
+    sprintGoal: j.sprint_run?.sprint.sprint_goal ?? null,
+    sprintCode: j.sprint_run?.sprint.code ?? null,
+    productName: j.product.name,
+    modelId: j.model_id,
+    inputTokens: j.input_tokens,
+    outputTokens: j.output_tokens,
+    cacheReadTokens: j.cache_read_tokens,
+    cacheWriteTokens: j.cache_write_tokens,
+    branch: j.branch,
+    prUrl: j.pr_url,
+    error: j.error,
+    summary: j.summary,
+    verifyResult: j.verify_result,
+    startedAt: j.started_at,
+    finishedAt: j.finished_at,
+    createdAt: j.created_at,
+    sprintRunId: j.sprint_run_id,
+  }
+}
+
+export async function fetchJobsPageData(): Promise<{ activeJobs: JobWithRelations[]; doneJobs: JobWithRelations[] } | null> {
+  const session = await getSession()
+  if (!session.userId) return null
+
+  const [active, done] = await Promise.all([
+    prisma.claudeJob.findMany({
+      where: { user_id: session.userId, status: { notIn: ['DONE'] } },
+      include: JOB_INCLUDE,
+      orderBy: { created_at: 'asc' },
+    }),
+    prisma.claudeJob.findMany({
+      where: { user_id: session.userId, status: 'DONE' },
+      include: JOB_INCLUDE,
+      orderBy: { finished_at: 'desc' },
+      take: 100,
+    }),
+  ])
+
+  return {
+    activeJobs: active.map(mapJob),
+    doneJobs: done.map(mapJob),
+  }
+}

app/api/jobs/[id]/sub-tasks/route.ts

@@ -0,0 +1,39 @@
+import type { NextRequest } from 'next/server'
+import { getSession } from '@/lib/auth'
+import { prisma } from '@/lib/prisma'
+
+export async function GET(
+  _request: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const session = await getSession()
+  if (!session.userId) {
+    return Response.json({ error: 'Niet ingelogd' }, { status: 401 })
+  }
+  const userId = session.userId
+  const { id } = await params
+
+  const job = await prisma.claudeJob.findFirst({
+    where: { id, user_id: userId },
+    select: { kind: true },
+  })
+
+  if (!job || job.kind !== 'SPRINT_IMPLEMENTATION') {
+    return Response.json([], { status: 200 })
+  }
+
+  const executions = await prisma.sprintTaskExecution.findMany({
+    where: { sprint_job_id: id },
+    include: { task: { select: { code: true, title: true } } },
+    orderBy: { order: 'asc' },
+  })
+
+  return Response.json(
+    executions.map(e => ({
+      id: e.id,
+      taskCode: e.task.code,
+      taskTitle: e.task.title,
+      status: e.status,
+    }))
+  )
+}

app/api/realtime/jobs/route.ts

@@ -0,0 +1,170 @@
+import { NextRequest } from 'next/server'
+import { Client } from 'pg'
+import { getSession } from '@/lib/auth'
+import { closePgClientSafely } from '@/lib/realtime/pg-client-cleanup'
+
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
+export const maxDuration = 300
+
+const CHANNEL = 'scrum4me_changes'
+const HEARTBEAT_MS = 25_000
+const HARD_CLOSE_MS = 240_000
+
+type JobPayload = {
+  type: 'claude_job_enqueued' | 'claude_job_status'
+  job_id: string
+  task_id?: string | null
+  idea_id?: string | null
+  sprint_run_id?: string | null
+  kind?: string
+  user_id: string
+  status: string
+  branch?: string
+  pushed_at?: string
+  pr_url?: string
+  verify_result?: string
+  summary?: string
+  error?: string
+}
+
+function shouldEmit(raw: unknown, userId: string): boolean {
+  if (!raw || typeof raw !== 'object') return false
+  const p = raw as Record<string, unknown>
+  return 'type' in p && typeof p.user_id === 'string' && p.user_id === userId
+}
+
+export async function GET(request: NextRequest) {
+  const session = await getSession()
+  if (!session.userId) {
+    return Response.json({ error: 'Niet ingelogd' }, { status: 401 })
+  }
+  const userId = session.userId
+
+  const directUrl = process.env.DIRECT_URL ?? process.env.DATABASE_URL
+  if (!directUrl) {
+    return Response.json({ error: 'DIRECT_URL/DATABASE_URL niet geconfigureerd' }, { status: 500 })
+  }
+
+  const encoder = new TextEncoder()
+  const pgClient = new Client({ connectionString: directUrl })
+
+  let heartbeatTimer: ReturnType<typeof setInterval> | null = null
+  let hardCloseTimer: ReturnType<typeof setTimeout> | null = null
+  let closed = false
+
+  const stream = new ReadableStream({
+    async start(controller) {
+      const enqueue = (chunk: string) => {
+        if (closed) return
+        try {
+          controller.enqueue(encoder.encode(chunk))
+        } catch {
+          // Stream al gesloten
+        }
+      }
+
+      const cleanup = async (reason: string) => {
+        if (closed) return
+        closed = true
+        if (heartbeatTimer) clearInterval(heartbeatTimer)
+        if (hardCloseTimer) clearTimeout(hardCloseTimer)
+        await closePgClientSafely(pgClient, 'realtime/jobs')
+        try {
+          controller.close()
+        } catch {
+          // already closed
+        }
+        if (process.env.NODE_ENV !== 'production') {
+          console.log(`[realtime/jobs] closed: ${reason}`)
+        }
+      }
+
+      try {
+        await pgClient.connect()
+        await pgClient.query(`LISTEN ${CHANNEL}`)
+      } catch (err) {
+        console.error('[realtime/jobs] pg connect/listen failed:', err)
+        enqueue(`event: error\ndata: ${JSON.stringify({ message: 'pg connect failed' })}\n\n`)
+        await cleanup('pg connect failed')
+        return
+      }
+
+      pgClient.on('notification', (msg) => {
+        if (!msg.payload) return
+        let payload: unknown
+        try {
+          payload = JSON.parse(msg.payload)
+        } catch {
+          return
+        }
+        if (!shouldEmit(payload, userId)) return
+        enqueue(`data: ${msg.payload}\n\n`)
+      })
+
+      pgClient.on('error', async (err) => {
+        console.error('[realtime/jobs] pg client error:', err)
+        await cleanup('pg error')
+      })
+
+      enqueue(`event: ready\ndata: ${JSON.stringify({ user_id: userId })}\n\n`)
+
+      const activeJobs = await prisma_jobs_findActive(userId)
+      if (activeJobs.length > 0) {
+        enqueue(`event: jobs_initial\ndata: ${JSON.stringify(activeJobs)}\n\n`)
+      }
+
+      heartbeatTimer = setInterval(() => {
+        enqueue(`: heartbeat\n\n`)
+      }, HEARTBEAT_MS)
+
+      hardCloseTimer = setTimeout(() => {
+        cleanup('hard close 240s')
+      }, HARD_CLOSE_MS)
+
+      request.signal.addEventListener('abort', () => {
+        cleanup('client aborted')
+      })
+    },
+  })
+
+  return new Response(stream, {
+    headers: {
+      'Content-Type': 'text/event-stream; charset=utf-8',
+      'Cache-Control': 'no-cache, no-transform',
+      Connection: 'keep-alive',
+      'X-Accel-Buffering': 'no',
+    },
+  })
+}
+
+async function prisma_jobs_findActive(userId: string): Promise<JobPayload[]> {
+  const { prisma } = await import('@/lib/prisma')
+  const jobs = await prisma.claudeJob.findMany({
+    where: { user_id: userId, status: { notIn: ['DONE'] } },
+    select: {
+      id: true,
+      kind: true,
+      status: true,
+      task_id: true,
+      idea_id: true,
+      sprint_run_id: true,
+      branch: true,
+      error: true,
+      summary: true,
+    },
+  })
+  return jobs.map(j => ({
+    type: 'claude_job_status' as const,
+    job_id: j.id,
+    kind: j.kind,
+    user_id: userId,
+    status: j.status,
+    task_id: j.task_id,
+    idea_id: j.idea_id,
+    sprint_run_id: j.sprint_run_id,
+    branch: j.branch ?? undefined,
+    error: j.error ?? undefined,
+    summary: j.summary ?? undefined,
+  }))
+}

components/jobs/job-card.tsx

@@ -0,0 +1,75 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+import { JOB_STATUS_LABELS, JOB_STATUS_COLORS } from '@/components/shared/job-status'
+import { jobStatusToApi } from '@/lib/job-status'
+import type { ClaudeJobKind, ClaudeJobStatus } from '@prisma/client'
+
+interface JobCardProps {
+  id: string
+  kind: ClaudeJobKind
+  status: ClaudeJobStatus
+  taskCode?: string | null
+  taskTitle?: string | null
+  ideaCode?: string | null
+  ideaTitle?: string | null
+  sprintGoal?: string | null
+  sprintCode?: string | null
+  productName: string
+  branch?: string | null
+  error?: string | null
+  summary?: string | null
+  isSelected?: boolean
+  onClick?: () => void
+}
+
+const KIND_LABELS: Record<ClaudeJobKind, string> = {
+  TASK_IMPLEMENTATION: 'TAAK',
+  SPRINT_IMPLEMENTATION: 'SPRINT',
+  IDEA_GRILL: 'GRILL',
+  IDEA_MAKE_PLAN: 'PLAN',
+  PLAN_CHAT: 'CHAT',
+}
+
+export default function JobCard({
+  kind, status, taskCode, taskTitle, ideaCode, ideaTitle,
+  sprintGoal, sprintCode, productName, branch, error, isSelected, onClick,
+}: JobCardProps) {
+  let titleText: string
+  if (kind === 'TASK_IMPLEMENTATION') {
+    titleText = taskCode && taskTitle ? `${taskCode} ${taskTitle}` : taskTitle || 'Taak'
+  } else if (kind === 'SPRINT_IMPLEMENTATION') {
+    titleText = sprintGoal || (sprintCode ? `Sprint ${sprintCode}` : 'Sprint')
+  } else if (kind === 'IDEA_GRILL' || kind === 'IDEA_MAKE_PLAN') {
+    titleText = ideaCode && ideaTitle ? `${ideaCode} ${ideaTitle}` : ideaTitle || 'Idee'
+  } else if (kind === 'PLAN_CHAT') {
+    titleText = ideaCode ? `Chat ${ideaCode}` : 'Chat'
+  } else {
+    titleText = 'Job'
+  }
+
+  const detailText = branch || (error ? error.slice(0, 80) : null) || productName
+
+  const apiStatus = jobStatusToApi(status)
+
+  return (
+    <div
+      onClick={onClick}
+      className={cn(
+        'border rounded-lg p-3 cursor-pointer hover:bg-surface-container transition-colors text-sm',
+        isSelected && 'ring-2 ring-primary',
+      )}
+    >
+      <div className="flex justify-between items-center gap-2">
+        <span className="text-[10px] px-1.5 py-0.5 rounded border bg-muted text-muted-foreground font-mono">
+          {KIND_LABELS[kind]}
+        </span>
+        <span className={cn('text-xs px-2 py-0.5 rounded-full border font-medium', JOB_STATUS_COLORS[apiStatus])}>
+          {JOB_STATUS_LABELS[apiStatus]}
+        </span>
+      </div>
+      <p className="font-medium truncate mt-1">{titleText}</p>
+      <p className="text-xs text-muted-foreground truncate mt-0.5">{detailText}</p>
+    </div>
+  )
+}

components/jobs/job-detail-pane.tsx

@@ -0,0 +1,76 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+import { JOB_STATUS_LABELS, JOB_STATUS_COLORS } from '@/components/shared/job-status'
+import { jobStatusToApi } from '@/lib/job-status'
+import type { JobWithRelations } from '@/actions/jobs-page'
+
+interface FieldRowProps {
+  label: string
+  children: React.ReactNode
+}
+
+function FieldRow({ label, children }: FieldRowProps) {
+  return (
+    <div className="flex gap-2 py-1.5 border-b border-border/50 text-sm">
+      <span className="w-28 shrink-0 text-muted-foreground">{label}</span>
+      <span className="flex-1 min-w-0">{children}</span>
+    </div>
+  )
+}
+
+interface JobDetailPaneProps {
+  job: JobWithRelations | null
+}
+
+export default function JobDetailPane({ job }: JobDetailPaneProps) {
+  if (!job) {
+    return (
+      <div className="flex items-center justify-center h-full text-sm text-muted-foreground">
+        Selecteer een job om details te zien
+      </div>
+    )
+  }
+
+  const apiStatus = jobStatusToApi(job.status)
+
+  return (
+    <div className="overflow-y-auto h-full p-4">
+      <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]}
+        </span>
+      </FieldRow>
+      <FieldRow label="Kind">{job.kind}</FieldRow>
+      <FieldRow label="Product">{job.productName}</FieldRow>
+      <FieldRow label="Model">{job.modelId || '—'}</FieldRow>
+      <FieldRow label="Tokens invoer">{job.inputTokens?.toLocaleString() || '—'}</FieldRow>
+      <FieldRow label="Tokens uitvoer">{job.outputTokens?.toLocaleString() || '—'}</FieldRow>
+      <FieldRow label="Cache read">{job.cacheReadTokens?.toLocaleString() || '—'}</FieldRow>
+      <FieldRow label="Cache write">{job.cacheWriteTokens?.toLocaleString() || '—'}</FieldRow>
+      <FieldRow label="Branch">
+        <span className="font-mono text-xs break-all">{job.branch || '—'}</span>
+      </FieldRow>
+      <FieldRow label="PR">
+        {job.prUrl ? (
+          <a href={job.prUrl} target="_blank" rel="noreferrer" className="text-primary underline text-xs break-all">
+            PR openen ↗
+          </a>
+        ) : '—'}
+      </FieldRow>
+      <FieldRow label="Fout">
+        {job.error ? (
+          <pre className="text-xs text-status-blocked whitespace-pre-wrap break-all max-h-32 overflow-auto bg-status-blocked/5 rounded p-2">
+            {job.error}
+          </pre>
+        ) : '—'}
+      </FieldRow>
+      <FieldRow label="Gestart">
+        {job.startedAt ? new Date(job.startedAt).toLocaleString('nl-NL') : '—'}
+      </FieldRow>
+      <FieldRow label="Klaar">
+        {job.finishedAt ? new Date(job.finishedAt).toLocaleString('nl-NL') : '—'}
+      </FieldRow>
+    </div>
+  )
+}