fix: enhance chart extraction - multi-chart support, ES6 shorthand, and brace-balanced parsing

- Detect multi-chart widgets and route to Puppeteer renderer
- Replace fragile regex with balanced-brace matching for Chart config extraction
- Support Chart.js aliases (C, custom constructors) beyond 'Chart'
- Use balanced bracket matching for variable declarations instead of simple regex
- Filter preamble to only include referenced variables (avoid scope pollution)
- Detect and provide defaults for ES6 shorthand function parameters (e.g. type='pie')
- Add extensive debug logging for chart parsing failures

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

server.js

@@ -478,9 +478,21 @@ class WidgetRenderer {
     const startTime = Date.now();
     console.log(`[WIDGET] renderChart START: title=${title}`);
 
+    const canvasCount = (widgetHtml.match(/<canvas/g) || []).length;
+    const newChartCount = (widgetHtml.match(/new\s+Chart\s*\(/gi) || []).length +
+                           (widgetHtml.match(/new\s+[A-Z]\s*\(/g) || []).length +
+                           (widgetHtml.match(/new\s+C\s*\(/g) || []).length;
+    const isMultiChart = canvasCount > 1 || newChartCount > 1;
+
+    if (isMultiChart) {
+      console.log(`[WIDGET] renderChart: multi-chart detected (canvas=${canvasCount}, newChart=${newChartCount}), using Puppeteer`);
+      return this.renderWidgetPuppeteer(widgetHtml, 'chart', title, 5000);
+    }
+
     const config = this.extractChartConfig(widgetHtml);
     if (!config) {
       console.log(`[WIDGET] renderChart FAIL: no chart config found, falling back`);
+      console.log(`[WIDGET] renderChart DEBUG: widgetHtml length=${widgetHtml.length}, first 500 chars:\n${widgetHtml.substring(0, 500)}`);
       return null;
     }
 
@@ -502,6 +514,7 @@ class WidgetRenderer {
   }
 
   extractChartConfig(widgetHtml) {
+    console.log(`[WIDGET] extractChartConfig: widgetHtml length=${widgetHtml.length}`);
     const containerMatch = widgetHtml.match(/<div[^>]*style=["']([^"']*?)["']/);
     let width = 650, height = 300;
 
@@ -527,22 +540,61 @@ class WidgetRenderer {
 
     console.log(`[WIDGET] extractChartConfig: width=${width} (${widthSource}), height=${height} (${heightSource})`);
 
-    const chartFnMatch = widgetHtml.match(/new\s+Chart\s*\([^,]+,\s*({[\s\S]*})\s*\)\s*;?/);
+    let chartFnMatch = widgetHtml.match(/new\s+Chart\s*\([^,]+,\s*(\{)/);
     if (!chartFnMatch) {
-      console.log(`[WIDGET] extractChartConfig: FAIL — new Chart() pattern not found`);
+      chartFnMatch = widgetHtml.match(/new\s+([A-Z])\s*\([^,]+,\s*(\{)/);
+    }
+    if (!chartFnMatch) {
+      chartFnMatch = widgetHtml.match(/new\s+\w+\s*\([^,]+,\s*(\{)/);
+    }
+    if (!chartFnMatch) {
+      console.log(`[WIDGET] extractChartConfig: FAIL — new Chart() or alias pattern not found`);
+      console.log(`[WIDGET] extractChartConfig: DEBUG widgetHtml (first 800 chars):\n${widgetHtml.substring(0, 800)}`);
+      return null;
+    }
+
+    // Find the start of the config object
+    const configStart = chartFnMatch.index + chartFnMatch[0].length - 1; // position of the opening '{'
+    let depth = 0;
+    let inString = null;
+    let configEnd = -1;
+
+    for (let i = configStart; i < widgetHtml.length; i++) {
+      const ch = widgetHtml[i];
+      if (inString) {
+        if (ch === inString) {
+          // Check for escape character
+          if (i > configStart && widgetHtml[i - 1] === '\\') continue;
+          inString = null;
+        }
+        continue;
+      }
+      if (ch === "'" || ch === '"' || ch === '`') { inString = ch; continue; }
+      if (ch === '{') depth++;
+      else if (ch === '}') {
+        depth--;
+        if (depth === 0) { configEnd = i; break; }
+      }
+    }
+
+    if (configEnd === -1) {
+      console.log(`[WIDGET] extractChartConfig: FAIL — could not find matching closing brace`);
       return null;
     }
 
-    let configStr = chartFnMatch[1];
+    let configStr = widgetHtml.substring(configStart, configEnd + 1);
+
+    // Clean up trailing artifacts (e.g., trailing commas, extra closing parens)
     configStr = configStr.replace(/,\s*\}\s*\)\s*;?\s*$/, '}');
+    configStr = configStr.replace(/,\s*}\s*$/, '}');
 
     configStr = configStr.replace(/\bbackgroundImage\s*:\s*['"`][^'`]*['"`]/g, '');
     configStr = configStr.replace(/,\s*}\)\s*;?$/g, '}');
 
-    // DEBUG: Extract variable declarations from the script to resolve external references
+    // Extract variable declarations from the script to resolve external references
     // Chart.js configs often reference variables defined outside the config object
-    // e.g. const labels = [...]; new Chart(el, { data: { labels, datasets: [{ data }] } });
-    const scriptMatch = widgetHtml.match(/<script[^>]*>([\s\S]*?)<\/script>/g);
+    // e.g. const labels = [...]; const type = 'doughnut'; new Chart(el, { type, data: { labels, datasets: [{ data, ...(type === 'doughnut' ? { cutout: '58%' } : {}) }] } });
+    const scriptMatch = widgetHtml.match(/<script[^>]*>([\s\S]*?)<\/script>/gi);
     const allScriptBlocks = [];
     if (scriptMatch) {
       for (const s of scriptMatch) {
@@ -552,26 +604,116 @@ class WidgetRenderer {
     }
     const fullScript = allScriptBlocks.join('\n');
 
-    // Find all const/let/var declarations in the script
+    // Find all const/let/var declarations using balanced bracket matching for values
     const varDeclarations = [];
-    const varDeclRegex = /\b(?:const|let|var)\s+(\w+)\s*=\s*([\s\S]*?);/g;
-    let varMatch;
-    while ((varMatch = varDeclRegex.exec(fullScript)) !== null) {
-      varDeclarations.push({ name: varMatch[1], value: varMatch[2] });
-    }
-    console.log(`[WIDGET] extractChartConfig DEBUG: Found ${varDeclarations.length} variable declarations: ${varDeclarations.map(v => v.name).join(', ')}`);
+    const varDeclStart = /\b(?:const|let|var)\s+(\w+)\s*=\s*/g;
+    let startMatch;
+    while ((startMatch = varDeclStart.exec(fullScript)) !== null) {
+      const varName = startMatch[1];
+      const valueStart = startMatch.index + startMatch[0].length;
+
+      // Determine the value by matching the first character
+      const firstChar = fullScript[valueStart];
+      let valueEnd = -1;
+
+      if (firstChar === '[' || firstChar === '{') {
+        // Balanced bracket matching for arrays/objects
+        const openChar = firstChar;
+        const closeChar = openChar === '[' ? ']' : '}';
+        let depth = 0;
+        let inStr = null;
+        for (let i = valueStart; i < fullScript.length; i++) {
+          const ch = fullScript[i];
+          if (inStr) {
+            if (ch === inStr && (i === valueStart || fullScript[i - 1] !== '\\')) inStr = null;
+            continue;
+          }
+          if (ch === "'" || ch === '"' || ch === '`') { inStr = ch; continue; }
+          if (ch === openChar) depth++;
+          else if (ch === closeChar) {
+            depth--;
+            if (depth === 0) { valueEnd = i + 1; break; }
+          }
+        }
+      } else if (firstChar === "'" || firstChar === '"' || firstChar === '`') {
+        // String literal
+        const quoteChar = firstChar;
+        for (let i = valueStart + 1; i < fullScript.length; i++) {
+          if (fullScript[i] === quoteChar && fullScript[i - 1] !== '\\') {
+            valueEnd = i + 1;
+            break;
+          }
+        }
+      } else if (/[\d]/.test(firstChar)) {
+        // Numeric literal
+        const numMatch = fullScript.substring(valueStart).match(/^[\d.]+/);
+        if (numMatch) valueEnd = valueStart + numMatch[0].length;
+      }
 
-    // Build a preamble with all variable declarations to resolve external references
-    const preamble = varDeclarations.map(v => `var ${v.name} = ${v.value};`).join('\n');
+      if (valueEnd > valueStart) {
+        varDeclarations.push({ name: varName, value: fullScript.substring(valueStart, valueEnd) });
+      }
+    }
+    console.log(`[WIDGET] extractChartConfig DEBUG: Found ${varDeclarations.length} variable declarations: ${varDeclarations.map(v => `${v.name}=${v.value.substring(0, 30)}${v.value.length > 30 ? '...' : ''}`).join(', ')}`);
+
+    // Build a preamble with ONLY the variables that are actually referenced in the config string
+    // This avoids polluting the scope with unrelated variables
+    const referencedVars = varDeclarations.filter(v => {
+      // Check if the variable name appears as a standalone identifier in the config
+      const refRegex = new RegExp(`(?<![\\w])${v.name}(?![\\w])`);
+      return refRegex.test(configStr);
+    });
 
-    // Find which variables are referenced in the config string
-    const referencedVars = varDeclarations.filter(v => configStr.includes(v.name));
     if (referencedVars.length > 0) {
       console.log(`[WIDGET] extractChartConfig DEBUG: Config references ${referencedVars.length} external variables: ${referencedVars.map(v => v.name).join(', ')}`);
     }
 
+    // Detect ES6 shorthand properties in the config that reference undeclared variables
+    // e.g. { type, data, labels } where 'type' is a function parameter, not a declared variable
+    // The pattern `{ identifier,` or `{ identifier }` means shorthand for `{ identifier: identifier }`
+    const undeclaredVars = new Set();
+    // Look for shorthand patterns: bare identifier used as property key (followed by comma or })
+    // Also check spread conditionals: ...(type === 'doughnut' ? { ... } : {})
+    const spreadRegex = /\.\.\.\s*\(\s*(\w+)\s*===/g;
+    let cMatch;
+    while ((cMatch = spreadRegex.exec(configStr)) !== null) {
+      const varName = cMatch[1];
+      if (!varDeclarations.some(d => d.name === varName)) {
+        undeclaredVars.add(varName);
+      }
+    }
+    // Also check direct shorthand: `{ type,` or `{ type }` at top-level of config
+    // Note: this regex can match inside string literals (e.g. rgba values), so we skip numeric captures
+    const shorthandRegex = /(?:^|[\{,])\s*(\w+)\s*(?=[,}])/gm;
+    let shMatch;
+    while ((shMatch = shorthandRegex.exec(configStr)) !== null) {
+      const varName = shMatch[1];
+      // Skip purely numeric matches (these are from inside string literals like rgba values)
+      if (/^\d+$/.test(varName)) continue;
+      if (varName.length > 1 && varName.length <= 20 && !varDeclarations.some(d => d.name === varName)) {
+        // Verify this is NOT a property key (which would be followed by ':')
+        const pos = shMatch.index + shMatch[0].length;
+        if (pos >= configStr.length || configStr[pos] !== ':') {
+          undeclaredVars.add(varName);
+        }
+      }
+    }
+
+    if (undeclaredVars.size > 0) {
+      console.log(`[WIDGET] extractChartConfig DEBUG: Found ${undeclaredVars.size} undeclared shorthand vars (function params): ${[...undeclaredVars].join(', ')} — providing default values`);
+    }
+
+    const preamble = referencedVars.map(v => `var ${v.name} = ${v.value};`).join('\n');
+    // Add fallback values for undeclared vars (e.g. type='pie' for pie/doughnut charts)
+    const fallbackPreamble = [...undeclaredVars].map(v => {
+      if (v === 'type') return `var ${v} = 'pie';`;
+      return `var ${v} = undefined;`;
+    }).join('\n');
+
+    const fullPreamble = preamble + (fallbackPreamble ? '\n' + fallbackPreamble : '');
+
     try {
-      const chartConfig = new Function(preamble + '\nreturn ' + configStr)();
+      const chartConfig = new Function(fullPreamble + '\nreturn ' + configStr)();
       console.log(`[WIDGET] extractChartConfig DEBUG: Parsed OK — type=${chartConfig.type}, labels=${chartConfig.data?.labels?.length}, datasets=${chartConfig.data?.datasets?.length}`);
       return { width, height, chartConfig };
     } catch (parseError) {