Skip to content

Conversation

Agent Status

Live activity line for a working agent — current step, rotating detail, elapsed time and a stop action.

2 variantsMIT

Preview

Reading the build pipeline

src/site/build.ts

Reading the build pipeline

Installation

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

pnpm dlx shadcn@latest add https://tuffui.com/r/agent-status.json

Usage

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

import { AgentStatus } from "@/components/ui/agent-status";

export function RunStatus({ run }: { run: AgentRun }) {
  return (
    <AgentStatus
      data={{
        label: run.currentStep.title,      // "Running the test suite"
        detail: run.currentStep.detail,    // "vitest run site"
        startedAt: run.startedAt,
        steps: run.finishedSteps.map((step) => ({
          id: step.id,
          label: step.title,
          durationMs: step.durationMs,
        })),
        status: run.status, // "working" | "done" | "stopped" | "error"
      }}
      maxSteps={3}
      onStop={() => run.abort()}
    />
  );
}

Props

PropTypeDefaultDescription
data*AgentStatusData—The current step, a changing detail, the start time for the timer, finished steps and the run status.
onStop() => void—Shows a Stop button while the agent is working.
maxStepsnumber3How many finished steps to show above the current one. 0 shows a single line.
classNamestring—Extra classes for the root element.
type AgentStatusData = {
  label: string;
  detail?: string;
  startedAt: number; // ms since epoch
  steps?: { id: string; label: string; durationMs?: number }[];
  status?: "working" | "done" | "stopped" | "error";
};