Generation queuePro

A job queue panel: progress and time left per job, place in line with drag or Alt and arrow reorder, cancel, retry with the reason, notify me, and credits spent.

Markdown

On this page

ProA live queue: the running job advances and the next one starts when it lands. Drag waiting jobs, or use Alt and the arrow keys.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/generation-queue

Usage

tsx

import { GenerationQueue } from "@/components/ui/chatcn/pro/generation-queue"

<GenerationQueue
  jobs={jobs}
  onJobsChange={setJobs}
  onCancel={cancel}
  onRetry={retry}
  onOpen={open}
  onClearFinished={clearFinished}
/>

A job is { id, prompt, status, progress, eta, thumbnail, meta, credits, error }. Rendering jobs come first, then waiting ones in your order, then finished ones. Only waiting jobs move: drag them, or focus one and use Alt and the arrow keys. onJobsChange gets the whole list in the new order. Notify me is a toggle; ask for notification permission in onNotifyChange.

Examples

States

Empty, a long prompt and a canceled job with notify on, disabled while offline, and right to left.

ProEmpty, a long prompt and a canceled job with notify on, and disabled while offline.

Props

Prop	Type	Notes
`jobs`	`QueueJob[]`	Required
`onJobsChange`	`(jobs) => void`	The new order. Turns reordering on
`onCancel`, `onRetry`, `onRemove`, `onOpen`	`(id) => void`	Each shows its button
`onClearFinished`	`() => void`	Clears done, failed and canceled jobs
`notify`, `defaultNotify`, `onNotifyChange`	`boolean`
`spent`	`number`	Default the sum over done and running jobs
`aspectRatio`	`number`	Thumbnail shape. Default 16 / 9
`labels`	`Partial<GenerationQueueLabels>`	Every string, for translation
`disabled`, `locale`

Keyboard

Key	Action
`Alt` + `↑` `↓`	Move the focused waiting job
`Tab`	Moves through jobs and their actions

Accessibility

Waiting jobs are focusable and named with their prompt, place and how to move them: "2nd in line, about 1 to 2 min. Drag to reorder, or Alt and the arrow keys".
Status has an icon and a word as well as a color. Moves, finishes and failures are announced politely.
Cancel and remove buttons are named with the job's prompt.

Motion

A reordered job glides to its place in 220 ms (FLIP, transform only) and the others make room. Keyboard moves land at once.
Progress bars ease between reports. A finished thumbnail fades in over 200 ms. Reduced motion keeps only the fades.