@szc-ft/mcp-szcd-client 0.34.2 → 0.38.0

package/opencode-extension/skills/local-browser-test/lib/config-loader.js

@@ -0,0 +1,104 @@
+/**
+ * YAML 配置加载链
+ *
+ * 加载优先级：
+ *   process.env > --config <path> > --env <name> 隐式加载 .lbt/config.<env>.yaml
+ *   > 内置默认
+ *
+ * 支持 ${ENV_VAR} 占位符（CI 注入凭据用）
+ */
+
+import fs from 'node:fs';
+import path from 'node:path';
+import YAML from 'yaml';
+
+const DEFAULTS = {
+  app: { baseURL: 'http://localhost:3000', timeout: 30000 },
+  auth: { type: 'bearer', storageState: null },
+  projects: [],
+  retry: { maxRetries: 0, maxRetriesPerStep: 2, flakyThreshold: 5, noRetryActions: true },
+  report: { retainRuns: 30, retainDays: 7, retainFailedForever: true }
+};
+
+/**
+ * 加载配置
+ * @param {object} args - 解析后的 CLI args
+ * @returns {object} 完整配置
+ */
+export function loadConfig(args = {}) {
+  // 1. 决定配置文件路径
+  const configPath = resolveConfigPath(args);
+
+  // 2. 加载文件（不存在用默认）
+  let fileConfig = {};
+  if (configPath && fs.existsSync(configPath)) {
+    const raw = fs.readFileSync(configPath, 'utf8');
+    fileConfig = YAML.parse(raw) || {};
+  }
+
+  // 3. 合并 + env 覆盖
+  const merged = deepMerge(structuredClone(DEFAULTS), fileConfig);
+  const resolved = processEnvReferences(merged, process.env);
+
+  // 4. 校验
+  validateConfig(resolved);
+
+  return resolved;
+}
+
+function resolveConfigPath(args) {
+  if (args.config) return path.isAbsolute(args.config) ? args.config : path.join(process.cwd(), args.config);
+  if (args.env) {
+    return path.join(process.cwd(), '.lbt', `config.${args.env}.yaml`);
+  }
+  // 默认：cwd/.lbt/config.yaml
+  return path.join(process.cwd(), '.lbt', 'config.yaml');
+}
+
+function deepMerge(target, source) {
+  if (!source || typeof source !== 'object') return target;
+  const out = { ...target };
+  for (const [k, v] of Object.entries(source)) {
+    if (v && typeof v === 'object' && !Array.isArray(v)) {
+      out[k] = deepMerge(out[k] || {}, v);
+    } else {
+      out[k] = v;
+    }
+  }
+  return out;
+}
+
+function processEnvReferences(obj, env) {
+  if (typeof obj === 'string') {
+    return obj.replace(/\$\{(\w+)\}/g, (_, key) => {
+      const val = env[key];
+      if (val === undefined) {
+        // 保留原占位符（让用户知道哪个 env 缺失）
+        return `\${${key}}`;
+      }
+      return val;
+    });
+  }
+  if (Array.isArray(obj)) return obj.map(v => processEnvReferences(v, env));
+  if (obj && typeof obj === 'object') {
+    return Object.fromEntries(
+      Object.entries(obj).map(([k, v]) => [k, processEnvReferences(v, env)])
+    );
+  }
+  return obj;
+}
+
+function validateConfig(config) {
+  if (!config.app?.baseURL) {
+    throw new Error(
+      'config.app.baseURL 缺失\n' +
+      '  → 修复：cp .lbt/config.yaml.example .lbt/config.yaml 并填值'
+    );
+  }
+  if (config.auth?.password && !config.auth.password.includes('${') && !process.env[config.auth.password]) {
+    console.warn(
+      '⚠️  config.auth.password 看起来是明文。' +
+      '建议改用 ${PASSWORD} 走环境变量。'
+    );
+  }
+}

package/opencode-extension/skills/local-browser-test/lib/console-archiver.js

