Queue

Pending message queue list, shown above the prompt input, with optional collapsible sections for todos and queued turns.

Overview

Queue is the dock that surfaces what the assistant has lined up. It renders a vertical list of items (queued user turns, pending todos, attached files) above the prompt input, with optional collapsible sections to group them by status.

Use it when the user has fired multiple prompts in a row, when the agent is mid-task with a known list of remaining steps, or when files are staged for the next turn.

Preview

Default

Generate component scaffold

Done

Wire MDX preview

Done

Run smoke tests

Pending

'use client';import {  Queue,  QueueItem,  QueueItemContent,  QueueItemDescription,  QueueItemIndicator,} from '@gremorie/rx-ai';export function QueuePreview() {  return (    <Queue>      <QueueItem>        <QueueItemIndicator completed />        <QueueItemContent>Generate component scaffold</QueueItemContent>        <QueueItemDescription>Done</QueueItemDescription>      </QueueItem>      <QueueItem>        <QueueItemIndicator completed />        <QueueItemContent>Wire MDX preview</QueueItemContent>        <QueueItemDescription>Done</QueueItemDescription>      </QueueItem>      <QueueItem>        <QueueItemIndicator />        <QueueItemContent>Run smoke tests</QueueItemContent>        <QueueItemDescription>Pending</QueueItemDescription>      </QueueItem>    </Queue>  );}

Sectioned

Backend

Migrate schema

Seed test data

Frontend

Update routing

'use client';import {  Queue,  QueueItem,  QueueItemContent,  QueueItemIndicator,} from '@gremorie/rx-ai';export function QueueSectionedPreview() {  return (    <div className="flex flex-col gap-4">      <div>        <p className="text-sm font-medium">Backend</p>        <Queue>          <QueueItem>            <QueueItemIndicator completed />            <QueueItemContent>Migrate schema</QueueItemContent>          </QueueItem>          <QueueItem>            <QueueItemIndicator />            <QueueItemContent>Seed test data</QueueItemContent>          </QueueItem>        </Queue>      </div>      <div>        <p className="text-sm font-medium">Frontend</p>        <Queue>          <QueueItem>            <QueueItemIndicator />            <QueueItemContent>Update routing</QueueItemContent>          </QueueItem>        </Queue>      </div>    </div>  );}

Anatomy

Queue
└─ QueueList
   └─ QueueSection                collapsible group
      ├─ QueueSectionTrigger
      │  └─ QueueSectionLabel      icon + count
      └─ QueueSectionContent
         └─ QueueItem              one per queued message
            ├─ QueueItemIndicator
            ├─ QueueItemContent → QueueItemDescription
            ├─ QueueItemAttachment → QueueItemImage / QueueItemFile
            └─ QueueItemActions → QueueItemAction

Installation

bash npx gremorie@latest add rx-queue

bash pnpm dlx gremorie@latest add rx-queue

bash yarn dlx gremorie@latest add rx-queue

bash bunx --bun gremorie@latest add rx-queue

Usage

import {
  Queue,
  QueueList,
  QueueItem,
  QueueItemIndicator,
  QueueItemContent,
} from "@gremorie/rx-ai";

export function Example({ todos }) {
  return (
    <Queue>
      <QueueList>
        {todos.map((todo) => (
          <QueueItem key={todo.id}>
            <QueueItemIndicator completed={todo.status === "completed"} />
            <QueueItemContent completed={todo.status === "completed"}>
              {todo.title}
            </QueueItemContent>
          </QueueItem>
        ))}
      </QueueList>
    </Queue>
  );
}

The Angular edition of this component ships from source today (see the workbench for the side-by-side); its registry entry is coming next.

API

`<Queue>`

Outer card surface. Rounded border + light shadow. Extends ComponentProps<"div">.

`<QueueList>`

ScrollArea capped at max-h-40. Wraps children in <ul>. Extends ComponentProps<typeof ScrollArea>.

`<QueueItem>`

<li> with hover background. Extends ComponentProps<"li">.

`<QueueItemIndicator>`

Prop	Type	Default	Description
`completed`	`boolean`	`false`	When true, the dot fills with a muted background.

Small status dot.

