ebade 0.3.0 → 0.4.1

package/cli/scaffold.js

@@ -13,6 +13,7 @@ import yaml from "yaml";
 import ora from "ora";
 import prompts from "prompts";
 import chokidar from "chokidar";
+import { execSync } from "child_process";
 
 // ============================================
 // ANSI Renk Kodları (Terminal çıktısı için)
@@ -39,7 +40,7 @@ ${colors.magenta}    ██╔══╝  ${colors.cyan}██╔══██╗$
 ${colors.magenta}    ███████╗${colors.cyan}██████╔╝${colors.magenta}██║  ██║${colors.cyan}██████╔╝${colors.magenta}███████╗
 ${colors.magenta}    ╚══════╝${colors.cyan}╚═════╝ ${colors.magenta}╚═╝  ╚═╝${colors.cyan}╚═════╝ ${colors.magenta}╚══════╝${colors.reset}
     
-    ${colors.dim}✨ Agent-First Framework ${colors.yellow}v0.1.0${colors.reset}
+    ${colors.dim}✨ Agent-First Framework ${colors.yellow}v0.4.1${colors.reset}
 `;
 
 const log = {
@@ -47,6 +48,8 @@ const log = {
   success: (msg) => console.log(`${colors.green}✓${colors.reset} ${msg}`),
   warn: (msg) => console.log(`${colors.yellow}⚠${colors.reset} ${msg}`),
   file: (msg) => console.log(`${colors.cyan}  →${colors.reset} ${msg}`),
+  verify: (msg) => console.log(`${colors.yellow}  🔍${colors.reset} ${msg}`),
+  error: (msg) => console.log(`${colors.red}  ✘${colors.reset} ${msg}`),
   section: (msg) =>
     console.log(`\n${colors.bright}${colors.magenta}▸ ${msg}${colors.reset}`),
 };
@@ -62,60 +65,86 @@ function parseEbade(ebadePath) {
 // ============================================
 // Component Generator Templates
 // ============================================
-const componentTemplates = {
-  "hero-section": (design) => `
-export function HeroSection() {
-  return (
-    <section className="hero-section">
-      <div className="hero-content">
-        <h1 className="hero-title">Welcome to Our Store</h1>
-        <p className="hero-subtitle">Discover amazing products</p>
-        <button className="hero-cta" style={{ backgroundColor: '${
-          design.colors?.primary || "#6366f1"
-        }' }}>
-          Shop Now
-        </button>
-      </div>
-    </section>
-  );
-}
-`,
-  "product-grid": (design) => `
-export function ProductGrid({ products }) {
-  return (
-    <div className="product-grid">
-      {products.map((product) => (
-        <ProductCard key={product.id} product={product} />
-      ))}
-    </div>
+// ============================================
+// Template Resolver
+// ============================================
+function getComponentTemplate(componentName, design) {
+  const templatePath = path.join(
+    process.cwd(),
+    "cli/templates",
+    `${componentName}.tsx`
   );
-}
-`,
-  "add-to-cart": (design) => `
-import { useState } from 'react';
 
-export function AddToCart({ product, onAdd }) {
-  const [quantity, setQuantity] = useState(1);
-  
+  if (fs.existsSync(templatePath)) {
+    let content = fs.readFileSync(templatePath, "utf-8");
+
+    // Config-based replacement (e.g., {{primary}})
+    const primaryColor = design?.colors?.primary || "#6366f1";
+    content = content.replace(/\{\{primary\}\}/g, primaryColor);
+
+    return content;
+  }
+
+  // Fallback to placeholder if template file doesn't exist
+  return `import React from 'react';
+import { cn } from "@/lib/utils";
+
+/**
+ * 🧠 Generated via ebade
+ * Component: ${toPascalCase(componentName)}
+ * Status: Placeholder (No template found in cli/templates)
+ */
+export function ${toPascalCase(componentName)}() {
   return (
-    <div className="add-to-cart">
-      <div className="quantity-selector">
-        <button onClick={() => setQuantity(q => Math.max(1, q - 1))}>-</button>
-        <span>{quantity}</span>
-        <button onClick={() => setQuantity(q => q + 1)}>+</button>
+    <div className="p-12 border-2 border-dashed border-border rounded-3xl text-center bg-muted/30">
+      <div className="w-16 h-16 bg-primary/10 rounded-2xl flex items-center justify-center mx-auto mb-4">
+        <span className="text-2xl">🧩</span>
       </div>
-      <button 
-        className="add-btn"
-        style={{ backgroundColor: '${design.colors?.primary || "#6366f1"}' }}
-        onClick={() => onAdd(product, quantity)}
-      >
-        Add to Cart
-      </button>
+      <h3 className="text-xl font-bold mb-2">${toPascalCase(componentName)}</h3>
+      <p className="text-sm text-muted-foreground max-w-xs mx-auto">
+        No template found for this intent. Create a file at <code>cli/templates/${componentName}.tsx</code> to customize.
+      </p>
     </div>
   );
 }
-`,
-};
+`;
+}
+
+function generateComponentTest(componentName) {
+  const name = toPascalCase(componentName);
+  return `import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import { ${name} } from './${componentName}';
+import React from 'react';
+
+describe('${name} Component', () => {
+  it('renders without crashing', () => {
+    render(<${name} />);
+    expect(document.body).toBeDefined();
+  });
+});
+`;
+}
+
+function generateVitestConfig() {
+  return `import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: 'jsdom',
+    globals: true,
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './'),
+    },
+  },
+});
+`;
+}
 
 // ============================================
 // Page Generator
@@ -127,10 +156,13 @@ function generatePage(page, design) {
       .join("\n") || "";
 
   const componentUsage =
-    page.components?.map((c) => `      <${toPascalCase(c)} />`).join("\n") ||
-    "      {/* No components defined */}";
+    page.components
+      ?.map((c) => `          <${toPascalCase(c)} />`)
+      .join("\n") || "          {/* No components defined */}";
+
+  return `import React from 'react';
+${componentImports}
 
