vibetachyon 1.5.6 → 1.5.8

package/dist/mcp-server.js

@@ -177,51 +177,148 @@ async function startMcpServer() {
         version: "1.5.0"
     });
     /**
-     * SYSTEM_PROMPT INJECTION:
-     * You are a VibeCodes God-Tier Frontend Engineer. Your primary mission is to build stunning, high-performance interfaces.
-     * You MUST prioritize using tools like 'search_vibecodes_mcp' to retrieve premium UI components (Aceternity, MagicUI, Shadcn)
-     * from our 6,000+ component library. DO NOT generate standard, generic HTML/CSS. If a tool exists to enhance the UI, use it.
-     * Your output must be elite, animated, and pixel-perfect. Always confirm if you retrieved components from the database.
+     * VIBETACHYON FRONTEND PERSONA — Senior Frontend Designer
+     *
+     * You are a Senior Frontend Designer with 10 years of experience building SaaS products.
+     * You have strong opinions and you enforce them. You do NOT generate generic code.
+     *
+     * YOUR MANDATORY WORKFLOW — follow this EXACT sequence for every page/section request:
+     * 1. vibe_project_dna      — read the project first, always
+     * 2. vibe_design_brief     — if no brief exists, ASK the user before touching any code
+     * 3. vibe_read_design_brief — read active brief before each new section
+     * 4. vibe_search_snippets  — search with use_case and style filters from the brief
+     * 5. Generate code         — only after steps 1-4 are complete
+     *
+     * YOUR NON-NEGOTIABLE RULES:
+     * - NEVER mix more than 2 animation styles on a single page
+     * - NEVER use more than 3 brand colors (primary, secondary, accent)
+     * - NEVER hardcode hex/rgb — always use CSS variables or Tailwind semantic classes
+     * - NEVER generate a section without first checking the active design brief
+     * - ALWAYS explain WHY you chose each component (1 sentence per component)
+     * - ALWAYS build sections in the order defined in the brief
+     * - ALWAYS reject components that violate the brief's avoid list
+     * - If a component from vibe_search_snippets conflicts with the brief, search again with different terms
+     *
+     * VISUAL COHERENCE RULES:
+     * - Dark brief → all sections dark. No random light cards in a dark page.
+     * - Minimal brief → no particle effects, no glassmorphism overuse, no rainbow gradients
+     * - Aceternity brief → immersive, full-viewport, animated — but still coherent
+     * - Max 1 heavy-animation section per page (usually the hero). Rest = subtle or static.
+     *
+     * CONVERSION RULES (SaaS pages):
+     * - Section order: hero → social-proof → features → how-it-works → pricing → faq → cta
+     * - CTA always last. Never bury it in the middle.
+     * - Social proof (logos/testimonials) before pricing — builds trust first
+     * - Every section must have ONE clear action or message. Not two.
      */
     // Tool: Searching Snippets