`<QueueItemContent>` / `<QueueItemDescription>`

Prop	Type	Default	Description
`completed`	`boolean`	`false`	When true, applies muted color + strikethrough.

QueueItemContent is the primary line (truncated to 1 line). QueueItemDescription adds a sub-line.

Component	Role
`QueueSection`	`Collapsible` container, `defaultOpen` true.
`QueueSectionTrigger`	Section header (a `button` that toggles).
`QueueSectionLabel`	Inside the trigger - chevron + icon + count + label. Props: `count`, `label`, `icon`.
`QueueSectionContent`	The expanded body.

Types

QueueMessage, QueueMessagePart, QueueTodo are exported as type helpers.

Composition

<Queue> is the outer card.
<QueueList> wraps a scrollable <ul>.
<QueueItem> is one entry, with <QueueItemIndicator> + <QueueItemContent> (+ optional description, actions, attachments).
<QueueSection> + <QueueSectionTrigger> + <QueueSectionLabel> + <QueueSectionContent> group items into collapsible groups (e.g. "Pending", "Completed").

Variations

Todo list

The most common case: a flat list of pending and completed todos with strikethrough on completion.

<Queue>
  <QueueList>
    {todos.map((todo) => (
      <QueueItem key={todo.id}>
        <QueueItemIndicator completed={todo.status === 'completed'} />
        <QueueItemContent completed={todo.status === 'completed'}>
          {todo.title}
        </QueueItemContent>
        {todo.description ? (
          <QueueItemDescription completed={todo.status === 'completed'}>
            {todo.description}
          </QueueItemDescription>
        ) : null}
      </QueueItem>
    ))}
  </QueueList>
</Queue>

Sectioned by status

Group todos into a "Pending" and "Completed" section, collapsible independently.

<Queue>
  <QueueSection>
    <QueueSectionTrigger>
      <QueueSectionLabel
        count={pending.length}
        label="pending"
        icon={<CircleIcon className="size-3.5" />}
      />
    </QueueSectionTrigger>
    <QueueSectionContent>
      <QueueList>
        {pending.map((t) => (
          <QueueItem key={t.id}>
            <QueueItemIndicator />
            <QueueItemContent>{t.title}</QueueItemContent>
          </QueueItem>
        ))}
      </QueueList>
    </QueueSectionContent>
  </QueueSection>
  <QueueSection defaultOpen={false}>
    <QueueSectionTrigger>
      <QueueSectionLabel
        count={completed.length}
        label="completed"
        icon={<CheckIcon className="size-3.5" />}
      />
    </QueueSectionTrigger>
    <QueueSectionContent>
      <QueueList>
        {completed.map((t) => (
          <QueueItem key={t.id}>
            <QueueItemIndicator completed />
            <QueueItemContent completed>{t.title}</QueueItemContent>
          </QueueItem>
        ))}
      </QueueList>
    </QueueSectionContent>
  </QueueSection>
</Queue>

Queue with attachments and hover actions

Stage files alongside the queued message; reveal Delete on hover.

<QueueItem>
  <QueueItemIndicator />
  <QueueItemContent>Summarize the attached docs</QueueItemContent>
  <QueueItemAttachment>
    <QueueItemImage src="/screenshots/a.png" />
    <QueueItemFile>specs.pdf</QueueItemFile>
  </QueueItemAttachment>
  <QueueItemActions>
    <QueueItemAction onClick={remove} aria-label="Remove from queue">
      <XIcon className="size-3" />
    </QueueItemAction>
  </QueueItemActions>
</QueueItem>

Accessibility

Keyboard: section triggers are real <button>s and toggle on Enter / Space. Item actions inherit Button keyboard behaviour.
ARIA: QueueSection (Radix Collapsible) wires aria-expanded / aria-controls on the trigger and data-state on the content.
Screen readers: QueueItemIndicator is decorative; the announcement comes from QueueItemContent (and QueueItemDescription). Provide aria-label on QueueItemAction for icon-only buttons.
Focus management: hover-only actions become focusable via Tab; the opacity transition is purely visual.

PromptInput - sits below the queue
Suggestion - quick-reply chips for the empty queue
Task - per-task breakdown when an item expands into sub-steps