The New Archon (Beta) - The Operating System for AI Coding Assistants!

archon-ui-main/src/components/prp/renderers/SectionRenderer.tsx

@@ -0,0 +1,141 @@
+import React from 'react';
+import { 
+  Brain, Users, Workflow, BarChart3, Clock, Shield, 
+  Code, Layers, FileText, List, Hash, Box 
+} from 'lucide-react';
+import { detectSectionType, formatSectionTitle } from '../utils/sectionDetector';
+import { getAccentColor } from '../utils/formatters';
+
+// Import all section components
+import { ContextSection } from '../sections/ContextSection';
+import { PersonaSection } from '../sections/PersonaSection';
+import { FlowSection } from '../sections/FlowSection';
+import { MetricsSection } from '../sections/MetricsSection';
+import { PlanSection } from '../sections/PlanSection';
+import { ListSection } from '../sections/ListSection';
+import { ObjectSection } from '../sections/ObjectSection';
+import { KeyValueSection } from '../sections/KeyValueSection';
+import { FeatureSection } from '../sections/FeatureSection';
+import { GenericSection } from '../sections/GenericSection';
+import { RolloutPlanSection } from '../sections/RolloutPlanSection';
+import { TokenSystemSection } from '../sections/TokenSystemSection';
+
+interface SectionRendererProps {
+  sectionKey: string;
+  data: any;
+  index: number;
+  isDarkMode?: boolean;
+  sectionOverrides?: Record<string, React.ComponentType<any>>;
+}
+
+/**
+ * Dynamically renders sections based on their type
+ */
+export const SectionRenderer: React.FC<SectionRendererProps> = ({
+  sectionKey,
+  data,
+  index,
+  isDarkMode = false,
+  sectionOverrides = {},
+}) => {
+  // Skip metadata fields (handled by MetadataSection)
+  const metadataFields = ['title', 'version', 'author', 'date', 'status', 'document_type'];
+  if (metadataFields.includes(sectionKey)) {
+    return null;
+  }
+  
+  // Check for custom override first
+  if (sectionOverrides[sectionKey]) {
+    const CustomComponent = sectionOverrides[sectionKey];
+    return <CustomComponent data={data} title={formatSectionTitle(sectionKey)} />;
+  }
+  
+  // Detect section type
+  const { type } = detectSectionType(sectionKey, data);
+  
+  // Get appropriate icon based on section key
+  const getIcon = () => {
+    const normalizedKey = sectionKey.toLowerCase();
+    if (normalizedKey.includes('context') || normalizedKey.includes('overview')) return <Brain className="w-5 h-5" />;
+    if (normalizedKey.includes('persona') || normalizedKey.includes('user')) return <Users className="w-5 h-5" />;
+    if (normalizedKey.includes('flow') || normalizedKey.includes('journey')) return <Workflow className="w-5 h-5" />;
+    if (normalizedKey.includes('metric') || normalizedKey.includes('success')) return <BarChart3 className="w-5 h-5" />;
+    if (normalizedKey.includes('plan') || normalizedKey.includes('implementation')) return <Clock className="w-5 h-5" />;
+    if (normalizedKey.includes('validation') || normalizedKey.includes('gate')) return <Shield className="w-5 h-5" />;
+    if (normalizedKey.includes('technical') || normalizedKey.includes('tech')) return <Code className="w-5 h-5" />;
+    if (normalizedKey.includes('architecture')) return <Layers className="w-5 h-5" />;
+    if (Array.isArray(data)) return <List className="w-5 h-5" />;
+    if (typeof data === 'object') return <Box className="w-5 h-5" />;
+    return <FileText className="w-5 h-5" />;
+  };
+  
+  // Get accent color based on section or index
+  const getColor = () => {
+    const normalizedKey = sectionKey.toLowerCase();
+    if (normalizedKey.includes('context')) return 'blue';
+    if (normalizedKey.includes('persona')) return 'purple';
+    if (normalizedKey.includes('flow') || normalizedKey.includes('journey')) return 'orange';
+    if (normalizedKey.includes('metric')) return 'green';
+    if (normalizedKey.includes('plan')) return 'cyan';
+    if (normalizedKey.includes('validation')) return 'emerald';
+    return getAccentColor(index);
+  };
+  
+  const commonProps = {
+    title: formatSectionTitle(sectionKey),
+    data,
+    icon: getIcon(),
+    accentColor: getColor(),
+    isDarkMode,
+    defaultOpen: index < 5, // Open first 5 sections by default
+    isCollapsible: true, // Make all sections collapsible by default
+  };
+  
+  // Check for specific section types by key name first
+  const normalizedKey = sectionKey.toLowerCase();
+  
+  // Special handling for rollout plans
+  if (normalizedKey.includes('rollout') || normalizedKey === 'rollout_plan') {
+    return <RolloutPlanSection {...commonProps} />;
+  }
+  
+  // Special handling for token systems
+  if (normalizedKey.includes('token') || normalizedKey === 'token_system' || 
+      normalizedKey === 'design_tokens' || normalizedKey === 'design_system') {
+    return <TokenSystemSection {...commonProps} />;
+  }
+  
+  // Render based on detected type
+  switch (type) {
+    case 'context':
+      return <ContextSection {...commonProps} />;
+      
+    case 'personas':
+      return <PersonaSection {...commonProps} />;
+      
+    case 'flows':
+      return <FlowSection {...commonProps} />;
+      
+    case 'metrics':
+      return <MetricsSection {...commonProps} />;
+      
+    case 'plan':
+      return <PlanSection {...commonProps} />;
+      
+    case 'list':
+      return <ListSection {...commonProps} />;
+      
+    case 'keyvalue':
+      return <KeyValueSection {...commonProps} />;
+      
+    case 'object':
+      return <ObjectSection {...commonProps} />;
+      
+    case 'features':
+      return <FeatureSection {...commonProps} />;
+      
+    case 'generic':
+    default:
+      return <GenericSection {...commonProps} />;
+  }
+};