\n {/* Header */}\n
\n )\n}\n","'use client'\n\nimport { cn } from '../../utils/cn'\nimport type { StepWizardProps } from './types'\n\nexport function StepWizard({ steps, currentStep, onStepClick, orientation = 'horizontal', className }: StepWizardProps) {\n const progress = steps.filter(s => s.status === 'completed').length / steps.length * 100\n\n if (orientation === 'vertical') {\n return (\n \n
\n\n {/* Steps */}\n \n
\n {title}
\n{completed} / {steps.length} completed
\n\n {/* Progress ring */}\n \n {dismissable && onDismiss && (\n \n )}\n
\n \n {steps.map(step => {\n const isExpanded = expandedId === step.id\n return (\n
\n \n setExpandedId(isExpanded ? null : step.id)}\n className=\"flex items-center gap-3 w-full px-5 py-3 text-left hover:bg-muted/30 transition-colors\"\n >\n
\n )\n })}\n \n \n {step.label}\n \n {step.description && !isExpanded && (\n
\n {(step.children || step.description) && (\n \n )}\n \n {isExpanded && (\n {step.description}
\n )}\n\n {step.description && {\n onStepComplete(step.id)\n if (completed + 1 === steps.length && onAllComplete) onAllComplete()\n }}\n className=\"mt-3 px-4 py-1.5 text-xs font-semibold rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors\"\n >\n Mark Complete\n \n )}\n
\n )}\n {step.description}
}\n {step.children}\n {step.status !== 'completed' && onStepComplete && (\n\n {steps.map((step, i) => (\n
\n )\n }\n\n return (\n \n {/* Connector + dot */}\n
\n ))}\n \n onStepClick?.(i)}\n disabled={!onStepClick}\n className={cn(\n 'flex items-center justify-center w-8 h-8 rounded-full border-2 text-xs font-bold transition-all shrink-0',\n step.status === 'completed' && 'bg-primary/20 border-primary text-primary',\n step.status === 'active' && 'bg-primary border-primary text-primary-foreground',\n step.status === 'error' && 'bg-destructive/20 border-destructive text-destructive',\n step.status === 'pending' && 'border-border text-muted-foreground',\n )}\n >\n {step.status === 'completed' ? (\n \n ) : step.status === 'error' ? '!' : i + 1}\n \n {i < steps.length - 1 && (\n \n )}\n
\n {/* Content */}\n \n
\n \n {step.label}\n
\n {step.description &&{step.description}
}\n\n {/* Progress bar */}\n
\n )\n}\n","'use client'\n\nimport { useState } from 'react'\nimport { cn } from '../../utils/cn'\nimport type { DeployPipelineProps, PipelineStep, PipelineLog } from './types'\n\nfunction StepIcon({ status }: { status: PipelineStep['status'] }) {\n if (status === 'success') return \n if (status === 'error') return \n if (status === 'running') return \n if (status === 'skipped') return \n return \n}\n\nfunction LogLine({ log }: { log: PipelineLog }) {\n const color = {\n info: 'text-muted-foreground', warn: 'text-amber-400', error: 'text-destructive', success: 'text-primary',\n }[log.level]\n return (\n \n \n
\n\n {/* Steps row */}\n \n {steps.map((step, i) => (\n
\n \n onStepClick?.(i)}\n disabled={!onStepClick}\n className={cn(\n 'flex items-center justify-center w-8 h-8 rounded-full border-2 text-xs font-bold transition-all shrink-0',\n step.status === 'completed' && 'bg-primary/20 border-primary text-primary',\n step.status === 'active' && 'bg-primary border-primary text-primary-foreground',\n step.status === 'error' && 'bg-destructive/20 border-destructive text-destructive',\n step.status === 'pending' && 'border-border text-muted-foreground',\n )}\n >\n {step.status === 'completed' ? (\n \n ) : step.status === 'error' ? '!' : i + 1}\n \n \n {step.label}\n \n {i < steps.length - 1 && }\n
\n ))}\n \n {log.timestamp}\n {log.message}\n
\n )\n}\n\nexport function DeployPipeline({ steps, title, onRetry, className }: DeployPipelineProps) {\n const [expandedId, setExpandedId] = useState\n {/* Header */}\n
\n )\n}\n","'use client'\n\nimport { useState } from 'react'\nimport { cn } from '../../utils/cn'\n\nexport interface AccordionSection {\n id: string\n label: string\n description?: string\n status: 'pending' | 'active' | 'completed' | 'error'\n children?: React.ReactNode\n}\n\nexport interface AccordionStatusProps {\n sections: AccordionSection[]\n className?: string\n}\n\nexport function AccordionStatus({ sections, className }: AccordionStatusProps) {\n const [openId, setOpenId] = useState\n
\n\n {/* Overall progress */}\n \n
\n s.status === 'error') ? 'bg-destructive/15 text-destructive' :\n 'bg-muted text-muted-foreground'\n )}>\n {overallProgress === 100 ? 'Complete' : steps.some(s => s.status === 'running') ? 'Running...' : steps.some(s => s.status === 'error') ? 'Failed' : 'Queued'}\n \n {title || 'Pipeline'}
\n{totalDone} / {steps.length} steps complete
\n\n
\n )\n}\n","'use client'\n\nimport { cn } from '../../utils/cn'\nimport type { TimelineProps, TimelineNode } from './types'\n\nfunction NodeDot({ status }: { status: TimelineNode['status'] }) {\n return (\n s.status === 'error') ? 'bg-destructive' : 'bg-primary'\n )} style={{ width: `${overallProgress}%` }} />\n
\n\n {/* Steps */}\n \n {steps.map(step => {\n const isExpanded = expandedId === step.id\n const hasLogs = step.logs && step.logs.length > 0\n return (\n
\n \n setExpandedId(isExpanded ? null : step.id)}\n className=\"flex items-center gap-3 w-full px-5 py-3 text-left hover:bg-muted/20 transition-colors\"\n >\n { e.stopPropagation(); onRetry(step.id) }}\n className=\"px-2 py-1 text-[10px] font-semibold rounded-md bg-destructive/10 border border-destructive/20 text-destructive hover:bg-destructive/20 transition-colors\"\n >\n Retry\n \n )}\n {hasLogs && (\n \n )}\n \n {isExpanded && hasLogs && (\n
\n )\n })}\n \n
\n {step.status === 'error' && onRetry && (\n \n \n {step.label}\n \n {step.duration && {step.duration}}\n
\n {/* Step progress bar */}\n {step.status === 'running' && step.progress !== undefined && (\n \n \n
\n )}\n \n {step.logs!.map((log, i) =>
\n )}\n \n {status === 'completed' && }\n {status === 'active' && }\n {status === 'error' && !}\n
\n )\n}\n\nexport function Timeline({ nodes, className }: TimelineProps) {\n return (\n \n {nodes.map((node, i) => (\n
\n )\n}\n","'use client'\n\nimport { cn } from '../../utils/cn'\nimport type { ActivityFeedProps } from './types'\n\nexport function ActivityFeed({ items, maxItems, title, className }: ActivityFeedProps) {\n const display = maxItems ? items.slice(0, maxItems) : items\n\n return (\n \n {/* Vertical line */}\n {i < nodes.length - 1 && (\n \n )}\n
\n ))}\n \n
\n \n {node.label}\n
\n {node.description &&{node.description}
}\n {node.timestamp && {node.timestamp}}\n\n {title && (\n
\n \n
\n )}\n {title}
\n\n {display.map((item, i) => (\n
\n ))}\n {items.length === 0 && (\n \n {/* Avatar */}\n \n {item.actor.avatar ? (\n 
\n ) : (\n item.actor.name.charAt(0).toUpperCase()\n )}\n
\n {/* Content */}\n \n
\n {/* Connector dot */}\n {i < display.length - 1 && (\n \n )}\n \n {item.actor.name}\n {item.action}\n {item.target && {item.target}}\n
\n {item.timestamp}\nNo activity yet
\n )}\n \n {sections.map(section => {\n const isOpen = openId === section.id\n return (\n
\n )\n}\n","'use client'\n\nimport { cn } from '../../utils/cn'\n\nexport interface ProgressStep {\n id: string\n label: string\n description?: string\n status: 'pending' | 'active' | 'completed'\n}\n\nexport interface StepsWithProgressProps {\n steps: ProgressStep[]\n title?: string\n helpText?: string\n className?: string\n onStepClick?: (id: string) => void\n}\n\nexport function StepsWithProgress({ steps, title, helpText, className, onStepClick }: StepsWithProgressProps) {\n const completed = steps.filter(s => s.status === 'completed').length\n const progress = steps.length > 0 ? (completed / steps.length) * 100 : 0\n\n return (\n \n setOpenId(isOpen ? null : section.id)}\n className=\"flex items-center gap-3 w-full px-5 py-4 text-left hover:bg-muted/20 transition-colors\"\n >\n
\n )\n })}\n \n {section.status === 'completed' && }\n {section.status === 'active' && }\n
\n \n {section.label}\n {section.description && !isOpen &&
\n \n \n {isOpen && (\n {section.description}
}\n\n {section.description &&
\n )}\n {section.description}
}\n {section.children}\n\n {/* Header + progress bar */}\n
\n )\n}\n","'use client'\n\nimport { cn } from '../../utils/cn'\n\nexport interface SetupStep {\n id: string\n label: string\n description: string\n status: 'pending' | 'active' | 'completed'\n action?: { label: string; onClick: () => void }\n icon?: React.ReactNode\n}\n\nexport interface WorkspaceSetupProps {\n title?: string\n steps: SetupStep[]\n className?: string\n}\n\nexport function WorkspaceSetup({ title, steps, className }: WorkspaceSetupProps) {\n const completed = steps.filter(s => s.status === 'completed').length\n const progress = steps.length > 0 ? (completed / steps.length) * 100 : 0\n\n return (\n \n {title &&
\n\n {/* Steps list */}\n {title}
}\n\n
\n \n \n
\n {completed}/{steps.length}\n \n {steps.map((step, i) => (\n onStepClick?.(step.id)}\n disabled={!onStepClick}\n className=\"flex items-center gap-3 w-full px-5 py-3 text-left hover:bg-muted/20 transition-colors\"\n >\n
\n\n {/* Help footer */}\n {helpText && (\n \n {step.status === 'completed' ? (\n \n ) : i + 1}\n
\n \n {step.label}\n {step.description &&
\n \n ))}\n {step.description}
}\n\n
\n )}\n {helpText}
\n\n {/* Header */}\n
\n \n )\n}\n"]}\n
\n\n {/* Step cards */}\n \n
\n {title || 'Setup'}
\n {completed} of {steps.length} complete\n\n \n
\n \n {steps.map((step, i) => (\n \n
\n ))}\n \n {/* Number badge */}\n
\n \n {step.status === 'completed' ? (\n \n ) : i + 1}\n
\n \n \n {step.action.label}\n \n )}\n
\n \n {step.label}\n
\n{step.description}
\n {step.status === 'active' && step.action && (\n