diff --git a/components/jobs/job-detail-pane.tsx b/components/jobs/job-detail-pane.tsx
new file mode 100644
index 0000000..5f7b2cd
--- /dev/null
+++ b/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>
+  )
+}