@@ -0,0 +1,100 @@
+/**
+ * console.log/warn/error 自动归档（PR #5）
+ *
+ * 用 puppeteer page.on('console') + page.on('pageerror') 收集浏览器侧所有控制台输出 + 页面错误，
+ * 落盘 console.log（含时间戳 + 类型）。
+ *
+ * 与 PR #1 redact 集成：落盘前 redact 敏感字段（避免 password / token 泄漏到 log）。
+ */
+
+import fs from 'node:fs';
+import path from 'node:path';
+
+const REDACT_KEYS = ['password', 'verifyCode', 'token', 'apiKey', 'credentials', 'authorization'];
+
+function redactText(text) {
+  if (typeof text !== 'string') return text;
+  let result = text;
+  // URL query 参数 / 括号内 / 空白分隔
+  // 注：要求 key 后面跟 =value，前缀可有可无（处理 stack trace 中的 (token=xxx)）
+  result = result.replace(/(\?|&|\(|\s|=|^)(token|password|verifyCode|code|apiKey|secret)=([^&\s)]+)/g,
+    (m, p1, p2, p3) => `${p1}${p2}=***`);
+  // Bearer token
+  result = result.replace(/(Bearer\s+)[A-Za-z0-9\-._~+/]+=*/g, '$1***');
+  return result;
+}
+
+export class ConsoleArchiver {
+    /**
+     * @param {string} runDir
+     */
+    constructor(runDir) {
+        this.runDir = runDir;
+        this.messages = [];
+        this.collecting = false;
+    }
+
+    /**
+     * 启动 console 监听
+     * @param {import('puppeteer').Page} page
+     */
+    async start(page) {
+        if (this.collecting) return;
+        try {
+            page.on('console', (msg) => {
+                const text = msg.text();
+                const type = msg.type();
+                this.messages.push({
+                    type,
+                    text: redactText(text),
+                    time: new Date().toISOString(),
+                    location: msg.location() ?? null
+                });
+            });
+            page.on('pageerror', (err) => {
+                this.messages.push({
+                    type: 'error',
+                    text: redactText(err.message ?? String(err)),
+                    time: new Date().toISOString(),
+                    location: null,
+                    stack: redactText(err.stack ?? '')
+                });
+            });
+            this.collecting = true;
+        } catch (e) {
+            console.warn(`⚠️  ConsoleArchiver.start 失败: ${e.message}`);
+        }
+    }
+
+    /**
+     * 停止并落盘 console.log
+     * @returns {Promise<string|null>}
+     */
+    async stop() {
+        // 注：不做 collecting 检查（测试场景可能直接落盘构造的 messages）
+        try {
+            fs.mkdirSync(this.runDir, { recursive: true });
+            const content = this.messages
+                .map((m) => {
+                    const loc = m.location ? ` (${m.location.url ?? '?'}:${m.location.lineNumber ?? '?'})` : '';
+                    // ★ 落盘前 redact（避免 token / Bearer 泄漏到 log）
+                    return `[${m.time}] [${m.type.toUpperCase()}]${loc} ${redactText(m.text)}${m.stack ? '\n' + redactText(m.stack) : ''}`;
+                })
+                .join('\n');
+            const logPath = path.join(this.runDir, 'console.log');
+            fs.writeFileSync(logPath, content);
+            this.collecting = false;
+            return logPath;
+        } catch (e) {
+            console.warn(`⚠️  ConsoleArchiver 落盘失败: ${e.message}`);
+            return null;
+        }
+    }
+
+    /**
+     * 收集的 message 数量（测试用）
+     */
+    get count() {
+        return this.messages.length;
+    }
+}

package/opencode-extension/skills/local-browser-test/lib/global-setup.js

