Work queue

Collapsible prompt and todo sections with completion counts, attachments, and item actions.

Preview

Queued prompts0/1
  • Waiting for the current reply.
Next steps0/1

In action

Review queued work

Queued prompts0/1
  • Waiting for the current reply.
Next steps0/1

When to use

Use it for

  • Group queued prompts and todo items in sections with stable ids.
  • Supply onItemCheckedChange to make completion interactive; the supplied items remain authoritative.
  • Use attachments and actions slots for each item. The component displays counts from supplied completion state.

Avoid

  • Using a queue display to schedule or execute work.

Install

React package

npm install @noorddev/vlak-react

Load the stylesheet once at your app root, then import the components you use.

import "@noorddev/vlak-react/css";
import { WorkQueue } from "@noorddev/vlak-react";

Per-component imports are available at @noorddev/vlak-react/components/work-queue.

Copy the source

npx @noorddev/vlak-cli add work-queue

Adds the component and its dependencies to components/vlak/. Follow the StyleX setup to compile the source in your application.

shadcn registry

npx shadcn add https://vlak.dev/r/work-queue.json

Installs the same source through the shadcn CLI.

React

"use client";
import { useState } from "react";
import { WorkQueue } from "@noorddev/vlak-react";

export function ReviewQueue() {
  const [completed, setCompleted] = useState(false);
  return <WorkQueue sections={[{ id: "todos", title: "Next steps", items: [
    { id: "review", content: "Review the brief", completed },
  ] }]} onItemCheckedChange={(_sectionId, _itemId, checked) => setCompleted(checked)} />;
}

See the integration example to compose these components with your application's model and data.

Props

WorkQueue

Supplied prompt and todo sections. Checking a row requests a change; the application owns scheduling.

PropTypeDefaultDescription
sectionsrequiredreadonly WorkQueueSection[]
labelstring"Work queue"
onItemCheckedChange(sectionId: string, itemId: string, checked: boolean) => void
emptyMessageReactNode"Nothing queued."

Also accepts HTMLAttributes<HTMLElement>.

The ref reaches HTMLElement.

Keyboard

KeysDoes
TabMoves through the supplied native controls in reading order
Enter, SpaceActivates focused buttons and disclosure summaries

Accessibility

  • Native attributes, className, style, and the forwarded ref reach the outer element.
  • Interactive content requires accessible names; progress text is not announced for every streamed token.

Markup

The same styles are available as CSS. Native HTML provides the static presentation; React or application code supplies state updates and actions.

npm install @noorddev/vlak
import "@noorddev/vlak/css";
<section class="rs-work-queue" aria-label="Work queue"><details class="rs-work-queue-section" open><summary>Next steps, 0 of 1 complete</summary><ul class="rs-work-queue-list"><li class="rs-work-queue-item">Review the brief</li></ul></details></section>

Classes

.rs-work-queue.rs-work-queue-section.rs-work-queue-list.rs-work-queue-item.rs-work-queue-row.rs-work-queue-content.rs-work-queue-complete.rs-work-queue-actions.rs-work-queue-detail

Depends on

ReasoningCheckbox

Use elsewhere

Markdown referenceRegistry JSONSourceAI integration guide
ChatConversationResponseResponse markdownMessage composerResponse actionsResponse branchResponse editorConversation exportAttachmentsSuggestionsModel selectorContext usageCheckpointReasoningThought stepsPlanTaskTool callConfirmationInline citationSourcesShimmerWidgetGenerated imageOpen in chatWidget patternsHighlighted codeAgentFile treeArtifactSnippetCommitEnvironment variablesPackage infoSchema displayTest resultsStack traceTerminalSandboxWeb previewJsx previewAudio playerMic selectorSpeech inputTranscriptionVoice selectorPersonaWorkflow canvas