@automa8e/ui 0.2.0

package/registry/registry.json

@@ -0,0 +1,218 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry.json",
+  "name": "automa8e-ui",
+  "homepage": "https://github.com/automa8e/automa8e-fe-component-library",
+  "items": [
+    {
+      "name": "utils",
+      "type": "registry:lib",
+      "title": "Utils",
+      "files": [{ "path": "src/lib/utils.ts", "type": "registry:lib" }]
+    },
+    {
+      "name": "button",
+      "type": "registry:ui",
+      "title": "Button",
+      "files": [{ "path": "src/components/ui/button.tsx", "type": "registry:ui" }]
+    },
+    {
+      "name": "input",
+      "type": "registry:ui",
+      "title": "Input",
+      "files": [{ "path": "src/components/ui/input.tsx", "type": "registry:ui" }]
+    },
+    {
+      "name": "textarea",
+      "type": "registry:ui",
+      "title": "Textarea",
+      "files": [{ "path": "src/components/ui/textarea.tsx", "type": "registry:ui" }]
+    },
+    {
+      "name": "label",
+      "type": "registry:ui",
+      "title": "Label",
+      "files": [{ "path": "src/components/ui/label.tsx", "type": "registry:ui" }]
+    },
+    {
+      "name": "badge",
+      "type": "registry:ui",
+      "title": "Badge",
+      "files": [{ "path": "src/components/ui/badge.tsx", "type": "registry:ui" }]
+    },
+    {
+      "name": "card",
+      "type": "registry:ui",
+      "title": "Card",
+      "files": [{ "path": "src/components/ui/card.tsx", "type": "registry:ui" }]
+    },
+    {
+      "name": "avatar",
+      "type": "registry:ui",
+      "title": "Avatar",
+      "files": [{ "path": "src/components/ui/avatar.tsx", "type": "registry:ui" }]
+    },
+    {
+      "name": "separator",
+      "type": "registry:ui",
+      "title": "Separator",
+      "files": [{ "path": "src/components/ui/separator.tsx", "type": "registry:ui" }]
+    },
+    {
+      "name": "skeleton",
+      "type": "registry:ui",
+      "title": "Skeleton",
+      "files": [{ "path": "src/components/ui/skeleton.tsx", "type": "registry:ui" }]
+    },
+    {
+      "name": "progress",
+      "type": "registry:ui",
+      "title": "Progress",
+      "files": [{ "path": "src/components/ui/progress.tsx", "type": "registry:ui" }]
+    },
+    {
+      "name": "spinner",
+      "type": "registry:ui",
+      "title": "Spinner",
+      "files": [{ "path": "src/components/ui/spinner.tsx", "type": "registry:ui" }]
+    },
+    {
+      "name": "checkbox",
+      "type": "registry:ui",
+      "title": "Checkbox",
+      "files": [{ "path": "src/components/ui/checkbox.tsx", "type": "registry:ui" }]
+    },
+    {
+      "name": "switch",
+      "type": "registry:ui",
+      "title": "Switch",
+      "files": [{ "path": "src/components/ui/switch.tsx", "type": "registry:ui" }]
+    },
+    {
+      "name": "select",
+      "type": "registry:ui",
+      "title": "Select",
+      "files": [{ "path": "src/components/ui/select.tsx", "type": "registry:ui" }]
+    },
+    {
+      "name": "tabs",
+      "type": "registry:ui",
+      "title": "Tabs",
+      "files": [{ "path": "src/components/ui/tabs.tsx", "type": "registry:ui" }]
+    },
+    {
+      "name": "accordion",
+      "type": "registry:ui",
+      "title": "Accordion",
+      "files": [{ "path": "src/components/ui/accordion.tsx", "type": "registry:ui" }]
+    },
+    {
+      "name": "dialog",
+      "type": "registry:ui",
+      "title": "Dialog",
+      "files": [{ "path": "src/components/ui/dialog.tsx", "type": "registry:ui" }]
+    },
+    {
+      "name": "dropdown-menu",
+      "type": "registry:ui",
+      "title": "Dropdown Menu",
+      "files": [{ "path": "src/components/ui/dropdown-menu.tsx", "type": "registry:ui" }]
+    },
+    {
+      "name": "tooltip",
+      "type": "registry:ui",
+      "title": "Tooltip",
+      "files": [{ "path": "src/components/ui/tooltip.tsx", "type": "registry:ui" }]
+    },
+    {
+      "name": "popover",
+      "type": "registry:ui",
+      "title": "Popover",
+      "files": [{ "path": "src/components/ui/popover.tsx", "type": "registry:ui" }]
+    },
+    {
+      "name": "toast",
+      "type": "registry:ui",
+      "title": "Toast",
+      "files": [{ "path": "src/components/ui/toast.tsx", "type": "registry:ui" }]
+    },
+    {
+      "name": "alert",
+      "type": "registry:ui",
+      "title": "Alert",
+      "files": [{ "path": "src/components/ui/alert.tsx", "type": "registry:ui" }]
+    },
+    {
+      "name": "table",
+      "type": "registry:ui",
+      "title": "Table",
+      "files": [{ "path": "src/components/ui/table.tsx", "type": "registry:ui" }]
+    },
+    {
+      "name": "scroll-area",
+      "type": "registry:ui",
+      "title": "Scroll Area",
+      "files": [{ "path": "src/components/ui/scroll-area.tsx", "type": "registry:ui" }]
+    },
+    {
+      "name": "status-badge",
+      "type": "registry:ui",
+      "title": "Status Badge",
+      "description": "Workflow status indicator with animated running state.",
+      "registryDependencies": ["badge"],
+      "files": [{ "path": "src/components/automation/status-badge.tsx", "type": "registry:ui" }]
+    },
+    {
+      "name": "metric-card",
+      "type": "registry:ui",
+      "title": "Metric Card",
+      "description": "Numeric metric display with trend indicators.",
+      "registryDependencies": ["card"],
+      "files": [{ "path": "src/components/automation/metric-card.tsx", "type": "registry:ui" }]
+    },
+    {
+      "name": "workflow-node",
+      "type": "registry:ui",
+      "title": "Workflow Node",
+      "description": "DAG node for workflow visualizations with status and handles.",
+      "registryDependencies": ["badge", "card"],
+      "files": [{ "path": "src/components/automation/workflow-node.tsx", "type": "registry:ui" }]
+    },
+    {
+      "name": "task-card",
+      "type": "registry:ui",
+      "title": "Task Card",
+      "description": "Kanban-style task card with priority, status, and assignee.",
+      "registryDependencies": ["badge", "avatar", "card"],
+      "files": [{ "path": "src/components/automation/task-card.tsx", "type": "registry:ui" }]
+    },
+    {
+      "name": "app-shell",
+      "type": "registry:ui",
+      "title": "App Shell",
+      "description": "Top-level layout wrapper with sidebar + main content area.",
+      "registryDependencies": ["sidebar"],
+      "files": [{ "path": "src/components/layout/app-shell.tsx", "type": "registry:ui" }]
+    },
+    {
+      "name": "sidebar",
+      "type": "registry:ui",
+      "title": "Sidebar",
+      "description": "Collapsible navigation sidebar with nested items.",
+      "files": [{ "path": "src/components/layout/sidebar.tsx", "type": "registry:ui" }]
+    },
+    {
+      "name": "header",
+      "type": "registry:ui",
+      "title": "Header",
+      "description": "Top application header with branding and user actions.",
+      "files": [{ "path": "src/components/layout/header.tsx", "type": "registry:ui" }]
+    },
+    {
+      "name": "page-header",
+      "type": "registry:ui",
+      "title": "Page Header",
+      "description": "Page-level header with title, breadcrumb, and action slots.",
+      "files": [{ "path": "src/components/layout/page-header.tsx", "type": "registry:ui" }]
+    }
+  ]
+}