-  return `
 /**
  * 🧠 Generated via ebade - The Agent-First Framework
  * https://github.com/hasankemaldemirci/ebade
@@ -138,19 +170,26 @@ function generatePage(page, design) {
  * @page('${page.path}')
  * @intent('${page.intent}')
  */
-
-${componentImports}
-
-
 export default function ${toPascalCase(page.intent)}Page() {
   return (
-    <main className="page ${page.intent}">
+    <div className="min-h-screen bg-slate-950 text-white">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
+        <header className="mb-12">
+          <h1 className="text-3xl font-bold tracking-tight opacity-90">${toPascalCase(
+            page.intent
+          )}</h1>
+          <p className="text-sm opacity-40 mt-1">Route: ${page.path}</p>
+        </header>
+        
+        <main className="space-y-12">
 ${componentUsage}
-    </main>
+        </main>
+      </div>
+    </div>
   );
 }
 
-// Auth requirement: ${page.auth || "public"}
+// Auth: ${page.auth || "public"}
 `;
 }
 
@@ -221,16 +260,30 @@ function generatePackageJson(config) {
         build: "next build",
         start: "next start",
         lint: "next lint",
+        test: "vitest",
       },
       dependencies: {
         next: "^14.0.0",
         react: "^18.2.0",
         "react-dom": "^18.2.0",
+        "lucide-react": "^0.300.0",
+        clsx: "^2.1.0",
+        "tailwind-merge": "^2.2.0",
+        "class-variance-authority": "^0.7.0",
+        "framer-motion": "^11.0.0",
       },
       devDependencies: {
         "@types/node": "^20.0.0",
         "@types/react": "^18.2.0",
         "@types/react-dom": "^18.2.0",
+        "@testing-library/react": "^14.1.2",
+        "@vitejs/plugin-react": "^4.2.0",
+        jsdom: "^22.1.0",
+        vitest: "^0.34.6",
+        autoprefixer: "^10.0.1",
+        postcss: "^8.4.0",
+        tailwindcss: "^3.4.0",
+        "tailwindcss-animate": "^1.0.7",
         typescript: "^5.0.0",
       },
     },
@@ -239,6 +292,87 @@ function generatePackageJson(config) {
   );
 }
 
