bricks-builder-mcp 3.9.0 → 3.11.0

package/README.md

@@ -108,8 +108,22 @@ Claude Code détectera automatiquement le skill au prochain démarrage.
 **Éléments**
 - `find_elements`, `get_element`, `update_element` (avec param `label` pour renommer dans le builder), `add_element`, `batch_add`, `delete_element`, `reorder_sections`
 
-**⭐ Vérification visuelle**
-- `verify_element` — screenshot crop + report (computed style vs settings attendus, fonts chargées, erreurs JS console, etc.). **À utiliser après chaque batch_add significatif.**
+**⭐ Vérification visuelle (v3.10+)**
+- `verify_element` — screenshot crop + report. **À utiliser après chaque batch_add significatif.**
+  - Compare computed styles vs settings attendus, fonts, erreurs JS, débordement horizontal
+  - **v3.10 — Multi-viewport en 1 call** : `viewports: ["desktop", "mobile_portrait"]` → 1 report + 1 screenshot par viewport
+  - **v3.10 — Cohérence siblings** : text-align mixé entre frères, jumps font-size anormaux
+  - **v3.10 — Containers vides anormaux** : tout bloc ≥ 50×50px sans contenu (attrape les wrappers écrasés par `align-items: stretch`)
+  - **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`

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "bricks-builder-mcp",
-  "version": "3.9.0",
+  "version": "3.11.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 (verify_element), upload optimisé WebP. Communauté Discord : https://discord.gg/rX22zHRzH",
   "homepage": "https://discord.gg/rX22zHRzH",
   "main": "server.js",

package/server.js

@@ -214,6 +214,116 @@ function generateHint(prop, expected, got) {
   return null;
 }
 
+// ===== v3.10 — Moteur de checks pluggable =====
+// Chaque check est une fonction Node-side qui reçoit le `audit` collecté
+// dans la page (siblings, media, emptyContainers) et retourne des entrées
+// {ok, severity, label, hint, bbox} à pousser dans le report.
+// Sévérités : 'critical' (bug bloquant), 'warning' (probablement un bug),
+// 'info' (juste à savoir). 'ok' false = compte comme échec dans le score.
+
+function buildSiblingCoherenceChecks(audit) {
+  const checks = [];
+  const siblings = audit.siblings || [];
+  if (siblings.length === 0) return checks;
+
+  const all = [audit.self, ...siblings];
+
+  // 1) text-align mixé entre frères directs
+  // Si un seul frère a un text-align différent, c'est souvent un bug visuel
+  // (ex: H2 left + sous-titre center sans intention design).
+  const aligns = [...new Set(all.map(s => s['text-align']).filter(Boolean))];
+  if (aligns.length > 1) {
+    checks.push({
+      ok: false,
+      severity: 'warning',
+      label: `text-align mixé entre frères directs (${aligns.join(', ')})`,
+      hint: "Frères directs avec text-align différents — souvent un bug visuel. Vérifie l'intention design ou aligne-les sur la même valeur.",
+    });
+  }
+
+  // 2) Jumps de font-size > 2.5x entre frères (info seulement, c'est parfois voulu pour H1/sous-titre)
+  const withFontSize = all.filter(s => s['font-size-px'] && s['font-size-px'] > 0);
+  if (withFontSize.length >= 2) {
+    const sizes = withFontSize.map(s => s['font-size-px']);
+    const min = Math.min(...sizes);
+    const max = Math.max(...sizes);
+    if (min > 0 && max / min > 2.5) {
+      checks.push({
+        ok: true,
+        severity: 'info',
+        label: `font-size variable entre frères (${Math.round(min)}px → ${Math.round(max)}px)`,
+        hint: "Écart > 2.5x entre frères — normal pour H1/sous-titre, à vérifier sinon.",
+      });
+    }
+  }
+
+  return checks;
+}
+
+function buildEmptyContainerChecks(audit) {
+  const checks = [];
+  const empties = audit.emptyContainers || [];
+  if (empties.length === 0) {
+    checks.push({ ok: true, label: "Aucun container vide anormal détecté (≥ 50×50px)" });
+    return checks;
+  }
+  const sorted = empties.slice().sort((a, b) => b.area - a.area).slice(0, 5);
+  checks.push({
+    ok: false,
+    severity: 'warning',
+    label: `${empties.length} container(s) visible(s) sans contenu (≥ 50×50px)`,
+    got: sorted.map(c => `${c.classes[0] || c.id || '?'} ${c.rect.w}×${c.rect.h}`),
+    bboxes: sorted.map(c => c.rect),
+    hint: "Conteneurs vides détectés — bug fréquent quand align-items: stretch écrase un block-vide à des proportions absurdes (dot 6px qui devient 180px, etc). Vérifie aspect-ratio fixe ou ajoute du contenu.",
+  });
+  return checks;
+}
+
+function buildMediaHealthChecks(audit) {
+  const checks = [];
+  const { images = [], videos = [] } = (audit.media || {});
+
+  if (images.length > 0) {
+    const broken = images.filter(i => !i.loaded);
+    if (broken.length === 0) {
+      checks.push({ ok: true, label: `${images.length} image(s) chargée(s) (naturalWidth > 0)` });
+    } else {
+      checks.push({
+        ok: false,
+        severity: 'critical',
+        label: `${broken.length}/${images.length} image(s) PAS chargée(s) (naturalWidth = 0)`,
+        got: broken.slice(0, 3).map(i => (i.src || '').split('/').pop() || '(no src)'),
+        hint: "Image(s) non chargée(s) — vérifie l'URL src, le lazy-loading qui ne se déclenche pas, ou un 404. À éviter en production.",
+      });
+    }
+    const noAlt = images.filter(i => !i.alt || i.alt.trim().length === 0);
+    if (noAlt.length > 0) {
+      checks.push({
+        ok: false,
+        severity: 'warning',
+        label: `${noAlt.length}/${images.length} image(s) sans attribut alt`,
+        hint: "alt manquant — bloque l'accessibilité et le SEO. Renseigne alt à l'upload via upload_local_file({alt: '...'}).",
+      });
+    }
+  }
+
+  if (videos.length > 0) {
+    const notLoaded = videos.filter(v => !v.loaded);
+    if (notLoaded.length === 0) {
+      checks.push({ ok: true, label: `${videos.length} vidéo(s) chargée(s) (readyState ≥ 2)` });
+    } else {
+      checks.push({
+        ok: false,
+        severity: 'warning',
+        label: `${notLoaded.length}/${videos.length} vidéo(s) pas prête(s) (readyState < 2)`,
+        hint: "Vidéo(s) non prête(s) — peut être normal si autoplay désactivé sur mobile. Sinon vérifier src/codec.",
+      });
+    }
+  }
+
+  return checks;
+}
+
 // Configuration du fichier de log
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -999,7 +1109,7 @@ mcpServer.setRequestHandler(ListToolsRequestSchema, async () => {
       // ===== 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.",
+        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. v3.10 : ajout de checks généralistes (cohérence siblings, containers vides, santé des médias) + multi-viewport en 1 call (param `viewports`). Retourne {screenshot(s) visibles par Claude, report: {score, checks}, computed}. Force l'évolution petit-à-petit-vérifier-petit-à-petit.",
         inputSchema: {
           type: "object",
           properties: {
@@ -1008,13 +1118,59 @@ mcpServer.setRequestHandler(ListToolsRequestSchema, async () => {
             viewport: {
               type: "string",
               enum: ["desktop", "tablet", "mobile_landscape", "mobile_portrait"],
-              description: "Taille d'écran à tester (défaut: desktop)",
+              description: "Taille d'écran à tester (défaut: desktop). Ignoré si `viewports` est fourni.",
+            },
+            viewports: {
+              type: "array",
+              items: { type: "string", enum: ["desktop", "tablet", "mobile_landscape", "mobile_portrait"] },
+              description: "v3.10 : tester plusieurs viewports en 1 call. Renvoie un report + screenshot par viewport. Ex: ['desktop', 'mobile_portrait'].",
+            },
+            checks: {
+              type: "object",
+              description: "v3.10 : activer/désactiver des catégories de checks (toutes activées par défaut).",
+              properties: {
+                expected_styles: { type: "boolean", description: "Compare les computed styles aux settings attendus (défaut: true)" },
+                sibling_coherence: { type: "boolean", description: "Détecte text-align mixé et jumps font-size entre frères directs (défaut: true)" },
+                empty_containers: { type: "boolean", description: "Flag les blocs visibles ≥ 50×50px sans contenu (défaut: true)" },
+                media_health: { type: "boolean", description: "Vérifie naturalWidth > 0 sur les <img>, readyState ≥ 2 sur les <video>, alt présents (défaut: true)" },
+                overflow: { type: "boolean", description: "Détecte les débordements horizontaux (défaut: true)" },
+                console_errors: { type: "boolean", description: "Remonte les erreurs JS console (défaut: true)" },
+              },
             },
           },
           required: ["pageId", "elementId"],
         },
       },
 
+      // ===== 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",
@@ -1656,259 +1812,676 @@ mcpServer.setRequestHandler(CallToolRequestSchema, async (request) => {
         result = await callWordPressAPI("/list-components", "GET");
         break;
 
-      // ===== v3.6.0 — VERIFY ELEMENT =====
+      // ===== v3.10 — VERIFY ELEMENT (multi-viewport + checks pluggables) =====
       case "verify_element": {
         const pageId = args.pageId;
         const elementId = args.elementId;
-        const viewport = args.viewport || "desktop";
+        // Backward compat : `viewport` (singulier) OU `viewports` (array)
+        const viewportList = (Array.isArray(args.viewports) && args.viewports.length > 0)
+          ? args.viewports
+          : [args.viewport || "desktop"];
+        const isMulti = viewportList.length > 1;
+        const checksConfig = Object.assign({
+          expected_styles: true,
+          sibling_coherence: true,
+          empty_containers: true,
+          media_health: true,
+          overflow: true,
+          console_errors: true,
+        }, args.checks || {});
         const viewportSizes = {
           desktop: { width: 1920, height: 1080 },
           tablet: { width: 991, height: 1200 },
           mobile_landscape: { width: 767, height: 600 },
           mobile_portrait: { width: 478, height: 800 },
         };
-        const viewportContext = viewportSizes[viewport] || viewportSizes.desktop;
 
-        // 1) Récupérer infos plugin (URL, sélecteur, expected styles)
+        // 1) Récupérer infos plugin une seule fois (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;
-        }
+        // 2) Boucler sur chaque viewport — chacun = 1 page, 1 screenshot, 1 report
+        const perViewport = [];
 
-        // 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 = [];
+        for (const viewport of viewportList) {
+          const viewportContext = viewportSizes[viewport] || viewportSizes.desktop;
 
-        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) {
-            // Diagnostic : qu'a-t-on réellement chargé ?
-            const diagnostics = await page.evaluate(() => ({
-              actualUrl: window.location.href,
-              title: document.title,
-              bodyClass: document.body?.className || '',
-              brxeCount: document.querySelectorAll('[class*="brxe-"]').length,
-              firstBrxe: document.querySelector('[class*="brxe-"]')?.className || null,
-              htmlSnippet: document.documentElement.outerHTML.substring(0, 500),
-            }));
-            result = {
+          let page;
+          try {
+            page = await getNewPage(viewport);
+          } catch (browserErr) {
+            perViewport.push({
+              viewport,
               success: false,
-              error: `Élément ${info.selector} introuvable dans le DOM`,
-              url: info.url,
-              selector: info.selector,
-              diagnostics,
-              hint: diagnostics.brxeCount === 0
-                ? "Aucune classe .brxe-* trouvée — la page n'a probablement pas chargé le contenu Bricks (cert SSL, redirect, 404, page d'erreur)"
-                : `${diagnostics.brxeCount} éléments .brxe-* trouvés mais pas ${info.selector} — l'ID dans la DB ne correspond pas au rendu`,
-            };
-            await page.close();
-            break;
+              error: browserErr.message,
+              hint: "Installation Chromium requise pour verify_element. À défaut, utilise screenshot-website-fast en MCP externe.",
+            });
+            continue;
           }
 
