Task Queue

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 Progress2

High

Cross-referencing data against internal knowledge base

→ Code-Writer-2~6,355 tok

Critical

Validating output against business rules

→ Code-Writer-2~3,765 tok

Assigned1

Low

Cross-referencing data against internal knowledge base

→ QA-Inspector~3,400 tok

Pending3

Critical

Running lint and formatting checks on new files

~1,965 tok

Low

Validating output against business rules

~7,475 tok

Med

Fetching latest API documentation from external source

~4,725 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
}

Composition flow

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.