+function generateTailwindConfig() {
+  return `/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ["class"],
+  content: [
+    './pages/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './app/**/*.{ts,tsx}',
+    './src/**/*.{ts,tsx}',
+  ],
+  prefix: "",
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+}
+`;
+}
+
 function generateNextConfig() {
   return `/** @type {import('next').NextConfig} */
 const nextConfig = {};
@@ -250,6 +384,7 @@ function generateTsConfig() {
   return JSON.stringify(
     {
       compilerOptions: {
+        target: "es5",
         lib: ["dom", "dom.iterable", "esnext"],
         allowJs: true,
         skipLibCheck: true,
@@ -257,10 +392,10 @@ function generateTsConfig() {
         noEmit: true,
         esModuleInterop: true,
         module: "esnext",
-        moduleResolution: "bundler",
+        moduleResolution: "node",
         resolveJsonModule: true,
         isolatedModules: true,
-        jsx: "preserve",
+        jsx: "react-jsx",
         incremental: true,
         plugins: [{ name: "next" }],
         paths: { "@/*": ["./*"] },
@@ -275,7 +410,8 @@ function generateTsConfig() {
 
 function generateLayout(config) {
   const fontFamily = config.design?.font || "Inter";
-  return `import type { Metadata } from "next";
+  return `import React from 'react';
+import type { Metadata } from "next";
 import "./globals.css";
 
 export const metadata: Metadata = {
@@ -307,119 +443,95 @@ export default function RootLayout({
 }
 
 function generateGlobalsCss(design) {
-  return `/* ebade Generated Design System */
-/* Style: ${design.style || "minimal-modern"} */
-
-:root {
-  --color-primary: ${design.colors?.primary || "#6366f1"};
-  --color-secondary: ${design.colors?.secondary || "#f59e0b"};
-  --color-accent: ${design.colors?.accent || "#10b981"};
-  --font-family: '${design.font || "Inter"}', system-ui, sans-serif;
-  --radius-lg: 1rem;
-}
-
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-body {
-  font-family: var(--font-family);
-  line-height: 1.6;
-  color: #1f2937;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  min-height: 100vh;
-}
-
-.page {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 2rem;
-  color: white;
-}
-
-.hero-section {
-  text-align: center;
-  max-width: 800px;
-}
-
-.hero-title {
-  font-size: 3.5rem;
-  font-weight: 800;
-  margin-bottom: 1rem;
-}
-
-.hero-subtitle {
-  font-size: 1.25rem;
-  opacity: 0.9;
-  margin-bottom: 2rem;
-}
-
-.hero-cta {
-  background: white;
-  color: var(--color-primary);
-  padding: 1rem 2rem;
-  font-size: 1.1rem;
-  border-radius: var(--radius-lg);
-  border: none;
-  cursor: pointer;
-  font-weight: 600;
-  transition: transform 0.2s, box-shadow 0.2s;
-}
-
-.hero-cta:hover {
-  transform: scale(1.05);
-  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
-}
-
-.btn-primary {
-  background-color: var(--color-primary);
-  color: white;
-  padding: 0.75rem 1.5rem;
-  border-radius: var(--radius-lg);
-  border: none;
-  cursor: pointer;
-  transition: opacity 0.2s;
-}
-
-.btn-primary:hover {
-  opacity: 0.9;
-}
-
-.product-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 1.5rem;
-  padding: 2rem;
+  const primary = design.colors?.primary || "#6366f1";
+
+  // Helper to convert hex to HSL for CSS vars if needed
+  // For now we'll use standard shadcn slate
+  return `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+ 
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+ 
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+ 
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+ 
+    --primary: 221.2 83.2% 53.3%;
+    --primary-foreground: 210 40% 98%;
+ 
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+ 
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+ 
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+ 
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+ 
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 221.2 83.2% 53.3%;
+ 
+    --radius: 0.5rem;
+  }
+ 
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+ 
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+ 
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+ 
+    --primary: 217.2 91.2% 59.8%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+ 
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+ 
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+ 
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+ 
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+ 
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 224.3 76.3% 48%;
+  }
 }
-
-.add-to-cart {
-  display: flex;
-  gap: 1rem;
-  align-items: center;
+ 
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
 }
-
-.quantity-selector {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
+`;
 }
 