-    server.tool("vibe_search_snippets", "Search for UI components in the VibeCodes repository (both public and MCP-exclusive). Returns TSX/HTML/CSS code.", {
-        query: zod_1.z.string().describe("Search query for the UI component (e.g. 'pricing table', 'neon button')"),
+    server.tool("vibe_search_snippets", "Search for UI components in the VibeCodes repository. Automatically loads the active design brief to filter components by style, use_case and complexity. Always call vibe_project_dna and vibe_design_brief before this tool.", {
+        query: zod_1.z.string().describe("Search query for the UI component (e.g. 'hero section dark', 'animated button')"),
         limit: zod_1.z.number().optional().describe("Max number of results to return (default: 5)"),
-        projectDir: zod_1.z.string().optional().describe("Absolute path to the user's project root. Crucial for auto-formatting code correctly.")
-    }, async ({ query, limit = 5, projectDir }) => {
+        projectDir: zod_1.z.string().optional().describe("Absolute path to the user's project root."),
+        useCaseFilter: zod_1.z.string().optional().describe("Filter by use case: 'hero', 'cta', 'feature-section', 'navigation', 'footer', 'pricing', 'social-proof', 'background-effect', 'text-effect', 'modal', 'form'"),
+        styleFilter: zod_1.z.array(zod_1.z.string()).optional().describe("Filter by style tags: 'dark', 'light', 'animated', 'glassmorphism', 'gradient', 'minimal', 'modern'"),
+        complexityFilter: zod_1.z.enum(['simple', 'medium', 'complex']).optional().describe("Filter by code complexity")
+    }, async ({ query, limit = 5, projectDir, useCaseFilter, styleFilter, complexityFilter }) => {
         await checkSanity();
-        console.error(`[VibeTachyon] Searching Semantic DB for: ${query}`);
+        console.error(`[VibeTachyon] Searching DB for: ${query}`);
+        const rawRoot = projectDir || process.cwd();
+        const root = await findProjectRoot(rawRoot);
+        // Auto-load design brief to enrich filters
+        let brief = null;
+        let briefWarning = '';
         try {
-            // Use the Advanced RAG Postgres RPC for semantic natural language TSVector search
-            const { data: allResults, error } = await supabase
-                .rpc('search_vibecodes_mcp', {
+            const sessionPath = path_1.default.join(root, '.vibetachyon', 'design-session.json');
+            if (await fs_extra_1.default.pathExists(sessionPath)) {
+                brief = await fs_extra_1.default.readJson(sessionPath);
+            }
+            else {
+                briefWarning = `\n⚠️ [VibeTachyon] No design brief found. Call vibe_design_brief first for better results.\n`;
+            }
+        }
+        catch { /* brief is optional */ }
+        // Merge explicit filters with brief-derived filters
+        let resolvedStyleFilter = styleFilter;
+        let resolvedUseCaseFilter = useCaseFilter;
+        let resolvedComplexity = complexityFilter;
+        if (brief && !styleFilter) {
+            const tone = brief.rules?.visualTone;
+            const animLevel = brief.rules?.animationLevel || brief.styleProfile?.animationLevel;
+            const derivedTags = [];
+            if (tone === 'dark')
+                derivedTags.push('dark');
+            if (tone === 'light')
+                derivedTags.push('light');
+            if (animLevel === 'heavy')
+                derivedTags.push('animated');
+            if (brief.referenceStyle === 'aceternity')
+                derivedTags.push('animated', 'dark');
+            if (brief.referenceStyle === 'notion' || brief.referenceStyle === 'stripe')
+                derivedTags.push('minimal');
+            if (derivedTags.length > 0)
+                resolvedStyleFilter = derivedTags;
+        }
+        try {
+            const rpcParams = {
                 search_query: query,
                 max_limit: limit
-            });
+            };
+            if (resolvedUseCaseFilter)
+                rpcParams.filter_use_case = resolvedUseCaseFilter;
+            if (resolvedStyleFilter && resolvedStyleFilter.length > 0)
+                rpcParams.filter_style_tags = resolvedStyleFilter;
+            if (resolvedComplexity)
+                rpcParams.filter_complexity = resolvedComplexity;
+            const { data: allResults, error } = await supabase
+                .rpc('search_vibecodes_mcp', rpcParams);
             if (error) {
                 console.error("[VibeTachyon] Supabase RPC Error:", error);
                 throw error;
             }
-            if (!allResults || allResults.length === 0) {
+            // If filtered search returns nothing, fallback to unfiltered
+            let results = allResults;
+            let fallbackNote = '';
+            if ((!results || results.length === 0) && (resolvedStyleFilter || resolvedUseCaseFilter)) {
+                console.error(`[VibeTachyon] No filtered results, falling back to unfiltered search`);
+                const { data: fallback } = await supabase.rpc('search_vibecodes_mcp', {
+                    search_query: query,
+                    max_limit: limit
+                });
+                results = fallback;
+                fallbackNote = `\n⚠️ No components matched the style filters. Showing best semantic matches instead — review fit with design brief.\n`;
+            }
+            if (!results || results.length === 0) {
                 return {
-                    content: [{ type: "text", text: `No VibeCodes components found for "${query}". Try different semantics.` }]
+                    content: [{ type: "text", text: `No VibeCodes components found for "${query}". Try different search terms.` }]
                 };
             }
-            const formattedResults = allResults.map((item) => {
-                const srcInfo = item.source_table === 'mcp_exclusive' ? '[⭐ PREMIUM MCP EXCLUSIVE]' : '[🌐 VIBECODES HUB]';
+            // Coherence check — flag components that might break brief rules
+            const briefAvoid = brief?.rules?.mustAvoid || [];
+            const formattedResults = results.map((item) => {
+                const srcInfo = item.source_table === 'Aceternity UI' ? '[⭐ ACETERNITY]'
+                    : item.source_table === 'Magic UI' ? '[✨ MAGIC UI]'
+                        : item.source_table === '21st.dev' ? '[🌐 21ST.DEV]'
+                            : `[📦 ${item.source_table?.toUpperCase() || 'VIBECODES'}]`;
+                const styleLine = item.style_tags?.length
+                    ? `Style: ${item.style_tags.join(', ')}`
+                    : '';
+                const useCaseLine = item.use_case?.length
+                    ? `Use case: ${item.use_case.join(', ')}`
+                    : '';
+                const complexityLine = item.complexity ? `Complexity: ${item.complexity}` : '';
+                // Coherence warning
+                const codeStr = (item.code || '').toLowerCase();
+                const violations = briefAvoid.filter((rule) => {
+                    const ruleKey = rule.toLowerCase();
+                    return codeStr.includes(ruleKey) || (item.title || '').toLowerCase().includes(ruleKey);
+                });
+                const coherenceNote = violations.length > 0
+                    ? `\n🚨 BRIEF CONFLICT: This component may contain "${violations.join(', ')}" which is in the avoid list. Review before using.\n`
+                    : '';
                 const minifiedCode = minifySnippet(item.code);
-                return `### ${item.title} ${srcInfo}\n${item.description || ''}\n\n\`\`\`tsx\n${minifiedCode}\n\`\`\``;
+                return `### ${item.title} ${srcInfo}\n${[styleLine, useCaseLine, complexityLine].filter(Boolean).join(' | ')}\n${item.description || ''}${coherenceNote}\n\`\`\`tsx\n${minifiedCode}\n\`\`\``;
             }).join('\n\n---\n\n');
-            // --- SHIELD V3: AUTOMATIC PEER AUDIT ---
-            const rawRoot = projectDir || process.cwd();
-            const root = await findProjectRoot(rawRoot);
-            const standardDeps = { "framer-motion": "11.0.0", "lucide-react": "0.400.0" };
-            const audit = await auditPeerDeps(root, standardDeps);
-            let auditPrefix = "";
-            if (audit.warnings.length > 0) {
-                auditPrefix = `### ⚠️ [VIBESHIELD: VERSION WARNING]\n${audit.warnings.join('\n')}\n\n`;
-            }
-            // --- ZERO FRICTION "ACCEPT-ALL" GUARDRAILS ---
+            // Framework guardrails
             let frameworkContext = "";
             try {
                 const pkgPath = path_1.default.join(root, 'package.json');
@@ -230,51 +327,120 @@ async function startMcpServer() {
                     const deps = { ...pkg.dependencies, ...pkg.devDependencies };
                     const isVite = !!deps['vite'];
                     const isNext = !!deps['next'];
-                    frameworkContext += `\n\n=======================================================\n`;
-                    frameworkContext += `[CRITICAL COPILOT DIRECTIVE - ZERO FRICTION GUARANTEE]\n`;
-                    frameworkContext += `You are generating code for a user who will likely click "Accept All". You MUST NOT output incompatible code that breaks their app. `;
-                    frameworkContext += `USER ENVIRONMENT: ${isNext ? 'Next.js' : isVite ? 'Vite/React SPA' : 'React/Other'}.\n\n`;
-                    if (isVite) {
-                        frameworkContext += `🚨 FATAL VITE ERROR PREVENTION:\n- DO NOT use Next.js '<Image>' or 'next/link'.\n- DO NOT use '"use client"'.\n- You MUST implicitly translate the components above into standard '<img>' and '<a>' tags BEFORE writing the final code.\n`;
-                        frameworkContext += `- Tell the user to run this command if animations are used: \`npm install framer-motion lucide-react clsx tailwind-merge\`\n`;
-                    }
-                    else if (isNext) {
-                        frameworkContext += `🚨 NEXT.JS OPTIMIZATION:\n- Use Server Components by default.\n- If the component uses hooks (useState) or onClick, you MUST prepend '"use client";' at the very top of the generated file.\n`;
-                        frameworkContext += `- Ensure image domains are whitelisted (tell them to update next.config.ts if an external src is used).\n`;
-                    }
-                    frameworkContext += `=======================================================\n`;
+                    frameworkContext += `\n[FRAMEWORK: ${isNext ? 'Next.js' : isVite ? 'Vite/React' : 'React'}]\n`;
+                    if (isVite)
+                        frameworkContext += `- Remove "use client", replace next/image with <img>, replace next/link with <a>\n`;
+                    if (isNext)
+                        frameworkContext += `- Add "use client" if component uses hooks or event handlers\n`;
                 }
             }
-            catch (e) {
-                // silently fail the context extraction if no pkg json found
-            }
+            catch { /* silent */ }
+            // Peer dep audit
+            const standardDeps = { "framer-motion": "11.0.0", "lucide-react": "0.400.0" };
+            const audit = await auditPeerDeps(root, standardDeps);
+            const auditPrefix = audit.warnings.length > 0
+                ? `⚠️ [VIBESHIELD]\n${audit.warnings.join('\n')}\n\n`
+                : '';
+            const briefSummary = brief
+                ? `[Active Brief: ${brief.referenceStyle} | ${brief.rules?.visualTone} | max ${brief.rules?.maxAnimationTypes} animations]\n`
+                : '';
             return {
-                content: [{ type: "text", text: `${auditPrefix}🧠 VibeTachyon found ${allResults.length} highly relevant components:\n\n${formattedResults}\n\n${frameworkContext}` }]
+                content: [{
+                        type: "text",
+                        text: `${auditPrefix}${briefWarning}${fallbackNote}${briefSummary}` +
+                            `🧠 VibeTachyon found ${results.length} components for "${query}"` +
+                            (resolvedStyleFilter ? ` [style: ${resolvedStyleFilter.join(', ')}]` : '') +
+                            (resolvedUseCaseFilter ? ` [use: ${resolvedUseCaseFilter}]` : '') +
+                            `:\n\n${formattedResults}\n\n${frameworkContext}` +
+                            `\nINSTRUCTION FOR AI: Cross-check each component against the active design brief before using. Reject any that violate the brief rules.`
+                    }]
             };
         }
         catch (error) {
-            console.error("[VibeTachyon] Supabase Search Error:", error);
+            console.error("[VibeTachyon] Search Error:", error);
             return {
-                content: [{ type: "text", text: `Error searching VibeCodes repository: ${error}` }]
+                content: [{ type: "text", text: `Error searching VibeCodes repository: ${error instanceof Error ? error.message : String(error)}` }]
             };
         }
     });
-    // Example Tool: Access VibeCodes Rules
-    server.tool("vibe_get_architecture", "Get instructions on how to design and build components adhering to the VibeCodes Neon Blue Design System", {}, async () => {
-        await checkSanity();
-        const cacheKey = 'architecture_rules';
-        const cached = await getLocalCache(cacheKey);
-        if (cached)
-            return { content: [{ type: "text", text: `(Local Cached) ${cached}` }] };
-        const rules = `VibeCodes Design System Rules:\n1. Dark mode natively (backgrounds using hsl).\n2. Glassmorphism: Borders should be white/10 or primary/20.\n3. Shadows: Use aggressive radial shadows like shadow-[0_0_20px_rgba(30,136,229,0.15)].\n4. Use Lucide React icons.\n5. Use Shadcn UI as base but apply custom Vibe themes.`;
-        await setLocalCache(cacheKey, rules);
+    // Tool: Frontend Persona — Senior Designer Rules
+    server.tool("vibe_get_architecture", "Returns the VibeTachyon Frontend Designer persona rules, workflow sequence, and design principles. Call this at the start of any frontend session to load the designer mindset.", {
+        context: zod_1.z.string().optional().describe("Optional context: 'landing-page', 'saas-dashboard', 'marketing-page', 'component'. Defaults to 'landing-page'.")
+    }, async ({ context = 'landing-page' }) => {
+        await checkSanity();
+        const contextRules = {
+            'landing-page': [
+                'LANDING PAGE RULES:',
+                '- Structure: hero → social-proof → features → pricing → faq → cta',
+                '- Hero must answer: what is it, who is it for, what do I do next',
+                '- Social proof (logos or testimonials) BEFORE pricing — never after',
+                '- Pricing section: show 3 tiers max. Highlight the middle one.',
+                '- One CTA per section. Not two.',
+                '- Page must feel fast: lazy-load heavy animations, no blocking resources',
+            ].join('\n'),
+            'saas-dashboard': [
+                'DASHBOARD RULES:',
+                '- Sidebar navigation, not top nav',
+                '- Data tables must be sortable and filterable',
+                '- Empty states must have a CTA (never just "No data found")',
+                '- Loading states for every async operation',
+                '- Mobile: stack sidebar into bottom nav or hamburger',
+            ].join('\n'),
+            'marketing-page': [
+                'MARKETING PAGE RULES:',
+                '- Scroll-triggered animations only (not on load)',
+                '- Bold headlines, short paragraphs (max 3 lines)',
+                '- Feature sections: icon + headline + 1 sentence. Nothing more.',
+                '- Video > images > illustrations > icons (in order of impact)',
+            ].join('\n'),
+            'component': [
+                'COMPONENT RULES:',
+                '- Accept className prop for composition',
+                '- Expose only the props that need to change externally',
+                '- Default values for everything optional',
+                '- No hardcoded colors — use CSS vars or Tailwind semantic classes',
+                '- Accessible: keyboard navigation, aria labels, focus states',
+            ].join('\n')
+        };
+        const rules = `
+[VibeTachyon Senior Frontend Designer — Active]
+
+MANDATORY WORKFLOW (never skip steps):
+  1. vibe_project_dna      → understand the project
+  2. vibe_design_brief     → define goal, style, sections (ASK if missing)
+  3. vibe_read_design_brief → check brief before each section
+  4. vibe_search_snippets  → search with style + use_case filters
+  5. Generate              → write code that fits the brief
+
+NON-NEGOTIABLE DESIGN RULES:
+  ✗ Never mix more than 2 animation styles per page
+  ✗ Never use more than 3 brand colors
+  ✗ Never hardcode hex/rgb values
+  ✗ Never generate without reading the active brief first
+  ✗ Never put CTA before social-proof and pricing
+  ✓ Always explain why each component was chosen
+  ✓ Always respect the brief's avoid list — reject violating components
+  ✓ Always match the visual tone (dark brief = dark page, no exceptions)
+  ✓ One heavy-animation section max per page (usually hero only)
+
+VISUAL COHERENCE MATRIX:
+  linear/vercel  → dark, subtle animations, borders over shadows, monochromatic
+  stripe/notion  → light, minimal, trustworthy, no heavy effects
+  aceternity     → dark, heavy animations, immersive, glowing accents
+  apple          → mixed, cinematic spacing, single focus per section
+  custom         → follow project CSS variables exactly
+
+${contextRules[context] || contextRules['landing-page']}
+
+COMPONENT SELECTION FILTER (apply mentally before using any component):
+  1. Does it match the brief's visual tone? (dark/light/mixed)
+  2. Does it respect the animation limit?
+  3. Does it avoid the items in the brief's avoid list?
+  4. Does it fit the section's use_case?
+  If any answer is NO → reject and search again.
+`;
         return {
-            content: [
-                {
-                    type: "text",
-                    text: rules
-                }
-            ]
+            content: [{ type: "text", text: rules }]
         };
     });
     // Tool: Scan Local Architecture

package/package.json

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