bricks-builder-mcp 3.5.0 → 3.6.0

package/package.json

@@ -1,8 +1,8 @@
 {
   "type": "module",
   "name": "bricks-builder-mcp",
-  "version": "3.5.0",
-  "description": "Serveur MCP pour piloter Bricks Builder (WordPress) depuis Claude — édition de pages, gestion d'éléments, réordonnancement des sections.",
+  "version": "3.6.0",
+  "description": "Serveur MCP pour piloter Bricks Builder (WordPress) depuis Claude — édition de pages, gestion d'éléments, réordonnancement des sections, vérification visuelle + technique (verify_element).",
   "main": "server.js",
   "bin": {
     "bricks-builder-mcp": "./server.js"
@@ -13,6 +13,7 @@
   ],
   "scripts": {
     "start": "node server.js",
+    "postinstall": "node -e \"console.log('\\n[bricks-builder-mcp] Pour activer verify_element, lance UNE FOIS :\\n  npx playwright install chromium\\n')\"",
     "test": "echo \"No tests yet\" && exit 0"
   },
   "keywords": [
@@ -28,6 +29,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.23.0"
+    "@modelcontextprotocol/sdk": "^1.23.0",
+    "playwright-core": "^1.50.0"
   }
 }

package/server.js

@@ -10,6 +10,112 @@ import fs from 'fs';
 import { fileURLToPath } from 'url';
 import { dirname, join } from 'path';
 
