mycontext-cli 2.0.4 → 2.0.5

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mycontext-cli",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "description": "Component-first visual builder with zero-error guarantees. Generate and validate React/Next.js components one at a time, preview them visually, then scale to complete applications using Claude Agent SDK.",
   "main": "dist/cli.js",
   "bin": {
@@ -11,7 +11,7 @@
     "build": "npm run build:clean && npm run build:compile && npm run build:copy",
     "build:clean": "rm -rf dist && ([ \"$npm_config_loglevel\" = \"silent\" ] || echo '🧹 Cleaned build directory')",
     "build:compile": "([ \"$npm_config_loglevel\" = \"silent\" ] || echo '🔨 Compiling TypeScript...') && tsc --noEmitOnError false",
-    "build:copy": "([ \"$npm_config_loglevel\" = \"silent\" ] || echo '📋 Copying config files...') && cp -r src/config dist/ && cp package.json dist/ && cp README.md dist/ && ([ \"$npm_config_loglevel\" = \"silent\" ] || echo '✅ Build complete')",
+    "build:copy": "([ \"$npm_config_loglevel\" = \"silent\" ] || echo '📋 Copying config files...') && cp -r src/config dist/ && cp package.json dist/ && ([ \"$npm_config_loglevel\" = \"silent\" ] || echo '✅ Build complete')",
     "dev": "ts-node src/cli.ts",
     "start": "node dist/cli.js",
     "watch": "tsc --watch --pretty",
@@ -80,6 +80,7 @@
   },
   "files": [
     "dist/",
-    "README.md"
+    "README.md",
+    "package.json"
   ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mycontext-cli",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "description": "Component-first visual builder with zero-error guarantees. Generate and validate React/Next.js components one at a time, preview them visually, then scale to complete applications using Claude Agent SDK.",
   "main": "dist/cli.js",
   "bin": {
@@ -11,7 +11,7 @@
     "build": "npm run build:clean && npm run build:compile && npm run build:copy",
     "build:clean": "rm -rf dist && ([ \"$npm_config_loglevel\" = \"silent\" ] || echo '🧹 Cleaned build directory')",
     "build:compile": "([ \"$npm_config_loglevel\" = \"silent\" ] || echo '🔨 Compiling TypeScript...') && tsc --noEmitOnError false",
-    "build:copy": "([ \"$npm_config_loglevel\" = \"silent\" ] || echo '📋 Copying config files...') && cp -r src/config dist/ && cp package.json dist/ && cp README.md dist/ && ([ \"$npm_config_loglevel\" = \"silent\" ] || echo '✅ Build complete')",
+    "build:copy": "([ \"$npm_config_loglevel\" = \"silent\" ] || echo '📋 Copying config files...') && cp -r src/config dist/ && cp package.json dist/ && ([ \"$npm_config_loglevel\" = \"silent\" ] || echo '✅ Build complete')",
     "dev": "ts-node src/cli.ts",
     "start": "node dist/cli.js",
     "watch": "tsc --watch --pretty",
@@ -80,6 +80,7 @@
   },
   "files": [
     "dist/",
-    "README.md"
+    "README.md",
+    "package.json"
   ]
 }

package/dist/README.md

