viewgate-mcp 1.0.61 → 1.0.63

package/dist/index.js

@@ -81,7 +81,11 @@ function createMcpServer(apiKey, personalKey) {
                 return "sync";
             case "get_synced_endpoints":
             case "get_ai_resolved_tickets":
+            case "get_e2e_flows":
+            case "export_e2e_flow":
                 return "idle";
+            case "process_e2e_events":
+                return "e2e";
             default:
                 return "idle";
         }
@@ -126,6 +130,10 @@ function createMcpServer(apiKey, personalKey) {
                     guard.flow = "sync";
                     guard.step = 1;
                     break;
+                case "process_e2e_events":
+                    guard.flow = "e2e";
+                    guard.step = 1;
+                    break;
                 default:
                     if (guard.flow === "idle") {
                         throw new Error(`TOOL_CALL_BLOCKED: tool '${toolName}' not allowed in idle. Please start a workflow with 'get_annotations', 'get_ui_components', or 'get_ui_improvements'.`);
@@ -148,10 +156,8 @@ function createMcpServer(apiKey, personalKey) {
             }
             else if (toolName === "generate_ui_components") {
                 guard.step = 2;
-            }
-            else if (toolName === "mark_ui_component_generated") {
-                // Allow finishing if it was started in this flow
-                resetGuard();
+                // Step 3 is now terminal, but we reset after success in the handler
+                guard.step = 3;
             }
             else {
                 throw new Error("TOOL_CALL_BLOCKED: tool not allowed in active flow");
@@ -165,8 +171,8 @@ function createMcpServer(apiKey, personalKey) {
             else if (toolName === "mark_annotations_as_live") {
                 if (guard.step !== 1)
                     throw new Error("TOOL_CALL_BLOCKED: unexpected step");
-                // Stop here and reset flow as per USER_REQUEST (MCP only reaches 'applied')
-                resetGuard();
+                // Reset moved to success handler
+                guard.step = 2;
             }
             else {
                 throw new Error("TOOL_CALL_BLOCKED: tool not allowed in active flow");
@@ -179,7 +185,7 @@ function createMcpServer(apiKey, personalKey) {
             else if (toolName === "mark_annotations_as_live") {
                 if (guard.step !== 1)
                     throw new Error("TOOL_CALL_BLOCKED: unexpected step");
-                resetGuard();
+                guard.step = 2;
             }
             else {
                 throw new Error("TOOL_CALL_BLOCKED: tool not allowed in active flow");
@@ -198,7 +204,8 @@ function createMcpServer(apiKey, personalKey) {
             else {
                 if (guard.step !== 1)
                     throw new Error("TOOL_CALL_BLOCKED: unexpected step");
-                resetGuard();
+                // Reset moved to success handler
+                guard.step = 2;
             }
         }
         else if (guard.flow === "sync") {
@@ -215,6 +222,14 @@ function createMcpServer(apiKey, personalKey) {
                 throw new Error("TOOL_CALL_BLOCKED: tool not allowed in active flow");
             }
         }
+        else if (guard.flow === "e2e") {
+            if (toolName === "process_e2e_events") {
+                guard.step = 1;
+            }
+            else {
+                throw new Error("TOOL_CALL_BLOCKED: tool not allowed in active e2e flow");
+            }
+        }
         guard.lastTool = toolName;
         guard.lastActivityAt = now;
     }
@@ -369,6 +384,41 @@ function createMcpServer(apiKey, personalKey) {
                     name: "get_ai_resolved_tickets",
                     description: "Retrieves the list of ticket IDs that have already been resolved by the AI in the current sprint.",
                     inputSchema: { type: "object", properties: {} },
+                },
+                {
+                    name: "get_e2e_flows",
+                    description: "Fetch all E2E test flows for a project. Returns generated test flows from user interactions.",
+                    inputSchema: {
+                        type: "object",
+                        properties: {
+                            projectId: { type: "string", description: "Project ID to filter flows." },
+                            status: { type: "string", description: "Filter by status (active, degraded, needs_review, archived).", default: "active" }
+                        }
+                    }
+                },
+                {
+                    name: "process_e2e_events",
+                    description: "Process raw DOM events and generate a Test Flow. Transforms captured user interactions into structured E2E tests.",
+                    inputSchema: {
+                        type: "object",
+                        properties: {
+                            sessionId: { type: "string", description: "Session ID containing the events to process." },
+                            flowName: { type: "string", description: "Suggested name for the flow (e.g., 'Login Flow')." },
+                            projectId: { type: "string", description: "Project ID to associate with the flow." }
+                        },
+                        required: ["sessionId", "flowName"]
+                    }
+                },
+                {
+                    name: "export_e2e_flow",
+                    description: "Export a test flow as Playwright code. Generates executable TypeScript test code.",
+                    inputSchema: {
+                        type: "object",
+                        properties: {
+                            flowId: { type: "string", description: "ID of the flow to export." }
+                        },
+                        required: ["flowId"]
+                    }
                 }
             ],
         };
@@ -398,6 +448,7 @@ function createMcpServer(apiKey, personalKey) {
                         const errorBody = await response.text();
                         throw new Error(`Backend responded with ${response.status}: ${errorBody}`);
                     }
+                    resetGuard();
                     const data = (await response.json());
                     const styleHandler = data?.settings?.styleHandler || 'unknown';
                     const language = data?.settings?.language || 'en';
@@ -489,6 +540,7 @@ function createMcpServer(apiKey, personalKey) {
                                     'MUST use Tailwind standard "primary" class (e.g. bg-primary, text-primary-foreground) as these are dynamically injected in the dashboard.',
                                     'The theme prop MUST be optional and typed in the component interface.',
                                     'Micro-animations MUST be implemented with Framer Motion (use whileHover, whileTap, etc.)',
+                                    'AESTHETIC PERFECTION: The generated component MUST be an EXACT visual match of the source design. Pay extreme attention to spacing, shadows, and subtle gradients.',
                                 ]
                             },
                             constraints: {
@@ -501,7 +553,9 @@ function createMcpServer(apiKey, personalKey) {
                                 mustBeProductionReady: true,
                                 mustUseFramerMotionForAnimations: true,
                                 themingIsMandatory: true,
-                                stylingHandlerIsStrict: true
+                                stylingHandlerIsStrict: true,
+                                mustBeAestheticallyIdentical: true,
+                                visualFidelityInstruction: "You MUST ensure 100% visual parity. The output component must be PREMIUM and indistinguishable from the provided Figma design in terms of layout, spacing, and styling tokens."
                             }
                         };
                         results.push({
@@ -528,6 +582,7 @@ function createMcpServer(apiKey, personalKey) {
                                 2) REGISTRAR LA PREVIEW usando 'mark_ui_component_generated'.
 
                                 REQUISITO TECNOLÓGICO OBLIGATORIO: Usar ${styleLabel} para TODOS los estilos.
+                                REQUISITO DE FIDELIDAD ESTÉTICA: El componente debe ser VISUALMENTE IDÉNTICO al original. Respeta cada píxel de espaciado, sombras y pesos de fuente.
                                 REQUISITO DE THEMING: DEBES respetar las themingTokens. NUNCA hardcodees colores (#hex, etc). Usa SIEMPRE la prop 'theme' o el fallback 'var(--vg-*)'.
                                 NOTA: Si styleHandler es '${styleHandler}', NO utilices otra tecnología distinta aunque los archivos originales (Figma HTML/CSS) digan lo contrario.`,
                                     results
@@ -710,6 +765,7 @@ Lang: ${rawData.preferredLanguage === 'es' ? 'ES' : 'EN'}
                     });
                     if (!response.ok)
                         throw new Error(`Backend responded with ${response.status}`);
+                    resetGuard();
                     const data = (await response.json());
                     return {
                         content: [{ type: "text", text: JSON.stringify(data, null, 2) }],
@@ -730,6 +786,9 @@ Lang: ${rawData.preferredLanguage === 'es' ? 'ES' : 'EN'}
                     });
                     if (!response.ok)
                         throw new Error(`Backend responded with ${response.status}`);
+                    if (args.results) {
+                        resetGuard();
+                    }
                     const data = (await response.json());
                     // Point: Version Storing
                     if (data.backlogVersion)
@@ -829,6 +888,114 @@ Lang: ${rawData.preferredLanguage === 'es' ? 'ES' : 'EN'}
                         : (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 "get_e2e_flows": {
+                    const args = argsAny;
+                    const fetchUrl = new URL(`${BACKEND_URL}/api/e2e/flows`);
+                    if (args.projectId)
+                        fetchUrl.searchParams.append("projectId", args.projectId);
+                    if (args.status)
+                        fetchUrl.searchParams.append("status", args.status);
+                    const response = await fetch(fetchUrl, {
+                        headers: { 'x-api-key': apiKey, 'x-mcp-tool-name': toolName, ...(personalKey ? { 'x-personal-key': personalKey } : {}) }
+                    });
+                    if (!response.ok)
+                        throw new Error(`Backend responded with ${response.status}`);
+                    const data = (await response.json());
+                    return { content: [{ type: "text", text: JSON.stringify(data, null, 2) }] };
+                }
+                case "process_e2e_events": {
+                    const args = argsAny;
+                    // Fetch UNPROCESSED events for the session (only new events)
+                    const eventsResponse = await fetch(`${BACKEND_URL}/api/e2e/sessions/${args.sessionId}/events?unprocessed=true&limit=${args.limit || 50}`, {
+                        headers: { 'x-api-key': apiKey, 'x-mcp-tool-name': toolName, ...(personalKey ? { 'x-personal-key': personalKey } : {}) }
+                    });
+                    if (!eventsResponse.ok)
+                        throw new Error(`Failed to fetch events: ${eventsResponse.status}`);
+                    const { events, totalUnprocessed } = await eventsResponse.json();
+                    if (!events || events.length === 0) {
+                        return { content: [{ type: "text", text: JSON.stringify({
+                                        message: "No new events to process - all events already in flow",
+                                        sessionId: args.sessionId,
+                                        processed: true
+                                    }, null, 2) }] };
+                    }
+                    console.log(`[MCP E2E] Processing ${events.length} unprocessed events (${totalUnprocessed} total pending)`);
+                    const workspaceId = args.workspaceId || events[0]?.workspace?.toString() || '';
+                    const projectId = args.projectId || events[0]?.project?.toString() || '';
+                    if (!workspaceId || !projectId) {
+                        return { content: [{ type: "text", text: JSON.stringify({ error: "Could not determine workspace/project ID" }, null, 2) }] };
+                    }
+                    // Transform ONLY new events to steps
+                    const newSteps = events.map(event => transformSingleEventToStep(event));
+                    // Update flow with just the new steps
+                    const updateResponse = await fetch(`${BACKEND_URL}/api/e2e/flows`, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'x-api-key': apiKey,
+                            'x-internal-key': process.env.INTERNAL_API_KEY || ''
+                        },
+                        body: JSON.stringify({
+                            workspaceId,
+                            projectId,
+                            name: args.flowName || `E2E Flow - ${new Date().toLocaleString()}`,
+                            steps: newSteps,
+                            metadata: {
+                                processedAt: new Date().toISOString(),
+                                eventsProcessed: events.length,
+                                mcpGenerated: true
+                            },
+                            sessionId: args.sessionId,
+                            markAsProcessed: true // Tell backend to mark these events as processed
+                        })
+                    });
+                    if (!updateResponse.ok) {
+                        const error = await updateResponse.text();
+                        throw new Error(`Failed to update flow: ${error}`);
+                    }
+                    const result = (await updateResponse.json());
+                    resetGuard();
+                    return { content: [{ type: "text", text: JSON.stringify({
+                                    success: true,
+                                    message: `Added ${newSteps.length} new steps to E2E flow (processed ${events.length} events)`,
+                                    flow: result.flow,
+                                    newStepsCount: newSteps.length,
+                                    remainingUnprocessed: Math.max(0, totalUnprocessed - events.length)
+                                }, null, 2) }] };
+                }
+                case "export_e2e_flow": {
+                    const args = argsAny;
+                    // Fetch project settings to get default testing framework if not specified
+                    let framework = args.testingFramework;
+                    if (!framework) {
+                        try {
+                            const projectResponse = await fetch(`${BACKEND_URL}/api/projects/current`, {
+                                headers: { 'x-api-key': apiKey, 'x-mcp-tool-name': toolName, ...(personalKey ? { 'x-personal-key': personalKey } : {}) }
+                            });
+                            if (projectResponse.ok) {
+                                const projectData = await projectResponse.json();
+                                framework = projectData.project?.settings?.testingFramework || 'playwright';
+                            }
+                        }
+                        catch (e) {
+                            framework = 'playwright';
+                        }
+                    }
+                    const response = await fetch(`${BACKEND_URL}/api/e2e/flows/${args.flowId}/export`, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'x-api-key': apiKey,
+                            'x-mcp-tool-name': toolName,
+                            ...(personalKey ? { 'x-personal-key': personalKey } : {})
+                        },
+                        body: JSON.stringify({ testingFramework: framework })
+                    });
+                    if (!response.ok)
+                        throw new Error(`Backend responded with ${response.status}`);
+                    const data = (await response.json());
+                    return { content: [{ type: "text", text: JSON.stringify({ ...data, testingFramework: framework }, null, 2) }] };
+                }
                 default:
                     throw new Error("Unknown tool");
             }
@@ -840,6 +1007,294 @@ Lang: ${rawData.preferredLanguage === 'es' ? 'ES' : 'EN'}
     });
     return server;
 }
+/**
+ * Transform raw DOM events into a structured Test Flow (IR)
+ * Following the priority: data-testid > getByRole > getByLabel > text > CSS > XPath
+ */
+function transformEventsToTestFlow(events, flowName, workspaceId) {
+    const steps = [];
+    let lastUrl = '';
+    for (const event of events) {
+        const step = transformEventToStep(event, lastUrl);
+        if (step) {
+            steps.push(step);
+            if (event.type === 'navigation' || step.type === 'goto') {
+                lastUrl = event.url;
+            }
+        }
+    }
+    // Add automatic assertions for state changes
+    const stepsWithAsserts = addImplicitAssertions(steps);
+    // Calculate confidence based on selector quality
+    const confidence = calculateFlowConfidence(stepsWithAsserts);
+    return {
+        name: flowName,
+        workspaceId: workspaceId,
+        steps: stepsWithAsserts,
+        metadata: {
+            createdAt: new Date().toISOString(),
+            updatedAt: new Date().toISOString(),
+            confidence,
+            urlPattern: extractUrlPattern(events.map(e => e.url)),
+            eventCount: events.length
+        }
+    };
+}
+/**
+ * Infer step type from user description using keyword analysis
+ * Supports English and Spanish keywords
+ */
+function inferStepTypeFromDescription(description) {
+    if (!description)
+        return null;
+    const desc = description.toLowerCase();
+    // Assertion keywords (verify, validate, check, assert)
+    if (/\b(verificar|validar|comprobar|asegurar|chequear|confirmar|assert|verify|validate|check|ensure|see|expect|should|must)\b/.test(desc)) {
+        if (/\b(texto|text|contiene|contains|dice|says|muestra|shows|display)\b/.test(desc)) {
+            return 'assertText';
+        }
+        return 'assertVisible';
+    }
+    // Fill/Type keywords
+    if (/\b(escribir|type|rellenar|fill|ingresar|enter|input|escribe|completar)\b/.test(desc)) {
+        return 'fill';
+    }
+    // Navigation keywords
+    if (/\b(navegar|navega|ir a|go to|acceder|accede|entrar|entra|visit|open|abrir)\b/.test(desc)) {
+        return 'goto';
+    }
+    // Wait keywords
+    if (/\b(esperar|wait|pausa|pause|delay|sleep|detener|stop)\b/.test(desc)) {
+        return 'wait';
+    }
+    // Select keywords
+    if (/\b(seleccionar|select|selecciona|elegir|choose|dropdown|opción|option)\b/.test(desc)) {
+        return 'select';
+    }
+    // Press key keywords
+    if (/\b(presionar|press|presiona|tecla|key|enter|escape|tab|enviar|submit)\b/.test(desc)) {
+        return 'press';
+    }
+    // Hover keywords
+    if (/\b(hover|pasar|sobre|encima|mouse over|cursor)\b/.test(desc)) {
+        return 'assertVisible'; // Hover usually implies checking visibility
+    }
+    return null;
+}
+function transformEventToStep(event, lastUrl) {
+    const { type, element, value, url } = event;
+    const userDescription = event.description || '';
+    // Handle navigation
+    if (type === 'navigation' || url !== lastUrl) {
+        return {
+            type: 'goto',
+            selector: url,
+            selectorType: 'css',
+            value: url,
+            description: userDescription || `Navigate to ${url}`,
+            confidence: 1.0,
+            originalEvent: event
+        };
+    }
+    // Generate selector following priority order
+    const selectorInfo = generateBestSelector(element);
+    // Try to infer step type from user description
+    const inferredType = inferStepTypeFromDescription(userDescription);
+    // Log the inference for debugging
+    if (inferredType && userDescription) {
+        console.log(`[MCP E2E] Inferred step type "${inferredType}" from description: "${userDescription}"`);
+    }
+    // Use inferred type or fall back to event type
+    const effectiveType = inferredType || type;
+    switch (effectiveType) {
+        case 'click':
+            return {
+                type: 'click',
+                selector: selectorInfo.selector,
+                selectorType: selectorInfo.type,
+                description: userDescription || `Click on ${element.text || element.tag || 'element'}`,
+                confidence: selectorInfo.confidence,
+                originalEvent: event
+            };
+        case 'fill':
+            return {
+                type: 'fill',
+                selector: selectorInfo.selector,
+                selectorType: selectorInfo.type,
+                value: value || '',
+                description: userDescription || `Fill "${value}" in ${element.aria?.label || element.attributes?.placeholder || 'input'}`,
+                confidence: selectorInfo.confidence,
+                originalEvent: event
+            };
+        case 'press':
+            return {
+                type: 'press',
+                selector: value || 'Enter',
+                selectorType: 'css',
+                value: value || 'Enter',
+                description: userDescription || `Press ${value || 'Enter'} key`,
+                confidence: 1.0,
+                originalEvent: event
+            };
+        case 'assertVisible':
+            return {
+                type: 'assertVisible',
+                selector: selectorInfo.selector,
+                selectorType: selectorInfo.type,
+                description: userDescription || `Assert ${element.text || 'element'} is visible`,
+                confidence: selectorInfo.confidence,
+                originalEvent: event
+            };
+        case 'assertText':
+            return {
+                type: 'assertText',
+                selector: selectorInfo.selector,
+                selectorType: selectorInfo.type,
+                value: value || '',
+                description: userDescription || `Assert text is "${value}"`,
+                confidence: selectorInfo.confidence,
+                originalEvent: event
+            };
+        case 'wait':
+            return {
+                type: 'wait',
+                selector: 'body',
+                selectorType: 'css',
+                value: value || '1000',
+                description: userDescription || `Wait ${value || '1000'}ms`,
+                confidence: 1.0,
+                originalEvent: event
+            };
+        case 'select':
+            return {
+                type: 'select',
+                selector: selectorInfo.selector,
+                selectorType: selectorInfo.type,
+                value: value || '',
+                description: userDescription || `Select "${value}"`,
+                confidence: selectorInfo.confidence,
+                originalEvent: event
+            };
+        default:
+            // Default to click for unknown types
+            return {
+                type: 'click',
+                selector: selectorInfo.selector,
+                selectorType: selectorInfo.type,
+                description: userDescription || `Click on ${element.text || element.tag || 'element'}`,
+                confidence: selectorInfo.confidence * 0.8, // Lower confidence for defaulted steps
+                originalEvent: event
+            };
+    }
+}
+// Wrapper for processing individual events without navigation context
+function transformSingleEventToStep(event) {
+    // For single event processing, we treat navigation as goto if URL changed
+    const lastUrl = '';
+    return transformEventToStep(event, lastUrl);
+}
+function generateBestSelector(element) {
+    const attrs = element.attributes || {};
+    // Priority 1: data-testid (most stable)
+    if (attrs['data-testid']) {
+        return { selector: attrs['data-testid'], type: 'data-testid', confidence: 1.0 };
+    }
+    // Priority 2: ARIA role
+    if (element.aria?.role && element.aria?.label) {
+        return { selector: `${element.aria.role}[name="${element.aria.label}"]`, type: 'role', confidence: 0.95 };
+    }
+    if (element.aria?.role) {
+        return { selector: element.aria.role, type: 'role', confidence: 0.9 };
+    }
+    // Priority 3: ARIA label
+    if (element.aria?.label) {
+        return { selector: element.aria.label, type: 'label', confidence: 0.9 };
+    }
+    // Priority 4: ID (if stable)
+    if (attrs.id && !attrs.id.match(/\d+/)) {
+        return { selector: `#${attrs.id}`, type: 'css', confidence: 0.85 };
+    }
+    // Priority 5: Text content (for buttons/links)
+    if (element.text && element.text.length < 50 && ['button', 'a', 'span'].includes(element.tag || '')) {
+        return { selector: element.text.trim(), type: 'text', confidence: 0.8 };
+    }
+    // Priority 6: CSS stable classes (avoiding dynamic classes)
+    if (attrs.class) {
+        const stableClasses = attrs.class
+            .split(' ')
+            .filter(c => !c.match(/\d+/) && c.length > 3)
+            .slice(0, 3)
+            .join('.');
+        if (stableClasses) {
+            return { selector: `.${stableClasses}`, type: 'css', confidence: 0.7 };
+        }
+    }
+    // Priority 7: XPath (last resort)
+    if (element.xpath) {
+        return { selector: element.xpath, type: 'xpath', confidence: 0.5 };
+    }
+    // Fallback: tag name
+    return { selector: element.tag || 'body', type: 'css', confidence: 0.4 };
+}
+function addImplicitAssertions(steps) {
+    const result = [];
+    for (let i = 0; i < steps.length; i++) {
+        const step = steps[i];
+        result.push(step);
+        // After navigation, assert page loaded
+        if (step.type === 'goto') {
+            result.push({
+                type: 'assertVisible',
+                selector: 'body',
+                selectorType: 'css',
+                description: 'Assert page is loaded',
+                confidence: 1.0
+            });
+        }
+        // After fill on input, assert value changed
+        if (step.type === 'fill' && i < steps.length - 1) {
+            const nextStep = steps[i + 1];
+            if (nextStep.type === 'click' || nextStep.type === 'press') {
+                result.push({
+                    type: 'assertVisible',
+                    selector: step.selector,
+                    selectorType: step.selectorType,
+                    description: `Assert input has value "${step.value}"`,
+                    confidence: 0.9
+                });
+            }
+        }
+    }
+    return result;
+}
+function calculateFlowConfidence(steps) {
+    if (steps.length === 0)
+        return 0;
+    const totalConfidence = steps.reduce((sum, step) => sum + (step.confidence || 0.5), 0);
+    return Math.round((totalConfidence / steps.length) * 100) / 100;
+}
+function extractUrlPattern(urls) {
+    if (urls.length === 0)
+        return '';
+    // Find common pattern
+    const uniqueUrls = [...new Set(urls)];
+    if (uniqueUrls.length === 1)
+        return uniqueUrls[0];
+    // Try to extract route pattern (e.g., /user/:id)
+    const patterns = uniqueUrls.map(url => {
+        try {
+            const pathname = new URL(url).pathname;
+            return pathname.replace(/\/[0-9a-f]{24}/g, '/:id').replace(/\/\d+/g, '/:id');
+        }
+        catch {
+            return url;
+        }
+    });
+    return [...new Set(patterns)].join(' -> ');
+}
+// ============================================
+// END E2E TRANSFORMATION FUNCTIONS
+// ============================================
 const useSSE = process.argv.includes("--sse") || process.env.MCP_TRANSPORT === "sse";
 if (!useSSE) {
     const apiKey = process.env.VIEWGATE_API_KEY || process.env.API_KEY || "";

package/package.json

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