← All components
Interaction / component
Agent Queue
A compact caller-owned job queue with native disclosures, visible actions and an inspectable selected result.
PLAYGROUND
Take it with you.
SOURCE ACCESS
Preview freely. Unlock the files.
Enter the shared password to copy the complete source, download every file, and install components in your app.
Access lasts 24 hours. Your preview settings stay with you.
Component notes
- Complete example owns local task work; ControlledExample demonstrates caller-owned primitive data and actual change callbacks. Install the declared shared fonts and full OFL notice from the assets ZIP for matching typography.
- Portable Demo and CopyLab include a real local statistics/ASCII-slug runner and sequential cancellation-aware queue owner. Inputs are capped at 2,000 characters and 20 jobs; results at 12,000 characters. Unknown caller failures become inert bounded errors.
- Demo accepts initialJobs, runner and allowArtifactCopy (default true for its own local output); hosted examples explicitly default copying off. No model, service, upload or persistence is included. AbortSignal requests cancellation; identity guards discard stale completion even for an uncooperative runner.
- Appearance, Pause and Replay preserve results/drafts/selection. Reset example restores a cloned seed with a new owner. Edit invalidates the attempt and returns queued for Run now; Retry schedules an unchanged error/cancelled job. Added jobs wait for a new run request.
- Portable derivative preserves section/list/row/indicator/action hierarchy and an internally scrollable 160px section bound. Essential actions remain visible with keyboard focus and touch.
- Work contains queued/running/error/cancelled jobs; History contains complete jobs. Caller text is inert and copied from known own data properties without invoking getters or serializers.
- Named AgentQueue, QueueSection and QueueRow exports share one canonical closure. Jobs and task actions remain caller-owned; static sample data never executes work. No scheduler, model call, upload, persistence or implicit request.
- Pause and reduced motion stop decorative activity while retaining interaction; Replay and appearance changes preserve selection and disclosures.
React 19.2Modern browsersNative disclosure
Geist and Geist Mono — Vercel, Inc. · SIL Open Font License 1.1; complete notice retained in source and required assets.
AI Elements — Vercel, Inc. · Apache-2.0. Portable derivative; original copyright notice and full license included.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | 'Atlas queue' | Queue heading; scalar configuration allows up to 200 characters. |
density | 'comfortable' | 'compact' | 'comfortable' | Row spacing; both densities retain native touch-sized actions. |
showHistory | boolean | true | Shows completed jobs without deleting caller data. |
jobs | readonly QueueJob[] | undefined | Caller-owned jobs. Omit for labelled static sample data; [] remains empty. At most 100 unique nonempty IDs (100 characters), titles 200, descriptions 500, result/error 12,000; invalid or accessor-backed input is rejected. |
selectedId | string | null | undefined | Controlled selection; null selects nothing. Omit for internal selection, initially the first job. Removal falls back to the same index or last remaining job, then null when empty. |
onSelect | (id: string | null) => void | undefined | Receives the selected stable ID. Controlled selection waits for caller updates. |
renderInspector | (job: QueueJob | null) => ReactNode | undefined | Replaces the default inert title/result/error inspector. Missing selected IDs receive null. |
open | Record<QueueSectionKind, boolean> | undefined | Controlled work/history disclosure. Omit for both sections initially open and internally owned. |
onOpenChange | (section: QueueSectionKind, open: boolean) => void | undefined | Receives native disclosure changes; controlled open remains authoritative. |
onRunNow | (id: string) => void | undefined | Caller-owned run-now action for queued jobs only; disabled when absent. |
onRemove | (id: string) => void | undefined | Caller-owned removal for any job; disabled when absent. Caller updates jobs and owns action focus return; the primitive exposes labelled focusable empty sections. |
onRetry | (id: string) => void | undefined | Caller-owned retry for error/cancelled jobs; disabled when absent. |
onCancel | (id: string) => void | undefined | Caller-owned cancel for queued/running jobs; disabled when absent. |
onMove | (id: string, direction: 'earlier' | 'later') => void | undefined | Caller-owned reordering among queued jobs. Disabled when absent, at queued-list bounds and for every nonqueued job. |
paused | boolean | false | Stops decorative running activity without disabling native actions or changing work. |
replayToken | number | 0 | Accepted playback input; continuous decorative CSS activity needs no restart owner. Selection, disclosure and jobs are preserved. |
className | string | '' | Additional host class. |
style | CSSProperties | undefined | Caller-owned inline styling and theme custom properties. |
initialJobs | readonly CopyJob[] | undefined | Portable Demo only: cloned local seed (20 jobs; input/captured input 2,000 characters). Omit for three runnable seeds; [] stays empty. Changes after mounting do not reset work. |
runner | CopyRunner | runCopyJob | Portable Demo only: a caller-owned async runner receives the captured readonly job and AbortSignal. Future attempts capture changed runners; stale completions are ignored. The default computes real local text results. |
allowArtifactCopy | boolean | true | Portable Demo only: enables copying its selected local result. Hosted adapter explicitly requires true from its source owner. This flag does not authorize server source access. |