@@ -1,711 +0,0 @@
-# MyContext CLI
-
-**🎨 Component-First Visual Builder with Zero-Error Guarantees**
-
-[![npm version](https://badge.fury.io/js/mycontext-cli.svg)](https://www.npmjs.com/package/mycontext-cli)
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-[![Node Version](https://img.shields.io/badge/node-%3E%3D18.0.0-brightgreen)](https://nodejs.org)
-
-Build production-ready React/Next.js components **one at a time**, preview them visually, validate with automatic build checks, then scale to complete applications. Every component guaranteed **zero TypeScript/ESLint/build errors**.
-
-## 🚀 Quick Start
-
-```bash
-# Install globally
-npm install -g mycontext-cli
-
-# Component-first workflow: Generate → Preview → Validate → Build
-mycontext init my-app
-mycontext generate-components Button --with-tests
-mycontext preview components
-mycontext build-app --interactive  # Scale to full app when ready
-```
-
-## 💡 Philosophy: Component-First Development
-
-MyContext starts small and scales gradually:
-
-1. **Generate individual components** → Build your component library piece by piece
-2. **Visual preview** → See components in browser before integration
-3. **Automatic validation** → TypeScript, ESLint, build checks on every component
-4. **Iterate quickly** → Fix issues at component-level, not app-level
-5. **Scale when ready** → Assemble validated components into full applications
-
-**Result:** Component libraries with 0 errors, ready for production.
-
----
-
-## 🎯 When to Use MyContext
-
-### ✅ Perfect For
-
-**🚀 MVPs & Prototypes**
-- Ship standard features in 7-15 days, not months
-- Focus on validating your unique value proposition
-- Get to market fast with production-ready code
-
-**🏢 Internal Tools & Admin Dashboards**
-- Employee management systems
-- CRUD applications
-- Content management interfaces
-- Analytics dashboards
-
-**👤 Solo Developers & Small Teams**
-- Skip the authentication/dashboard boilerplate
-- Focus on your product's unique features
-- Reuse component libraries across projects
-
-**📦 Apps Built on Standard Patterns**
-- Authentication flows (login, signup, password reset)
-- User dashboards and profiles
-- Settings and configuration pages
-- Marketing pages (home, pricing, about)
-- CRUD operations and data tables
-
-**⚡ Rapid Validation & Testing**
-- Quickly test product ideas with real users
-- Build multiple variations to find product-market fit
-- Iterate fast with validated components
-
-### ⚠️ Not Ideal For
-
-**🎨 Highly Custom UI/UX**
-- Apps where custom design IS the product (Figma, Notion, Linear)
-- Unique component libraries and design systems
-- Apps with non-standard interaction patterns
-
-**🏦 Complex Domain-Specific Logic**
-- Fintech apps with specialized workflows
-- Healthcare apps with custom compliance requirements
-- Apps where every flow is unique to your industry
-
-**🎛️ Full Architectural Control Required**
-- When you need to architect every detail from scratch
-- Apps with highly specific performance requirements
-- Custom infrastructure and deployment needs
-
-**📱 Design-as-Differentiator Products**
-- When your visual design IS your competitive advantage
-- Apps competing on unique user experience
-- Custom animation and interaction-heavy apps
-
-### 💡 The 70/30 Rule
-
-MyContext generates the **70% that's universal** (authentication, layouts, CRUD, routing, settings), so you can focus on the **30% that's unique** (your product's core value and competitive advantage).
-
-**Real Examples:**
-
-✅ **E-commerce Platform**
-- **MyContext generates**: Auth, product tables, cart UI, user dashboard, admin panel
-- **You customize**: Payment flow, recommendation engine, product discovery, checkout experience
-
-✅ **SaaS Dashboard**
-- **MyContext generates**: User management, settings, billing pages, data tables, layouts
-- **You build**: The core product feature that makes your SaaS valuable
-
-✅ **Blog Platform**
-- **MyContext generates**: Auth, post CRUD, user profiles, admin panel, marketing pages
-- **You customize**: Reading experience, content discovery, social features
-
-✅ **Internal Tool**
-- **MyContext generates**: Everything - auth, CRUD, dashboards, reports, settings
-- **You customize**: Business logic, integrations, custom workflows
-
-### 🎯 Quick Decision Guide
-
-**Use MyContext if:**
-- ✅ Your app follows standard web patterns
-- ✅ You need to ship an MVP in 2-3 weeks
-- ✅ Your unique value is NOT in the UI
-- ✅ You want zero-error, production-ready code
-- ✅ You're building internal tools or admin dashboards
-
-**Consider alternatives if:**
-- ❌ Your UI/UX is your competitive advantage
-- ❌ You're building the next Figma or Notion
-- ❌ You need full control over every architectural decision
-- ❌ Your app has zero standard patterns
-
----
-
-## 📖 Examples
-
-### Start with a Single Component
-
-```bash
-# Generate and preview a button component
-mycontext generate-components Button --with-tests
-mycontext preview components
-
-# Generated:
-# - Button.tsx (validated, zero errors)
-# - Button.test.tsx
-# - Preview HTML in browser
-```
-
-### Build a Component Library
-
-```bash
-# Generate authentication components one by one
-mycontext generate-components LoginForm --with-tests
-mycontext generate-components SignupForm --with-tests
-mycontext generate-components PasswordReset --with-tests
-
-# Preview all auth components together
-mycontext preview authentication
-
-# Each component automatically validated:
-# ✅ TypeScript check passed
-# ✅ ESLint passed
-# ✅ Build passed
-# ✅ Tests passed
-```
-
-### Scale to Complete Application
-
-```bash
-# Once components are validated, build full app
-mycontext build-app \
-  --description "E-commerce with product catalog, cart, and checkout" \
-  --interactive \
-  --complete-architecture
-
-# Reuses validated components + generates:
-# - Server actions for CRUD
-# - Next.js App Router routes
-# - Full TypeScript types
-# - Integration tests
-```
-
----
-
-## 🎯 Features
-
-### 🎨 Visual Component Preview
-
-Generate interactive HTML previews of your components before building:
-
-- **Brand preview** - See your color palette, typography, and design tokens
-- **Component preview** - View all components organized by groups
-- **Group preview** - Focus on specific component families
-- **Auto-open in browser** - Instant visual feedback
-
-```bash
-mycontext preview brand          # Preview design system
-mycontext preview components     # Preview all components
-mycontext preview authentication # Preview specific group
-```
-
-### ✅ Zero-Error Component Validation
-
-**Every single component** automatically validated before save:
-
-- ✅ TypeScript check (`tsc --noEmit`)
-- ✅ ESLint validation
-- ✅ Build check (`npm run build`)
-- ✅ Unit tests (if `--with-tests`)
-
-**Failed components retry automatically** with error context (max 3 attempts).
-
-```
-🔨 Generating: LoginForm
-   ✅ Code Generated
-   ✅ TypeScript Check Passed
-   ✅ ESLint Passed
-   ✅ Build Passed
-   ✅ Tests Passed
-```
-
-### 🧩 Component-First Workflow
-
-Build your application **one component at a time**:
-
-1. **Generate individual components** or component groups
-2. **Preview components** in browser before integration
-3. **Iterate and refine** at component level
-4. **Build component libraries** with validated pieces
-5. **Scale to full apps** when ready
-
-```bash
-# Start small
-mycontext generate-components Button --with-tests
-
-# Build a group
-mycontext generate-components authentication --with-tests
-
-# Preview your work
-mycontext preview components
-
-# Scale to full app
-mycontext build-app --interactive
-```
-
-### 📊 Real-Time Progress Tracking
-
-Track component generation progress via JSON files in `.mycontext/progress/`:
-
-```json
-{
-  "currentPhase": "component_generation",
-  "currentStep": 15,
-  "totalSteps": 30,
-  "percentComplete": 50.0,
-  "currentComponent": "LoginForm"
-}
-```
-
-**Perfect for VS Code extensions & build dashboards.**
-
-### 🏗️ Scale to Complete Architecture
-
-When ready, generate full-stack apps with `--complete-architecture`:
-
-- Next.js 15 App Router routes
-- Server actions with validation
-- Self-documenting components
-- Type-safe throughout
-- **Reuses your validated components**
-
----
-
-## 📋 Commands
-
-### Component Generation (Recommended)
-
-```bash
-# Generate individual component
-mycontext generate-components Button --with-tests
-
-# Generate component group
-mycontext generate-components authentication --with-tests
-
-# Generate all components
-mycontext generate-components all --with-tests
-
-# Options:
-  --with-tests                # Generate unit tests for each component
-  --group <group>             # Specify component group
-  --check                     # Run typecheck, lint, tests after generation
-  --verbose                   # Show detailed output
-```
-
-### Visual Preview
-
-```bash
-# Preview brand elements
-mycontext preview brand
-
-# Preview all components
-mycontext preview components
-
-# Preview specific component group
-mycontext preview authentication
-
-# Options:
-  --no-open                   # Don't auto-open in browser
-  --port <number>             # Port for local server (default: 3000)
-```
-
-### Component-First Workflow
-
-```bash
-# 1. Initialize project
-mycontext init my-app
-
-# 2. Generate context files
-mycontext generate-context-files --description "Your app"
-
-# 3. Generate individual components
-mycontext generate-components LoginForm --with-tests
-mycontext generate-components SignupForm --with-tests
-
-# 4. Preview components
-mycontext preview components
-
-# 5. Scale to full app (when ready)
-mycontext build-app --interactive
-```
-
-### Scale to Complete App
-
-**Component-First Mode (NEW - Recommended):**
-
-Build apps by reusing existing validated components:
-
-```bash
-# After generating components individually:
-mycontext generate-components LoginForm --with-tests
-mycontext generate-components Dashboard --with-tests
-mycontext generate-components SignupForm --with-tests
-
-# Build app - automatically detects & reuses components
-mycontext build-app --interactive --complete-architecture
-
-# Claude Agent SDK will:
-# 1. Detect 3 validated components ✅
-# 2. Decide REUSE_COMPONENTS mode 🎯
-# 3. Map components to routes intelligently 🗺️
-# 4. Generate scaffolding only (routes, actions, hooks) 🏗️
-```
-
-**Traditional Mode (Generate Everything):**
-
-```bash
-mycontext build-app --description "Your app" --interactive
-
-# Options:
-  --output <dir>              # Output directory (default: mycontext-app)
-  --interactive               # Interactive mode with validation prompts
-  --with-tests                # Generate unit tests
-  --complete-architecture     # Generate server actions + routes
-  --architecture-type         # nextjs-app-router | nextjs-pages | react-spa
-  --max-retries 3             # Max retry attempts
-  --verbose                   # Show detailed output
-```
-
-**How it works:**
-
-1. **Automatic Detection** - Claude Agent SDK detects existing components
-2. **Smart Decision** - AI chooses: REUSE vs GENERATE based on what's available
-3. **Intelligent Mapping** - Maps components to routes (LoginForm → /login)
-4. **Scaffolding Only** - Generates integration layer, not components
-
-### Other Commands
-
-```bash
-mycontext setup                    # Configure AI providers
-mycontext build-strategy          # Interactive strategy selection
-mycontext analyze                 # Analyze existing project
-mycontext list [type]             # List components/projects
-mycontext enhance <component>     # Enhance component with AI
-mycontext refine <component>      # Refine component with AI
-```
-
----
-
-## ⚙️ Configuration
-
-### API Keys (BYOK Model)
-
-MyContext uses **your own API keys** - no billing from us.
-
-**Recommended providers:**
-
-```bash
-# Claude (best for complex reasoning)
-echo 'MYCONTEXT_CLAUDE_API_KEY=sk-ant-xxx' > .mycontext/.env
-
-# X.AI Grok (best for code generation)
-echo 'MYCONTEXT_XAI_API_KEY=xai-xxx' > .mycontext/.env
-
-# OpenAI (most versatile)
-echo 'MYCONTEXT_OPENAI_API_KEY=sk-xxx' > .mycontext/.env
-```
-
-**Free tier:**
-
-```bash
-# Qwen3 (free via OpenRouter)
-echo 'MYCONTEXT_QWEN_API_KEY=sk-or-xxx' > .mycontext/.env
-```
-
-### Project Structure
-
-```
-my-app/
-├── .mycontext/
-│   ├── 01-prd.md                 # Product Requirements
-│   ├── 02-a-features.md          # Features
-│   ├── 02-b-user-flows.md        # User flows
-│   ├── 02-c-edge-cases.md        # Edge cases
-│   ├── 02-d-technical-specs.md   # Tech specs
-│   ├── 03-types.ts               # TypeScript types
-│   ├── 04-branding.md            # Branding
-│   ├── 05-component-list.json    # Component list
-│   ├── progress/                 # Progress tracking
-│   │   ├── master.json           # Master progress
-│   │   └── 07-components/        # Per-component progress
-│   └── .env                      # API keys
-├── components/                    # Generated components
-├── actions/                       # Server actions (--complete-architecture)
-├── app/                          # Routes (--complete-architecture)
-└── package.json
-```
-
----
-
-## 🎓 How It Works (Component-First with Claude Agent SDK)
-
-MyContext uses **Claude Agent SDK** with intelligent component detection and reuse. The workflow automatically adapts based on what exists in your project.
-
-### 1. Intelligent Component Detection (NEW)
-
-Claude Agent SDK automatically detects existing components:
-
-```bash
-mycontext build-app --interactive --complete-architecture
-```
-
-**Detection Report:**
-```
-🔍 Detecting existing components...
-
-✅ Found 5 validated components:
-   - LoginForm (authentication) - All checks passed ✅
-   - Dashboard (admin) - All checks passed ✅
-   - SignupForm (authentication) - All checks passed ✅
-   - ProfileCard (user) - All checks passed ✅
-   - SettingsPanel (admin) - All checks passed ✅
-
-🎯 Recommendation: REUSE_COMPONENTS
-   → Skipping component generation
-   → Proceeding with scaffolding generation
-```
-
-**AI-Powered Decision Making:**
-
-- **REUSE_COMPONENTS** (3+ validated) → Skip generation, create scaffolding only
-- **PARTIAL_REUSE** (1-2 components) → Mix existing with new
-- **GENERATE_ALL** (0 components) → Traditional full generation
-
-### 2. Component Generation (if needed)
-
-Generate components **one at a time** with automatic validation:
-
-```bash
-mycontext generate-components Button --with-tests
-```
-
-**Each component automatically validated:**
-
-```
-🔨 Generating: Button
-   ✅ Code Generated
-   ✅ TypeScript Check Passed
-   ✅ ESLint Passed
-   ✅ Build Passed
-   ✅ Tests Passed
-```
-
-### 3. Visual Preview
-
-Preview your components in the browser **before integration**:
-
-```bash
-mycontext preview components
-```
-
-**Opens in browser:**
-- Color-coded component cards
-- Organized by groups
-- User stories and action functions
-- Type and priority information
-
-### 4. Intelligent Route Mapping (NEW)
-
-Claude Agent SDK maps components to routes automatically:
-
-```
-🗺️  Mapping components to routes...
-
-Component-to-Route Mappings:
-├── LoginForm → /login (AuthLayout)
-│   Actions: authenticateUser, validateCredentials
-│   Hooks: useAuth
-├── Dashboard → /dashboard (DashboardLayout)
-│   Actions: fetchDashboardData
-│   Hooks: useDashboard
-└── SignupForm → /signup (AuthLayout)
-    Actions: createUser, sendVerificationEmail
-    Hooks: useAuth, useForm
-```
-
-### 5. Scaffolding Generation (NEW)
-
-Generates integration layer for existing components:
-
-```
-🏗️  Generating scaffolding...
-
-Generated:
-✅ 3 routes (app/login, app/dashboard, app/signup)
-✅ 2 server action files (actions/authentication.ts, actions/dashboard.ts)
-✅ 3 custom hooks (useAuth.ts, useForm.ts, useDashboard.ts)
-✅ 2 layouts (AuthLayout.tsx, DashboardLayout.tsx)
-```
-
-**Files created:**
-```typescript
-// app/login/page.tsx
-import { LoginForm } from '@/components/authentication/LoginForm';
-
-export default function Page() {
-  return <LoginForm />;
-}
-
-// actions/authentication.ts
-'use server';
-
-export async function authenticateUser(data: any) {
-  // Implementation
-}
-```
-
-### 6. Automatic Error Recovery
-
-Failed components **retry automatically** with error context:
-
-```
-❌ TypeScript check failed (3 errors)
-   - Button.tsx:12:5 - TS2322: Type 'string' not assignable to 'number'
-
-🔄 Retry 1/3 (with error context)
-   ✅ Fixed and validated
-```
-
-### 7. Production Deploy
-
-```bash
-cd my-app
-npm run build    # ✅ Zero errors guaranteed
-vercel deploy    # 🚀 Deploy
-```
-
----
-
-## 🔧 Advanced Usage
-
-### Build Strategy Selection
-
-```bash
-mycontext build-strategy --recommend
-
-# AI asks about:
-- Project type (client work, personal, MVP, etc.)
-- Complexity (simple, medium, complex)
-- Timeline (urgent, moderate, flexible)
-- Team size (solo, small, large)
-
-# Recommends best approach:
-🎯 Vertical Slice - Build complete features end-to-end
-⏰ Time to first demo: 2-3 weeks
-```
-
-### Complete Architecture
-
-```bash
-mycontext build-app \
-  --description "Blog platform" \
-  --complete-architecture \
-  --architecture-type nextjs-app-router
-
-# Generates:
-# - app/blog/[slug]/page.tsx
-# - actions/createPost.ts
-# - actions/updatePost.ts
-# - components/BlogPost.tsx
-# - Full type system
-```
-
-### Existing Project Migration
-
-```bash
-mycontext analyze                  # Analyze existing project
-mycontext migrate --all           # Migrate to MyContext structure
-```
-
----
-
-## 📊 Build Metrics
-
-After successful build:
-
-```
-🎉 Workflow Complete!
-
-📊 Summary:
-   Duration: 12m 34s
-   Total Steps: 230/230
-   User Approvals: 12
-   Retries: 3
-
-✅ Build Checks:
-   TypeScript: 30 passed, 0 failed
-   ESLint: 30 passed, 0 failed
-   Build: 30 passed, 0 failed
-   Tests: 28 passed, 0 failed
-```
-
-**Zero failures = Production-ready**
-
----
-
-## 🆚 MyContext vs Others
-
-| Feature                      | MyContext           | Lovable    | v0.dev      |
-| ---------------------------- | ------------------- | ---------- | ----------- |
-| **Approach**                 | Component-first     | App-first  | App-first   |
-| **Visual Preview**           | ✅ HTML previews    | ❌          | ✅ Live     |
-| **Component-Level Validation** | ✅ Every component | ❌          | ❌          |
-| **Build Validation**         | TypeScript+ESLint+Build | None  | None        |
-| **Zero-Error Guarantee**     | ✅ 100%             | ❌          | ❌          |
-| **Code Location**            | Your machine        | Cloud      | Cloud       |
-| **Pricing**                  | BYOK ($0-20/mo)     | $20-200/mo | Usage-based |
-| **Component Library Building** | ✅                | ❌          | ❌          |
-| **Progress Tracking**        | ✅ JSON files       | ❌          | ❌          |
-| **Deployment**               | Anywhere            | Limited    | Vercel only |
-
-**Key Differentiators:**
-
-1. **Component-First** - Build and validate components individually before scaling to apps
-2. **Visual Preview** - See components in browser before integration
-3. **Zero-Error Guarantee** - Every component validated (TypeScript, ESLint, build checks)
-4. **Local Development** - All code generation happens on your machine
-5. **BYOK Pricing** - Use your own AI API keys, pay only for what you use
-
----
-
-## 📚 Documentation
-
-- [Complete Workflow](https://github.com/farajabien/mycontext-monorepo/blob/main/docs/BUILD_APP_PROCESS.md) - 230-step process
-- [Integration Guide](https://github.com/farajabien/mycontext-monorepo/blob/main/docs/IMPLEMENTATION_SUMMARY.md) - VS Code integration
-- [Quick Start](https://github.com/farajabien/mycontext-monorepo/blob/main/docs/QUICK_START_BUILD_APP.md) - User guide
-
----
-
-## 🐛 Troubleshooting
-
-**"PRD Validation Failed"**
-
-```bash
-# Provide feedback and regenerate
-mycontext compile-prd --force
-```
-
-**"Component Build Failed"**
-
-```bash
-# Automatic retry with error context (max 3 attempts)
-# Check .mycontext/progress/07-components/<component>.json
-```
-
-**"Progress Not Tracking"**
-
-```bash
-# Verify progress directory exists
-ls -la .mycontext/progress/
-```
-
----
-
-## 🤝 Contributing
-
-See [CONTRIBUTING.md](https://github.com/farajabien/mycontext-monorepo/blob/main/CONTRIBUTING.md)
-
-## 📄 License
-
-MIT © MyContext
-
----
-
-**Start small. Build component by component. Scale when ready. Zero errors guaranteed.** 🎨