Generation Job

Usage

"use client";

import { GenerationJob } from "@/components/ui/generation-job";

<GenerationJob
  status={job.status}
  title="4 product images · 1024 × 1024"
  queue={{ position: job.queuePosition, typicalWait: "2 to 4 minutes" }}
  stage={job.stage}
  progress={job.measuredProgress}
  startedAt={job.startedAt}
  cost="40 credits"
  refundNote="Anything that fails is refunded"
  onCancel={job.cancel}
>
  {job.outputs.map((output) => <img key={output.id} src={output.url} alt="" />)}
</GenerationJob>

Pass progress only when you measure it. Without it, no bar is drawn.

Why it exists

Reviews of image and video tools rank credits and unexplained waiting above quality. Queues of ten to thirty minutes are normal at peak, and people are given a spinner, no position, no estimate, and no idea what happens to their credits when a job fails.

Features

• The queue is a real state: position, plus what the wait usually is at this moment.
• No invented progress. A bar appears only when you pass a measured progress.
• Partial results show immediately. With status="partial", two finished images of four are two finished images, not a spinner.
• The refund rule is stated before a failure, and what happened to the money after one.
• Nobody has to watch. A "Tell me when it's done" checkbox, so long jobs don't hold someone at the screen.
• Stop stays visible for the whole run, and the elapsed counter ticks itself.

Variants

In the queue

Failed, with the credits back

Props

Accessibility

• A labelled <section> with a real heading.
• Status, queue position and failures are announced once through a polite live region — the ticking counter is not announced.
• The progress bar is decorative; the words carry the same information.
• The status dot's pulse stops under prefers-reduced-motion.

When not to use

• Work that takes a second or two: use Generation Placeholder.
• An agent run with steps: use Agent Plan with statuses.
• A list of past jobs: this is one job. A queue of many is a different surface.