+// ===== v3.6.0 — Playwright (lazy import pour verify_element) =====
+// Chargé à la demande pour ne pas crasher si chromium pas installé.
+let _chromium = null;
+let _browser = null;
+let _browserContext = null;
+
+async function getChromium() {
+  if (_chromium) return _chromium;
+  try {
+    const mod = await import('playwright-core');
+    _chromium = mod.chromium;
+    return _chromium;
+  } catch (err) {
+    throw new Error(
+      "playwright-core introuvable. Réinstalle le package : npm i -g bricks-builder-mcp"
+    );
+  }
+}
+
+async function getBrowser() {
+  if (_browser && _browser.isConnected()) return _browser;
+  const chromium = await getChromium();
+  try {
+    _browser = await chromium.launch({ headless: true });
+    logToFile('[VERIFY] Browser Chromium lancé');
+    return _browser;
+  } catch (err) {
+    // Chromium pas installé
+    throw new Error(
+      "Chromium n'est pas installé pour Playwright.\n" +
+      "Lance UNE FOIS dans un terminal : npx playwright install chromium\n" +
+      "Détail : " + err.message
+    );
+  }
+}
+
+async function getNewPage(viewport) {
+  const browser = await getBrowser();
+  const sizes = {
+    desktop: { width: 1920, height: 1080 },
+    tablet: { width: 991, height: 1200 },
+    mobile_landscape: { width: 767, height: 600 },
+    mobile_portrait: { width: 478, height: 800 },
+  };
+  const size = sizes[viewport] || sizes.desktop;
+  if (!_browserContext) {
+    _browserContext = await browser.newContext({
+      viewport: size,
+      // Ignore SSL errors pour les sites pré-prod (cohérent avec INSECURE_SSL)
+      ignoreHTTPSErrors: INSECURE_SSL,
+    });
+  } else {
+    // Adapter le viewport si différent
+  }
+  const page = await _browserContext.newPage();
+  await page.setViewportSize(size);
+  return page;
+}
+
+// Cleanup à exit
+process.on('exit', () => {
+  if (_browser) {
+    try { _browser.close(); } catch {}
+  }
+});
+process.on('SIGINT', () => {
+  if (_browser) {
+    try { _browser.close(); } catch {}
+  }
+  process.exit(0);
+});
+
+// Normaliser les valeurs CSS pour comparaison (rgba/spaces/units)
+function normaliseCssValue(val) {
+  if (val == null) return '';
+  let s = String(val).trim().toLowerCase();
+  // Supprime espaces internes (rgba(0, 0, 0) → rgba(0,0,0))
+  s = s.replace(/\s+/g, '');
+  // Normalise "0px" et "0" et "0%"
+  if (s === '0' || s === '0px' || s === '0%') return '0';
+  // Si valeur sans unité fournie (ex "32") et getComputedStyle renvoie "32px"
+  if (/^\d+(\.\d+)?$/.test(s)) s += 'px';
+  return s;
+}
+
+function generateHint(prop, expected, got) {
+  if (prop === 'gap' || prop === 'column-gap' || prop === 'row-gap') {
+    if (got === '0' || got === '0px' || got === 'normal') {
+      return "Ajouter les 3 propriétés : _gap + _columnGap + _rowGap (cf bricks-2.3-formats.md)";
+    }
+  }
+  if (prop === 'flex-direction' && got === 'column' && expected === 'row') {
+    return "Ajouter _direction: 'row' explicitement (défaut Bricks = column)";
+  }
+  if (prop.startsWith('border-') && prop.endsWith('-radius')) {
+    return "Utiliser _border.radius (imbriqué) — PAS _borderRadius flat";
+  }
+  if (prop === 'font-family' && got.includes('Times') || got.includes('serif')) {
+    return "Police pas chargée — set_custom_code({customScriptsHeader: '<link Google Fonts>'})";
+  }
+  if (prop === 'background-color' && got === 'rgba(0,0,0,0)') {
+    return "Background transparent — utiliser {color: {raw: 'rgba(...)'}} pour rgba (PAS hex)";
+  }
+  return null;
+}
+
 // Configuration du fichier de log
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -250,7 +356,7 @@ mcpServer.setRequestHandler(ListToolsRequestSchema, async () => {
       
       {
         name: "update_element",
-        description: "Modifie UN SEUL élément sans recharger/renvoyer toute la page. Ultra économe en tokens. Utilise pour changer une couleur, un texte, etc.",
+        description: "Modifie UN SEUL élément sans recharger/renvoyer toute la page. Ultra économe en tokens. Utilise pour changer une couleur, un texte, etc. Permet aussi de renommer l'élément dans la structure Bricks via le paramètre `label`.",
         inputSchema: {
           type: "object",
           properties: {
@@ -264,10 +370,14 @@ mcpServer.setRequestHandler(ListToolsRequestSchema, async () => {
             },
             newSettings: {
               type: "object",
-              description: "Les nouveaux settings (fusionnés avec les anciens)",
+              description: "Les nouveaux settings (fusionnés avec les anciens). Optionnel si label est fourni seul.",
+            },
+            label: {
+              type: "string",
+              description: "Nom affiché dans la structure du builder Bricks (ex: 'Hero Section', 'Header Pill', 'Logo', 'CTA Buttons'). Modifie l'attribut `label` au niveau racine de l'élément. Optionnel.",
             },
           },
-          required: ["pageId", "elementId", "newSettings"],
+          required: ["pageId", "elementId"],
         },
       },
       
@@ -787,6 +897,93 @@ mcpServer.setRequestHandler(ListToolsRequestSchema, async () => {
         description: "Liste les components Bricks (templates avec type=component, Bricks 2.x).",
         inputSchema: { type: "object", properties: {} },
       },
+
+      // ===== v3.6.0 — VERIFY ELEMENT (vérification visuelle + technique) =====
+      {
+        name: "verify_element",
+        description: "⭐ APRÈS CHAQUE batch_add OU update_element SIGNIFICATIF, utilise cet outil. Lance un browser headless, navigue sur la page, scroll vers l'élément, prend un screenshot crop et compare les computed styles avec les settings attendus. Retourne {screenshot (visible par Claude), report: {score, checks}, computed}. Tu vois ce que tu as fait. Force l'évolution petit-à-petit-vérifier-petit-à-petit.",
+        inputSchema: {
+          type: "object",
+          properties: {
+            pageId: { type: "number", description: "L'ID de la page" },
+            elementId: { type: "string", description: "L'ID de l'élément à vérifier (ex: 'section_abc')" },
+            viewport: {
+              type: "string",
+              enum: ["desktop", "tablet", "mobile_landscape", "mobile_portrait"],
+              description: "Taille d'écran à tester (défaut: desktop)",
+            },
+          },
+          required: ["pageId", "elementId"],
+        },
+      },
+
+      // ===== v3.6.0 — FEEDBACK SYSTEM (missing MCP features) =====
+      {
+        name: "report_missing_feature",
+        description: "À UTILISER UNIQUEMENT quand Bricks supporte une feature nativement (vérifié via doc officielle) MAIS le MCP ne l'expose pas correctement (outil manquant / buggy / setting ignoré). PAS pour les limites Bricks elles-mêmes — dans ce cas code une alternative libre (CSS/JS via set_page_custom_code). Le gestionnaire du MCP lit ces feedbacks pour combler les trous.",
+        inputSchema: {
+          type: "object",
+          properties: {
+            title: { type: "string", description: "Titre court du manque (ex: 'Pas d outil pour Interactions Bricks')" },
+            bricksFeature: { type: "string", description: "Nom officiel Bricks de la feature (ex: 'Interactions API')" },
+            bricksDocUrl: { type: "string", description: "Lien vers la doc Bricks qui prouve que la feature est native" },
+            whatItShouldDo: { type: "string", description: "Ce que l'outil MCP devrait faire" },
+            whatITried: { type: "string", description: "Ce que tu as tenté avec les outils actuels et le résultat" },
+            proposedTool: { type: "string", description: "Nom d'outil suggéré (ex: 'set_element_interactions')" },
+            bricksVersion: { type: "string", description: "Version Bricks du site (ex: '2.3.2')" },
+            context: { type: "string", description: "Contexte du chat (URL page, ce que tu construisais)" },
+          },
+          required: ["title", "bricksFeature"],
+        },
+      },
+      {
+        name: "list_missing_features",
+        description: "Liste les feedbacks remontés par d'autres chats. Pour le mainteneur du MCP qui veut savoir quoi prioriser.",
+        inputSchema: {
+          type: "object",
+          properties: {
+            status: { type: "string", enum: ["open", "resolved"], description: "Filtrer par statut (défaut: tous)" },
+          },
+        },
+      },
+      {
+        name: "resolve_missing_feature",
+        description: "Marque un feedback comme résolu (nouvel outil ajouté ou doc enrichie).",
+        inputSchema: {
+          type: "object",
+          properties: {
+            id: { type: "string", description: "ID du feedback à résoudre" },
+            resolutionNote: { type: "string", description: "Comment c'est résolu (nouvel outil, doc, version)" },
+          },
+          required: ["id"],
+        },
+      },
+
+      // ===== v3.6.0 — UPLOAD MEDIA BATCH =====
+      {
+        name: "upload_media_batch",
+        description: "Upload plusieurs images en 1 appel (vs upload_media qui en fait 1 à la fois). Continue même si certaines échouent. Retourne {uploaded, failed, successes: [{id, url, sourceUrl, filename}], failures: [{sourceUrl, error}]}.",
+        inputSchema: {
+          type: "object",
+          properties: {
+            items: {
+              type: "array",
+              description: "Liste des images à uploader",
+              items: {
+                type: "object",
+                properties: {
+                  sourceUrl: { type: "string", description: "URL source de l'image" },
+                  title: { type: "string", description: "Titre WP (sert aussi de nom de fichier slugifié)" },
+                  alt: { type: "string", description: "Texte alternatif (SEO + accessibilité)" },
+                  caption: { type: "string", description: "Légende optionnelle" },
+                },
+                required: ["sourceUrl"],
+              },
+            },
+          },
+          required: ["items"],
+        },
+      },
     ],
   };
 });
