Pending Jobs Stack React component
A work queue you can steer: drag jobs into a new order, see when each one will really start, cancel with undo, and pause the queue with one click.
About the Pending Jobs Stack component
Pending Jobs Stack shows what your bots will do next and lets you change it. Drag a job up the list and everything else makes room, with every start time updating as you go.
Times come from the work itself, because each job goes to whichever worker frees up first. Cancel a job with one click and bring it back with Undo, or pause the whole queue while you sort something out.
When to use it
Use it for agent task queues, build pipelines and scheduled work where order matters.
It suits a short queue that people manage by hand. Thousands of jobs need filters and paging.
Installation
Add the Pending Jobs Stack component to your project with the shadcn CLI. It lands in components/pending-jobs-stack.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/pending-jobs-stackProps
<PendingJobsStack /> accepts 7 props, all optional. It also accepts the usual <section> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| title | string | "Job queue" |
| running | { id: string; title: string; bot: string; progress: number; left: number }[] | DEFAULT_RUNNING |
| jobs | { id: string; title: string; bot: string; minutes: number }[] | DEFAULT_JOBS |
| onReorder | (ids: string[]) => void | — |
| onCancel | (job: PendingJob) => void | — |
| onPauseChange | (paused: boolean) => void | — |
- theme"dark" | "light"Default: "dark"
- titlestringDefault: "Job queue"
- running{ id: string; title: string; bot: string; progress: number; left: number }[]Default: DEFAULT_RUNNING
- jobs{ id: string; title: string; bot: string; minutes: number }[]Default: DEFAULT_JOBS
- onReorder(ids: string[]) => void
- onCancel(job: PendingJob) => void
- onPauseChange(paused: boolean) => void
Pending Jobs Stack FAQ
- How are start times worked out?
- Each job goes to the first worker to come free, using the minutes you pass in.
- Can I reorder without a mouse?
- Yes. Tab to a grip and use the up and down arrow keys.
- Does it work on a phone?
- Yes. The grip handles touch, so dragging it doesn't scroll the page.
- Does Pause stop running jobs?
- No. It's for jobs that haven't started, and your backend decides what pausing means.
