Skip to content

Planning & Execution

Background Agents Panel

Agents working in the background as a grid of live tiles or a compact dock that expands into the selected agent.

2 variantsMIT

Preview

  • License audit

    Running

    Check every npm dependency against the allowed-license list

    Reading node_modules/sharp/package.json
    1:14 · 34%

  • OG images

    Running

    Generate social cards for 40 blog posts

    Rendered 24 of 40 · /blog/edge-caching
    3:31 · 60%

  • Invoice backfill

    Needs review

    Regenerate PDFs for March invoices with the new tax line

    3 invoices have no VAT ID — needs a decision
    2:46 · 48%

  • Docs in Japanese

    Queued

    Translate the getting-started guide and API reference

    Waits for a free worker
    0:00 · 0%

Installation

Copies the component into components/ui and installs its dependencies and theme tokens.

pnpm dlx shadcn@latest add https://tuffui.com/r/background-agents.json

Usage

Pass your own data and wire the callbacks to your agent runtime.

import { BackgroundAgents, type BackgroundAgent } from "@/components/ui/background-agents";

export function AgentsPanel({ agents }: { agents: BackgroundAgent[] }) {
  return (
    <BackgroundAgents
      data={agents}
      onPause={(agent) => runtime.pause(agent.id)}
      onResume={(agent) => runtime.resume(agent.id)}
      onCancel={(agent) => runtime.cancel(agent.id)}
      onOpen={(agent) => router.push(`/agents/${agent.id}`)}
      onReview={(agent) => router.push(`/agents/${agent.id}/review`)}
    />
  );
}

Props

PropTypeDefaultDescription
data*BackgroundAgent[]—Agents to show, in your order. Each tile or avatar fills from the bottom as progress grows.
layout"grid" | "dock""grid"Grid shows a live tile per agent; dock is a row of avatars that expands into the selected agent.
onPause / onResume / onCancel / onOpen(agent: BackgroundAgent) => void—Each shows its action on the tile (on hover or focus) or in the dock strip. Update the agent's status yourself.
onReview(agent: BackgroundAgent) => void—Called from the Review action of an agent with status waiting. Falls back to onOpen.
selectedIdstring | null—Controls which agent the dock expands; null collapses it.
onSelect(agent: BackgroundAgent | null) => void—Called when the viewer picks or collapses an agent in the dock.
classNamestring—Extra classes for the root section.
type BackgroundAgent = {
  id: string;
  name: string;
  task: string;
  status: "queued" | "running" | "waiting" | "paused" | "done" | "failed" | "cancelled";
  progress: number;  // 0–1
  action?: string;   // what it is doing right now
  elapsedMs: number;
};