@automa8e/ui 0.2.0

package/src/components/automation/workflow-node.tsx

@@ -0,0 +1,186 @@
+import * as React from 'react'
+import {
+  Zap,
+  Play,
+  GitBranch,
+  Timer,
+  Send,
+  AlertCircle,
+  CheckCircle2,
+  Loader2,
+  Clock,
+  Pause,
+} from 'lucide-react'
+import { cn } from '@/lib/utils'
+import type { WorkflowNodeData } from '@/types/automation'
+
+const NODE_TYPE_CONFIG = {
+  trigger: {
+    icon: Zap,
+    label: 'Trigger',
+    className: 'border-primary/50 bg-primary/10 text-primary',
+    headerClass: 'bg-primary/10',
+  },
+  action: {
+    icon: Play,
+    label: 'Action',
+    className: 'border-border bg-card text-foreground',
+    headerClass: 'bg-muted',
+  },
+  condition: {
+    icon: GitBranch,
+    label: 'Condition',
+    className: 'border-info/50 bg-info/10 text-foreground',
+    headerClass: 'bg-info/10',
+  },
+  delay: {
+    icon: Timer,
+    label: 'Delay',
+    className: 'border-warning/50 bg-warning/10 text-foreground',
+    headerClass: 'bg-warning/10',
+  },
+  output: {
+    icon: Send,
+    label: 'Output',
+    className: 'border-success/50 bg-success/10 text-foreground',
+    headerClass: 'bg-success/10',
+  },
+}
+
+const STATUS_INDICATOR = {
+  running: { icon: Loader2, className: 'text-workflow-running animate-spin' },
+  completed: { icon: CheckCircle2, className: 'text-workflow-completed' },
+  failed: { icon: AlertCircle, className: 'text-workflow-failed' },
+  pending: { icon: Clock, className: 'text-workflow-pending' },
+  paused: { icon: Pause, className: 'text-workflow-paused' },
+  cancelled: { icon: AlertCircle, className: 'text-workflow-cancelled' },
+  idle: { icon: Clock, className: 'text-muted-foreground' },
+  scheduled: { icon: Clock, className: 'text-info' },
+}
+
+export interface WorkflowNodeProps extends React.HTMLAttributes<HTMLDivElement> {
+  node: WorkflowNodeData
+  /** Show as a compact inline node */
+  compact?: boolean
+  /** Whether to show the connector line below */
+  showConnector?: boolean
+  /** Whether this is the last node in the chain */
+  isLast?: boolean
+}
+
+function WorkflowNode({
+  className,
+  node,
+  compact = false,
+  showConnector = false,
+  isLast = false,
+  ...props
+}: WorkflowNodeProps) {
+  const typeConfig = NODE_TYPE_CONFIG[node.type]
+  const statusIndicator = STATUS_INDICATOR[node.status]
+  const TypeIcon = typeConfig.icon
+  const StatusIcon = statusIndicator.icon
+
+  const formatDuration = (ms: number) => {
+    if (ms < 1000) return `${ms}ms`
+    if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`
+    return `${Math.floor(ms / 60000)}m ${Math.floor((ms % 60000) / 1000)}s`
+  }
+
+  return (
+    <div className="relative flex flex-col items-center">
+      <div
+        className={cn(
+          'w-full rounded-lg border transition-all duration-200',
+          typeConfig.className,
+          node.status === 'running' && 'shadow-glow-primary animate-workflow-pulse',
+          node.status === 'failed' && 'border-workflow-failed/60',
+          compact ? 'p-3' : 'overflow-hidden',
+          className
+        )}
+        {...props}
+      >
+        {compact ? (
+          <div className="flex items-center gap-2">
+            <div className={cn('flex h-6 w-6 shrink-0 items-center justify-center rounded', typeConfig.headerClass)}>
+              <TypeIcon className="h-3.5 w-3.5" />
+            </div>
+            <span className="flex-1 text-sm font-medium truncate">{node.label}</span>
+            <StatusIcon className={cn('h-4 w-4 shrink-0', statusIndicator.className)} />
+          </div>
+        ) : (
+          <>
+            {/* Node header */}
+            <div className={cn('flex items-center gap-2.5 px-3 py-2.5', typeConfig.headerClass)}>
+              <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-background/50">
+                <TypeIcon className="h-4 w-4" />
+              </div>
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-1.5">
+                  <span className="text-[10px] font-semibold uppercase tracking-wider opacity-70">
+                    {typeConfig.label}
+                  </span>
+                </div>
+                <p className="text-sm font-semibold leading-tight truncate">{node.label}</p>
+              </div>
+              <StatusIcon className={cn('h-4 w-4 shrink-0', statusIndicator.className)} />
+            </div>
+
+            {/* Node body */}
+            {(node.description || node.error || node.duration !== undefined) && (
+              <div className="px-3 py-2.5 space-y-1.5">
+                {node.description && (
+                  <p className="text-xs text-muted-foreground">{node.description}</p>
+                )}
+                {node.error && (
+                  <p className="text-xs text-destructive font-mono bg-destructive/5 rounded px-2 py-1">
+                    {node.error}
+                  </p>
+                )}
+                {node.duration !== undefined && (
+                  <div className="flex items-center gap-1 text-[10px] text-muted-foreground">
+                    <Clock className="h-3 w-3" />
+                    <span>{formatDuration(node.duration)}</span>
+                  </div>
+                )}
+              </div>
+            )}
+          </>
+        )}
+      </div>
+
+      {/* Connector line */}
+      {showConnector && !isLast && (
+        <div className="flex flex-col items-center my-1">
+          <div className="w-px h-4 bg-border" />
+          <div className="w-1.5 h-1.5 rounded-full bg-border" />
+          <div className="w-px h-4 bg-border" />
+        </div>
+      )}
+    </div>
+  )
+}
+
+/** Renders a vertical workflow pipeline from an array of nodes */
+export interface WorkflowPipelineProps extends React.HTMLAttributes<HTMLDivElement> {
+  nodes: WorkflowNodeData[]
+  compact?: boolean
+}
+
+function WorkflowPipeline({ className, nodes, compact = false, ...props }: WorkflowPipelineProps) {
+  return (
+    <div className={cn('flex flex-col', className)} {...props}>
+      {nodes.map((node, i) => (
+        <WorkflowNode
+          key={node.id}
+          node={node}
+          compact={compact}
+          showConnector
+          isLast={i === nodes.length - 1}
+        />
+      ))}
+    </div>
+  )
+}
+
+export { WorkflowNode, WorkflowPipeline }

package/src/components/layout/app-shell.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+export interface AppShellProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** The sidebar component */
+  sidebar?: React.ReactNode
+  /** The top header component */
+  header?: React.ReactNode
+  /** Main content */
+  children: React.ReactNode
+  /** Whether the sidebar is currently shown (for mobile overlay handling) */
+  sidebarOpen?: boolean
+}
+
+/**
+ * AppShell provides the top-level layout structure:
+ * - Sidebar (left)
+ * - Main area (header + content)
+ */
+function AppShell({ className, sidebar, header, children, sidebarOpen = true, ...props }: AppShellProps) {
+  return (
+    <div
+      className={cn('flex h-screen w-full overflow-hidden bg-background', className)}
+      {...props}
+    >
+      {/* Sidebar */}
+      {sidebar && (
+        <div
+          className={cn(
+            'shrink-0 h-full transition-all duration-200',
+            !sidebarOpen && 'hidden md:flex'
+          )}
+        >
+          {sidebar}
+        </div>
+      )}
+
+      {/* Main column */}
+      <div className="flex flex-1 flex-col overflow-hidden min-w-0">
+        {header}
+        <main className="flex-1 overflow-y-auto">
+          {children}
+        </main>
+      </div>
+    </div>
+  )
+}
+
+/** Content wrapper with standard page padding */
+function PageContent({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={cn('p-6', className)} {...props}>
+      {children}
+    </div>
+  )
+}
+
+export { AppShell, PageContent }

package/src/components/layout/header.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+export interface HeaderProps extends React.HTMLAttributes<HTMLElement> {
+  /** Left slot — typically logo + nav */
+  left?: React.ReactNode
+  /** Center slot — search, breadcrumbs */
+  center?: React.ReactNode
+  /** Right slot — user menu, notifications, settings */
+  right?: React.ReactNode
+  /** Makes header sticky at top */
+  sticky?: boolean
+  /** Adds a bottom border */
+  bordered?: boolean
+}
+
+const Header = React.forwardRef<HTMLElement, HeaderProps>(
+  ({ className, left, center, right, sticky = false, bordered = true, children, ...props }, ref) => (
+    <header
+      ref={ref}
+      className={cn(
+        'z-40 flex h-14 w-full items-center gap-4 bg-background px-4',
+        sticky && 'sticky top-0',
+        bordered && 'border-b border-border',
+        className
+      )}
+      {...props}
+    >
+      {left && <div className="flex items-center gap-3">{left}</div>}
+      {center && <div className="flex flex-1 items-center justify-center">{center}</div>}
+      {!center && <div className="flex-1" />}
+      {right && <div className="flex items-center gap-2">{right}</div>}
+      {children}
+    </header>
+  )
+)
+Header.displayName = 'Header'
+
+export { Header }

package/src/components/layout/page-header.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+export interface PageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Page title */
+  title: string
+  /** Subtitle / description */
+  description?: string
+  /** Slot for breadcrumbs above the title */
+  breadcrumbs?: React.ReactNode
+  /** Slot for action buttons (top-right) */
+  actions?: React.ReactNode
+  /** Optional decorative badge next to the title */
+  badge?: React.ReactNode
+}
+
+const PageHeader = React.forwardRef<HTMLDivElement, PageHeaderProps>(
+  ({ className, title, description, breadcrumbs, actions, badge, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('flex flex-col gap-1 pb-6 md:flex-row md:items-start md:justify-between', className)}
+      {...props}
+    >
+      <div className="space-y-1.5">
+        {breadcrumbs && <div className="mb-2">{breadcrumbs}</div>}
+        <div className="flex items-center gap-3 flex-wrap">
+          <h1 className="text-2xl font-bold tracking-tight font-display">{title}</h1>
+          {badge}
+        </div>
+        {description && (
+          <p className="text-sm text-muted-foreground max-w-2xl">{description}</p>
+        )}
+      </div>
+      {actions && (
+        <div className="flex items-center gap-2 shrink-0 mt-2 md:mt-0">{actions}</div>
+      )}
+    </div>
+  )
+)
+PageHeader.displayName = 'PageHeader'
+
+export { PageHeader }

package/src/components/layout/sidebar.tsx

@@ -0,0 +1,190 @@
+import * as React from 'react'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { Separator } from '@/components/ui/separator'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+
+export interface SidebarNavItem {
+  id: string
+  label: string
+  icon?: React.ReactNode
+  href?: string
+  badge?: string | number
+  active?: boolean
+  disabled?: boolean
+  onClick?: () => void
+  children?: SidebarNavItem[]
+}
+
+export interface SidebarSection {
+  id: string
+  label?: string
+  items: SidebarNavItem[]
+}
+
+export interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
+  sections?: SidebarSection[]
+  /** Whether sidebar is collapsed to icon-only mode */
+  collapsed?: boolean
+  /** Called when collapse toggle is pressed */
+  onCollapsedChange?: (collapsed: boolean) => void
+  /** Show collapse toggle button */
+  collapsible?: boolean
+  /** Width when expanded */
+  width?: string
+  /** Slot for logo/brand area */
+  header?: React.ReactNode
+  /** Slot for footer content (user menu, etc.) */
+  footer?: React.ReactNode
+}
+
+function SidebarNavItemComponent({
+  item,
+  collapsed,
+}: {
+  item: SidebarNavItem
+  collapsed: boolean
+}) {
+  const content = (
+    <button
+      onClick={item.onClick}
+      disabled={item.disabled}
+      className={cn(
+        'flex w-full items-center gap-3 rounded-md px-2.5 py-2 text-sm font-medium transition-colors duration-150',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+        item.active
+          ? 'bg-primary/15 text-primary border border-primary/20'
+          : 'text-muted-foreground hover:bg-muted hover:text-foreground border border-transparent',
+        item.disabled && 'pointer-events-none opacity-50',
+        collapsed && 'justify-center px-2'
+      )}
+    >
+      {item.icon && (
+        <span className={cn('shrink-0 [&>svg]:h-4 [&>svg]:w-4', item.active && 'text-primary')}>
+          {item.icon}
+        </span>
+      )}
+      {!collapsed && (
+        <>
+          <span className="flex-1 truncate text-left">{item.label}</span>
+          {item.badge !== undefined && (
+            <span className={cn(
+              'ml-auto flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-[10px] font-semibold',
+              item.active ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground'
+            )}>
+              {item.badge}
+            </span>
+          )}
+        </>
+      )}
+    </button>
+  )
+
+  if (collapsed && item.label) {
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>{content}</TooltipTrigger>
+        <TooltipContent side="right">{item.label}</TooltipContent>
+      </Tooltip>
+    )
+  }
+
+  return content
+}
+
+const Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>(
+  (
+    {
+      className,
+      sections = [],
+      collapsed = false,
+      onCollapsedChange,
+      collapsible = true,
+      width = '240px',
+      header,
+      footer,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <TooltipProvider delayDuration={0}>
+        <div
+          ref={ref}
+          style={{ width: collapsed ? '56px' : width }}
+          className={cn(
+            'flex h-full flex-col border-r border-border bg-background transition-all duration-200',
+            className
+          )}
+          {...props}
+        >
+          {/* Header slot */}
+          {header && (
+            <>
+              <div className={cn('flex items-center px-3 py-4', collapsed && 'justify-center')}>
+                {header}
+              </div>
+              <Separator />
+            </>
+          )}
+
+          {/* Nav sections */}
+          <div className="flex-1 overflow-y-auto py-2 px-2 space-y-4">
+            {sections.map((section, idx) => (
+              <div key={section.id}>
+                {section.label && !collapsed && (
+                  <p className="mb-1 px-2.5 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+                    {section.label}
+                  </p>
+                )}
+                {section.label && collapsed && idx > 0 && (
+                  <Separator className="my-2" />
+                )}
+                <div className="space-y-0.5">
+                  {section.items.map((item) => (
+                    <SidebarNavItemComponent key={item.id} item={item} collapsed={collapsed} />
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {/* Footer slot */}
+          {footer && (
+            <>
+              <Separator />
+              <div className={cn('p-3', collapsed && 'flex justify-center')}>
+                {footer}
+              </div>
+            </>
+          )}
+
+          {/* Collapse toggle */}
+          {collapsible && (
+            <>
+              <Separator />
+              <div className="p-2 flex justify-end">
+                <Button
+                  variant="ghost"
+                  size="icon-sm"
+                  onClick={() => onCollapsedChange?.(!collapsed)}
+                  aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+                >
+                  {collapsed ? (
+                    <ChevronRight className="h-4 w-4" />
+                  ) : (
+                    <ChevronLeft className="h-4 w-4" />
+                  )}
+                </Button>
+              </div>
+            </>
+          )}
+        </div>
+      </TooltipProvider>
+    )
+  }
+)
+Sidebar.displayName = 'Sidebar'
+
+export { Sidebar }

package/src/components/ui/accordion.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react'
+import * as AccordionPrimitive from '@radix-ui/react-accordion'
+import { ChevronDown } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn('border-b border-border', className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = 'AccordionItem'
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        'flex flex-1 items-center justify-between py-4 text-sm font-medium',
+        'transition-all hover:underline',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded',
+        '[&[data-state=open]>svg]:rotate-180',
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn('pb-4 pt-0', className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package/src/components/ui/alert.tsx

@@ -0,0 +1,93 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { AlertCircle, CheckCircle2, Info, TriangleAlert, X } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+const alertVariants = cva(
+  'relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:pl-7',
+  {
+    variants: {
+      variant: {
+        default: 'border-border bg-background text-foreground',
+        info: 'border-info/30 bg-info/10 text-foreground [&>svg]:text-info',
+        success: 'border-success/30 bg-success/10 text-foreground [&>svg]:text-success',
+        warning: 'border-warning/30 bg-warning/10 text-foreground [&>svg]:text-warning',
+        destructive: 'border-destructive/30 bg-destructive/10 text-foreground [&>svg]:text-destructive',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+)
+
+const ALERT_ICONS = {
+  default: AlertCircle,
+  info: Info,
+  success: CheckCircle2,
+  warning: TriangleAlert,
+  destructive: AlertCircle,
+} as const
+
+export interface AlertProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof alertVariants> {
+  /** Whether the alert can be dismissed */
+  dismissible?: boolean
+  /** Called when the dismiss button is clicked */
+  onDismiss?: () => void
+  /** Hide the auto-icon */
+  hideIcon?: boolean
+}
+
+const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
+  ({ className, variant = 'default', dismissible = false, onDismiss, hideIcon = false, children, ...props }, ref) => {
+    const Icon = ALERT_ICONS[variant ?? 'default']
+
+    return (
+      <div
+        ref={ref}
+        role="alert"
+        className={cn(alertVariants({ variant }), className)}
+        {...props}
+      >
+        {!hideIcon && <Icon className="h-4 w-4" />}
+        <div>{children}</div>
+        {dismissible && (
+          <button
+            onClick={onDismiss}
+            className="absolute right-3 top-3 rounded p-0.5 opacity-60 hover:opacity-100 transition-opacity"
+            aria-label="Dismiss alert"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        )}
+      </div>
+    )
+  }
+)
+Alert.displayName = 'Alert'
+
+const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h5
+      ref={ref}
+      className={cn('mb-1 font-medium leading-none tracking-tight', className)}
+      {...props}
+    />
+  )
+)
+AlertTitle.displayName = 'AlertTitle'
+
+const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('text-sm [&_p]:leading-relaxed text-muted-foreground', className)}
+      {...props}
+    />
+  )
+)
+AlertDescription.displayName = 'AlertDescription'
+
+export { Alert, AlertTitle, AlertDescription }