{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "recent-activity",
  "title": "Recent Activity",
  "description": "An activity feed card that lists agent runs with duration and recency chips.",
  "dependencies": [
    "motion",
    "lucide-react"
  ],
  "files": [
    {
      "path": "app/registry/recent-activity/recent-activity.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion } from 'motion/react';\nimport {\n  Bug,\n  CalendarClock,\n  ChartNoAxesColumn,\n  Clock,\n  Code2,\n  FileText,\n  Globe,\n  Handshake,\n  Headphones,\n  Kanban,\n  LineChart,\n  Mail,\n  Search,\n  Server,\n  ShieldCheck,\n  UserCheck,\n  Workflow,\n} from 'lucide-react';\n\nimport { cn } from '@/lib/utils';\n\nexport interface ActivityItem {\n  icon?: React.ReactNode;\n  title: string;\n  /** Small run-duration chip next to the title, e.g. \"15s\". */\n  duration?: string;\n  description: string;\n  /** Right-aligned chip, e.g. \"15H\". Clipped on narrow cards, like the design. */\n  timeAgo?: string;\n}\n\nexport interface RecentActivityProps {\n  title?: string;\n  titleIcon?: React.ReactNode;\n  items?: ActivityItem[];\n  className?: string;\n}\n\nconst DEFAULT_ITEMS: ActivityItem[] = [\n  {\n    icon: <Mail />,\n    title: 'Personalized Email',\n    duration: '15s',\n    description: 'Personalized Email sent to ••••• @gmail.com',\n    timeAgo: '15H',\n  },\n  {\n    icon: <UserCheck />,\n    title: 'Peer Review',\n    description: 'Reviewed and approved 2 outputs from Content Drafting Agent',\n    timeAgo: '30H',\n  },\n  {\n    icon: <FileText />,\n    title: 'Content Drafting',\n    description: 'Generated draft campaign brief',\n    timeAgo: '40M',\n  },\n  {\n    icon: <ShieldCheck />,\n    title: 'Admin Approval',\n    description: 'Final approval of marketing copy before publishing',\n    timeAgo: '20H',\n  },\n  {\n    icon: <ChartNoAxesColumn />,\n    title: 'Weekly Campaign Report',\n    duration: '2m',\n    description: 'Generated campaign performance report',\n    timeAgo: '18H',\n  },\n  {\n    icon: <Search />,\n    title: 'SEO Audit',\n    duration: '5m',\n    description: 'Checked 50 web pages for SEO health and compliance',\n    timeAgo: '12H',\n  },\n  {\n    icon: <LineChart />,\n    title: 'Price Monitoring Agent',\n    description: 'Checked competitor prices for top-selling products',\n    timeAgo: '25H',\n  },\n  {\n    icon: <Globe />,\n    title: 'Research',\n    duration: '2m',\n    description: 'Searched 25 webpages for industry trends',\n    timeAgo: '25S',\n  },\n  {\n    icon: <CalendarClock />,\n    title: 'Social Media Manager',\n    duration: '25S',\n    description: 'Scheduled posts for the next month',\n    timeAgo: '10H',\n  },\n  {\n    icon: <Handshake />,\n    title: 'Sales Representative',\n    duration: '25S',\n    description: 'Closed 5 deals with new clients',\n    timeAgo: '35H',\n  },\n  {\n    icon: <Headphones />,\n    title: 'Customer Support',\n    duration: '25S',\n    description: 'Resolved 100 support tickets',\n    timeAgo: '20H',\n  },\n  {\n    icon: <Bug />,\n    title: 'Quality Assurance',\n    duration: '25S',\n    description: 'Tested 20 features for bugs',\n    timeAgo: '15H',\n  },\n  {\n    icon: <Code2 />,\n    title: 'Frontend Developer',\n    duration: '25S',\n    description: 'Implemented 10 new UI components',\n    timeAgo: '30H',\n  },\n  {\n    icon: <Server />,\n    title: 'Backend Developer',\n    duration: '25S',\n    description: 'Built 5 new API endpoints',\n    timeAgo: '25H',\n  },\n  {\n    icon: <Kanban />,\n    title: 'Project Manager',\n    duration: '25S',\n    description: 'Led the team through 3 project phases',\n    timeAgo: '40H',\n  },\n];\n\nfunction TimeChip({ value }: { value: string }) {\n  return (\n    <span className=\"inline-flex h-5 shrink-0 items-center gap-[3px] rounded-md border border-border bg-white px-[5px] font-inter text-[10px] font-medium leading-none text-neutral-900/80 dark:bg-neutral-900 dark:text-neutral-100/80\">\n      <Clock className=\"h-3 w-3 text-neutral-900/50 dark:text-neutral-100/50\" />\n      {value}\n    </span>\n  );\n}\n\nexport function RecentActivity({\n  title = 'Recent Activity',\n  titleIcon,\n  items = DEFAULT_ITEMS,\n  className,\n}: RecentActivityProps) {\n  return (\n    <div\n      className={cn(\n        'w-full rounded-[26px] border-[0.5px] border-neutral-300 bg-[#f2f2f2] p-1.5 font-inter dark:border-neutral-700 dark:bg-neutral-900',\n        className,\n      )}\n    >\n      <div className=\"overflow-hidden rounded-[20px] border-[0.5px] border-neutral-300 bg-white dark:border-neutral-700 dark:bg-neutral-950\">\n        {/* Header */}\n        <div className=\"flex items-center gap-1.5 border-b border-neutral-200/80 px-[18px] py-[19px] dark:border-neutral-800\">\n          <span className=\"flex text-neutral-900/80 dark:text-neutral-100/80 [&_svg]:h-4 [&_svg]:w-4\">\n            {titleIcon ?? <Workflow />}\n          </span>\n          <h3 className=\"text-[16px] font-semibold leading-none tracking-[-0.32px] text-neutral-900/80 dark:text-neutral-100/80\">\n            {title}\n          </h3>\n        </div>\n\n        {/* Rows */}\n        <div>\n          {items.map((item, index) => (\n            <motion.div\n              key={item.title}\n              initial={{ opacity: 0, y: 6 }}\n              whileInView={{ opacity: 1, y: 0 }}\n              viewport={{ once: true, margin: '-40px' }}\n              transition={{ duration: 0.35, delay: index * 0.03, ease: 'easeOut' }}\n              className={cn(\n                'flex h-[41px] items-center px-[18px] transition-colors hover:bg-neutral-50 dark:hover:bg-neutral-900/50',\n                index > 0 && 'border-t border-neutral-200/60 dark:border-neutral-800/60',\n              )}\n            >\n              <div className=\"flex min-w-0 flex-1 items-center gap-1.5 pr-3 sm:w-[248px] sm:flex-none sm:shrink-0\">\n                {item.icon ? (\n                  <span className=\"flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-[5px] border border-neutral-200 text-neutral-900/60 dark:border-neutral-800 dark:text-neutral-100/60 [&_svg]:h-3 [&_svg]:w-3\">\n                    {item.icon}\n                  </span>\n                ) : null}\n                <span className=\"ml-1 truncate text-xs font-medium tracking-[-0.24px] text-neutral-900/80 dark:text-neutral-100/80\">\n                  {item.title}\n                </span>\n                {item.duration ? <TimeChip value={item.duration} /> : null}\n              </div>\n              <div className=\"hidden min-w-0 flex-1 items-center gap-3 self-stretch border-l border-neutral-200/60 pl-4 dark:border-neutral-800/60 sm:flex\">\n                <span className=\"min-w-0 flex-1 truncate text-xs font-medium tracking-[-0.24px] text-neutral-900/60 dark:text-neutral-100/60\">\n                  {item.description}\n                </span>\n                {item.timeAgo ? (\n                  <span className=\"hidden xl:inline-flex\">\n                    <TimeChip value={item.timeAgo} />\n                  </span>\n                ) : null}\n              </div>\n            </motion.div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/spectrumui/recent-activity.tsx"
    }
  ],
  "type": "registry:component"
}