Sprint: rerun jobs (#176)

* feat(PBI-jobs): voeg isDemo-prop door aan JobsBoard en JobDetailPane

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

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

* test(PBI-jobs): voeg component-test toe voor JobDetailPane restart-knop

Test: knop zichtbaar voor FAILED, verborgen voor DONE, aanroep met juist id, disabled in demo-modus.

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

* docs(PBI-jobs): voeg F-14 restart-acceptatiecriteria toe aan functional.md

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

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Janpeter Visser 2026-05-09 17:19:47 +02:00 committed by GitHub
parent 71319e629d
commit 6756450131
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 135 additions and 4 deletions

View file

@ -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
@ -42,9 +49,12 @@ function subjectLabel(job: JobWithRelations): { label: string; value: string } |
interface JobDetailPaneProps {
job: JobWithRelations | null
isDemo: boolean
}
export default function JobDetailPane({ job }: 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">
@ -55,6 +65,14 @@ export default function JobDetailPane({ job }: JobDetailPaneProps) {
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">
@ -110,6 +128,19 @@ export default function JobDetailPane({ job }: JobDetailPaneProps) {
<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>
)
}

View file

@ -15,6 +15,7 @@ import type { JobWithRelations } from '@/actions/jobs-page'
interface JobsBoardProps {
initialActiveJobs: JobWithRelations[]
initialDoneJobs: JobWithRelations[]
isDemo: boolean
}
type View = 'detail' | 'usage'
@ -32,7 +33,7 @@ const DONE_STATUS_OPTIONS: Array<{ value: ClaudeJobStatusApi; label: string }> =
{ value: 'skipped', label: 'Overgeslagen' },
]
export default function JobsBoard({ initialActiveJobs, initialDoneJobs }: JobsBoardProps) {
export default function JobsBoard({ initialActiveJobs, initialDoneJobs, isDemo }: JobsBoardProps) {
const { activeJobs, doneJobs, selectedJobId, initJobs, setSelectedJobId } = useJobsStore()
const [view, setView] = useState<View>('detail')
useJobsRealtime()
@ -77,7 +78,7 @@ export default function JobsBoard({ initialActiveJobs, initialDoneJobs }: JobsBo
</Button>
</div>
<div className="flex-1 overflow-y-auto">
{view === 'detail' ? <JobDetailPane job={selectedJob} /> : <JobUsagePane job={selectedJob} />}
{view === 'detail' ? <JobDetailPane job={selectedJob} isDemo={isDemo} /> : <JobUsagePane job={selectedJob} />}
</div>
</div>
)