viewgate-mcp 1.0.37 → 1.0.39

package/dist/index.js

@@ -23,6 +23,8 @@ import dotenv from "dotenv";
 import path from "path";
 import os from "os";
 import { fileURLToPath } from "url";
+import fs from "fs";
+import fsp from "fs/promises";
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 dotenv.config({ path: path.join(__dirname, "..", ".env") });
@@ -49,6 +51,28 @@ function createMcpServer(apiKey, personalKey) {
     server.setRequestHandler(ListToolsRequestSchema, async () => {
         return {
             tools: [
+                {
+                    name: "get_ui_components",
+                    description: "Fetch UI components created by UX/UI (progressive). Returns ONLY the pending components requested and their required props.",
+                    inputSchema: {
+                        type: "object",
+                        properties: {
+                            limit: { type: "number", description: "Max results.", default: 1 },
+                            status: { type: "string", description: "Component status filter (pending,generated).", default: "pending" },
+                        },
+                    },
+                },
+                {
+                    name: "generate_ui_components",
+                    description: "Generate real UI components into /components (no overwrite). Also generates and uploads a preview, then marks the component as generated.",
+                    inputSchema: {
+                        type: "object",
+                        properties: {
+                            limit: { type: "number", description: "How many pending components to generate.", default: 1 },
+                            framework: { type: "string", description: "Target: react or react+vite (both output React components).", default: "react" },
+                        },
+                    },
+                },
                 {
                     name: "get_annotations",
                     description: "Fetch feedback. Keys ('VG-XXXX') or IDs. Workflow: 1. Fetch, 2. Fix, 3. Mark Ready.",
@@ -66,7 +90,7 @@ function createMcpServer(apiKey, personalKey) {
                 },
                 {
                     name: "mark_annotation_ready",
-                    description: "Mark as ready/applied. Use internal IDs.",
+                    description: "Mark as ready/applied. Use internal IDs. IMPORTANT: appliedChanges must be in the project's preferredLanguage (e.g. SPANISH).",
                     inputSchema: {
                         type: "object",
                         properties: {
@@ -76,7 +100,7 @@ function createMcpServer(apiKey, personalKey) {
                                     type: "object",
                                     properties: {
                                         id: { type: "string", description: "Internal ID." },
-                                        appliedChanges: { type: "string", description: "Summary." }
+                                        appliedChanges: { type: "string", description: "Summary of changes. (IMPORTANT: Must be in SPANISH if project is ES)" }
                                     },
                                     required: ["id", "appliedChanges"]
                                 }
@@ -102,7 +126,7 @@ function createMcpServer(apiKey, personalKey) {
                 },
                 {
                     name: "planning",
-                    description: "Planning tool for backlog tickets. Fetch tickets or submit analysis.",
+                    description: "Planning tool for backlog tickets. Fetch tickets or submit analysis. IMPORTANT: aiAnalysis must be in the project's preferredLanguage (e.g. SPANISH).",
                     inputSchema: {
                         type: "object",
                         properties: {
@@ -117,7 +141,7 @@ function createMcpServer(apiKey, personalKey) {
                                         impacto: { type: "number", minimum: 1, maximum: 3 },
                                         riesgo: { type: "number", minimum: 1, maximum: 3 },
                                         tipo: { type: "string", enum: ["AI-friendly", "AI-assisted", "Human-critical"] },
-                                        aiAnalysis: { type: "string" }
+                                        aiAnalysis: { type: "string", description: "Detailed analysis. (IMPORTANT: Must be in SPANISH if project is ES)" }
                                     },
                                     required: ["id", "complejidad", "incertidumbre", "impacto", "riesgo", "tipo", "aiAnalysis"]
                                 }
@@ -165,11 +189,213 @@ function createMcpServer(apiKey, personalKey) {
             ],
         };
     });
+    const toPascalCase = (input) => {
+        return (input || '')
+            .replace(/[^a-zA-Z0-9 ]+/g, ' ')
+            .split(' ')
+            .map((w) => w.trim())
+            .filter(Boolean)
+            .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+            .join('');
+    };
+    const normalizePropTokens = (raw) => {
+        const line = (raw || '').trim();
+        if (!line)
+            return [];
+        // Split "onClick / onChange / onFocus / onBlur" style
+        const parts = line.split('/').map((s) => s.trim()).filter(Boolean);
+        return parts.flatMap((p) => {
+            // Take part before spaces or parentheses for "variant (primary...)" patterns
+            const base = p.split('(')[0].trim();
+            const token = base.split(' ')[0].trim();
+            return token ? [token] : [];
+        });
+    };
+    const buildPropModel = (commonProps, requiredProps) => {
+        const out = {
+            hasChildren: false,
+            hasAs: false,
+            hasDataIndex: false,
+            hasAriaIndex: false,
+            common: [],
+            required: [],
+        };
+        const add = (arr, target) => {
+            for (const raw of arr) {
+                for (const token of normalizePropTokens(raw)) {
+                    if (token === 'children')
+                        out.hasChildren = true;
+                    if (token === 'as')
+                        out.hasAs = true;
+                    if (token.startsWith('data-'))
+                        out.hasDataIndex = true;
+                    if (token.startsWith('aria-'))
+                        out.hasAriaIndex = true;
+                    if (token === 'ref')
+                        continue; // handled via forwardRef if needed later
+                    if (token === 'data-*' || token === 'aria-*')
+                        continue;
+                    // skip wildcard tokens, handled by index signatures
+                    if (token.endsWith('*'))
+                        continue;
+                    target.push(token);
+                }
+            }
+        };
+        add(commonProps || [], out.common);
+        add(requiredProps || [], out.required);
+        const uniq = (xs) => [...new Set(xs)].filter(Boolean);
+        out.common = uniq(out.common);
+        out.required = uniq(out.required);
+        return out;
+    };
+    const writeComponentFile = async (componentType, model) => {
+        const cwd = process.cwd();
+        const componentsDir = path.join(cwd, 'components');
+        await fsp.mkdir(componentsDir, { recursive: true });
+        const baseName = toPascalCase(componentType) || 'Component';
+        const hasTs = fs.existsSync(path.join(cwd, 'tsconfig.json'));
+        const ext = hasTs ? 'tsx' : 'jsx';
+        const fileBase = `${baseName}.${ext}`;
+        let filePath = path.join(componentsDir, fileBase);
+        if (fs.existsSync(filePath)) {
+            // never overwrite existing
+            let i = 2;
+            while (fs.existsSync(path.join(componentsDir, `${baseName}.${i}.${ext}`)))
+                i++;
+            filePath = path.join(componentsDir, `${baseName}.${i}.${ext}`);
+        }
+        const isTs = ext === 'tsx';
+        const commonOptional = model.common.map((p) => `${p}${isTs ? '?: any' : ''}`);
+        const required = model.required.map((p) => `${p}${isTs ? ': any' : ''}`);
+        const ariaIndex = model.hasAriaIndex ? (isTs ? `\n  [key: \`aria-\${string}\`]: any;` : '') : '';
+        const dataIndex = model.hasDataIndex ? (isTs ? `\n  [key: \`data-\${string}\`]: any;` : '') : '';
+        const propsBlock = isTs
+            ? `export type ${baseName}Props = {\n${[
+                model.hasAs ? `  as?: React.ElementType;` : null,
+                model.hasChildren ? `  children?: React.ReactNode;` : null,
+                ...required.map((l) => `  ${l};`),
+                ...commonOptional.map((l) => `  ${l};`),
+            ].filter(Boolean).join('\n')}${ariaIndex}${dataIndex}\n};`
+            : '';
+        const destructure = [
+            model.hasAs ? 'as: Comp = "div"' : null,
+            model.hasChildren ? 'children' : null,
+            ...model.required,
+            ...model.common,
+            '...rest'
+        ].filter(Boolean).join(', ');
+        const jsxTag = model.hasAs ? '<Comp' : '<div';
+        const jsxClose = model.hasAs ? '</Comp>' : '</div>';
+        const content = isTs
+            ? `import React from 'react';\n\n${propsBlock}\n\nexport function ${baseName}({ ${destructure} }: ${baseName}Props) {\n  return (\n    ${jsxTag} {...rest}>\n      {children}\n    ${jsxClose}\n  );\n}\n`
+            : `import React from 'react';\n\nexport function ${baseName}(props) {\n  const { ${destructure} } = props || {};\n  return (\n    ${jsxTag} {...rest}>\n      {children}\n    ${jsxClose}\n  );\n}\n`;
+        await fsp.writeFile(filePath, content, 'utf8');
+        return { filePath, fileName: path.basename(filePath) };
+    };
+    const makePreviewSvg = (title, props) => {
+        const safeTitle = (title || '').replace(/[<>]/g, '');
+        const list = (props || []).slice(0, 14).map((p) => p.replace(/[<>]/g, '')).join(' • ');
+        const text = `${safeTitle}${list ? ' — ' + list : ''}`;
+        return `<?xml version="1.0" encoding="UTF-8"?>\n<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="420">\n  <defs>\n    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">\n      <stop offset="0" stop-color="#0f172a"/>\n      <stop offset="1" stop-color="#111827"/>\n    </linearGradient>\n  </defs>\n  <rect width="1200" height="420" rx="32" fill="url(#g)"/>\n  <rect x="40" y="40" width="1120" height="340" rx="28" fill="#0b1220" stroke="rgba(255,255,255,0.08)"/>\n  <text x="80" y="150" font-family="Inter,ui-sans-serif,system-ui" font-size="46" font-weight="800" fill="#e2e8f0">${safeTitle}</text>\n  <text x="80" y="220" font-family="ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace" font-size="22" font-weight="700" fill="#94a3b8">Preview (fast)</text>\n  <text x="80" y="280" font-family="Inter,ui-sans-serif,system-ui" font-size="18" font-weight="600" fill="#64748b">${text}</text>\n</svg>`;
+    };
     server.setRequestHandler(CallToolRequestSchema, async (request) => {
         const toolName = request.params.name;
         console.error(`[MCP] Handling tool call: ${toolName}`);
         try {
             switch (toolName) {
+                case "get_ui_components": {
+                    const args = request.params.arguments;
+                    const limit = args.limit || 1;
+                    const status = args.status || 'pending';
+                    const fetchUrl = new URL(`${BACKEND_URL}/api/mcp/components`);
+                    fetchUrl.searchParams.append("limit", limit.toString());
+                    fetchUrl.searchParams.append("status", status);
+                    const response = await fetch(fetchUrl, {
+                        headers: {
+                            'x-api-key': apiKey,
+                            ...(personalKey ? { 'x-personal-key': personalKey } : {})
+                        }
+                    });
+                    if (!response.ok) {
+                        const errorBody = await response.text();
+                        throw new Error(`Backend responded with ${response.status}: ${errorBody}`);
+                    }
+                    const data = await response.json();
+                    return { content: [{ type: "text", text: JSON.stringify(data, null, 2) }] };
+                }
+                case "generate_ui_components": {
+                    const args = request.params.arguments;
+                    const limit = Math.min(args.limit || 1, 10);
+                    const fetchUrl = new URL(`${BACKEND_URL}/api/mcp/components`);
+                    fetchUrl.searchParams.append("limit", limit.toString());
+                    fetchUrl.searchParams.append("status", "pending");
+                    const response = await fetch(fetchUrl, {
+                        headers: {
+                            'x-api-key': apiKey,
+                            ...(personalKey ? { 'x-personal-key': personalKey } : {})
+                        }
+                    });
+                    if (!response.ok) {
+                        const errorBody = await response.text();
+                        throw new Error(`Backend responded with ${response.status}: ${errorBody}`);
+                    }
+                    const payload = (await response.json());
+                    const items = payload?.data || [];
+                    if (!Array.isArray(items) || items.length === 0) {
+                        return { content: [{ type: "text", text: JSON.stringify({ ok: true, generated: 0, message: "No pending UI components." }, null, 2) }] };
+                    }
+                    const results = [];
+                    for (const item of items) {
+                        const componentType = item.componentType;
+                        const requiredProps = (item.requiredProps || []);
+                        const commonProps = (item.commonProps || []);
+                        const model = buildPropModel(commonProps, requiredProps);
+                        const fileInfo = await writeComponentFile(componentType, model);
+                        // Fast preview generation (SVG placeholder) + upload
+                        const svg = makePreviewSvg(componentType, requiredProps);
+                        const svg64 = Buffer.from(svg, 'utf8').toString('base64');
+                        const imageDataUrl = `data:image/svg+xml;base64,${svg64}`;
+                        const uploadResp = await fetch(`${BACKEND_URL}/api/screenshots/upload`, {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                                'x-api-key': apiKey,
+                                ...(personalKey ? { 'x-personal-key': personalKey } : {})
+                            },
+                            body: JSON.stringify({ image: imageDataUrl })
+                        });
+                        if (!uploadResp.ok) {
+                            const errorBody = await uploadResp.text();
+                            throw new Error(`Preview upload failed (${uploadResp.status}): ${errorBody}`);
+                        }
+                        const uploaded = (await uploadResp.json());
+                        const previewUrl = uploaded?.url || null;
+                        const markResp = await fetch(`${BACKEND_URL}/api/mcp/components/${item._id}/generated`, {
+                            method: 'PATCH',
+                            headers: {
+                                'Content-Type': 'application/json',
+                                'x-api-key': apiKey,
+                                ...(personalKey ? { 'x-personal-key': personalKey } : {})
+                            },
+                            body: JSON.stringify({ previewImage: previewUrl })
+                        });
+                        if (!markResp.ok) {
+                            const errorBody = await markResp.text();
+                            throw new Error(`Mark generated failed (${markResp.status}): ${errorBody}`);
+                        }
+                        const marked = (await markResp.json());
+                        results.push({
+                            componentType,
+                            figmaUrl: item.figmaUrl,
+                            requiredProps,
+                            written: fileInfo,
+                            previewImage: previewUrl,
+                            db: marked?.data?._id || item._id
+                        });
+                    }
+                    return { content: [{ type: "text", text: JSON.stringify({ ok: true, generated: results.length, results }, null, 2) }] };
+                }
                 case "get_annotations": {
                     const args = request.params.arguments;
                     const limit = args.limit || 3;
@@ -260,41 +486,25 @@ function createMcpServer(apiKey, personalKey) {
                     const annotationsWithTips = sortedAnnotations.map((ann) => {
                         const file = ann.reference?.source?.split(':')[0];
                         const line = ann.reference?.source?.split(':')[1];
-                        const pendingCorrection = Array.isArray(ann.corrections)
-                            ? ann.corrections.find((c) => c.status === 'pending')
-                            : (typeof ann.corrections === 'string' ? { text: ann.corrections } : null);
                         const figmaLinks = Array.isArray(ann.figmaReference)
                             ? ann.figmaReference.filter((fr) => fr.link).map((fr) => `[${fr.name || 'Design'}](${fr.link})`).join(', ')
                             : (ann.figmaReference && typeof ann.figmaReference === 'string' ? ann.figmaReference : null);
                         return {
-                            id: ann._id,
-                            key: ann.key,
-                            priority: ann.priority,
-                            status: ann.status,
-                            message: ann.message,
-                            corrections: ann.corrections,
-                            source: ann.reference?.source,
-                            filePath: ann.filePath || file,
-                            line: ann.line || (line ? parseInt(line) : undefined),
-                            vgId: ann.reference?.vgId,
-                            outerHtml: ann.reference?.outerHtml,
-                            focusAreas: ann.focusAreas || [],
-                            componentName: ann.componentName,
-                            figmaReference: ann.figmaReference,
-                            backendEndpoints: ann.backendEndpoints || [],
-                            _ia_fix_instruction: `[AUTONOMOUS_MODE: TRUE]
-Target: ${file} (data-vg-id="${ann.reference?.vgId}")
-Context: ${ann.reference?.parentContext?.slice(0, 40)}...
-${figmaLinks ? `Figma: ${figmaLinks}` : ''}
-${ann.backendEndpoints?.length ? `Endpoints: ${ann.backendEndpoints.join(', ')}` : ''}
-${ann.corrections && Array.isArray(ann.corrections) && ann.corrections.length > 0 ? `Feedback: ${ann.corrections[ann.corrections.length - 1].text}` : ''}
-Task: ${ann.message}
-Lang: ${rawData.preferredLanguage === 'es' ? 'ES' : 'EN'}`
+                            ...ann,
+                            _ia_fix_instruction: `### INSTRUCCIONES PARA LA IA (IMPORTANTE) ###
+A continuación se presenta un ticket que requiere tu atención.
+DEBES RESPONDER EN ESPAÑOL.
+Proyecto: ${rawData.name || 'ViewGate'}
+Endpoints: ${ann.backendEndpoints?.length ? ann.backendEndpoints.join(', ') : 'Ninguno'}
+Feedback previo: ${ann.corrections && Array.isArray(ann.corrections) && ann.corrections.length > 0 ? ann.corrections[ann.corrections.length - 1].text : 'Ninguno'}
+Tarea: ${ann.message}
+Lang: ${rawData.preferredLanguage === 'es' ? 'ES' : 'EN'}
+(RECUERDA: Toda tu respuesta, comentarios y análisis DEBEN estar en ESPAÑOL)`
                         };
                     });
                     const langHint = rawData.preferredLanguage === 'es'
-                        ? "[INSTRUCTION: Project is in SPANISH. Provide all comments and aiAnalysis in SPANISH.]\n\n"
-                        : "[INSTRUCTION: Provide all comments and aiAnalysis in English.]\n\n";
+                        ? "\n*** [INSTRUCTION: Project is in SPANISH. Provide all comments, appliedChanges, and aiAnalysis in SPANISH ONLY.] ***\n\n"
+                        : "\n*** [INSTRUCTION: Provide all comments and analysis in English.] ***\n\n";
                     return {
                         content: [{ type: "text", text: langHint + JSON.stringify({ preferredLanguage: rawData.preferredLanguage || 'en', annotations: annotationsWithTips }, null, 2) }],
                     };
@@ -354,8 +564,8 @@ Lang: ${rawData.preferredLanguage === 'es' ? 'ES' : 'EN'}`
                         throw new Error(`Backend responded with ${response.status}`);
                     const data = (await response.json());
                     const langHint = data.preferredLanguage === 'es'
-                        ? "[INSTRUCTION: Project is in SPANISH. Provide all comments and aiAnalysis in SPANISH.]\n\n"
-                        : (data.preferredLanguage === 'en' ? "[INSTRUCTION: Provide all comments and aiAnalysis in English.]\n\n" : "");
+                        ? "\n*** [INSTRUCTION: Project is in SPANISH. Provide all comments, appliedChanges, and aiAnalysis in SPANISH ONLY.] ***\n\n\n\n"
+                        : (data.preferredLanguage === 'en' ? "\n*** [INSTRUCTION: Provide all comments and analysis in English.] ***\n\n\n\n" : "");
                     return { content: [{ type: "text", text: langHint + JSON.stringify(data, null, 2) }] };
                 }
                 case "sync_endpoints": {
@@ -387,8 +597,8 @@ Lang: ${rawData.preferredLanguage === 'es' ? 'ES' : 'EN'}`
                         throw new Error(`Backend responded with ${response.status}`);
                     const data = (await response.json());
                     const langHint = data.preferredLanguage === 'es'
-                        ? "[INSTRUCTION: Project is in SPANISH. Provide all comments and aiAnalysis in SPANISH.]\n\n"
-                        : (data.preferredLanguage === 'en' ? "[INSTRUCTION: Provide all comments and aiAnalysis in English.]\n\n" : "");
+                        ? "\n*** [INSTRUCTION: Project is in SPANISH. Provide all comments, appliedChanges, and aiAnalysis in SPANISH ONLY.] ***\n\n\n\n"
+                        : (data.preferredLanguage === 'en' ? "\n*** [INSTRUCTION: Provide all comments and analysis in English.] ***\n\n\n\n" : "");
                     return { content: [{ type: "text", text: langHint + JSON.stringify(data, null, 2) }] };
                 }
                 default:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "viewgate-mcp",
-  "version": "1.0.37",
+  "version": "1.0.39",
   "main": "dist/index.js",
   "bin": {
     "viewgate-mcp": "./dist/index.js"