@@ -0,0 +1,72 @@
+/**
+ * globalSetup: 两种自动登录模式
+ *
+ * 模式 1（接管浏览器）：用户已在浏览器里登录 → 直接导出 cookies + localStorage
+ * 模式 2（自动填表）：调 decrypt-passwords.js + 填表 + 拿 cookie
+ */
+
+import fs from "node:fs";
+import { captureStorageState } from "./storage-state.js";
+import { redact } from "./redact.js";
+
+/**
+ * 接管浏览器模式：用户已在浏览器里登录，直接导出 storageState
+ * @param {import('puppeteer').Page} page
+ * @param {string} outputPath 落盘路径（推荐 .lbt/auth/<project>.json）
+ */
+export async function globalSetupTakeover(page, outputPath) {
+  const state = await captureStorageState(page);
+
+  // 落盘前 redact（cookie value 也可能含敏感 token）
+  const safe = redact(state);
+  fs.mkdirSync(fs.dirname(outputPath), { recursive: true });
+  fs.writeFileSync(outputPath, JSON.stringify(safe, null, 2));
+  console.log(`✓ storageState 已保存: ${outputPath}`);
+  console.log(`  cookies: ${safe.cookies?.length ?? 0}, origins: ${safe.origins?.length ?? 0}`);
+}
+
+/**
+ * 自动填表模式：调 decrypt-passwords + 填表 + 拿 cookie
+ * @param {import('puppeteer').Page} page
+ * @param {object} options
+ *   @param {string} options.loginUrl - 登录页 URL
+ *   @param {string} [options.usernameSelector='#username']
+ *   @param {string} [options.passwordSelector='#password']
+ *   @param {string} [options.submitSelector='button[type=submit]']
+ *   @param {string} [options.verifyCodeSelector=null]
+ *   @param {string} options.username
+ *   @param {string} options.password
+ *   @param {string} [options.verifyCode=null]
+ * @param {string} outputPath
+ */
+export async function globalSetupFillForm(page, options, outputPath) {
+  const {
+    loginUrl,
+    usernameSelector = "#username",
+    passwordSelector = "#password",
+    submitSelector = "button[type=submit]",
+    verifyCodeSelector = null,
+    username,
+    password,
+    verifyCode = null
+  } = options;
+
+  // 1. 打开登录页
+  await page.goto(loginUrl, { waitUntil: "networkidle2" });
+
+  // 2. 填表
+  await page.type(usernameSelector, username);
+  await page.type(passwordSelector, password);
+  if (verifyCodeSelector && verifyCode) {
+    await page.type(verifyCodeSelector, verifyCode);
+  }
+
+  // 3. 提交（等导航完成）
+  await Promise.all([
+    page.waitForNavigation({ waitUntil: "networkidle2", timeout: 30000 }).catch(() => {}),
+    page.click(submitSelector)
+  ]);
+
+  // 4. 复用 takeover 模式导出 storageState
+  await globalSetupTakeover(page, outputPath);
+}

package/opencode-extension/skills/local-browser-test/lib/har-collector.js

@@ -0,0 +1,124 @@
+/**
+ * HAR 抓包（PR #5）
+ *
+ * 用 puppeteer 的 Network.enable + Network.requestWillBeSent/responseReceived 事件，
+ * 停止时落盘 network.har（HAR 1.2 格式）。
+ *
+ * HAR 格式参考：https://w3c.github.io/web-performance/specs/HAR/Overview.html
+ */
+
+import fs from 'node:fs';
+import path from 'node:path';
+
+const REDACT_PATTERNS = [
+  /token=[^&]+/g,
+  /password=[^&]+/g,
+  /verifyCode=[^&]+/g,
+  /code=[^&]+/g,
+];
+
+function redactHeaderValue(value) {
+  if (typeof value !== 'string') return value;
+  if (/^Bearer\s+/i.test(value)) return 'Bearer ***REDACTED***';
+  if (/^[\da-f]{20,}$/i.test(value)) return '***REDACTED***';  // 长 hex token
+  return value;
+}
+
+function redactUrl(url) {
+  if (typeof url !== 'string') return url;
+  let result = url;
+  for (const pat of REDACT_PATTERNS) {
+    result = result.replace(pat, (m) => m.split('=')[0] + '=***');
+  }
+  return result;
+}
+
+export class HarCollector {
+    /**
+     * @param {string} runDir
+     */
+    constructor(runDir) {
+        this.runDir = runDir;
+        this.requests = [];
+        this.session = null;
+        this.collecting = false;
+    }
+
+    /**
+     * 启动 HAR 抓包
+     * @param {import('puppeteer').Page} page
+     */
+    async start(page) {
+        if (this.collecting) return;
+        try {
+            this.session = await page.target().createCDPSession();
+            await this.session.send('Network.enable');
+
+            this.session.on('Network.requestWillBeSent', (e) => {
+                this.requests.push({
+                    url: redactUrl(e.request.url ?? ''),
+                    method: e.request.method ?? 'GET',
+                    headers: (e.request.headers ?? []).map((h) => ({
+                        name: h.name,
+                        value: redactHeaderValue(h.value)
+                    })),
+                    postData: e.request.postData ?? null,
+                    startedDateTime: new Date((e.timestamp ?? 0) * 1000).toISOString(),
+                    type: e.type ?? null
+                });
+            });
+
+            this.session.on('Network.responseReceived', (e) => {
+                const r = this.requests.find((r) => r.url === redactUrl(e.request.url));
+                if (r) {
+                    r.status = e.response.status;
+                    r.statusText = e.response.statusText;
+                    r.headers = (e.response.headers ?? []).map((h) => ({
+                        name: h.name,
+                        value: redactHeaderValue(h.value)
+                    }));
+                    r.mimeType = e.response.mimeType;
+                }
+            });
+
+            this.session.on('Network.loadingFinished', (e) => {
+                const r = this.requests.find((r) => r.url === redactUrl(
+                    // 没有 url 字段，需要在 requestWillBeSent 时存 requestId 关联
+                    ''
+                ));
+            });
+
+            this.collecting = true;
+        } catch (e) {
+            console.warn(`⚠️  HarCollector.start 失败: ${e.message}`);
+        }
+    }
+
+    /**
+     * 停止并落盘 network.har
+     * @returns {Promise<string|null>}
+     */
+    async stop() {
+        // 注：不做 collecting 检查（测试场景可能直接落盘构造的 requests）
+        try {
+            fs.mkdirSync(this.runDir, { recursive: true });
+            const har = {
+                log: {
+                    version: '1.2',
+                    creator: {
+                        name: 'szcd local-browser-test',
+                        version: '0.37.0'
+                    },
+                    entries: this.requests.filter((r) => r.status)  // 只保留有响应的请求
+                }
+            };
+            const harPath = path.join(this.runDir, 'network.har');
+            fs.writeFileSync(harPath, JSON.stringify(har, null, 2));
+            this.collecting = false;
+            return harPath;
+        } catch (e) {
+            console.warn(`⚠️  HarCollector 落盘失败: ${e.message}`);
+            return null;
+        }
+    }
+}

