Task Card

AI chats

About

One delegated task with state, timing, assigned agent, and returned result.

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

Code

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

Usage.tsx

import TaskCard from '@/components/ui/task-card'

export default function Demo() {
  return (
    <TaskCard
      agent="Research subagent"
      className="w-full max-w-lg"
      description="Compare the remaining AI-focused registries and remove overlapping patterns."
      duration="3m 42s"
      result="Found 8 distinct answer and execution-detail patterns worth implementing."
      status="complete"
      title="Audit remaining registry patterns"
    />
  )
}