@@ -865,11 +1062,12 @@ mcpServer.setRequestHandler(CallToolRequestSchema, async (request) => {
 
       case "update_element":
         console.error(`[LOG] Exécution: update_element`);
-        console.error(`[LOG] Modification de l'élément ${args.elementId}`);
+        console.error(`[LOG] Modification de l'élément ${args.elementId}${args.label ? ` (label: "${args.label}")` : ''}`);
         result = await callWordPressAPI("/update-element", "POST", {
           pageId: args.pageId,
           elementId: args.elementId,
-          newSettings: args.newSettings,
+          newSettings: args.newSettings || {},
+          label: args.label,
         });
         break;
 
@@ -1195,6 +1393,245 @@ mcpServer.setRequestHandler(CallToolRequestSchema, async (request) => {
         result = await callWordPressAPI("/list-components", "GET");
         break;
 
+      // ===== v3.6.0 — VERIFY ELEMENT =====
+      case "verify_element": {
+        const pageId = args.pageId;
+        const elementId = args.elementId;
+        const viewport = args.viewport || "desktop";
+
+        // 1) Récupérer infos plugin (URL, sélecteur, expected styles)
+        const info = await callWordPressAPI("/verify-element-info", "POST", { pageId, elementId });
+
+        // 2) Lancer browser headless
+        let page;
+        try {
+          page = await getNewPage(viewport);
+        } catch (browserErr) {
+          // Erreur Playwright (chromium pas installé etc) — retourner sans crasher
+          result = {
+            success: false,
+            error: browserErr.message,
+            url: info.url,
+            selector: info.selector,
+            hint: "Installation Chromium requise pour verify_element. À défaut, utilise screenshot-website-fast en MCP externe.",
+          };
+          break;
+        }
+
+        // Collecte console errors
+        const consoleErrors = [];
+        page.on('console', msg => {
+          if (msg.type() === 'error') consoleErrors.push(msg.text());
+        });
+        page.on('pageerror', err => consoleErrors.push('PageError: ' + err.message));
+
+        let screenshotBase64 = null;
+        let report = { score: '0/0', checks: [] };
+        let computed = null;
+        let loadedFonts = [];
+
+        try {
+          await page.goto(info.url, { waitUntil: 'domcontentloaded', timeout: 30000 });
+          // Attendre 2s pour Font Awesome / Google Fonts (règle d'or skill)
+          await page.waitForTimeout(2000);
+
+          const element = await page.$(info.selector);
+          if (!element) {
+            result = {
+              success: false,
+              error: `Élément ${info.selector} introuvable dans le DOM (caché par CSS, parent invisible, ou non rendu côté front)`,
+              url: info.url,
+              selector: info.selector,
+              hint: "Vérifie que la page est publiée et que l'élément n'a pas _hidden ou _display: none.",
+            };
+            await page.close();
+            break;
+          }
+
+          await element.scrollIntoViewIfNeeded();
+          await page.waitForTimeout(400);
+
+          // Computed style + dimensions
+          computed = await element.evaluate(el => {
+            const cs = getComputedStyle(el);
+            const rect = el.getBoundingClientRect();
+            return {
+              display: cs.display,
+              'flex-direction': cs.flexDirection,
+              'justify-content': cs.justifyContent,
+              'align-items': cs.alignItems,
+              gap: cs.gap,
+              'column-gap': cs.columnGap,
+              'row-gap': cs.rowGap,
+              width: Math.round(rect.width) + 'px',
+              height: Math.round(rect.height) + 'px',
+              'max-width': cs.maxWidth,
+              'padding-top': cs.paddingTop,
+              'padding-right': cs.paddingRight,
+              'padding-bottom': cs.paddingBottom,
+              'padding-left': cs.paddingLeft,
+              'margin-top': cs.marginTop,
+              'margin-right': cs.marginRight,
+              'margin-bottom': cs.marginBottom,
+              'margin-left': cs.marginLeft,
+              'background-color': cs.backgroundColor,
+              'font-size': cs.fontSize,
+              'font-family': cs.fontFamily,
+              'font-weight': cs.fontWeight,
+              'line-height': cs.lineHeight,
+              color: cs.color,
+              'text-align': cs.textAlign,
+              'border-top-left-radius': cs.borderTopLeftRadius,
+              'border-top-right-radius': cs.borderTopRightRadius,
+              'border-bottom-right-radius': cs.borderBottomRightRadius,
+              'border-bottom-left-radius': cs.borderBottomLeftRadius,
+              visibility: cs.visibility,
+              opacity: cs.opacity,
+              childrenInDom: el.children.length,
+              isVisible: rect.width > 0 && rect.height > 0 && cs.visibility !== 'hidden' && cs.opacity !== '0',
+              hasOverflowX: el.scrollWidth > el.clientWidth,
+            };
+          });
+
+          // Fonts loaded
+          loadedFonts = await page.evaluate(() => {
+            const set = new Set();
+            document.fonts.forEach(f => { if (f.status === 'loaded') set.add(f.family); });
+            return Array.from(set);
+          });
+
+          // Build checks
+          const checks = [];
+          checks.push({ ok: true, label: `Élément trouvé dans le DOM (${info.selector})` });
+          checks.push({
+            ok: computed.isVisible,
+            label: `Élément visible (${computed.width} × ${computed.height})`,
+            ...(computed.isVisible ? {} : { hint: "Largeur ou hauteur à 0 — vérifie les enfants ou le padding du parent" })
+          });
+
+          // childrenCount expected vs réel
+          if (typeof info.childrenCount === 'number') {
+            const ok = info.childrenCount === computed.childrenInDom;
+            checks.push({
+              ok,
+              label: `${info.childrenCount} enfant(s) attendu(s) → ${computed.childrenInDom} dans le DOM`,
+              ...(ok ? {} : { expected: info.childrenCount, got: computed.childrenInDom })
+            });
+          }
+
+          // Compare chaque expected
+          const expected = info.expected || {};
+          for (const [prop, expectedVal] of Object.entries(expected)) {
+            const got = computed[prop];
+            if (got === undefined) continue;
+            const ok = normaliseCssValue(got) === normaliseCssValue(expectedVal);
+            const check = { ok, label: `${prop} = ${expectedVal}` };
+            if (!ok) {
+              check.expected = expectedVal;
+              check.got = got;
+              const hint = generateHint(prop, expectedVal, got);
+              if (hint) check.hint = hint;
+            }
+            checks.push(check);
+          }
+
+          // Console errors
+          if (consoleErrors.length > 0) {
+            checks.push({
+              ok: false,
+              label: `${consoleErrors.length} erreur(s) console`,
+              got: consoleErrors.slice(0, 3),
+              hint: "Vérifie les ressources 404 (font, image, script)",
+            });
+          } else {
+            checks.push({ ok: true, label: "Aucune erreur console" });
+          }
+
+          // Overflow horizontal
+          if (computed.hasOverflowX) {
+            checks.push({
+              ok: false,
+              label: "Débordement horizontal détecté",
+              hint: "Un enfant dépasse la largeur du conteneur — vérifie les _widthMax et white-space",
+            });
+          }
+
+          // Screenshot crop (sur l'élément)
+          try {
+            const buf = await element.screenshot({ type: 'png' });
+            screenshotBase64 = buf.toString('base64');
+          } catch (e) {
+            // Si element invisible/hors viewport, fallback fullpage
+            const buf = await page.screenshot({ type: 'png', fullPage: false });
+            screenshotBase64 = buf.toString('base64');
+          }
+
+          const okCount = checks.filter(c => c.ok).length;
+          report = { score: `${okCount}/${checks.length}`, checks };
+
+          result = {
+            success: true,
+            url: info.url,
+            urlWithAnchor: info.urlWithAnchor,
+            selector: info.selector,
+            name: info.name,
+            label: info.label,
+            viewport,
+            report,
+            computed,
+            loadedFonts,
+          };
+        } finally {
+          if (page && !page.isClosed()) {
+            await page.close().catch(() => {});
+          }
+        }
+
+        // Réponse spéciale : ajouter l'image au content MCP pour que Claude la voie
+        const responseContent = [
+          { type: "text", text: JSON.stringify(result, null, 2) },
+        ];
+        if (screenshotBase64) {
+          responseContent.push({
+            type: "image",
+            data: screenshotBase64,
+            mimeType: "image/png",
+          });
+        }
+        return { content: responseContent };
+      }
+
+      // ===== v3.6.0 — FEEDBACK SYSTEM =====
+      case "report_missing_feature":
+        result = await callWordPressAPI("/report-missing-feature", "POST", {
+          title: args.title,
+          bricksFeature: args.bricksFeature,
+          bricksDocUrl: args.bricksDocUrl,
+          whatItShouldDo: args.whatItShouldDo,
+          whatITried: args.whatITried,
+          proposedTool: args.proposedTool,
+          bricksVersion: args.bricksVersion,
+          context: args.context,
+        });
+        break;
+
+      case "list_missing_features":
+        result = await callWordPressAPI("/list-missing-features" + (args.status ? `?status=${encodeURIComponent(args.status)}` : ""), "GET");
+        break;
+
+      case "resolve_missing_feature":
+        result = await callWordPressAPI("/resolve-missing-feature", "POST", {
+          id: args.id,
+          resolutionNote: args.resolutionNote,
+        });
+        break;
+
+      case "upload_media_batch":
+        result = await callWordPressAPI("/upload-media-batch", "POST", {
+          items: args.items,
+        });
+        break;
+
       default:
         console.error(`[LOG] Tool inconnu: ${name}`);
         result = { error: `Tool ${name} not found` };