bricks-builder-mcp 3.10.0 → 3.11.1

package/README.md

@@ -117,6 +117,14 @@ Claude Code détectera automatiquement le skill au prochain démarrage.
   - **v3.10 — Santé des médias** : `naturalWidth > 0` sur les `<img>` (lazy-load cassé), `readyState ≥ 2` sur les `<video>`, alt présents
   - Chaque check porte une `severity` (`critical` / `warning` / `info`) et un `hint` actionnable. Désactivable par catégorie via `checks: { sibling_coherence: false }`.
 
+**⭐ Audit page entière (v3.11+)**
+- `audit_page` — fullpage screenshot **avec annotations dessinées** + report consolidé. Complète `verify_element` (qui est ciblé sur 1 élément).
+  - Scanne TOUS les éléments Bricks d'une page d'un coup
+  - Dessine des cadres colorés (rouge=critical, orange=warning, jaune=info) sur les zones problématiques directement sur le screenshot
+  - Multi-viewport en 1 call (par défaut `["desktop", "mobile_portrait"]`)
+  - Idéal pour : état initial avant refonte, démo client, audit après une grosse vague de modifs
+  - Checks intégrés : containers vides, images cassées + alt manquants, text-align mixé, débordement horizontal global de la page
+
 **⭐ Upload optimisé (v3.8+)**
 - `upload_local_file`, `upload_local_files_batch` — l'IA donne juste le path local, le MCP server lit le fichier, conversion WebP automatique (-80 à -95% de poids), renommage SEO via le `title`
 - `upload_media`, `upload_media_batch` (accepte URL HTTP/HTTPS **ou** data URI)

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "bricks-builder-mcp",
-  "version": "3.10.0",
+  "version": "3.11.1",
   "description": "Serveur MCP pour piloter Bricks Builder (WordPress) depuis Claude — édition de pages, gestion d'éléments, réordonnancement des sections, vérification visuelle (verify_element), upload optimisé WebP. Communauté Discord : https://discord.gg/rX22zHRzH",
   "homepage": "https://discord.gg/rX22zHRzH",
   "main": "server.js",

package/server.js

@@ -1142,6 +1142,35 @@ mcpServer.setRequestHandler(ListToolsRequestSchema, async () => {
         },
       },
 
