mycontext-cli 0.4.7 → 0.4.9

package/dist/commands/generate.js

@@ -88,6 +88,9 @@ class GenerateCommand {
                 case "components-list":
                     result = await this.generateComponentList(projectContext, options);
                     break;
+                case "project-structure":
+                    result = await this.generateProjectStructure(projectContext, options);
+                    break;
                 case "all": {
                     // Run sequentially with chaining: PRD -> Types(from PRD) -> (optional Brand) -> Components List(from Types + optional brand)
                     // PRD
@@ -129,6 +132,20 @@ class GenerateCommand {
                         throw new Error(compListRes.error || "Components list generation failed");
                     const compListPath = await this.saveGeneratedContent("components-list", compListRes.content, options);
                     console.log(chalk_1.default.green(`✅ Generated components-list saved to: ${compListPath}`));
+                    // Project Structure (use all context artifacts)
+                    const structureRes = await this.generateProjectStructure(projectContext, {
+                        ...options,
+                        contextFile: brandPath
+                            ? `${prdPath},${typesPath},${brandPath},${compListPath}`
+                            : `${prdPath},${typesPath},${compListPath}`,
+                    });
+                    if (structureRes.success && structureRes.content) {
+                        const structurePath = await this.saveGeneratedContent("project-structure", structureRes.content, options);
+                        console.log(chalk_1.default.green(`✅ Generated project structure saved to: ${structurePath}`));
+                    }
+                    else {
+                        console.log(chalk_1.default.yellow(`⚠️ Project structure generation skipped or failed: ${structureRes.error || "unknown"}`));
+                    }
                     this.spinner.success({ text: "All artifacts generated" });
                     return;
                 }
@@ -145,19 +162,37 @@ class GenerateCommand {
                     try {
                         const coreStatePath = path_1.default.join(process.cwd(), ".mycontext", "core.json");
                         const hasCoreState = await fs.pathExists(coreStatePath);
-                        const coreState = hasCoreState ? await fs.readJson(coreStatePath) : {};
+                        const coreState = hasCoreState
+                            ? await fs.readJson(coreStatePath)
+                            : {};
                         if (!coreState?.name) {
                             const raw = await fs.readFile(outputPath, "utf8");
                             const json = JSON.parse(raw);
                             const groups = Array.isArray(json.groups) ? json.groups : [];
+                            const metaCandidates = Array.isArray(json?.metadata?.coreCandidates)
+                                ? json.metadata.coreCandidates
+                                : [];
+                            const candidateKeys = new Set(metaCandidates.map((c) => `${c.group}::${c.name}`));
                             const flat = [];
                             for (const g of groups)
                                 for (const c of g.components || [])
                                     flat.push({ name: c.name, group: g.name, tags: c.tags });
                             if (flat.length) {
-                                const preferred = flat.filter((c) => /core|canvas|layout|board/i.test(c.name) || (Array.isArray(c.tags) && c.tags.some((t) => /core|canvas/i.test(String(t)))));
-                                const choices = (preferred.length ? preferred : flat).map((c) => ({
-                                    title: `${c.group} / ${c.name}`,
+                                // Preferred by metadata first; then heuristic-based; then rest
+                                const byKey = new Map(flat.map((c) => [`${c.group}::${c.name}`, c]));
+                                const metaList = metaCandidates
+                                    .map((c) => byKey.get(`${c.group}::${c.name}`))
+                                    .filter(Boolean);
+                                const heuristic = flat.filter((c) => (/core|canvas|layout|board/i.test(c.name) ||
+                                    (Array.isArray(c.tags) &&
+                                        c.tags.some((t) => /core|canvas/i.test(String(t))))) &&
+                                    !candidateKeys.has(`${c.group}::${c.name}`));
+                                const rest = flat.filter((c) => !candidateKeys.has(`${c.group}::${c.name}`) &&
+                                    !heuristic.includes(c));
+                                const ordered = [...metaList, ...heuristic, ...rest];
+                                const choices = ordered.map((c) => ({
+                                    title: `${c.group} / ${c.name}` +
+                                        (candidateKeys.has(`${c.group}::${c.name}`) ? "  ⭐" : ""),
                                     value: `${c.group}::${c.name}`,
                                 }));
                                 const pickNow = await (0, prompts_1.default)({
@@ -170,14 +205,24 @@ class GenerateCommand {
                                 });
                                 if (pickNow?.do) {
                                     const ans = await (0, prompts_1.default)({
-                                        type: "select",
+                                        type: "autocomplete",
                                         name: "pick",
                                         message: "Pick the core component (design anchor)",
                                         choices,
+                                        suggest: (input, choicesArg) => {
+                                            const q = (input || "").toLowerCase();
+                                            return Promise.resolve(choicesArg.filter((c) => String(c.title).toLowerCase().includes(q)));
+                                        },
                                     });
                                     if (ans?.pick) {
                                         const [g, n] = String(ans.pick).split("::");
-                                        const state = { name: n, group: g || "core", ready: false, updatedAt: new Date().toISOString(), refinements: [] };
+                                        const state = {
+                                            name: n,
+                                            group: g || "core",
+                                            ready: false,
+                                            updatedAt: new Date().toISOString(),
+                                            refinements: [],
+                                        };
                                         await fs.ensureDir(path_1.default.dirname(coreStatePath));
                                         await fs.writeJson(coreStatePath, state, { spaces: 2 });
                                         console.log(chalk_1.default.green(`✅ Core set to ${n} (group: ${g}).`));
@@ -313,14 +358,87 @@ class GenerateCommand {
         return await this.getProjectContext();
     }
     async generateContext(projectContext, options) {
-        const prompt = `[mycontext] Plan: plan → generate → QA → docs → preview (→ checks)\nCreate a PRD for: ${projectContext.description || "MyContext project"}
-
-Assume default stack unless user specifies otherwise:
-- Frontend: Next.js (App Router) with Shadcn UI
-- Auth/DB/File storage: InstantDB (auth, data, file persistence)
-- Testing: Jest + React Testing Library
-
-Include: overview, key features, user stories, tech requirements (reflecting the default stack), acceptance criteria. Keep it concise and actionable.`;
+        // If user provided --prd-file, import it as-is and return without AI
+        try {
+            const prdFile = options.prdFile ||
+                options.prdfile ||
+                options["prd-file"]; // accept variants
+            if (prdFile) {
+                const abs = path_1.default.isAbsolute(prdFile)
+                    ? prdFile
+                    : path_1.default.join(process.cwd(), prdFile);
+                if (await fs.pathExists(abs)) {
+                    const content = await fs.readFile(abs, "utf8");
+                    return {
+                        success: true,
+                        content,
+                        provider: "hybrid",
+                        metadata: { imported: true },
+                    };
+                }
+            }
+        }
+        catch { }
+        const prompt = [
+            `[mycontext] Plan: plan → generate → QA → docs → preview (→ checks)`,
+            `Create a production-grade PRD for: ${projectContext.description || "MyContext project"}`,
+            "",
+            "Assume default stack unless user specifies otherwise:",
+            "- Frontend: Next.js (App Router) with Shadcn UI",
+            "- Auth/DB/File storage: InstantDB (auth, data, file persistence)",
+            "- Accessibility: Radix UI principles (keyboard nav, ARIA, focus mgmt)",
+            "- Testing: Jest + React Testing Library",
+            "",
+            "Follow this step-by-step process first, then structure the PRD (avoid generic statements):",
+            "",
+            "Process:",
+            "1) Problem Statement: restate the project description from the user's perspective (who is impacted, what problem exists today, why now)",
+            "2) Desired Outcomes & Success Metrics: what users want to eliminate/improve/create; define measurable outcomes",
+            "3) Primary Users & Roles: identify roles and their responsibilities/permissions",
+            "4) Current State & Pain Points: briefly describe how it works today (or assumptions) and pain points",
+            "5) Improvement Opportunities: what to eliminate/automate/simplify; list key constraints/assumptions",
+            "6) Solution Approach & Scope: MVP vs later; boundaries and tradeoffs",
+            "7) User Journeys & Flows: derive end-to-end flows per role (happy path + alternatives + edge cases)",
+            "8) Detailed User Stories: action-oriented stories with context and goals",
+            "9) Acceptance Criteria: Given/When/Then per critical story",
+            "10) Entity Model & Relationships: core entities and associations",
+            "11) Information Architecture: pages/routes and the shadcn/ui primitives likely used",
+            "12) Technical Requirements: SSR/ISR, server actions, data fetching, security, telemetry",
+            "13) Non-Functional Requirements: performance budgets, accessibility, i18n, reliability",
+            "14) Risks & Open Questions: what could derail the plan and what needs decisions",
+            "",
+            "Then, produce the PRD with the following sections:",
+            "Structure the PRD with depth (avoid generic statements):",
+            "1) Overview: goal, non-goals, success metrics",
+            "2) User Roles & Responsibilities: distinct roles with responsibilities and permissions",
+            "3) Personas (optional): brief traits that influence UX",
+            "4) User Journeys & Flows: end-to-end scenarios per role (step-by-step)",
+            "5) Detailed User Stories: action-oriented; include negative flows and edge cases",
+            "6) Entity Model & Relationships: main entities and associations",
+            "7) Information Architecture: pages/routes, key UI patterns (shadcn components)",
+            "8) Technical Requirements: SSR/ISR, data fetching, server actions, security, telemetry",
+            "9) Non-Functional Requirements: performance budgets, accessibility, internationalization",
+            "10) Acceptance Criteria: Gherkin-style Given/When/Then per critical story",
+            "11) Risks & Open Questions",
+            "",
+            "Include two diagrams in fenced code blocks:",
+            "- Sequence diagram of a critical flow (e.g., auth → gameplay → result)",
+            "- (Optional) Flowchart for a user journey",
+            "",
+            "```mermaid",
+            "sequenceDiagram",
+            "  autonumber",
+            "  participant User",
+            "  participant App as Next.js App",
+            "  participant DB as InstantDB",
+            "  User->>App: Perform primary action",
+            "  App->>DB: Persist/fetch data",
+            "  DB-->>App: Data OK",
+            "  App-->>User: Updated UI",
+            "```",
+            "",
+            "Write concretely. Ground content in the provided description. No placeholders.",
+        ].join("\n");
         try {
             this.spinner.updateText(`Generating PRD with AI (${await this.ai.getActiveProviderName()}/${await this.ai.getActiveTextModelName()})...`);
             const { text, provider } = await this.ai.generateText(prompt, {
@@ -377,6 +495,7 @@ Include: data models, API interfaces, component props, utility types. Keep it co
             };
         }
     }
+    // specs flow removed; PRD is the requirements and Brand is the design.
     sanitizeTypeScriptOutput(raw) {
         // Prefer fenced code block content if present
         const block = raw.match(/```(?:ts|tsx|typescript|js)?\n([\s\S]*?)```/);
@@ -437,6 +556,56 @@ Include: identity, colors, typography, visual elements, brand voice. Keep it con
             };
         }
     }
+    async generateProjectStructure(projectContext, options) {
+        this.spinner.updateText("Generating project structure...");
+        try {
+            // Read existing context artifacts
+            const contextArtifacts = await this.readContextArtifacts();
+            const prd = contextArtifacts.prd;
+            const types = contextArtifacts.types;
+            // Read component list specifically
+            const compListPath = path_1.default.join(process.cwd(), ".mycontext", "04-component-list.json");
+            let compList = null;
+            if (await fs.pathExists(compListPath)) {
+                try {
+                    const compListRaw = await fs.readFile(compListPath, "utf8");
+                    compList = JSON.parse(compListRaw);
+                }
+                catch {
+                    // Ignore parse errors
+                }
+            }
+            if (!compList?.groups?.length) {
+                throw new Error("Component list is required for project structure generation. Run: mycontext generate components-list");
+            }
+            const structurePrompt = this.buildProjectStructurePrompt(projectContext.description || "", prd, types, compList);
+            const candidates = this.getModelCandidates(options);
+            const result = await this.ai.generateText(structurePrompt, {
+                modelCandidates: candidates,
+                temperature: 0.3,
+            });
+            if (!result?.text) {
+                throw new Error("Failed to generate project structure");
+            }
+            const sanitized = this.sanitizeMarkdownOutput(result.text);
+            return {
+                success: true,
+                content: sanitized,
+                provider: result.provider ||
+                    "hybrid",
+            };
+        }
+        catch (error) {
+            console.error(chalk_1.default.red(`Project structure generation failed: ${error.message}`));
+            // Fallback: Generate basic structure based on component list
+            const fallback = this.buildFallbackProjectStructure(projectContext);
+            return {
+                success: true,
+                content: fallback,
+                provider: "hybrid",
+            };
+        }
+    }
     async generateComponentList(projectContext, options) {
         const ctx = await this.readContextArtifacts();
         // Gate on core readiness if core.json exists
@@ -500,12 +669,21 @@ Include: identity, colors, typography, visual elements, brand voice. Keep it con
             "      ]",
             "    }",
             "  ]",
+            "  ,",
+            '  "metadata": {',
+            '    "coreCandidates": [',
+            '      { "name": string, "group": string, "reason": string },',
+            '      { "name": string, "group": string, "reason": string },',
+            '      { "name": string, "group": string, "reason": string }',
+            "    ]",
+            "  }",
             "}",
             "",
             "Rules:",
             "- No code fences, no comments, no trailing commas.",
             "- Use only the fields above.",
             "- Ensure arrays/objects have no extra commas.",
+            "- Provide up to 3 'coreCandidates' that best represent the design anchor (canvas/layout), with a short reason.",
         ].join("\n");
         try {
             this.spinner.updateText(`Generating component list with AI (${await this.ai.getActiveProviderName()}/${await this.ai.getActiveTextModelName()})...`);
@@ -650,7 +828,31 @@ Include: identity, colors, typography, visual elements, brand voice. Keep it con
         switch (type) {
             case "context": {
                 outputPath = path_1.default.join(outputDir, "01-prd.md");
-                await fs.writeFile(outputPath, content);
+                const preserve = Boolean(options.preservePrd);
+                if (preserve && (await fs.pathExists(outputPath))) {
+                    // Preserve existing PRD; write a copy next to it for reference
+                    const timestamp = new Date().toISOString().replace(/[:.]/g, "-");
+                    const alt = path_1.default.join(outputDir, `01-prd.imported-${timestamp}.md`);
+                    await fs.writeFile(alt, content);
+                }
+                else {
+                    await fs.writeFile(outputPath, content);
+                }
+                // Also write split artifacts for improved DX (idempotent)
+                try {
+                    const sections = this.splitPrdContent(content);
+                    if (sections.brief.trim().length > 0) {
+                        await fs.writeFile(path_1.default.join(outputDir, "01a-brief.md"), sections.brief);
+                    }
+                    if (sections.requirements.trim().length > 0) {
+                        await fs.writeFile(path_1.default.join(outputDir, "01b-requirements.md"), sections.requirements);
+                    }
+                    if (sections.flows.trim().length > 0) {
+                        await fs.writeFile(path_1.default.join(outputDir, "01c-flows.md"), sections.flows);
+                    }
+                    console.log(chalk_1.default.gray("   ↳ Also wrote split context: 01a-brief.md, 01b-requirements.md, 01c-flows.md"));
+                }
+                catch { }
                 break;
             }
             case "types": {
@@ -690,6 +892,11 @@ Include: identity, colors, typography, visual elements, brand voice. Keep it con
                 }
                 break;
             }
+            case "project-structure": {
+                outputPath = path_1.default.join(outputDir, "05-project-structure.md");
+                await fs.writeFile(outputPath, content);
+                break;
+            }
             default: {
                 // Fallback: keep timestamped file for unknown types
                 const timestamp = new Date().toISOString().replace(/[:.]/g, "-");
@@ -749,11 +956,40 @@ Include: identity, colors, typography, visual elements, brand voice. Keep it con
         return Array.from(out.values());
     }
     sanitizeMarkdownOutput(raw) {
-        // Unwrap any fenced blocks to plain markdown text
-        return raw
-            .replace(/```[a-zA-Z]*\n?/g, "")
-            .replace(/```\n?/g, "")
-            .trim();
+        // Preserve fenced code blocks (e.g., ```mermaid, ```ts) while stripping stray outer fences only
+        // If the model wrapped the whole document in a single fence, unwrap once; otherwise keep inner fences.
+        const singleFence = raw.match(/^```[a-zA-Z]*\n[\s\S]*\n```\s*$/);
+        if (singleFence) {
+            // unwrap outer fence only
+            return raw
+                .replace(/^```[a-zA-Z]*\n/, "")
+                .replace(/\n```\s*$/, "")
+                .trim();
+        }
+        return raw.trim();
+    }
+    splitPrdContent(raw) {
+        try {
+            const text = String(raw);
+            // Heuristic: look for section anchors
+            const idxReq = text.search(/###\s+Requirements|###\s+Detailed User Stories|###\s+Acceptance Criteria/i);
+            const idxFlows = text.search(/###\s+Flows|###\s+User Journeys|```mermaid/i);
+            let brief = text;
+            let requirements = "";
+            let flows = "";
+            if (idxReq !== -1) {
+                brief = text.slice(0, idxReq).trim();
+                const secondCut = idxFlows !== -1 && idxFlows > idxReq ? idxFlows : text.length;
+                requirements = text.slice(idxReq, secondCut).trim();
+                if (idxFlows !== -1) {
+                    flows = text.slice(idxFlows).trim();
+                }
+            }
+            return { brief, requirements, flows };
+        }
+        catch {
+            return { brief: raw, requirements: "", flows: "" };
+        }
     }
     buildSkeleton(type, projectContext) {
         switch (type) {
@@ -856,7 +1092,26 @@ Include: identity, colors, typography, visual elements, brand voice. Keep it con
             const readOrEmpty = async (rel) => (await fs.pathExists(path_1.default.join(cwd, rel)))
                 ? await fs.readFile(path_1.default.join(cwd, rel), "utf8")
                 : "";
-            const prd = await readOrEmpty(".mycontext/01-prd.md");
+            // Prefer split files if present
+            let prd = "";
+            const brief = (await readOrEmpty(".mycontext/01a-brief.md")) ||
+                (await readOrEmpty(".mycontext/01-brief.md"));
+            const reqs = (await readOrEmpty(".mycontext/01b-requirements.md")) ||
+                (await readOrEmpty(".mycontext/02-requirements.md"));
+            const flows = (await readOrEmpty(".mycontext/01c-flows.md")) ||
+                (await readOrEmpty(".mycontext/03-flows.md"));
+            if (brief || reqs || flows) {
+                prd = [
+                    brief ? "## Brief\n\n" + brief : "",
+                    reqs ? "\n\n## Requirements\n\n" + reqs : "",
+                    flows ? "\n\n## Flows\n\n" + flows : "",
+                ]
+                    .filter(Boolean)
+                    .join("");
+            }
+            if (!prd) {
+                prd = await readOrEmpty(".mycontext/01-prd.md");
+            }
             const types = await readOrEmpty(".mycontext/02-types.ts");
             const brand = await readOrEmpty(".mycontext/03-branding.md");
             // discover shadcn/ui primitives from components/ui
@@ -966,11 +1221,106 @@ Include: identity, colors, typography, visual elements, brand voice. Keep it con
     repairJson(raw) {
         // Remove any fenced code blocks markers
         let s = raw.replace(/```json\n?|```/gi, "");
-        // Remove stray " \" ", and trailing commas before ] or }
+        // Remove stray tokens and trailing commas before ] or }
         s = s.replace(/\s*" \" ",?\s*/g, "");
         s = s.replace(/,\s*(\]|\})/g, "$1");
+        // Quote bare identifiers for "name" fields, e.g., { "name": Dashboard } → { "name": "Dashboard" }
+        // Handles simple PascalCase/word identifiers without quotes
+        s = s.replace(/("name"\s*:\s*)([A-Za-z_][A-Za-z0-9_]*)/g, (_m, p1, p2) => `${p1}"${p2}"`);
         return s;
     }
+    buildProjectStructurePrompt(description, prd, types, compList) {
+        const groups = compList.groups || [];
+        const componentSummary = groups
+            .map((g) => `${g.name} (${g.components?.length || 0} components): ${g.description}`)
+            .join("\n");
+        return `Generate a Next.js project structure for: ${description}
+
+DESIGN PRINCIPLES:
+- Prioritize dialogs for details/forms/interactions (reduce page count)
+- Use datatables for reports and data metrics
+- Minimize standalone pages - favor modal workflows
+- Follow Next.js App Router patterns
+
+EXISTING CONTEXT:
+## PRD Summary:
+${prd.substring(0, 500)}...
+
+## Component Groups:
+${componentSummary}
+
+## Available Types:
+${types.substring(0, 300)}...
+
+PROJECT STRUCTURE REQUIREMENTS:
+1. Generate a realistic Next.js 13+ app directory structure
+2. Create minimal pages - favor dialogs and datatables
+3. Include API routes for each data entity
+4. Structure for the specific app type and complexity
+5. Show how components will be organized
+6. Include middleware, layouts, and error boundaries
+7. Plan for state management and data fetching
+
+Format as a markdown file with:
+- Clear directory tree structure
+- Explanation of each major directory/file
+- Component placement strategy
+- API route organization
+- State management approach
+
+Generate the complete project structure now:`;
+    }
+    buildFallbackProjectStructure(projectContext) {
+        const appType = projectContext.description?.toLowerCase() || "general";
+        const isEcommerce = appType.includes("ecommerce") || appType.includes("shop");
+        const isDashboard = appType.includes("dashboard") || appType.includes("admin");
+        return `# Project Structure
+
+## Core Next.js Structure
+\`\`\`
+${projectContext.name || "project"}/
+├── src/
+│   ├── app/
+│   │   ├── (auth)/
+│   │   │   ├── login/page.tsx
+│   │   │   └── register/page.tsx
+│   │   ├── dashboard/
+│   │   │   ├── page.tsx              # Main dashboard with dialogs
+│   │   │   └── loading.tsx
+│   │   ├── api/
+│   │   │   ├── auth/route.ts
+${isEcommerce
+            ? "│   │   │   ├── products/route.ts\n│   │   │   ├── orders/route.ts\n│   │   │   └── cart/route.ts"
+            : "│   │   │   ├── users/route.ts\n│   │   │   └── data/route.ts"}
+│   │   ├── globals.css
+│   │   ├── layout.tsx
+│   │   └── page.tsx                 # Landing page
+│   ├── components/
+│   │   ├── ui/                      # shadcn/ui components
+│   │   ├── dialogs/                 # Modal dialogs for forms/details
+│   │   │   ├── CreateDialog.tsx
+│   │   │   ├── EditDialog.tsx
+│   │   │   └── DetailsDialog.tsx
+│   │   ├── tables/                  # Data tables for reports
+│   │   │   ├── DataTable.tsx
+│   │   │   └── ReportsTable.tsx
+│   │   └── forms/                   # Reusable form components
+│   └── lib/
+│       ├── utils.ts
+│       ├── validations.ts
+│       └── api.ts
+├── components.json
+└── package.json
+\`\`\`
+
+## Design Strategy
+- **Minimal Pages**: Use dialogs for forms and detail views
+- **Datatables**: Centralized data display with inline actions
+- **Modal-First**: Most interactions happen in dialogs
+- **API-Driven**: Each entity has dedicated API routes
+- **Component Organization**: Group by function, not feature
+`;
+    }
     printNextStepsAfterGenerate(type) {
         try {
             switch (type) {
@@ -983,12 +1333,20 @@ Include: identity, colors, typography, visual elements, brand voice. Keep it con
                     console.log(chalk_1.default.gray("   mycontext generate components-list   # alias: component-list"));
                     break;
                 case "components-list":
-                    console.log(chalk_1.default.blue("\n➡️ Next: Generate components"));
+                    console.log(chalk_1.default.blue("\n➡️ Next: Generate project structure"));
+                    console.log(chalk_1.default.gray("   mycontext generate project-structure"));
+                    console.log(chalk_1.default.blue("\n💡 Then: Generate components"));
                     console.log(chalk_1.default.gray("   mycontext generate-components all --with-tests   # optional tests"));
                     console.log(chalk_1.default.blue("➡️ Preview:"));
                     console.log(chalk_1.default.gray("   Visit /preview (dev server)"));
                     console.log(chalk_1.default.gray("   mycontext normalize preview   # optional final layout"));
                     break;
+                case "project-structure":
+                    console.log(chalk_1.default.blue("\n➡️ Next: Generate components"));
+                    console.log(chalk_1.default.gray("   mycontext generate-components all --with-tests   # optional tests"));
+                    console.log(chalk_1.default.blue("➡️ Preview:"));
+                    console.log(chalk_1.default.gray("   Visit /preview (dev server)"));
+                    break;
                 default:
                     break;
             }