Agents

TaskDelegation

Hierarchical task tree with per-node status, assigned-agent chips, and progress bars.

Preview

Answer: why peer-dep adapters?
Research, draft, review, finalise.
- Research peer-dep architecture@Researcher
  - Search internal docs@Researcher
  - Fetch README + installation@Researcher
  - Verify against source@Researcher
- Draft answer (3 reasons + example)@Writer
- Review for accuracy and tone@Critic
- Finalise + publish
  Waiting on Critic approval.

Installation

pnpm add nyxis-ui

Usage

import { TaskDelegation, type DelegatedTask } from 'nyxis-ui';

const tasks: DelegatedTask[] = [
  {
    id: 'root',
    title: 'Answer: why peer-dep adapters?',
    status: 'in-progress',
    progress: 0.55,
    children: [
      { id: 'r', title: 'Research', agentName: 'Researcher', status: 'done' },
      { id: 'd', title: 'Draft', agentName: 'Writer', status: 'in-progress', progress: 0.4 },
      { id: 'v', title: 'Review', agentName: 'Critic', status: 'pending' },
    ],
  },
];

<TaskDelegation tasks={tasks} onSelect={(t) => focus(t.id)} />;

Anatomy

Each node: status icon · title · @AgentName chip · optional one-line description.
Status icons: pending circle, in-progress spinner, blocked pause, done check, errored warning.
Progress bar (when 0 < progress < 1) renders as a thin line under the title.
Children indent under their parent; chevron toggles visibility.
Pass onSelect to make rows clickable; activeId highlights the current selection.