Agent activity

Pro

Who is working right now: each agent, what it is doing in plain words, and its state in words beside the dot, so state is never colour alone. An agent that isn't working says only its state ("Done", "Standing by"); nothing is made up for it to be doing. Agents stay in the order you give. For background jobs as one pill, use TaskTray. An agent with lastHeardAt that has been silent past staleAfter, or whose host is offline, isn't shown as running: it says "No update since 10:42" or that its host is offline.

Markdown

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/agent-activity

Brings in: agent-avatar, locale, relative-time, run-heartbeat, status, status-dot, work, utils

Usage

TSX · The example above

"use client"

import { AgentActivity } from "@/components/agent-activity"
import type { AgentActivityEntry } from "@/lib/work"

const minutesAgo = (m: number) => new Date(Date.now() - m * 60_000).toISOString()

const agents: AgentActivityEntry[] = [
  { agent: { id: "lead", name: "Lead", role: "lead" }, doing: "Talking with you", status: "running", statusLabel: "Working" },
  { agent: { id: "writer", name: "Writer", role: "dev" }, doing: "Drafting section 2, the pricing table", status: "running", statusLabel: "Working", since: minutesAgo(4) },
  // Its runner can't be reached: it isn't shown as working.
  { agent: { id: "indexer", name: "Indexer", role: "data" }, doing: "Re-indexing the catalogue", status: "running", lastHeardAt: minutesAgo(6), hostOffline: { host: "Runner 3", since: minutesAgo(5) } },
  { agent: { id: "checker", name: "Checker", role: "qa" }, status: "queued", statusLabel: "Waiting" },
  { agent: { id: "planner", name: "Planner", role: "architect" }, status: "succeeded", statusLabel: "Done" },
  // Not working: no "doing" line is made up for it.
  { agent: { id: "tester", name: "Tester", role: "qa" }, status: "idle", statusLabel: "Standing by" },
]

export default function Example() {
  return <AgentActivity className="max-w-sm" agents={agents} />
}

<AgentActivity>

Prop	Type	Default	Description
agentsrequired	`AgentActivityEntry[]`	—	One entry per agent: who, what it's doing now, its status and your word for it.
label	`string \| undefined`	—	The list's accessible name. Defaults to "Agents".
staleAfter	`number \| undefined`	STALE_AFTER	How long a running agent may be silent before it's no longer called running, in milliseconds. Defaults to two minutes.
className	`string \| undefined`	—	Extra classes for the outer element.

Strings

The fixed words, in English by default. Change any of them under agentActivity in <LocaleProvider strings={{ … }}>; the table is exported as agentActivityStrings.

Key	English
label	Agents
none	No agents yet.
since	since {time}