mycontext-cli 0.1.0

package/dist/cli/src/agents/implementations/CodeGenSubAgent.js

@@ -0,0 +1,1440 @@
+"use strict";
+/**
+ * CodeGenSubAgent Implementation
+ *
+ * Specialized sub-agent for generating production-ready React components and TypeScript code.
+ * Uses Claude Code for optimal code generation capabilities.
+ * Enhanced with shadcn/ui primitives and modern React patterns for Next.js 14+.
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodeGenSubAgent = void 0;
+const definitions_1 = require("../personalities/definitions");
+const generate_components_1 = require("../../commands/generate-components");
+// shadcn/ui component mapping for intelligent imports
+const SHADCN_COMPONENTS = {
+    // Layout & Structure
+    layout: ["Card", "Separator", "AspectRatio"],
+    form: [
+        "Button",
+        "Input",
+        "Label",
+        "Form",
+        "Select",
+        "Checkbox",
+        "RadioGroup",
+        "Textarea",
+        "Switch",
+    ],
+    navigation: ["NavigationMenu", "Breadcrumb", "Pagination", "Tabs"],
+    feedback: ["Alert", "AlertDialog", "Dialog", "Toast", "Progress", "Skeleton"],
+    data: ["Table", "DataTable", "Command", "Combobox"],
+    overlay: ["Popover", "HoverCard", "Tooltip", "Sheet", "Drawer"],
+    media: ["Avatar", "Badge", "Calendar", "Carousel"],
+    utility: [
+        "ScrollArea",
+        "Resizable",
+        "Collapsible",
+        "Accordion",
+        "ContextMenu",
+        "Menubar",
+        "DropdownMenu",
+        "Toggle",
+        "ToggleGroup",
+        "Slider",
+        "Sonner",
+    ],
+};
+class CodeGenSubAgent {
+    constructor() {
+        this.name = "CodeGenSubAgent";
+        this.description = "Expert React/TypeScript developer specializing in production-ready Next.js 14+ components with shadcn/ui";
+        const personality = (0, definitions_1.getSubAgentPersonality)(this.name);
+        if (!personality) {
+            throw new Error(`Personality not found for ${this.name}`);
+        }
+        this.personality = personality.personality;
+        this.llmProvider = personality.llmProvider;
+        this.expertise = personality.expertise;
+    }
+    async run(input) {
+        const { component, group, options, context } = input;
+        // Use the existing GenerateComponentsCommand logic
+        const generateCommand = new generate_components_1.GenerateComponentsCommand();
+        // Handle both string and object inputs
+        let componentName;
+        if (typeof component === "string") {
+            componentName = component;
+        }
+        else {
+            componentName = component.name;
+        }
+        // Generate the component code using the enhanced method
+        const code = await this.generateProductionReadyComponent(component, group, options);
+        // Calculate metadata
+        const estimatedLines = code.split("\n").length;
+        const dependencies = this.extractDependencies(code);
+        const shadcnComponents = this.extractShadcnComponents(code);
+        return {
+            code,
+            metadata: {
+                componentName,
+                group,
+                dependencies,
+                estimatedLines,
+                shadcnComponents,
+                qualityScore: this.calculateQualityScore(code),
+            },
+        };
+    }
+    async validate(input) {
+        // Handle both structured component objects and simple string descriptions
+        if (typeof input.component === "string") {
+            // Simple string input - just need the string and group
+            return !!(input.component && input.group);
+        }
+        else {
+            // Structured component object - validate all required fields
+            if (!input.component || !input.component.name) {
+                return false;
+            }
+            if (!input.group) {
+                return false;
+            }
+            // For structured input, require type and userStories
+            if (!input.component.type || !input.component.userStories) {
+                return false;
+            }
+        }
+        return true;
+    }
+    async getStatus() {
+        return {
+            name: this.name,
+            status: "idle",
+            errorCount: 0,
+            successCount: 0,
+        };
+    }
+    async generateProductionReadyComponent(component, group, options) {
+        // Check if X.AI should be used for generation
+        if (options?.useXAI) {
+            return await this.generateWithXAI(component, group, options);
+        }
+        // Handle both string and object inputs
+        let name, description, type, userStories, actionFunctions, dependencies, tags;
+        if (typeof component === "string") {
+            // Simple string input - create a basic component structure
+            name = this.generateComponentName(component);
+            description = component;
+            type = "form"; // Default type
+            userStories = [
+                `As a user, I want to use ${name} to ${component.toLowerCase()}`,
+            ];
+            actionFunctions = ["handleSubmit", "handleChange"];
+            dependencies = ["react", "tailwindcss"];
+            tags = ["ui", "component"];
+        }
+        else {
+            // Structured component object
+            ({
+                name,
+                description,
+                type,
+                userStories,
+                actionFunctions,
+                dependencies,
+                tags,
+            } = component);
+        }
+        // Determine shadcn/ui components to import based on type
+        const shadcnImports = this.getShadcnImportsForType(type);
+        const customImports = this.getCustomImportsForType(type);
+        const reactImports = this.getReactImportsForType(type);
+        return `"use client";
+
+import React${reactImports.length > 0 ? `, { ${reactImports.join(", ")} }` : ""} from "react";
+import { cn } from "@/lib/utils";
+${shadcnImports
+            .map((imp) => `import { ${imp} } from "@/components/ui/${imp.toLowerCase()}";`)
+            .join("\n")}
+${customImports.length > 0 ? customImports.join("\n") : ""}
+
+/**
+ * ${name} Component
+ * 
+ * ${description}
+ * 
+ * User Stories:
+${userStories.map((story) => ` * - ${story}`).join("\n")}
+ * 
+ * @component
+ * @example
+ * \`\`\`tsx
+ * <${name} 
+ *   className="custom-styles"
+ *   ${this.generateExampleProps(type)}
+ * />
+ * \`\`\`
+ */
+
+${this.generateTypeDefinitions(type, name)}
+
+export interface ${name}Props {
+  /** Additional CSS classes */
+  className?: string;
+  ${this.generateDetailedPropsForType(type)}
+}
+
+/**
+ * ${name} - ${description}
+ * 
+ * @param props - Component props
+ * @returns Production-ready ${type} component
+ */
+export function ${name}({ 
+  className,
+  ${this.generateEnhancedPropsDestructuring(type)}
+  ...props 
+}: ${name}Props) {
+  ${this.generateProductionComponentLogic(type, actionFunctions, name)}
+
+  return (
+    ${this.generateAccessibleComponentJSX(type, name, shadcnImports)}
+  );
+}
+
+${this.generateProductionActionFunctions(actionFunctions, name, type)}
+
+export default ${name};
+`;
+    }
+    getReactImportsForType(type) {
+        const imports = [];
+        switch (type) {
+            case "form":
+                imports.push("useState", "useCallback", "useMemo");
+                break;
+            case "layout":
+                imports.push("ReactNode", "FC");
+                break;
+            case "data":
+                imports.push("useState", "useEffect", "useMemo");
+                break;
+            case "navigation":
+                imports.push("useState", "useEffect");
+                break;
+            case "feedback":
+                imports.push("useState", "useEffect");
+                break;
+            default:
+                imports.push("useState");
+        }
+        return [...new Set(imports)];
+    }
+    getShadcnImportsForType(type) {
+        const imports = [];
+        switch (type) {
+            case "form":
+                imports.push("Button", "Input", "Label", "Form", "FormControl", "FormField", "FormItem", "FormLabel", "FormMessage", "Select", "SelectContent", "SelectItem", "SelectTrigger", "SelectValue", "Checkbox", "Alert", "AlertDescription");
+                break;
+            case "layout":
+                imports.push("Card", "CardContent", "CardDescription", "CardHeader", "CardTitle", "Separator");
+                break;
+            case "card":
+                imports.push("Card", "CardContent", "CardDescription", "CardHeader", "CardTitle", "CardFooter", "Button");
+                break;
+            case "button":
+                imports.push("Button");
+                break;
+            case "navigation":
+                imports.push("NavigationMenu", "NavigationMenuContent", "NavigationMenuItem", "NavigationMenuLink", "NavigationMenuList", "NavigationMenuTrigger", "Breadcrumb", "BreadcrumbItem", "BreadcrumbLink", "BreadcrumbList", "BreadcrumbSeparator", "Tabs", "TabsContent", "TabsList", "TabsTrigger");
+                break;
+            case "feedback":
+                imports.push("Alert", "AlertDescription", "AlertTitle", "Dialog", "DialogContent", "DialogDescription", "DialogHeader", "DialogTitle", "DialogTrigger", "Toast", "Progress");
+                break;
+            case "data":
+                imports.push("Table", "TableBody", "TableCell", "TableHead", "TableHeader", "TableRow", "Command", "CommandEmpty", "CommandGroup", "CommandInput", "CommandItem", "CommandList");
+                break;
+            case "overlay":
+                imports.push("Popover", "PopoverContent", "PopoverTrigger", "Tooltip", "TooltipContent", "TooltipProvider", "TooltipTrigger", "Sheet", "SheetContent", "SheetDescription", "SheetHeader", "SheetTitle", "SheetTrigger");
+                break;
+            case "media":
+                imports.push("Avatar", "AvatarFallback", "AvatarImage", "Badge");
+                break;
+            default:
+                imports.push("Card", "CardContent", "CardHeader", "CardTitle", "Button");
+        }
+        return [...new Set(imports)];
+    }
+    getCustomImportsForType(type) {
+        const imports = [];
+        if (type === "form") {
+            imports.push('import { useForm } from "react-hook-form";');
+            imports.push('import { zodResolver } from "@hookform/resolvers/zod";');
+            imports.push('import * as z from "zod";');
+        }
+        if (type === "navigation") {
+            imports.push('import Link from "next/link";');
+            imports.push('import { usePathname } from "next/navigation";');
+        }
+        if (type === "data") {
+            imports.push('import { useMemo } from "react";');
+        }
+        return imports;
+    }
+    generateTypeDefinitions(type, name) {
+        switch (type) {
+            case "form":
+                return `
+/** Form data schema */
+export const ${name.toLowerCase()}Schema = z.object({
+  email: z.string().email("Please enter a valid email address"),
+  password: z.string().min(8, "Password must be at least 8 characters long"),
+  confirmPassword: z.string().optional(),
+}).refine((data) => {
+  if (data.confirmPassword !== undefined) {
+    return data.password === data.confirmPassword;
+  }
+  return true;
+}, {
+  message: "Passwords don't match",
+  path: ["confirmPassword"],
+});
+
+/** Inferred form data type */
+export type ${name}FormData = z.infer<typeof ${name.toLowerCase()}Schema>;
+
+/** Form submission result */
+export interface ${name}SubmissionResult {
+  success: boolean;
+  message?: string;
+  errors?: Record<string, string>;
+}`;
+            case "navigation":
+                return `
+/** Navigation item interface */
+export interface NavigationItem {
+  /** Display label */
+  label: string;
+  /** Route path */
+  href: string;
+  /** Optional icon component */
+  icon?: React.ComponentType<{ className?: string }>;
+  /** Whether the item is disabled */
+  disabled?: boolean;
+  /** Nested items for dropdowns */
+  children?: NavigationItem[];
+}`;
+            case "data":
+                return `
+/** Generic data row interface */
+export interface DataRow {
+  id: string | number;
+  [key: string]: any;
+}
+
+/** Column definition */
+export interface ColumnDef<T = DataRow> {
+  /** Column key */
+  key: keyof T;
+  /** Display label */
+  label: string;
+  /** Custom render function */
+  render?: (value: any, row: T) => React.ReactNode;
+  /** Whether column is sortable */
+  sortable?: boolean;
+  /** Column width */
+  width?: string;
+}
+
+/** Sort configuration */
+export interface SortConfig {
+  key: keyof DataRow;
+  direction: "asc" | "desc";
+}`;
+            default:
+                return "";
+        }
+    }
+    generateDetailedPropsForType(type) {
+        switch (type) {
+            case "form":
+                return `
+  /** Form submission handler */
+  onSubmit?: (data: ${type}FormData) => Promise<${type}SubmissionResult> | ${type}SubmissionResult;
+  /** Loading state */
+  loading?: boolean;
+  /** Error message */
+  error?: string;
+  /** Form variant */
+  variant?: "default" | "login" | "signup" | "contact";
+  /** Initial form values */
+  defaultValues?: Partial<${type}FormData>;
+  /** Whether to show password confirmation field */
+  showConfirmPassword?: boolean;
+  /** Custom validation rules */
+  validationRules?: Partial<Record<keyof ${type}FormData, z.ZodSchema>>;`;
+            case "layout":
+                return `
+  /** Main content */
+  children: React.ReactNode;
+  /** Sidebar content */
+  sidebar?: React.ReactNode;
+  /** Header content */
+  header?: React.ReactNode;
+  /** Footer content */
+  footer?: React.ReactNode;
+  /** Layout variant */
+  variant?: "default" | "sidebar" | "centered" | "fullscreen";
+  /** Whether sidebar is collapsible */
+  collapsibleSidebar?: boolean;
+  /** Sidebar initial state */
+  sidebarDefaultOpen?: boolean;`;
+            case "card":
+                return `
+  /** Card title */
+  title?: string;
+  /** Card description */
+  description?: string;
+  /** Card content */
+  content?: React.ReactNode;
+  /** Card footer actions */
+  actions?: React.ReactNode;
+  /** Card variant */
+  variant?: "default" | "elevated" | "outlined" | "ghost";
+  /** Whether card is interactive */
+  interactive?: boolean;
+  /** Click handler for interactive cards */
+  onClick?: () => void;
+  /** Card size */
+  size?: "sm" | "default" | "lg";`;
+            case "button":
+                return `
+  /** Button variant */
+  variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+  /** Button size */
+  size?: "default" | "sm" | "lg" | "icon";
+  /** Whether button is disabled */
+  disabled?: boolean;
+  /** Loading state */
+  loading?: boolean;
+  /** Click handler */
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  /** Button content */
+  children: React.ReactNode;
+  /** Button type */
+  type?: "button" | "submit" | "reset";
+  /** ARIA label for accessibility */
+  "aria-label"?: string;`;
+            case "navigation":
+                return `
+  /** Navigation items */
+  items: NavigationItem[];
+  /** Currently active item path */
+  activeItem?: string;
+  /** Navigation orientation */
+  orientation?: "horizontal" | "vertical";
+  /** Whether to show icons */
+  showIcons?: boolean;
+  /** Custom item renderer */
+  renderItem?: (item: NavigationItem, isActive: boolean) => React.ReactNode;
+  /** Navigation variant */
+  variant?: "default" | "pills" | "underline";`;
+            case "feedback":
+                return `
+  /** Alert title */
+  title?: string;
+  /** Alert message */
+  message?: string;
+  /** Alert variant */
+  variant?: "default" | "destructive" | "success" | "warning";
+  /** Close handler */
+  onClose?: () => void;
+  /** Whether alert is dismissible */
+  dismissible?: boolean;
+  /** Auto-dismiss timeout in milliseconds */
+  autoDissmissAfter?: number;
+  /** Custom icon */
+  icon?: React.ReactNode;`;
+            case "data":
+                return `
+  /** Table data */
+  data: DataRow[];
+  /** Column definitions */
+  columns: ColumnDef[];
+  /** Whether table is loading */
+  loading?: boolean;
+  /** Whether to show pagination */
+  pagination?: boolean;
+  /** Items per page */
+  pageSize?: number;
+  /** Sort configuration */
+  sortable?: boolean;
+  /** Initial sort */
+  defaultSort?: SortConfig;
+  /** Row selection handler */
+  onRowSelect?: (selectedRows: DataRow[]) => void;
+  /** Empty state message */
+  emptyMessage?: string;
+  /** Custom row renderer */
+  renderRow?: (row: DataRow, index: number) => React.ReactNode;`;
+            default:
+                return `
+  /** Component children */
+  children?: React.ReactNode;
+  /** Component variant */
+  variant?: "default";`;
+        }
+    }
+    generateExampleProps(type) {
+        switch (type) {
+            case "form":
+                return `onSubmit={handleSubmit}\n *   loading={false}\n *   variant="default"`;
+            case "layout":
+                return `variant="sidebar"\n *   header={<Header />}\n *   sidebar={<Sidebar />}`;
+            case "card":
+                return `title="Card Title"\n *   variant="elevated"\n *   interactive`;
+            case "button":
+                return `variant="default"\n *   size="lg"\n *   onClick={handleClick}`;
+            case "navigation":
+                return `items={navigationItems}\n *   variant="pills"\n *   orientation="horizontal"`;
+            case "feedback":
+                return `variant="success"\n *   title="Success"\n *   dismissible`;
+            case "data":
+                return `data={tableData}\n *   columns={columns}\n *   pagination`;
+            default:
+                return `variant="default"`;
+        }
+    }
+    generateEnhancedPropsDestructuring(type) {
+        switch (type) {
+            case "form":
+                return `
+  onSubmit,
+  loading = false,
+  error,
+  variant = "default",
+  defaultValues,
+  showConfirmPassword = false,
+  validationRules,`;
+            case "layout":
+                return `
+  children,
+  sidebar,
+  header,
+  footer,
+  variant = "default",
+  collapsibleSidebar = false,
+  sidebarDefaultOpen = true,`;
+            case "card":
+                return `
+  title,
+  description,
+  content,
+  actions,
+  variant = "default",
+  interactive = false,
+  onClick,
+  size = "default",`;
+            case "button":
+                return `
+  variant = "default",
+  size = "default",
+  disabled = false,
+  loading = false,
+  onClick,
+  children,
+  type = "button",
+  "aria-label": ariaLabel,`;
+            case "navigation":
+                return `
+  items,
+  activeItem,
+  orientation = "horizontal",
+  showIcons = true,
+  renderItem,
+  variant = "default",`;
+            case "feedback":
+                return `
+  title,
+  message,
+  variant = "default",
+  onClose,
+  dismissible = false,
+  autoDissmissAfter,
+  icon,`;
+            case "data":
+                return `
+  data,
+  columns,
+  loading = false,
+  pagination = false,
+  pageSize = 10,
+  sortable = false,
+  defaultSort,
+  onRowSelect,
+  emptyMessage = "No data available",
+  renderRow,`;
+            default:
+                return `
+  children,
+  variant = "default",`;
+        }
+    }
+    generateProductionComponentLogic(type, actionFunctions, componentName) {
+        const logic = [];
+        if (type === "form") {
+            logic.push(`
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  
+  const form = useForm<${componentName}FormData>({
+    resolver: zodResolver(${componentName.toLowerCase()}Schema),
+    defaultValues: defaultValues || {
+      email: "",
+      password: "",
+      ...(showConfirmPassword && { confirmPassword: "" }),
+    },
+  });
+
+  const handleFormSubmit = useCallback(async (values: ${componentName}FormData) => {
+    if (!onSubmit) return;
+    
+    setIsSubmitting(true);
+    try {
+      const result = await onSubmit(values);
+      if (result.success) {
+        form.reset();
+      } else if (result.errors) {
+        Object.entries(result.errors).forEach(([field, message]) => {
+          form.setError(field as keyof ${componentName}FormData, { message });
+        });
+      }
+    } catch (error) {
+      console.error("Form submission error:", error);
+      form.setError("root", { message: "An unexpected error occurred" });
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [onSubmit, form]);`);
+        }
+        if (type === "navigation") {
+            logic.push(`
+  const pathname = usePathname();
+  const [openDropdowns, setOpenDropdowns] = useState<Set<string>>(new Set());
+  
+  const currentActiveItem = useMemo(() => {
+    return activeItem || pathname;
+  }, [activeItem, pathname]);
+
+  const toggleDropdown = useCallback((itemLabel: string) => {
+    setOpenDropdowns(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(itemLabel)) {
+        newSet.delete(itemLabel);
+      } else {
+        newSet.add(itemLabel);
+      }
+      return newSet;
+    });
+  }, []);`);
+        }
+        if (type === "data") {
+            logic.push(`
+  const [currentPage, setCurrentPage] = useState(1);
+  const [sortConfig, setSortConfig] = useState<SortConfig | null>(defaultSort || null);
+  const [selectedRows, setSelectedRows] = useState<Set<string | number>>(new Set());
+
+  const sortedData = useMemo(() => {
+    if (!sortConfig) return data;
+    
+    return [...data].sort((a, b) => {
+      const aValue = a[sortConfig.key];
+      const bValue = b[sortConfig.key];
+      
+      if (aValue < bValue) return sortConfig.direction === "asc" ? -1 : 1;
+      if (aValue > bValue) return sortConfig.direction === "asc" ? 1 : -1;
+      return 0;
+    });
+  }, [data, sortConfig]);
+
+  const paginatedData = useMemo(() => {
+    if (!pagination) return sortedData;
+    
+    const startIndex = (currentPage - 1) * pageSize;
+    return sortedData.slice(startIndex, startIndex + pageSize);
+  }, [sortedData, pagination, currentPage, pageSize]);
+
+  const handleSort = useCallback((key: keyof DataRow) => {
+    if (!sortable) return;
+    
+    setSortConfig(prevSort => {
+      if (prevSort?.key === key) {
+        return {
+          key,
+          direction: prevSort.direction === "asc" ? "desc" : "asc"
+        };
+      }
+      return { key, direction: "asc" };
+    });
+  }, [sortable]);
+
+  const handleRowSelection = useCallback((rowId: string | number) => {
+    setSelectedRows(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(rowId)) {
+        newSet.delete(rowId);
+      } else {
+        newSet.add(rowId);
+      }
+      
+      if (onRowSelect) {
+        const selectedData = data.filter(row => newSet.has(row.id));
+        onRowSelect(selectedData);
+      }
+      
+      return newSet;
+    });
+  }, [data, onRowSelect]);`);
+        }
+        if (type === "feedback" && logic.length === 0) {
+            logic.push(`
+  useEffect(() => {
+    if (autoDissmissAfter && onClose) {
+      const timer = setTimeout(onClose, autoDissmissAfter);
+      return () => clearTimeout(timer);
+    }
+  }, [autoDissmissAfter, onClose]);`);
+        }
+        return logic.join("\n");
+    }
+    generateAccessibleComponentJSX(type, name, shadcnImports) {
+        switch (type) {
+            case "form":
+                return `<Form {...form}>
+      <form 
+        onSubmit={form.handleSubmit(handleFormSubmit)} 
+        className={cn("space-y-6", className)} 
+        noValidate
+        {...props}
+      >
+        <FormField
+          control={form.control}
+          name="email"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Email Address</FormLabel>
+              <FormControl>
+                <Input
+                  type="email"
+                  placeholder="Enter your email address"
+                  autoComplete="email"
+                  aria-describedby="email-error"
+                  {...field}
+                />
+              </FormControl>
+              <FormMessage id="email-error" />
+            </FormItem>
+          )}
+        />
+        
+        <FormField
+          control={form.control}
+          name="password"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Password</FormLabel>
+              <FormControl>
+                <Input
+                  type="password"
+                  placeholder="Enter your password"
+                  autoComplete="current-password"
+                  aria-describedby="password-error"
+                  {...field}
+                />
+              </FormControl>
+              <FormMessage id="password-error" />
+            </FormItem>
+          )}
+        />
+        
+        {showConfirmPassword && (
+          <FormField
+            control={form.control}
+            name="confirmPassword"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Confirm Password</FormLabel>
+                <FormControl>
+                  <Input
+                    type="password"
+                    placeholder="Confirm your password"
+                    autoComplete="new-password"
+                    aria-describedby="confirm-password-error"
+                    {...field}
+                  />
+                </FormControl>
+                <FormMessage id="confirm-password-error" />
+              </FormItem>
+            )}
+          />
+        )}
+        
+        {error && (
+          <Alert variant="destructive">
+            <AlertDescription>{error}</AlertDescription>
+          </Alert>
+        )}
+        
+        {form.formState.errors.root && (
+          <Alert variant="destructive">
+            <AlertDescription>{form.formState.errors.root.message}</AlertDescription>
+          </Alert>
+        )}
+        
+        <Button
+          type="submit"
+          disabled={loading || isSubmitting}
+          className="w-full"
+          aria-describedby={loading || isSubmitting ? "submit-loading" : undefined}
+        >
+          {loading || isSubmitting ? (
+            <>
+              <span className="sr-only" id="submit-loading">Loading...</span>
+              <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2" />
+              Submitting...
+            </>
+          ) : (
+            "Submit"
+          )}
+        </Button>
+      </form>
+    </Form>`;
+            case "layout":
+                return `<div className={cn("min-h-screen flex flex-col", className)} {...props}>
+      {header && (
+        <header 
+          className="border-b bg-background sticky top-0 z-40"
+          role="banner"
+        >
+          <div className="container mx-auto px-4 py-4">
+            {header}
+          </div>
+        </header>
+      )}
+      
+      <div className="flex-1 flex">
+        {sidebar && (
+          <aside 
+            className={cn(
+              "border-r bg-background",
+              variant === "sidebar" ? "w-64" : "w-auto"
+            )}
+            role="complementary"
+            aria-label="Sidebar navigation"
+          >
+            <div className="p-4">
+              {sidebar}
+            </div>
+          </aside>
+        )}
+        
+        <main 
+          className="flex-1 focus:outline-none" 
+          role="main"
+          tabIndex={-1}
+        >
+          <div className={cn(
+            "container mx-auto px-4 py-8",
+            variant === "centered" && "max-w-4xl",
+            variant === "fullscreen" && "max-w-none px-0 py-0"
+          )}>
+            {children}
+          </div>
+        </main>
+      </div>
+      
+      {footer && (
+        <footer 
+          className="border-t bg-background"
+          role="contentinfo"
+        >
+          <div className="container mx-auto px-4 py-4 text-center text-sm text-muted-foreground">
+            {footer}
+          </div>
+        </footer>
+      )}
+    </div>`;
+            case "card":
+                return `<Card 
+      className={cn(
+        "transition-all duration-200",
+        variant === "elevated" && "shadow-lg hover:shadow-xl",
+        variant === "outlined" && "border-2",
+        variant === "ghost" && "border-none shadow-none",
+        interactive && "cursor-pointer hover:bg-accent/50",
+        size === "sm" && "p-4",
+        size === "lg" && "p-8",
+        className
+      )} 
+      onClick={interactive ? onClick : undefined}
+      role={interactive ? "button" : undefined}
+      tabIndex={interactive ? 0 : undefined}
+      onKeyDown={interactive ? (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onClick?.();
+        }
+      } : undefined}
+      {...props}
+    >
+      {(title || description) && (
+        <CardHeader className={size === "sm" ? "pb-3" : undefined}>
+          {title && (
+            <CardTitle className={size === "sm" ? "text-base" : "text-lg"}>
+              {title}
+            </CardTitle>
+          )}
+          {description && (
+            <CardDescription>{description}</CardDescription>
+          )}
+        </CardHeader>
+      )}
+      
+      {content && (
+        <CardContent className={cn(
+          size === "sm" && "pt-0 pb-3",
+          !title && !description && "pt-6"
+        )}>
+          {content}
+        </CardContent>
+      )}
+      
+      {actions && (
+        <CardFooter className={cn(
+          "flex justify-end space-x-2",
+          size === "sm" && "pt-0"
+        )}>
+          {actions}
+        </CardFooter>
+      )}
+    </Card>`;
+            case "button":
+                return `<Button
+      variant={variant}
+      size={size}
+      disabled={disabled || loading}
+      onClick={onClick}
+      type={type}
+      className={cn(loading && "cursor-wait", className)}
+      aria-label={ariaLabel}
+      aria-disabled={disabled || loading}
+      {...props}
+    >
+      {loading ? (
+        <>
+          <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-current mr-2" />
+          <span className="sr-only">Loading...</span>
+          Loading...
+        </>
+      ) : (
+        children
+      )}
+    </Button>`;
+            case "navigation":
+                return `<NavigationMenu 
+      className={cn("", className)} 
+      orientation={orientation}
+      {...props}
+    >
+      <NavigationMenuList className={cn(
+        orientation === "vertical" && "flex-col space-x-0 space-y-1"
+      )}>
+        {items.map((item, index) => (
+          <NavigationMenuItem key={item.href || index}>
+            {item.children ? (
+              <>
+                <NavigationMenuTrigger 
+                  className={cn(
+                    variant === "pills" && "rounded-full",
+                    variant === "underline" && "border-b-2 border-transparent data-[state=open]:border-primary"
+                  )}
+                  onClick={() => toggleDropdown(item.label)}
+                  aria-expanded={openDropdowns.has(item.label)}
+                >
+                  {showIcons && item.icon && (
+                    <item.icon className="w-4 h-4 mr-2" />
+                  )}
+                  {item.label}
+                </NavigationMenuTrigger>
+                <NavigationMenuContent>
+                  <div className="grid gap-3 p-4 w-[400px]">
+                    {item.children.map((child, childIndex) => (
+                      <NavigationMenuLink
+                        key={child.href || childIndex}
+                        asChild
+                      >
+                        <Link
+                          href={child.href}
+                          className={cn(
+                            "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+                            child.disabled && "pointer-events-none opacity-50"
+                          )}
+                        >
+                          <div className="text-sm font-medium leading-none">
+                            {child.label}
+                          </div>
+                        </Link>
+                      </NavigationMenuLink>
+                    ))}
+                  </div>
+                </NavigationMenuContent>
+              </>
+            ) : (
+              <NavigationMenuLink
+                asChild
+                className={cn(
+                  currentActiveItem === item.href && "bg-accent text-accent-foreground",
+                  variant === "pills" && "rounded-full",
+                  variant === "underline" && currentActiveItem === item.href && "border-b-2 border-primary"
+                )}
+              >
+                <Link
+                  href={item.href}
+                  className={cn(
+                    "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+                    item.disabled && "pointer-events-none opacity-50"
+                  )}
+                >
+                  {showIcons && item.icon && (
+                    <item.icon className="w-4 h-4 mr-2 inline-block" />
+                  )}
+                  {item.label}
+                </Link>
+              </NavigationMenuLink>
+            )}
+          </NavigationMenuItem>
+        ))}
+      </NavigationMenuList>
+    </NavigationMenu>`;
+            case "feedback":
+                return `<Alert 
+      variant={variant} 
+      className={cn("relative", className)} 
+      role={variant === "destructive" ? "alert" : "status"}
+      aria-live={variant === "destructive" ? "assertive" : "polite"}
+      {...props}
+    >
+      {icon || (
+        <div className="w-4 h-4">
+          {variant === "success" && "✓"}
+          {variant === "destructive" && "⚠"}
+          {variant === "warning" && "⚠"}
+        </div>
+      )}
+      
+      <div className="flex-1">
+        {title && <AlertTitle>{title}</AlertTitle>}
+        {message && <AlertDescription>{message}</AlertDescription>}
+      </div>
+      
+      {dismissible && onClose && (
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={onClose}
+          className="absolute top-2 right-2 h-6 w-6 p-0"
+          aria-label="Close alert"
+        >
+          ×
+        </Button>
+      )}
+    </Alert>`;
+            case "data":
+                return `<div className={cn("space-y-4", className)} {...props}>
+      {loading ? (
+        <div className="flex items-center justify-center p-8">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary" />
+          <span className="sr-only">Loading data...</span>
+        </div>
+      ) : (
+        <>
+          <div className="rounded-md border overflow-hidden">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  {onRowSelect && (
+                    <TableHead className="w-12">
+                      <span className="sr-only">Select row</span>
+                    </TableHead>
+                  )}
+                  {columns.map((column) => (
+                    <TableHead 
+                      key={String(column.key)}
+                      className={cn(
+                        sortable && column.sortable && "cursor-pointer hover:bg-muted",
+                        column.width && \`w-[\${column.width}]\`
+                      )}
+                      onClick={() => column.sortable && handleSort(column.key)}
+                      role={column.sortable ? "button" : undefined}
+                      tabIndex={column.sortable ? 0 : undefined}
+                      onKeyDown={column.sortable ? (e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                          e.preventDefault();
+                          handleSort(column.key);
+                        }
+                      } : undefined}
+                    >
+                      <div className="flex items-center space-x-2">
+                        <span>{column.label}</span>
+                        {sortable && column.sortable && sortConfig?.key === column.key && (
+                          <span className="text-xs">
+                            {sortConfig.direction === "asc" ? "↑" : "↓"}
+                          </span>
+                        )}
+                      </div>
+                    </TableHead>
+                  ))}
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {paginatedData.length === 0 ? (
+                  <TableRow>
+                    <TableCell 
+                      colSpan={columns.length + (onRowSelect ? 1 : 0)}
+                      className="text-center py-8 text-muted-foreground"
+                    >
+                      {emptyMessage}
+                    </TableCell>
+                  </TableRow>
+                ) : (
+                  paginatedData.map((row, index) => (
+                    renderRow ? renderRow(row, index) : (
+                      <TableRow 
+                        key={row.id} 
+                        className={cn(
+                          onRowSelect && selectedRows.has(row.id) && "bg-muted"
+                        )}
+                      >
+                        {onRowSelect && (
+                          <TableCell>
+                            <Checkbox
+                              checked={selectedRows.has(row.id)}
+                              onCheckedChange={() => handleRowSelection(row.id)}
+                              aria-label={\`Select row \${index + 1}\`}
+                            />
+                          </TableCell>
+                        )}
+                        {columns.map((column) => (
+                          <TableCell key={String(column.key)}>
+                            {column.render 
+                              ? column.render(row[column.key], row)
+                              : String(row[column.key] || "")
+                            }
+                          </TableCell>
+                        ))}
+                      </TableRow>
+                    )
+                  ))
+                )}
+              </TableBody>
+            </Table>
+          </div>
+          
+          {pagination && data.length > pageSize && (
+            <div className="flex items-center justify-between">
+              <p className="text-sm text-muted-foreground">
+                Showing {((currentPage - 1) * pageSize) + 1} to {Math.min(currentPage * pageSize, data.length)} of {data.length} results
+              </p>
+              <div className="flex items-center space-x-2">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setCurrentPage(prev => Math.max(1, prev - 1))}
+                  disabled={currentPage === 1}
+                  aria-label="Previous page"
+                >
+                  Previous
+                </Button>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setCurrentPage(prev => prev + 1)}
+                  disabled={currentPage * pageSize >= data.length}
+                  aria-label="Next page"
+                >
+                  Next
+                </Button>
+              </div>
+            </div>
+          )}
+        </>
+      )}
+    </div>`;
+            default:
+                return `<Card className={cn("p-4", className)} {...props}>
+      <CardHeader>
+        <CardTitle>${name}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <p className="text-sm text-muted-foreground">
+          This is a production-ready ${type} component with accessibility features and TypeScript support.
+        </p>
+        {children}
+      </CardContent>
+    </Card>`;
+        }
+    }
+    generateProductionActionFunctions(actionFunctions, componentName, type) {
+        if (actionFunctions.length === 0)
+            return "";
+        const functions = actionFunctions.map((func) => {
+            switch (func) {
+                case "handleSubmit":
+                    return type === "form"
+                        ? `// Form submission is handled within the component`
+                        : `
+/**
+ * Handles form submission with validation and error handling
+ * @param data - Form data to submit
+ * @returns Promise with submission result
+ */
+export async function handleSubmit(data: Record<string, any>): Promise<{ success: boolean; message?: string }> {
+  try {
+    // TODO: Implement actual submission logic
+    console.log("Submitting data:", data);
+    
+    // Simulate API call
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    
+    return { success: true, message: "Data submitted successfully" };
+  } catch (error) {
+    console.error("Submission error:", error);
+    return { success: false, message: "Failed to submit data" };
+  }
+}`;
+                case "handleLogin":
+                    return `
+/**
+ * Handles user authentication with proper validation
+ * @param email - User email address
+ * @param password - User password
+ * @returns Promise with authentication result
+ */
+export async function handleLogin(email: string, password: string): Promise<{ 
+  success: boolean; 
+  user?: { id: string; email: string; name: string }; 
+  error?: string 
+}> {
+  try {
+    // TODO: Implement actual authentication logic
+    const response = await fetch("/api/auth/login", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ email, password }),
+    });
+    
+    if (!response.ok) {
+      throw new Error("Authentication failed");
+    }
+    
+    const result = await response.json();
+    return { success: true, user: result.user };
+  } catch (error) {
+    console.error("Login error:", error);
+    return { success: false, error: "Invalid credentials" };
+  }
+}`;
+                case "validateEmail":
+                    return `
+/**
+ * Validates email address format and availability
+ * @param email - Email address to validate
+ * @returns Validation result with detailed feedback
+ */
+export async function validateEmail(email: string): Promise<{
+  isValid: boolean;
+  isAvailable?: boolean;
+  message?: string;
+}> {
+  const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;
+  
+  if (!emailRegex.test(email)) {
+    return { isValid: false, message: "Please enter a valid email address" };
+  }
+  
+  try {
+    // TODO: Check email availability
+    const response = await fetch(\`/api/auth/check-email?email=\${encodeURIComponent(email)}\`);
+    const { available } = await response.json();
+    
+    return { 
+      isValid: true, 
+      isAvailable: available,
+      message: available ? "Email is available" : "Email is already registered"
+    };
+  } catch (error) {
+    console.error("Email validation error:", error);
+    return { isValid: true, message: "Unable to verify email availability" };
+  }
+}`;
+                default:
+                    return `
+/**
+ * ${func} - Custom action function
+ * TODO: Implement ${func} logic with proper TypeScript types and error handling
+ */
+export async function ${func}(...args: any[]): Promise<{ success: boolean; data?: any; error?: string }> {
+  try {
+    console.log("${func} called with args:", args);
+    
+    // TODO: Implement actual logic
+    await new Promise(resolve => setTimeout(resolve, 100));
+    
+    return { success: true };
+  } catch (error) {
+    console.error("${func} error:", error);
+    return { success: false, error: "Operation failed" };
+  }
+}`;
+            }
+        });
+        return functions.join("\n");
+    }
+    extractDependencies(code) {
+        const dependencies = [];
+        // Extract import statements
+        const importRegex = /import\s+.*?\s+from\s+['"]([^'"]+)['"]/g;
+        let match;
+        while ((match = importRegex.exec(code)) !== null) {
+            const importPath = match[1];
+            if (importPath.startsWith("@/") ||
+                importPath.startsWith("./") ||
+                importPath.startsWith("../")) {
+                dependencies.push(importPath);
+            }
+        }
+        // Extract shadcn/ui component dependencies
+        const shadcnComponents = this.extractShadcnComponents(code);
+        shadcnComponents.forEach((comp) => {
+            dependencies.push(`@/components/ui/${comp.toLowerCase()}`);
+        });
+        // Remove duplicates
+        return [...new Set(dependencies)];
+    }
+    extractShadcnComponents(code) {
+        const components = [];
+        // Check for shadcn/ui component usage
+        Object.values(SHADCN_COMPONENTS)
+            .flat()
+            .forEach((comp) => {
+            if (code.includes(comp)) {
+                components.push(comp);
+            }
+        });
+        return [...new Set(components)];
+    }
+    calculateQualityScore(code) {
+        let score = 70; // Base score
+        // Bonus for using shadcn/ui components
+        const shadcnComponents = this.extractShadcnComponents(code);
+        score += Math.min(shadcnComponents.length * 3, 15);
+        // Bonus for proper TypeScript usage
+        if (code.includes("interface") && code.includes("Props"))
+            score += 10;
+        if (code.includes("export type") || code.includes("export interface"))
+            score += 5;
+        // Bonus for React patterns and hooks
+        if (code.includes("useState") || code.includes("useEffect"))
+            score += 5;
+        if (code.includes("useCallback") || code.includes("useMemo"))
+            score += 5;
+        // Bonus for accessibility features
+        if (code.includes("aria-") || code.includes("role="))
+            score += 10;
+        if (code.includes("tabIndex") || code.includes("onKeyDown"))
+            score += 5;
+        // Bonus for error handling and validation
+        if (code.includes("try") && code.includes("catch"))
+            score += 5;
+        if (code.includes("zodResolver") || code.includes("z.object"))
+            score += 5;
+        // Bonus for semantic HTML and proper structure
+        if (code.includes("role=") && code.includes("aria-"))
+            score += 5;
+        if (code.includes("sr-only"))
+            score += 3;
+        // Bonus for production patterns
+        if (code.includes("useCallback") && code.includes("useMemo"))
+            score += 5;
+        if (code.includes("React.memo") || code.includes("forwardRef"))
+            score += 3;
+        // Cap at 100
+        return Math.min(score, 100);
+    }
+    generateComponentName(description) {
+        // Convert description to PascalCase component name
+        return description
+            .split(" ")
+            .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+            .join("")
+            .replace(/[^a-zA-Z0-9]/g, "");
+    }
+    async generateWithXAI(component, group, options) {
+        try {
+            const xaiApiKey = process.env.XAI_API_KEY;
+            if (!xaiApiKey) {
+                throw new Error("X.AI API key not found");
+            }
+            const { XAIClient } = await Promise.resolve().then(() => __importStar(require("../../utils/xaiClient")));
+            const xaiClient = new XAIClient({
+                apiKey: xaiApiKey,
+                temperature: options.temperature || 0.6,
+                maxTokens: options.maxTokens || 8000,
+            });
+            return await xaiClient.generateComponent(component, group?.name || "general");
+        }
+        catch (error) {
+            console.warn("X.AI generation failed, falling back to local generation:", error);
+            // Fallback to local generation
+            return this.generateProductionReadyComponent(component, group, {
+                ...options,
+                useXAI: false,
+            });
+        }
+    }
+}
+exports.CodeGenSubAgent = CodeGenSubAgent;
+//# sourceMappingURL=CodeGenSubAgent.js.map