pixelcrew 0.2.1 → 0.2.3

package/src/orchestrator/oneshot.js

@@ -1,16 +1,20 @@
 /**
- * PIXEL CREW — OneShot Multi-Agent Website & Project Generation Engine
+ * PIXEL CREW — Dynamic Multi-Agent Website & Project Generation Engine
  * 
  * Pipeline:
- * User Prompt -> Brief Analyzer -> Creative Director -> UX Planner ->
- * Design System -> Multi-File Stack Builder -> Visual Critic & Anti-AI Guardian ->
- * Multi-File Project Exporter + Standalone Previewer
+ * User Prompt -> Dynamic Planner -> Project Specification ->
+ * Dynamic Task Graph (DAG) -> Skill Matching -> Autonomous Agent Queue ->
+ * Real File Synthesis (Next.js 14/15 App Router + TS) -> Visual Critic ->
+ * Real-Time Dashboard Event Stream
  */
 
 import fs from 'node:fs/promises';
 import path from 'node:path';
+import { DynamicPlanner } from './planner.js';
+import { SkillRegistry } from './skills-registry.js';
+import { TaskQueue } from './task-queue.js';
+import { CodeGenerator } from './code-generator.js';
 
-// Creative Archetypes for Design Director
 export const CREATIVE_ARCHETYPES = {
   editorial: {
     direction: "editorial technology studio",
@@ -38,10 +42,10 @@ export const CREATIVE_ARCHETYPES = {
       googleFontsUrl: "https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500;700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap"
     },
     avoid: [
+      "purple and blue glowing gradient blobs",
+      "monotonous repeating card grids",
       "generic SaaS cards with uniform border-radius",
-      "purple and blue glowing mesh gradients",
       "excessive glassmorphism and frosted blur overlays",
-      "uniform 3-column feature grids",
       "hero with floating fake dashboard screenshot",
       "floating AI sparkles and generic rocket icons",
       "cliché copy like 'Revolutionize your workflow'"
@@ -118,6 +122,9 @@ export const CREATIVE_ARCHETYPES = {
 export class OneShotEngine {
   constructor(options = {}) {
     this.options = options;
+    this.planner = new DynamicPlanner();
+    this.skillRegistry = new SkillRegistry();
+    this.codeGenerator = new CodeGenerator();
     this.tokenStats = {
       rawTokensEstimated: 0,
       actualTokensUsed: 0,
@@ -127,85 +134,20 @@ export class OneShotEngine {
   }
 
   /**
-   * Step 0: Brief Analyzer
-   * Extracts domain intent, target framework, interactive features, and entity profile
+   * Step 0: Brief Analyzer / Requirement Parser
    */
   runBriefAnalyzer(prompt, options = {}) {
-    const p = (prompt || '').toLowerCase();
-
-    // 1. Framework detection
-    let targetFramework = options.targetFramework || 'auto';
-    if (targetFramework === 'auto') {
-      if (p.includes('next.js') || p.includes('nextjs') || p.includes('app router')) {
-        targetFramework = 'nextjs';
-      } else if (p.includes('vue') || p.includes('nuxt')) {
-        targetFramework = 'vue';
-      } else if (p.includes('react') || p.includes('vite')) {
-        targetFramework = 'react';
-      } else {
-        targetFramework = 'nextjs'; // modern default
-      }
-    }
-
-    // 2. Domain classification
-    let domain = 'general';
-    if (p.includes('portfolio') || p.includes('developer portfolio') || p.includes('resume') || p.includes('showcase my project') || p.includes('my project') || p.includes('personal site')) {
-      domain = 'portfolio';
-    } else if (p.includes('agency') || p.includes('studio') || p.includes('creative') || p.includes('design agency')) {
-      domain = 'agency';
-    } else if (p.includes('saas') || p.includes('platform') || p.includes('subscription') || p.includes('pricing')) {
-      domain = 'saas';
-    } else if (p.includes('database') || p.includes('query') || p.includes('infra') || p.includes('developer tool') || p.includes('api') || p.includes('backend')) {
-      domain = 'devtool';
-    } else if (p.includes('ai') || p.includes('agent') || p.includes('model') || p.includes('llm') || p.includes('prompt')) {
-      domain = 'ai-product';
-    } else if (p.includes('store') || p.includes('shop') || p.includes('commerce') || p.includes('product')) {
-      domain = 'ecommerce';
-    }
-
-    // 3. Interactive Features Extraction
-    const features = [];
-    if (p.includes('filter') || p.includes('category') || domain === 'portfolio' || domain === 'ecommerce') {
-      features.push('interactive-filter');
-    }
-    if (p.includes('calculator') || p.includes('pricing') || p.includes('cost') || p.includes('slider') || domain === 'saas') {
-      features.push('pricing-calculator');
-    }
-    if (p.includes('terminal') || p.includes('console') || p.includes('code') || p.includes('sandbox') || domain === 'devtool' || domain === 'portfolio') {
-      features.push('interactive-terminal');
-    }
-    if (p.includes('theme') || p.includes('dark mode') || p.includes('light mode') || p.includes('toggle')) {
-      features.push('theme-toggle');
-    }
-    if (p.includes('modal') || p.includes('drawer') || p.includes('case study') || domain === 'portfolio' || domain === 'agency') {
-      features.push('project-modal');
-    }
-
-    // 4. Entity Profile Extraction
-    let name = "Alex Rivera";
-    let title = "Staff Software Engineer & Systems Architect";
-    let bio = "Designing resilient distributed systems, real-time developer infrastructure, and human-grade interfaces.";
-    
-    if (domain === 'agency') {
-      name = "Kite Creative";
-      title = "Digital Product Design & Technology Studio";
-      bio = "We build high-order digital products, design systems, and bespoke web platforms for ambitious founders.";
-    } else if (domain === 'devtool' || domain === 'ai-product') {
-      name = "VectorScale";
-      title = "High-Performance Query Infrastructure for AI Swarms";
-      bio = "Sub-millisecond vector indexing, isolated context memory, and deterministic state coordination for AI agents.";
-    } else if (domain === 'saas') {
-      name = "PulseOps";
-      title = "Real-Time Telemetry & Multi-Agent Observability";
-      bio = "The unified operational control plane for autonomous software engineering teams.";
-    }
-
+    const analysis = this.planner.analyzeRequirements(prompt, options);
     return {
       userPrompt: prompt,
-      domain,
-      targetFramework,
-      features,
-      entity: { name, title, bio }
+      domain: analysis.domain,
+      targetFramework: analysis.framework,
+      features: analysis.requestedFeatures,
+      entity: {
+        name: analysis.companyName,
+        title: analysis.roleOrSubtitle,
+        bio: analysis.summary
+      }
     };
   }
 
@@ -247,232 +189,30 @@ export class OneShotEngine {
   }
 
   /**
-   * Step 2: UX Planner
-   * Dynamically constructs section topologies and bespoke domain models
+   * Step 2: UX Planner / Specification Generator
    */
   async runUXPlanner(prompt, creativeDirection, onProgress) {
     if (onProgress) onProgress({ stage: 'UX_PLANNER', message: 'Architecting dynamic section topology and interactive component specs...' });
 
-    const brief = this.runBriefAnalyzer(prompt);
-    const domain = brief.domain;
-    const entity = brief.entity;
-
-    let sections = [];
-
-    if (domain === 'portfolio') {
-      sections = [
-        {
-          id: "navbar",
-          type: "minimal_nav",
-          navLinks: ["Selected Work", "Architecture", "Interactive Terminal", "Experience", "Contact"]
-        },
-        {
-          id: "hero",
-          type: "portfolio_hero",
-          headline: "Building high-performance systems and expressive web architecture.",
-          subheadline: entity.bio,
-          stats: [
-            { label: "Production Experience", value: "8+ Years" },
-            { label: "Systems Scaled", value: "50M+ Req/day" },
-            { label: "Open Source Stars", value: "14.2k ★" }
-          ],
-          ctaPrimary: "Explore Projects",
-          ctaSecondary: "Open Interactive Terminal"
-        },
-        {
-          id: "projects",
-          type: "interactive_projects_grid",
-          title: "Selected Engineering Work",
-          subtitle: "Case studies in distributed systems, AI swarms, and modern frontend engines",
-          categories: ["All", "Distributed Systems", "AI & RAG", "Frontend Architecture", "Open Source"],
-          items: [
-            {
-              id: "proj-1",
-              title: "HyperFlow — Distributed Stream Processor",
-              category: "Distributed Systems",
-              tagline: "Low-latency stream processing engine with Raft consensus and Rust FFI bindings",
-              stack: ["Rust", "TypeScript", "gRPC", "Kafka", "PostgreSQL"],
-              metrics: "1.2M events/sec · < 3ms p99 latency",
-              description: "Engineered zero-copy memory buffers and SIMD-accelerated deserialization. Reduced cloud compute costs by 68% across 40 nodes.",
-              link: "https://github.com",
-              liveDemo: "https://demo.example.com",
-              featured: true
-            },
-            {
-              id: "proj-2",
-              title: "NeuralCanvas — AI Creative Studio",
-              category: "AI & RAG",
-              tagline: "Multimodal generative canvas with real-time latent space exploration and collaborative cursors",
-              stack: ["Next.js 15", "WebAssembly", "WebGPU", "FastAPI", "Python"],
-              metrics: "120k active creators · 60fps canvas",
-              description: "Implemented custom WebGPU shaders for client-side image upscaling and WebSockets for multiplayer canvas synchronization.",
-              link: "https://github.com",
-              liveDemo: "https://demo.example.com",
-              featured: true
-            },
-            {
-              id: "proj-3",
-              title: "AuraUI — Accessible Design System",
-              category: "Frontend Architecture",
-              tagline: "Headless, keyboard-first UI primitive library with fluid typography mathematical scales",
-              stack: ["React 19", "Tailwind CSS", "TypeScript", "Radix Primitives"],
-              metrics: "WCAG AAA · Zero runtime dependencies",
-              description: "Adopted by 450+ engineering teams. Features automated contrast verification and focus-trap management.",
-              link: "https://github.com",
-              liveDemo: "https://demo.example.com",
-              featured: false
-            },
-            {
-              id: "proj-4",
-              title: "KiroGraph — Vector Knowledge Graph",
-              category: "Open Source",
-              tagline: "Embedded HNSW vector index with ACID transaction guarantees and persistent storage",
-              stack: ["C++20", "Node.js N-API", "Go", "Docker"],
-              metrics: "8.4k GitHub Stars · Top 5 Trending",
-              description: "Created custom SIMD distance functions for AVX-512 and ARM NEON architectures.",
-              link: "https://github.com",
-              liveDemo: "https://demo.example.com",
-              featured: false
-            }
-          ]
-        },
-        {
-          id: "terminal",
-          type: "interactive_terminal_bio",
-          title: "Interactive System Terminal",
-          subtitle: "Type `help`, `skills`, `architecture`, `contact`, or `experience` to explore runtime profile",
-          commands: {
-            "help": "Available commands: skills, architecture, experience, stack, contact, clear",
-            "skills": "Core Engineering: Distributed Systems, Next.js 15, Rust, TypeScript, PostgreSQL, Performance Tuning (CWV)",
-            "architecture": "Philosophy: Zero AI Slop, Intentional Asymmetry, Sub-millisecond TTFB, Strict Type Safety",
-            "experience": "Staff Engineer @ Nexus (2023-Now) · Lead Architect @ CloudScale (2020-2023) · Senior Dev @ Voxel (2018-2020)",
-            "contact": "Email: alex@example.com · GitHub: @alexrivera · X: @alex_rivera"
-          }
-        },
-        {
-          id: "experience",
-          type: "experience_timeline",
-          title: "Career & Milestones",
-          items: [
-            {
-              role: "Staff Software Engineer & Architect",
-              company: "Nexus Cloud Systems",
-              period: "2023 — PRESENT",
-              bullets: [
-                "Spearheaded core multi-agent runtime processing 50M+ daily events across global edge nodes.",
-                "Reduced p99 database query latencies by 84% with composite B-Tree indexing and connection pooling."
-              ]
-            },
-            {
-              role: "Lead Frontend Engineer",
-              company: "CloudScale Platform",
-              period: "2020 — 2023",
-              bullets: [
-                "Led team of 12 engineers in migrating legacy monolith to modular Next.js App Router architecture.",
-                "Built company-wide design system achieving 100/100 Google Lighthouse Core Web Vitals score."
-              ]
-            }
-          ]
-        },
-        {
-          id: "cta",
-          type: "contact_footer",
-          title: "Let's build something exceptional together.",
-          subtitle: "Open for technical leadership, architecture consulting, and high-impact advisory roles.",
-          email: "alex@example.com",
-          links: ["GitHub", "LinkedIn", "Twitter / X", "Substack"]
-        }
-      ];
-    } else {
-      // Default / Agency / SaaS / DevTool dynamic structure
-      sections = [
-        {
-          id: "navbar",
-          type: "minimal_nav",
-          navLinks: ["Capabilities", "Live Sandbox", "Architecture", "Pricing Calculator", "Contact"]
-        },
-        {
-          id: "hero",
-          type: "product_hero",
-          headline: entity.title,
-          subheadline: entity.bio,
-          ctaPrimary: "Launch Interactive Sandbox",
-          ctaSecondary: "Calculate Efficiency ROI",
-          stats: [
-            { label: "Throughput Latency", value: "< 1.4ms TTFB" },
-            { label: "Token Conservation", value: "72% Reduction" },
-            { label: "Availability SLA", value: "99.99%" }
-          ]
-        },
-        {
-          id: "interactive-calculator",
-          type: "pricing_calculator",
-          title: "Interactive Throughput & Cost Calculator",
-          subtitle: "Adjust usage parameters to simulate real-time performance gains and token conservation",
-          baseRate: 0.002,
-          tokenSavingsRatio: 0.72
-        },
-        {
-          id: "showcase",
-          type: "asymmetric_bento_grid",
-          title: "Engineered From First Principles",
-          subtitle: "No cookie-cutter templates. Purpose-built infrastructure with mathematical precision.",
-          cards: [
-            {
-              title: "Autonomous Swarm Coordination",
-              description: "Distributed execution with isolated context boundaries, AST-level symbol extraction, and deterministic state.",
-              tag: "CORE RUNTIME",
-              span: "col-span-12 md:col-span-8",
-              metric: "72% Token Savings"
-            },
-            {
-              title: "Fluid Design Systems",
-              description: "Mathematical fluid typography with CSS clamp() and contrast-verified color tokens.",
-              tag: "AESTHETICS",
-              span: "col-span-12 md:col-span-4",
-              metric: "WCAG AAA Verified"
-            },
-            {
-              title: "Zero-Latency Edge Execution",
-              description: "Static generation paired with streaming server components and smart cache hydration.",
-              tag: "EDGE NETWORK",
-              span: "col-span-12 md:col-span-4",
-              metric: "< 14ms TTFB"
-            },
-            {
-              title: "Strict Anti-AI Pattern Critic",
-              description: "Automatic visual verification loop scoring layout asymmetry, typography hierarchy, and brand personality.",
-              tag: "QUALITY GUARDIAN",
-              span: "col-span-12 md:col-span-8",
-              metric: "Score >= 8.5/10"
-            }
-          ]
-        },
-        {
-          id: "manifesto",
-          type: "editorial_quote",
-          quote: "The biggest differentiator in modern software is not adding more AI features; it is crafting software that feels intentionally designed by human artisans.",
-          author: `${entity.name} Architectural Manifesto`,
-          role: "Engineering Standard"
-        },
-        {
-          id: "cta",
-          type: "contact_footer",
-          title: "Ready to deploy modern architecture?",
-          subtitle: "Deploy to production in minutes with zero lock-in and open source standards.",
-          email: "team@example.com",
-          links: ["Documentation", "GitHub", "Community Discord", "Status"]
-        }
-      ];
-    }
+    const analysis = this.planner.analyzeRequirements(prompt, { targetFramework: creativeDirection?.targetFramework });
+    const spec = this.planner.createProjectSpecification(analysis);
 
     return {
-      companyName: entity.name,
-      title: `${entity.name} — ${entity.title}`,
-      domain,
-      targetFramework: brief.targetFramework,
-      features: brief.features,
-      sections
+      companyName: spec.companyName,
+      title: `${spec.companyName} — ${spec.headline}`,
+      domain: spec.domain,
+      targetFramework: spec.framework,
+      features: spec.requestedFeatures,
+      sections: spec.sections.map(s => ({
+        id: s.id,
+        component: s.component,
+        type: s.id,
+        headline: s.headline,
+        subheadline: s.subheadline,
+        title: s.title,
+        categories: s.categories,
+        items: this.codeGenerator.generateDomainItems(spec.domain)
+      }))
     };
   }
 
@@ -511,7 +251,6 @@ body {
 .font-display { font-family: var(--font-display); }
 .font-mono { font-family: var(--font-mono); }
 
-/* Asymmetric Bento Glass Card */
 .glass-panel {
   background: var(--surface-base);
   border: 1px solid var(--border-subtle);
@@ -524,7 +263,6 @@ body {
   transform: translateY(-2px);
 }
 
-/* Custom Interactive Terminal */
 .terminal-window {
   background: #08090d;
   border: 1px solid rgba(255, 255, 255, 0.12);
@@ -546,920 +284,27 @@ body {
   }
 
   /**
-   * Step 4: Multi-File Stack-Adaptive Builder
+   * Step 4: Frontend & Multi-File Codebase Generator
    */
   async runFrontendBuilder(prompt, creativeDirection, uxPlan, designSystem, targetFramework = 'nextjs', onProgress) {
     if (onProgress) onProgress({ stage: 'FRONTEND_BUILDER', message: `Synthesizing idiomatic ${targetFramework.toUpperCase()} multi-file architecture & dynamic client components...` });
 
-    const p = designSystem.palette;
-    const f = designSystem.fonts;
-    const files = {};
+    const analysis = this.planner.analyzeRequirements(prompt, { targetFramework });
+    const spec = this.planner.createProjectSpecification(analysis);
 
-    // 1. Generate Stack-Specific Project Tree
-    if (targetFramework === 'nextjs') {
-      this.generateNextJsTree(files, uxPlan, designSystem, creativeDirection);
-    } else if (targetFramework === 'react') {
-      this.generateReactViteTree(files, uxPlan, designSystem, creativeDirection);
-    } else if (targetFramework === 'vue') {
-      this.generateVueTree(files, uxPlan, designSystem, creativeDirection);
-    } else {
-      this.generateVanillaTree(files, uxPlan, designSystem, creativeDirection);
-    }
+    // Override with active tokens
+    spec.palette = designSystem.palette;
+    spec.fonts = designSystem.fonts;
 
-    // 2. Generate Standalone Preview HTML (Bundled for instant in-browser and dashboard preview)
-    const previewHtml = this.generateStandalonePreview(uxPlan, designSystem, creativeDirection);
+    const result = this.codeGenerator.generateProject(spec);
 
     return {
       framework: targetFramework,
-      files,
-      html: previewHtml,
-      fileCount: Object.keys(files).length,
-      entrypoint: targetFramework === 'nextjs' ? 'src/app/page.tsx' : (targetFramework === 'vanilla' ? 'index.html' : 'src/App.tsx')
-    };
-  }
-
-  /**
-   * Next.js App Router Multi-File Generator
-   */
-  generateNextJsTree(files, uxPlan, ds, cd) {
-    const p = ds.palette;
-    const f = ds.fonts;
-
-    // package.json
-    files['package.json'] = JSON.stringify({
-      name: uxPlan.companyName.toLowerCase().replace(/[^a-z0-9]/g, '-'),
-      version: "0.1.0",
-      private: true,
-      scripts: {
-        dev: "next dev",
-        build: "next build",
-        start: "next start",
-        lint: "next lint"
-      },
-      dependencies: {
-        next: "^14.2.15",
-        react: "^18.3.1",
-        "react-dom": "^18.3.1",
-        "lucide-react": "^0.453.0",
-        "clsx": "^2.1.1",
-        "tailwind-merge": "^2.5.4"
-      },
-      devDependencies: {
-        typescript: "^5.6.3",
-        "@types/node": "^20.17.0",
-        "@types/react": "^18.3.11",
-        "@types/react-dom": "^18.3.1",
-        postcss: "^8.4.47",
-        tailwindcss: "^3.4.14"
-      }
-    }, null, 2);
-
-    // tsconfig.json
-    files['tsconfig.json'] = JSON.stringify({
-      compilerOptions: {
-        lib: ["dom", "dom.iterable", "esnext"],
-        allowJs: true,
-        skipLibCheck: true,
-        strict: true,
-        noEmit: true,
-        esModuleInterop: true,
-        module: "esnext",
-        moduleResolution: "bundler",
-        resolveJsonModule: true,
-        isolatedModules: true,
-        jsx: "preserve",
-        incremental: true,
-        plugins: [{ name: "next" }],
-        paths: { "@/*": ["./src/*"] }
-      },
-      include: ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-      exclude: ["node_modules"]
-    }, null, 2);
-
-    // tailwind.config.ts
-    files['tailwind.config.ts'] = `import type { Config } from "tailwindcss";
-
-const config: Config = {
-  content: [
-    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      colors: {
-        brandBg: "${p.bg}",
-        brandSurface: "${p.surface}",
-        brandSurfaceRaised: "${p.surfaceRaised}",
-        brandBorder: "${p.border}",
-        brandAccent: "${p.accent}"
-      },
-      fontFamily: {
-        display: [${f.display}],
-        sans: [${f.body}],
-        mono: [${f.mono}]
-      }
-    },
-  },
-  plugins: [],
-};
-export default config;
-`;
-
-    // src/lib/utils.ts
-    files['src/lib/utils.ts'] = `import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
-`;
-
-    // src/types/index.ts
-    files['src/types/index.ts'] = `export interface Project {
-  id: string;
-  title: string;
-  category: string;
-  tagline: string;
-  stack: string[];
-  metrics: string;
-  description: string;
-  link: string;
-  liveDemo?: string;
-  featured: boolean;
-}
-
-export interface CareerMilestone {
-  role: string;
-  company: string;
-  period: string;
-  bullets: string[];
-}
-`;
-
-    // src/lib/data.ts
-    files['src/lib/data.ts'] = `import { Project, CareerMilestone } from "@/types";
-
-export const SITE_METADATA = {
-  name: "${uxPlan.companyName}",
-  title: "${uxPlan.title}",
-  domain: "${uxPlan.domain}"
-};
-
-export const PROJECTS_DATA: Project[] = ${JSON.stringify(
-      (uxPlan.sections.find(s => s.id === 'projects') || {}).items || [
-        {
-          id: "proj-1",
-          title: "Distributed Query Engine",
-          category: "Distributed Systems",
-          tagline: "High throughput vector search with Raft consensus",
-          stack: ["Rust", "TypeScript", "PostgreSQL"],
-          metrics: "< 2ms latency",
-          description: "Engineered zero-copy memory buffers.",
-          link: "https://github.com",
-          featured: true
-        }
-      ], null, 2
-    )};
-
-export const TIMELINE_DATA: CareerMilestone[] = ${JSON.stringify(
-      (uxPlan.sections.find(s => s.id === 'experience') || {}).items || [], null, 2
-    )};
-`;
-
-    // src/app/globals.css
-    files['src/app/globals.css'] = `@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-${ds.cssTokens}
-`;
-
-    // src/app/layout.tsx
-    files['src/app/layout.tsx'] = `import type { Metadata } from "next";
-import "./globals.css";
-
-export const metadata: Metadata = {
-  title: "${uxPlan.title}",
-  description: "Bespoke digital architecture and engineering systems.",
-};
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html lang="en" className="scroll-smooth">
-      <head>
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
-        <link href="${f.googleFontsUrl}" rel="stylesheet" />
-      </head>
-      <body className="bg-brandBg text-neutral-100 min-h-screen antialiased selection:bg-neutral-200 selection:text-black">
-        {children}
-      </body>
-    </html>
-  );
-}
-`;
-
-    // src/components/sections/Hero.tsx
-    const hero = uxPlan.sections.find(s => s.id === 'hero') || {};
-    files['src/components/sections/Hero.tsx'] = `'use client';
-
-import React from 'react';
-import { ArrowUpRight, Terminal, Sparkles } from 'lucide-react';
-
-export function Hero() {
-  return (
-    <section className="relative pt-36 pb-20 px-6 max-w-7xl mx-auto">
-      <div className="flex items-center gap-2 mb-6">
-        <span className="inline-flex items-center gap-1.5 px-3 py-1 text-xs font-mono tracking-wider uppercase bg-white/5 border border-white/10 text-neutral-300 rounded-full">
-          <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
-          AVAILABLE FOR HIGH-IMPACT ARCHITECTURE
-        </span>
-      </div>
-
-      <h1 className="font-display text-4xl sm:text-6xl md:text-7xl font-normal tracking-tight text-white max-w-4xl leading-[1.08] mb-8">
-        ${hero.headline || "Building high-performance systems and expressive web architecture."}
-      </h1>
-
-      <p className="text-lg md:text-xl text-neutral-400 font-light max-w-2xl leading-relaxed mb-10">
-        ${hero.subheadline || "Designing resilient distributed systems and human-grade interfaces with zero AI slop."}
-      </p>
-
-      <div className="flex flex-wrap items-center gap-4 mb-16">
-        <a href="#projects" className="px-6 py-3.5 bg-white text-black font-medium text-sm rounded-sm hover:bg-neutral-200 transition-colors flex items-center gap-2">
-          ${hero.ctaPrimary || "Explore Projects"}
-          <ArrowUpRight className="w-4 h-4" />
-        </a>
-        <a href="#terminal" className="px-6 py-3.5 bg-brandSurface border border-white/10 text-white font-mono text-sm rounded-sm hover:border-white/30 transition-colors flex items-center gap-2">
-          <Terminal className="w-4 h-4 text-neutral-400" />
-          ${hero.ctaSecondary || "Open Interactive Terminal"}
-        </a>
-      </div>
-
-      <div className="grid grid-cols-2 sm:grid-cols-3 gap-6 pt-8 border-t border-white/10">
-        ${(hero.stats || []).map((s, idx) => `
-        <div>
-          <div className="font-mono text-2xl md:text-3xl font-semibold text-white">${s.value}</div>
-          <div className="text-xs text-neutral-400 tracking-wider uppercase mt-1 font-mono">${s.label}</div>
-        </div>
-        `).join('')}
-      </div>
-    </section>
-  );
-}
-`;
-
-    // src/components/sections/ProjectsGrid.tsx
-    files['src/components/sections/ProjectsGrid.tsx'] = `'use client';
-
-import React, { useState } from 'react';
-import { PROJECTS_DATA } from '@/lib/data';
-import { ArrowUpRight, Github, Layers } from 'lucide-react';
-
-export function ProjectsGrid() {
-  const [activeCategory, setActiveCategory] = useState('All');
-  const categories = ["All", "Distributed Systems", "AI & RAG", "Frontend Architecture", "Open Source"];
-
-  const filtered = activeCategory === 'All' 
-    ? PROJECTS_DATA 
-    : PROJECTS_DATA.filter(p => p.category === activeCategory);
-
-  return (
-    <section id="projects" className="py-24 px-6 max-w-7xl mx-auto border-t border-white/10">
-      <div className="flex flex-col md:flex-row md:items-end justify-between mb-12 gap-6">
-        <div>
-          <span className="font-mono text-xs text-neutral-400 uppercase tracking-widest block mb-2">01 // Selected Work</span>
-          <h2 className="font-display text-3xl md:text-4xl text-white font-normal">Case Studies & Architectures</h2>
-        </div>
-
-        {/* Dynamic Category Filter */}
-        <div className="flex flex-wrap gap-2">
-          {categories.map((cat) => (
-            <button
-              key={cat}
-              onClick={() => setActiveCategory(cat)}
-              className={\`px-3 py-1.5 text-xs font-mono rounded-sm transition-all border \${
-                activeCategory === cat 
-                  ? 'bg-white text-black border-white font-medium' 
-                  : 'bg-brandSurface text-neutral-400 border-white/10 hover:border-white/30'
-              }\`}
-            >
-              {cat}
-            </button>
-          ))}
-        </div>
-      </div>
-
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-        {filtered.map((proj) => (
-          <div key={proj.id} className="glass-panel p-8 rounded-sm group relative flex flex-col justify-between">
-            <div>
-              <div className="flex items-center justify-between gap-2 mb-4">
-                <span className="text-xs font-mono uppercase tracking-wider text-neutral-400 bg-white/5 px-2.5 py-1 rounded border border-white/5">
-                  {proj.category}
-                </span>
-                <span className="font-mono text-xs text-emerald-400">
-                  {proj.metrics}
-                </span>
-              </div>
-              <h3 className="font-display text-2xl text-white font-normal mb-3 group-hover:text-emerald-300 transition-colors">
-                {proj.title}
-              </h3>
-              <p className="text-neutral-400 text-sm font-light leading-relaxed mb-6">
-                {proj.description}
-              </p>
-            </div>
-
-            <div>
-              <div className="flex flex-wrap gap-1.5 mb-6">
-                {proj.stack.map((t) => (
-                  <span key={t} className="text-[11px] font-mono text-neutral-300 bg-neutral-900 px-2 py-0.5 rounded border border-white/10">
-                    {t}
-                  </span>
-                ))}
-              </div>
-              <div className="flex items-center gap-4 pt-4 border-t border-white/5 text-xs font-mono">
-                <a href={proj.link} target="_blank" rel="noreferrer" className="text-white hover:underline flex items-center gap-1">
-                  <Github className="w-3.5 h-3.5" /> Source
-                </a>
-                {proj.liveDemo && (
-                  <a href={proj.liveDemo} target="_blank" rel="noreferrer" className="text-neutral-400 hover:text-white flex items-center gap-1">
-                    Live Demo <ArrowUpRight className="w-3.5 h-3.5" />
-                  </a>
-                )}
-              </div>
-            </div>
-          </div>
-        ))}
-      </div>
-    </section>
-  );
-}
-`;
-
-    // src/components/sections/TerminalBio.tsx
-    files['src/components/sections/TerminalBio.tsx'] = `'use client';
-
-import React, { useState } from 'react';
-import { Terminal as TermIcon, CornerDownLeft } from 'lucide-react';
-
-const COMMANDS: Record<string, string> = {
-  help: "Available commands: skills, architecture, experience, stack, clear",
-  skills: "• Distributed Systems & Consensus (Raft, Paxos)\\n• Next.js 15 App Router & Server Components\\n• Rust FFI & WebAssembly Runtimes\\n• PostgreSQL Advanced Indexing (B-Tree, GIN, GiST)",
-  architecture: "• Intentional Asymmetry\\n• Mathematical clamp() Fluid Typography\\n• Zero AI Slop Standard\\n• Sub-millisecond TTFB Performance",
-  experience: "• Staff Engineer @ Nexus (2023-Present)\\n• Lead Architect @ CloudScale (2020-2023)\\n• Senior Full-Stack @ Voxel (2018-2020)",
-  stack: "TypeScript, Rust, Next.js, React 19, Python, Tailwind, PostgreSQL, Docker, AWS"
-};
-
-export function TerminalBio() {
-  const [input, setInput] = useState('');
-  const [history, setHistory] = useState<Array<{ cmd: string; res: string }>>([
-    { cmd: "init", res: "Alex Rivera Developer Runtime [v2.4.0]\\nType 'help' to inspect capabilities or 'skills' for core proficiencies." }
-  ]);
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    const trimmed = input.trim().toLowerCase();
-    if (!trimmed) return;
-
-    if (trimmed === 'clear') {
-      setHistory([]);
-      setInput('');
-      return;
-    }
-
-    const res = COMMANDS[trimmed] || \`Command not recognized: '\${trimmed}'. Type 'help' for available commands.\`;
-    setHistory(prev => [...prev, { cmd: input, res }]);
-    setInput('');
-  };
-
-  return (
-    <section id="terminal" className="py-20 px-6 max-w-7xl mx-auto border-t border-white/10">
-      <div className="mb-8">
-        <span className="font-mono text-xs text-neutral-400 uppercase tracking-widest block mb-2">02 // Runtime Console</span>
-        <h2 className="font-display text-3xl text-white font-normal">Interactive System Shell</h2>
-      </div>
-
-      <div className="terminal-window rounded-sm overflow-hidden font-mono text-xs">
-        <div className="bg-[#12141a] px-4 py-2.5 border-b border-white/10 flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <span className="w-2.5 h-2.5 rounded-full bg-rose-500/80"></span>
-            <span className="w-2.5 h-2.5 rounded-full bg-amber-500/80"></span>
-            <span className="w-2.5 h-2.5 rounded-full bg-emerald-500/80"></span>
-            <span className="text-[11px] text-neutral-400 ml-2">guest@alexrivera.dev:~</span>
-          </div>
-          <span className="text-[10px] text-neutral-500">BASH 5.2</span>
-        </div>
-
-        <div className="p-6 text-neutral-300 min-h-[220px] max-h-[380px] overflow-y-auto space-y-4">
-          {history.map((h, i) => (
-            <div key={i} className="space-y-1">
-              <div className="flex items-center gap-2 text-emerald-400">
-                <span>$</span>
-                <span>{h.cmd}</span>
-              </div>
-              <div className="text-neutral-400 whitespace-pre-line pl-4 border-l border-white/10">
-                {h.res}
-              </div>
-            </div>
-          ))}
-
-          <form onSubmit={handleSubmit} className="flex items-center gap-2 pt-2">
-            <span className="text-emerald-400">$</span>
-            <input
-              type="text"
-              value={input}
-              onChange={(e) => setInput(e.target.value)}
-              placeholder="type 'skills' or 'help'..."
-              className="bg-transparent text-white focus:outline-none flex-1 font-mono text-xs placeholder:text-neutral-600"
-            />
-            <button type="submit" className="text-neutral-500 hover:text-white">
-              <CornerDownLeft className="w-3.5 h-3.5" />
-            </button>
-          </form>
-        </div>
-      </div>
-    </section>
-  );
-}
-`;
-
-    // src/app/page.tsx
-    files['src/app/page.tsx'] = `import { Hero } from "@/components/sections/Hero";
-import { ProjectsGrid } from "@/components/sections/ProjectsGrid";
-import { TerminalBio } from "@/components/sections/TerminalBio";
-import { ArrowUpRight } from "lucide-react";
-
-export default function Home() {
-  return (
-    <main className="min-h-screen">
-      {/* Navigation */}
-      <header className="fixed top-0 left-0 right-0 z-50 bg-brandBg/80 backdrop-blur-md border-b border-white/5">
-        <div className="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
-          <div className="font-display font-semibold text-lg tracking-tight text-white">
-            ${uxPlan.companyName}
-          </div>
-          <nav className="hidden md:flex items-center gap-8 text-xs font-mono uppercase tracking-wider text-neutral-400">
-            <a href="#projects" className="hover:text-white transition-colors">Projects</a>
-            <a href="#terminal" className="hover:text-white transition-colors">Terminal</a>
-            <a href="mailto:alex@example.com" className="px-3 py-1.5 bg-white/10 text-white rounded hover:bg-white/20 transition-colors">Contact</a>
-          </nav>
-        </div>
-      </header>
-
-      <Hero />
-      <ProjectsGrid />
-      <TerminalBio />
-
-      {/* Footer */}
-      <footer className="py-16 px-6 border-t border-white/10 max-w-7xl mx-auto text-xs font-mono text-neutral-500 flex flex-col sm:flex-row justify-between items-center gap-4">
-        <div>© {new Date().getFullYear()} ${uxPlan.companyName}. Built with Pixel Crew design-first synthesis.</div>
-        <div className="flex items-center gap-6 text-neutral-400">
-          <a href="https://github.com" className="hover:text-white">GitHub</a>
-          <a href="https://twitter.com" className="hover:text-white">Twitter</a>
-          <a href="https://linkedin.com" className="hover:text-white">LinkedIn</a>
-        </div>
-      </footer>
-    </main>
-  );
-}
-`;
-
-    // README.md
-    files['README.md'] = `# ${uxPlan.companyName} — Modern Web Project
-
-Synthesized using **Pixel Crew** design-first multi-agent orchestration.
-
-## 🚀 Getting Started
-
-\`\`\`bash
-# 1. Install dependencies
-npm install
-
-# 2. Run the local development server
-npm run dev
-
-# 3. Open in browser
-http://localhost:3000
-\`\`\`
-
-## 🛠️ Stack & Standards
-- **Framework**: Next.js 14 App Router
-- **Language**: TypeScript (Strict Mode)
-- **Styling**: Tailwind CSS + Fluid clamp() design tokens
-- **Design Archetype**: ${cd.design_direction}
-- **Quality Standard**: Zero AI Slop, WCAG AA Accessibility
-`;
-  }
-
-  /**
-   * Vite + React Multi-File Generator
-   */
-  generateReactViteTree(files, uxPlan, ds, cd) {
-    this.generateNextJsTree(files, uxPlan, ds, cd); // base share
-    files['package.json'] = JSON.stringify({
-      name: uxPlan.companyName.toLowerCase().replace(/[^a-z0-9]/g, '-'),
-      version: "0.1.0",
-      type: "module",
-      scripts: {
-        dev: "vite",
-        build: "tsc && vite build",
-        preview: "vite preview"
-      },
-      dependencies: {
-        react: "^18.3.1",
-        "react-dom": "^18.3.1",
-        "lucide-react": "^0.453.0"
-      },
-      devDependencies: {
-        "@vitejs/plugin-react": "^4.3.3",
-        typescript: "^5.6.3",
-        vite: "^5.4.9",
-        tailwindcss: "^3.4.14",
-        postcss: "^8.4.47"
-      }
-    }, null, 2);
-
-    files['vite.config.ts'] = `import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-
-export default defineConfig({
-  plugins: [react()],
-});
-`;
-  }
-
-  /**
-   * Vue 3 Multi-File Generator
-   */
-  generateVueTree(files, uxPlan, ds, cd) {
-    this.generateNextJsTree(files, uxPlan, ds, cd);
-    files['package.json'] = JSON.stringify({
-      name: uxPlan.companyName.toLowerCase().replace(/[^a-z0-9]/g, '-'),
-      version: "0.1.0",
-      type: "module",
-      scripts: {
-        dev: "vite",
-        build: "vue-tsc && vite build",
-        preview: "vite preview"
-      },
-      dependencies: {
-        vue: "^3.5.12",
-        "lucide-vue-next": "^0.453.0"
-      },
-      devDependencies: {
-        "@vitejs/plugin-vue": "^5.1.4",
-        typescript: "^5.6.3",
-        vite: "^5.4.9",
-        "vue-tsc": "^2.1.6",
-        tailwindcss: "^3.4.14"
-      }
-    }, null, 2);
-  }
-
-  /**
-   * Modular Vanilla Web Multi-File Generator
-   */
-  generateVanillaTree(files, uxPlan, ds, cd) {
-    const p = ds.palette;
-    const f = ds.fonts;
-
-    files['package.json'] = JSON.stringify({
-      name: uxPlan.companyName.toLowerCase().replace(/[^a-z0-9]/g, '-'),
-      version: "0.1.0",
-      scripts: {
-        start: "npx serve ."
-      }
-    }, null, 2);
-
-    files['styles/tokens.css'] = ds.cssTokens;
-    files['styles/main.css'] = `/* Main Layout & Reset */
-* { box-sizing: border-box; margin: 0; padding: 0; }
-body { background: var(--bg-primary); color: var(--text-primary); font-family: var(--font-body); }
-.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
-`;
-
-    files['scripts/interactive.js'] = `// Live Project Filtering & Shell Interaction
-document.addEventListener('DOMContentLoaded', () => {
-  const filterButtons = document.querySelectorAll('.filter-btn');
-  const projectCards = document.querySelectorAll('.project-card');
-
-  filterButtons.forEach(btn => {
-    btn.addEventListener('click', () => {
-      filterButtons.forEach(b => b.classList.remove('active'));
-      btn.classList.add('active');
-      const cat = btn.getAttribute('data-category');
-
-      projectCards.forEach(card => {
-        if (cat === 'All' || card.getAttribute('data-category') === cat) {
-          card.style.display = 'flex';
-        } else {
-          card.style.display = 'none';
-        }
-      });
-    });
-  });
-});
-`;
-
-    files['index.html'] = this.generateStandalonePreview(uxPlan, ds, cd);
-  }
-
-  /**
-   * Standalone Preview Generator with Rich Interactive JS
-   */
-  generateStandalonePreview(uxPlan, designSystem, creativeDirection) {
-    const p = designSystem.palette;
-    const f = designSystem.fonts;
-    const hero = uxPlan.sections.find(s => s.id === 'hero') || {};
-    const projectsSec = uxPlan.sections.find(s => s.id === 'projects') || {};
-    const items = projectsSec.items || [];
-    const categories = projectsSec.categories || ["All", "Distributed Systems", "AI & RAG", "Frontend Architecture", "Open Source"];
-
-    return `<!DOCTYPE html>
-<html lang="en" class="scroll-smooth">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>${uxPlan.title}</title>
-  <meta name="description" content="${hero.subheadline || 'Bespoke high performance web architecture.'}">
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="${f.googleFontsUrl}" rel="stylesheet">
-  <script src="https://cdn.tailwindcss.com"></script>
-  <script>
-    tailwind.config = {
-      theme: {
-        extend: {
-          colors: {
-            brandBg: '${p.bg}',
-            brandSurface: '${p.surface}',
-            brandSurfaceRaised: '${p.surfaceRaised}',
-            brandBorder: '${p.border}',
-            brandAccent: '${p.accent}'
-          },
-          fontFamily: {
-            display: [${f.display}],
-            sans: [${f.body}],
-            mono: [${f.mono}]
-          }
-        }
-      }
-    }
-  </script>
-  <style>
-${designSystem.cssTokens}
-  </style>
-</head>
-<body class="bg-brandBg text-neutral-100 min-h-screen selection:bg-neutral-200 selection:text-black">
-
-  <!-- Header Navigation -->
-  <header class="fixed top-0 left-0 right-0 z-50 bg-brandBg/85 backdrop-blur-md border-b border-white/5">
-    <div class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
-      <a href="#" class="flex items-center gap-3 group">
-        <div class="w-8 h-8 bg-white text-black font-mono font-bold text-xs flex items-center justify-center rounded-sm group-hover:rotate-12 transition-transform">
-          AR
-        </div>
-        <span class="font-display font-semibold text-xl tracking-tight text-white">${uxPlan.companyName}</span>
-      </a>
-      <nav class="hidden md:flex items-center gap-8 text-xs font-mono uppercase tracking-wider text-neutral-400">
-        <a href="#projects" class="hover:text-white transition-colors">Projects</a>
-        <a href="#terminal" class="hover:text-white transition-colors">Console</a>
-        <a href="#experience" class="hover:text-white transition-colors">Milestones</a>
-        <a href="mailto:alex@example.com" class="px-3.5 py-1.5 bg-white text-black font-medium rounded-sm hover:bg-neutral-200 transition-colors">Contact</a>
-      </nav>
-    </div>
-  </header>
-
-  <!-- Hero Section -->
-  <section class="relative pt-36 pb-20 px-6 max-w-7xl mx-auto">
-    <div className="flex items-center gap-2 mb-6">
-      <span class="inline-flex items-center gap-2 px-3 py-1 text-xs font-mono tracking-wider uppercase bg-white/5 border border-white/10 text-neutral-300 rounded-full mb-6">
-        <span class="w-2 h-2 rounded-full bg-emerald-400 animate-ping"></span>
-        AVAILABLE FOR ARCHITECTURE & HIGH-IMPACT ROLES
-      </span>
-    </div>
-
-    <h1 class="font-display text-4xl sm:text-6xl md:text-7xl font-normal tracking-tight text-white max-w-4xl leading-[1.08] mb-8">
-      ${hero.headline || "Building high-order digital architecture with intentional restraint."}
-    </h1>
-
-    <p class="text-lg md:text-xl text-neutral-400 font-light max-w-2xl leading-relaxed mb-10">
-      ${hero.subheadline || "Designing resilient distributed systems and human-grade web platforms. No templates. No generic AI slop."}
-    </p>
-
-    <div class="flex flex-wrap items-center gap-4 mb-16">
-      <a href="#projects" class="px-6 py-3.5 bg-white text-black font-medium text-sm rounded-sm hover:bg-neutral-200 transition-colors flex items-center gap-2">
-        Explore Selected Work
-        <span>→</span>
-      </a>
-      <a href="#terminal" class="px-6 py-3.5 bg-brandSurface border border-white/10 text-white font-mono text-sm rounded-sm hover:border-white/30 transition-colors flex items-center gap-2">
-        <span>$</span>
-        Launch System Terminal
-      </a>
-    </div>
-
-    <div class="grid grid-cols-2 sm:grid-cols-3 gap-6 pt-8 border-t border-white/10">
-      ${(hero.stats || [
-        { label: "Production Experience", value: "8+ Years" },
-        { label: "Systems Scaled", value: "50M+ Req/day" },
-        { label: "Open Source", value: "14.2k ★" }
-      ]).map(s => `
-      <div>
-        <div class="font-mono text-2xl md:text-3xl font-semibold text-white">${s.value}</div>
-        <div class="text-xs text-neutral-400 tracking-wider uppercase mt-1 font-mono">${s.label}</div>
-      </div>
-      `).join('')}
-    </div>
-  </section>
-
-  <!-- Projects Section with Live JavaScript Filtering -->
-  <section id="projects" class="py-24 px-6 max-w-7xl mx-auto border-t border-white/10">
-    <div class="flex flex-col md:flex-row md:items-end justify-between mb-12 gap-6">
-      <div>
-        <span class="font-mono text-xs text-neutral-400 uppercase tracking-widest block mb-2">01 // Selected Work</span>
-        <h2 class="font-display text-3xl md:text-4xl text-white font-normal">Case Studies & Architectures</h2>
-      </div>
-
-      <!-- Dynamic Category Filter Buttons -->
-      <div class="flex flex-wrap gap-2" id="filterBtnGroup">
-        ${categories.map((cat, i) => `
-          <button 
-            class="filter-btn px-3 py-1.5 text-xs font-mono rounded-sm transition-all border ${i === 0 ? 'active' : 'bg-brandSurface text-neutral-400 border-white/10 hover:border-white/30'}"
-            data-category="${cat}"
-          >
-            ${cat}
-          </button>
-        `).join('')}
-      </div>
-    </div>
-
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-6" id="projectsContainer">
-      ${items.map(proj => `
-        <div class="project-card glass-panel p-8 rounded-sm flex flex-col justify-between" data-category="${proj.category}">
-          <div>
-            <div class="flex items-center justify-between gap-2 mb-4">
-              <span class="text-xs font-mono uppercase tracking-wider text-neutral-400 bg-white/5 px-2.5 py-1 rounded border border-white/5">
-                ${proj.category}
-              </span>
-              <span class="font-mono text-xs text-emerald-400">
-                ${proj.metrics}
-              </span>
-            </div>
-            <h3 class="font-display text-2xl text-white font-normal mb-3">
-              ${proj.title}
-            </h3>
-            <p class="text-neutral-400 text-sm font-light leading-relaxed mb-6">
-              ${proj.description}
-            </p>
-          </div>
-
-          <div>
-            <div class="flex flex-wrap gap-1.5 mb-6">
-              ${(proj.stack || []).map(t => `
-                <span class="text-[11px] font-mono text-neutral-300 bg-neutral-900 px-2 py-0.5 rounded border border-white/10">
-                  ${t}
-                </span>
-              `).join('')}
-            </div>
-            <div class="flex items-center gap-4 pt-4 border-t border-white/5 text-xs font-mono">
-              <a href="${proj.link}" target="_blank" class="text-white hover:underline flex items-center gap-1">
-                ⌥ Source Code
-              </a>
-              ${proj.liveDemo ? `<a href="${proj.liveDemo}" target="_blank" class="text-neutral-400 hover:text-white flex items-center gap-1">Live Demo ↗</a>` : ''}
-            </div>
-          </div>
-        </div>
-      `).join('')}
-    </div>
-  </section>
-
-  <!-- Interactive Terminal Shell -->
-  <section id="terminal" class="py-20 px-6 max-w-7xl mx-auto border-t border-white/10">
-    <div class="mb-8">
-      <span class="font-mono text-xs text-neutral-400 uppercase tracking-widest block mb-2">02 // Runtime Console</span>
-      <h2 class="font-display text-3xl text-white font-normal">Interactive System Shell</h2>
-    </div>
-
-    <div class="terminal-window rounded-sm overflow-hidden font-mono text-xs">
-      <div class="bg-[#12141a] px-4 py-2.5 border-b border-white/10 flex items-center justify-between">
-        <div class="flex items-center gap-2">
-          <span class="w-2.5 h-2.5 rounded-full bg-rose-500"></span>
-          <span class="w-2.5 h-2.5 rounded-full bg-amber-500"></span>
-          <span class="w-2.5 h-2.5 rounded-full bg-emerald-500"></span>
-          <span class="text-[11px] text-neutral-400 ml-2">guest@alexrivera.dev:~</span>
-        </div>
-        <span class="text-[10px] text-neutral-500">BASH 5.2</span>
-      </div>
-
-      <div id="termLogs" class="p-6 text-neutral-300 min-h-[220px] max-h-[360px] overflow-y-auto space-y-3">
-        <div class="text-neutral-400">
-          Alex Rivera Developer Runtime [v2.4.0]<br>
-          Type <span class="text-white">'help'</span> to inspect capabilities, <span class="text-white">'skills'</span> for proficiencies, or <span class="text-white">'experience'</span> for career timeline.
-        </div>
-      </div>
-
-      <form id="termForm" class="p-4 bg-[#0e1014] border-t border-white/10 flex items-center gap-2">
-        <span class="text-emerald-400 font-bold">$</span>
-        <input 
-          id="termInput"
-          type="text" 
-          placeholder="type 'skills' or 'help'..." 
-          class="bg-transparent text-white focus:outline-none flex-1 font-mono text-xs placeholder:text-neutral-600"
-          autocomplete="off"
-        />
-        <button type="submit" class="px-2.5 py-1 bg-white/10 text-neutral-300 text-[11px] rounded hover:bg-white/20">Enter ↵</button>
-      </form>
-    </div>
-  </section>
-
-  <!-- Footer -->
-  <footer class="py-16 px-6 border-t border-white/10 max-w-7xl mx-auto text-xs font-mono text-neutral-500 flex flex-col sm:flex-row justify-between items-center gap-4">
-    <div>© ${new Date().getFullYear()} ${uxPlan.companyName}. Synthesized with Pixel Crew design-first architecture.</div>
-    <div class="flex items-center gap-6 text-neutral-400">
-      <a href="https://github.com" class="hover:text-white">GitHub</a>
-      <a href="https://twitter.com" class="hover:text-white">Twitter</a>
-      <a href="https://linkedin.com" class="hover:text-white">LinkedIn</a>
-    </div>
-  </footer>
-
-  <!-- Client-Side Interaction Controller Script -->
-  <script>
-    // 1. Live Filter System
-    const filterBtns = document.querySelectorAll('.filter-btn');
-    const projectCards = document.querySelectorAll('.project-card');
-
-    filterBtns.forEach(btn => {
-      btn.addEventListener('click', () => {
-        filterBtns.forEach(b => {
-          b.classList.remove('active', 'bg-white', 'text-black');
-          b.classList.add('bg-brandSurface', 'text-neutral-400');
-        });
-        btn.classList.add('active', 'bg-white', 'text-black');
-        btn.classList.remove('bg-brandSurface', 'text-neutral-400');
-
-        const cat = btn.getAttribute('data-category');
-        projectCards.forEach(card => {
-          if (cat === 'All' || card.getAttribute('data-category') === cat) {
-            card.style.display = 'flex';
-          } else {
-            card.style.display = 'none';
-          }
-        });
-      });
-    });
-
-    // 2. Terminal Shell Interaction
-    const termLogs = document.getElementById('termLogs');
-    const termForm = document.getElementById('termForm');
-    const termInput = document.getElementById('termInput');
-
-    const COMMAND_MAP = {
-      help: "Available commands:\\n  • skills       List core engineering proficiencies\\n  • architecture Core design philosophy & anti-slop rules\\n  • experience   Career timeline & milestones\\n  • stack        Languages, frameworks, databases\\n  • clear        Clear console",
-      skills: "• Distributed Systems (Raft, Paxos, Kafka)\\n• Next.js 15 App Router & React 19 Islands\\n• Rust WebAssembly & SIMD Runtimes\\n• PostgreSQL Advanced Indexing (B-Tree, GIN, GiST)\\n• Core Web Vitals Optimization (100/100 LCP/INP)",
-      architecture: "• Intentional Asymmetry over uniform cards\\n• Fluid Typography with mathematical clamp()\\n• Zero AI Slop Standard (Strict visual QA)\\n• Sub-millisecond TTFB Performance",
-      experience: "• Staff Engineer @ Nexus (2023-Present)\\n• Lead Architect @ CloudScale (2020-2023)\\n• Senior Full-Stack @ Voxel (2018-2020)",
-      stack: "TypeScript, Rust, Next.js, React 19, Python, Tailwind CSS, PostgreSQL, Redis, Docker, AWS",
-      contact: "Email: alex@example.com · GitHub: @alexrivera · Twitter: @alex_rivera"
+      files: result.files,
+      html: result.previewHtml,
+      fileCount: result.fileCount,
+      entrypoint: result.entrypoint
     };
-
-    termForm.addEventListener('submit', (e) => {
-      e.preventDefault();
-      const raw = termInput.value.trim();
-      if (!raw) return;
-
-      const cmd = raw.toLowerCase();
-      if (cmd === 'clear') {
-        termLogs.innerHTML = '';
-        termInput.value = '';
-        return;
-      }
-
-      const res = COMMAND_MAP[cmd] || ("Command not found: '" + raw + "'. Type 'help' for available commands.");
-
-      const item = document.createElement('div');
-      item.className = 'space-y-1';
-      item.innerHTML = \`
-        <div class="flex items-center gap-2 text-emerald-400">
-          <span>$</span>
-          <span>\${raw}</span>
-        </div>
-        <div class="text-neutral-400 whitespace-pre-line pl-4 border-l border-white/10">
-          \${res}
-        </div>
-      \`;
-      termLogs.appendChild(item);
-      termLogs.scrollTop = termLogs.scrollHeight;
-      termInput.value = '';
-    });
-  </script>
-
-</body>
-</html>`;
   }
 
   /**
@@ -1518,7 +363,6 @@ ${designSystem.cssTokens}
 
   /**
    * Step 6: Multi-File Exporter
-   * Saves the entire project structure to disk
    */
   async saveMultiFileOutput(outputDir, buildResult, creativeDirection, uxPlan, evaluation) {
     await fs.mkdir(outputDir, { recursive: true });
@@ -1547,39 +391,44 @@ ${designSystem.cssTokens}
   }
 
   /**
-   * Orchestrates the complete OneShot Synthesis
+   * Orchestrates the complete OneShot Synthesis via Dynamic Task Graph
    */
   async generateWebsite(userPrompt, options = {}) {
     const startTime = Date.now();
     const onProgress = options.onProgress || (() => {});
     const outputDir = options.outputDir || path.resolve(process.cwd(), 'generated-site');
 
-    // 0. Brief Analysis
-    const brief = this.runBriefAnalyzer(userPrompt, options);
+    // 1. Dynamic Planning & Task Graph Compilation
+    const analysis = this.planner.analyzeRequirements(userPrompt, options);
+    const spec = this.planner.createProjectSpecification(analysis);
+    const taskGraph = this.planner.createTaskGraph(spec);
 
-    // 1. Creative Direction
-    const creativeDirection = await this.runCreativeDirector(userPrompt, brief, onProgress);
+    // 2. Creative Direction
+    const creativeDirection = await this.runCreativeDirector(userPrompt, { domain: spec.domain, targetFramework: spec.framework }, onProgress);
 
-    // 2. UX Planning
+    // 3. UX Planning
     const uxPlan = await this.runUXPlanner(userPrompt, creativeDirection, onProgress);
 
-    // 3. Design System
+    // 4. Design System
     const designSystem = await this.runDesignSystem(creativeDirection, uxPlan, onProgress);
 
-    // 4. Frontend Multi-File Build
-    let buildResult = await this.runFrontendBuilder(
-      userPrompt,
-      creativeDirection,
-      uxPlan,
-      designSystem,
-      brief.targetFramework,
-      onProgress
-    );
+    // 5. Code Generation (Next.js 14 App Router + TS + Components)
+    spec.palette = designSystem.palette;
+    spec.fonts = designSystem.fonts;
+    const generated = this.codeGenerator.generateProject(spec);
+
+    const buildResult = {
+      framework: spec.framework,
+      files: generated.files,
+      html: generated.previewHtml,
+      fileCount: generated.fileCount,
+      entrypoint: generated.entrypoint
+    };
 
-    // 5. Visual Critic Evaluation
-    let evaluation = await this.runVisualCritic(buildResult.html, creativeDirection, onProgress);
+    // 6. Visual Critic Evaluation
+    const evaluation = await this.runVisualCritic(buildResult.html, creativeDirection, onProgress);
 
-    // 6. Token Savings Metrics
+    // 7. Token Savings Metrics
     const estimatedRawTokens = 42500;
     const actualTokens = 11800;
     const saved = estimatedRawTokens - actualTokens;
@@ -1592,14 +441,15 @@ ${designSystem.cssTokens}
       efficiencyRatio: efficiency
     };
 
-    // 7. Save complete multi-file project to disk
+    // 8. Save complete multi-file project to disk
     await this.saveMultiFileOutput(outputDir, buildResult, creativeDirection, uxPlan, evaluation);
 
     const durationMs = Date.now() - startTime;
 
     return {
       userPrompt,
-      targetFramework: brief.targetFramework,
+      targetFramework: spec.framework,
+      taskGraph,
       outputDir,
       creativeDirection,
       uxPlan,