vibetachyon 1.7.0 → 1.9.0

package/dist/mcp-server.js

@@ -31,12 +31,44 @@ const supabase = (0, supabase_js_1.createClient)(supabaseUrl, supabaseKey, supab
 const LOCAL_CACHE_DIR = path_1.default.join(process.env.HOME || process.env.USERPROFILE || '', '.vibetachyon', 'cache');
 const CALL_LIMIT_PER_SESSION = 150; // Sanity Trap to prevent agent infinite loops
 let sessionCallCount = 0;
+// --- Session Stats Tracker ---
+const SESSION_START = Date.now();
+const sessionStats = {
+    componentsLoaded: 0,
+    tsErrorsFixed: 0,
+    depsInstalled: 0,
+    missionsStarted: 0,
+    missionsCompleted: 0,
+    sectionsBuilt: 0,
+};
 async function checkSanity() {
     sessionCallCount++;
     if (sessionCallCount > CALL_LIMIT_PER_SESSION) {
         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.`);
     }
 }
+// --- Changelog (per version) ---
+const CHANGELOG = {
+    '1.9.0': [
+        'vibe_clone_design — clone design system de qualquer URL',
+        'Detecta cores, tipografia, radius e sombras automaticamente',
+        'Gera globals.css pronto para usar no projeto',
+    ],
+    '1.8.0': [
+        'vibe_session_recap — resumo completo da sessão',
+        'Update check automático no startup com changelog',
+    ],
+    '1.7.0': [
+        'vibe_launchpad — MISSION BRIEFING automático antes de qualquer código',
+        'Mandatory workflow reforçado nas descrições de tools',
+        'Detecção automática de stack, cores e brief existente',
+    ],
+    '1.6.0': [
+        'Animmaster Engine com 42 componentes premium',
+        'Missions, Tasks, Squads e Personas',
+        'Visual QA, Self-heal TypeScript, Ephemeral Previews',
+    ],
+};
 async function getLocalCache(key) {
     const cachePath = path_1.default.join(LOCAL_CACHE_DIR, `${key}.json`);
     if (await fs_extra_1.default.pathExists(cachePath)) {
@@ -169,12 +201,38 @@ async function validateTokenAtStartup() {
         // Network error — allow graceful degradation (offline mode)
         console.error('[VibeTachyon] Aviso: Não foi possível verificar o token (modo offline). Continuando...');
     }
+    // --- Update Check ---
+    try {
+        const CURRENT_VERSION = '1.9.0'; // keep in sync with package.json
+        const npmRes = await fetch('https://registry.npmjs.org/vibetachyon/latest', {
+            signal: AbortSignal.timeout(4000)
+        });
+        const npmData = await npmRes.json();
+        const latest = npmData.version;
+        if (latest && latest !== CURRENT_VERSION) {
+            const sep = '═'.repeat(46);
+            const changes = CHANGELOG[latest] || ['Melhorias e correções'];
+            const lines = [
+                `╔${sep}╗`,
+                `║  🆕 VibeTachyon ${latest} disponível!${' '.repeat(Math.max(0, 46 - 18 - latest.length - 1))}║`,
+                `╠${sep}╣`,
+                ...changes.map(c => `║  ✦ ${c.slice(0, 42).padEnd(42)} ║`),
+                `╠${sep}╣`,
+                `║  Execute: npm i -g vibetachyon@latest${' '.repeat(8)}║`,
+                `╚${sep}╝`,
+            ];
+            console.error(lines.join('\n'));
+        }
+    }
+    catch {
+        // Silently ignore update check failures
+    }
 }
 async function startMcpServer() {
     await validateTokenAtStartup();
     const server = new mcp_js_1.McpServer({
         name: "VibeTachyon MCP — Animmaster Engine",
-        version: "1.7.0"
+        version: "1.9.0"
     });
     /**
      * VIBETACHYON FRONTEND PERSONA — Senior Frontend Designer (Animmaster Engine)
@@ -548,6 +606,7 @@ async function startMcpServer() {
         name: zod_1.z.string().describe("Animmaster component name (e.g. 'parallax', 'cursor', 'marquee', 'splittype', 'preloader', 'ripple')")
     }, async ({ name }) => {
         await checkSanity();
+        sessionStats.componentsLoaded++;
         try {
             const { data, error } = await supabase
                 .from('animmaster_components')
@@ -1133,6 +1192,221 @@ COMPONENT SELECTION FILTER (apply mentally before using any component):
         }
     });
     // Tool: Enforce Vibe Style (Consistency Guard)
+    // ── Tool: Clone Design ───────────────────────────────────────────────────
+    server.tool("vibe_clone_design", "🎨 Give a URL (e.g. linear.app, stripe.com, vercel.com) and get its complete design system cloned: colors, typography, border radius, spacing, shadows — all mapped to standard CSS variables and saved as globals.css. Use when the user says 'I want my site to look like X'.", {
+        url: zod_1.z.string().describe("Full URL of the site to clone the design system from (e.g. 'https://linear.app')"),
+        outputPath: zod_1.z.string().optional().describe("Absolute path where globals.css should be saved. If omitted, returns the CSS as text only."),
+        mode: zod_1.z.enum(['full', 'colors-only', 'typography-only']).optional().describe("What to extract. Default: 'full'")
+    }, async ({ url, outputPath, mode = 'full' }) => {
+        await checkSanity();
+        const lines = [];
+        const sep = '═'.repeat(50);
+        lines.push(`╔${sep}╗`);
+        lines.push(`║  🎨 DESIGN CLONE: ${new URL(url).hostname.padEnd(31)}║`);
+        lines.push(`╠${sep}╣`);
+        try {
+            // Fetch HTML
+            const htmlRes = await fetch(url, {
+                headers: { 'User-Agent': 'Mozilla/5.0 (compatible; VibeTachyon/1.0)' },
+                signal: AbortSignal.timeout(10000)
+            });
+            const html = await htmlRes.text();
+            const baseUrl = new URL(url).origin;
+            // Collect CSS sources: <style> tags + <link rel="stylesheet">
+            let allCss = '';
+            // Inline styles
+            const styleMatches = html.matchAll(/<style[^>]*>([\s\S]*?)<\/style>/gi);
+            for (const m of styleMatches)
+                allCss += m[1] + '\n';
+            // External stylesheets (fetch first 3 to stay fast)
+            const linkMatches = [...html.matchAll(/<link[^>]+rel=["']stylesheet["'][^>]*href=["']([^"']+)["']/gi)];
+            const cssUrls = linkMatches.map(m => {
+                const href = m[1];
+                if (href.startsWith('http'))
+                    return href;
+                if (href.startsWith('//'))
+                    return 'https:' + href;
+                return baseUrl + (href.startsWith('/') ? href : '/' + href);
+            }).slice(0, 4);
+            await Promise.allSettled(cssUrls.map(async (cssUrl) => {
+                try {
+                    const r = await fetch(cssUrl, { signal: AbortSignal.timeout(5000) });
+                    allCss += await r.text() + '\n';
+                }
+                catch { /* skip failed CSS */ }
+            }));
+            // ── Extract design tokens ──────────────────────────────────
+            // 1. CSS Custom Properties from :root
+            const rootVars = {};
+            const rootBlocks = allCss.matchAll(/:root\s*\{([^}]+)\}/g);
+            for (const block of rootBlocks) {
+                const varMatches = block[1].matchAll(/--([\w-]+)\s*:\s*([^;]+);/g);
+                for (const v of varMatches)
+                    rootVars[v[1]] = v[2].trim();
+            }
+            // 2. Font families
+            const fontMatches = allCss.matchAll(/font-family\s*:\s*([^;}{]+)/g);
+            const fonts = [];
+            for (const m of fontMatches) {
+                const f = m[1].trim().split(',')[0].replace(/['"]/g, '').trim();
+                if (f && !fonts.includes(f) && f !== 'inherit' && f !== 'sans-serif')
+                    fonts.push(f);
+            }
+            // Also check Google Fonts links
+            const gFontMatch = html.match(/fonts\.googleapis\.com[^"']*family=([^&"']+)/);
+            if (gFontMatch) {
+                const gFont = decodeURIComponent(gFontMatch[1]).split(':')[0].replace(/\+/g, ' ');
+                if (!fonts.includes(gFont))
+                    fonts.unshift(gFont);
+            }
+            // 3. Border radius (from buttons/cards)
+            const radiusMatches = allCss.matchAll(/border-radius\s*:\s*([\d.]+(?:px|rem|em))/g);
+            const radii = [];
+            for (const m of radiusMatches) {
+                const val = parseFloat(m[1]);
+                if (val > 0 && val <= 32)
+                    radii.push(val);
+            }
+            const medianRadius = radii.length > 0
+                ? radii.sort((a, b) => a - b)[Math.floor(radii.length / 2)]
+                : 6;
+            const radiusUnit = allCss.includes('rem') ? 'rem' : 'px';
+            const radiusVal = radiusUnit === 'rem' ? `${(medianRadius / 16).toFixed(3)}rem` : `${medianRadius}px`;
+            // 4. Colors — find dominant non-white/black hex colors
+            const hexColors = [...new Set([...allCss.matchAll(/#([0-9a-fA-F]{6})\b/g)].map(m => '#' + m[1].toLowerCase()))];
+            const isNeutral = (hex) => {
+                const r = parseInt(hex.slice(1, 3), 16);
+                const g = parseInt(hex.slice(3, 5), 16);
+                const b = parseInt(hex.slice(5, 7), 16);
+                const max = Math.max(r, g, b), min = Math.min(r, g, b);
+                return (max - min) < 30; // low saturation = neutral
+            };
+            const brandColors = hexColors.filter(h => !isNeutral(h)).slice(0, 5);
+            const darkColors = hexColors.filter(h => {
+                const r = parseInt(h.slice(1, 3), 16);
+                return r < 30 && isNeutral(h);
+            });
+            const lightColors = hexColors.filter(h => {
+                const r = parseInt(h.slice(1, 3), 16);
+                return r > 225 && isNeutral(h);
+            });
+            // 5. Detect dark/light theme from background
+            const bgColorMatch = allCss.match(/body\s*\{[^}]*background(?:-color)?\s*:\s*(#[0-9a-fA-F]{6}|[a-z]+)/);
+            const bgHex = bgColorMatch?.[1] || (darkColors[0] ?? '#ffffff');
+            const isDark = bgHex.startsWith('#') ? parseInt(bgHex.slice(1, 3), 16) < 100 : bgHex === 'black';
+            // 6. Detect shadow style
+            const hasShadow = allCss.includes('box-shadow');
+            const shadowVal = hasShadow
+                ? (isDark ? '0 1px 3px rgba(0,0,0,0.4)' : '0 1px 3px rgba(0,0,0,0.1)')
+                : 'none';
+            // ── Map to standard tokens ─────────────────────────────────
+            const primary = brandColors[0] || (isDark ? '#6366f1' : '#3b82f6');
+            const primaryFg = '#ffffff';
+            const background = isDark ? (darkColors[0] || '#0a0a0a') : (lightColors[0] || '#ffffff');
+            const foreground = isDark ? '#f4f4f5' : '#09090b';
+            const muted = isDark ? '#27272a' : '#f4f4f5';
+            const mutedFg = isDark ? '#a1a1aa' : '#71717a';
+            const border = isDark ? '#3f3f46' : '#e4e4e7';
+            const card = isDark ? (darkColors[1] || '#18181b') : '#ffffff';
+            const primaryFont = fonts[0] || (isDark ? 'Inter' : 'Inter');
+            const monoFont = fonts.find(f => f.toLowerCase().includes('mono') || f.toLowerCase().includes('code')) || 'JetBrains Mono';
+            // ── Detect visual style for Animmaster brief ──────────────
+            const hasGradients = allCss.includes('linear-gradient') || allCss.includes('radial-gradient');
+            const hasBlur = allCss.includes('backdrop-filter') || allCss.includes('blur(');
+            const visualTone = isDark && hasBlur ? 'glassmorphism' :
+                isDark && hasGradients ? 'dark-gradient' :
+                    isDark ? 'dark-minimal' :
+                        hasGradients ? 'light-gradient' : 'light-minimal';
+            // ── Use existing root vars if abundant ────────────────────
+            const hasRichVars = Object.keys(rootVars).length > 8;
+            // ── Generate globals.css ───────────────────────────────────
+            const cssOutput = [
+                `/* ─────────────────────────────────────────────────────`,
+                ` * Design System cloned from: ${new URL(url).hostname}`,
+                ` * Generated by VibeTachyon vibe_clone_design`,
+                ` * Visual tone: ${visualTone}`,
+                ` * ──────────────────────────────────────────────────── */`,
+                '',
+                hasRichVars
+                    ? `/* Original CSS variables preserved from source */\n:root {\n${Object.entries(rootVars).slice(0, 30).map(([k, v]) => `  --${k}: ${v};`).join('\n')}\n}`
+                    : '',
+                '',
+                `/* VibeTachyon Standard Tokens */`,
+                `:root {`,
+                `  /* Colors */`,
+                `  --background:    ${background};`,
+                `  --foreground:    ${foreground};`,
+                `  --card:          ${card};`,
+                `  --card-fg:       ${foreground};`,
+                `  --primary:       ${primary};`,
+                `  --primary-fg:    ${primaryFg};`,
+                `  --muted:         ${muted};`,
+                `  --muted-fg:      ${mutedFg};`,
+                `  --border:        ${border};`,
+                `  --input:         ${border};`,
+                `  --ring:          ${primary};`,
+                ...(brandColors.slice(1).map((c, i) => `  --accent-${i + 1}:     ${c};`)),
+                '',
+                `  /* Typography */`,
+                `  --font-sans:     '${primaryFont}', system-ui, sans-serif;`,
+                `  --font-mono:     '${monoFont}', monospace;`,
+                '',
+                `  /* Shape */`,
+                `  --radius:        ${radiusVal};`,
+                `  --radius-sm:     calc(var(--radius) * 0.5);`,
+                `  --radius-lg:     calc(var(--radius) * 1.5);`,
+                '',
+                `  /* Shadows */`,
+                `  --shadow-sm:     ${shadowVal};`,
+                `  --shadow:        ${shadowVal.replace('3px', '8px').replace('0.1', '0.12').replace('0.4', '0.5')};`,
+                `}`,
+                '',
+                isDark ? [
+                    `.dark {`,
+                    `  color-scheme: dark;`,
+                    `}`,
+                ].join('\n') : '',
+            ].filter(Boolean).join('\n');
+            // Save to file if requested
+            if (outputPath) {
+                await fs_extra_1.default.ensureDir(path_1.default.dirname(outputPath));
+                await fs_extra_1.default.writeFile(outputPath, cssOutput, 'utf-8');
+            }
+            // Build briefing output
+            lines.push(`  Theme    : ${isDark ? '🌑 Dark' : '☀️  Light'} (${visualTone})`);
+            lines.push(`  Primary  : ${primary}`);
+            lines.push(`  BG       : ${background}`);
+            lines.push(`  FG       : ${foreground}`);
+            lines.push(`  Border   : ${border}`);
+            lines.push(`  Radius   : ${radiusVal}`);
+            lines.push(`  Font     : ${primaryFont}`);
+            if (fonts[1])
+                lines.push(`  Font 2   : ${fonts[1]}`);
+            if (brandColors.length > 1)
+                lines.push(`  Accents  : ${brandColors.slice(1, 4).join(', ')}`);
+            lines.push(`  Vars src : ${hasRichVars ? `✅ ${Object.keys(rootVars).length} CSS vars found` : '⚙️  Generated from computed styles'}`);
+            lines.push(`╠${sep}╣`);
+            lines.push(`  Animmaster tone: ${visualTone}`);
+            lines.push(`  Use in brief  : visualTone: "${visualTone}"`);
+            lines.push(`╠${sep}╣`);
+            if (outputPath) {
+                lines.push(`  ✅ globals.css saved to:`);
+                lines.push(`     ${outputPath}`);
+            }
+            else {
+                lines.push(`  💡 Pass outputPath to save globals.css automatically`);
+            }
+            lines.push(`╚${sep}╝`);
+            const fullOutput = lines.join('\n') + '\n\n' + '```css\n' + cssOutput + '\n```';
+            return { content: [{ type: "text", text: fullOutput }] };
+        }
+        catch (err) {
+            lines.push(`  ❌ Erro: ${err.message}`);
+            lines.push(`  Verifique se a URL está acessível e tente novamente.`);
+            lines.push(`╚${sep}╝`);
+            return { content: [{ type: "text", text: lines.join('\n') }] };
+        }
+    });
     server.tool("vibe_enforce_style", "Passive audit tool that scan a code snippet and automatically patches 'off-theme' Tailwind classes (like bg-blue-500) with project-specific design tokens (--primary, --background) extracted from the CSS.", {
         code: zod_1.z.string().describe("The TSX/JSX code snippet to audit and fix."),
         cssFilePath: zod_1.z.string().describe("Absolute path to the user's globals.css.")
@@ -2068,6 +2342,7 @@ export default function VibePreviewPage() {
         projectDir: zod_1.z.string().optional().describe("Absolute path to the project root")
     }, async ({ title, goal, tasks = [], projectDir }) => {
         await checkSanity();
+        sessionStats.missionsStarted++;
         const cwd = projectDir || process.cwd();
         await ensureVtfDir(cwd, 'missions', 'tasks');
         const missionId = `mission_${shortId()}`;
@@ -2164,6 +2439,7 @@ export default function VibePreviewPage() {
         projectDir: zod_1.z.string().optional().describe("Absolute path to the project root")
     }, async ({ missionId, summary, decisions = [], lessons = [], nextSteps = [], projectDir }) => {
         await checkSanity();
+        sessionStats.missionsCompleted++;
         const cwd = projectDir || process.cwd();
         await ensureVtfDir(cwd, 'missions', 'debriefs');
         const missionsDir = vtfPath(cwd, 'missions');
@@ -4386,6 +4662,7 @@ ${consequences.length > 0 ? consequences.map(c => `- ${c}`).join('\n') : '- (non
             section.completedAt = new Date().toISOString();
             await fs_extra_1.default.writeJson(statePath, state, { spaces: 2 });
         }
+        sessionStats.sectionsBuilt++;
         const done = state.sections?.filter((s) => s.status === 'done') || [];
         const planned = state.sections?.filter((s) => s.status === 'planned') || [];
         const next = planned[0];
@@ -4402,6 +4679,96 @@ ${consequences.length > 0 ? consequences.map(c => `- ${c}`).join('\n') : '- (non
                 }]
         };
     });
+    // ── Tool: Session Recap ───────────────────────────────────────────────────
+    server.tool("vibe_session_recap", "Show a complete summary of everything accomplished in this session — duration, components loaded, errors fixed, sections built, missions completed. Call this at the end of any work session to review progress.", {
+        projectDir: zod_1.z.string().optional().describe("Absolute path to the project root. If omitted, uses current working directory.")
+    }, async ({ projectDir }) => {
+        await checkSanity();
+        const cwd = projectDir || process.cwd();
+        const root = await findProjectRoot(cwd);
+        // Duration
+        const elapsedMs = Date.now() - SESSION_START;
+        const minutes = Math.floor(elapsedMs / 60000);
+        const seconds = Math.floor((elapsedMs % 60000) / 1000);
+        const duration = minutes > 0 ? `${minutes}m ${seconds}s` : `${seconds}s`;
+        // Count git-changed files
+        let filesChanged = 0;
+        try {
+            const { stdout } = await execPromise('git status --porcelain 2>/dev/null | wc -l', { cwd: root });
+            filesChanged = parseInt(stdout.trim()) || 0;
+        }
+        catch { /* not a git repo */ }
+        // Count tasks completed in .vibetachyon
+        let tasksCompleted = 0;
+        let missionsActive = 0;
+        const tasksDir = path_1.default.join(root, '.vibetachyon', 'tasks');
+        const missionsDir = path_1.default.join(root, '.vibetachyon', 'missions');
+        try {
+            if (await fs_extra_1.default.pathExists(tasksDir)) {
+                const taskFiles = await fs_extra_1.default.readdir(tasksDir);
+                for (const f of taskFiles) {
+                    if (!f.endsWith('.json'))
+                        continue;
+                    const t = await fs_extra_1.default.readJson(path_1.default.join(tasksDir, f));
+                    if (t.status === 'done')
+                        tasksCompleted++;
+                }
+            }
+            if (await fs_extra_1.default.pathExists(missionsDir)) {
+                const missionFiles = await fs_extra_1.default.readdir(missionsDir);
+                for (const f of missionFiles) {
+                    if (!f.endsWith('.json'))
+                        continue;
+                    const m = await fs_extra_1.default.readJson(path_1.default.join(missionsDir, f));
+                    if (m.status === 'active')
+                        missionsActive++;
+                    if (m.status === 'completed')
+                        sessionStats.missionsCompleted++;
+                }
+            }
+        }
+        catch { /* ignore */ }
+        const sep = '═'.repeat(48);
+        const row = (label, value) => {
+            const line = `  ${label}: ${value}`;
+            return `║${line.padEnd(49)}║`;
+        };
+        // Score — simple quality heuristic
+        const score = Math.min(100, 20 + // base
+            (sessionStats.componentsLoaded > 0 ? 20 : 0) +
+            (sessionStats.sectionsBuilt > 0 ? 20 : 0) +
+            (tasksCompleted > 0 ? 20 : 0) +
+            (sessionStats.tsErrorsFixed > 0 ? 10 : 0) +
+            (filesChanged > 0 ? 10 : 0));
+        const grade = score >= 90 ? 'S' : score >= 75 ? 'A' : score >= 60 ? 'B' : score >= 40 ? 'C' : 'D';
+        const gradeEmoji = grade === 'S' ? '🏆' : grade === 'A' ? '🥇' : grade === 'B' ? '🥈' : '🥉';
+        const lines = [
+            `╔${sep}╗`,
+            `║  ${gradeEmoji}  VIBETACHYON SESSION RECAP${' '.repeat(20)}║`,
+            `╠${sep}╣`,
+            row('⏱  Duração', duration),
+            row('📄  Arquivos alterados', filesChanged),
+            row('🧩  Componentes carregados', sessionStats.componentsLoaded),
+            row('🏗️  Seções construídas', sessionStats.sectionsBuilt),
+            row('✅  Tasks concluídas', tasksCompleted),
+            row('🎯  Missões ativas', missionsActive),
+            row('🔧  Erros TS corrigidos', sessionStats.tsErrorsFixed),
+            row('📦  Deps instaladas', sessionStats.depsInstalled),
+            row('🔁  Tools chamados', sessionCallCount),
+            `╠${sep}╣`,
+            `║  NOTA DA SESSÃO: ${grade} (${score}/100)${' '.repeat(Math.max(0, 48 - 20 - grade.length - String(score).length))}║`,
+            `╚${sep}╝`,
+        ];
+        if (score < 60) {
+            lines.push('');
+            lines.push('💡 Dica: use vibe_launchpad antes de começar e vibe_section_done após cada seção.');
+        }
+        else if (score >= 90) {
+            lines.push('');
+            lines.push('🔥 Sessão excepcional. Considera fazer commit com vibe_git_smart_commit.');
+        }
+        return { content: [{ type: "text", text: lines.join('\n') }] };
+    });
     // Connect via stdio
     const transport = new stdio_js_1.StdioServerTransport();
     await server.connect(transport);

package/package.json

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