mycontext-cli 2.0.7 → 2.0.8

package/README.md

@@ -56,6 +56,14 @@ mycontext build-app --interactive
 - **Build validation** before moving forward
 - **Automatic retries** with error context (max 3 attempts)
 
+### ✅ UI Specification System
+
+- **Plain-English specs** from component descriptions
+- **JSON-to-spec conversion** for structured input
+- **Built-in templates** for common patterns (cards, forms, buttons)
+- **Detailed implementation guidance** with accessibility & responsive requirements
+- **Integrated workflow** with component generation
+
 ### ✅ Visual Preview
 
 - **Figma-like component board** for visual testing
@@ -81,6 +89,14 @@ mycontext preview <type>                    # Preview components/app
 mycontext build-app                         # Build complete application
 ```
 
+### UI Specification
+
+```bash
+mycontext refine spec <component> --desc "description"    # Generate UI spec from description
+mycontext refine spec <component> --json-file <path>      # Generate UI spec from JSON
+mycontext generate-components all --verbose                # Auto-generate specs with components
+```
+
 ### Setup & Configuration
 
 ```bash
@@ -121,11 +137,65 @@ my-app/
 │   ├── 05-component-list.json    # Generated component list
 │   └── .env                      # API keys
 ├── components/                    # Generated components
+│   └── dashboard/
+│       ├── RevenueCard.tsx       # Component file
+│       ├── RevenueCard.spec.md   # UI specification
+│       └── index.ts              # Export file
 ├── actions/                       # Server actions (if full-stack)
 ├── app/                          # Next.js routes (if full-stack)
 └── package.json
 ```
 
+## 📋 UI Specification Example
+
+Generate detailed, plain-English specifications from simple descriptions:
+
+```bash
+mycontext refine spec RevenueCard --desc "A card showing total revenue prominently with percentage change"
+```
+
+**Output:**
+
+```
+📋 UI Specification for RevenueCard
+
+📝 Compact Specification:
+**RevenueCard Component - Compact Spec**
+
+**Visual Hierarchy:**
+- Primary: Total Revenue, $125,430
+- Secondary: +12.5% from last month
+
+**Layout:** vertical arrangement
+**Spacing:** medium spacing between elements
+**Colors:** primary, success theme
+
+📋 Detailed Specification:
+**RevenueCard Component - Detailed Implementation Spec**
+
+**Component Overview:**
+- Name: RevenueCard
+- Type: card
+- Description: A card component displaying revenue metrics...
+
+**Visual Hierarchy:**
+1. **title**: Total Revenue
+   - Prominence: medium (medium (~16px))
+2. **value**: $125,430
+   - Prominence: high (large (~32px))
+3. **subtitle**: +12.5% from last month
+   - Prominence: low (small (~12px))
+
+**Accessibility Requirements:**
+- All interactive elements must have aria-label or aria-labelledby
+- Focus management: tab order follows visual hierarchy
+- Color contrast: minimum 4.5:1 ratio for text
+
+**Responsive Adjustments:**
+- Mobile (< 768px): Reduce spacing to 12px, stack vertically
+- Desktop (> 768px): Standard spacing, maintain layout
+```
+
 ## 🆚 MyContext vs Others
 
 | Feature                  | MyContext       | Lovable    | v0.dev      |
@@ -134,6 +204,7 @@ my-app/
 | **Validation Gates**     | 12+ checkpoints | None       | None        |
 | **Build Validation**     | Every component | None       | None        |
 | **TypeScript Guarantee** | 100%            | No         | No          |
+| **UI Specifications**    | Plain-English   | None       | None        |
 | **Pricing**              | BYOK ($0-20/mo) | $20-200/mo | Usage-based |
 | **Deployment**           | Anywhere        | Limited    | Vercel only |
 
@@ -159,6 +230,19 @@ mycontext setup  # Reconfigure API keys
 mycontext health-check  # Verify setup
 ```
 
