mycontext-cli 0.2.39 → 0.4.0

package/dist/commands/generate-components.js

@@ -40,40 +40,10 @@ exports.GenerateComponentsCommand = void 0;
 const fileSystem_1 = require("../utils/fileSystem");
 const spinner_1 = require("../utils/spinner");
 const chalk_1 = __importDefault(require("chalk"));
+const prompts_1 = __importDefault(require("prompts"));
 const fs = __importStar(require("fs-extra"));
 const path = __importStar(require("path"));
 const child_process_1 = require("child_process");
-// Code Generation Sub-Agent
-class CodeGenSubAgent {
-    constructor() {
-        this.name = "CodeGenSubAgent";
-    }
-    async run({ component, group, options }) {
-        // Use the existing generateComponentCode logic
-        return new GenerateComponentsCommand().generateComponentCode(component, group, options);
-    }
-}
-// QA Sub-Agent (stub for demonstration)
-class QASubAgent {
-    constructor() {
-        this.name = "QASubAgent";
-    }
-    async run({ code, component }) {
-        // Placeholder: In real implementation, run static analysis, lint, or type checks
-        // For now, always return true (pass)
-        return true;
-    }
-}
-// Docs Writer Sub-Agent (stub for demonstration)
-class DocsSubAgent {
-    constructor() {
-        this.name = "DocsSubAgent";
-    }
-    async run({ component, group }) {
-        // Placeholder: Generate markdown or JSDoc for the component
-        return `# ${component.name}\n\n${component.description}\n`;
-    }
-}
 // --- Orchestration in GenerateComponentsCommand ---
 class GenerateComponentsCommand {
     constructor() {
@@ -117,6 +87,8 @@ class GenerateComponentsCommand {
     async execute(target, options) {
         const spinner = new spinner_1.EnhancedSpinner("Initializing component generation...");
         try {
+            // System reminder: high-level plan
+            console.log(chalk_1.default.gray("\n[mycontext] Plan: plan → generate → QA → docs → preview (→ checks)\n"));
             // Check authentication unless local mode is enabled
             let userInfo = null;
             if (!options.local) {
@@ -146,6 +118,36 @@ class GenerateComponentsCommand {
             // Determine if we're generating a specific group or all components
             const isAll = target === "all" || options.all;
             const groupName = isAll ? undefined : target;
+            // Core-first flow: generate a single BrandComp then exit
+            if (isAll && options.coreFirst) {
+                await this.generateCoreBrandComp(options, spinner);
+                // Update preview registry and ensure /preview route
+                if (options.updatePreview !== false) {
+                    const componentsDir = options.output || path.join("components", ".mycontext");
+                    await this.updatePreviewRegistry(componentsDir);
+                    await this.ensurePreviewRoute();
+                }
+                // Guidance for refinement step
+                console.log(chalk_1.default.blue("\n🧩 Core-first step complete: edit 'components/.mycontext/core/BrandComp.tsx' until you're happy."));
+                console.log(chalk_1.default.gray("   You can also run: mycontext enhance components/.mycontext/core/BrandComp.tsx --prompt 'Tweak spacing/colors'\n"));
+                // If non-interactive, stop here
+                if (options.yes) {
+                    return;
+                }
+                // Ask whether to proceed with remaining components now
+                const answer = await (0, prompts_1.default)({
+                    type: "toggle",
+                    name: "proceed",
+                    message: "Proceed to generate the remaining components now? (You can rerun later)",
+                    initial: false,
+                    active: "yes",
+                    inactive: "no",
+                });
+                if (answer?.proceed) {
+                    await this.generateAllComponents(options, spinner, userInfo.userId);
+                }
+                return;
+            }
             if (isAll) {
                 await this.generateAllComponents(options, spinner, userInfo.userId);
             }
@@ -285,6 +287,7 @@ class GenerateComponentsCommand {
         let generatedGroups = 0;
         for (const group of groups) {
             spinner.updateText(`Generating ${group.name} components...`);
+            console.log(chalk_1.default.gray(`\n[mycontext] Reminder: generate → QA → docs for group '${group.name}'`));
             const groupDir = path.join(componentsDir, this.toKebabCase(group.name));
             await this.fs.ensureDir(groupDir);
             const components = group.components || [];
@@ -306,6 +309,8 @@ class GenerateComponentsCommand {
             await this.updatePreviewRegistry(componentsDir);
             await this.ensurePreviewRoute();
         }
+        // Post-generation: scan actual imports and ensure missing shadcn primitives are installed
+        await this.scanAndInstallShadcnFromComponents(componentsDir, spinner);
         spinner.success({
             text: `Generated ${totalComponents} components across ${generatedGroups} groups!`,
         });
@@ -322,6 +327,21 @@ class GenerateComponentsCommand {
         });
         // Post-run hints
         this.printNextStepsAfterComponents(options);
+        // Optionally open preview in browser
+        if (options.openPreview !== false) {
+            try {
+                const url = "http://localhost:3000/preview";
+                console.log(chalk_1.default.blue(`\n🌐 Opening preview: ${url}`));
+                // best-effort open using the OS default opener
+                const opener = process.platform === "darwin"
+                    ? "open"
+                    : process.platform === "win32"
+                        ? "start"
+                        : "xdg-open";
+                (0, child_process_1.execSync)(`${opener} ${url}`, { stdio: "ignore" });
+            }
+            catch { }
+        }
     }
     async generateComponentGroup(groupName, options, spinner, userId) {
         spinner.updateText(`Generating ${groupName} components...`);
@@ -370,6 +390,8 @@ class GenerateComponentsCommand {
             await this.updatePreviewRegistry(compBaseDir);
             await this.ensurePreviewRoute();
         }
+        // Post-generation: scan actual imports and ensure missing shadcn primitives are installed
+        await this.scanAndInstallShadcnFromComponents(compBaseDir, spinner);
         spinner.success({
             text: `Generated ${components.length} components in ${group.name}!`,
         });
@@ -380,6 +402,204 @@ class GenerateComponentsCommand {
         });
         console.log(chalk_1.default.gray(`    • index.ts`));
         console.log(chalk_1.default.gray(`    • page.tsx`));
+        // Optionally open preview in browser
+        if (options.openPreview !== false) {
+            try {
+                const url = "http://localhost:3000/preview";
+                console.log(chalk_1.default.blue(`\n🌐 Opening preview: ${url}`));
+                const opener = process.platform === "darwin"
+                    ? "open"
+                    : process.platform === "win32"
+                        ? "start"
+                        : "xdg-open";
+                (0, child_process_1.execSync)(`${opener} ${url}`, { stdio: "ignore" });
+            }
+            catch { }
+        }
+    }
+    /**
+     * Generate a single core BrandComp using PRD/types/brand context to act as the design anchor.
+     */
+    async generateCoreBrandComp(options, spinner) {
+        spinner.updateText("Generating core BrandComp...");
+        const componentsDir = options.output || path.join("components", ".mycontext");
+        const groupDir = path.join(componentsDir, "core");
+        await this.fs.ensureDir(groupDir);
+        // Ensure shadcn initialized
+        await this.ensureShadcnComponentsInstalled([
+            {
+                name: "Core",
+                components: [
+                    {
+                        name: "BrandComp",
+                        type: "layout",
+                        description: "Core brand canvas",
+                        tags: ["layout", "canvas"],
+                    },
+                ],
+            },
+        ], spinner);
+        // Best-effort brand token application
+        await this.applyBrandTokens();
+        const brandComp = {
+            name: "BrandComp",
+            type: "layout",
+            description: "A core brand canvas showcasing typography, primary/secondary colors, interactive states, and spacing. Acts as a reference for other components.",
+            userStories: [
+                "As a designer, I can see brand colors and typography applied consistently.",
+                "As a developer, I can reference spacing, radius, and interactive states.",
+            ],
+            actionFunctions: [],
+            dependencies: ["react"],
+            tags: ["brand", "layout", "canvas"],
+        };
+        // Try sub-agent generation first
+        try {
+            const { orchestrator } = await Promise.resolve().then(() => __importStar(require("../agents/orchestrator/SubAgentOrchestrator")));
+            const codeResult = (await orchestrator.executeAgent("CodeGenSubAgent", {
+                component: brandComp,
+                group: { name: "Core" },
+                options: {
+                    ...options,
+                    context: {
+                        prd: this.contextArtifacts.prd,
+                        types: this.contextArtifacts.types,
+                    },
+                },
+            }));
+            await this.fs.writeFile(path.join(groupDir, `BrandComp.tsx`), codeResult.code);
+        }
+        catch {
+            const code = this.generateComponentCode(brandComp, { name: "Core" }, {
+                ...options,
+                context: {
+                    prd: this.contextArtifacts.prd,
+                    types: this.contextArtifacts.types,
+                },
+            });
+            await this.fs.writeFile(path.join(groupDir, `BrandComp.tsx`), code);
+        }
+        // Group index and preview
+        await this.generateGroupIndex({
+            name: "Core",
+            description: "Core brand canvas",
+            components: [brandComp],
+        }, groupDir);
+        await this.generatePreviewPage({
+            name: "Core",
+            description: "Core brand canvas",
+            components: [brandComp],
+        }, groupDir);
+        spinner.success({ text: "Generated core BrandComp." });
+    }
+    /**
+     * Scan generated TSX files for imports from '@/components/ui/*' and ensure those shadcn primitives are installed.
+     */
+    async scanAndInstallShadcnFromComponents(componentsBaseDir, spinner) {
+        try {
+            const projectRoot = process.cwd();
+            const pkgJsonPath = path.join(projectRoot, "package.json");
+            if (!(await fs.pathExists(pkgJsonPath)))
+                return;
+            const needed = new Set();
+            const walk = async (dir) => {
+                const entries = await fs.readdir(dir);
+                for (const entry of entries) {
+                    const full = path.join(dir, entry);
+                    const stat = await fs.stat(full);
+                    if (stat.isDirectory())
+                        await walk(full);
+                    else if (entry.endsWith(".tsx")) {
+                        const src = await fs.readFile(full, "utf8");
+                        const re = /from\s+["']@\/components\/ui\/([^"']+)["']/g;
+                        let m;
+                        while ((m = re.exec(src))) {
+                            const mod = m[1];
+                            if (mod)
+                                needed.add(mod);
+                        }
+                    }
+                }
+            };
+            await walk(componentsBaseDir);
+            if (needed.size === 0)
+                return;
+            // Filter out already-present ui files
+            const uiDir = path.join(projectRoot, "components", "ui");
+            const missing = [];
+            for (const name of needed) {
+                const p = path.join(uiDir, `${name}.tsx`);
+                if (!(await fs.pathExists(p)))
+                    missing.push(name);
+            }
+            if (missing.length === 0)
+                return;
+            spinner.updateText(`Installing missing shadcn primitives from imports (${missing.length})...`);
+            const pm = await this.detectPackageManager(projectRoot);
+            try {
+                if (pm === "pnpm") {
+                    (0, child_process_1.execSync)(`pnpm dlx shadcn@latest add ${missing.join(" ")}`.trim(), {
+                        cwd: projectRoot,
+                        stdio: "inherit",
+                    });
+                }
+                else {
+                    (0, child_process_1.execSync)(`npx shadcn@latest add ${missing.join(" ")}`.trim(), {
+                        cwd: projectRoot,
+                        stdio: "inherit",
+                    });
+                }
+            }
+            catch {
+                console.log(chalk_1.default.yellow("   ⚠️ shadcn add (post-scan) failed; you can add components manually."));
+            }
+        }
+        catch (error) {
+            console.log(chalk_1.default.yellow(`   ⚠️ shadcn post-scan encountered an issue: ${error instanceof Error ? error.message : String(error)}`));
+        }
+    }
+    /**
+     * Apply brand tokens to globals.css (:root variables) if branding exists.
+     */
+    async applyBrandTokens() {
+        try {
+            const projectRoot = process.cwd();
+            const appDir = (await fs.pathExists(path.join(projectRoot, "src", "app")))
+                ? path.join(projectRoot, "src", "app")
+                : path.join(projectRoot, "app");
+            const globalsPath = path.join(appDir, "globals.css");
+            if (!(await fs.pathExists(globalsPath)))
+                return;
+            const brandPath = path.join(projectRoot, ".mycontext", "03-branding.md");
+            if (!(await fs.pathExists(brandPath)))
+                return;
+            const brand = await fs.readFile(brandPath, "utf8");
+            const pick = (label) => {
+                const m = brand.match(new RegExp(label + ".*?(#[0-9a-fA-F]{6})"));
+                return m ? m[1] : null;
+            };
+            const primary = pick("primary") || pick("Primary") || null;
+            const secondary = pick("secondary") || pick("Secondary") || null;
+            const accent = pick("accent") || pick("Accent") || null;
+            if (!primary && !secondary && !accent)
+                return;
+            let css = await fs.readFile(globalsPath, "utf8");
+            const ensureVar = (name, value) => {
+                const re = new RegExp(`(--${name}:\s*)([^;]+)(;)`);
+                if (re.test(css))
+                    css = css.replace(re, `$1${value}$3`);
+                else
+                    css = css.replace(/:root\s*\{/, (m) => `${m}\n  --${name}: ${value};`);
+            };
+            if (primary)
+                ensureVar("primary", primary);
+            if (secondary)
+                ensureVar("secondary", secondary);
+            if (accent)
+                ensureVar("accent", accent);
+            await fs.writeFile(globalsPath, css);
+        }
+        catch { }
     }
     async generateComponent(component, group, groupDir, options, userId) {
         try {
@@ -441,15 +661,23 @@ class GenerateComponentsCommand {
                 .replace(new RegExp(`${safeName} Default`, "g"), `${safeName}Default`);
             await this.fs.writeFile(componentPath, fixedCode);
             // Execute QA and docs in parallel
+            const componentWithContext = {
+                ...component,
+                _context: {
+                    group: group?.name,
+                    prd: this.contextArtifacts.prd,
+                    types: this.contextArtifacts.types,
+                },
+            };
             const [qaResult, docsResult] = (await Promise.all([
                 orchestrator.executeAgent("QASubAgent", {
                     code: codeResult.code,
-                    component,
+                    component: componentWithContext,
                     standards: ["typescript", "react", "accessibility"],
                 }),
                 orchestrator.executeAgent("DocsSubAgent", {
                     code: codeResult.code,
-                    component,
+                    component: componentWithContext,
                     format: "readme",
                 }),
             ]));
@@ -521,6 +749,11 @@ class GenerateComponentsCommand {
     async ensureShadcnComponentsInstalled(groups, spinner) {
         try {
             const projectRoot = process.cwd();
+            const pkgJsonPath = path.join(projectRoot, "package.json");
+            if (!(await fs.pathExists(pkgJsonPath))) {
+                console.log(chalk_1.default.gray("   Skipping shadcn setup: no package.json in current directory. Run inside an existing Next.js project."));
+                return;
+            }
             const componentsJsonPath = path.join(projectRoot, "components.json");
             // Initialize shadcn if components.json is missing
             if (!(await fs.pathExists(componentsJsonPath))) {
@@ -557,6 +790,10 @@ class GenerateComponentsCommand {
             const names = Array.from(needed);
             spinner.updateText(`Installing shadcn components (${names.length})...`);
             try {
+                if (!(await fs.pathExists(pkgJsonPath))) {
+                    console.log(chalk_1.default.gray("   Skipping 'shadcn add' because no package.json was found."));
+                    return;
+                }
                 if (pkgManager === "pnpm") {
                     (0, child_process_1.execSync)(`pnpm dlx shadcn@latest add ${names.join(" ")}`, {
                         cwd: projectRoot,
@@ -1058,7 +1295,6 @@ export default ${name};
     e.preventDefault();
     setIsSubmitting(true);
     try {
-      // TODO: Implement form submission logic
       onSubmit?.(formData);
     } catch (error) {
       console.error("Form submission error:", error);
@@ -1173,14 +1409,14 @@ export default ${name};
                 case "handleLogin":
                     return `
 export async function handleLogin(email: string, password: string) {
-  // TODO: Implement login logic
+  // Implement login logic in application layer
   console.log("Logging in with:", { email, password });
   return { success: true };
 }`;
                 case "handleSignup":
                     return `
 export async function handleSignup(email: string, password: string, name: string) {
-  // TODO: Implement signup logic
+  // Implement signup logic in application layer
   console.log("Signing up with:", { email, password, name });
   return { success: true };
 }`;
@@ -1193,14 +1429,14 @@ export function validateEmail(email: string): boolean {
                 case "checkUsername":
                     return `
 export async function checkUsername(username: string): Promise<boolean> {
-  // TODO: Implement username availability check
+  // Implement username availability check in application layer
   console.log("Checking username:", username);
   return true;
 }`;
                 default:
                     return `
 export function ${func}() {
-  // TODO: Implement ${func} logic
+  // Implement ${func} logic in application layer
   console.log("${func} called");
 }`;
             }
@@ -1407,14 +1643,14 @@ function groupBy<T, K extends string | number>(
         try {
             const projectRoot = process.cwd();
             const typesPathCandidates = [
-                path.join(projectRoot, '.mycontext', '02-types.ts'),
-                path.join(projectRoot, '.mycontext', 'types.ts'),
-                path.join(projectRoot, 'context', 'types.ts'),
+                path.join(projectRoot, ".mycontext", "02-types.ts"),
+                path.join(projectRoot, ".mycontext", "types.ts"),
+                path.join(projectRoot, "context", "types.ts"),
             ];
-            let typesSource = '';
+            let typesSource = "";
             for (const p of typesPathCandidates) {
                 if (await fs.pathExists(p)) {
-                    typesSource = await fs.readFile(p, 'utf8');
+                    typesSource = await fs.readFile(p, "utf8");
                     break;
                 }
             }
@@ -1427,7 +1663,7 @@ function groupBy<T, K extends string | number>(
                 const body = match[2];
                 const fields = {};
                 body
-                    .split('\n')
+                    .split("\n")
                     .map((l) => l.trim())
                     .filter(Boolean)
                     .forEach((line) => {
@@ -1445,19 +1681,19 @@ function groupBy<T, K extends string | number>(
                 const stat = await fs.stat(groupPath);
                 if (!stat.isDirectory())
                     continue;
-                const files = (await fs.readdir(groupPath)).filter((f) => f.endsWith('.tsx'));
+                const files = (await fs.readdir(groupPath)).filter((f) => f.endsWith(".tsx"));
                 for (const file of files) {
-                    if (file === 'page.tsx')
+                    if (file === "page.tsx")
                         continue;
-                    const base = file.replace(/\.tsx$/, '');
+                    const base = file.replace(/\.tsx$/, "");
                     const full = path.join(groupPath, file);
-                    const src = await fs.readFile(full, 'utf8');
+                    const src = await fs.readFile(full, "utf8");
                     const propsInterfaceMatch = src.match(/interface\s+(\w+)Props\s*\{([\s\S]*?)\}/);
                     if (!propsInterfaceMatch)
                         continue;
                     const propsBody = propsInterfaceMatch[2];
                     const entries = propsBody
-                        .split('\n')
+                        .split("\n")
                         .map((l) => l.trim())
                         .filter((l) => /:\s*/.test(l));
                     const propsObj = {};
@@ -1476,7 +1712,7 @@ function groupBy<T, K extends string | number>(
                 }
             }
             const out = `export const previewProps: Record<string, any> = ${JSON.stringify(propsMap, null, 2)};\n`;
-            await fs.writeFile(path.join(componentsDir, 'preview-props.ts'), out);
+            await fs.writeFile(path.join(componentsDir, "preview-props.ts"), out);
         }
         catch (error) {
             console.log(chalk_1.default.yellow(`   ⚠️ Failed to build preview props: ${error instanceof Error ? error.message : String(error)}`));
@@ -1485,14 +1721,14 @@ function groupBy<T, K extends string | number>(
     generateSampleValue(typeStr, interfaces, depth) {
         if (depth > 2)
             return undefined;
-        const t = typeStr.replace(/\s+/g, '');
-        if (t.endsWith('[]')) {
+        const t = typeStr.replace(/\s+/g, "");
+        if (t.endsWith("[]")) {
             const inner = t.slice(0, -2);
             const v = this.generateSampleValue(inner, interfaces, depth + 1);
             return v === undefined ? undefined : [v];
         }
         if (/^string\b/.test(t))
-            return 'Sample';
+            return "Sample";
         if (/^number\b/.test(t))
             return 1;
         if (/^boolean\b/.test(t))