bricks-builder-mcp 3.6.4 → 3.7.1

package/README.md

@@ -2,6 +2,8 @@
 
 Serveur **Model Context Protocol (MCP)** qui permet à Claude (Desktop, Cowork, Claude Code) de piloter **Bricks Builder** sur un site WordPress : lister les pages, lire/modifier le JSON Bricks, ajouter ou réorganiser des sections, etc.
 
+💬 **Communauté Discord** : [https://discord.gg/rX22zHRzH](https://discord.gg/rX22zHRzH) — viens discuter Bricks + IA, partager tes builds et signaler des bugs.
+
 ## Architecture
 
 ```

package/package.json

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

package/server.js

@@ -76,6 +76,49 @@ process.on('exit', () => {
     try { _browser.close(); } catch {}
   }
 });
+
+// ===== v3.7.0 — Helpers upload local =====
+// Le MCP server tourne sur la machine user (lancé par Claude Desktop via stdio),
+// donc il a accès direct au filesystem user. Il peut lire les fichiers et les
+// encoder en base64 LOCALEMENT pour les envoyer au plugin sans jamais que les
+// bytes passent dans le contexte de l'AI.
+
+const MIME_BY_EXT = {
+  png: 'image/png',
+  jpg: 'image/jpeg',
+  jpeg: 'image/jpeg',
+  gif: 'image/gif',
+  webp: 'image/webp',
+  svg: 'image/svg+xml',
+  avif: 'image/avif',
+  mp4: 'video/mp4',
+  webm: 'video/webm',
+  mov: 'video/quicktime',
+};
+
+function readLocalFileAsDataUri(localPath) {
+  if (!fs.existsSync(localPath)) {
+    throw new Error(`Fichier introuvable : ${localPath}`);
+  }
+  const stat = fs.statSync(localPath);
+  if (!stat.isFile()) {
+    throw new Error(`Pas un fichier : ${localPath}`);
+  }
+  const ext = (localPath.split('.').pop() || '').toLowerCase();
+  const mime = MIME_BY_EXT[ext];
+  if (!mime) {
+    throw new Error(`Extension non supportée : ${ext} (formats: ${Object.keys(MIME_BY_EXT).join(', ')})`);
+  }
+  const bytes = fs.readFileSync(localPath);
+  const b64 = bytes.toString('base64');
+  return {
+    dataUri: `data:${mime};base64,${b64}`,
+    size: stat.size,
+    mime,
+    ext,
+    basename: localPath.split('/').pop(),
+  };
+}
 process.on('SIGINT', () => {
   if (_browser) {
     try { _browser.close(); } catch {}
@@ -109,8 +152,8 @@ function normaliseColor(s) {
   return s;
 }
 
-// Normaliser les valeurs CSS pour comparaison (rgba/spaces/units/hex)
-function normaliseCssValue(val) {
+// Normaliser les valeurs CSS pour comparaison (rgba/spaces/units/hex/vh)
+function normaliseCssValue(val, viewportContext) {
   if (val == null) return '';
   let s = String(val).trim().toLowerCase();
   s = s.replace(/\s+/g, '');
@@ -126,6 +169,23 @@ function normaliseCssValue(val) {
     return normaliseColor(s);
   }
 
+  // vh / vw → px en fonction du viewport actuel (getComputedStyle renvoie en px)
+  if (viewportContext) {
+    const vhMatch = s.match(/^(\d+(?:\.\d+)?)vh$/);
+    if (vhMatch && viewportContext.height) {
+      return Math.round(parseFloat(vhMatch[1]) * viewportContext.height / 100) + 'px';
+    }
+    const vwMatch = s.match(/^(\d+(?:\.\d+)?)vw$/);
+    if (vwMatch && viewportContext.width) {
+      return Math.round(parseFloat(vwMatch[1]) * viewportContext.width / 100) + 'px';
+    }
+    // svh, dvh, lvh : on assimile à vh pour l'instant (approximatif mais OK pour la plupart des cas)
+    const svhMatch = s.match(/^(\d+(?:\.\d+)?)(?:svh|dvh|lvh)$/);
+    if (svhMatch && viewportContext.height) {
+      return Math.round(parseFloat(svhMatch[1]) * viewportContext.height / 100) + 'px';
+    }
+  }
+
   // Normalise "0px" et "0" et "0%"
   if (s === '0' || s === '0px' || s === '0%') return '0';
   // Si valeur sans unité fournie (ex "32") et getComputedStyle renvoie "32px"
@@ -997,6 +1057,51 @@ mcpServer.setRequestHandler(ListToolsRequestSchema, async () => {
         },
       },
 
+      // ===== v3.7.0 — UPLOAD FROM LOCAL FILESYSTEM =====
+      // Lit le fichier directement sur le disque (le MCP server tourne en local),
+      // encode en base64 LOCALEMENT, et l'envoie au plugin via data URI.
+      // L'AI ne voit JAMAIS les bytes — elle donne juste le path.
+      {
+        name: "upload_local_file",
+        description: "⭐ UPLOAD OPTIMAL pour des fichiers locaux. L'AI donne juste le path, le MCP server lit le fichier en local et l'envoie au plugin. Aucun b64 ne transite par le contexte AI. Param `optimize: true` (recommandé) convertit en WebP qualité 80, redim à 2000px max, et renomme avec extension .webp. Idéal pour SEO + perf web. Retourne {success, id, url, filename, optimization: {originalSize, optimizedSize, savings}}.",
+        inputSchema: {
+          type: "object",
+          properties: {
+            localPath: { type: "string", description: "Chemin absolu du fichier local (ex: /Users/.../jt-assets/logo.png)" },
+            title: { type: "string", description: "Titre WP (sert aussi de nom de fichier slugifié — utilisé pour SEO)" },
+            alt: { type: "string", description: "Texte alternatif (OBLIGATOIRE pour SEO + accessibilité)" },
+            caption: { type: "string", description: "Légende optionnelle" },
+            optimize: { type: "boolean", description: "Convertit en WebP qualité 80, redim à 2000px max. Défaut: true (recommandé)." },
+          },
+          required: ["localPath"],
+        },
+      },
+      {
+        name: "upload_local_files_batch",
+        description: "Upload plusieurs fichiers locaux en 1 appel. Même principe que upload_local_file mais en lot. Continue même si certains échouent. Recommandé pour intégrer un dossier d'assets (logos, photos, etc.) en 1 commande.",
+        inputSchema: {
+          type: "object",
+          properties: {
+            items: {
+              type: "array",
+              description: "Liste des fichiers à uploader",
+              items: {
+                type: "object",
+                properties: {
+                  localPath: { type: "string", description: "Chemin absolu du fichier local" },
+                  title: { type: "string", description: "Titre WP (slugifié pour le nom de fichier)" },
+                  alt: { type: "string", description: "Alt SEO" },
+                  caption: { type: "string", description: "Légende" },
+                },
+                required: ["localPath"],
+              },
+            },
+            optimize: { type: "boolean", description: "Convertit tous en WebP. Défaut: true." },
+          },
+          required: ["items"],
+        },
+      },
+
       // ===== v3.6.0 — UPLOAD MEDIA BATCH =====
       {
         name: "upload_media_batch",
@@ -1436,6 +1541,13 @@ mcpServer.setRequestHandler(CallToolRequestSchema, async (request) => {
         const pageId = args.pageId;
         const elementId = args.elementId;
         const viewport = args.viewport || "desktop";
+        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)
         const info = await callWordPressAPI("/verify-element-info", "POST", { pageId, elementId });
@@ -1581,12 +1693,12 @@ mcpServer.setRequestHandler(CallToolRequestSchema, async (request) => {
             });
           }
 
-          // Compare chaque expected
+          // 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) === normaliseCssValue(expectedVal);
+            const ok = normaliseCssValue(got, viewportContext) === normaliseCssValue(expectedVal, viewportContext);
             const check = { ok, label: `${prop} = ${expectedVal}` };
             if (!ok) {
               check.expected = expectedVal;
@@ -1597,16 +1709,34 @@ mcpServer.setRequestHandler(CallToolRequestSchema, async (request) => {
             checks.push(check);
           }
 
-          // Console errors
-          if (consoleErrors.length > 0) {
+          // 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: `${consoleErrors.length} erreur(s) console`,
-              got: consoleErrors.slice(0, 3),
-              hint: "Vérifie les ressources 404 (font, image, script)",
+              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 console" });
+            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),
+            });
           }
 
           // Overflow horizontal
@@ -1691,9 +1821,65 @@ mcpServer.setRequestHandler(CallToolRequestSchema, async (request) => {
       case "upload_media_batch":
         result = await callWordPressAPI("/upload-media-batch", "POST", {
           items: args.items,
+          optimize: args.optimize,
         });
         break;
 
+      // ===== v3.7.0 — UPLOAD FROM LOCAL FILESYSTEM =====
+      case "upload_local_file": {
+        try {
+          const fileData = readLocalFileAsDataUri(args.localPath);
+          logToFile(`[upload_local_file] ${args.localPath} (${fileData.size} bytes ${fileData.mime})`);
+          // Le b64 est généré ici, dans le MCP server. Il part vers le plugin
+          // mais ne transite JAMAIS par le contexte AI.
+          result = await callWordPressAPI("/upload-media", "POST", {
+            sourceUrl: fileData.dataUri,
+            title: args.title || fileData.basename.replace(/\.[^.]+$/, ''),
+            alt: args.alt,
+            caption: args.caption,
+            optimize: args.optimize !== false, // défaut true
+          });
+        } catch (err) {
+          result = { success: false, error: err.message, localPath: args.localPath };
+        }
+        break;
+      }
+
+      case "upload_local_files_batch": {
+        const batchItems = [];
+        const readErrors = [];
+        for (const item of (args.items || [])) {
+          try {
+            const fileData = readLocalFileAsDataUri(item.localPath);
+            batchItems.push({
+              sourceUrl: fileData.dataUri,
+              title: item.title || fileData.basename.replace(/\.[^.]+$/, ''),
+              alt: item.alt,
+              caption: item.caption,
+            });
+          } catch (err) {
+            readErrors.push({ localPath: item.localPath, error: err.message });
+          }
+        }
+        if (batchItems.length === 0) {
+          result = {
+            success: false,
+            error: "Aucun fichier lisible",
+            readErrors,
+          };
+          break;
+        }
+        result = await callWordPressAPI("/upload-media-batch", "POST", {
+          items: batchItems,
+          optimize: args.optimize !== false, // défaut true
+        });
+        // Joindre les erreurs de lecture locales au résultat
+        if (readErrors.length > 0) {
+          result.localReadErrors = readErrors;
+        }
+        break;
+      }
+
       default:
         console.error(`[LOG] Tool inconnu: ${name}`);
         result = { error: `Tool ${name} not found` };