+**"UI Spec Generation Failed"**
+
+```bash
+# Check if templates exist
+ls src/templates/ui-spec-templates.json
+
+# Generate spec with verbose output
+mycontext refine spec ComponentName --desc "description" --verbose
+
+# Use JSON input instead of description
+mycontext refine spec ComponentName --json-file component.json
+```
+
 ## 📚 Documentation
 
 - [Getting Started](https://github.com/farajabien/mycontext-cli#quick-start)

package/dist/commands/generate-components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"generate-components.d.ts","sourceRoot":"","sources":["../../src/commands/generate-components.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAW1C,UAAU,yBAA0B,SAAQ,cAAc;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,mBAAmB,GAAG,cAAc,GAAG,WAAW,CAAC;CACvE;AAID,qBAAa,yBAAyB;IACpC,OAAO,CAAC,EAAE,CAA2B;IACrC,OAAO,CAAC,SAAS,CAAyB;IAC1C,OAAO,CAAC,kBAAkB,CAAoC;IAC9D,OAAO,CAAC,gBAAgB,CAYtB;IACF,OAAO,CAAC,WAAW,CAAa;IAGhC,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,cAAc;YAaR,eAAe;YAiBf,kCAAkC;IAwMhD,OAAO,CAAC,6BAA6B;IAoBrC,OAAO,CAAC,oBAAoB;IAc5B,OAAO,CAAC,sBAAsB;IAIxB,OAAO,CACX,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,yBAAyB,GACjC,OAAO,CAAC,IAAI,CAAC;YAqGF,oBAAoB;IA+GlC,OAAO,CAAC,iBAAiB;YAsBX,qBAAqB;YAgKrB,sBAAsB;IAsGpC;;OAEG;YACW,kCAAkC;IA0EhD;;OAEG;YACW,gBAAgB;YAqChB,iBAAiB;IAmO/B;;OAEG;YACW,+BAA+B;YA6F/B,cAAc;IAgD5B,OAAO,CAAC,uBAAuB;YAiFjB,oBAAoB;IAoBlC;;OAEG;YACW,mBAAmB;YAsEnB,qBAAqB;YAsCrB,cAAc;YAyDd,kBAAkB;YAgClB,mBAAmB;YAoDnB,qBAAqB;IA+InC;;;OAGG;YACW,iBAAiB;IAyF/B,OAAO,CAAC,mBAAmB;YA6Bb,kBAAkB;IA6BhC;;OAEG;YACW,4BAA4B;IAoG1C;;OAEG;IACH,OAAO,CAAC,0BAA0B;IASlC,OAAO,CAAC,sBAAsB;IAuB9B;;OAEG;YACW,iCAAiC;IA6B/C;;OAEG;YACW,qBAAqB;IAqBnC;;OAEG;IACH,OAAO,CAAC,wBAAwB;IAsChC;;OAEG;YACW,cAAc;IAmC5B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAmB3B;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAa7B;;OAEG;YACW,kBAAkB;IAUhC;;OAEG;IACH,OAAO,CAAC,yBAAyB;IA2CjC;;OAEG;IACH,OAAO,CAAC,iBAAiB;CA+B1B"}
+{"version":3,"file":"generate-components.d.ts","sourceRoot":"","sources":["../../src/commands/generate-components.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAW1C,UAAU,yBAA0B,SAAQ,cAAc;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,mBAAmB,GAAG,cAAc,GAAG,WAAW,CAAC;CACvE;AAID,qBAAa,yBAAyB;IACpC,OAAO,CAAC,EAAE,CAA2B;IACrC,OAAO,CAAC,SAAS,CAAyB;IAC1C,OAAO,CAAC,kBAAkB,CAAoC;IAC9D,OAAO,CAAC,gBAAgB,CAYtB;IACF,OAAO,CAAC,WAAW,CAAa;IAGhC,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,cAAc;YAaR,eAAe;YAiBf,kCAAkC;IA0MhD,OAAO,CAAC,6BAA6B;IAoBrC,OAAO,CAAC,oBAAoB;IAc5B,OAAO,CAAC,sBAAsB;IAIxB,OAAO,CACX,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,yBAAyB,GACjC,OAAO,CAAC,IAAI,CAAC;YAqGF,oBAAoB;IA+GlC,OAAO,CAAC,iBAAiB;YAsBX,qBAAqB;YAyKrB,sBAAsB;IAsGpC;;OAEG;YACW,kCAAkC;IA0EhD;;OAEG;YACW,gBAAgB;YAqChB,iBAAiB;IA2Q/B;;OAEG;YACW,+BAA+B;YA6F/B,cAAc;IAgD5B,OAAO,CAAC,uBAAuB;YAiFjB,oBAAoB;IAoBlC;;OAEG;YACW,mBAAmB;YAsEnB,qBAAqB;YAsCrB,cAAc;YAyDd,kBAAkB;YAgClB,mBAAmB;YAoDnB,qBAAqB;IA+InC;;;OAGG;YACW,iBAAiB;IAyF/B,OAAO,CAAC,mBAAmB;YA6Bb,kBAAkB;IA6BhC;;OAEG;YACW,4BAA4B;IAiK1C;;OAEG;IACH,OAAO,CAAC,0BAA0B;IAWlC,OAAO,CAAC,sBAAsB;IA6B9B;;OAEG;YACW,iCAAiC;IA+B/C;;OAEG;YACW,qBAAqB;IAwBnC;;OAEG;IACH,OAAO,CAAC,wBAAwB;IA6ChC;;OAEG;YACW,cAAc;IA0C5B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAgC3B;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAa7B;;OAEG;YACW,kBAAkB;IAUhC;;OAEG;IACH,OAAO,CAAC,yBAAyB;IA2CjC;;OAEG;IACH,OAAO,CAAC,iBAAiB;CA+B1B"}

package/dist/commands/generate-components.js

@@ -436,7 +436,9 @@ class GenerateComponentsCommand {
         }
         const componentList = JSON.parse(await this.fs.readFile(componentListPath));
         // Check if complete architecture generation is requested
-        if (options.completeArchitecture || options.serverActions || options.routes) {
+        if (options.completeArchitecture ||
+            options.serverActions ||
+            options.routes) {
             await this.generateCompleteArchitecture(componentList, options, spinner, userId);
             return;
         }
@@ -804,6 +806,31 @@ class GenerateComponentsCommand {
             }
             const fileBase = this.getComponentBaseName(component);
             const componentPath = path.join(groupDir, `${fileBase}.tsx`);
+            // Generate UI specification before writing component
+            if (options.verbose) {
+                console.log(chalk_1.default.blue(`📋 Generating UI specification for ${component.name}...`));
+                try {
+                    const { RefineCommand } = await Promise.resolve().then(() => __importStar(require("./refine")));
+                    const refineCommand = new RefineCommand();
+                    const uiSpec = await refineCommand.generateUISpec({
+                        componentName: component.name,
+                        description: component.description,
+                        outputFormat: "compact",
+                        template: "custom",
+                        verbose: false,
+                    });
+                    // Write UI spec to file
+                    const specPath = path.join(groupDir, `${fileBase}.spec.md`);
+                    const specContent = `# UI Specification for ${component.name}\n\n${uiSpec.compactSpec}\n\n---\n\n${uiSpec.detailedSpec}`;
+                    await this.fs.writeFile(specPath, specContent);
+                    if (options.verbose) {
+                        console.log(chalk_1.default.green(`  ✓ UI specification generated: ${specPath}`));
+                    }
+                }
+                catch (error) {
+                    console.log(chalk_1.default.yellow(`  ⚠️  UI spec generation failed: ${error}`));
+                }
+            }
             // Fix common identifier issues (spaces in names) in generated code
             const safeName = this.getComponentBaseName(component);
             const fixedCode = codeResult.code
@@ -1572,7 +1599,9 @@ export default function PreviewPage() {
         }
         // Build complete generation queue with actions, routes, and documentation
         const queue = await this.architectureEngine.buildCompleteGenerationQueue(rootComponent);
-        spinner.success({ text: `Architecture plan ready: ${queue.length} components with actions and routes` });
+        spinner.success({
+            text: `Architecture plan ready: ${queue.length} components with actions and routes`,
+        });
         console.log(chalk_1.default.blue("\n📋 Architecture Overview:"));
         console.log(chalk_1.default.gray(`  • Total Components: ${queue.length}`));
         console.log(chalk_1.default.gray(`  • Total Server Actions: ${queue.reduce((acc, item) => acc + item.serverActions.length, 0)}`));
@@ -1581,8 +1610,9 @@ export default function PreviewPage() {
         // Create complete architecture plan
         const architecturePlan = await this.architectureEngine.createCompleteArchitecturePlan(rootComponent, {
             name: this.contextArtifacts.prd ? "Project" : "Application",
-            description: this.contextArtifacts.prd?.split('\n')[0] || "Full-stack application",
-            architecture: options.architectureType || "nextjs-app-router"
+            description: this.contextArtifacts.prd?.split("\n")[0] ||
+                "Full-stack application",
+            architecture: options.architectureType || "nextjs-app-router",
         });
         // Save architecture plan
         const planPath = path.join(process.cwd(), ".mycontext", "architecture-plan.json");
@@ -1625,7 +1655,7 @@ export default function PreviewPage() {
             console.log(chalk_1.default.gray(`  • ${totalActions} server actions in ${actionsDir}`));
         }
         if (options.completeArchitecture || options.routes) {
-            const totalRoutes = new Set(queue.flatMap(item => item.routes.map(r => r.path))).size;
+            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:"));
@@ -1639,7 +1669,7 @@ export default function PreviewPage() {
      */
     convertToEnhancedComponent(componentList) {
         // Find root component
-        const rootKey = Object.keys(componentList).find(key => key !== "metadata");
+        const rootKey = Object.keys(componentList).find((key) => key !== "metadata");
         if (!rootKey)
             return null;
         const root = componentList[rootKey];
@@ -1656,7 +1686,7 @@ export default function PreviewPage() {
             tags: [],
             routes: [],
             actions: [],
-            children: {}
+            children: {},
         };
         if (node.children) {
             Object.entries(node.children).forEach(([childName, childData]) => {
@@ -1671,7 +1701,7 @@ export default function PreviewPage() {
     async generateComponentWithArchitecture(item, options, userId) {
         // Use existing generateComponent logic but return only the code
         const { orchestrator } = await Promise.resolve().then(() => __importStar(require("../agents/orchestrator/SubAgentOrchestrator")));
-        const codeResult = await orchestrator.executeAgent("CodeGenSubAgent", {
+        const codeResult = (await orchestrator.executeAgent("CodeGenSubAgent", {
             component: item.component,
             group: { name: "Generated" },
             options: {
@@ -1684,10 +1714,10 @@ export default function PreviewPage() {
                     stackConfig: this.stackConfig,
                     serverActions: item.serverActions,
                     routes: item.routes,
-                    actions: item.actions
-                }
-            }
-        });
+                    actions: item.actions,
+                },
+            },
+        }));
         return codeResult.code;
     }
     /**
@@ -1696,7 +1726,7 @@ export default function PreviewPage() {
     async generateServerActions(queue, actionsDir) {
         // Group actions by component
         const actionsByComponent = new Map();
-        queue.forEach(item => {
+        queue.forEach((item) => {
             if (item.serverActions.length > 0) {
                 actionsByComponent.set(item.component.name, item.serverActions);
             }
@@ -1719,21 +1749,26 @@ import { db } from '@/lib/db';
 import { z } from 'zod';
 import { revalidatePath } from 'next/cache';
 `;
-        const actionCode = actions.map(action => {
-            const params = action.parameters.map((p) => `${p.name}${p.required ? '' : '?'}: ${p.type}`).join(', ');
+        const actionCode = actions
+            .map((action) => {
+            const params = action.parameters
+                .map((p) => `${p.name}${p.required ? "" : "?"}: ${p.type}`)
+                .join(", ");
             return `
 /**
  * ${action.description}
  *
- * @param {${action.parameters.map((p) => `${p.type}`).join(', ')}} ${action.parameters.map((p) => p.name).join(', ')}
+ * @param {${action.parameters
+                .map((p) => `${p.type}`)
+                .join(", ")}} ${action.parameters.map((p) => p.name).join(", ")}
  * @returns {Promise<${action.returns}>}
  */
 export async function ${action.name}(${params}): Promise<${action.returns}> {
   try {
     // TODO: Implement ${action.name}
-    ${action.database ? `// Database: ${action.database}` : ''}
-    ${action.validation ? `// Validation: ${action.validation}` : ''}
-    ${action.middleware ? `// Middleware: ${action.middleware.join(', ')}` : ''}
+    ${action.database ? `// Database: ${action.database}` : ""}
+    ${action.validation ? `// Validation: ${action.validation}` : ""}
+    ${action.middleware ? `// Middleware: ${action.middleware.join(", ")}` : ""}
 
     throw new Error('Not implemented');
   } catch (error) {
@@ -1741,7 +1776,8 @@ export async function ${action.name}(${params}): Promise<${action.returns}> {
     throw error;
   }
 }`;
-        }).join('\n');
+        })
+            .join("\n");
         return `${imports}\n${actionCode}\n`;
     }
     /**
@@ -1750,10 +1786,13 @@ export async function ${action.name}(${params}): Promise<${action.returns}> {
     async generateRoutes(queue, appDir, architectureType) {
         const routeMap = new Map();
         // Collect unique routes
-        queue.forEach(item => {
+        queue.forEach((item) => {
             item.routes.forEach((route) => {
                 if (!routeMap.has(route.path)) {
-                    routeMap.set(route.path, { ...route, components: [item.component.name] });
+                    routeMap.set(route.path, {
+                        ...route,
+                        components: [item.component.name],
+                    });
                 }
                 else {
                     const existing = routeMap.get(route.path);
@@ -1762,15 +1801,15 @@ export async function ${action.name}(${params}): Promise<${action.returns}> {
             });
         });
         for (const [routePath, route] of routeMap.entries()) {
-            const routeDir = path.join(appDir, routePath === '/' ? '' : routePath);
+            const routeDir = path.join(appDir, routePath === "/" ? "" : routePath);
             await this.fs.ensureDir(routeDir);
             // Generate page.tsx
-            const pagePath = path.join(routeDir, 'page.tsx');
+            const pagePath = path.join(routeDir, "page.tsx");
             const pageContent = this.generatePageContent(route);
             await this.fs.writeFile(pagePath, pageContent);
             // Generate layout.tsx if specified
             if (route.layout) {
-                const layoutPath = path.join(routeDir, 'layout.tsx');
+                const layoutPath = path.join(routeDir, "layout.tsx");
                 const layoutContent = this.generateLayoutContent(route);
                 await this.fs.writeFile(layoutPath, layoutContent);
             }
@@ -1781,13 +1820,17 @@ export async function ${action.name}(${params}): Promise<${action.returns}> {
      * Generate page content for route
      */
     generatePageContent(route) {
-        const isDynamic = route.type === 'dynamic';
-        const params = isDynamic ? '{ params }: { params: { id: string } }' : '';
+        const isDynamic = route.type === "dynamic";
+        const params = isDynamic ? "{ params }: { params: { id: string } }" : "";
         return `import { ${route.components[0]} } from '@/components/.mycontext/${this.toKebabCase(route.components[0])}/${route.components[0]}';
-${route.actions.map((action) => `import { ${action} } from '@/actions/${this.toKebabCase(action)}';`).join('\n')}
+${route.actions
+            .map((action) => `import { ${action} } from '@/actions/${this.toKebabCase(action)}';`)
+            .join("\n")}
 
 export default async function Page(${params}) {
-  ${isDynamic ? `// Fetch data using ${route.actions[0] || 'getData'}(params.id)` : ''}
+  ${isDynamic
+            ? `// Fetch data using ${route.actions[0] || "getData"}(params.id)`
+            : ""}
 
   return (
     <div className="container mx-auto py-8">