Agent Status

AI chats 8

About

A compact task summary with the current activity and an optional task tray.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Agent Status to your project and fits it to your theme.

Code

How Agent Status is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import AgentStatus from '@/components/ui/agent-status'

export default function Demo() {
  return (
    <AgentStatus
      className="w-full max-w-lg"
      detail="Building the answer-format collection"
      tasks={[
        { id: 'research', label: 'Audit registry metadata', status: 'complete' },
        { id: 'components', label: 'Author eight components', status: 'running' },
        { id: 'verify', label: 'Verify every documentation route', status: 'pending' },
      ]}
      title="Preparing the next Pasta UI collection"
    />
  )
}