mycontext-cli 2.0.27 → 2.0.29

package/dist/commands/generate-components.js

@@ -41,16 +41,21 @@ const fileSystem_1 = require("../utils/fileSystem");
 const spinner_1 = require("../utils/spinner");
 const hostedApiClient_1 = require("../utils/hostedApiClient");
 const completeArchitectureEngine_1 = require("../utils/completeArchitectureEngine");
+const unifiedDesignContextLoader_1 = require("../utils/unifiedDesignContextLoader");
 const chalk_1 = __importDefault(require("chalk"));
 const fs = __importStar(require("fs-extra"));
 const path = __importStar(require("path"));
 const child_process_1 = require("child_process");
+const review_context_1 = require("./review-context");
+const TriggerLogger_1 = require("../services/TriggerLogger");
 // --- Orchestration in GenerateComponentsCommand ---
 class GenerateComponentsCommand {
     constructor() {
         this.fs = new fileSystem_1.FileSystemManager();
         this.hostedApi = new hostedApiClient_1.HostedApiClient();
         this.architectureEngine = new completeArchitectureEngine_1.CompleteArchitectureEngine();
+        this.contextLoader = new unifiedDesignContextLoader_1.UnifiedDesignContextLoader();
+        this.triggerLogger = new TriggerLogger_1.TriggerLogger();
         this.contextArtifacts = {
             prd: "",
             types: "",
@@ -259,11 +264,24 @@ class GenerateComponentsCommand {
                 console.log(chalk_1.default.blue("🚀 Using local AI generation (no authentication required)"));
                 userInfo = { userId: "local" };
             }
-            // Load context artifacts for richer generation (PRD + Types + Brand)
-            this.contextArtifacts = await this.loadContextArtifacts();
+            // Load unified design context (PRD + Types + Brand + Component List + Design Manifest)
+            console.log(chalk_1.default.blue("🔄 Loading unified design context..."));
+            const { enrichedContext } = await this.contextLoader.loadUnifiedDesignContext();
+            // Convert enriched context to legacy format for compatibility
+            this.contextArtifacts = {
+                prd: enrichedContext.technical_context.prd,
+                types: enrichedContext.technical_context.types,
+                brand: enrichedContext.technical_context.brand,
+                compListRaw: JSON.stringify(enrichedContext.component_architecture),
+                compList: enrichedContext.component_architecture,
+            };
             // Load stack configuration for stack-aware generation
             await this.loadStackConfig();
-            // Check if brand context exists - critical for design-consistent components
+            // Display design context summary
+            console.log(chalk_1.default.green("✅ Unified design context loaded"));
+            console.log(chalk_1.default.gray(`   Design system: ${enrichedContext.design_system.colors.primary} primary color`));
+            console.log(chalk_1.default.gray(`   Components: ${enrichedContext.component_architecture.components.length} defined`));
+            console.log(chalk_1.default.gray(`   Design anchors: ${enrichedContext.design_intent.design_anchors.join(", ")}`));
             if (!this.contextArtifacts.brand) {
                 console.log(chalk_1.default.yellow("⚠️  No brand context found. Components may not match your design system."));
                 console.log(chalk_1.default.gray("💡 Run 'mycontext generate brand' first for design-consistent components."));
@@ -273,15 +291,21 @@ class GenerateComponentsCommand {
             }
             // Determine if we're generating a specific group or all components
             const isAll = target === "all" || options.all || options["--all"];
-            const groupName = isAll ? undefined : target;
-            if (isAll) {
+            const isCoreOnly = target === "core" ||
+                options.coreOnly ||
+                options["--core-only"];
+            const groupName = isAll || isCoreOnly ? undefined : target;
+            if (isCoreOnly) {
+                await this.generateCoreComponents(options, spinner, userInfo.userId);
+            }
+            else if (isAll) {
                 await this.generateAllComponents(options, spinner, userInfo.userId);
             }
             else if (groupName) {
                 await this.generateComponentGroup(groupName, options, spinner, userInfo.userId);
             }
             else {
-                throw new Error("Please specify a group name or 'all' to generate components");
+                throw new Error("Please specify a group name, 'all', or use --core-only to generate components");
             }
             // Optionally run final canvas normalization
             if (options.finalCanvas) {
@@ -535,6 +559,294 @@ class GenerateComponentsCommand {
             catch { }
         }
     }
+    async generateCoreComponents(options, spinner, userId) {
+        spinner.updateText("Generating core 10 components for validation...");
+        // Check if critical gaps are addressed
+        const criticalGapsAddressed = await review_context_1.ReviewContextCommand.areCriticalGapsAddressed();
+        if (!criticalGapsAddressed) {
+            console.log(chalk_1.default.red("❌ Critical gaps must be addressed before generating components"));
+            console.log(chalk_1.default.blue("💡 Run 'mycontext review:context' to address critical gaps"));
+            return;
+        }
+        // Read component list
+        let componentListPath = ".mycontext/04-component-list.json";
+        if (!(await this.fs.exists(componentListPath))) {
+            componentListPath = ".mycontext/component-list.json";
+        }
+        if (!(await this.fs.exists(componentListPath))) {
+            componentListPath = "context/component-list.json";
+        }
+        if (!(await this.fs.exists(componentListPath))) {
+            throw new Error("Component list not found. Run 'mycontext generate components-list' first.");
+        }
+        const componentList = JSON.parse(await this.fs.readFile(componentListPath));
+        const groups = this.convertHierarchicalToFlat(componentList);
+        if (groups.length === 0) {
+            throw new Error("No component groups found in component-list.json");
+        }
+        // Select first 10 components across all groups
+        const coreComponents = [];
+        let componentCount = 0;
+        const maxCoreComponents = 10;
+        for (const group of groups) {
+            if (componentCount >= maxCoreComponents)
+                break;
+            const components = group.components || [];
+            for (const component of components) {
+                if (componentCount >= maxCoreComponents)
+                    break;
+                coreComponents.push({
+                    ...component,
+                    groupName: group.name,
+                    group: group,
+                });
+                componentCount++;
+            }
+        }
+        if (coreComponents.length === 0) {
+            throw new Error("No components found in component-list.json");
+        }
+        console.log(chalk_1.default.blue(`🎯 Generating ${coreComponents.length} core components for validation`));
+        // Ensure shadcn/ui components are available
+        await this.ensureShadcnComponentsInstalled(groups, spinner);
+        // Ensure form dependencies exist
+        await this.ensureFormDeps(spinner);
+        // Ensure test scaffold exists (optional)
+        if (options.withTests) {
+            await this.ensureTestsScaffold(spinner);
+        }
+        // Create core components directory structure
+        const componentsDir = options.output || path.join(".mycontext", "components");
+        const mobileDir = path.join(componentsDir, "mobile");
+        const desktopDir = path.join(componentsDir, "desktop");
+        await this.fs.ensureDir(mobileDir);
+        await this.fs.ensureDir(desktopDir);
+        let generatedCount = 0;
+        // Generate mobile and desktop variants for each core component
+        for (const component of coreComponents) {
+            spinner.updateText(`Generating ${component.name} (${generatedCount + 1}/${coreComponents.length})...`);
+            // Check if component feature is approved
+            const featureId = component.name.toLowerCase().replace(/\s+/g, "-");
+            const approval = await review_context_1.ReviewContextCommand.getFeatureApproval(featureId);
+            if (approval === false) {
+                console.log(chalk_1.default.yellow(`   ⏭️  Skipping ${component.name} (rejected in review)`));
+                continue;
+            }
+            if (approval === null) {
+                console.log(chalk_1.default.yellow(`   ⚠️  ${component.name} not reviewed yet - generating anyway`));
+            }
+            // Generate mobile variant
+            await this.generateComponentVariant(component, "mobile", mobileDir, options, userId);
+            // Generate desktop variant
+            await this.generateComponentVariant(component, "desktop", desktopDir, options, userId);
+            // Generate tests if requested
+            if (options.withTests) {
+                await this.generateComponentTest(component, mobileDir);
+                await this.generateComponentTest(component, desktopDir);
+            }
+            generatedCount++;
+        }
+        // Generate index files for both variants
+        await this.generateCoreIndexFiles(coreComponents, mobileDir, desktopDir);
+        // Update preview registry
+        if (options.updatePreview !== false) {
+            await this.updatePreviewRegistry(componentsDir);
+            await this.ensurePreviewRoute();
+        }
+        // Post-generation checks
+        if (options.check) {
+            await this.runPostGenerationChecks(componentsDir);
+        }
+        // Open preview if requested
+        if (options.openPreview !== false) {
+            await this.openPreview();
+        }
+        console.log(chalk_1.default.green(`✅ Generated ${generatedCount} core components with mobile and desktop variants`));
+        console.log(chalk_1.default.blue(`📁 Components saved to: ${componentsDir}/mobile/ and ${componentsDir}/desktop/`));
+        console.log(chalk_1.default.yellow(`🔍 Next: Run 'mycontext preview:components' to validate the core components`));
+        // Log trigger event
+        await this.triggerLogger.logTrigger("component-refinement", `Generated ${generatedCount} core components for validation`, coreComponents.map((c) => c.name), "Core component generation completed");
+    }
+    async generateComponentVariant(component, variant, outputDir, options, userId) {
+        try {
+            // Check if user has local AI keys configured
+            const hasLocalKeys = this.hasLocalAIKeys();
+            let codeResult;
+            if (hasLocalKeys) {
+                // Use local AI first (user's own keys) - sub-agent orchestration
+                const { orchestrator } = await Promise.resolve().then(() => __importStar(require("../agents/orchestrator/SubAgentOrchestrator")));
+                // Execute code generation with retry logic
+                let retryCount = 0;
+                const maxRetries = 3;
+                const baseDelay = 2000; // 2 seconds base delay
+                while (retryCount <= maxRetries) {
+                    try {
+                        console.log(`🔍 DEBUG: About to call orchestrator.executeAgent for CodeGenSubAgent (attempt ${retryCount + 1}/${maxRetries + 1})`);
+                        // Use stack configuration timeout if available
+                        const timeout = this.stackConfig?.timeouts?.generation || 60000;
+                        // Get enriched context for better AI generation
+                        const { enrichedContext } = await this.contextLoader.loadUnifiedDesignContext();
+                        const formattedContext = this.contextLoader
+                            .getContextEnricher()
+                            .formatContextForModel(enrichedContext);
+                        const result = await orchestrator.executeAgent("CodeGenSubAgent", {
+                            componentName: component.name,
+                            componentDescription: component.description,
+                            componentType: component.type,
+                            variant: variant,
+                            groupName: component.groupName,
+                            dependencies: component.dependencies || [],
+                            enrichedContext: formattedContext,
+                            userId: userId,
+                            timeout: timeout,
+                            temperature: options.temperature || 0.7,
+                            maxTokens: options.maxTokens || 4000,
+                        });
+                        if (result && result.code) {
+                            codeResult = result;
+                            break; // Success, exit retry loop
+                        }
+                        else {
+                            throw new Error("No code generated");
+                        }
+                    }
+                    catch (error) {
+                        console.log(chalk_1.default.yellow(`⚠️  Generation attempt ${retryCount + 1} failed: ${error instanceof Error ? error.message : "Unknown error"}`));
+                        retryCount++;
+                        if (retryCount <= maxRetries) {
+                            const delay = baseDelay * Math.pow(2, retryCount - 1); // Exponential backoff
+                            console.log(chalk_1.default.gray(`   Retrying in ${delay / 1000} seconds...`));
+                            await new Promise((resolve) => setTimeout(resolve, delay));
+                        }
+                    }
+                }
+                if (!codeResult) {
+                    throw new Error("All generation attempts failed");
+                }
+            }
+            else {
+                // No local keys - try hosted API only
+                console.log(chalk_1.default.blue("🔧 Using hosted API for component generation..."));
+                try {
+                    const hostedResult = await this.hostedApi.generateComponent(component.description, {
+                        componentName: component.name,
+                        model: "mycontext",
+                        context: {
+                            prd: this.contextArtifacts.prd,
+                            types: this.contextArtifacts.types,
+                            brand: this.contextArtifacts.brand,
+                            componentList: this.contextArtifacts.compList,
+                        },
+                        variant: variant,
+                    });
+                    if (hostedResult.success && hostedResult.data) {
+                        codeResult = {
+                            code: hostedResult.data,
+                            metadata: {
+                                model: "hosted",
+                                tokens: hostedResult.data.length / 4,
+                                latency: 600,
+                            },
+                        };
+                    }
+                    else {
+                        throw new Error("Hosted API generation failed");
+                    }
+                }
+                catch (error) {
+                    console.log(chalk_1.default.red("❌ Hosted API failed"));
+                    console.log(chalk_1.default.yellow("💡 MyContext requires 100% accuracy - no fallbacks"));
+                    console.log(chalk_1.default.blue("🔄 Retry options:"));
+                    console.log(chalk_1.default.gray("  1. Configure a local AI provider API key"));
+                    console.log(chalk_1.default.gray("  2. Check your API key configuration"));
+                    console.log(chalk_1.default.gray("  3. Try again later with: mycontext generate components"));
+                    throw new Error("Hosted API unavailable - configure local AI provider");
+                }
+            }
+            // Write component file
+            const fileName = `${component.name}.tsx`;
+            const filePath = path.join(outputDir, fileName);
+            // Add variant-specific styling and imports
+            const variantCode = this.addVariantSpecificCode(codeResult.code, variant);
+            await this.fs.writeFile(filePath, variantCode);
+            console.log(chalk_1.default.green(`   ✅ Generated ${variant} variant: ${fileName}`));
+        }
+        catch (error) {
+            console.log(chalk_1.default.red(`   ❌ Failed to generate ${variant} variant for ${component.name}: ${error instanceof Error ? error.message : "Unknown error"}`));
+            throw error;
+        }
+    }
+    addVariantSpecificCode(code, variant) {
+        // Add variant-specific styling and responsive behavior
+        const variantImports = variant === "mobile"
+            ? `import { cn } from "@/lib/utils";\n`
+            : `import { cn } from "@/lib/utils";\n`;
+        const variantStyles = variant === "mobile"
+            ? `className={cn("min-h-[44px] min-w-[44px] p-2 text-sm", className)}`
+            : `className={cn("min-h-[32px] min-w-[32px] p-4 text-base", className)}`;
+        // Replace className patterns with variant-specific ones
+        let modifiedCode = code.replace(/className=\{cn\([^}]+\)\}/g, variantStyles);
+        // Add variant-specific imports if not present
+        if (!modifiedCode.includes("import { cn }")) {
+            modifiedCode = variantImports + modifiedCode;
+        }
+        return modifiedCode;
+    }
+    async generateCoreIndexFiles(coreComponents, mobileDir, desktopDir) {
+        // Generate mobile index
+        const mobileIndexContent = coreComponents
+            .map((comp) => `export { ${comp.name} } from './${comp.name}';`)
+            .join("\n");
+        await this.fs.writeFile(path.join(mobileDir, "index.ts"), mobileIndexContent);
+        // Generate desktop index
+        const desktopIndexContent = coreComponents
+            .map((comp) => `export { ${comp.name} } from './${comp.name}';`)
+            .join("\n");
+        await this.fs.writeFile(path.join(desktopDir, "index.ts"), desktopIndexContent);
+        console.log(chalk_1.default.green("   ✅ Generated index files for mobile and desktop variants"));
+    }
+    async openPreview() {
+        try {
+            // Try to open in browser
+            const url = "http://localhost:3000/mycontext-preview";
+            // Check if Next.js dev server is running
+            try {
+                (0, child_process_1.execSync)("curl -s http://localhost:3000 > /dev/null", {
+                    stdio: "pipe",
+                });
+                console.log(chalk_1.default.green(`✅ Opening preview at ${url}`));
+                // Open in browser
+                (0, child_process_1.execSync)(`open ${url}`, { stdio: "pipe" });
+            }
+            catch {
+                console.log(chalk_1.default.yellow("⚠️  Next.js dev server not running"));
+                console.log(chalk_1.default.blue("💡 Start your Next.js app with: npm run dev"));
+                console.log(chalk_1.default.blue(`   Then visit: ${url}`));
+            }
+        }
+        catch (error) {
+            console.log(chalk_1.default.yellow("⚠️  Could not open browser automatically"));
+            console.log(chalk_1.default.blue("💡 Manually visit: http://localhost:3000/mycontext-preview"));
+        }
+    }
+    async runPostGenerationChecks(componentsDir) {
+        console.log(chalk_1.default.blue("🔍 Running post-generation checks..."));
+        try {
+            // TypeScript check
+            console.log(chalk_1.default.gray("   Running TypeScript check..."));
+            (0, child_process_1.execSync)("npx tsc --noEmit", { stdio: "pipe" });
+            console.log(chalk_1.default.green("   ✅ TypeScript check passed"));
+            // Lint check
+            console.log(chalk_1.default.gray("   Running ESLint..."));
+            (0, child_process_1.execSync)("npx eslint .mycontext/components --ext .ts,.tsx", {
+                stdio: "pipe",
+            });
+            console.log(chalk_1.default.green("   ✅ ESLint check passed"));
+        }
+        catch (error) {
+            console.log(chalk_1.default.yellow("   ⚠️ Some checks failed, but components were generated"));
+        }
+    }
     async generateComponentGroup(groupName, options, spinner, userId) {
         spinner.updateText(`Generating ${groupName} components...`);
         // Read component list
@@ -737,6 +1049,11 @@ class GenerateComponentsCommand {
                         console.log(`🔍 DEBUG: About to call orchestrator.executeAgent for CodeGenSubAgent (attempt ${retryCount + 1}/${maxRetries + 1})`);
                         // Use stack configuration timeout if available
                         const timeout = this.stackConfig?.timeouts?.generation || 60000;
+                        // Get enriched context for better AI generation
+                        const { enrichedContext } = await this.contextLoader.loadUnifiedDesignContext();
+                        const formattedContext = this.contextLoader
+                            .getContextEnricher()
+                            .formatContextForModel(enrichedContext);
                         codeResult = (await Promise.race([
                             orchestrator.executeAgent("CodeGenSubAgent", {
                                 component,
@@ -744,11 +1061,17 @@ class GenerateComponentsCommand {
                                 options: {
                                     ...options,
                                     context: {
+                                        // Legacy format for compatibility
                                         prd: this.contextArtifacts.prd,
                                         types: this.contextArtifacts.types,
                                         branding: this.contextArtifacts.brand,
                                         componentList: this.contextArtifacts.compListRaw,
-                                        stackConfig: this.stackConfig, // Pass stack config to AI
+                                        stackConfig: this.stackConfig,
+                                        // Enhanced context from design manifest
+                                        enrichedContext: formattedContext,
+                                        designSystem: enrichedContext.design_system,
+                                        designIntent: enrichedContext.design_intent,
+                                        visualTokens: enrichedContext.visual_tokens,
                                     },
                                 },
                             }),
@@ -1663,11 +1986,18 @@ export default function PreviewPage() {
             const totalRoutes = new Set(queue.flatMap((item) => item.routes.map((r) => r.path))).size;
             console.log(chalk_1.default.gray(`  • ${totalRoutes} routes in ${appDir}`));
         }
-        console.log(chalk_1.default.blue("\n📖 Next Steps:"));
-        console.log(chalk_1.default.gray("  1. Review generated components in components/"));
-        console.log(chalk_1.default.gray("  2. Review server actions in actions/"));
-        console.log(chalk_1.default.gray("  3. Review routes in app/"));
-        console.log(chalk_1.default.gray("  4. Run: npm run dev"));
+        console.log(chalk_1.default.green("\n✅ All components generated successfully!"));
+        console.log(chalk_1.default.blue("\n➡️  Next Steps:"));
+        console.log(chalk_1.default.cyan("   1. Preview components:"));
+        console.log(chalk_1.default.white("      mycontext preview components"));
+        console.log(chalk_1.default.cyan("   2. Run tests:"));
+        console.log(chalk_1.default.white("      npm test"));
+        console.log(chalk_1.default.cyan("   3. Start development:"));
+        console.log(chalk_1.default.white("      npm run dev"));
+        console.log(chalk_1.default.gray("\n   Additional:"));
+        console.log(chalk_1.default.gray("   • Review generated components in components/"));
+        console.log(chalk_1.default.gray("   • Review server actions in actions/"));
+        console.log(chalk_1.default.gray("   • Review routes in app/"));
     }
     /**
      * Convert component list to EnhancedComponent format