-          await element.scrollIntoViewIfNeeded();
-          await page.waitForTimeout(400);
-
-          // Computed style + dimensions
-          computed = await element.evaluate(el => {
-            const cs = getComputedStyle(el);
-            const rect = el.getBoundingClientRect();
-            // Enfants "réels" = ceux qui ont une classe brxe-{id} ou id brxe-*
-            // Exclut les <video>, <picture> et autres ajoutés par Bricks (bg vidéo, overlay auto, etc.)
-            const realChildren = Array.from(el.children).filter(child => {
-              if (child.id && child.id.startsWith('brxe-')) return true;
-              return Array.from(child.classList).some(cls => cls.startsWith('brxe-'));
-            });
-            const bricksInternalChildren = Array.from(el.children).filter(child => {
-              return !((child.id && child.id.startsWith('brxe-')) ||
-                       Array.from(child.classList).some(cls => cls.startsWith('brxe-')));
-            }).map(c => c.tagName.toLowerCase() + (c.className ? '.' + c.className.split(' ').join('.') : ''));
-            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: realChildren.length,
-              childrenTotalDom: el.children.length,
-              bricksInternalChildren: bricksInternalChildren,
-              isVisible: rect.width > 0 && rect.height > 0 && cs.visibility !== 'hidden' && cs.opacity !== '0',
-              hasOverflowX: el.scrollWidth > el.clientWidth,
-            };
+          const consoleErrors = [];
+          page.on('console', msg => {
+            if (msg.type() === 'error') consoleErrors.push(msg.text());
           });
+          page.on('pageerror', err => consoleErrors.push('PageError: ' + err.message));
 
-          // 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);
-          });
+          let screenshotBase64 = null;
+          let audit = null;
+          let loadedFonts = [];
 
