feat(PBI-jobs): voeg 'Opnieuw starten'-knop toe aan JobDetailPane

Toont een restart-knop voor jobs met status FAILED, CANCELLED of SKIPPED.
Gebruikt useTransition voor loading-state en DemoTooltip voor demo-modus.

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

components/jobs/job-detail-pane.tsx

@@ -1,9 +1,16 @@
 'use client'
 
+import { useTransition } from 'react'
+import { toast } from 'sonner'
 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'
+import { Button } from '@/components/ui/button'
+import { DemoTooltip } from '@/components/shared/demo-tooltip'
+import { restartClaudeJobAction } from '@/actions/claude-jobs'
+
+const RESTARTABLE_API_STATUSES = new Set(['failed', 'cancelled', 'skipped'])
 
 interface FieldRowProps {
   label: string
@@ -45,7 +52,9 @@ interface JobDetailPaneProps {
   isDemo: boolean
 }
 
-export default function JobDetailPane({ job, isDemo: _isDemo }: JobDetailPaneProps) {
+export default function JobDetailPane({ job, isDemo }: JobDetailPaneProps) {
+  const [isPending, startTransition] = useTransition()
+
   if (!job) {
     return (
       <div className="flex items-center justify-center h-full text-sm text-muted-foreground">
@@ -56,6 +65,14 @@ export default function JobDetailPane({ job, isDemo: _isDemo }: JobDetailPanePro
 
   const apiStatus = jobStatusToApi(job.status)
   const subject = subjectLabel(job)
+  const canRestart = RESTARTABLE_API_STATUSES.has(apiStatus)
+
+  function handleRestart() {
+    startTransition(async () => {
+      const result = await restartClaudeJobAction(job!.id)
+      if ('error' in result) toast.error(result.error)
+    })
+  }
 
   return (
     <div className="overflow-y-auto h-full p-4">
@@ -111,6 +128,19 @@ export default function JobDetailPane({ job, isDemo: _isDemo }: JobDetailPanePro
           <p className="text-xs text-muted-foreground italic">Geen beschrijving.</p>
         )}
       </div>
+      {canRestart && (
+        <div className="pt-3 mt-3 border-t border-border/50">
+          <DemoTooltip show={isDemo}>
+            <Button
+              size="sm"
+              onClick={handleRestart}
+              disabled={isPending || isDemo}
+            >
+              {isPending ? 'Opnieuw starten…' : 'Opnieuw starten'}
+            </Button>
+          </DemoTooltip>
+        </div>
+      )}
     </div>
   )
 }