vibetachyon 1.5.5 → 1.5.7

package/dist/mcp-server.js

@@ -184,44 +184,113 @@ async function startMcpServer() {
      * Your output must be elite, animated, and pixel-perfect. Always confirm if you retrieved components from the database.
      */
     // 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,32 +299,39 @@ 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)}` }]
             };
         }
     });
@@ -491,6 +567,190 @@ async function startMcpServer() {
             };
         }
     });
+    // Tool: Design Brief System
+    server.tool("vibe_design_brief", "Starts a design session by collecting the page goal, niche, audience, style and sections. ALWAYS call this before vibe_search_snippets or any component generation. Saves a design-session.json in .vibetachyon/ for the agent to use as context.", {
+        projectDir: zod_1.z.string().describe("Absolute path to the project root."),
+        pageGoal: zod_1.z.string().describe("What is this page trying to achieve? e.g. 'convert visitor to free trial', 'showcase product features'"),
+        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."),
+        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();
+        const root = await findProjectRoot(projectDir || process.cwd());
+        // Style profile map — defines visual rules per reference style
+        const styleProfiles = {
+            linear: {
+                tone: 'dark',
+                animationLevel: 'subtle',
+                colorStrategy: 'monochromatic with purple/blue accents',
+                typography: 'tight tracking, medium weight, clean sans-serif',
+                spacing: 'generous — lots of breathing room',
+                avoid: ['glassmorphism overuse', 'rainbow gradients', 'heavy particle effects'],
+                prefer: ['sharp borders', 'subtle grid backgrounds', 'smooth transitions', 'monospace accents']
+            },
+            vercel: {
+                tone: 'dark',
+                animationLevel: 'subtle',
+                colorStrategy: 'black/white with occasional neon accents',
+                typography: 'large display text, high contrast',
+                spacing: 'tight sections, precise alignment',
+                avoid: ['colorful gradients', 'skeuomorphism', 'heavy shadows'],
+                prefer: ['borders over shadows', 'code blocks', 'terminal aesthetics', 'minimal decoration']
+            },
+            stripe: {
+                tone: 'light',
+                animationLevel: 'subtle',
+                colorStrategy: 'white base with blue/purple gradients',
+                typography: 'clean, readable, business-like',
+                spacing: 'structured grid, consistent padding',
+                avoid: ['dark heavy backgrounds', 'aggressive animations', 'neon colors'],
+                prefer: ['trust signals', 'subtle shadows', 'clean cards', 'professional illustrations']
+            },
+            aceternity: {
+                tone: 'dark',
+                animationLevel: 'heavy',
+                colorStrategy: 'dark background with glowing neon accents',
+                typography: 'dramatic sizing, gradient text',
+                spacing: 'immersive, full-viewport sections',
+                avoid: ['flat static sections', 'light backgrounds', 'no-animation zones'],
+                prefer: ['particle effects', 'spotlight effects', 'beam animations', 'glass cards']
+            },
+            apple: {
+                tone: 'mixed',
+                animationLevel: 'subtle',
+                colorStrategy: 'white/light with product photography',
+                typography: 'large bold headlines, thin body text',
+                spacing: 'ultra generous, cinematic',
+                avoid: ['busy layouts', 'multiple competing elements', 'decorative borders'],
+                prefer: ['single focus per section', 'scroll-triggered reveals', 'product imagery']
+            },
+            notion: {
+                tone: 'light',
+                animationLevel: 'none',
+                colorStrategy: 'off-white with muted gray accents',
+                typography: 'editorial, readable, structured',
+                spacing: 'document-like, content-first',
+                avoid: ['flashy animations', 'neon colors', 'complex interactions'],
+                prefer: ['clean typography hierarchy', 'simple icons', 'subtle hover states']
+            },
+            custom: {
+                tone: 'mixed',
+                animationLevel: 'subtle',
+                colorStrategy: 'defined by project CSS variables',
+                typography: 'defined by project fonts',
+                spacing: 'balanced',
+                avoid: [],
+                prefer: ['match existing project style exactly']
+            }
+        };
+        const profile = styleProfiles[referenceStyle] || styleProfiles.custom;
+        // Section sequence validator — warn if order is bad for conversion
+        const sectionWarnings = [];
+        if (sectionsNeeded.indexOf('cta') !== -1 && sectionsNeeded.indexOf('cta') < sectionsNeeded.length - 2) {
+            sectionWarnings.push('⚠️ CTA appears too early — move it to the end for better conversion flow.');
+        }
+        if (!sectionsNeeded.includes('hero')) {
+            sectionWarnings.push('⚠️ No hero section detected — every landing page needs a hero.');
+        }
+        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 brief = {
+            createdAt: new Date().toISOString(),
+            pageGoal,
+            niche,
+            targetAudience,
+            styleWords,
+            referenceStyle,
+            sectionsNeeded,
+            styleProfile: profile,
+            rules: {
+                maxAnimationTypes: profile.animationLevel === 'heavy' ? 3 : profile.animationLevel === 'subtle' ? 2 : 0,
+                maxColorAccents: 2,
+                visualTone: profile.tone,
+                mustAvoid: profile.avoid,
+                mustPrefer: profile.prefer,
+                colorStrategy: profile.colorStrategy,
+                typography: profile.typography,
+                spacing: profile.spacing
+            },
+            sectionWarnings
+        };
+        // Save to .vibetachyon/design-session.json
+        const sessionDir = path_1.default.join(root, '.vibetachyon');
+        await fs_extra_1.default.ensureDir(sessionDir);
+        const sessionPath = path_1.default.join(sessionDir, 'design-session.json');
+        await fs_extra_1.default.writeJson(sessionPath, brief, { spaces: 2 });
+        const rulesText = [
+            `Visual Tone: ${profile.tone}`,
+            `Animation Level: ${profile.animationLevel} (max ${brief.rules.maxAnimationTypes} animation types)`,
+            `Color Strategy: ${profile.colorStrategy}`,
+            `Typography: ${profile.typography}`,
+            `Spacing: ${profile.spacing}`,
+            `AVOID: ${profile.avoid.join(', ') || 'nothing specific'}`,
+            `PREFER: ${profile.prefer.join(', ')}`
+        ].join('\n');
+        const sectionsText = sectionsNeeded
+            .map((s, i) => `  ${i + 1}. ${s}`)
+            .join('\n');
+        const warningsText = sectionWarnings.length > 0
+            ? `\n\nCONVERSION WARNINGS:\n${sectionWarnings.join('\n')}`
+            : '';
+        return {
+            content: [{
+                    type: "text",
+                    text: `[VibeTachyon Design Brief — Saved to .vibetachyon/design-session.json]\n\n` +
+                        `PAGE GOAL: ${pageGoal}\n` +
+                        `NICHE: ${niche}\n` +
+                        `AUDIENCE: ${targetAudience}\n` +
+                        `STYLE WORDS: ${styleWords.join(', ')}\n` +
+                        `REFERENCE: ${referenceStyle}\n\n` +
+                        `DESIGN RULES:\n${rulesText}\n\n` +
+                        `SECTION SEQUENCE:\n${sectionsText}` +
+                        `${warningsText}\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`
+                }]
+        };
+    });
+    // Tool: Read Design Brief (for mid-session reference)
+    server.tool("vibe_read_design_brief", "Reads the active design brief from .vibetachyon/design-session.json. Call this at the start of every new section to ensure coherence with the established design direction.", {
+        projectDir: zod_1.z.string().describe("Absolute path to the project root.")
+    }, async ({ projectDir }) => {
+        await checkSanity();
+        const root = await findProjectRoot(projectDir || process.cwd());
+        const sessionPath = path_1.default.join(root, '.vibetachyon', 'design-session.json');
+        if (!(await fs_extra_1.default.pathExists(sessionPath))) {
+            return {
+                content: [{
+                        type: "text",
+                        text: `[VibeTachyon] No active design brief found.\n\nINSTRUCTION FOR AI: You MUST call vibe_design_brief before building any page. Ask the user:\n1. What is the goal of this page?\n2. What is the product niche?\n3. Who is the target audience?\n4. What visual style? (linear / vercel / stripe / aceternity / apple / notion)\n5. Which sections do you need?`
+                    }]
+            };
+        }
+        const brief = await fs_extra_1.default.readJson(sessionPath);
+        return {
+            content: [{
+                    type: "text",
+                    text: `[VibeTachyon Active Design Brief]\n\n` +
+                        `Goal: ${brief.pageGoal}\n` +
+                        `Style: ${brief.referenceStyle} — ${brief.styleWords?.join(', ')}\n` +
+                        `Tone: ${brief.rules?.visualTone}\n` +
+                        `Animations: max ${brief.rules?.maxAnimationTypes} types\n` +
+                        `Avoid: ${(brief.rules?.mustAvoid || []).join(', ')}\n` +
+                        `Sections left to build: ${brief.sectionsNeeded?.join(' → ')}\n\n` +
+                        `INSTRUCTION FOR AI: Stay 100% consistent with this brief. Reject any component that breaks these rules.`
+                }]
+        };
+    });
     // Tool: Get Vibe Colors
     server.tool("vibe_get_colors", "Extract local CSS variables from globals.css to ensure generated components match the user's specific dark/light theme native colors.", {
         cssFilePath: zod_1.z.string().describe("Absolute path to the user's main CSS file (e.g., /Users/admin/my-project/src/app/globals.css). Search for it before utilizing.")

package/package.json

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