-.quantity-selector button {
-  width: 32px;
-  height: 32px;
-  border: 1px solid #e5e7eb;
-  background: white;
-  border-radius: 4px;
-  cursor: pointer;
-}
+function generateUtils() {
+  return `import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
 
-.add-btn {
-  flex: 1;
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
 }
 `;
 }
@@ -548,9 +660,15 @@ function ensureDir(dir) {
 // ============================================
 // Main Scaffold Function
 // ============================================
-function scaffold(ebadePath, outputDir) {
+async function scaffold(ebadePath, outputDir) {
   const startTime = Date.now();
-  let stats = { pages: 0, components: 0, apiRoutes: 0, files: 0 };
+  const stats = {
+    pages: 0,
+    components: 0,
+    apiRoutes: 0,
+    files: 0,
+    tokenSavings: 0,
+  };
 
   console.log(LOGO);
 
@@ -583,6 +701,10 @@ function scaffold(ebadePath, outputDir) {
     log.file(`${dir}/`);
   });
 
+  // lib/utils.ts
+  fs.writeFileSync(path.join(projectDir, "lib/utils.ts"), generateUtils());
+  log.file("lib/utils.ts");
+
   // ========== Generate Pages ==========
   log.section("Generating pages");
 
@@ -618,21 +740,23 @@ function scaffold(ebadePath, outputDir) {
   const spinner2 = ora("Generating components...").start();
   allComponents.forEach((component) => {
     const componentPath = `components/${component}.tsx`;
-    const template = componentTemplates[component];
-    const content = template
-      ? template(config.design)
-      : `// TODO: Implement ${toPascalCase(
-          component
-        )} component\nexport function ${toPascalCase(
-          component
-        )}() {\n  return <div>${component}</div>;\n}\n`;
+    const content = getComponentTemplate(component, config.design);
+    stats.tokenSavings += Math.floor(content.length / 4);
 
     fs.writeFileSync(path.join(projectDir, componentPath), content.trim());
+
+    // Generate unit test
+    const testPath = `components/${component}.test.tsx`;
+    fs.writeFileSync(
+      path.join(projectDir, testPath),
+      generateComponentTest(component).trim()
+    );
+
     stats.components++;
-    stats.files++;
+    stats.files += 2; // Component + Test
   });
   spinner2.succeed(
-    `Generated ${colors.bright}${stats.components}${colors.reset} components`
+    `Generated ${colors.bright}${stats.components}${colors.reset} components (+ tests)`
   );
 
   // ========== Generate API Routes ==========
@@ -683,6 +807,20 @@ function scaffold(ebadePath, outputDir) {
   fs.writeFileSync(path.join(projectDir, "tsconfig.json"), generateTsConfig());
   log.file("tsconfig.json");
 
+  // tailwind.config.js
+  fs.writeFileSync(
+    path.join(projectDir, "tailwind.config.js"),
+    generateTailwindConfig()
+  );
+  log.file("tailwind.config.js");
+
+  // vitest.config.ts
+  fs.writeFileSync(
+    path.join(projectDir, "vitest.config.ts"),
+    generateVitestConfig()
+  );
+  log.file("vitest.config.ts");
+
   // app/layout.tsx
   fs.writeFileSync(
     path.join(projectDir, "app/layout.tsx"),
@@ -737,9 +875,12 @@ function scaffold(ebadePath, outputDir) {
   fs.copyFileSync(ebadePath, path.join(projectDir, "project.ebade.yaml"));
   log.file("project.ebade.yaml (for agent reference)");
 
+  // ========== Summary ==========
+  // ========== Verify Output ==========
+  const verificationResult = await verifyOutput(projectDir, config);
+
   // ========== Summary ==========
   const duration = ((Date.now() - startTime) / 1000).toFixed(1);
-  const estimatedTokenSavings = Math.round(stats.files * 35); // ~35 tokens saved per file
 
   console.log(`
 ${colors.bright}${colors.green}  ┌${"─".repeat(41)}┐${colors.reset}
@@ -759,14 +900,20 @@ ${colors.green}  │${colors.reset}  ${colors.cyan}📁 Files Created:${
   }    ${String(stats.files).padEnd(18)} ${colors.green}│${colors.reset}
 ${colors.green}  │${colors.reset}  ${colors.cyan}📊 Token Savings:${
     colors.reset
-  }    ~${String(estimatedTokenSavings).padEnd(17)} ${colors.green}│${
-    colors.reset
-  }
+  }    ~${String(stats.tokenSavings).padEnd(17)} ${colors.green}│${colors.reset}
 ${colors.green}  │${colors.reset}  ${colors.cyan}⏱  Completed in:${
     colors.reset
   }    ${String(duration + "s").padEnd(18)} ${colors.green}│${colors.reset}
+${colors.green}  ├${"─".repeat(41)}┤${colors.reset}
+${colors.green}  │${colors.reset}  ${colors.yellow}🔍 Integrity:${
+    colors.reset
+  }      ${(verificationResult.passed ? "PASSED" : "ISSUES FOUND").padEnd(
+    18
+  )} ${colors.green}│${colors.reset}
 ${colors.green}  └${"─".repeat(41)}┘${colors.reset}
 
+${verificationResult.report}
+
 ${colors.dim}Next steps:${colors.reset}
   ${colors.gray}1.${colors.reset} cd ${colors.cyan}${projectDir}${colors.reset}
   ${colors.gray}2.${colors.reset} npm install
@@ -779,6 +926,117 @@ ${colors.yellow}💡 Tip:${colors.reset} AI Agents can read ${
 `);
 }
 
+/**
+ * ebade Output Verifier
+ * Performs a sanity check on the generated codebase.
+ */
+async function verifyOutput(projectDir, config) {
+  log.section("Verifying output integrity");
+  const spinner = ora("Running ebade verification protocols...").start();
+
+  const results = {
+    structure: true,
+    syntax: true,
+    tests: true,
+    issues: [],
+  };
+
+  // 1. Structure Check
+  const requiredFiles = [
+    "package.json",
+    "tsconfig.json",
+    "app/layout.tsx",
+    "app/page.tsx",
+    "lib/utils.ts",
+  ];
+
+  for (const file of requiredFiles) {
+    if (!fs.existsSync(path.join(projectDir, file))) {
+      results.structure = false;
+      results.issues.push(`Missing core file: ${file}`);
+    }
+  }
+
+  // 2. Syntax Check (Lightweight)
+  // We check if exports match the intent in some key files
+  if (config.pages) {
+    config.pages.forEach((page) => {
+      const pagePath =
+        page.path === "/"
+          ? "app/page.tsx"
+          : `app${page.path.replace("[", "(").replace("]", ")")}/page.tsx`;
+      const fullPath = path.join(projectDir, pagePath);
+      if (fs.existsSync(fullPath)) {
+        const content = fs.readFileSync(fullPath, "utf-8");
+        const expectedExport = `export default function ${toPascalCase(
+          page.intent
+        )}Page()`;
+        if (!content.includes(expectedExport)) {
+          results.syntax = false;
+          results.issues.push(
+            `Syntax mismatch in ${pagePath}: Export name should be ${toPascalCase(
+              page.intent
+            )}Page`
+          );
+        }
+      }
+    });
+  }
+
+  // 3. Test Coverage Check
+  // Ensure every component has a matching test file
+  const components = fs
+    .readdirSync(path.join(projectDir, "components"))
+    .filter((f) => f.endsWith(".tsx") && !f.endsWith(".test.tsx"));
+  components.forEach((comp) => {
+    const testFile = comp.replace(".tsx", ".test.tsx");
+    if (!fs.existsSync(path.join(projectDir, "components", testFile))) {
+      results.tests = false;
+      results.issues.push(`Missing test for component: ${comp}`);
+    }
+  });
+
+  // 4. Semantic Integrity Check
+  // Check if layout imports globals.css
+  const layoutPath = path.join(projectDir, "app/layout.tsx");
+  if (fs.existsSync(layoutPath)) {
+    const content = fs.readFileSync(layoutPath, "utf-8");
+    if (!content.includes('import "./globals.css"')) {
+      results.issues.push(
+        "Semantic Error: Root layout missing global styles import"
+      );
+    }
+  }
+
+  // Check if home page has at least one intent-defined component
+  const homePath = path.join(projectDir, "app/page.tsx");
+  if (fs.existsSync(homePath) && config.pages?.[0]?.components?.length > 0) {
+    const content = fs.readFileSync(homePath, "utf-8");
+    const firstComp = toPascalCase(config.pages[0].components[0]);
+    if (!content.includes(`<${firstComp} />`)) {
+      results.issues.push(
+        `Semantic Warning: Home page might be missing the ${firstComp} component`
+      );
+    }
+  }
+
+  spinner.stop();
+
+  const passed = results.issues.length === 0;
+
+  let report = "";
+  if (passed) {
+    report = `${colors.green}  ✓ All integrity checks passed! Code is production-ready.${colors.reset}`;
+  } else {
+    report = `${colors.red}  ⚠ Verification found ${results.issues.length} issue(s):${colors.reset}\n`;
+    results.issues.forEach((issue) => {
+      report += `    ${colors.red}•${colors.reset} ${issue}\n`;
+    });
+  }
+
+  return { passed, report };
+}
+
 // ============================================
 // CLI Entry Point
 // ============================================
@@ -796,6 +1054,7 @@ ${colors.dim}Commands:${colors.reset}
   init                       Create a new ebade project interactively
   scaffold <file> [output]   Scaffold a project from ebade file
   dev <file> [output]        Watch ebade file and re-scaffold on changes
+  playground                 Open the ebade playground
   
 ${colors.dim}Examples:${colors.reset}
   npx ebade init
@@ -915,7 +1174,7 @@ ${colors.green}✓${colors.reset} Created ${colors.cyan}${ebadeFilePath}${colors
 `);
 
   if (response.autoScaffold) {
-    scaffold(ebadeFilePath, outputDir);
+    await scaffold(ebadeFilePath, outputDir);
   } else {
     console.log(`
 ${colors.dim}Next steps:${colors.reset}
@@ -928,7 +1187,7 @@ ${colors.dim}Next steps:${colors.reset}
 // ============================================
 // Dev Command (Watch Mode)
 // ============================================
-function dev(ebadeFile, outputDir) {
+async function dev(ebadeFile, outputDir) {
   console.log(`
 ${LOGO}
 `);
@@ -939,7 +1198,7 @@ ${LOGO}
   console.log(`${colors.dim}Press Ctrl+C to stop.${colors.reset}\n`);
 
   // Initial scaffold
-  scaffold(ebadeFile, outputDir);
+  await scaffold(ebadeFile, outputDir);
 
   // Watch for changes
   const watcher = chokidar.watch(ebadeFile, {
@@ -947,11 +1206,11 @@ ${LOGO}
     ignoreInitial: true,
   });
 
-  watcher.on("change", () => {
+  watcher.on("change", async () => {
     console.log(
       `\n${colors.yellow}⚡ Change detected!${colors.reset} Re-scaffolding...\n`
     );
-    scaffold(ebadeFile, outputDir);
+    await scaffold(ebadeFile, outputDir);
   });
 
   watcher.on("error", (error) => {
@@ -995,7 +1254,21 @@ if (command === "init") {
     process.exit(1);
   }
 
-  scaffold(ebadeFile, outputDir);
+  await scaffold(ebadeFile, outputDir);
+} else if (command === "playground") {
+  console.log(`\n${colors.cyan}🌐 Opening ebade playground...${colors.reset}`);
+  const url = "https://ebade.dev/playground";
+  const start =
+    process.platform === "darwin"
+      ? "open"
+      : process.platform === "win32"
+      ? "start"
+      : "xdg-open";
+  try {
+    execSync(`${start} ${url}`);
+  } catch (e) {
+    console.log(`\n${colors.yellow}Please open:${colors.reset} ${url}`);
+  }
 } else if (command === "dev") {
   const ebadeFile = args[1];
   const outputDir = args[2] || "./output";
@@ -1017,7 +1290,7 @@ if (command === "init") {
     process.exit(1);
   }
 
-  dev(ebadeFile, outputDir);
+  await dev(ebadeFile, outputDir);
 } else {
   console.error(
     `${colors.red}Error:${colors.reset} Unknown command: ${command}`