server.js

/**
 * PDF Generation Server for XWX AI Chat Exporter
 * 
 * Key Optimizations (2026-02-13):
 * 
 * 1. headless: 'shell' mode (CRITICAL)
 *    - Issue: Puppeteer's new headless mode ('new') causes severe PDF file size inflation
 *             (e.g., 1.27MB images → 9.83MB PDF, nearly 8x larger)
 *    - Solution: Use 'shell' mode instead of 'new' mode
 *    - Result: PDF size reduced to normal (1.27MB images → ~1.5MB PDF)
 *    - Reference: https://github.com/puppeteer/puppeteer/issues/458
 * 
 * 2. Extended image loading timeout (8 seconds)
 *    - Issue: Base64 images need time to decode and render in Chromium
 *             2-second timeout caused 30% of images to fail loading
 *    - Solution: Increased timeout from 2s to 8s for reliable base64 image rendering
 *    - Result: 100% image loading success rate
 * 
 * 3. waitForNetworkIdle after setContent
 *    - Issue: page.setContent() doesn't wait for all resources to stabilize
 *    - Solution: Added waitForNetworkIdle({ idleTime: 500 }) after setContent
 *    - Result: Ensures all base64 images are fully decoded before PDF generation
 */

const express = require('express');
const puppeteer = require('puppeteer');
const cors = require('cors');
const { getHighlighter } = require('shiki');
const fs = require('fs');
const path = require('path');
const os = require('os');
const { BrowserPool } = require('./browser-pool');

let ChartJSNodeCanvas = null;
try {
  ChartJSNodeCanvas = require('chartjs-node-canvas').ChartJSNodeCanvas;
} catch (e) {
  console.log('[WIDGET] chartjs-node-canvas not yet installed, will retry on demand');
}

// ─── Shiki Highlighter Initialization ─────────────────
// Maps frontend codeTheme settings to Shiki theme names
const THEME_MAP = {
  'github': 'github-light',
  'monokai': 'monokai',
  'oneDark': 'one-dark-pro',
};

let shikiHighlighter = null;

async function initShiki() {
  try {
    console.log('[Shiki] Initializing highlighter with bundled languages...');
    shikiHighlighter = await getHighlighter({
      themes: ['github-light', 'monokai', 'one-dark-pro'],
      langs: [
        // Core languages (all included in shiki default bundle)
        'javascript', 'typescript', 'python', 'java', 'c', 'cpp', 'csharp',
        'go', 'rust', 'ruby', 'php', 'swift', 'kotlin', 'sql', 'bash',
        'shell', 'yaml', 'json', 'html', 'xml', 'css', 'scss', 'less',
        'markdown', 'diff', 'dockerfile', 'lua', 'r', 'dart', 'scala',
        // Additional languages
        'perl', 'haskell', 'erlang', 'elixir', 'clojure', 'groovy',
        'objective-c', 'asm', 'powershell', 'makefile', 'cmake',
        'protobuf', 'graphql', 'toml', 'ini', 'git-rebase',
        // Rare languages (verified in shiki default bundle)
        'abap', 'cobol', 'pascal', 'racket', 'latex', 'tex',
        'viml', 'nginx', 'apache', 'vue', 'svelte', 'zig',
        'matlab', 'julia', 'astro',
      ],
    });
    const langs = shikiHighlighter.getLoadedLanguages();
    console.log(`[Shiki] Highlighter ready with ${langs.length} languages: ${langs.slice(0, 20).join(', ')}...`);
  } catch (e) {
    console.error('[Shiki] Failed to initialize:', e.message);
    shikiHighlighter = null;
  }
}

// Pre-highlight code blocks in HTML using Shiki (inline styles)
function highlightHtmlWithShiki(html, themeName = 'github-light') {
  if (!shikiHighlighter) return html;

  const shikiTheme = THEME_MAP[themeName] || 'github-light';

  return html.replace(/<pre([^>]*)><code[^>]*>([\s\S]*?)<\/code><\/pre>/gi, (match, preAttrs, codeText) => {
    // Skip if already has syntax spans (Shiki-style or hljs-style)
    if (/<span/i.test(codeText)) return match;

    // Extract language from class or data attribute
    let lang = '';
    const classMatch = preAttrs.match(/class="[^"]*language-(\w+)/i)
      || preAttrs.match(/data-language="(\w+)"/i);
    if (classMatch) lang = classMatch[1].toLowerCase();

    // Try Shiki highlight
    if (lang && shikiHighlighter.getLoadedLanguages().includes(lang)) {
      try {
        let highlighted = shikiHighlighter.codeToHtml(codeText
          .replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&').replace(/&quot;/g, '"'),
          { lang, theme: shikiTheme }
        );
        // Restore data-language attribute for CSS language label display
        highlighted = highlighted.replace(/<pre\s/, `<pre data-language="${lang}" `);
        return highlighted;
      } catch (e) {
        // Fallback to plain pre
      }
    }

    return match;
  });
}

// Start Shiki initialization (non-blocking)
initShiki().then(() => {
  console.log('[Shiki] Startup initialization complete.');
}).catch(() => {});

const app = express();
const port = process.env.PORT || 7860;
const isTest = process.env.NODE_ENV === 'test';

const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));

// ─── Performance configuration (env overridable) ────────────────────
// PDF_POOL_SIZE: how many Chromium browsers to keep warm. Each browser
//   renders ONE PDF at a time (page.pdf() is CPU-bound), so this is also the
//   max concurrent PDF jobs. Default 4 works well on multi-core; set to 2 for
//   Hugging Face free tier (2 vCPU / 16GB).
// PDF_RECYCLE_AFTER: recycle a browser after N jobs to bound memory growth.
// WIDGET_MAX_CONCURRENT: concurrent widget renders inside the shared widget
//   browser (each widget gets its own page).
const PDF_POOL_SIZE = parseInt(process.env.PDF_POOL_SIZE || '4', 10);
const PDF_RECYCLE_AFTER = parseInt(process.env.PDF_RECYCLE_AFTER || '30', 10);
const PDF_ACQUIRE_TIMEOUT_MS = parseInt(process.env.PDF_ACQUIRE_TIMEOUT_MS || '120000', 10);
const WIDGET_MAX_CONCURRENT = parseInt(process.env.WIDGET_MAX_CONCURRENT || '3', 10);
// 单次 CDP 调用（page.evaluate / screenshot / setContent 等）的最大等待时间。
// 必须小于 render_charts 的 30s 应用级超时，确保挂起操作能及时释放并发槽位。
const WIDGET_CDP_TIMEOUT_MS = parseInt(process.env.WIDGET_CDP_TIMEOUT_MS || '20000', 10);
// 单个 widget 整个渲染流程的硬超时（无论内部卡在哪一步），保证渲染必然在
// 应用级 30s 超时之前结束，并发槽位不会被无限期占用。
const WIDGET_HARD_TIMEOUT_MS = parseInt(process.env.WIDGET_HARD_TIMEOUT_MS || '20000', 10);
// 从 widget 浏览器池获取浏览器的最长等待时间（池满时排队）
const WIDGET_ACQUIRE_TIMEOUT_MS = parseInt(process.env.WIDGET_ACQUIRE_TIMEOUT_MS || '15000', 10);

const PDF_LAUNCH_ARGS = [
  '--no-sandbox',
  '--disable-setuid-sandbox',
  '--disable-dev-shm-usage',
  '--font-render-hinting=none',
  '--disable-gpu',
  '--disable-software-rasterizer',
  '--memory-pressure-off'
];

const PDF_LAUNCH_OPTIONS = {
  executablePath: '/usr/bin/chromium',
  protocolTimeout: 0,
  // Load images served with expired/invalid SSL certificates.
  // Third-party image CDNs (e.g. imgs.sbkko.com) can have certificate issues;
  // the PDF must still render those images the user saw in the conversation.
  acceptInsecureCerts: true,
  args: PDF_LAUNCH_ARGS,
  headless: 'shell'
};

const pdfPool = new BrowserPool({
  name: 'pdf',
  size: PDF_POOL_SIZE,
  launchOptions: PDF_LAUNCH_OPTIONS,
  recycleAfter: PDF_RECYCLE_AFTER,
  acquireTimeoutMs: PDF_ACQUIRE_TIMEOUT_MS,
  log: (msg) => console.log(`[PERF] ${msg}`)
});

// ─── Widget browser pool ───────────────────────────────────────
// 为什么用「池」而不是单例浏览器（v2.1.7 曾改为单例 + 高并发 page）：
// 单例浏览器下多个 widget 同时渲染会争抢同一个浏览器进程的页面主线程
// （Runtime.evaluate / screenshot 实测可挂起 20s+，最严重 231s），单个
// widget 拖慢后占满全局并发队列，导致后续 widget 排队直至 30s 超时级联，
// DOCX 导出因此把图表 fallback 成数据表格。池化后每个 widget 独占一个
// 浏览器（进程级隔离，等同稳定版 v2.0.8 的每 widget 一浏览器），同时保留
// 浏览器复用（避免每次启动 Chromium 的开销）。池大小 = WIDGET_MAX_CONCURRENT。
const WIDGET_LAUNCH_OPTIONS = {
  executablePath: '/usr/bin/chromium',
  // 有限 CDP 超时（而非 PDF 的 0）：池内浏览器被 widget 共享复用，单次 CDP
  // 调用挂起必须在应用级 30s 超时之前抛错并释放浏览器，否则会拖垮整个池。
  protocolTimeout: WIDGET_CDP_TIMEOUT_MS,
  // Same rationale as PDF_LAUNCH_OPTIONS: widget HTML may embed images
  // from third-party CDNs with expired/invalid certificates.
  acceptInsecureCerts: true,
  args: [
    '--no-sandbox',
    '--disable-setuid-sandbox',
    '--disable-dev-shm-usage',
    '--font-render-hinting=none',
    '--disable-gpu',
    '--disable-software-rasterizer',
    '--enable-webgl',
    '--use-gl=angle',
    '--use-angle=swiftshader',
    '--memory-pressure-off'
  ],
  headless: 'shell'
};

