vibetachyon 1.9.0 → 2.1.0

package/dist/mcp-server.js

@@ -47,8 +47,148 @@ async function checkSanity() {
         throw new Error(`[VIBETACHYON SANITY TRAP] Execution blocked. Agent exceeded ${CALL_LIMIT_PER_SESSION} tool calls in a single session. This prevents infinite loops or excessive API usage. Please restart the CLI if this was intentional.`);
     }
 }
+// --- Style Palettes — real CSS values per preset ─────────────────────────
+const STYLE_PALETTES = {
+    linear: {
+        '--background': '#0a0a0f',
+        '--foreground': '#f4f4f5',
+        '--primary': '#6366f1',
+        '--primary-fg': '#ffffff',
+        '--muted': '#1c1c28',
+        '--muted-fg': '#8585a8',
+        '--border': 'rgba(255,255,255,0.08)',
+        '--card': '#111120',
+        '--radius': '8px',
+        '--font': "'Inter', system-ui, sans-serif",
+        '--gradient': 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
+        '--shadow': '0 1px 3px rgba(0,0,0,0.4)',
+    },
+    vercel: {
+        '--background': '#000000',
+        '--foreground': '#ffffff',
+        '--primary': '#ffffff',
+        '--primary-fg': '#000000',
+        '--muted': '#111111',
+        '--muted-fg': '#888888',
+        '--border': '#333333',
+        '--card': '#0a0a0a',
+        '--radius': '4px',
+        '--font': "'Geist', 'Inter', system-ui, sans-serif",
+        '--gradient': 'none',
+        '--shadow': '0 0 0 1px #333',
+    },
+    stripe: {
+        '--background': '#ffffff',
+        '--foreground': '#0a2540',
+        '--primary': '#635bff',
+        '--primary-fg': '#ffffff',
+        '--muted': '#f6f9fc',
+        '--muted-fg': '#425466',
+        '--border': '#e3e8ee',
+        '--card': '#ffffff',
+        '--radius': '6px',
+        '--font': "'Sohne', 'Inter', system-ui, sans-serif",
+        '--gradient': 'linear-gradient(135deg, #635bff 0%, #0a2540 100%)',
+        '--shadow': '0 2px 8px rgba(0,0,0,0.08)',
+    },
+    notion: {
+        '--background': '#ffffff',
+        '--foreground': '#37352f',
+        '--primary': '#2eaadc',
+        '--primary-fg': '#ffffff',
+        '--muted': '#f7f6f3',
+        '--muted-fg': '#9b9a97',
+        '--border': '#e9e9e7',
+        '--card': '#ffffff',
+        '--radius': '3px',
+        '--font': "'ui-sans-serif', 'Inter', system-ui, sans-serif",
+        '--gradient': 'none',
+        '--shadow': '0 1px 3px rgba(0,0,0,0.07)',
+    },
+    apple: {
+        '--background': '#f5f5f7',
+        '--foreground': '#1d1d1f',
+        '--primary': '#0066cc',
+        '--primary-fg': '#ffffff',
+        '--muted': '#e8e8ed',
+        '--muted-fg': '#6e6e73',
+        '--border': 'rgba(0,0,0,0.1)',
+        '--card': '#ffffff',
+        '--radius': '12px',
+        '--font': "'-apple-system', 'SF Pro Display', 'Inter', sans-serif",
+        '--gradient': 'linear-gradient(180deg, #f5f5f7 0%, #e8e8ed 100%)',
+        '--shadow': '0 4px 20px rgba(0,0,0,0.08)',
+    },
+    'bold-dark': {
+        '--background': '#060b18',
+        '--foreground': '#e2e8f0',
+        '--primary': '#06b6d4',
+        '--primary-fg': '#000000',
+        '--muted': '#0f1d2e',
+        '--muted-fg': '#94a3b8',
+        '--border': 'rgba(6,182,212,0.15)',
+        '--card': '#0d1a2e',
+        '--radius': '10px',
+        '--font': "'Inter', system-ui, sans-serif",
+        '--gradient': 'linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%)',
+        '--shadow': '0 4px 24px rgba(6,182,212,0.15)',
+    },
+    agency: {
+        '--background': '#0f0f0f',
+        '--foreground': '#ffffff',
+        '--primary': '#ff6b35',
+        '--primary-fg': '#ffffff',
+        '--muted': '#1a1a1a',
+        '--muted-fg': '#999999',
+        '--border': 'rgba(255,107,53,0.2)',
+        '--card': '#1a1a1a',
+        '--radius': '2px',
+        '--font': "'Space Grotesk', 'Inter', system-ui, sans-serif",
+        '--gradient': 'linear-gradient(135deg, #ff6b35 0%, #f7c59f 100%)',
+        '--shadow': '0 4px 20px rgba(255,107,53,0.2)',
+    },
+    aceternity: {
+        '--background': '#000000',
+        '--foreground': '#ffffff',
+        '--primary': '#a855f7',
+        '--primary-fg': '#ffffff',
+        '--muted': '#0a0a0a',
+        '--muted-fg': '#71717a',
+        '--border': 'rgba(168,85,247,0.2)',
+        '--card': '#0a0a0a',
+        '--radius': '16px',
+        '--font': "'Inter', system-ui, sans-serif",
+        '--gradient': 'linear-gradient(135deg, #a855f7 0%, #6366f1 50%, #ec4899 100%)',
+        '--shadow': '0 0 40px rgba(168,85,247,0.25)',
+    },
+    custom: {
+        '--background': 'var(--background, #ffffff)',
+        '--foreground': 'var(--foreground, #000000)',
+        '--primary': 'var(--primary, #3b82f6)',
+        '--primary-fg': 'var(--primary-fg, #ffffff)',
+        '--muted': 'var(--muted, #f4f4f5)',
+        '--muted-fg': 'var(--muted-fg, #71717a)',
+        '--border': 'var(--border, #e4e4e7)',
+        '--card': 'var(--card, #ffffff)',
+        '--radius': 'var(--radius, 8px)',
+        '--font': "var(--font-sans, 'Inter', sans-serif)",
+        '--gradient': 'none',
+        '--shadow': '0 1px 3px rgba(0,0,0,0.1)',
+    },
+};
 // --- Changelog (per version) ---
 const CHANGELOG = {
+    '2.1.0': [
+        'Fix: vibe_compose_landing_page detecta framework (Next.js/Vite) automaticamente',
+        'Fix: output sempre .tsx React, nunca index.html',
+        'Instruções explícitas de conversão HTML→JSX (class→className, useEffect)',
+        'Detecta src/app vs app para outputTarget correto',
+    ],
+    '2.0.0': [
+        '8 presets visuais reais: linear, vercel, stripe, bold-dark, agency...',
+        'Paletas CSS aplicadas automaticamente — sem mais neon hardcoded',
+        'vibe_compose_landing_page lê o brief e injeta cores corretas',
+    ],
     '1.9.0': [
         'vibe_clone_design — clone design system de qualquer URL',
         'Detecta cores, tipografia, radius e sombras automaticamente',
@@ -203,7 +343,7 @@ async function validateTokenAtStartup() {
     }
     // --- Update Check ---
     try {
-        const CURRENT_VERSION = '1.9.0'; // keep in sync with package.json
+        const CURRENT_VERSION = '2.0.0'; // keep in sync with package.json
         const npmRes = await fetch('https://registry.npmjs.org/vibetachyon/latest', {
             signal: AbortSignal.timeout(4000)
         });
@@ -232,7 +372,7 @@ async function startMcpServer() {
     await validateTokenAtStartup();
     const server = new mcp_js_1.McpServer({
         name: "VibeTachyon MCP — Animmaster Engine",
-        version: "1.9.0"
+        version: "2.0.0"
     });
     /**
      * VIBETACHYON FRONTEND PERSONA — Senior Frontend Designer (Animmaster Engine)
@@ -981,7 +1121,7 @@ COMPONENT SELECTION FILTER (apply mentally before using any component):
         niche: zod_1.z.string().describe("What is the product niche? e.g. 'B2B SaaS fintech', 'developer tool', 'e-commerce fashion'"),
         targetAudience: zod_1.z.string().describe("Who is the target user? e.g. 'CTO of early-stage startup', 'solo developer', 'non-technical founder'"),
         styleWords: zod_1.z.array(zod_1.z.string()).describe("3 adjectives that describe the desired visual style. e.g. ['clean', 'modern', 'trustworthy'] or ['bold', 'dark', 'animated']"),
-        referenceStyle: zod_1.z.enum(['linear', 'vercel', 'stripe', 'aceternity', 'apple', 'notion', 'custom']).describe("Which product's visual style to reference as inspiration."),
+        referenceStyle: zod_1.z.enum(['linear', 'vercel', 'stripe', 'aceternity', 'apple', 'notion', 'bold-dark', 'agency', 'custom']).describe("Visual preset: 'linear'=dark minimal indigo, 'vercel'=black/white terminal, 'stripe'=light professional, 'notion'=clean editorial, 'apple'=light cinematic, 'bold-dark'=dark navy cyan, 'agency'=dark orange dramatic, 'aceternity'=dark glowing purple, 'custom'=use project CSS vars"),
         sectionsNeeded: zod_1.z.array(zod_1.z.string()).describe("Which page sections are needed in order. e.g. ['hero', 'features', 'social-proof', 'pricing', 'faq', 'cta']")
     }, async ({ projectDir, pageGoal, niche, targetAudience, styleWords, referenceStyle, sectionsNeeded }) => {
         await checkSanity();
@@ -1064,6 +1204,10 @@ COMPONENT SELECTION FILTER (apply mentally before using any component):
         if (sectionsNeeded.includes('pricing') && !sectionsNeeded.includes('social-proof') && !sectionsNeeded.includes('testimonials')) {
             sectionWarnings.push('⚠️ Pricing without social proof reduces trust — consider adding testimonials before pricing.');
         }
+        const palette = STYLE_PALETTES[referenceStyle] || STYLE_PALETTES.custom;
+        const paletteCSS = Object.entries(palette)
+            .map(([k, v]) => `  ${k}: ${v};`)
+            .join('\n');
         const brief = {
             createdAt: new Date().toISOString(),
             pageGoal,
@@ -1072,6 +1216,8 @@ COMPONENT SELECTION FILTER (apply mentally before using any component):
             styleWords,
             referenceStyle,
             sectionsNeeded,
+            palette,
+            paletteCSS: `:root {\n${paletteCSS}\n}`,
             styleProfile: profile,
             rules: {
                 maxAnimationTypes: profile.animationLevel === 'heavy' ? 3 : profile.animationLevel === 'subtle' ? 2 : 0,
@@ -1117,14 +1263,17 @@ COMPONENT SELECTION FILTER (apply mentally before using any component):
                         `DESIGN RULES:\n${rulesText}\n\n` +
                         `SECTION SEQUENCE:\n${sectionsText}` +
                         `${warningsText}\n\n` +
+                        `COLOR PALETTE (USE THESE EXACT VALUES — NO EXCEPTIONS):\n` +
+                        `\`\`\`css\n${brief.paletteCSS}\n\`\`\`\n\n` +
                         `INSTRUCTION FOR AI — CRITICAL RULES FOR THIS SESSION:\n` +
-                        `1. Every component you choose MUST match the "${referenceStyle}" reference style\n` +
-                        `2. Visual tone is "${profile.tone}" — ${profile.tone === 'dark' ? 'use dark backgrounds, light text' : profile.tone === 'light' ? 'use light backgrounds, dark text' : 'adapt to project'}\n` +
-                        `3. MAXIMUM ${brief.rules.maxAnimationTypes} different animation styles on the entire page\n` +
-                        `4. NEVER mix styles from the avoid list: ${profile.avoid.join(', ')}\n` +
-                        `5. Build sections in this EXACT order: ${sectionsNeeded.join(' → ')}\n` +
-                        `6. Before searching each section, re-read this brief to ensure coherence\n` +
-                        `7. If a component from vibe_search_snippets does NOT match this brief, REJECT it and search again`
+                        `1. ALWAYS inject the CSS palette above as the FIRST thing inside <style> when generating HTML\n` +
+                        `2. NEVER hardcode colors like #7c3aed, #a855f7, #ec4899 — use ONLY the CSS vars above\n` +
+                        `3. Every component you choose MUST match the "${referenceStyle}" reference style\n` +
+                        `4. Visual tone is "${profile.tone}" — ${profile.tone === 'dark' ? 'dark backgrounds, light text' : profile.tone === 'light' ? 'light backgrounds, dark text' : 'adapt to project'}\n` +
+                        `5. MAXIMUM ${brief.rules.maxAnimationTypes} different animation styles on the entire page\n` +
+                        `6. NEVER use these: ${profile.avoid.join(', ')}\n` +
+                        `7. Build sections in this EXACT order: ${sectionsNeeded.join(' → ')}\n` +
+                        `8. If a component does NOT match this brief, REJECT it and search again`
                 }]
         };
     });
@@ -1566,11 +1715,69 @@ COMPONENT SELECTION FILTER (apply mentally before using any component):
         }
     });
     // Tool: Compose Landing Page
-    server.tool("vibe_compose_landing_page", "Macro-composer that autonomously queries the VibeCodes RAG database for a full Landing Page structure (Navbar, Hero, Features, Pricing, Footer).", {
-        themeOrIndustry: zod_1.z.string().describe("The theme, industry, or style of the page (e.g., 'SaaS Finance Dark Mode', 'Dental Clinic Clean')")
-    }, async ({ themeOrIndustry }) => {
+    server.tool("vibe_compose_landing_page", "Macro-composer that autonomously queries the VibeCodes RAG database for a full Landing Page structure (Navbar, Hero, Features, Pricing, Footer). ALWAYS call vibe_design_brief first — this tool reads the saved brief to apply the correct color palette. OUTPUT: Always generates Next.js TSX React components (never index.html). For Next.js projects, saves to src/app/page.tsx or app/page.tsx. Convert all HTML templates to JSX (class→className, style={{}} etc).", {
+        themeOrIndustry: zod_1.z.string().describe("The theme, industry, or style of the page (e.g., 'SaaS Finance', 'Dental Clinic', 'Developer Tool')"),
+        projectDir: zod_1.z.string().optional().describe("Absolute path to the project root. Used to read the design brief.")
+    }, async ({ themeOrIndustry, projectDir }) => {
         await checkSanity();
         try {
+            // Read design brief for palette injection
+            let paletteCSS = '';
+            let briefStyle = 'linear';
+            let briefTone = 'dark';
+            let briefAvoid = [];
+            const cwd = projectDir || process.cwd();
+            const root = await findProjectRoot(cwd);
+            // Detect framework for output instructions
+            let framework = 'unknown';
+            let outputTarget = '';
+            const pkgPath = path_1.default.join(root, 'package.json');
+            if (await fs_extra_1.default.pathExists(pkgPath)) {
+                try {
+                    const pkg = await fs_extra_1.default.readJson(pkgPath);
+                    const deps = { ...pkg.dependencies, ...pkg.devDependencies };
+                    if (deps['next']) {
+                        framework = 'nextjs';
+                        const hasAppSrc = await fs_extra_1.default.pathExists(path_1.default.join(root, 'src', 'app'));
+                        const hasApp = await fs_extra_1.default.pathExists(path_1.default.join(root, 'app'));
+                        if (hasAppSrc)
+                            outputTarget = 'src/app/page.tsx';
+                        else if (hasApp)
+                            outputTarget = 'app/page.tsx';
+                        else
+                            outputTarget = 'src/app/page.tsx';
+                    }
+                    else if (deps['vite'] || deps['react']) {
+                        framework = 'vite';
+                        outputTarget = 'src/App.tsx';
+                    }
+                    else if (deps['nuxt']) {
+                        framework = 'nuxt';
+                        outputTarget = 'pages/index.vue';
+                    }
+                }
+                catch { /* ignore */ }
+            }
+            const briefPath = path_1.default.join(root, '.vibetachyon', 'design-session.json');
+            if (await fs_extra_1.default.pathExists(briefPath)) {
+                try {
+                    const brief = await fs_extra_1.default.readJson(briefPath);
+                    if (brief.paletteCSS)
+                        paletteCSS = brief.paletteCSS;
+                    if (brief.referenceStyle)
+                        briefStyle = brief.referenceStyle;
+                    if (brief.styleProfile?.tone)
+                        briefTone = brief.styleProfile.tone;
+                    if (brief.rules?.mustAvoid)
+                        briefAvoid = brief.rules.mustAvoid;
+                }
+                catch { /* use defaults */ }
+            }
+            // Fallback: use linear palette if no brief
+            if (!paletteCSS) {
+                const fallbackPalette = STYLE_PALETTES[briefStyle] || STYLE_PALETTES.linear;
+                paletteCSS = `:root {\n${Object.entries(fallbackPalette).map(([k, v]) => `  ${k}: ${v};`).join('\n')}\n}`;
+            }
             // Map sections to Animmaster use cases and search terms
             const sectionMap = [
                 { section: 'preloader', query: 'preloader', useCase: 'preloader' },
@@ -1580,7 +1787,37 @@ COMPONENT SELECTION FILTER (apply mentally before using any component):
                 { section: 'features', query: 'features section', useCase: 'feature-section' },
                 { section: 'footer', query: 'footer', useCase: 'footer' }
             ];
-            let combinedPage = `[🎬 ANIMMASTER PAGE COMPOSER: ${themeOrIndustry}]\n\nINSTRUCTION FOR AI: Assemble a complete page using Animmaster components in init_order sequence.\n\n`;
+            let combinedPage = `[🎬 ANIMMASTER PAGE COMPOSER: ${themeOrIndustry}]\n`;
+            combinedPage += `Style: ${briefStyle} | Tone: ${briefTone}\n\n`;
+            // Framework-aware output instructions
+            combinedPage += `━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n`;
+            combinedPage += `📁 OUTPUT TARGET: ${outputTarget || 'src/app/page.tsx'}\n`;
+            combinedPage += `🚨 NEVER create index.html — this is a ${framework === 'nextjs' ? 'Next.js' : framework === 'vite' ? 'React/Vite' : 'React'} project\n`;
+            combinedPage += `🚨 ALL output MUST be .tsx React components, NOT plain HTML files\n`;
+            if (framework === 'nextjs') {
+                combinedPage += `\n📋 NEXTJS TSX RULES:\n`;
+                combinedPage += `  • Convert all HTML → JSX: class→className, for→htmlFor, style={{}}\n`;
+                combinedPage += `  • Add "use client" directive at top if using animations/events\n`;
+                combinedPage += `  • Inline scripts → useEffect(() => { /* JS here */ }, [])\n`;
+                combinedPage += `  • External CDN scripts → use next/script: <Script src="..." strategy="afterInteractive" />\n`;
+                combinedPage += `  • Self-closing tags: <img />, <br />, <input />\n`;
+                combinedPage += `  • Create each section as a separate component in src/components/\n`;
+                combinedPage += `  • Page file: export default function Page() { return (<main>...</main>) }\n`;
+            }
+            else if (framework === 'vite') {
+                combinedPage += `\n📋 VITE/REACT TSX RULES:\n`;
+                combinedPage += `  • Convert HTML → JSX: class→className, for→htmlFor\n`;
+                combinedPage += `  • Inline scripts → useEffect with cleanup\n`;
+                combinedPage += `  • Add React imports at top\n`;
+            }
+            combinedPage += `━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\n`;
+            combinedPage += `⚠️ MANDATORY COLOR RULES — INJECT THIS PALETTE IN globals.css:\n\`\`\`css\n${paletteCSS}\n\`\`\`\n\n`;
+            combinedPage += `CRITICAL: Use ONLY var(--background), var(--primary), var(--foreground), var(--border), var(--card) etc.\n`;
+            combinedPage += `NEVER hardcode hex colors. NEVER use purple/neon unless --primary IS purple in the palette above.\n`;
+            if (briefAvoid.length > 0)
+                combinedPage += `AVOID: ${briefAvoid.join(', ')}\n`;
+            combinedPage += `\nINSTRUCTION FOR AI: Assemble a complete page using Animmaster components in init_order sequence.\n`;
+            combinedPage += `Convert ALL HTML templates below to JSX. Initialize JS in useEffect hooks.\n\n`;
             const allComponents = [];
             for (const { section, query, useCase } of sectionMap) {
                 const { data } = await supabase
@@ -1615,7 +1852,13 @@ COMPONENT SELECTION FILTER (apply mentally before using any component):
             }
             const totalBudget = allComponents.reduce((sum, c) => sum + (c.animation_budget || 0), 0);
             combinedPage += `\n---\nTotal animation budget: ${totalBudget}/30 | Components: ${allComponents.length}\n`;
-            combinedPage += `\nINSTRUCTION FOR AI: Initialize scripts in the order listed above (preloader → cursor → header → effects).`;
+            combinedPage += `\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n`;
+            combinedPage += `FINAL INSTRUCTION:\n`;
+            combinedPage += `1. Initialize components in init_order sequence (preloader → cursor → header → effects)\n`;
+            combinedPage += `2. Save the page to: ${outputTarget || 'src/app/page.tsx'}\n`;
+            combinedPage += `3. ${framework === 'nextjs' ? 'Add "use client" at top, convert all HTML to JSX (class→className)' : 'Convert HTML to JSX React components'}\n`;
+            combinedPage += `4. NEVER create index.html — always .tsx files only\n`;
+            combinedPage += `━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━`;
             return { content: [{ type: "text", text: combinedPage }] };
         }
         catch (err) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vibetachyon",
-    "version": "1.9.0",
+    "version": "2.1.0",
     "description": "VibeCodes MCP CLI Installer and Server",
     "main": "dist/index.js",
     "bin": {