bricks-builder-mcp 3.9.0 → 3.10.0

package/README.md

@@ -108,8 +108,14 @@ 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 }`.
 
 **⭐ 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.10.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,7 +1118,24 @@ 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"],
@@ -1656,260 +1783,393 @@ 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;
-        }
-
-        // 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));
+        // 2) Boucler sur chaque viewport — chacun = 1 page, 1 screenshot, 1 report
+        const perViewport = [];
 
-        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;
-            checks.push({
-              ok,
-              label: `${info.childrenCount} enfant(s) attendu(s) → ${computed.childrenInDom} dans le DOM`,
-              ...(ok ? {} : { expected: info.childrenCount, got: 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) },
+                  };
+                });
+              }
 
-          // 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;
-            }
-            checks.push(check);
-          }
+              // 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),
+                  });
+                }
+              });
 
-          // 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",
-            });
-          } else {
-            checks.push({ ok: true, label: "Aucune erreur JS console" });
-          }
-          // 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),
+              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);
             });
-          }
 
-          // Overflow horizontal
-          if (computed.hasOverflowX) {
+            // === 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: false,
-              label: "Débordement horizontal détecté",
-              hint: "Un enfant dépasse la largeur du conteneur — vérifie les _widthMax et white-space",
+              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" })
             });
-          }
 
-          // 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');
-          }
+            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 })
+              });
+            }
 
-          const okCount = checks.filter(c => c.ok).length;
-          report = { score: `${okCount}/${checks.length}`, checks };
+            // 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);
+              }
+            }
 
-          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(() => {});
+            // 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(() => {});
+            }
           }
         }
 
-        // 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",
-          });
+        // 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 {
+            flatResult = {
+              success: false,
+              ...baseInfo,
+              viewport: vr.viewport,
+              error: vr.error,
+              diagnostics: vr.diagnostics,
+              hint: vr.hint,
+            };
+          }
+          responseContent.push({ type: "text", text: JSON.stringify(flatResult, null, 2) });
+          if (vr.screenshotBase64) {
+            responseContent.push({ type: "image", data: vr.screenshotBase64, mimeType: "image/png" });
+          }
         }
+
         return { content: responseContent };
       }