+      // ===== v3.11 — AUDIT_PAGE (fullpage screenshot + annotations + report consolidé) =====
+      {
+        name: "audit_page",
+        description: "⭐ AUDIT GLOBAL d'une page Bricks en 1 call. Lance un browser headless, charge la page, scanne TOUS les éléments Bricks visibles, dessine des cadres colorés sur le screenshot fullpage là où il y a un problème (rouge=critical, orange=warning, jaune=info), et retourne un report consolidé avec severityCounts. Idéal pour un coup d'œil rapide 'qu'est-ce qui cloche sur cette page ?' avant ou après une refonte. Complète verify_element (qui est ciblé sur 1 élément).",
+        inputSchema: {
+          type: "object",
+          properties: {
+            pageId: { type: "number", description: "L'ID de la page WP à auditer" },
+            viewports: {
+              type: "array",
+              items: { type: "string", enum: ["desktop", "tablet", "mobile_landscape", "mobile_portrait"] },
+              description: "Viewports à tester (défaut: ['desktop', 'mobile_portrait']). Renvoie un screenshot annoté + un report par viewport.",
+            },
+            checks: {
+              type: "object",
+              description: "Activer/désactiver les catégories de checks. Toutes activées par défaut.",
+              properties: {
+                empty_containers: { type: "boolean", description: "Containers Bricks ≥ 50×50px sans contenu (défaut: true)" },
+                media_health: { type: "boolean", description: "Images cassées (naturalWidth=0) + alt manquant (défaut: true)" },
+                sibling_coherence: { type: "boolean", description: "text-align mixé entre frères Bricks (défaut: true)" },
+                page_overflow: { type: "boolean", description: "Débordement horizontal global de la page (défaut: true)" },
+              },
+            },
+            maxAnnotations: { type: "number", description: "Limite d'annotations dessinées sur le screenshot (défaut: 30, pour éviter d'écraser visuellement la page)" },
+          },
+          required: ["pageId"],
+        },
+      },
+
       // ===== v3.6.0 — FEEDBACK SYSTEM (missing MCP features) =====
       {
         name: "report_missing_feature",
@@ -2173,6 +2202,290 @@ mcpServer.setRequestHandler(CallToolRequestSchema, async (request) => {
         return { content: responseContent };
       }
 
+      // ===== v3.11 — AUDIT_PAGE (fullpage + annotations + report) =====
+      case "audit_page": {
+        const pageId = args.pageId;
+        const viewportList = (Array.isArray(args.viewports) && args.viewports.length > 0)
+          ? args.viewports
+          : ["desktop", "mobile_portrait"];
+        const checksConfig = Object.assign({
+          empty_containers: true,
+          media_health: true,
+          sibling_coherence: true,
+          page_overflow: true,
+        }, args.checks || {});
+        const maxAnnotations = typeof args.maxAnnotations === 'number' ? args.maxAnnotations : 30;
+        const viewportSizes = {
+          desktop: { width: 1920, height: 1080 },
+          tablet: { width: 991, height: 1200 },
+          mobile_landscape: { width: 767, height: 600 },
+          mobile_portrait: { width: 478, height: 800 },
+        };
+
+        // 1) Récupérer l'URL de la page via /list-pages (pas de plugin update nécessaire)
+        const allPages = await callWordPressAPI("/list-pages", "GET");
+        const pageMeta = (Array.isArray(allPages) ? allPages : []).find(p => p.id === pageId);
+        if (!pageMeta) {
+          return { content: [{ type: "text", text: JSON.stringify({ success: false, error: `Page ${pageId} introuvable dans list_bricks_pages`, hint: "Vérifie l'ID via list_bricks_pages." }, null, 2) }] };
+        }
+        const pageUrl = pageMeta.url;
+
+        // 2) Boucler sur chaque viewport
+        const perViewport = [];
+
+        for (const viewport of viewportList) {
+          let page;
+          try {
+            page = await getNewPage(viewport);
+          } catch (browserErr) {
+            perViewport.push({
+              viewport,
+              success: false,
+              error: browserErr.message,
+              hint: "Installation Chromium requise pour audit_page. Lance : npx playwright install chromium",
+            });
+            continue;
+          }
+
+          try {
+            await page.goto(pageUrl, { waitUntil: 'domcontentloaded', timeout: 30000 });
+            // Wait : fonts + lazy load (networkidle pour les images lazy)
+            try {
+              await page.waitForLoadState('networkidle', { timeout: 8000 });
+            } catch {} // pas grave si certaines requêtes restent en cours
+            await page.waitForTimeout(1500);
+            // Scroll bottom puis top pour déclencher les lazy-load
+            await page.evaluate(() => {
+              return new Promise(resolve => {
+                const totalHeight = document.documentElement.scrollHeight;
+                let scrolled = 0;
+                const step = 400;
+                const timer = setInterval(() => {
+                  window.scrollBy(0, step);
+                  scrolled += step;
+                  if (scrolled >= totalHeight) {
+                    clearInterval(timer);
+                    window.scrollTo(0, 0);
+                    setTimeout(resolve, 800);
+                  }
+                }, 100);
+              });
+            });
+
+            // 3) Collecte d'issues globales sur toute la page
+            const auditResult = await page.evaluate((cfg) => {
+              const issues = [];
+              const allBrxe = Array.from(document.querySelectorAll('[id^="brxe-"], [class*="brxe-"]'));
+
+              // Helper : bbox en coordonnées absolues (page entière, pas viewport)
+              const absBbox = (rect) => ({
+                x: Math.round(rect.left + window.scrollX),
+                y: Math.round(rect.top + window.scrollY),
+                w: Math.round(rect.width),
+                h: Math.round(rect.height),
+              });
+
+              // === Empty containers ===
+              if (cfg.empty_containers) {
+                allBrxe.forEach(b => {
+                  const rect = b.getBoundingClientRect();
+                  if (rect.width < 50 || rect.height < 50) return;
+                  const area = rect.width * rect.height;
+                  if (area < 2500) return;
+                  // Ignorer les éléments en dehors du viewport rendu (hauteur fullpage)
+                  const hasText = (b.textContent || '').trim().length > 0;
+                  const hasMedia = b.querySelector('img, picture, svg, video, iframe') !== null;
+                  const hasInteractive = b.querySelector('a, button, input, select, textarea') !== null;
+                  const bcs = getComputedStyle(b);
+                  const hasBgImg = bcs.backgroundImage && bcs.backgroundImage !== 'none';
+                  if (!hasText && !hasMedia && !hasInteractive && !hasBgImg) {
+                    issues.push({
+                      type: 'empty_container',
+                      severity: 'warning',
+                      element: b.id || (Array.from(b.classList).find(c => c.startsWith('brxe-')) || '?'),
+                      label: `Container vide ${Math.round(rect.width)}×${Math.round(rect.height)}px`,
+                      hint: "Bloc visible sans contenu — souvent un wrapper écrasé par align-items: stretch. Fixer aspect-ratio ou ajouter du contenu.",
+                      bbox: absBbox(rect),
+                    });
+                  }
+                });
+              }
+
+              // === Media health ===
+              if (cfg.media_health) {
+                const imgs = Array.from(document.querySelectorAll('img'));
+                imgs.forEach(img => {
+                  const rect = img.getBoundingClientRect();
+                  if (rect.width < 1 || rect.height < 1) return;
+                  if (!img.naturalWidth) {
+                    issues.push({
+                      type: 'broken_image',
+                      severity: 'critical',
+                      element: (img.src || '').split('/').pop() || '(no src)',
+                      label: `Image non chargée : ${(img.src || '').split('/').pop() || '(no src)'}`,
+                      hint: "naturalWidth = 0 — lazy-load non déclenché ou 404. Vérifie l'URL src et la stratégie de chargement.",
+                      bbox: absBbox(rect),
+                    });
+                  } else if (!img.alt || !img.alt.trim()) {
+                    issues.push({
+                      type: 'no_alt',
+                      severity: 'warning',
+                      element: (img.src || '').split('/').pop() || '(no src)',
+                      label: `alt manquant sur image`,
+                      hint: "Renseigne alt à l'upload (upload_local_file({alt})) — accessibilité + SEO.",
+                      bbox: absBbox(rect),
+                    });
+                  }
+                });
+              }
+
+              // === Sibling coherence ===
+              if (cfg.sibling_coherence) {
+                allBrxe.forEach(parent => {
+                  const realChildren = Array.from(parent.children).filter(c =>
+                    (c.id && c.id.startsWith('brxe-')) ||
+                    Array.from(c.classList).some(cls => cls.startsWith('brxe-'))
+                  );
+                  if (realChildren.length < 2) return;
+                  const aligns = [...new Set(realChildren.map(c => getComputedStyle(c).textAlign))];
+                  if (aligns.length > 1) {
+                    const rect = parent.getBoundingClientRect();
+                    issues.push({
+                      type: 'mixed_text_align',
+                      severity: 'warning',
+                      element: parent.id || (Array.from(parent.classList).find(c => c.startsWith('brxe-')) || '?'),
+                      label: `text-align mixé entre frères (${aligns.join(', ')})`,
+                      hint: "Frères directs avec text-align différents — souvent un bug visuel. Aligner ou justifier le choix.",
+                      bbox: absBbox(rect),
+                    });
+                  }
+                });
+              }
+
+              // === Page overflow X ===
+              if (cfg.page_overflow) {
+                const doc = document.documentElement;
+                if (doc.scrollWidth > doc.clientWidth + 1) {
+                  issues.push({
+                    type: 'page_overflow_x',
+                    severity: 'critical',
+                    element: 'document',
+                    label: `Débordement horizontal de la page (${doc.scrollWidth}px > ${doc.clientWidth}px)`,
+                    hint: "Un élément dépasse en largeur. Cherche les _widthMax manquants ou un white-space:nowrap.",
+                    bbox: null,
+                  });
+                }
+              }
+
+              return {
+                issues,
+                pageDimensions: {
+                  width: document.documentElement.clientWidth,
+                  height: document.documentElement.scrollHeight,
+                },
+                totalBrxe: allBrxe.length,
+              };
+            }, checksConfig);
+
+            // 4) Limiter les annotations (les plus sévères en premier)
+            const severityRank = { critical: 0, warning: 1, info: 2 };
+            const annotatable = auditResult.issues
+              .filter(i => i.bbox)
+              .sort((a, b) => (severityRank[a.severity] ?? 9) - (severityRank[b.severity] ?? 9))
+              .slice(0, maxAnnotations);
+
+            // 5) Injecter les overlays dans le DOM puis screenshot fullpage
+            await page.evaluate((annotations) => {
+              const colors = { critical: '#ef4444', warning: '#f59e0b', info: '#facc15' };
+              const labelBg = { critical: 'rgba(239, 68, 68, 0.9)', warning: 'rgba(245, 158, 11, 0.9)', info: 'rgba(250, 204, 21, 0.9)' };
+              annotations.forEach((ann, idx) => {
+                const overlay = document.createElement('div');
+                overlay.style.cssText = `
+                  position: absolute;
+                  left: ${ann.bbox.x}px;
+                  top: ${ann.bbox.y}px;
+                  width: ${ann.bbox.w}px;
+                  height: ${ann.bbox.h}px;
+                  border: 3px solid ${colors[ann.severity] || '#888'};
+                  pointer-events: none;
+                  z-index: 2147483646;
+                  box-sizing: border-box;
+                `;
+                document.body.appendChild(overlay);
+
+                // Petit label en haut à gauche du cadre avec le numéro
+                const label = document.createElement('div');
+                label.textContent = String(idx + 1);
+                label.style.cssText = `
+                  position: absolute;
+                  left: ${ann.bbox.x}px;
+                  top: ${Math.max(0, ann.bbox.y - 24)}px;
+                  background: ${labelBg[ann.severity] || 'rgba(136,136,136,0.9)'};
+                  color: white;
+                  font-family: system-ui, sans-serif;
+                  font-size: 14px;
+                  font-weight: 700;
+                  padding: 2px 8px;
+                  border-radius: 3px;
+                  pointer-events: none;
+                  z-index: 2147483647;
+                `;
+                document.body.appendChild(label);
+              });
+            }, annotatable);
+
+            // Fullpage screenshot
+            const buf = await page.screenshot({ type: 'jpeg', quality: 80, fullPage: true });
+            const screenshotBase64 = buf.toString('base64');
+
+            // 6) Aggrégation
+            const counts = { critical: 0, warning: 0, info: 0 };
+            auditResult.issues.forEach(i => {
+              counts[i.severity] = (counts[i.severity] || 0) + 1;
+            });
+
+            perViewport.push({
+              viewport,
+              success: true,
+              pageDimensions: auditResult.pageDimensions,
+              totalBrxeElements: auditResult.totalBrxe,
+              severityCounts: counts,
+              totalIssues: auditResult.issues.length,
+              annotated: annotatable.length,
+              // On numérote les issues annotées pour matcher avec les cadres sur le screenshot
+              issues: auditResult.issues.map((iss, idx) => {
+                const annIdx = annotatable.indexOf(iss);
+                return annIdx >= 0 ? { ...iss, annotationNumber: annIdx + 1 } : iss;
+              }),
+              screenshotBase64,
+            });
+          } finally {
+            if (page && !page.isClosed()) {
+              await page.close().catch(() => {});
+            }
+          }
+        }
+
+        // 7) Réponse MCP : 1 JSON global + 1 image par viewport
+        const responseContent = [];
+        const summary = {
+          pageId,
+          pageUrl,
+          pageTitle: pageMeta.title,
+          viewports: perViewport.map(vr => {
+            const { screenshotBase64: _drop, ...rest } = vr;
+            return rest;
+          }),
+        };
+        responseContent.push({ type: "text", text: JSON.stringify(summary, null, 2) });
+        for (const vr of perViewport) {
+          if (vr.screenshotBase64) {
+            responseContent.push({ type: "image", data: vr.screenshotBase64, mimeType: "image/jpeg" });
+          }
+        }
+        return { content: responseContent };
+      }
+
       // ===== v3.6.0 — FEEDBACK SYSTEM =====
       case "report_missing_feature":
         result = await callWordPressAPI("/report-missing-feature", "POST", {