Install

npx ax-depute@latest add task-queue

pnpm dlx ax-depute@latest add task-queue

yarn dlx ax-depute@latest add task-queue

bunx ax-depute@latest add task-queue

A structured list of pending and assigned tasks before they are executed by the swarm. It surfaces task priority, routing status, and provides manual override actions (promote, assign, cancel) to the human supervisor.

In Progress3

Med

Fetching latest API documentation from external source

→ Data-Analyst~5,873 tok

Med

Running lint and formatting checks on new files

→ Planner-Beta~5,283 tok

Critical

Validating output against business rules

→ Researcher-A~6,838 tok

Assigned2

Critical

Generating TypeScript interfaces from JSON schema

→ Data-Analyst~8,061 tok

Critical

Writing unit tests for the payment module

→ Summarizer-X~6,314 tok

Pending1

Med

Validating output against business rules

~7,172 tok

Interactive StorybookView all states, toggle props, and test edge cases.

Basic usage

import { TaskQueue } from '@/components/TaskQueue';
import type { TaskQueueItem } from '@/components/TaskQueue/TaskQueue.types';

const mockTasks: TaskQueueItem[] = [
  {
    id: 't_1',
    title: 'Generate Weekly Report',
    priority: 'high',
    status: 'in_progress',
    assignedTo: 'Analytics Node',
    estimatedTokens: 4500
  },
  {
    id: 't_2',
    title: 'Update Notification Settings',
    description: 'User requested daily digest instead of immediate alerts.',
    priority: 'medium',
    status: 'pending'
  }
];

export function App() {
  return (
    <div className="p-4 border border-zinc-200 dark:border-zinc-800 rounded-lg max-w-lg">
      <TaskQueue 
        tasks={mockTasks}
        onTaskAction={(id, action) => console.log(`Task ${id} action: ${action}`)}
      />
    </div>
  );
}

Props

Prop	Type	Default	Description
`tasks`	`TaskQueueItem[]`	`undefined`	Array of tasks to render in the queue. Automatically grouped by status.
`onTaskAction`	`(id: string, action) => void`	`undefined`	Callback fired when a user clicks an action button (Promote, Assign, Cancel) on a task.
`className`	`string`	`undefined`	Additional CSS class for the root element.

Types

`TaskQueueItem`

export type TaskPriority = 'critical' | 'high' | 'medium' | 'low';
export type TaskStatus = 'pending' | 'assigned' | 'in_progress';

export interface TaskQueueItem {
  id: string;
  title: string;
  description?: string;
  priority: TaskPriority;
  assignedTo?: string;            // Agent the task is assigned to, if any
  status: TaskStatus;
  estimatedTokens?: number;       // Forecasted cost of the task
}

Solution Patterns

Task Queue manages the pending backlog for a specific agent:

Orchestrator → [Task Queue] → Active Plan Card

It allows humans to re-prioritize work before the agent officially plans it.

Design rationale

1. Exposing the Routing Layer
In an autonomous swarm, tasks are often dynamically generated and routed without human input. Task Queue forcibly visualizes this "pending state," transforming invisible background queues into a tangible list of upcoming work.

2. Manual Overrides
AI orchestrators make routing mistakes. Task Queue includes built-in action hooks (promote, assign, cancel) that allow the human supervisor to step in, re-prioritize a critical task, or cancel a low-value generation before compute limits are burned.

3. Visual Grouping
Tasks are automatically sorted and grouped by their TaskStatus (in_progress → assigned → pending). Priority badges use semantic color coding (Red for Critical, Amber for High) to ensure the most important work isn't lost in the backlog.

Task Queue

Install

Overview

Basic usage

Props

Types

`TaskQueueItem`

Solution Patterns

Design rationale

On this page