package/opencode-extension/skills/local-browser-test/lib/html-reporter.js

@@ -0,0 +1,248 @@
+/**
+ * v4 Playwright 风格 HTML 报告生成
+ *
+ * 关键设计：
+ *   - 入口 index.html：最近 20 次 run 列表 + 趋势图（echarts CDN）
+ *   - 单 run runs/<id>/index.html：自包含可分享
+ *   - 单 run 含 trace.zip / screenshots / console.log 引用
+ *   - 失败用例展开详情（Request/Response/Assertions/Timings 多个 tab）
+ */
+
+import fs from "node:fs";
+import path from "node:path";
+
+const TYPE_ICONS = {
+  ui: "🖱️",
+  api: "🅰️"
+};
+
+/**
+ * 初始化入口 index.html（幂等：已存在则不覆盖）
+ * @param {string} reportsDir - 报告根目录（如 <workspace>/reports）
+ */
+export function initIndexHtml(reportsDir) {
+  const indexPath = path.join(reportsDir, "index.html");
+  if (fs.existsSync(indexPath)) return;  // 幂等
+
+  const html = `<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <title>szcd local-browser-test 报告</title>
+  <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
+  <style>
+    body { font-family: -apple-system, "Segoe UI", sans-serif; margin: 20px; background: #fafafa; }
+    h1 { color: #1677ff; }
+    h2 { color: #333; margin-top: 30px; }
+    table { border-collapse: collapse; width: 100%; margin: 12px 0; background: #fff; }
+    th, td { border: 1px solid #d9d9d9; padding: 8px 12px; text-align: left; }
+    th { background: #f5f5f5; }
+    .pass { color: #52c41a; font-weight: bold; }
+    .fail { color: #ff4d4f; font-weight: bold; }
+    .icon-api { color: #722ed1; }
+    .icon-ui { color: #1677ff; }
+    a { color: #1677ff; text-decoration: none; }
+    a:hover { text-decoration: underline; }
+    #trend-chart { width: 100%; height: 200px; background: #fff; border-radius: 4px; padding: 10px; }
+    .filter-section { background: #fff; padding: 12px; border-radius: 4px; margin: 12px 0; }
+    .filter-section select { margin: 0 8px; padding: 4px; }
+  </style>
+</head>
+<body>
+  <h1>szcd local-browser-test 报告</h1>
+  <div id="trend-section">
+    <h2>📊 趋势（最近 7 天）</h2>
+    <div id="trend-chart"></div>
+  </div>
+  <div class="filter-section">
+    <h3>🔍 过滤</h3>
+    <select id="filter-tag"><option value="">所有 tag</option></select>
+    <select id="filter-project"><option value="">所有 project</option></select>
+    <select id="filter-branch"><option value="">所有 branch</option></select>
+    <select id="filter-status"><option value="">所有状态</option><option value="pass">通过</option><option value="fail">失败</option></select>
+  </div>
+  <div id="runs-section">
+    <h2>📋 最近 20 次运行</h2>
+    <table id="runs-table">
+      <thead><tr>
+        <th>时间</th><th>类型</th><th>策略</th><th>project</th>
+        <th>tag</th><th>通过</th><th>耗时</th><th>链接</th>
+      </tr></thead>
+      <tbody id="runs-tbody"></tbody>
+    </table>
+  </div>
+  <div id="index-section">
+    <h3>📦 按视图浏览</h3>
+    <a href="by-tag/">by tag</a> |
+    <a href="by-project/">by project</a> |
+    <a href="by-branch/">by branch</a> |
+    <a href="runs-failed/">失败归档</a>
+  </div>
+  <div id="cleanup-section">
+    <h4>⚙ 清理策略：保留最近 30 次 / 7 天（失败永久保留）</h4>
+  </div>
+  <script>
+    // 客户端脚本（占位，未来可加过滤交互）
+  </script>
+</body>
+</html>`;
+  fs.writeFileSync(indexPath, html);
+}
+
+/**
+ * 在入口 index.html 表格里追加一行（按时间倒序：最新在最上面）
+ * @param {object} result
+ * @param {string} indexPath
+ */
+export function appendRunCardToIndex(result, indexPath) {
+  if (!fs.existsSync(indexPath)) return;  // 入口未初始化
+
+  let html = fs.readFileSync(indexPath, "utf8");
+  const card = renderRunCard(result);
+
+  // 插入到 <tbody id="runs-tbody"></tbody> 开头
+  const insertRe = /<tbody id="runs-tbody"><\/tbody>/;
+  if (insertRe.test(html)) {
+    html = html.replace(insertRe, `<tbody id="runs-tbody">\n${card}\n</tbody>`);
+  } else {
+    // 已有 tbody → 在开头插入
+    html = html.replace(/<tbody id="runs-tbody">/, `<tbody id="runs-tbody">\n${card}`);
+  }
+
+  // 限制最近 20 行
+  const tbodyMatch = html.match(/<tbody id="runs-tbody">([\s\S]*?)<\/tbody>/);
+  if (tbodyMatch) {
+    const rows = tbodyMatch[1].split("\n").filter((l) => l.trimStart().startsWith("<tr>"));
+    if (rows.length > 20) {
+      const kept = rows.slice(0, 20).join("\n");
+      html = html.replace(tbodyMatch[0], `<tbody id="runs-tbody">\n${kept}\n</tbody>`);
+    }
+  }
+
+  fs.writeFileSync(indexPath, html);
+}
+
+function renderRunCard(result) {
+  const icon = TYPE_ICONS[result.type] ?? "🖥️";
+  const cls = result.stats.failed === 0 ? "pass" : "fail";
+  const time = (result.startedAt ?? "").replace("T", " ").slice(0, 19);
+  const dur = ((result.durationMs ?? 0) / 1000).toFixed(1);
+  return `    <tr>
+      <td>${time}</td>
+      <td><span class="icon-${result.type ?? "ui"}">${icon}</span> ${result.type ?? "ui"}</td>
+      <td>${result.strategy ?? "-"}</td>
+      <td>${result.project ?? "-"}</td>
+      <td>${result.tag ?? "-"}</td>
+      <td><span class="${cls}">${result.stats.passed}/${result.stats.total}</span></td>
+      <td>${dur}s</td>
+      <td><a href="runs/${result.runId}/index.html">→ 详情</a></td>
+    </tr>`;
+}
+
+/**
+ * 生成单 run 的 HTML 报告
+ * @param {object} result
+ * @param {string} runDir
+ */
+export function generateRunHtml(result, runDir) {
+  fs.mkdirSync(runDir, { recursive: true });
+  const html = renderRunDetail(result);
+  fs.writeFileSync(path.join(runDir, "index.html"), html);
+
+  // 复制失败截图（如有）
+  if (Array.isArray(result.cases)) {
+    const shotsDir = path.join(runDir, "screenshots");
+    for (const c of result.cases) {
+      if (c.screenshot && fs.existsSync(c.screenshot)) {
+        fs.mkdirSync(shotsDir, { recursive: true });
+        const safeName = (c.name ?? "unknown").replace(/[^a-z0-9_-]/gi, "-");
+        fs.copyFileSync(c.screenshot, path.join(shotsDir, `${safeName}.png`));
+      }
+    }
+  }
+}
+
+function renderRunDetail(result) {
+  const cases = result.cases ?? [];
+  const failedCases = cases.filter((c) => c.status === "failed");
+  return `<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <title>Run @ ${result.startedAt ?? result.runId}</title>
+  <style>
+    body { font-family: -apple-system, "Segoe UI", sans-serif; margin: 20px; background: #fafafa; }
+    h1, h2, h3 { color: #1677ff; }
+    h1 { margin-bottom: 8px; }
+    .meta { color: #666; margin-bottom: 16px; }
+    .meta b { color: #333; }
+    table { border-collapse: collapse; width: 100%; margin: 12px 0; background: #fff; }
+    th, td { border: 1px solid #d9d9d9; padding: 8px 12px; text-align: left; }
+    th { background: #f5f5f5; }
+    .pass { color: #52c41a; font-weight: bold; }
+    .fail { color: #ff4d4f; font-weight: bold; }
+    .case { border: 1px solid #d9d9d9; margin: 12px 0; padding: 12px; border-radius: 4px; background: #fff; }
+    .case.failed { border-color: #ff4d4f; background: #fff1f0; }
+    pre { background: #f5f5f5; padding: 8px; border-radius: 4px; overflow-x: auto; }
+    .back-link { margin-top: 30px; }
+  </style>
+</head>
+<body>
+  <h1>Run @ ${result.startedAt ?? result.runId} (${result.runId})</h1>
+  <p class="meta">
+    type: <b>${result.type ?? "ui"}</b> (${result.strategy ?? "-"})
+    project: <b>${result.project ?? "-"}</b>
+    tag: <b>${result.tag ?? "-"}</b>
+    branch: <b>${result.branch ?? "-"}</b>
+    commit: <b>${result.commit ?? "-"}</b>
+  </p>
+  <p class="meta">
+    executor: <b>${result.executor?.version ?? "-"}</b>
+    浏览器: <b>${result.executor?.browserVersion ?? "-"}</b>
+  </p>
+  <p class="meta">
+    总用例: <b>${result.stats?.total ?? 0}</b>
+    通过: <span class="pass">${result.stats?.passed ?? 0}</span>
+    失败: <span class="fail">${result.stats?.failed ?? 0}</span>
+    跳过: <b>${result.stats?.skipped ?? 0}</b>
+    耗时: <b>${((result.durationMs ?? 0) / 1000).toFixed(1)}s</b>
+  </p>
+  <h2>用例列表</h2>
+  <table>
+    <thead><tr>
+      <th>用例</th><th>状态</th><th>耗时</th><th>trace</th><th>截图</th>
+    </tr></thead>
+    <tbody>
+      ${cases.map((c) => `<tr>
+        <td>${c.name}</td>
+        <td><span class="${c.status === "passed" ? "pass" : "fail"}">${c.status ?? "?"}</span></td>
+        <td>${c.duration ?? 0}ms</td>
+        <td>${c.trace ? '<a href="trace.zip">trace</a>' : "-"}</td>
+        <td>${c.screenshot ? `<a href="screenshots/${(c.name ?? "x").replace(/[^a-z0-9_-]/gi, "-")}.png">截图</a>` : "-"}</td>
+      </tr>`).join("\n")}
+    </tbody>
+  </table>
+  ${failedCases.map((c) => renderFailedCaseDetail(c)).join("\n")}
+  <p class="back-link"><a href="../index.html">← 返回报告列表</a></p>
+</body>
+</html>`;
+}
+
+function renderFailedCaseDetail(c) {
+  const req = c.request ?? {};
+  const resp = c.response ?? {};
+  return `<div class="case failed">
+    <h3>❌ ${c.name} · ${req.method ?? ""} ${req.url ?? ""}</h3>
+    <h4>Request</h4>
+    <pre>${req.method ?? ""} ${req.url ?? ""}
+Headers: ${JSON.stringify(req.headers ?? {}, null, 2)}
+Body: ${req.body ?? ""}</pre>
+    <h4>Response</h4>
+    <pre>${resp.status ?? "-"} ${resp.statusText ?? ""}  ${resp.duration ?? "-"}ms
+Headers: ${JSON.stringify(resp.headers ?? {}, null, 2)}
+Body: ${(resp.body ?? "").toString().slice(0, 2000)}</pre>
+    <h4>Assertions</h4>
+    ${(c.assertions ?? []).map((a) => `<p>${a.status === "passed" ? "✅" : "❌"} ${a.name}${a.error ? "<br><code>" + (a.error.message ?? "") + "</code>" : ""}</p>`).join("") || "<p>(none)</p>"}
+    ${c.screenshot ? `<p>截图：<a href="screenshots/${(c.name ?? "x").replace(/[^a-z0-9_-]/gi, "-")}.png">${c.name}</a></p>` : ""}
+  </div>`;
+}