Queue

Queue and manage pending prompts while the model is still responding.

Queue is a presentational shell for pending prompts and todos. Own the arrays in your app, then compose sections, list rows, and hover actions.

Summarize the cutover checklist for production.
Draft a rollback note for the billing migrate.
rollback.md
List monitors to watch for the first hour after deploy.

Review smoke tests
Auth, checkout, and billing paths
Confirm migration window
Ops channel + on-call
Prepare status update

<Queue>
  <QueueSection>
    <QueueSectionTrigger>
      <QueueSectionLabel count={messages.length} label="Queued" />
    </QueueSectionTrigger>
    <QueueSectionContent>
      <QueueList>
        {messages.map((message) => (
          <QueueItem key={message.id}>
            <QueueItemRow>
              <QueueItemIndicator />
              <QueueItemContent>{summary}</QueueItemContent>
              <QueueItemActions>
                <QueueItemAction aria-label="Remove">...</QueueItemAction>
              </QueueItemActions>
            </QueueItemRow>
          </QueueItem>
        ))}
      </QueueList>
    </QueueSectionContent>
  </QueueSection>
</Queue>

Installation

pnpm dlx cubix@latest add queue

Usage

Import

import {
  Queue,
  QueueItem,
  QueueItemAction,
  QueueItemActions,
  QueueItemContent,
  QueueItemIndicator,
  QueueItemRow,
  QueueList,
  QueueSection,
  QueueSectionContent,
  QueueSectionLabel,
  QueueSectionTrigger,
} from "@/components/cubix/queue"

Example

<Queue>
  <QueueSection>
    <QueueSectionTrigger>
      <QueueSectionLabel count={messages.length} label="Queued" />
    </QueueSectionTrigger>
    <QueueSectionContent>
      <QueueList>
        {messages.map((message) => (
          <QueueItem key={message.id}>
            <QueueItemRow>
              <QueueItemIndicator />
              <QueueItemContent>{summary}</QueueItemContent>
              <QueueItemActions>
                <QueueItemAction aria-label="Remove">...</QueueItemAction>
              </QueueItemActions>
            </QueueItemRow>
          </QueueItem>
        ))}
      </QueueList>
    </QueueSectionContent>
  </QueueSection>
</Queue>

Composition

Queue
└── QueueSection
    ├── QueueSectionTrigger
    │   └── QueueSectionLabel
    └── QueueSectionContent
        └── QueueList
            └── QueueItem
                ├── QueueItemRow
                │   ├── QueueItemIndicator
                │   ├── QueueItemContent
                │   └── QueueItemActions
                │       └── QueueItemAction
                ├── QueueItemDescription
                └── QueueItemAttachment
                    ├── QueueItemImage
                    └── QueueItemFile

Features

Collapsible Queued and Todo sections
Pending and completed item states
Attachments, hover actions, and Prompt Input pairing

Messages

Summarize the cutover checklist for production.
Draft a rollback note for the billing migrate.

<QueueSectionLabel count={2} label="Queued" />

Todos

Review smoke tests
Auth, checkout, and billing paths
Confirm migration window
Ops channel + on-call
Prepare status update

<QueueItemIndicator completed />
<QueueItemContent completed>{title}</QueueItemContent>

Collapsed

<QueueSection defaultOpen={false}>...</QueueSection>

Attachments

Draft a rollback note for the billing migrate.
rollback.md

<QueueItemAttachment>
  <QueueItemImage src={url} />
  <QueueItemFile>{filename}</QueueItemFile>
</QueueItemAttachment>

Empty

No pending prompts right now.

<Queue><QueueEmpty>...</QueueEmpty></Queue>

With Prompt Input

Summarize the cutover checklist for production.
Draft a rollback note for the billing migrate.

<div className="overflow-hidden rounded-xl border">
  <Queue className="rounded-none border-0 border-b">...</Queue>
  <PromptInput className="[&_[data-slot=input-group]]:rounded-none">
    ...
  </PromptInput>
</div>

API Reference

Queue

Prop	Type	Default	Description
className	string	-	Optional styles for the queue card shell.

QueueSection

Prop	Type	Default	Description
defaultOpen	boolean	true	Initial open state for the section.
open	boolean	-	Controlled open state.
onOpenChange	(open: boolean) => void	-	Called when the section opens or closes.

QueueSectionLabel

Prop	Type	Default	Description
label	string	-	Section label text, e.g. Queued or Todo.
count	number	-	Optional count shown before the label.
icon	React.ReactNode	-	Optional leading icon beside the label.

QueueItemIndicator

Prop	Type	Default	Description
completed	boolean	false	Filled muted dot for completed items.

QueueItemContent

Prop	Type	Default	Description
completed	boolean	false	Applies muted strikethrough styling.