package/src/components/automation/metric-card.tsx

@@ -0,0 +1,113 @@
+import * as React from 'react'
+import { TrendingDown, TrendingUp, Minus } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { Card, CardContent } from '@/components/ui/card'
+import type { Metric, TrendDirection } from '@/types/automation'
+
+export interface MetricCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  metric: Metric
+  /** Icon to show in the card header */
+  icon?: React.ReactNode
+  /** Loading skeleton state */
+  loading?: boolean
+  /** Compact/minimal display */
+  compact?: boolean
+}
+
+const TREND_CONFIG: Record<
+  TrendDirection,
+  {
+    icon: React.ComponentType<{ className?: string }>
+    color: string
+    label: string
+  }
+> = {
+  up: { icon: TrendingUp, color: 'text-success', label: 'up' },
+  down: { icon: TrendingDown, color: 'text-destructive', label: 'down' },
+  flat: { icon: Minus, color: 'text-muted-foreground', label: 'unchanged' },
+}
+
+function MetricCard({ className, metric, icon, loading = false, compact = false, ...props }: MetricCardProps) {
+  const trend = metric.trend ? TREND_CONFIG[metric.trend] : null
+  const TrendIcon = trend?.icon
+
+  if (loading) {
+    return (
+      <Card className={cn('overflow-hidden', className)} {...props}>
+        <CardContent className="p-5">
+          <div className="space-y-3">
+            <div className="h-4 w-24 rounded bg-muted animate-[shimmer_2s_linear_infinite] [background:linear-gradient(90deg,hsl(var(--muted))_25%,hsl(var(--muted-foreground)/0.1)_50%,hsl(var(--muted))_75%)] [background-size:200%_100%]" />
+            <div className="h-8 w-32 rounded bg-muted animate-[shimmer_2s_linear_infinite] [background:linear-gradient(90deg,hsl(var(--muted))_25%,hsl(var(--muted-foreground)/0.1)_50%,hsl(var(--muted))_75%)] [background-size:200%_100%]" />
+            <div className="h-3 w-20 rounded bg-muted animate-[shimmer_2s_linear_infinite] [background:linear-gradient(90deg,hsl(var(--muted))_25%,hsl(var(--muted-foreground)/0.1)_50%,hsl(var(--muted))_75%)] [background-size:200%_100%]" />
+          </div>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  return (
+    <Card className={cn('overflow-hidden', className)} {...props}>
+      <CardContent className={cn(compact ? 'p-4' : 'p-5')}>
+        <div className="flex items-start justify-between gap-4">
+          <div className="flex-1 min-w-0">
+            <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider truncate">
+              {metric.label}
+            </p>
+            <div className={cn('flex items-baseline gap-1.5 mt-1.5', compact ? 'mt-1' : 'mt-2')}>
+              <span className={cn('font-bold text-foreground tabular-nums', compact ? 'text-xl' : 'text-2xl')}>
+                {metric.value}
+              </span>
+              {metric.unit && (
+                <span className="text-sm text-muted-foreground font-medium">{metric.unit}</span>
+              )}
+            </div>
+          </div>
+
+          {icon && (
+            <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
+              {icon}
+            </div>
+          )}
+        </div>
+
+        {(trend || metric.description) && !compact && (
+          <div className="mt-3 flex items-center gap-2">
+            {trend && TrendIcon && (
+              <div className={cn('flex items-center gap-1 text-xs font-medium', trend.color)}>
+                <TrendIcon className="h-3.5 w-3.5" />
+                {metric.trendPercent !== undefined && (
+                  <span>{metric.trendPercent > 0 ? '+' : ''}{metric.trendPercent}%</span>
+                )}
+              </div>
+            )}
+            {metric.description && (
+              <p className="text-xs text-muted-foreground">{metric.description}</p>
+            )}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+
+/** Grid wrapper for a set of MetricCards */
+export interface MetricGridProps extends React.HTMLAttributes<HTMLDivElement> {
+  cols?: 2 | 3 | 4 | 5
+}
+
+function MetricGrid({ className, cols = 4, children, ...props }: MetricGridProps) {
+  const colsClass = {
+    2: 'grid-cols-1 sm:grid-cols-2',
+    3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
+    4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
+    5: 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-5',
+  }[cols]
+
+  return (
+    <div className={cn('grid gap-4', colsClass, className)} {...props}>
+      {children}
+    </div>
+  )
+}
+
+export { MetricCard, MetricGrid }

package/src/components/automation/status-badge.tsx

@@ -0,0 +1,136 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import {
+  CheckCircle2,
+  XCircle,
+  Clock,
+  Pause,
+  Ban,
+  Loader2,
+  Calendar,
+  MinusCircle,
+} from 'lucide-react'
+import { cn } from '@/lib/utils'
+import type { WorkflowStatus } from '@/types/automation'
+
+const statusBadgeVariants = cva(
+  'inline-flex items-center gap-1.5 rounded-full border font-medium transition-colors',
+  {
+    variants: {
+      size: {
+        xs: 'px-1.5 py-0 text-[10px]',
+        sm: 'px-2 py-0.5 text-xs',
+        md: 'px-2.5 py-1 text-xs',
+        lg: 'px-3 py-1.5 text-sm',
+      },
+    },
+    defaultVariants: {
+      size: 'sm',
+    },
+  }
+)
+
+const STATUS_CONFIG: Record<
+  WorkflowStatus,
+  {
+    label: string
+    icon: React.ComponentType<{ className?: string }>
+    className: string
+    pulse?: boolean
+  }
+> = {
+  running: {
+    label: 'Running',
+    icon: Loader2,
+    className: 'bg-workflow-running/15 border-workflow-running/40 text-workflow-running',
+    pulse: true,
+  },
+  completed: {
+    label: 'Completed',
+    icon: CheckCircle2,
+    className: 'bg-workflow-completed/15 border-workflow-completed/40 text-workflow-completed',
+  },
+  failed: {
+    label: 'Failed',
+    icon: XCircle,
+    className: 'bg-workflow-failed/15 border-workflow-failed/40 text-workflow-failed',
+  },
+  pending: {
+    label: 'Pending',
+    icon: Clock,
+    className: 'bg-workflow-pending/15 border-workflow-pending/40 text-workflow-pending',
+  },
+  paused: {
+    label: 'Paused',
+    icon: Pause,
+    className: 'bg-workflow-paused/15 border-workflow-paused/40 text-workflow-paused',
+  },
+  cancelled: {
+    label: 'Cancelled',
+    icon: Ban,
+    className: 'bg-workflow-cancelled/15 border-workflow-cancelled/40 text-workflow-cancelled',
+  },
+  idle: {
+    label: 'Idle',
+    icon: MinusCircle,
+    className: 'bg-muted border-border text-muted-foreground',
+  },
+  scheduled: {
+    label: 'Scheduled',
+    icon: Calendar,
+    className: 'bg-info/15 border-info/40 text-info',
+  },
+}
+
+export interface StatusBadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof statusBadgeVariants> {
+  /** The workflow status to display */
+  status: WorkflowStatus
+  /** Override the default label */
+  label?: string
+  /** Hide the icon */
+  hideIcon?: boolean
+  /** Show animated pulse dot for running state */
+  showPulse?: boolean
+}
+
+function StatusBadge({
+  className,
+  size,
+  status,
+  label,
+  hideIcon = false,
+  showPulse = true,
+  ...props
+}: StatusBadgeProps) {
+  const config = STATUS_CONFIG[status]
+  const Icon = config.icon
+  const displayLabel = label ?? config.label
+  const isRunning = status === 'running'
+
+  return (
+    <div
+      className={cn(statusBadgeVariants({ size }), config.className, className)}
+      {...props}
+    >
+      {showPulse && isRunning ? (
+        <span className="relative flex h-2 w-2">
+          <span className="absolute inline-flex h-full w-full animate-workflow-pulse rounded-full bg-workflow-running opacity-75" />
+          <span className="relative inline-flex h-2 w-2 rounded-full bg-workflow-running" />
+        </span>
+      ) : !hideIcon ? (
+        <Icon
+          className={cn(
+            'shrink-0',
+            size === 'xs' ? 'h-2.5 w-2.5' : size === 'sm' ? 'h-3 w-3' : 'h-3.5 w-3.5',
+            isRunning && 'animate-spin'
+          )}
+        />
+      ) : null}
+      {displayLabel}
+    </div>
+  )
+}
+
+export { StatusBadge, STATUS_CONFIG }

package/src/components/automation/task-card.tsx

@@ -0,0 +1,164 @@
+import * as React from 'react'
+import { Calendar, Flag, Tag } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { Card, CardContent } from '@/components/ui/card'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { Badge } from '@/components/ui/badge'
+import { StatusBadge } from './status-badge'
+import type { Task, TaskPriority } from '@/types/automation'
+
+const PRIORITY_CONFIG: Record<TaskPriority, { label: string; color: string; dotClass: string }> = {
+  critical: { label: 'Critical', color: 'text-destructive', dotClass: 'bg-destructive' },
+  high: { label: 'High', color: 'text-warning', dotClass: 'bg-warning' },
+  medium: { label: 'Medium', color: 'text-info', dotClass: 'bg-info' },
+  low: { label: 'Low', color: 'text-muted-foreground', dotClass: 'bg-muted-foreground' },
+}
+
+// Map TaskStatus to WorkflowStatus for the StatusBadge
+const TASK_TO_WORKFLOW_STATUS = {
+  running: 'running',
+  completed: 'completed',
+  failed: 'failed',
+  pending: 'pending',
+  skipped: 'cancelled',
+  cancelled: 'cancelled',
+} as const
+
+export interface TaskCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+  task: Task
+  /** Show/hide priority indicator */
+  showPriority?: boolean
+  /** Called when card is clicked */
+  onSelect?: (task: Task) => void
+  /** Compact single-line mode */
+  compact?: boolean
+}
+
+function TaskCard({
+  className,
+  task,
+  showPriority = true,
+  onSelect,
+  compact = false,
+  ...props
+}: TaskCardProps) {
+  const priority = PRIORITY_CONFIG[task.priority]
+  const workflowStatus = TASK_TO_WORKFLOW_STATUS[task.status]
+
+  const formattedDue = task.dueAt
+    ? new Date(task.dueAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
+    : null
+
+  const isOverdue =
+    task.dueAt &&
+    task.status !== 'completed' &&
+    task.status !== 'cancelled' &&
+    new Date(task.dueAt) < new Date()
+
+  if (compact) {
+    return (
+      <div
+        className={cn(
+          'flex items-center gap-3 py-2 px-3 rounded-md hover:bg-muted/50 transition-colors',
+          onSelect && 'cursor-pointer',
+          className
+        )}
+        onClick={() => onSelect?.(task)}
+        {...props}
+      >
+        <StatusBadge status={workflowStatus} size="xs" />
+        <span className="flex-1 text-sm truncate">{task.title}</span>
+        {task.assignee && (
+          <Avatar size="xs">
+            {task.assignee.avatarUrl && <AvatarImage src={task.assignee.avatarUrl} alt={task.assignee.name} />}
+            <AvatarFallback>{task.assignee.initials ?? task.assignee.name.slice(0, 2).toUpperCase()}</AvatarFallback>
+          </Avatar>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <Card
+      className={cn(
+        'transition-all duration-200',
+        onSelect && 'cursor-pointer hover:border-primary/40 hover:shadow-glow-primary',
+        className
+      )}
+      onClick={() => onSelect?.(task)}
+      {...props}
+    >
+      <CardContent className="p-4">
+        <div className="flex items-start justify-between gap-3">
+          <div className="flex-1 min-w-0">
+            {/* Title + status */}
+            <div className="flex items-center gap-2 flex-wrap">
+              <h4 className={cn(
+                'text-sm font-medium leading-tight',
+                task.status === 'completed' && 'line-through text-muted-foreground'
+              )}>
+                {task.title}
+              </h4>
+              <StatusBadge status={workflowStatus} size="xs" />
+            </div>
+
+            {task.description && (
+              <p className="mt-1 text-xs text-muted-foreground line-clamp-2">{task.description}</p>
+            )}
+
+            {/* Meta row */}
+            <div className="mt-3 flex flex-wrap items-center gap-3">
+              {showPriority && (
+                <div className={cn('flex items-center gap-1 text-xs font-medium', priority.color)}>
+                  <Flag className="h-3 w-3" />
+                  {priority.label}
+                </div>
+              )}
+
+              {formattedDue && (
+                <div className={cn(
+                  'flex items-center gap-1 text-xs',
+                  isOverdue ? 'text-destructive font-medium' : 'text-muted-foreground'
+                )}>
+                  <Calendar className="h-3 w-3" />
+                  {isOverdue && 'Overdue · '}
+                  {formattedDue}
+                </div>
+              )}
+
+              {task.tags && task.tags.length > 0 && (
+                <div className="flex items-center gap-1">
+                  <Tag className="h-3 w-3 text-muted-foreground" />
+                  <div className="flex gap-1 flex-wrap">
+                    {task.tags.slice(0, 3).map((tag) => (
+                      <Badge key={tag} variant="muted" size="sm">
+                        {tag}
+                      </Badge>
+                    ))}
+                    {task.tags.length > 3 && (
+                      <Badge variant="muted" size="sm">+{task.tags.length - 3}</Badge>
+                    )}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Assignee */}
+          {task.assignee && (
+            <Avatar size="sm">
+              {task.assignee.avatarUrl && (
+                <AvatarImage src={task.assignee.avatarUrl} alt={task.assignee.name} />
+              )}
+              <AvatarFallback>
+                {task.assignee.initials ?? task.assignee.name.slice(0, 2).toUpperCase()}
+              </AvatarFallback>
+            </Avatar>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export { TaskCard }