const widgetPool = new BrowserPool({
  name: 'widget',
  size: WIDGET_MAX_CONCURRENT,
  launchOptions: WIDGET_LAUNCH_OPTIONS,
  recycleAfter: 100,
  acquireTimeoutMs: WIDGET_ACQUIRE_TIMEOUT_MS,
  log: (msg) => console.log(`[PERF] ${msg}`)
});

console.log(`[PERF] PDF browser pool: size=${PDF_POOL_SIZE}, recycleAfter=${PDF_RECYCLE_AFTER}, widgetConcurrent=${WIDGET_MAX_CONCURRENT}, widgetPoolSize=${WIDGET_MAX_CONCURRENT}`);

app.use(cors());
app.use(express.json({ limit: '50mb' }));

app.get('/', (req, res) => {
  res.send(`Puppeteer PDF Server Running (${isTest ? '测试环境' : '生产环境'})`);
});

app.post('/api/generate_pdf', async (req, res) => {
  const startTime = Date.now();

  // ── 功能性字段（PDF渲染业务逻辑依赖，保持顶层） ──
  const { html, textOnlySizeMB, codeTheme, showWatermark,
          imageCount, totalImageSizeMB, messageCount } = req.body;

  // ── 遥测数据：通用 metadata 对象，后端不做任何解析/格式化，原样透传 ──
  // 新插件：logs 数组预格式化，forEach 透传（后台只追加环境标签）
  // 旧插件：降级输出原始 JSON
  const metadata = req.body.metadata;
  const envText = isTest ? '【测试环境】' : '【生产环境】';
  if (metadata?.logs?.length) {
    console.log(`---------------[PDF-GEN] ${envText} ${metadata.logs[0]}`);
    for (let i = 1; i < metadata.logs.length; i++) console.log(metadata.logs[i]);
  } else {
    console.log(`[PDF-GEN] ${envText} metadata: ${JSON.stringify(metadata)}`);
  }

  const getElapsed = () => ((Date.now() - startTime) / 1000).toFixed(2) + 's';
  let browser = null;
  let acquired = null;   // pooled browser slot (release in finally)
  let page = null;
  let tempFilePath = null;

  try {
    if (!html) {
      return res.status(400).json({ error: 'Missing html content' });
    }

    // ─── Syntax Highlighting Path Selection ───
    // Priority: codeTheme param > HTML detection > Shiki default
    // 1. If codeTheme is sent (new plugin) → always use Shiki
    // 2. If no codeTheme → check for highlight.js script in HTML
    //    - Found → legacy highlight.js path (old plugin)
    //    - Not found → Shiki default (no highlighting in HTML)
    const hasHighlightJsScript = html.includes('highlight.min.js') || html.includes('highlight.full.min.js') || html.includes('hljs.highlightAll');
    let htmlToProcess = html;

    if (codeTheme) {
      console.log(`[PDF-GEN] [${getElapsed()}] codeTheme provided (${codeTheme}), using Shiki`);
      htmlToProcess = highlightHtmlWithShiki(html, codeTheme);
    } else if (hasHighlightJsScript && shikiHighlighter) {
      console.log(`[PDF-GEN] [${getElapsed()}] No codeTheme, detected highlight.js in HTML, using legacy path`);
    } else if (shikiHighlighter) {
      console.log(`[PDF-GEN] [${getElapsed()}] No codeTheme, no highlight.js, using Shiki default`);
      htmlToProcess = highlightHtmlWithShiki(html, 'github');
    }

    const brandText = showWatermark !== false ? 'Powered by XWX AI Chat Exporter' : '';
    const htmlSizeMBNum = Buffer.byteLength(html, 'utf8') / (1024 * 1024);
    const htmlSizeMB = htmlSizeMBNum.toFixed(2);
    const imgCount = imageCount || 0;
    const imgSizeMB = totalImageSizeMB || 0;

    // 使用前端传来的纯文本 HTML 大小（扣除 base64 图片）做时间预估
    // base64 图片不增加 Chromium PDF 引擎的渲染复杂度，benchmark 公式也是基于纯文本校准的
    // 如果前端未提供（旧版本插件），回退到总大小（向后兼容）
    const effectiveSizeMB = textOnlySizeMB != null ? textOnlySizeMB : htmlSizeMBNum;

    console.log(`[PDF-GEN] [${getElapsed()}] 解析请求完成: HTML ${htmlSizeMB} MB (纯文本=${effectiveSizeMB.toFixed(2)} MB), 消息 ${messageCount || 0} 条, 图片 ${imgCount} 张 (${imgSizeMB} MB)`);

    // DEBUG: Count actual images in HTML received
    const htmlImgTagRegex = /<img[^>]+src=["']data:image\/[^"']+/gi;
    const htmlImgTags = htmlToProcess.match(htmlImgTagRegex);
    const htmlImageCount = htmlImgTags ? htmlImgTags.length : 0;
    console.log(`[PDF-IMAGE] HTML contains ${htmlImageCount} <img> tags with data: URLs (frontend reported ${imgCount})`);
    if (htmlImgTags && htmlImgTags.length > 0) {
      // Log src type distribution
      const pngCount = htmlImgTags.filter(t => t.includes('data:image/png')).length;
      const jpegCount = htmlImgTags.filter(t => t.includes('data:image/jpeg') || t.includes('data:image/jpg')).length;
      const gifCount = htmlImgTags.filter(t => t.includes('data:image/gif')).length;
      const svgCount = htmlImgTags.filter(t => t.includes('data:image/svg')).length;
      const webpCount = htmlImgTags.filter(t => t.includes('data:image/webp')).length;
      console.log(`[PDF-IMAGE] Format breakdown: PNG=${pngCount}, JPEG=${jpegCount}, GIF=${gifCount}, SVG=${svgCount}, WebP=${webpCount}`);
    }

    // HTML 大小预警：超过 10 MB 时 Chromium PDF 引擎可能崩溃，但不阻止处理
    // 前端已显示警告提示用户，这里仅记录日志
    // Benchmark 验证：7.01 MB 需要 31 分钟，大文件可能超时
    const MAX_RECOMMENDED_TEXT_HTML_SIZE_MB = 10;
    if (effectiveSizeMB > MAX_RECOMMENDED_TEXT_HTML_SIZE_MB) {
      console.log(`[PDF-GEN] [${getElapsed()}] ⚠️ 大文件预警: 纯文本=${effectiveSizeMB.toFixed(2)} MB，超过推荐上限 ${MAX_RECOMMENDED_TEXT_HTML_SIZE_MB} MB，Chromium PDF 引擎可能超时或崩溃，继续尝试处理`);
    }

    // 移除 <script> 标签防止 Puppeteer 执行阻塞（如 alert() 弹窗会导致 setContent 内部 CDP 调用超时）
    htmlToProcess = htmlToProcess.replace(/<script[\s\S]*?<\/script>/gi, '');
    console.log(`[PDF-GEN] [${getElapsed()}] 已移除 <script> 标签`);

    // 移除所有图片的 loading="lazy" 属性
    // 问题：loading="lazy" 导致视口外的图片在 PDF 中不渲染
    // 解决方案：https://stackoverflow.com/questions/79156691/puppeteersharp-fails-to-display-base64-encoded-images-in-pdf-output
    htmlToProcess = htmlToProcess.replace(/loading=["']lazy["']/gi, '');
    console.log(`[PDF-GEN] [${getElapsed()}] 已移除 loading="lazy" 属性`);

    // 使用处理后的 HTML
    let htmlToUse = htmlToProcess;
    
    // 动态计算超时上限
    // Benchmark 数据揭示 PDF 渲染时间呈三次方增长:
    // 0.82MB→8s, 1.64MB→16s, 3.28MB→85s, 4.92MB→>600s, 7.01MB→>1183s
    // 拟合公式: pdfRenderMs ≈ 10*size³ + 10*size² + 2*size (秒)
    // 使用纯文本大小（扣除 base64 图片），因为图片不增加渲染复杂度
    // 超时 = 2× 安全系数, 上限 1800s (30 min)
    const baseTimeout = 60000;
    const s = effectiveSizeMB;
    const pdfRenderMs = (10000 * s * s * s + 10000 * s * s + 2000 * s); // 预估 PDF 实际渲染时间 (ms)
    const htmlExtraMs = Math.ceil(pdfRenderMs * 2); // 2x 安全系数

    let extraMs = 0;
    if (imgCount <= 30) {
      extraMs = imgCount * 3000;
    } else if (imgCount <= 50) {
      extraMs = 90000 + (imgCount - 30) * 10000;
    } else if (imgCount <= 100) {
      extraMs = 290000 + (imgCount - 50) * 7000;
    } else {
      extraMs = 640000 + (imgCount - 100) * 5600;
    }
    const sizeExtraMs = (imgSizeMB || 0) * 3000;
    const networkTimeout = Math.min(baseTimeout + extraMs + sizeExtraMs + htmlExtraMs, 1200000);

    // 动态计算 setContent 超时上限（setContent 需要解析 HTML + 加载资源）
    const setContentTimeout = Math.min(60000 + extraMs + sizeExtraMs + htmlExtraMs, 3600000);

    // 动态计算截图超时上限
    const screenshotTimeout = Math.min(30000 + (imgCount > 0 ? extraMs / 10 : 0) + htmlExtraMs / 10, 120000);

    // 动态计算 PDF 生成超时上限
    const pdfTimeout = Math.min(120000 + extraMs / 5 + sizeExtraMs / 5 + htmlExtraMs, 3600000);

    console.log(`[PDF-GEN] [${getElapsed()}] 动态超时: setContent=${(setContentTimeout / 1000).toFixed(0)}s, waitForNetworkIdle=${(networkTimeout / 1000).toFixed(0)}s, pdf=${(pdfTimeout / 1000).toFixed(0)}s (HTML=${htmlSizeMB}MB, 纯文本=${effectiveSizeMB.toFixed(2)}MB, 图片=${imgCount}张)`);
    if (effectiveSizeMB > 4) {
      const estMinutes = (pdfTimeout / 60000).toFixed(0);
      console.log(`[PDF-GEN] [${getElapsed()}] ⚠️ 大文件预警: 纯文本=${effectiveSizeMB.toFixed(2)} MB HTML 预计需要 ${estMinutes} 分钟`);
    }
    console.log(`[PDF-GEN] [${getElapsed()}] 正在从浏览器池获取浏览器 (池大小=${PDF_POOL_SIZE})...`);
    // protocolTimeout: 0 = 禁用 CDP 协议层超时
    // 参考: https://github.com/puppeteer/puppeteer/issues/9927
    // PDF 超时时由应用层 Promise.race 控制，不依赖协议层超时
    acquired = await pdfPool.acquire();
    browser = acquired.browser;
    page = await browser.newPage();

    // 兜底：自动关闭 alert/confirm/prompt 对话框，防止 XSS/异常 HTML 卡死 setContent
    // 参考解决方案备忘录 24 (iframe javascript: URL + dialog = Puppeteer 永久阻塞)
    page.on('dialog', async dialog => {
      console.warn(`[PDF-GEN] [${getElapsed()}] Auto-dismissed ${dialog.type()} dialog: ${dialog.message().substring(0, 100)}`);
      try { await dialog.dismiss(); } catch (e) {}
    });

    // 设置 viewport 满足大部分页面渲染需求
    await page.setViewport({ width: 1200, height: 800 });
    console.log(`[PDF-GEN] [${getElapsed()}] Viewport: 1200x800`);

    // 大 HTML (> 5 MB) 使用临时文件法，避免 CDP WebSocket 传输限制
    // 参考: https://danindu.medium.com/optimizing-puppeteer-for-pdf-generation-8b7777edbeca
    const isLargeHtml = htmlSizeMBNum > 5;

    console.log(`[PDF-GEN] [${getElapsed()}] 正在${isLargeHtml ? '通过临时文件加载' : '填充'}页面内容...`);
    // waitUntil 策略：用 'domcontentloaded' 而非 'load'。
    // 原因：'load' 会等待页面所有子资源（含外部图片）加载完成。若某张外部图片
    // 的 CDN 响应挂起（既不成功也不失败，例如证书/网络异常），load 事件永不触发，
    // 导致整个 PDF 请求超时失败。改为 domcontentloaded 后 DOM 就绪即继续，
    // 图片由下方的 per-image 有界等待逻辑兜底，单张慢图不会阻塞整个 PDF。
    if (isLargeHtml) {
      tempFilePath = path.join(os.tmpdir(), `xwx-pdf-${Date.now()}.html`);
      await fs.promises.writeFile(tempFilePath, htmlToUse, 'utf8');
      await page.goto(`file://${tempFilePath}`, {
        waitUntil: 'domcontentloaded',
        timeout: setContentTimeout
      });
    } else {
      await page.setContent(htmlToUse, {
        waitUntil: 'domcontentloaded',
        timeout: setContentTimeout
      });
    }
    // 有界等待网络空闲。图片加载状态由下方 per-image 超时逻辑兜底；
    // 此处超时仅告警不中断，防止挂起的外部资源阻塞整个 PDF 生成。
    try {
      await page.waitForNetworkIdle({ idleTime: 300, timeout: Math.min(networkTimeout, 15000) });
    } catch (e) {
      console.log(`[PDF-GEN] [${getElapsed()}] waitForNetworkIdle 超时（非致命，图片检测将继续）: ${e.message}`);
    }
    console.log(`[PDF-GEN] [${getElapsed()}] 页面内容加载完成`);
    // 等待 base64 图片完全渲染（检测实际加载状态）
    let loadedImages = null;
    if (imgCount > 0) {
      console.log(`[PDF-GEN] [${getElapsed()}] 正在检测 ${imgCount} 张图片加载状态...`);
      
      // 只保留基本的打印颜色调整，不注入可能影响公式的CSS
      await page.addStyleTag({
        content: `body { -webkit-print-color-adjust: exact; }`
      });
      console.log(`[PDF-GEN] [${getElapsed()}] CSS 注入完成`);
      
      loadedImages = await page.evaluate(async () => {
        const images = document.querySelectorAll('img');
        const results = [];
        for (const img of images) {
          const src = img.getAttribute('src') || '';
          const srcPreview = src.substring(0, 80);
          const isBase64 = src.startsWith('data:image/');
          // 对于base64图片，如果src存在且是base64格式，认为已加载（headless模式下complete可能不准确）
          const isLoaded = isBase64 && src.length > 100;
          const status = isLoaded ? (img.naturalWidth > 0 ? 'loaded' : 'loaded-base64') : (img.complete ? (img.naturalWidth > 0 ? 'loaded' : 'error') : 'pending');
          results.push({ src: srcPreview, status, width: img.naturalWidth, isBase64 });
        }
        
        // 外部（非 base64）图片可能有界等待加载完成：
        // - base64 图片随 DOM 同步解码，无需等待（headless shell 模式 complete 也不准确）
        // - 外部图片受 CDN 网络影响，统一等待 onload/onerror，最多 15s 兜底
        // - 这样单张挂起的外部图片不会阻塞整个 PDF（与 waitUntil:'domcontentloaded' 配合）
        const externalImages = Array.from(images).filter(img => {
          const src = img.getAttribute('src') || '';
          return !src.startsWith('data:image/');
        });
        const base64Images = Array.from(images).filter(img => {
          const src = img.getAttribute('src') || '';
          return src.startsWith('data:image/') && src.length > 100;
        });

        if (base64Images.length > 0) {
          console.log(`  检测到 ${base64Images.length} 张base64图片（同步解码，跳过onload等待）`);
        }
        if (externalImages.length > 0) {
          console.log(`  等待 ${externalImages.length} 张外部图片加载（每张最多 15s 兜底）...`);
          await Promise.all(externalImages.map(img => {
            if (img.complete && img.naturalWidth > 0) {
              return Promise.resolve();
            }
            return new Promise(resolve => {
              img.onload = () => { resolve(); };
              img.onerror = () => { resolve(); };
              setTimeout(() => { resolve(); }, 15000);
            });
          }));
        }
        
        const finalResults = [];
        for (const img of images) {
          const src = img.getAttribute('src') || '';
          const isBase64 = src.startsWith('data:image/') && src.length > 100;
          finalResults.push({
            src: src.substring(0, 80),
            complete: isBase64 || img.complete,  // base64图片认为已加载
            width: img.naturalWidth,
            height: img.naturalHeight,
            isBase64
          });
        }
        
        return {
          initial: results,
          final: finalResults,
          total: images.length
        };
      });
      console.log(`[PDF-GEN] [${getElapsed()}] 图片加载结果:`);
      loadedImages.final.forEach((r, i) => {
        const sizeInfo = r.width > 0 ? `${r.width}x${r.height}` : 'pending';
        const statusInfo = r.complete ? (r.width > 0 ? 'OK' : 'OK(base64)') : 'NOT_COMPLETE';
        const srcType = r.isBase64 ? ' (base64)' : (r.src.startsWith('http') ? ' (http)' : '');
        console.log(`  Image ${i}: ${statusInfo}, ${sizeInfo}${srcType} src=${r.src.substring(0, 60)}...`);
      });
      
      // 只对非base64图片检查失败
      const failedImages = loadedImages.final.filter(r => !r.isBase64 && (r.width === 0 || !r.complete));
      if (failedImages.length > 0) {
        console.log(`[PDF-GEN] [${getElapsed()}] ⚠️ 警告: ${failedImages.length} 张非base64图片加载失败`);
      }
      
      // 尝试使用 img.decode() 强制解码验证（根据 GitHub Issue #13726 方案）
      console.log(`[PDF-GEN] [${getElapsed()}] 尝试 img.decode() 强制解码验证...`);
      const decodeResults = await page.evaluate(async () => {
        const images = Array.from(document.querySelectorAll('img'));
        const results = [];
        
        for (const img of images) {
          const src = img.getAttribute('src') || '';
          const isBase64 = src.startsWith('data:image/') && src.length > 100;
          
          if (isBase64 && img.naturalWidth > 0) {
            try {
              await img.decode();
              results.push({ index: results.length, success: true, msg: 'decode OK' });
            } catch (e) {
              results.push({ index: results.length, success: false, msg: 'decode failed: ' + e.message });
            }
          } else {
            results.push({ index: results.length, success: isBase64, msg: isBase64 ? 'no naturalWidth' : 'not base64' });
          }
        }
        
        return results;
      });
      
      decodeResults.forEach((r, i) => {
        console.log(`  Image ${i}: decode=${r.success ? 'OK' : 'FAIL'} (${r.msg})`);
      });
      
      // 根据 GitHub Issue #10341：截图可以强制触发渲染流水线
      console.log(`[PDF-GEN] [${getElapsed()}] 截图强制渲染（Issue #10341 workaround）...`);
      await page.screenshot({ type: 'png', timeout: screenshotTimeout });
      console.log(`[PDF-GEN] [${getElapsed()}] 截图完成`);
    } else {
      console.log(`[PDF-GEN] [${getElapsed()}] 无图片，等待 DOM 稳定...`);
      await delay(200);
    }

    console.log(`[PDF-GEN] [${getElapsed()}] 正在生成 PDF 二进制流...`);

    // timeout: 0 = 禁用 page.pdf() 内部超时（默认 30s）
    // 参考: https://stackoverflow.com/questions/69436420
    // 应用层用 Promise.race 做超时控制
    const pdfPromise = page.pdf({
      format: 'A4',
      printBackground: true,
      preferCSSPageSize: true,
      displayHeaderFooter: true,
      headerTemplate: '<div></div>',
      footerTemplate: `
        <div style="font-size: 10px; font-family: Arial, sans-serif; color: #999; width: 100%; padding: 0 15mm; display: flex; justify-content: space-between; align-items: center;">
            <div style="flex: 1; text-align: left;">${brandText}</div>
            <div style="flex: 1; text-align: right;"><span class="pageNumber"></span> / <span class="totalPages"></span></div>
        </div>
      `,
      margin: {
        top: '10mm',
        bottom: '20mm',
        left: '10mm',
        right: '10mm'
      },
      timeout: 0
    });

    const timeoutPromise = new Promise((_, reject) => {
      setTimeout(() => reject(new Error(`PDF 生成超时 (${(pdfTimeout / 1000).toFixed(0)}s)`)), pdfTimeout);
    });

    const pdfBuffer = await Promise.race([pdfPromise, timeoutPromise]);

    // 清理临时文件
    if (tempFilePath) {
      try { await fs.promises.unlink(tempFilePath); } catch (e) {}
      console.log(`[PDF-GEN] [${getElapsed()}] 已清理临时文件`);
    }

    const pdfSizeMB = (pdfBuffer.length / 1024 / 1024).toFixed(2);
    console.log(`[PDF-GEN] [${getElapsed()}] PDF 生成成功 (${pdfSizeMB} MB)，正在释放浏览器回池...`);

    // Pass image loading summary as response header for frontend debugging
    if (loadedImages && loadedImages.final) {
      const imgSummary = loadedImages.final.map((r, i) => `${r.isBase64 ? 'base64' : 'http'}:${r.width}x${r.height}`).join('|');
      res.setHeader('X-Image-Status', imgSummary.substring(0, 8000));
      res.setHeader('X-Image-Count', String(loadedImages.final.length));
    }

    // 关闭 page + 释放浏览器回池（发送响应前完成，尽早释放 CPU/内存）
    if (page) {
      try { await page.close(); } catch (e) {}
      page = null;
    }
    if (acquired) {
      if (typeof acquired.release === 'function') {
        try { await acquired.release(); } catch (e) {}
      } else {
        console.error(`[PDF-GEN] [${getElapsed()}] BUG: acquired slot has no release() method — pool will leak!`);
      }
      acquired = null;
    }
    browser = null;

    console.log(`[PDF-GEN] [${getElapsed()}] >>> 任务全部完成 <<<`);

    res.setHeader('Content-Type', 'application/pdf');
    res.setHeader('Content-Disposition', 'attachment; filename=export.pdf');
    // page.pdf() 返回 Uint8Array（非 Buffer）。Express 的 res.send() 只对真正的
    // Buffer 走二进制路径，否则会 JSON 序列化（{"0":37,"1":80,...}）。
    // 必须用 Buffer.from() 转换回 Buffer 才能正确返回二进制 PDF。
    res.send(Buffer.from(pdfBuffer));

  } catch (error) {
    console.error(`[PDF-GEN] [${getElapsed()}] 发生错误:`, error);
    // 释放池化浏览器（关闭 page 后归还/回收），避免资源泄漏
    if (page) {
      try { await page.close(); } catch (e) {}
      page = null;
    }
    if (acquired) {
      if (typeof acquired.release === 'function') {
        try { await acquired.release(); } catch (e) {}
      } else {
        console.error(`[PDF-GEN] [${getElapsed()}] BUG: acquired slot has no release() method — pool will leak!`);
      }
      acquired = null;
    }
    browser = null;
    // 清理临时文件
    if (tempFilePath) {
      try { await fs.promises.unlink(tempFilePath); } catch (e) {}
    }
    res.status(500).json({ error: 'Internal Server Error', details: error.message });
  }
});

// ─── Widget Renderer Class ───────────────────────────────────

class WidgetRenderer {
  constructor() {
    this._chartInstances = new Map();
  }

  /**
   * 从 widget 浏览器池获取一个空闲浏览器（进程级隔离，等价稳定版每 widget
   * 一个浏览器），返回 { browser, release }。调用方必须在 finally 中 release。
   * 池满时排队，等待上限 WIDGET_ACQUIRE_TIMEOUT_MS。
   */
  async acquireWidgetBrowser() {
    return widgetPool.acquire();
  }

  _getChartInstance(width, height) {
    const key = `${width}x${height}`;
    if (!this._chartInstances.has(key)) {
      let Ctor = ChartJSNodeCanvas;
      if (!Ctor) {
        ChartJSNodeCanvas = require('chartjs-node-canvas').ChartJSNodeCanvas;
        Ctor = ChartJSNodeCanvas;
      }
      this._chartInstances.set(key, new Ctor({ width, height, backgroundColour: '#ffffff' }));
    }
    return this._chartInstances.get(key);
  }

  async renderChart(widgetHtml, title) {
    // ─── Chart.js 渲染统一使用 Puppeteer ─────────────────────
    // 原因: chartjs-node-canvas 方案需要复杂的JS解析(extractChartConfig)，
    // 容易引入颜色/样式差异，且无法执行 widget_code 中的自定义CSS/后处理。
    //
    // 新方案: 将完整 widget_code 交给 renderWidgetPuppeteer()，
    // 在 Chromium 中执行原始 HTML+JS+Chart.js CDN，保留所有自定义样式。
    // 这样 PDF/DOCX 中的图表与 Claude 网页渲染结果完全一致。
    console.log(`[WIDGET] renderChart: delegating to Puppeteer (full widget_code execution), title=${title}, codeLen=${widgetHtml.length}`);
    return this.renderWidgetPuppeteer(widgetHtml, 'chart', title, 5000);
  }

  // NOTE: extractChartConfig() and _getChartInstance() are kept for potential
  // future use but no longer called — all Chart.js rendering now goes through
  // renderWidgetPuppeteer() (unified Puppeteer approach per doc 26).
  extractChartConfig(widgetHtml) {
    console.log(`[WIDGET] extractChartConfig: widgetHtml length=${widgetHtml.length}`);
    const containerMatch = widgetHtml.match(/<div[^>]*style=["']([^"']*?)["']/);
    let width = 650, height = 300;

    let widthSource = 'default';
    let heightSource = 'default';

    if (containerMatch) {
      const w = containerMatch[1].match(/width:\s*(\d+)px/);
      const wPct = containerMatch[1].match(/width:\s*100%/);
      const h = containerMatch[1].match(/height:\s*(\d+)px/);
      if (w) {
        width = parseInt(w[1]);
        widthSource = `${width}px`;
      } else if (wPct) {
        width = 650;
        widthSource = '100%→650px(bubble-width)';
      }
      if (h) {
        height = parseInt(h[1]);
        heightSource = `${height}px`;
      }
    }

    console.log(`[WIDGET] extractChartConfig: width=${width} (${widthSource}), height=${height} (${heightSource})`);

    let chartFnMatch = widgetHtml.match(/new\s+Chart\s*\([^,]+,\s*(\{)/);
    if (!chartFnMatch) {
      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`);
      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 = 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, '}');

    // 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 = [...]; 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) {
        const inner = s.replace(/<script[^>]*>|<\/script>/gi, '');
        if (inner.trim()) allScriptBlocks.push(inner);
      }
    }
    const fullScript = allScriptBlocks.join('\n');

    // Find all const/let/var declarations using balanced bracket matching for values
    const varDeclarations = [];
    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;
      }

      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);
    });

    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(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) {
      console.log(`[WIDGET] extractChartConfig parse failed (with preamble): ${parseError.message}`);
      // Fallback: try without preamble
      try {
        const chartConfig = new Function('return ' + configStr)();
        console.log(`[WIDGET] extractChartConfig parse OK (without preamble)`);
        return { width, height, chartConfig };
      } catch (e) {
        console.log(`[WIDGET] extractChartConfig parse failed (without preamble): ${e.message}`);
      }
      try {
        const jsonReady = configStr
          .replace(/(\w+)\s*:/g, '"$1":')
          .replace(/'/g, '"');
        const chartConfig = JSON.parse(jsonReady);
        return { width, height, chartConfig };
      } catch (e) {
        console.log(`[WIDGET] extractChartConfig JSON parse failed: ${e.message}`);
        return null;
      }
    }
  }

  async renderMermaid(widgetHtml, title) {
    // ─── Mermaid 渲染统一使用 Puppeteer ─────────────────────
    // 原因: mermaid-cli 方案只提取定义文本后使用硬编码 theme:'default'，
    // 完全丢弃了 widget_code 中的自定义配置 (theme:'base', themeVariables,
    // lineColor, textColor, fontSize, fontFamily, 后处理脚本等)，
    // 导致 PDF 中的 ER 图颜色与 Claude 网页不一致。
    //
    // 新方案: 将完整 widget_code 交给 renderWidgetPuppeteer()，
    // 在 Chromium 中执行原始 HTML+JS，保留所有 mermaid.initialize() 参数、
    // themeVariables、自定义后处理（path→圆角rect）等。
    // 这样 PDF/DOCX 中的图表与 Claude 网页渲染结果完全一致。
    console.log(`[WIDGET] renderMermaid: delegating to Puppeteer (full widget_code execution), title=${title}, codeLen=${widgetHtml.length}`);
    return this.renderWidgetPuppeteer(widgetHtml, 'mermaid', title, 10000);
  }

  // ─── ChatGPT charts_widget_v2 Rendering ─────────────────
  // Uses Puppeteer with Recharts v2.15.4 CDN (v3 SSR is broken).
  // html parameter is JSON string of chart data:
  // { chartType, meta: {title, description}, xKey, yKey, series[], data[] }

  async renderChatGPTChart(dataJson, title) {
    const startTime = Date.now();
    console.log(`[WIDGET] renderChatGPTChart START: title=${title}, dataLen=${dataJson.length}`);

    let chartData;
    try {
      chartData = typeof dataJson === 'string' ? JSON.parse(dataJson) : dataJson;
    } catch (e) {
      console.log(`[WIDGET] renderChatGPTChart FAIL: JSON parse error: ${e.message}`);
      return null;
    }

    const chartType = chartData.chartType || 'bar';
    const series = chartData.series || [];
    const data = chartData.data || [];
    const xKey = chartData.xKey || 'x';
    const nameKey = chartData.nameKey || '';
    const valueKey = chartData.valueKey || '';
    const formattedData = chartData.formattedData || [];
    const axes = chartData.axes || [];
    const meta = chartData.meta || {};
    const chartTitle = meta.title || title || 'Chart';
    const chartDesc = meta.description || '';

    console.log(`[WIDGET] renderChatGPTChart: type=${chartType}, series=${series.length}, rows=${data.length}, xKey=${xKey}, axes=${axes.length}`);

    const html = this.buildChatGPTChartHtml(chartType, series, data, xKey, nameKey, valueKey, formattedData, axes, chartTitle, chartDesc);

    return this._renderFullHtml(html, chartTitle, 8000, chartType);
  }

  /**
   * Render a complete HTML document via Puppeteer (for chatgpt_chart).
   * The HTML already contains full <html>/<head>/<body> with script tags.
   */
  async _renderFullHtml(htmlContent, title, renderTimeout, chartType) {
    // 与 renderWidgetPuppeteer 相同的硬超时包装，防止 CDP 挂起永久占用并发槽位
    const HARD_TIMEOUT_MS = WIDGET_HARD_TIMEOUT_MS;
    let timer = null;
    try {
      const timeoutPromise = new Promise((_, reject) => {
        timer = setTimeout(
          () => reject(new Error(`_renderFullHtml hard timeout after ${HARD_TIMEOUT_MS}ms`)),
          HARD_TIMEOUT_MS
        );
      });
      return await Promise.race([
        this._renderFullHtmlImpl(htmlContent, title, renderTimeout, chartType),
        timeoutPromise,
      ]);
    } catch (e) {
      console.log(`[WIDGET] _renderFullHtml ERROR: ${e.message}`);
      return null;
    } finally {
      clearTimeout(timer);
    }
  }

  async _renderFullHtmlImpl(htmlContent, title, renderTimeout, chartType) {
    const startTime = Date.now();
    console.log(`[WIDGET] _renderFullHtml START: title=${title}, timeout=${renderTimeout}ms, chartType=${chartType}`);

    let page = null;
    let acquired = null;
    try {
      // 从 widget 浏览器池获取浏览器（进程级隔离，避免单例浏览器争抢拖垮并发）
      acquired = await this.acquireWidgetBrowser();
      const browser = acquired.browser;
      page = await browser.newPage();

      // CRITICAL: Use a compact viewport height to avoid excessive whitespace
      // in fullPage screenshots. Width 800 gives enough room for 650px chart.
      await page.setViewport({ width: 800, height: 500 });

      // Set complete HTML document directly
      // 性能优化：'load' 替代 networkidle0（避免 ~2s 额外等待）
      await page.setContent(htmlContent, { waitUntil: 'load', timeout: 15000 });
      await page.waitForNetworkIdle({ idleTime: 300, timeout: 15000 });

      // Wait for React/Recharts to render (check window._widgetRendered flag)
      const rendered = await page.waitForFunction(
        () => window._widgetRendered === true,
        { timeout: renderTimeout }
      ).catch(() => null);

      if (!rendered) {
        console.log(`[WIDGET] _renderFullHtml timeout after ${renderTimeout}ms, trying screenshot anyway`);
        await new Promise(r => setTimeout(r, 1000));
      }

      // Screenshot the widget container for chart rendering
      const container = await page.$('#widget-container');
      let screenshot;
      if (container) {
        screenshot = await container.screenshot({ type: 'png', omitBackground: false });
      } else {
        screenshot = await page.screenshot({ type: 'png', fullPage: true, omitBackground: false });
      }

      const dataUrl = `data:image/png;base64,${screenshot.toString('base64')}`;

      const elapsed = ((Date.now() - startTime) / 1000).toFixed(2);
      console.log(`[WIDGET] _renderFullHtml OK: ${elapsed}s, png=${(screenshot.length / 1024).toFixed(1)}KB`);
      return dataUrl;
    } catch (e) {
      console.log(`[WIDGET] _renderFullHtml ERROR: ${e.message}`);
      return null;
    } finally {
      // 只关闭 page，不关闭浏览器（浏览器归还给池复用）
      if (page) {
        try { await page.close(); } catch (e) {}
      }
      if (acquired && typeof acquired.release === 'function') {
        try { await acquired.release(); } catch (e) {}
      }
    }
  }

  buildChatGPTChartHtml(chartType, series, data, xKey, nameKey, valueKey, formattedData, axes, title, description) {
    // ChatGPT official chart color palette (extracted from live ChatGPT web)
    // ChatGPT official chart color palette (first 4) + D3 schemeCategory10 extended (10 total)
    // D3 schemeCategory10: industry-standard categorical palette, colorblind-friendly
    const COLORS = ['#339CFF', '#40C977', '#FF8549', '#FFD240', '#6366f1', '#ec4899', '#14b8a6', '#f97316', '#8b5cf6', '#06b6d4'];

    // Serialize data safely for inline script
    const dataJson = JSON.stringify(data || [])
      .replace(/<\/script/gi, '<\\/script');
    const seriesJson = JSON.stringify(series || [])
      .replace(/<\/script/gi, '<\\/script');
    const chartTypeJson = JSON.stringify(chartType || 'bar')
      .replace(/<\/script/gi, '<\\/script');
    const titleJson = JSON.stringify(title || '')
      .replace(/<\/script/gi, '<\\/script');
    const descJson = JSON.stringify(description || '')
      .replace(/<\/script/gi, '<\\/script');
    const xKeyJson = JSON.stringify(xKey || 'x')
      .replace(/<\/script/gi, '<\\/script');
    const nameKeyJson = JSON.stringify(nameKey || '')
      .replace(/<\/script/gi, '<\\/script');
    const valueKeyJson = JSON.stringify(valueKey || '')
      .replace(/<\/script/gi, '<\\/script');
    const formattedDataJson = JSON.stringify(formattedData || [])
      .replace(/<\/script/gi, '<\\/script');
    const axesJson = JSON.stringify(axes || [])
      .replace(/<\/script/gi, '<\\/script');

    return `<!DOCTYPE html>
<html><head><meta charset="UTF-8">
<style>
  body { margin: 0; padding: 12px; background: #ffffff; font-family: system-ui, -apple-system, sans-serif; }
  .chart-title { font-size: 16px; font-weight: 600; margin-bottom: 4px; color: #111827; }
  .chart-subtitle { font-size: 12px; color: #6b7280; margin-bottom: 12px; }
  #widget-container { width: 720px; min-height: 300px; }
  /* Widen container to prevent last data point dot from overflowing SVG boundary.
     Recharts plots the last point at the plotting area edge; the dot (r=4-6) extends
     beyond. 720px gives ~70px extra right padding after the Y-axis. */
  .recharts-wrapper { margin: 0 auto; }
</style>
<script src="https://unpkg.com/react@18.2.0/umd/react.production.min.js"><\/script>
<script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js"><\/script>
<script src="https://unpkg.com/react-is@18.2.0/umd/react-is.production.min.js"><\/script>
<script src="https://unpkg.com/prop-types@15.8.1/prop-types.min.js"><\/script>
<script src="https://unpkg.com/recharts@2.12.7/umd/Recharts.js"><\/script>
</head><body>
<div id="widget-container"></div>
<script>
window._widgetRendered = false;
(function() {
  try {
    var chartData = ${dataJson};
    var chartSeries = ${seriesJson};
    var chartTitle = ${titleJson};
    var chartDesc = ${descJson};
    var xKey = ${xKeyJson};
    var chartType = ${chartTypeJson};
    var nameKey = ${nameKeyJson};
    var valueKey = ${valueKeyJson};
    var formattedData = ${formattedDataJson};
    var chartAxes = ${axesJson};

    var COLORS = ${JSON.stringify(COLORS)};

    var rc = Recharts;
    var h = React.createElement;

    // ── Scatter chart: detect x-axis key ──
    var scatterXKey = xKey;
    if (chartType === 'scatter' && chartData.length > 0) {
      var sFirstRow = chartData[0];
      var sKeys = Object.keys(sFirstRow);
      var seriesDataKey = chartSeries[0] ? chartSeries[0].dataKey : null;
      // Find a non-series key for x-axis (prefer non-numeric for category axis)
      for (var si = 0; si < sKeys.length; si++) {
        if (sKeys[si] !== seriesDataKey) {
          scatterXKey = sKeys[si];
          break;
        }
      }
    }

    // ── Universal axis configuration builder ──
    // Uses pre-calculated axis data from API JSON (axes[].ticks[].label)
    // instead of procedural formatting. This is the canonical approach:
    // ChatGPT's AI generates exact tick labels in the API JSON, and we
    // pass them directly to Recharts via the tick prop.

    function buildAxisConfig(axisId) {
      // Find matching axis from chartAxes by id
      var axisConfig = null;
      for (var ai = 0; ai < chartAxes.length; ai++) {
        if (chartAxes[ai].id === axisId) {
          axisConfig = chartAxes[ai];
          break;
        }
      }
      if (!axisConfig) {
        // Fallback: use series-level formatting if no axes data
        var s = chartSeries[0] || {};
        var prefix = s.valuePrefix || '';
        var suffix = s.valueSuffix || '';
        var format = s.valueFormat || 'standard';
        return {
          tickFormatter: function(value) {
            var num = Number(value);
            if (isNaN(num)) return String(value);
            var display;
            if (format === 'compact') {
              if (Math.abs(num) >= 1e9) display = (num / 1e9).toFixed(0) + 'B';
              else if (Math.abs(num) >= 1e6) display = (num / 1e6).toFixed(0) + 'M';
              else if (Math.abs(num) >= 1e3) display = (num / 1e3).toFixed(0) + 'K';
              else display = String(num);
            } else {
              display = String(num);
            }
            return prefix + display + suffix;
          }
        };
      }

      // Build tick lookup map: value → label
      var tickMap = {};
      for (var ti = 0; ti < axisConfig.ticks.length; ti++) {
        tickMap[String(axisConfig.ticks[ti].value)] = axisConfig.ticks[ti].label;
      }
      var tickValues = axisConfig.ticks.map(function(t) { return t.value; });

      return {
        domain: axisConfig.domain || undefined,
        ticks: tickValues,
        tickFormatter: function(value) {
          var key = String(value);
          // Direct lookup for exact match
          if (tickMap[key] !== undefined) return tickMap[key];
          // Fallback: procedural formatting for interpolated values
          var prefix = '';
          var suffix = '';
          var s0 = chartSeries[0] || {};
          prefix = s0.valuePrefix || '';
          suffix = s0.valueSuffix || '';
          var num = Number(value);
          if (isNaN(num)) return String(value);
          if (Math.abs(num) >= 1e9) return prefix + (num / 1e9).toFixed(0) + 'B' + suffix;
          if (Math.abs(num) >= 1e6) return prefix + (num / 1e6).toFixed(0) + 'M' + suffix;
          if (Math.abs(num) >= 1e3) return prefix + (num / 1e3).toFixed(0) + 'K' + suffix;
          return prefix + String(num) + suffix;
        },
        label: axisConfig.label || undefined
      };
    }

    // Build series elements
    var seriesEls = [];
    // Each series may carry additional Recharts props (stackId, radius, type, etc.)
    // that AI could generate. We pass them through to the component props.
    if (chartType === 'bar') {
      chartSeries.forEach(function(s, i) {
        var props = {
          dataKey: s.dataKey,
          name: s.label || s.dataKey,
          fill: s.color || COLORS[i % COLORS.length]
        };
        if (s.stackId !== undefined) props.stackId = s.stackId;
        if (s.radius !== undefined) props.radius = s.radius;
        if (s.barSize !== undefined) props.barSize = s.barSize;
        if (s.maxBarSize !== undefined) props.maxBarSize = s.maxBarSize;
        if (s.stroke !== undefined) props.stroke = s.stroke;
        if (s.strokeWidth !== undefined) props.strokeWidth = s.strokeWidth;
        if (s.unit !== undefined) props.unit = s.unit;
        if (s.label !== undefined) props.label = s.label;
        seriesEls.push(h(rc.Bar, props));
      });
    } else if (chartType === 'line') {
      chartSeries.forEach(function(s, i) {
        var props = {
          type: s.type || 'monotone',
          dataKey: s.dataKey,
          name: s.label || s.dataKey,
          stroke: s.color || COLORS[i % COLORS.length],
          strokeWidth: 2,
          dot: s.dot !== undefined ? s.dot : { r: 4 },
          connectNulls: s.connectNulls !== undefined ? s.connectNulls : true,
          isAnimationActive: false
        };
        if (s.strokeDasharray !== undefined) props.strokeDasharray = s.strokeDasharray;
        if (s.activeDot !== undefined) props.activeDot = s.activeDot;
        if (s.label !== undefined) props.label = s.label;
        if (s.unit !== undefined) props.unit = s.unit;
        if (s.fillOpacity !== undefined) props.fillOpacity = s.fillOpacity;
        seriesEls.push(h(rc.Line, props));
      });
    } else if (chartType === 'area') {
      chartSeries.forEach(function(s, i) {
        var props = {
          type: s.type || 'monotone',
          dataKey: s.dataKey,
          name: s.label || s.dataKey,
          fill: s.color || COLORS[i % COLORS.length],
          stroke: s.color || COLORS[i % COLORS.length],
          strokeWidth: 2,
          connectNulls: s.connectNulls !== undefined ? s.connectNulls : true,
          isAnimationActive: false
        };
        if (s.fillOpacity !== undefined) props.fillOpacity = s.fillOpacity;
        if (s.baseValue !== undefined) props.baseValue = s.baseValue;
        if (s.strokeDasharray !== undefined) props.strokeDasharray = s.strokeDasharray;
        if (s.dot !== undefined) props.dot = s.dot;
        if (s.activeDot !== undefined) props.activeDot = s.activeDot;
        if (s.label !== undefined) props.label = s.label;
        if (s.unit !== undefined) props.unit = s.unit;
        if (s.stackId !== undefined) props.stackId = s.stackId;
        seriesEls.push(h(rc.Area, props));
      });
    } else if (chartType === 'scatter') {
      chartSeries.forEach(function(s, i) {
        var props = {
          name: s.label || s.dataKey,
          dataKey: s.dataKey,
          fill: s.color || COLORS[i % COLORS.length]
        };
        if (s.shape !== undefined) props.shape = s.shape;
        if (s.activeDot !== undefined) props.activeDot = s.activeDot;
        if (s.line !== undefined) props.line = s.line;
        if (s.lineJointType !== undefined) props.lineJointType = s.lineJointType;
        if (s.unit !== undefined) props.unit = s.unit;
        seriesEls.push(h(rc.Scatter, props));
      });
    } else if (chartType === 'pie' || chartType === 'donut') {
      chartSeries.forEach(function(s, i) {
        var actualDataKey = valueKey || s.dataKey || 'value';
        var actualNameKey = nameKey || 'name';

        // Inject fill color into data items (Recharts v2 UMD: Cell children don't work reliably)
        var pieColoredData = chartData.map(function(row, ri) {
          var copy = {};
          for (var _k in row) { copy[_k] = row[_k]; }
          copy.fill = COLORS[ri % COLORS.length];
          return copy;
        });

        // Pie label formatter: use formattedData for display values
        var pieRawToFormatted = {};
        if (chartData && formattedData && chartData.length === formattedData.length) {
          for (var _pi = 0; _pi < chartData.length; _pi++) {
            var _pRaw = chartData[_pi];
            var _pFmt = formattedData[_pi];
            var _pRawVal = _pRaw[actualDataKey];
            if (_pRawVal !== undefined && _pRawVal !== null && _pFmt) {
              pieRawToFormatted[String(_pRawVal)] = {
                name: _pFmt[actualNameKey] || _pRaw[actualNameKey],
                formatted: _pFmt[s.dataKey]
              };
            }
          }
        }

        var labelFormatter = function(entry) {
          var rawVal = String(entry.value);
          var matched = pieRawToFormatted[rawVal];
          if (matched) {
            return matched.name + ' ' + matched.formatted;
          }
          return String(entry.name) + ' ' + entry.value;
        };

        var pieProps = {
          data: pieColoredData,
          dataKey: actualDataKey,
          nameKey: actualNameKey,
          name: s.label || s.dataKey,
          cx: '50%', cy: '50%',
          outerRadius: 100,
          innerRadius: 60,
          isAnimationActive: false,
          label: labelFormatter
        };
        if (s.paddingAngle !== undefined) pieProps.paddingAngle = s.paddingAngle;
        if (s.cornerRadius !== undefined) pieProps.cornerRadius = s.cornerRadius;
        if (s.startAngle !== undefined) pieProps.startAngle = s.startAngle;
        if (s.endAngle !== undefined) pieProps.endAngle = s.endAngle;
        if (s.minAngle !== undefined) pieProps.minAngle = s.minAngle;
        seriesEls.push(h(rc.Pie, pieProps));
      });
    } else if (chartType === 'radar') {
      chartSeries.forEach(function(s, i) {
        var props = {
          dataKey: s.dataKey,
          name: s.label || s.dataKey,
          stroke: s.color || COLORS[i % COLORS.length],
          fill: s.color || COLORS[i % COLORS.length],
          fillOpacity: 0.3
        };
        if (s.dot !== undefined) props.dot = s.dot;
        if (s.activeDot !== undefined) props.activeDot = s.activeDot;
        if (s.strokeWidth !== undefined) props.strokeWidth = s.strokeWidth;
        if (s.unit !== undefined) props.unit = s.unit;
        seriesEls.push(h(rc.Radar, props));
      });
    } else {
      // Fallback: unsupported chart type
      document.getElementById('widget-container').innerHTML = '<div style="padding:20px;color:#666;">Unsupported chart type: ' + chartType + '</div>';
      window._widgetRendered = true;
      return;
    }

    // Select chart component
    var ChartComponent;
    switch (chartType) {
      case 'bar': ChartComponent = rc.BarChart; break;
      case 'line': ChartComponent = rc.LineChart; break;
      case 'area': ChartComponent = rc.AreaChart; break;
      case 'scatter': ChartComponent = rc.ScatterChart; break;
      case 'pie': case 'donut': ChartComponent = rc.PieChart; break;
      case 'radar': ChartComponent = rc.RadarChart; break;
      default: ChartComponent = rc.BarChart;
    }

    var chartProps = { data: chartData, width: 720, height: 300 };
    if (chartType === 'radar') {
      chartProps.cx = '50%';
      chartProps.cy = '50%';
      chartProps.outerRadius = 100;
    } else if (chartType === 'scatter') {
      chartProps.xAxisId = 0;
    }

    var gridEls = [];
    if (chartType !== 'pie' && chartType !== 'donut' && chartType !== 'radar') {
      gridEls.push(h(rc.CartesianGrid, { strokeDasharray: '3 3', key: 'grid' }));
      var axisKey = chartType === 'scatter' ? scatterXKey : xKey;

      // ── XAxis: use axes[].dimension from API JSON ──
      // Find X axis config from axes array by dimension="x"
      var xAxisConfig = null;
      for (var _xi = 0; _xi < chartAxes.length; _xi++) {
        if (chartAxes[_xi].dimension === 'x') {
          xAxisConfig = chartAxes[_xi];
          break;
        }
      }
      var xAxisProps = { dataKey: axisKey, key: 'x' };
      if (xAxisConfig && xAxisConfig.domain) { xAxisProps.domain = xAxisConfig.domain; }
      if (xAxisConfig && xAxisConfig.ticks) {
        var _xTickMap = {};
        for (var _xti = 0; _xti < xAxisConfig.ticks.length; _xti++) {
          _xTickMap[String(xAxisConfig.ticks[_xti].value)] = xAxisConfig.ticks[_xti].label;
        }
        xAxisProps.tickFormatter = function(v) { var k = String(v); return _xTickMap[k] !== undefined ? _xTickMap[k] : String(v); };
      }
      if (xAxisConfig && xAxisConfig.label) { xAxisProps.label = xAxisConfig.label; }
      gridEls.push(h(rc.XAxis, xAxisProps));

      // ── YAxis: use axes[].dimension from API JSON, linked by series[].axisId ──
      var yAxisId = chartSeries[0] ? (chartSeries[0].axisId || null) : null;
      var yAxisConfig = yAxisId ? buildAxisConfig(yAxisId) : buildAxisConfig(null);
      var yAxisProps = { key: 'y', tickFormatter: yAxisConfig.tickFormatter };
      if (yAxisConfig.domain) { yAxisProps.domain = yAxisConfig.domain; }
      if (yAxisConfig.ticks) { yAxisProps.ticks = yAxisConfig.ticks; }
      // Use axes[].label from API JSON for axis title (e.g., "用户数")
      if (yAxisConfig.label) { yAxisProps.label = yAxisConfig.label; }
      gridEls.push(h(rc.YAxis, yAxisProps));
    }
    gridEls.push(h(rc.Tooltip, { key: 'tooltip' }));

    // Legend: for pie/donut charts, use custom payload to show category names
    // instead of the series name ("占比")
    if (chartType === 'pie' || chartType === 'donut') {
      var pieActualNameKey = nameKey || 'name';
      var legendPayload = chartData.map(function(row, i) {
        var fmt = formattedData[i];
        return {
          id: i,
          value: fmt ? (fmt[pieActualNameKey] || row[pieActualNameKey]) : (row[pieActualNameKey] || 'Item'),
          type: 'rect',
          color: COLORS[i % COLORS.length]
        };
      });
      gridEls.push(h(rc.Legend, { key: 'legend', payload: legendPayload }));
    } else {
      gridEls.push(h(rc.Legend, { key: 'legend' }));
    }

    var chart = h(ChartComponent, chartProps,
      gridEls.concat(seriesEls)
    );

    // Use ReactDOM.render for Recharts v2.12.7 compatibility
    // Render chart directly without ResponsiveContainer to avoid coordinate scaling issues
    var el = h('div', {},
      chartTitle && h('div', { className: 'chart-title' }, chartTitle),
      chartDesc && h('div', { className: 'chart-subtitle' }, chartDesc),
      chart
    );
    if (ReactDOM.render) {
      ReactDOM.render(el, document.getElementById('widget-container'));
    } else {
      ReactDOM.createRoot(document.getElementById('widget-container')).render(el);
    }
    window._widgetRendered = true;
  } catch (err) {
    document.getElementById('widget-container').innerHTML = '<div style="padding:20px;color:#c00;">Chart render error: ' + err.message + '</div>';
    window._widgetRendered = true;
  }
})();
<\/script>
</body></html>`;
  }

  async renderWidgetPuppeteer(widgetHtml, type, title, renderTimeout) {
    // 硬超时包装：整个渲染流程必须有界，否则 page 卡死时（页面主线程繁忙、
    // 渲染进程无响应）单个 widget 可能挂起数分钟，永久占用共享并发队列槽位，
    // 导致后续 widget 排队直至 30s 应用级超时、批量级联失败（DOCX 图表因此
    // fallback 成数据表格）。硬超时后立即返回 null（前端优雅降级），并在
    // _renderWidgetPuppeteerImpl 的 finally 中关闭 page 释放资源。
    const HARD_TIMEOUT_MS = WIDGET_HARD_TIMEOUT_MS;
    let timer = null;
    try {
      const timeoutPromise = new Promise((_, reject) => {
        timer = setTimeout(
          () => reject(new Error(`renderPuppeteer hard timeout after ${HARD_TIMEOUT_MS}ms`)),
          HARD_TIMEOUT_MS
        );
      });
      return await Promise.race([
        this._renderWidgetPuppeteerImpl(widgetHtml, type, title, renderTimeout),
        timeoutPromise,
      ]);
    } catch (e) {
      console.log(`[WIDGET] renderPuppeteer ERROR: ${e.message}`);
      return null;
    } finally {
      clearTimeout(timer);
    }
  }

  async _renderWidgetPuppeteerImpl(widgetHtml, type, title, renderTimeout) {
    const startTime = Date.now();
    console.log(`[WIDGET] renderPuppeteer START: type=${type}, title=${title}, timeout=${renderTimeout}ms`);

    let page = null;
    let acquired = null;
    try {
      const finalTimeout = renderTimeout || 3000;

      // 从 widget 浏览器池获取浏览器（进程级隔离，每个 widget 独占一个浏览器，
      // 避免单例浏览器下多个 widget 同时渲染争抢页面主线程导致挂起/级联超时）
      acquired = await this.acquireWidgetBrowser();
      const browser = acquired.browser;

      page = await browser.newPage();
      await page.setViewport({ width: 1024, height: 768 });

      const templatesDir = path.join(__dirname, 'templates');
      let template;
      try {
        template = fs.readFileSync(path.join(templatesDir, 'widget-render.html'), 'utf8');
      } catch (e) {
        console.log(`[WIDGET] renderPuppeteer template not found, using inline fallback`);
        template = `<!DOCTYPE html><html><head><meta charset="UTF-8"><style>body{margin:0;padding:8px;background:#fff;}</style></head><body><div id="widget-container"></div><script>window._widgetRendered=false;<\/script></body></html>`;
      }

      // ── Conditional Mermaid version pinning ──────────────────────────
      // v11 new ER renderer (PR #5965) needs themeVariables: rowEven, rowOdd,
      // nodeBorder.  API JSONs generated before the fix don't include these →
      // colors fall back to purple/blue defaults.  When the API JSON is fixed
      // to include them, we automatically use v11.
      let widgetCode = widgetHtml;
      if (type === 'mermaid' && widgetHtml.includes('mermaid@11')) {
        const ER_VARS = ['rowEven', 'rowOdd', 'nodeBorder'];
        let needsDowngrade = true;
        const tvMatch = widgetHtml.match(/themeVariables\s*:\s*\{([^}]+)\}/);
        if (tvMatch) {
          needsDowngrade = ER_VARS.some(v => !tvMatch[1].includes(v));
        }
        if (needsDowngrade) {
          console.log(`[WIDGET] mermaid v11 missing ER themeVariables (rowEven/rowOdd/nodeBorder), pinning to v10`);
          widgetCode = widgetHtml.replace(/mermaid@11/g, 'mermaid@10');
        } else {
          console.log(`[WIDGET] mermaid v11 has all ER themeVariables, keeping v11`);
        }
      }

      let fullHtml = template
        .replace('%%WIDGET_CODE%%', widgetCode);

      // 性能优化：与 PDF 一致，setContent 用 'load'（避免 networkidle0 的 ~2s 额外等待）
      await page.setContent(fullHtml, { waitUntil: 'load', timeout: 15000 });
      await page.waitForNetworkIdle({ idleTime: 300, timeout: 15000 });

      // 注意：不要在这里把 _widgetRendered 重置为 false。
      // 模板里的信号脚本在 setContent 解析期间（等 Chart.js CDN 阻塞加载完成后）
      // 就执行了 setTimeout(signalDone, 1500)，即 _widgetRendered 通常在 load +
      // networkidle 之后已经是 true。此时再 evaluate 重置为 false，waitForFunction
      // 将永远等不到第二次置 true，只能干等满 finalTimeout(5s) 后超时，白白浪费
      // ~5s/widget，并显著拖慢高并发下的渲染（实测渲染耗时呈 2.5s / 5.6s 双峰）。
      // 模板本身已正确管理该信号，无需也不应重置。

      let renderComplete = false;

      if (type === 'mermaid') {
        // Mermaid uses ES module scripts which run AFTER inline scripts.
        // The _widgetRendered signal fires too early (from inline script at ~500ms),
        // before mermaid.render() completes. Instead, detect the SVG in DOM directly.
        console.log(`[WIDGET] renderPuppeteer: mermaid detected, waiting for SVG in DOM (timeout=30s)...`);
        try {
          await page.waitForFunction(
            () => document.querySelector('#widget-container svg') !== null,
            { timeout: 30000, polling: 1000 }
          );
          console.log(`[WIDGET] renderPuppeteer: SVG detected in DOM`);
          renderComplete = true;
        } catch {
          console.log(`[WIDGET] renderPuppeteer: SVG not found after 30s`);
        }
        // Post-processing (path→round rect) runs synchronously right after render,
        // so a 1s buffer is sufficient.
        await new Promise(r => setTimeout(r, 1000));
      } else {
        const rendered = await page.waitForFunction(
          () => window._widgetRendered === true,
          { timeout: finalTimeout }
        ).catch(() => null);

        if (!rendered) {
          console.log(`[WIDGET] renderPuppeteer _widgetRendered timeout after ${finalTimeout}ms`);
        } else {
          renderComplete = true;
        }

        // Small buffer for any remaining async operations
        await new Promise(r => setTimeout(r, 500));
      }

      const container = await page.$('#widget-container');
      if (!container) {
        console.log(`[WIDGET] renderPuppeteer FAIL: no container found`);
        return null;
      }

      // ─── Mermaid SVG 提取（自然尺寸） ─────────────────────────
      // Mermaid 在 1024px 视口中渲染后，SVG 设置了 width="100%" 和
      // style="max-width: <viewBox宽度>px"，导致 SVG 只占容器的一小部分。
      // 截图 PNG 包含大量空白，在 PDF 中缩放后图表视觉尺寸变小。
      // 修复：提取 SVG 并修复尺寸属性（和旧版 mermaid-cli 方案相同逻辑），
      // 返回 SVG data URL（矢量图），让图表在 PDF 中以自然尺寸显示。
      if (type === 'mermaid' && renderComplete) {
        try {
          const svgResult = await page.evaluate(() => {
            const svg = document.querySelector('#widget-container svg');
            if (!svg) return null;

            const viewBox = svg.getAttribute('viewBox');
            if (!viewBox) return null;

            const parts = viewBox.split(/[\s,]+/).map(Number);
            if (parts.length !== 4 || isNaN(parts[0])) return null;

            const vbWidth = parts[2];
            const vbHeight = parts[3];
            const fixedWidth = Math.ceil(vbWidth) + 2;
            const fixedHeight = Math.ceil(vbHeight) + 2;

            // 记录修复前的属性
            const before = {
              width: svg.getAttribute('width'),
              height: svg.getAttribute('height'),
              style: svg.getAttribute('style'),
              viewBox: viewBox,
            };

            // 修复 SVG 尺寸属性（和旧版 mermaid-cli 方案相同逻辑）
            svg.setAttribute('width', String(fixedWidth));
            svg.setAttribute('height', String(fixedHeight));
            svg.removeAttribute('style');

            // 序列化 SVG
            const serializer = new XMLSerializer();
            let svgStr = serializer.serializeToString(svg);

            // 确保 XML 声明和命名空间
            if (!svgStr.includes('xmlns=')) {
              svgStr = svgStr.replace('<svg', '<svg xmlns="http://www.w3.org/2000/svg"');
            }

            return { svgStr, before, vbWidth, vbHeight, fixedWidth, fixedHeight };
          });

          if (svgResult && svgResult.svgStr) {
            const { before, vbWidth, vbHeight, fixedWidth, fixedHeight } = svgResult;
            console.log(`[WIDGET] Mermaid SVG extracted: viewBox=${vbWidth.toFixed(1)}×${vbHeight.toFixed(1)}, ` +
              `fixed: ${fixedWidth}×${fixedHeight}`);
            console.log(`[WIDGET]   before: width=${before.width}, style=${before.style?.substring(0, 60) || 'none'}`);

            const svgBase64 = Buffer.from(svgResult.svgStr).toString('base64');
            const dataUrl = `data:image/svg+xml;base64,${svgBase64}`;

            console.log(`[WIDGET] renderPuppeteer OK (SVG extract): ${((Date.now() - startTime) / 1000).toFixed(2)}s, svg=${(svgResult.svgStr.length / 1024).toFixed(1)}KB`);
            return dataUrl;
          } else {
            console.log(`[WIDGET] Mermaid SVG extraction failed, falling back to PNG screenshot`);
          }
        } catch (e) {
          console.log(`[WIDGET] Mermaid SVG extraction error: ${e.message}, falling back to PNG screenshot`);
        }
      }

      // ─── 动态视口高度调整（非 Mermaid 或 SVG 提取失败时使用） ───
      // 默认视口高度为 768px，如果 widget 内容超过此高度，
      // 截图会被截断（如高 ER 图、长表格等）。
      // 测量容器实际高度后调整视口，确保完整截图。
      const containerBox = await container.boundingBox();
      if (containerBox && containerBox.height > 768) {
        const newHeight = Math.ceil(containerBox.height) + 64;
        console.log(`[WIDGET] renderPuppeteer: content exceeds viewport (height=${containerBox.height.toFixed(0)}px), adjusting viewport to ${newHeight}px`);
        await page.setViewport({ width: 1024, height: newHeight });
        // Wait for layout recalculation after viewport change
        await new Promise(r => setTimeout(r, 200));
      }

      const finalBox = await container.boundingBox();
      console.log(`[WIDGET] renderPuppeteer: container size = ${finalBox ? `${finalBox.width.toFixed(0)}x${finalBox.height.toFixed(0)}` : 'N/A'}`);

      const screenshot = await container.screenshot({ type: 'png', omitBackground: false });
      const dataUrl = `data:image/png;base64,${screenshot.toString('base64')}`;

      console.log(`[WIDGET] renderPuppeteer OK: ${((Date.now() - startTime) / 1000).toFixed(2)}s, png=${(screenshot.length / 1024).toFixed(1)}KB`);
      return dataUrl;
    } catch (e) {
      console.log(`[WIDGET] renderPuppeteer ERROR: ${e.message}`);
      return null;
    } finally {
      // 只关闭 page，不关闭浏览器（浏览器归还给池复用）
      if (page) {
        try { await page.close(); } catch (e) {}
      }
      if (acquired && typeof acquired.release === 'function') {
        try { await acquired.release(); } catch (e) {}
      }
    }
  }

  async render(widget) {
    const { type, html, title } = widget;
    try {
      switch (type) {
        case 'chart':
          return await this.renderChart(html, title);
        case 'mermaid':
          return await this.renderMermaid(html, title);
        case 'chatgpt_chart':
          return await this.renderChatGPTChart(html, title);
        case 'interactive':
          return await this.renderWidgetPuppeteer(html, 'interactive', title, 3000);
        default:
          return await this.renderWidgetPuppeteer(html, type, title, 2000);
      }
    } catch (e) {
      console.log(`[WIDGET] render FAILED: type=${type}, error=${e.message}`);
      return null;
    }
  }
}

const widgetRenderer = new WidgetRenderer();
const MAX_CONCURRENT_RENDER = WIDGET_MAX_CONCURRENT;
let activeRenderCount = 0;
const renderQueue = [];

/**
 * 限制并发渲染，超出上限时在 renderQueue 中排队。
 * @param {object} widget
 * @param {number} timeoutMs 排队最长时间。超时后从队列移除并 reject，
 *   避免「应用级 30s 超时已返回但渲染仍在队列等待」产生僵尸条目 ——
 *   僵尸条目会一直占用队列位置，导致过载后的后续请求继续排队超时
 *   （实测过载后首个恢复请求仍整批 30s 超时，之后才恢复）。
 */
function renderWithConcurrency(widget, timeoutMs) {
  return new Promise((resolve, reject) => {
    const entry = { widget, resolve, reject, timer: null };
    if (timeoutMs && timeoutMs > 0) {
      entry.timer = setTimeout(() => {
        const i = renderQueue.indexOf(entry);
        if (i !== -1) {
          renderQueue.splice(i, 1);
          reject(new Error('render queue wait timeout'));
        }
        // 已开始执行的 entry 不在队列中，由 renderWidgetPuppeteer 内部
        // 硬超时 + CDP 超时兜底，无需在此处理。
      }, timeoutMs);
    }
    renderQueue.push(entry);
    processRenderQueue();
  });
}

async function processRenderQueue() {
  while (renderQueue.length > 0 && activeRenderCount < MAX_CONCURRENT_RENDER) {
    const entry = renderQueue.shift();
    if (entry.timer) clearTimeout(entry.timer);
    activeRenderCount++;
    try {
      const result = await widgetRenderer.render(entry.widget);
      entry.resolve(result);
    } catch (e) {
      entry.reject(e);
    } finally {
      activeRenderCount--;
      processRenderQueue();
    }
  }
}

// ─── Widget Rendering Endpoint ─────────────────────────────────

app.post('/api/render_charts', async (req, res) => {
  const startTime = Date.now();
  console.log(`\n[WIDGET] ========== render_charts START ==========`);

  const { widgets, theme } = req.body;

  if (!widgets || !Array.isArray(widgets) || widgets.length === 0) {
    return res.status(400).json({ error: 'Missing widgets array' });
  }

  console.log(`[WIDGET] Received ${widgets.length} widgets, theme=${theme || 'light'}`);

  const results = [];
  const renderPromises = widgets.map(async (widget, index) => {
    const wStart = Date.now();
    const wType = widget.type || 'html';
    const wTitle = widget.title || `widget_${index}`;

    console.log(`[WIDGET] [${index + 1}/${widgets.length}] Rendering: type=${wType}, title=${wTitle}`);

    try {
      // Per-widget timeout: mermaid needs extra time for CDN loading + rendering (~15s).
      // Other widgets complete in <5s. Using a generous 60s timeout for all types.
      const widgetTimeout = wType === 'mermaid' ? 60000 : 30000;
      // 排队等待超时同步传入队列，超时即从队列移除，避免僵尸条目阻塞后续请求
      const renderPromise = renderWithConcurrency(widget, widgetTimeout);
      const timeoutPromise = new Promise(resolve => setTimeout(() => resolve(null), widgetTimeout));
      const dataUrl = await Promise.race([renderPromise, timeoutPromise]);

      const elapsed = ((Date.now() - wStart) / 1000).toFixed(2);
      if (dataUrl) {
        console.log(`[WIDGET] [${index + 1}/${widgets.length}] OK: ${elapsed}s, dataUrl_len=${(dataUrl.length / 1024).toFixed(1)}KB`);
        return { index, success: true, dataUrl, type: wType, title: wTitle };
      } else {
        console.log(`[WIDGET] [${index + 1}/${widgets.length}] TIMEOUT: ${elapsed}s`);
        return { index, success: false, error: 'timeout', type: wType, title: wTitle };
      }
    } catch (e) {
      console.log(`[WIDGET] [${index + 1}/${widgets.length}] ERROR: ${e.message}`);
      return { index, success: false, error: e.message, type: wType, title: wTitle };
    }
  });

  const renderResults = await Promise.all(renderPromises);

  const successCount = renderResults.filter(r => r.success).length;
  const failCount = renderResults.filter(r => !r.success).length;
  const totalElapsed = ((Date.now() - startTime) / 1000).toFixed(2);

  console.log(`[WIDGET] ========== render_charts DONE: ${successCount} OK, ${failCount} FAIL, ${totalElapsed}s ==========\n`);

  res.json({ results: renderResults });
});

// ─── Body-parser / JSON 解析错误兜底 ───────────────────────────
// express.json() 解析失败（Content-Type: application/json 但 body 非法）时，
// 会抛 entity.parse.failed 错误。外部探针/扫描器会定期向公开接口发送这类
// 非法 JSON。若不兜底，Express 默认错误处理器会把完整堆栈打到 stdout
// （刷屏 HF LOG）并在响应中暴露技术栈。这里返回干净的 400，不打印堆栈。
app.use((err, req, res, next) => {
  if (err && err.type === 'entity.parse.failed') {
    return res.status(400).json({ error: 'Invalid JSON body' });
  }
  next(err);
});

app.listen(port, () => {
  console.log(`Server listening at http://localhost:${port}`);
});