-          // 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" })
-          });
+          try {
+            await page.goto(info.url, { waitUntil: 'domcontentloaded', timeout: 30000 });
+            await page.waitForTimeout(2000);
+
+            const element = await page.$(info.selector);
+            if (!element) {
+              const diagnostics = await page.evaluate(() => ({
+                actualUrl: window.location.href,
+                title: document.title,
+                bodyClass: document.body?.className || '',
+                brxeCount: document.querySelectorAll('[class*="brxe-"]').length,
+                firstBrxe: document.querySelector('[class*="brxe-"]')?.className || null,
+                htmlSnippet: document.documentElement.outerHTML.substring(0, 500),
+              }));
+              perViewport.push({
+                viewport,
+                success: false,
+                error: `Élément ${info.selector} introuvable dans le DOM`,
+                diagnostics,
+                hint: diagnostics.brxeCount === 0
+                  ? "Aucune classe .brxe-* trouvée — la page n'a probablement pas chargé le contenu Bricks (cert SSL, redirect, 404, page d'erreur)"
+                  : `${diagnostics.brxeCount} éléments .brxe-* trouvés mais pas ${info.selector} — l'ID dans la DB ne correspond pas au rendu`,
+              });
+              continue;
+            }
 
-          // childrenCount expected vs réel
-          if (typeof info.childrenCount === 'number') {
-            const ok = info.childrenCount === computed.childrenInDom;
+            await element.scrollIntoViewIfNeeded();
+            await page.waitForTimeout(400);
+
+            // === v3.10 : collecte enrichie en 1 evaluate (self + siblings + media + emptyContainers) ===
+            audit = await page.evaluate((selector) => {
+              const el = document.querySelector(selector);
+              if (!el) return null;
+              const cs = getComputedStyle(el);
+              const rect = el.getBoundingClientRect();
+
+              const realChildren = Array.from(el.children).filter(child => {
+                if (child.id && child.id.startsWith('brxe-')) return true;
+                return Array.from(child.classList).some(cls => cls.startsWith('brxe-'));
+              });
+              const bricksInternalChildren = Array.from(el.children).filter(child => {
+                return !((child.id && child.id.startsWith('brxe-')) ||
+                         Array.from(child.classList).some(cls => cls.startsWith('brxe-')));
+              }).map(c => c.tagName.toLowerCase() + (c.className ? '.' + c.className.split(' ').filter(Boolean).join('.') : ''));
+
+              const computed = {
+                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: realChildren.length,
+                childrenTotalDom: el.children.length,
+                bricksInternalChildren,
+                isVisible: rect.width > 0 && rect.height > 0 && cs.visibility !== 'hidden' && cs.opacity !== '0',
+                hasOverflowX: el.scrollWidth > el.clientWidth,
+              };
+
+              // SIBLINGS (frères directs Bricks)
+              const self = {
+                id: el.id || '',
+                'text-align': cs.textAlign,
+                'font-size': cs.fontSize,
+                'font-size-px': parseFloat(cs.fontSize),
+              };
+              let siblings = [];
+              if (el.parentElement) {
+                const realSiblings = Array.from(el.parentElement.children).filter(s => {
+                  if (s === el) return false;
+                  if (s.id && s.id.startsWith('brxe-')) return true;
+                  return Array.from(s.classList).some(c => c.startsWith('brxe-'));
+                });
+                siblings = realSiblings.map(s => {
+                  const scs = getComputedStyle(s);
+                  const srect = s.getBoundingClientRect();
+                  return {
+                    id: s.id || '',
+                    classes: Array.from(s.classList).filter(c => c.startsWith('brxe-')),
+                    'text-align': scs.textAlign,
+                    'font-size': scs.fontSize,
+                    'font-size-px': parseFloat(scs.fontSize),
+                    rect: { x: Math.round(srect.x), y: Math.round(srect.y), w: Math.round(srect.width), h: Math.round(srect.height) },
+                  };
+                });
+              }
+
+              // MEDIA (img + video à l'intérieur de l'élément)
+              const images = Array.from(el.querySelectorAll('img')).map(img => ({
+                src: img.currentSrc || img.src || '',
+                naturalWidth: img.naturalWidth,
+                naturalHeight: img.naturalHeight,
+                alt: img.alt || '',
+                loaded: img.naturalWidth > 0,
+                loading: img.getAttribute('loading') || 'eager',
+              }));
+              const videos = Array.from(el.querySelectorAll('video')).map(v => ({
+                src: v.currentSrc || v.src || '',
+                readyState: v.readyState,
+                paused: v.paused,
+                loaded: v.readyState >= 2,
+              }));
+
+              // EMPTY CONTAINERS (descendants Bricks visibles ≥ 50×50px sans contenu)
+              const allBrxe = Array.from(el.querySelectorAll('[id^="brxe-"], [class*="brxe-"]'));
+              const emptyContainers = [];
+              const MIN_AREA = 2500;
+              allBrxe.forEach(b => {
+                const brect = b.getBoundingClientRect();
+                if (brect.width < 50 || brect.height < 50) return;
+                const area = brect.width * brect.height;
+                if (area < MIN_AREA) return;
+                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) {
+                  emptyContainers.push({
+                    id: b.id || '',
+                    classes: Array.from(b.classList).filter(c => c.startsWith('brxe-')),
+                    rect: { x: Math.round(brect.x), y: Math.round(brect.y), w: Math.round(brect.width), h: Math.round(brect.height) },
+                    area: Math.round(area),
+                  });
+                }
+              });
+
+              return { computed, self, siblings, media: { images, videos }, emptyContainers };
+            }, info.selector);
+
+            // 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);
+            });
+
+            // === Construction des checks ===
+            const checks = [];
+            const computed = audit.computed;
+            checks.push({ ok: true, label: `Élément trouvé dans le DOM (${info.selector})` });
             checks.push({
-              ok,
-              label: `${info.childrenCount} enfant(s) attendu(s) → ${computed.childrenInDom} dans le DOM`,
-              ...(ok ? {} : { expected: info.childrenCount, got: computed.childrenInDom })
+              ok: computed.isVisible,
+              label: `Élément visible (${computed.width} × ${computed.height})`,
+              ...(computed.isVisible ? {} : { severity: 'critical', hint: "Largeur ou hauteur à 0 — vérifie les enfants ou le padding du parent" })
             });
