Ongoing and completed agent jobs collected in one actionable inbox.
import * as React from 'react'
import BackgroundRuns, { type BackgroundRun } from '@/components/ui/background-runs'
const jobs = [
{ id: 'audit', label: 'Audit authentication flows', detail: 'Reviewing 18 routes and 42 server functions', done: '18 routes reviewed, 2 issues found' },
{ id: 'tests', label: 'Run visual regression tests', detail: 'Comparing 116 documentation routes', done: '116 routes match the baseline' },
{ id: 'docs', label: 'Draft release notes', detail: 'Summarizing 24 merged pull requests', done: 'Draft ready for review' },
]
export default function Demo() {
const [active, setActive] = React.useState(0)
const [progress, setProgress] = React.useState(58)
const [seconds, setSeconds] = React.useState(18)
const finished = active >= jobs.length
React.useEffect(() => {
const timer = setTimeout(
() => {
if (finished) {
setActive(0)
setProgress(6)
setSeconds(1)
} else if (progress >= 100) {
setActive((value) => value + 1)
setProgress(6)
setSeconds(1)
} else {
setProgress((value) => Math.min(100, value + 10))
setSeconds((value) => value + 1)
}
},
finished ? 2400 : progress >= 100 ? 250 : 220,
)
return () => clearTimeout(timer)
}, [finished, progress])
const items: BackgroundRun[] = jobs.map((job, index) => {
if (index < active || (index === active && progress >= 100))
return { id: job.id, label: job.label, detail: job.done, status: 'complete', updatedAt: 'Just now' }
if (index === active)
return { id: job.id, label: job.label, detail: job.detail, progress, status: 'running', updatedAt: `${seconds}s` }
if (index === active + 1 && progress >= 100)
return { id: job.id, label: job.label, detail: job.detail, progress: 2, status: 'running', updatedAt: '0s' }
return { id: job.id, label: job.label, detail: 'Starts after the current run', status: 'queued', updatedAt: 'Queued' }
})
return <BackgroundRuns className="w-full max-w-lg" items={items} />
}
Part of Pasta UI — browse the full library on 21st.dev.