-          }
 
-          // Compare chaque expected (viewport-aware pour vh/vw)
-          const expected = info.expected || {};
-          for (const [prop, expectedVal] of Object.entries(expected)) {
-            const got = computed[prop];
-            if (got === undefined) continue;
-            const ok = normaliseCssValue(got, viewportContext) === normaliseCssValue(expectedVal, viewportContext);
-            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;
+            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 ? {} : { severity: 'warning', expected: info.childrenCount, got: computed.childrenInDom })
+              });
             }
-            checks.push(check);
-          }
 
-          // Console errors : séparer les vrais bugs JS des erreurs réseau (429/timeout)
-          // qui dépendent du serveur, pas du code de l'élément.
-          const realErrors = consoleErrors.filter(e =>
-            !e.includes('429') &&
-            !e.includes('net::ERR_') &&
-            !e.includes('Failed to load resource')
-          );
-          const networkErrors = consoleErrors.filter(e =>
-            e.includes('429') || e.includes('net::ERR_') || e.includes('Failed to load resource')
-          );
-
-          if (realErrors.length > 0) {
-            checks.push({
-              ok: false,
-              label: `${realErrors.length} erreur(s) JS dans la console`,
-              got: realErrors.slice(0, 3),
-              hint: "Erreur JavaScript détectée — pas lié au serveur",
+            // Expected styles (viewport-aware vh/vw)
+            if (checksConfig.expected_styles) {
+              const expected = info.expected || {};
+              for (const [prop, expectedVal] of Object.entries(expected)) {
+                const got = computed[prop];
+                if (got === undefined) continue;
+                const ok = normaliseCssValue(got, viewportContext) === normaliseCssValue(expectedVal, viewportContext);
+                const check = { ok, label: `${prop} = ${expectedVal}` };
+                if (!ok) {
+                  check.severity = 'warning';
+                  check.expected = expectedVal;
+                  check.got = got;
+                  const hint = generateHint(prop, expectedVal, got);
+                  if (hint) check.hint = hint;
+                }
+                checks.push(check);
+              }
+            }
+
+            // v3.10 : cohérence siblings
+            if (checksConfig.sibling_coherence) {
+              checks.push(...buildSiblingCoherenceChecks(audit));
+            }
+            // v3.10 : containers vides
+            if (checksConfig.empty_containers) {
+              checks.push(...buildEmptyContainerChecks(audit));
+            }
+            // v3.10 : santé médias
+            if (checksConfig.media_health) {
+              checks.push(...buildMediaHealthChecks(audit));
+            }
+
+            // Console errors : séparer JS vs réseau (429/timeout) — réseau = info, JS = échec
+            if (checksConfig.console_errors) {
+              const realErrors = consoleErrors.filter(e =>
+                !e.includes('429') && !e.includes('net::ERR_') && !e.includes('Failed to load resource')
+              );
+              const networkErrors = consoleErrors.filter(e =>
+                e.includes('429') || e.includes('net::ERR_') || e.includes('Failed to load resource')
+              );
+              if (realErrors.length > 0) {
+                checks.push({
+                  ok: false,
+                  severity: 'critical',
+                  label: `${realErrors.length} erreur(s) JS dans la console`,
+                  got: realErrors.slice(0, 3),
+                  hint: "Erreur JavaScript détectée — pas lié au serveur",
+                });
+              } else {
+                checks.push({ ok: true, label: "Aucune erreur JS console" });
+              }
+              if (networkErrors.length > 0) {
+                checks.push({
+                  ok: true,
+                  severity: 'info',
+                  label: `${networkErrors.length} erreur(s) réseau (429/load) — non bloquant`,
+                  got: networkErrors.slice(0, 2),
+                });
+              }
+            }
+
+            // Overflow horizontal
+            if (checksConfig.overflow && computed.hasOverflowX) {
+              checks.push({
+                ok: false,
+                severity: 'warning',
+                label: "Débordement horizontal détecté",
+                hint: "Un enfant dépasse la largeur du conteneur — vérifie les _widthMax et white-space",
+              });
+            }
+
+            // Screenshot crop (fallback fullpage si l'élément ne peut pas être capturé seul)
+            try {
+              const buf = await element.screenshot({ type: 'png' });
+              screenshotBase64 = buf.toString('base64');
+            } catch (e) {
+              const buf = await page.screenshot({ type: 'png', fullPage: false });
+              screenshotBase64 = buf.toString('base64');
+            }
+
+            const okCount = checks.filter(c => c.ok).length;
+            perViewport.push({
+              viewport,
+              success: true,
+              report: { score: `${okCount}/${checks.length}`, checks },
+              computed,
+              loadedFonts,
+              screenshotBase64,
             });
+          } finally {
+            if (page && !page.isClosed()) {
+              await page.close().catch(() => {});
+            }
+          }
+        }
+
+        // 3) Construction de la réponse MCP
+        const baseInfo = {
+          url: info.url,
+          urlWithAnchor: info.urlWithAnchor,
+          selector: info.selector,
+          name: info.name,
+          label: info.label,
+        };
+        const responseContent = [];
+
+        if (isMulti) {
+          // Multi-viewport : 1 JSON consolidé + 1 image par viewport (les b64 sont retirés du JSON)
+          const summary = {
+            ...baseInfo,
+            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/png" });
+            }
+          }
+        } else {
+          // Single viewport : structure plate (backward compat)
+          const vr = perViewport[0];
+          let flatResult;
+          if (vr.success) {
+            flatResult = {
+              success: true,
+              ...baseInfo,
+              viewport: vr.viewport,
+              report: vr.report,
+              computed: vr.computed,
+              loadedFonts: vr.loadedFonts,
+            };
           } else {
-            checks.push({ ok: true, label: "Aucune erreur JS console" });
+            flatResult = {
+              success: false,
+              ...baseInfo,
+              viewport: vr.viewport,
+              error: vr.error,
+              diagnostics: vr.diagnostics,
+              hint: vr.hint,
+            };
           }
-          // Erreurs réseau : info seulement, pas un échec
-          if (networkErrors.length > 0) {
-            checks.push({
-              ok: true,
-              label: `${networkErrors.length} erreur(s) réseau (429/load) — non bloquant`,
-              got: networkErrors.slice(0, 2),
-            });
+          responseContent.push({ type: "text", text: JSON.stringify(flatResult, null, 2) });
+          if (vr.screenshotBase64) {
+            responseContent.push({ type: "image", data: vr.screenshotBase64, mimeType: "image/png" });
           }
+        }
 
-          // 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",
+        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_bricks_pages (pas de plugin update nécessaire)
+        const allPages = await callWordPressAPI("/list-bricks-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;
           }
 
-          // 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');
-          }
+            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),
+                    });
+                  }
+                });
+              }
 
-          const okCount = checks.filter(c => c.ok).length;
-          report = { score: `${okCount}/${checks.length}`, checks };
+              // === 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),
+                    });
+                  }
+                });
+              }
 
-          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(() => {});
+              // === 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(() => {});
+            }
           }
         }
 
-        // 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",
-          });
+        // 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 };
       }