oh-my-knowledge 0.30.0 → 0.32.0

package/dist/src/renderer/skill-detail-renderer.js

@@ -1,1234 +0,0 @@
-/**
- * Skill 详情页 — 问题优先,扁平 1-2 屏。
- *
- *   ┌─ skill 名 + band + 健康摘要一句话 ──────────────┐
- *   │ 关键问题(按受众分组,默认全展开)│ 健康趋势(chart.js 折线)│
- *   │ #1 [高 / Skill] 标题 …          │ ─── 三条线 ──────────  │
- *   │ #2 [高 / Skill] 标题 …          │ 🩺 Doctor 7✓ 1⚠       │
- *   │ #3 [中 / 用例]  标题 …          │ 🧪 Eval   80%         │
- *   │   单条点击 → modal              │ 👁 Observe 稳定        │
- *   │                                 │   阶段卡点击 → modal   │
- *   └────────────────────────────────────────────────────────┘
- *   隐藏 modal:每条 insight 一个 + 3 个阶段全量明细各一个
- */
-import { layout, e, DEFAULT_LANG } from './layout.js';
-const BAND_DOT = {
-    green: '🟢', yellow: '🟡', red: '🔴', gray: '⚪',
-};
-// v6 之前的 insight × audience × 三视角 抽象在 v7 详情页砍掉了,只保留 sample 维度
-// (renderEvalSection 直接读 evalReport.results,不再走 detectInsights / audience 分组)。
-// 相关常量(SEVERITY_ICON / AUDIENCE_INFO_* / PATCH_TARGET_*)等以后做诊断 / 调试 UI
-// 需要时再恢复。
-function relTime(ts, lang) {
-    if (!ts)
-        return lang === 'zh' ? '未跑' : 'never';
-    try {
-        const past = new Date(ts).getTime();
-        const diff = Math.max(0, Date.now() - past);
-        const mins = Math.floor(diff / 60000);
-        if (mins < 60)
-            return lang === 'zh' ? `${mins} 分钟前` : `${mins}m ago`;
-        const hours = Math.floor(mins / 60);
-        if (hours < 24)
-            return lang === 'zh' ? `${hours} 小时前` : `${hours}h ago`;
-        return lang === 'zh' ? `${Math.floor(hours / 24)} 天前` : `${Math.floor(hours / 24)}d ago`;
-    }
-    catch {
-        return '';
-    }
-}
-function fmtDateShort(ts) {
-    if (!ts)
-        return '';
-    try {
-        const d = new Date(ts);
-        return `${String(d.getMonth() + 1).padStart(2, '0')}/${String(d.getDate()).padStart(2, '0')}`;
-    }
-    catch {
-        return '';
-    }
-}
-export function assessHealth(entry, insights, lang) {
-    const ran = [entry.doctor, entry.eval, entry.observe].filter(Boolean).length;
-    if (ran === 0) {
-        return { grade: 'unscored', score: null, label: lang === 'zh' ? '未评估' : 'Unscored', emoji: '⚪', color: 'gray' };
-    }
-    let doctorPct = null;
-    if (entry.doctor) {
-        const total = entry.doctor.passCount + entry.doctor.warnCount + entry.doctor.failCount;
-        doctorPct = total > 0
-            ? ((entry.doctor.passCount + entry.doctor.warnCount * 0.5) / total) * 100
-            : 100;
-    }
-    let evalPct = null;
-    if (entry.eval) {
-        if (entry.eval.compositeScore != null) {
-            evalPct = (entry.eval.compositeScore / 5) * 100;
-        }
-        else {
-            const total = entry.eval.passCount + entry.eval.failCount;
-            if (total > 0)
-                evalPct = (entry.eval.passCount / total) * 100;
-        }
-    }
-    let observePct = null;
-    if (entry.observe) {
-        const coverage = (1 - entry.observe.gapRate) * 100;
-        const bandMul = entry.observe.healthBand === 'red' ? 0.6 : entry.observe.healthBand === 'yellow' ? 0.85 : 1;
-        observePct = coverage * bandMul;
-    }
-    const dims = [doctorPct, evalPct, observePct].filter((x) => x != null);
-    const score = dims.length > 0 ? Math.round(dims.reduce((s, x) => s + x, 0) / dims.length) : null;
-    const hasFail = (entry.doctor != null && entry.doctor.failCount > 0)
-        || (entry.eval != null && entry.eval.failCount > 0)
-        || (entry.observe != null && entry.observe.healthBand === 'red');
-    const hasWarn = (entry.doctor != null && entry.doctor.warnCount > 0)
-        || (entry.eval != null && entry.eval.compositeScore != null && entry.eval.compositeScore < 3.5)
-        || (entry.observe != null && entry.observe.healthBand === 'yellow');
-    const high = insights.filter((i) => i.severity === 'high').length;
-    const med = insights.filter((i) => i.severity === 'medium').length;
-    if (high > 0 || hasFail) {
-        return { grade: 'unhealthy', score, label: lang === 'zh' ? '不健康' : 'Unhealthy', emoji: '🔴', color: 'red' };
-    }
-    if (med > 0 || hasWarn) {
-        return { grade: 'fair', score, label: lang === 'zh' ? '待改进' : 'Fair', emoji: '🟡', color: 'yellow' };
-    }
-    if (insights.length === 0 && !hasWarn) {
-        return { grade: 'excellent', score, label: lang === 'zh' ? '健康' : 'Excellent', emoji: '🟢', color: 'green' };
-    }
-    return { grade: 'good', score, label: lang === 'zh' ? '良好' : 'Good', emoji: '🟢', color: 'green' };
-}
-// ────────── Hero:健康等级 + 名称 + 摘要 ──────────
-function renderHero(entry, insights, lastTs, reportCount, lang) {
-    const h = assessHealth(entry, insights, lang);
-    const scoreTip = lang === 'zh'
-        ? '参考分:doctor 通过率、eval 综合分、observe 稳定度归一到 0-100 后取平均(warn/告警按 0.5 折算)。同一 skill 跨时间可比;不同 skill 之间因 sample 难度不同不严格可比'
-        : 'Reference score: average of doctor pass-rate, eval composite, and observe stability normalized to 0-100. Comparable within a skill over time; not strictly comparable across skills (sample difficulty differs)';
-    const scoreBlock = h.score != null
-        ? `<span class="si-hero-score" title="${e(scoreTip)}"><span class="si-hero-score-num">${h.score}</span><span class="si-hero-score-unit">/100</span></span>`
-        : `<span class="si-hero-score si-hero-score--empty" title="${e(scoreTip)}">—</span>`;
-    return `<div class="si-hero">
-    <div class="si-hero-grade si-hero-grade--${h.color}">
-      <span class="si-hero-grade-emoji">${h.emoji}</span>
-      <span class="si-hero-grade-label">${e(h.label)}</span>
-      ${scoreBlock}
-    </div>
-    <div class="si-hero-info">
-      <div class="si-hero-name">${e(entry.skillName)}</div>
-      <div class="si-hero-summary">${renderHealthSummary(entry, insights, lang)}</div>
-    </div>
-    <div class="si-hero-meta">${reportCount}/3 · ${relTime(lastTs, lang)}</div>
-  </div>`;
-}
-function renderHealthSummary(entry, insights, lang) {
-    const issues = [];
-    if (entry.doctor) {
-        if (entry.doctor.failCount > 0)
-            issues.push(lang === 'zh' ? `doctor ${entry.doctor.failCount} 项不通过` : `doctor ${entry.doctor.failCount} fail`);
-        else if (entry.doctor.warnCount > 0)
-            issues.push(lang === 'zh' ? `doctor ${entry.doctor.warnCount} 项告警` : `doctor ${entry.doctor.warnCount} warn`);
-    }
-    if (entry.eval) {
-        const total = entry.eval.passCount + entry.eval.failCount;
-        if (total > 0) {
-            const pct = Math.round((entry.eval.passCount / total) * 100);
-            if (entry.eval.failCount > 0)
-                issues.push(lang === 'zh' ? `eval 通过率 ${pct}%(${entry.eval.failCount} 条挂)` : `eval ${pct}% pass (${entry.eval.failCount} fail)`);
-        }
-    }
-    if (entry.observe && entry.observe.healthBand !== 'green') {
-        issues.push(lang === 'zh' ? `observe ${BAND_DOT[entry.observe.healthBand]}` : `observe ${BAND_DOT[entry.observe.healthBand]}`);
-    }
-    const high = insights.filter((i) => i.severity === 'high').length;
-    const med = insights.filter((i) => i.severity === 'medium').length;
-    if (high > 0 || med > 0) {
-        const parts = [];
-        if (high > 0)
-            parts.push(lang === 'zh' ? `${high} 个高优` : `${high} high`);
-        if (med > 0)
-            parts.push(lang === 'zh' ? `${med} 个中优` : `${med} medium`);
-        issues.push(lang === 'zh' ? `检出 ${insights.length} 个待优化(${parts.join('，')})` : `${insights.length} issue(s) (${parts.join(', ')})`);
-    }
-    if (issues.length === 0) {
-        const ran = [entry.doctor, entry.eval, entry.observe].filter(Boolean).length;
-        if (ran === 0)
-            return lang === 'zh' ? '尚未运行任何检查' : 'No checks run yet';
-        return lang === 'zh' ? '✅ 三视角全绿，无告警' : '✅ All three views green';
-    }
-    return issues.join(lang === 'zh' ? '，' : ', ');
-}
-function buildTrendData(entry) {
-    const dateMap = new Map();
-    const dateOf = (ts) => ts.slice(0, 10);
-    const get = (date) => {
-        if (!dateMap.has(date)) {
-            dateMap.set(date, { x: date, doctorPct: null, evalPct: null, observePct: null, doctorReportId: null, evalReportId: null, observeAnalysisId: null });
-        }
-        return dateMap.get(date);
-    };
-    for (const h of entry.doctorHistory) {
-        const total = h.passCount + h.warnCount + h.failCount;
-        const d = get(dateOf(h.timestamp));
-        d.doctorPct = total > 0 ? (h.passCount / total) * 100 : null;
-        d.doctorReportId = h.reportId;
-    }
-    for (const h of entry.evalHistory) {
-        const c = h.compositeScore;
-        const d = get(dateOf(h.timestamp));
-        d.evalPct = c != null ? (c / 5) * 100 : null;
-        d.evalReportId = h.reportId;
-    }
-    for (const h of entry.observeHistory) {
-        const d = get(dateOf(h.generatedAt));
-        d.observePct = (1 - h.gapRate) * 100;
-        d.observeAnalysisId = h.analysisId;
-    }
-    return Array.from(dateMap.values()).sort((a, b) => a.x.localeCompare(b.x));
-}
-function renderTrendChart(entry, langQ, lang) {
-    const data = buildTrendData(entry);
-    const labelDoctor = lang === 'zh' ? '🩺 健康度' : '🩺 Structure';
-    const labelEval = lang === 'zh' ? '🧪 评测结果' : '🧪 Test score';
-    const labelObserve = lang === 'zh' ? '👁 线上观测' : '👁 Live stability';
-    if (data.length < 2) {
-        return `<div class="si-trend-empty">${lang === 'zh' ? '📈 还没有足够的历史数据画趋势(至少 2 个时间点)' : '📈 Need at least 2 data points for trend'}</div>`;
-    }
-    const linksDoctor = data.map(() => null);
-    const linksEval = data.map((d) => d.evalReportId ? `/reports/${d.evalReportId}${langQ}` : null);
-    const linksObserve = data.map((d) => d.observeAnalysisId ? `/analyses/${d.observeAnalysisId}${langQ}` : null);
-    const explainDoctor = lang === 'zh' ? 'omk doctor 通过率' : 'omk doctor pass-rate';
-    const explainEval = lang === 'zh' ? 'omk eval 综合分(归一)' : 'omk eval composite (normalized)';
-    const explainObserve = lang === 'zh' ? 'omk observe 真实使用稳定度' : 'omk observe production stability';
-    const json = JSON.stringify({
-        labels: data.map((d) => fmtDateShort(d.x)),
-        datasets: [
-            { label: labelDoctor, data: data.map((d) => d.doctorPct), borderColor: '#5e8252', backgroundColor: 'rgba(94,130,82,.1)', tension: 0.3, spanGaps: true, _hint: explainDoctor },
-            { label: labelEval, data: data.map((d) => d.evalPct), borderColor: '#5a7a93', backgroundColor: 'rgba(90,122,147,.1)', tension: 0.3, spanGaps: true, _hint: explainEval },
-            { label: labelObserve, data: data.map((d) => d.observePct), borderColor: '#b08030', backgroundColor: 'rgba(176,128,48,.1)', tension: 0.3, spanGaps: true, _hint: explainObserve },
-        ],
-    });
-    const links = JSON.stringify([linksDoctor, linksEval, linksObserve]);
-    return `<div class="si-trend-canvas-wrap">
-    <canvas id="trend-chart" data-chart='${json.replace(/'/g, '&#39;')}' data-links='${links.replace(/'/g, '&#39;')}'></canvas>
-  </div>`;
-}
-/** 给一个 insight,从 stageRefs.evalSampleIds + evalReport 拿完整的失败样本详情。
- *  illustration 是 detector 挑出的(最多 2 条)代表性样本,带 prompt/output/工具调用;
- *  diagnostic.expected / actual 是诊断 LLM 写的"期望 vs 实际"对照,用户最想看的。 */
-function renderSampleBody(s, lang) {
-    const block = (icon, label, text, cls = '') => {
-        if (!text || !text.trim())
-            return '';
-        return `<div class="si-sb-block si-sb-block--${cls}">
-      <div class="si-sb-label">${icon} ${e(label)}</div>
-      <div class="si-sb-text">${e(text)}</div>
-    </div>`;
-    };
-    // 拼 suggestion:skill / sample 两段都可能空,只显示有的。
-    // diagnostic LLM 偶尔会输出截断的垃圾(如单字"在"),用最小长度 8 字符过滤。
-    const isMeaningful = (text) => text.trim().length >= 8;
-    const sugParts = [];
-    if (isMeaningful(s.suggestionSkill)) {
-        sugParts.push(`<div class="si-sb-sugrow"><span class="si-sb-sugtag">改 SKILL.md</span><span>${e(s.suggestionSkill)}</span></div>`);
-    }
-    if (isMeaningful(s.suggestionSample)) {
-        sugParts.push(`<div class="si-sb-sugrow"><span class="si-sb-sugtag">改 sample</span><span>${e(s.suggestionSample)}</span></div>`);
-    }
-    const suggestionBlock = sugParts.length > 0
-        ? `<div class="si-sb-block si-sb-block--suggest">
-        <div class="si-sb-label">💡 ${lang === 'zh' ? '建议(针对这条样本)' : 'Suggestion (per-sample)'}</div>
-        <div class="si-sb-text">${sugParts.join('')}</div>
-      </div>`
-        : `<div class="si-sb-block si-sb-block--suggest si-sb-block--empty">
-        <div class="si-sb-label">💡 ${lang === 'zh' ? '建议(针对这条样本)' : 'Suggestion (per-sample)'}</div>
-        <div class="si-sb-text si-sb-empty">${lang === 'zh' ? '诊断 LLM 没给出针对这条样本的建议(可能输出截断或样本本身是诱错样本,无需改动)' : 'Diagnostic LLM did not return a per-sample suggestion'}</div>
-      </div>`;
-    return `<div class="si-sb">
-    ${block('📝', lang === 'zh' ? '用例 prompt' : 'Prompt', s.prompt, 'prompt')}
-    ${block('🎯', lang === 'zh' ? '期望' : 'Expected', s.expected, 'expected')}
-    ${block('⚠️', lang === 'zh' ? '实际' : 'Actual', s.actual, 'actual')}
-    ${suggestionBlock}
-  </div>`;
-}
-/** 失败用例 section v6:默认全折叠,每条 summary 完整展示一行;
- *  点开看 prompt / 期望 / 实际 / per-sample 建议 */
-// ────────── CSS ──────────
-const SKILL_DETAIL_CSS = `
-.si-back { display:inline-block;margin-bottom:8px;color:var(--text-muted);font-size:13px;text-decoration:none }
-.si-back:hover { color:var(--text-primary) }
-
-/* Hero — grade 卡 + 信息块,grid 布局让 grade 卡固定宽度 */
-.si-hero { display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:14px 18px;background:var(--bg-surface);border-radius:8px;box-shadow:var(--shadow-sm);margin:8px 0 14px }
-@media(max-width:640px){ .si-hero { grid-template-columns:auto 1fr;gap:12px } .si-hero-meta { grid-column:1/-1;text-align:right } }
-
-/* 健康等级卡 — 左侧色卡,emoji + 等级 + 参考分纵向堆叠 */
-.si-hero-grade { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:96px;padding:10px 14px;border-radius:8px;background:var(--bg-soft);border-left:4px solid var(--border) }
-.si-hero-grade--green { border-left-color:#5e8252;background:rgba(94,130,82,.08) }
-.si-hero-grade--yellow { border-left-color:#b08030;background:rgba(176,128,48,.08) }
-.si-hero-grade--red { border-left-color:#9c4a3f;background:rgba(156,74,63,.08) }
-.si-hero-grade--gray { border-left-color:var(--border);background:var(--bg-soft) }
-.si-hero-grade-emoji { font-size:20px;line-height:1 }
-.si-hero-grade-label { font-size:13px;font-weight:600;color:var(--text-primary);letter-spacing:0.02em }
-.si-hero-score { font-variant-numeric:tabular-nums;cursor:help;display:flex;align-items:baseline;gap:1px;margin-top:1px }
-.si-hero-score-num { font-size:22px;font-weight:700;line-height:1 }
-.si-hero-grade--green  .si-hero-score-num { color:#5e8252 }
-.si-hero-grade--yellow .si-hero-score-num { color:#b08030 }
-.si-hero-grade--red    .si-hero-score-num { color:#9c4a3f }
-.si-hero-grade--gray   .si-hero-score-num { color:var(--text-muted) }
-.si-hero-score-unit { font-size:11px;color:var(--text-muted);font-weight:500 }
-.si-hero-score--empty { font-size:18px;color:var(--text-muted) }
-
-.si-hero-info { display:flex;flex-direction:column;gap:4px;min-width:0 }
-.si-hero-name { font-size:20px;font-weight:600;color:var(--text-primary);line-height:1.3 }
-.si-hero-summary { color:var(--text-secondary);font-size:13px;line-height:1.5 }
-.si-hero-meta { color:var(--text-muted);font-size:12px;font-variant-numeric:tabular-nums;align-self:center }
-
-/* 主网格:左 6/12 右 6/12,移动端单列 */
-.si-grid { display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start }
-@media(max-width:880px){ .si-grid { grid-template-columns:1fr } }
-
-/* 左栏:问题列表 */
-.si-list { background:var(--bg-surface);border-radius:8px;padding:12px 14px;box-shadow:var(--shadow-sm) }
-
-/* 空态 — 不喊"恭喜",用已有数据证明它健康 + 给可补充的下一步,有视觉重量 */
-.si-empty { display:flex;flex-direction:column;gap:14px;padding:6px 4px }
-.si-empty-h { display:flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(94,130,82,.08);border-left:3px solid #5e8252;border-radius:6px }
-.si-empty-emoji { font-size:22px;line-height:1 }
-.si-empty-title { font-size:14px;font-weight:600;color:var(--text-primary) }
-.si-empty-section-h { font-size:11.5px;font-weight:600;color:var(--text-muted);letter-spacing:0.04em;margin-bottom:6px;text-transform:uppercase }
-.si-empty-list { margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px }
-.si-empty-list li { display:grid;grid-template-columns:18px 1fr;gap:8px;align-items:start;font-size:13px;line-height:1.55;color:var(--text-primary) }
-.si-empty-list code { background:var(--bg-soft);padding:1px 6px;border-radius:3px;font-family:"SF Mono",Menlo,monospace;font-size:11.5px;color:var(--text-primary) }
-.si-empty-icon { font-weight:700;text-align:center }
-.si-empty-list--pass .si-empty-icon { color:#5e8252 }
-.si-empty-list--next .si-empty-icon { color:var(--accent) }
-.si-aud { margin-bottom:12px }
-.si-aud:last-child { margin-bottom:0 }
-.si-aud-h { display:flex;align-items:center;gap:8px;padding:6px 8px;background:var(--bg-soft);border-radius:5px;margin-bottom:6px }
-.si-aud-icon { font-size:14px }
-.si-aud-title { font-size:13px;font-weight:600;color:var(--text-primary) }
-.si-aud-count { padding:1px 7px;border-radius:9px;background:var(--bg-surface);font-size:11px;color:var(--text-secondary);font-weight:600 }
-.si-aud-sub { color:var(--text-muted);font-size:11px;margin-left:auto }
-.si-aud-rows { display:flex;flex-direction:column;gap:3px }
-
-.si-row { all:unset;cursor:pointer;display:grid;grid-template-columns:auto auto 1fr auto auto;gap:8px;align-items:center;padding:8px 10px;border-radius:5px;border:1px solid transparent;transition:border-color .12s,background .12s;text-align:left }
-.si-row:hover { border-color:var(--border-hover);background:var(--bg-soft) }
-.si-row:focus-visible { outline:2px solid var(--accent);outline-offset:1px }
-.si-row-num { font-size:11px;font-weight:700;color:var(--text-muted);font-variant-numeric:tabular-nums;background:var(--bg-soft);padding:1px 6px;border-radius:3px;min-width:28px;text-align:center }
-.si-row-sev { font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:8px;letter-spacing:0.02em }
-.si-row-sev--high { background:rgba(156,74,63,.16);color:#9c4a3f }
-.si-row-sev--medium { background:rgba(176,128,48,.14);color:#b08030 }
-.si-row-sev--low { background:rgba(94,130,82,.16);color:#5e8252 }
-.si-row-title { font-size:13.5px;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
-.si-row-meta { font-size:11px;color:var(--text-muted);font-variant-numeric:tabular-nums }
-.si-row-arrow { color:var(--text-muted);font-size:14px;font-weight:300 }
-.si-row--high { border-left:3px solid #9c4a3f;padding-left:7px }
-
-/* 右栏 */
-.si-right { display:flex;flex-direction:column;gap:12px }
-.si-trend { background:var(--bg-surface);border-radius:8px;padding:14px 16px;box-shadow:var(--shadow-sm) }
-.si-trend-h { display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--text-primary);margin-bottom:8px }
-.si-trend-empty { padding:24px;text-align:center;color:var(--text-muted);font-size:13px;display:flex;align-items:center;justify-content:center;min-height:200px }
-/* chart.js responsive 要求父容器有确定的高度,否则 canvas 会无限拉高(每次 resize 让父元素变大,触发新 resize)。
-   用 position:relative + 固定 height,让 canvas 在内部以 absolute 填充。 */
-.si-trend-canvas-wrap { position:relative;width:100%;height:200px }
-.si-trend-canvas-wrap > canvas { position:absolute;left:0;top:0;width:100% !important;height:100% !important }
-.si-trend-hint { font-size:10.5px;color:var(--text-muted);text-align:center;margin-top:6px;font-style:italic }
-.si-trend-fallback { position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:var(--bg-soft);border-radius:6px;padding:14px;text-align:center }
-.si-trend-fallback-icon { font-size:24px;line-height:1 }
-.si-trend-fallback-msg { font-size:13px;font-weight:600;color:#9c4a3f }
-.si-trend-fallback-hint { font-size:11px;color:var(--text-muted);max-width:80% }
-
-/* 三视角当前状态区:跟趋势图区域并列,加标题让用户一眼知道这是"当前快照速览" */
-.si-stages-block { background:var(--bg-surface);border-radius:8px;padding:12px 14px;box-shadow:var(--shadow-sm) }
-.si-stages-h { display:flex;flex-direction:column;gap:1px;margin-bottom:10px }
-.si-stages-title { font-size:13px;font-weight:600;color:var(--text-primary) }
-.si-stages-sub { font-size:11px;color:var(--text-muted);font-style:italic }
-.si-stagecards { display:flex;flex-direction:column;gap:8px }
-.si-stages-block .si-stagecard { box-shadow:none;background:var(--bg-soft) }
-.si-stages-block .si-stagecard:hover { box-shadow:var(--shadow-sm) }
-.si-stagecard { all:unset;cursor:pointer;display:grid;grid-template-columns:32px 1fr auto auto;gap:10px;align-items:center;padding:10px 14px;background:var(--bg-surface);border-radius:7px;box-shadow:var(--shadow-sm);transition:transform .12s,box-shadow .12s;border-left:4px solid var(--border) }
-.si-stagecard:hover { transform:translateX(2px);box-shadow:var(--shadow-md) }
-.si-stagecard:focus-visible { outline:2px solid var(--accent);outline-offset:1px }
-.si-stagecard--green   { border-left-color:#5e8252 }
-.si-stagecard--yellow  { border-left-color:#b08030 }
-.si-stagecard--red     { border-left-color:#9c4a3f }
-.si-stagecard--gray    { border-left-color:var(--border) }
-.si-stagecard-icon { font-size:22px;line-height:1 }
-.si-stagecard-body { display:flex;flex-direction:column;gap:2px }
-.si-stagecard-name { font-size:14px;font-weight:600;color:var(--text-primary) }
-.si-stagecard-status { font-size:12px;color:var(--text-secondary);font-variant-numeric:tabular-nums }
-.si-stagecard-meta { font-size:11px;color:var(--text-muted);font-variant-numeric:tabular-nums }
-.si-stagecard-arrow { color:var(--text-muted);font-size:16px;font-weight:300 }
-
-/* ── Insight modal v4:极简 — 只展示问题 + 解决 ──────────
- * 顺序:title + desc(问题) → 失败用例(具体哪些用例 + 错因) → 怎么改(建议 + patch)
- * 删:严重度 tag / audience tag / 影响数 / 主推动作卡 / 三视角折叠
- * 第一条 recommendation 加 ⭐ 推荐标记
- */
-
-/* 失败用例 section(sample 视角主信息)*/
-.si-failures { margin:14px 0;padding:12px 14px;background:var(--bg-soft);border-radius:6px }
-.si-failures-h { font-size:13px;font-weight:600;color:var(--text-primary);margin-bottom:10px }
-.si-failure-item { background:rgba(156,74,63,.04);border-radius:5px;margin-bottom:8px;border-left:3px solid #9c4a3f }
-.si-failure-item:last-child { margin-bottom:0 }
-/* 两行布局:第一行 id + tags + 右对齐 trace;第二行 summary 独占 */
-.si-failure-head { display:flex;flex-direction:column;gap:6px;padding:10px 12px;cursor:default }
-details.si-failure-item > summary.si-failure-head { cursor:pointer;list-style:none;user-select:none }
-details.si-failure-item > summary.si-failure-head::-webkit-details-marker { display:none }
-.si-failure-row1 { display:flex;align-items:center;gap:8px;flex-wrap:wrap }
-.si-failure-row1::before { content:'▸ ';color:var(--text-muted);font-size:11px;margin-right:-4px }
-details.si-failure-item[open] > summary > .si-failure-row1::before { content:'▾ ' }
-.si-failure-row2 { font-size:14px;color:var(--text-secondary);line-height:1.55;padding-left:16px;white-space:pre-wrap;word-break:break-word }
-.si-failure-spacer { flex:1 }
-.si-failure-id { font-size:12.5px;font-weight:600;color:#9c4a3f;background:var(--bg-soft);padding:2px 8px;border-radius:3px;font-family:"SF Mono",Menlo,monospace }
-.si-failure-modes { display:flex;gap:4px;flex-wrap:wrap }
-.si-failure-mode { font-size:12px;color:#b08030;background:rgba(176,128,48,.14);padding:2px 8px;border-radius:8px;font-weight:500;white-space:nowrap }
-.si-failure-trace { font-size:12px;color:var(--accent);text-decoration:none;font-weight:500;white-space:nowrap }
-.si-failure-trace:hover { text-decoration:underline }
-
-/* 通过 / 诱错 sample 紧凑行 */
-.si-pass-item { display:flex;gap:10px;align-items:center;padding:5px 8px;border-radius:4px;font-size:14px;line-height:1.5 }
-.si-pass-item:hover { background:var(--bg-soft) }
-.si-pass-card { background:var(--bg-surface);border-radius:5px;margin-bottom:6px;border-left:3px solid #5e8252 }
-.si-pass-card > summary { list-style:none;cursor:pointer;user-select:none }
-.si-pass-card > summary::-webkit-details-marker { display:none }
-.si-pass-head { display:flex;flex-direction:column;gap:4px;padding:8px 12px }
-.si-pass-row1 { display:flex;align-items:center;gap:8px;flex-wrap:wrap }
-.si-pass-row1::before { content:'▸ ';color:var(--text-muted);font-size:11px;margin-right:-4px }
-details.si-pass-card[open] > summary > .si-pass-row1::before { content:'▾ ' }
-.si-pass-id { font-size:12px;font-weight:600;color:#5e8252;background:var(--bg-soft);padding:2px 8px;border-radius:3px;font-family:"SF Mono",Menlo,monospace;flex-shrink:0 }
-.si-pass-score { font-size:12px;font-weight:600;color:#5e8252;background:rgba(94,130,82,.1);padding:1px 7px;border-radius:10px }
-.si-pass-prompt-preview { font-size:13px;color:var(--text-secondary);padding-left:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
-.si-pass-body { padding:0 12px 10px 28px;display:flex;flex-direction:column;gap:8px }
-.si-pass-section { }
-.si-pass-label { font-size:12px;font-weight:600;color:var(--text-muted);margin-bottom:4px }
-.si-pass-content { font-size:14px;color:var(--text-primary);line-height:1.6;white-space:pre-wrap;word-break:break-word;background:var(--bg-soft);padding:8px 12px;border-radius:4px }
-.si-sample-dot { font-size:10px;line-height:1;flex-shrink:0 }
-.se-scores { margin-bottom:12px;padding:12px 14px;background:var(--bg-soft);border-radius:8px }
-.se-scores-hero { display:flex;align-items:baseline;gap:8px;margin-bottom:10px }
-.se-hero-label { font-size:14px;font-weight:600;color:var(--text-primary) }
-.se-hero-val { font-size:28px;font-weight:700;color:var(--text-primary);line-height:1 }
-.se-hero-max { font-size:14px;font-weight:400;color:var(--text-muted) }
-.se-hero-link { font-size:12px;color:var(--accent);text-decoration:none;font-weight:500;margin-left:auto }
-.se-hero-link:hover { text-decoration:underline }
-.se-scores-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:8px }
-@media(max-width:600px) { .se-scores-grid { grid-template-columns:repeat(2,1fr) } }
-.se-score-card { padding:8px 10px;background:var(--bg-surface);border-radius:6px }
-.se-score-label { font-size:12px;color:var(--text-muted);margin-bottom:4px }
-.se-score-bar { height:4px;background:var(--border);border-radius:2px;overflow:hidden;margin-bottom:4px }
-.se-score-fill { height:100%;border-radius:2px }
-.se-score-fill--good { background:#5e8252 }
-.se-score-fill--mid { background:#b08030 }
-.se-score-fill--low { background:#9c4a3f }
-.se-score-val { font-size:16px;font-weight:600;color:var(--text-primary) }
-.se-score-max { font-size:12px;font-weight:400;color:var(--text-muted) }
-.si-pass-preview { flex:1;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0 }
-.si-failure-trace:hover { text-decoration:underline }
-.si-failure-detail { padding:0 12px 10px;border-top:1px solid var(--border) }
-.si-failure-detail .si-illustration { border-left:none;background:transparent;padding:8px 0 0 0 }
-.si-failure-no-detail { padding:6px 0;font-size:13px;color:var(--text-muted);font-style:italic }
-
-/* v7:顶部全景区 — 左 3 个 donut ring + 右趋势图,两栏同高 */
-.si-overview { display:grid;grid-template-columns:3fr 2fr;gap:18px;margin:10px 0 22px;align-items:stretch }
-@media(max-width:880px){ .si-overview { grid-template-columns:1fr } }
-.si-overview-cards { background:var(--bg-surface);border-radius:10px;padding:18px 14px;box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:space-around;gap:8px }
-.si-overview-trend { background:var(--bg-surface);border-radius:10px;padding:14px 16px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column }
-
-/* 三视角 ring + label(锚定到下面对应 section);内容自身居中,被 cards 容器垂直拉伸时上下留白对称 */
-.si-vs { flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:8px 4px;text-decoration:none;color:var(--text-primary);border-radius:8px;transition:background .15s }
-.si-vs:hover { background:var(--bg-soft);text-decoration:none }
-.si-ring { display:block }
-.si-vs-h { display:flex;align-items:baseline;gap:4px;flex-wrap:wrap;justify-content:center;margin-top:4px }
-.si-vs-icon { font-size:15px;line-height:1 }
-.si-vs-label { font-size:13.5px;font-weight:600;color:var(--text-primary) }
-.si-vs-sublabel { font-size:11px;color:var(--text-muted) }
-.si-vs-stat { font-size:12.5px;color:var(--text-secondary);font-variant-numeric:tabular-nums;line-height:1.45 }
-.si-vs-spark { display:block;margin-top:2px }
-@media(max-width:560px){
-  .si-overview-cards { flex-direction:column;align-items:stretch }
-  .si-vs { flex-direction:row;justify-content:flex-start;text-align:left;gap:14px;align-items:center }
-  .si-vs-h, .si-vs-stat, .si-vs-spark { margin:0 }
-}
-
-/* 三视角 section(下方主体) */
-.si-sect { background:var(--bg-surface);border-radius:8px;padding:14px 18px;box-shadow:var(--shadow-sm);margin-bottom:14px;border-left:4px solid var(--border);scroll-margin-top:16px }
-.si-sect--green   { border-left-color:#5e8252 }
-.si-sect--yellow  { border-left-color:#b08030 }
-.si-sect--red     { border-left-color:#9c4a3f }
-.si-sect--gray    { border-left-color:var(--border) }
-.si-sect-h { display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px;flex-wrap:wrap }
-.si-sect-title { font-size:15px;font-weight:600;color:var(--text-primary) }
-.si-sect-meta { font-size:11.5px;color:var(--text-muted);font-variant-numeric:tabular-nums }
-.si-sect-body { display:flex;flex-direction:column;gap:6px }
-.si-sect-empty { font-size:13px;color:var(--text-muted);font-style:italic;padding:8px 0 }
-.si-sect-line { font-size:14px;color:var(--text-secondary);margin-bottom:4px }
-.si-sect-allpass { font-size:14px;color:#5e8252;padding:6px 10px;background:rgba(94,130,82,.07);border-radius:4px }
-.si-sect-link { display:inline-block;margin-top:8px;font-size:12px;color:var(--accent);text-decoration:none;font-weight:500 }
-.si-sect-link:hover { text-decoration:underline }
-.si-sect-fold { margin-top:8px;border-top:1px dashed var(--border);padding-top:6px }
-.si-sect-fold > summary { cursor:pointer;font-size:11.5px;color:var(--text-muted);user-select:none;list-style:none;padding:4px 0 }
-.si-sect-fold > summary::-webkit-details-marker { display:none }
-.si-sect-fold > summary:hover { color:var(--text-secondary) }
-.si-sect-fold-body { padding-top:6px;display:flex;flex-direction:column;gap:5px }
-.si-sect-skipped { font-size:11px;color:var(--text-muted);font-style:italic;margin-top:6px }
-
-/* doctor 规则展示(用在 doctor section 和 observe section) */
-.sd-grid { display:flex;flex-direction:column;gap:4px }
-.sd-dim { border-radius:6px;border:1px solid var(--border);overflow:hidden }
-.sd-dim--err { border-color:rgba(156,74,63,.3) }
-.sd-dim--warn { border-color:rgba(176,128,48,.3) }
-.sd-dim--pass { border-color:rgba(94,130,82,.25);background:rgba(94,130,82,.04) }
-.sd-dim--skip { border-color:var(--border);opacity:.6 }
-.sd-dim > summary { list-style:none;cursor:pointer }
-.sd-dim > summary::-webkit-details-marker { display:none }
-.sd-dim-header { display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:14px }
-.sd-dim-dot { flex-shrink:0;font-size:10px;line-height:1 }
-.sd-dim-name { font-weight:600;color:var(--text-primary);flex:1;min-width:0 }
-.sd-dim-badges { display:flex;gap:6px;flex-shrink:0 }
-.sd-badge { font-size:12px;padding:1px 7px;border-radius:10px;font-weight:500 }
-.sd-badge--err { background:rgba(156,74,63,.1);color:#9c4a3f }
-.sd-badge--warn { background:rgba(176,128,48,.1);color:#b08030 }
-.sd-dim-body { padding:0 12px 10px;display:flex;flex-direction:column;gap:6px }
-.sd-item { padding:8px 10px;border-radius:4px;font-size:14px;line-height:1.6 }
-.sd-item--err { background:rgba(156,74,63,.05);border-left:2px solid #9c4a3f }
-.sd-item--warn { background:rgba(176,128,48,.05);border-left:2px solid #b08030 }
-.sd-item-desc { color:var(--text-primary);word-break:break-word }
-.sd-item-sug { margin-top:4px;font-size:13px;color:var(--text-secondary);padding:4px 8px;background:rgba(94,130,82,.05);border-radius:4px;word-break:break-word }
-.sd-warn-fold { margin-top:6px }
-.sd-warn-list { display:flex;flex-direction:column;gap:6px;margin-top:6px }
-.sd-warn-toggle { cursor:pointer;font-size:13px;color:var(--text-muted);user-select:none;list-style:none;padding:2px 0 }
-.sd-warn-toggle::-webkit-details-marker { display:none }
-.sd-warn-toggle::before { content:'▸ ';font-size:10px }
-details[open] > .sd-warn-toggle::before { content:'▾ ' }
-.sd-warn-toggle:hover { color:var(--text-secondary) }
-.sd-pass-fold { margin-top:6px }
-.sd-pass-fold > .sd-dim + .sd-dim { margin-top:4px }
-.sd-pass-toggle { cursor:pointer;font-size:13px;color:var(--text-muted);user-select:none;list-style:none;padding:6px 0 }
-.sd-pass-toggle::-webkit-details-marker { display:none }
-.sd-pass-toggle:hover { color:var(--text-secondary) }
-.si-rule-hint { margin-top:4px;font-size:12px;color:var(--text-secondary);line-height:1.55 }
-
-/* 单条 sample 展开后的 4 段(modal v6:用例 prompt / 期望 / 实际 / 建议)*/
-.si-sb { display:flex;flex-direction:column;gap:10px;padding:10px 0 }
-.si-sb-block { padding:10px 12px;border-radius:5px;background:var(--bg-soft) }
-.si-sb-block--prompt   { background:var(--bg-soft) }
-.si-sb-block--expected { background:rgba(94,130,82,.06) }
-.si-sb-block--actual   { background:rgba(176,128,48,.07) }
-.si-sb-block--suggest  { background:rgba(122,107,137,.07) }
-.si-sb-label { font-size:12px;font-weight:700;color:var(--text-secondary);letter-spacing:0.02em;margin-bottom:5px }
-.si-sb-block--expected .si-sb-label { color:#5e8252 }
-.si-sb-block--actual   .si-sb-label { color:#b08030 }
-.si-sb-block--suggest  .si-sb-label { color:#7a6b89 }
-.si-sb-text { font-size:13px;color:var(--text-primary);line-height:1.6;white-space:pre-wrap;word-break:break-word }
-.si-sb-block--prompt .si-sb-text { font-family:"SF Mono",Menlo,monospace;font-size:12.5px;max-height:200px;overflow-y:auto }
-.si-sb-sugrow { display:grid;grid-template-columns:90px 1fr;gap:8px;padding:4px 0;align-items:start }
-.si-sb-sugrow:not(:first-child) { border-top:1px dashed var(--border) }
-.si-sb-sugtag { font-size:11px;color:#7a6b89;background:var(--bg-surface);padding:2px 8px;border-radius:8px;font-weight:600;width:fit-content;height:fit-content }
-.si-sb-block--empty { opacity:.75 }
-.si-sb-empty { color:var(--text-muted);font-style:italic;font-size:12.5px }
-
-/* 单条 sample 的"期望 vs 实际 vs 卡在哪"diff 对照视图(已被 v6 sb 视图替代,保留 placeholder)*/
-.si-diff { display:flex;flex-direction:column;gap:8px;padding:10px 0 }
-.si-diff-row { display:grid;grid-template-columns:24px 50px 1fr;gap:10px;align-items:start;padding:8px 12px;border-radius:5px;line-height:1.55 }
-.si-diff-row--expected { background:rgba(94,130,82,.07);border-left:3px solid #5e8252 }
-.si-diff-row--actual   { background:rgba(176,128,48,.08);border-left:3px solid #b08030 }
-.si-diff-row--failed   { background:rgba(156,74,63,.07);border-left:3px solid #9c4a3f }
-.si-diff-icon { font-size:14px;line-height:1.5 }
-.si-diff-label { font-size:11.5px;font-weight:700;letter-spacing:0.04em;color:var(--text-secondary);padding-top:2px }
-.si-diff-row--expected .si-diff-label { color:#5e8252 }
-.si-diff-row--actual   .si-diff-label { color:#b08030 }
-.si-diff-row--failed   .si-diff-label { color:#9c4a3f }
-.si-diff-text { color:var(--text-primary);font-size:13px;word-break:break-word }
-.si-diff-text--mono { font-family:"SF Mono",Menlo,monospace;font-size:12px;background:var(--bg-surface);padding:2px 7px;border-radius:3px;width:fit-content }
-/* 原始 prompt/output 降级到二级折叠 */
-.si-diff-raw { margin-top:6px;border-top:1px dashed var(--border);padding-top:8px }
-.si-diff-raw > summary { cursor:pointer;font-size:11.5px;color:var(--text-muted);user-select:none;list-style:none }
-.si-diff-raw > summary::-webkit-details-marker { display:none }
-.si-diff-raw > summary:hover { color:var(--text-secondary) }
-.si-diff-raw-body { padding:6px 0 }
-
-/* 占位符标识 */
-.si-placeholder { background:rgba(176,128,48,.20);color:#7a5810;padding:1px 4px;border-radius:3px;font-weight:600;font-style:italic }
-.si-rec-patch-hint { font-size:11.5px;color:#7a5810;background:rgba(176,128,48,.10);padding:6px 10px;border-radius:4px;margin-bottom:6px;line-height:1.5 }
-.si-rec-patch-hint .si-placeholder { background:rgba(176,128,48,.30) }
-
-/* 第一条建议的"⭐ 推荐先做"标记 */
-.si-rec-item--primary { border-left-color:#5e8252;background:rgba(94,130,82,.06) }
-.si-rec-star { font-size:10.5px;font-weight:700;color:#5e8252;background:rgba(94,130,82,.16);padding:2px 8px;border-radius:9px;letter-spacing:0.02em;flex-shrink:0 }
-
-/* 建议 + patch 直接铺(去掉 details 折叠)*/
-.si-recs { margin:14px 0 }
-.si-recs-h { font-size:13px;font-weight:600;color:var(--text-primary);margin-bottom:10px }
-.si-rec-item { background:var(--bg-soft);border-radius:6px;padding:10px 12px;margin-bottom:8px;border-left:3px solid var(--accent) }
-.si-rec-item:last-child { margin-bottom:0 }
-.si-rec-head { display:flex;align-items:flex-start;gap:8px;margin-bottom:8px }
-.si-rec-num { font-size:11px;font-weight:700;color:var(--text-muted);background:var(--bg-surface);padding:1px 7px;border-radius:9px;flex-shrink:0;margin-top:1px;font-variant-numeric:tabular-nums }
-.si-rec-pri { padding:1px 7px;border-radius:8px;font-size:10.5px;font-weight:600;flex-shrink:0;margin-top:1px }
-.si-rec-pri--high { background:rgba(156,74,63,.14);color:#9c4a3f }
-.si-rec-pri--medium { background:rgba(176,128,48,.12);color:#b08030 }
-.si-rec-pri--low { background:rgba(94,130,82,.14);color:#5e8252 }
-.si-rec-action { flex:1;color:var(--text-primary);font-size:13px;line-height:1.55 }
-.si-rec-patch { margin-left:0 }
-.si-rec-patch-meta { display:flex;gap:8px;align-items:center;font-size:11px;color:var(--text-muted);margin-bottom:5px;flex-wrap:wrap }
-.si-rec-patch-target { font-weight:600;color:var(--text-secondary) }
-.si-rec-patch-loc { font-family:"SF Mono",Menlo,monospace;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
-.si-rec-patch-copy { background:var(--accent);color:#fff;border:none;border-radius:4px;padding:3px 10px;font-size:11px;cursor:pointer;font-weight:500;transition:background .1s;flex-shrink:0 }
-.si-rec-patch-copy:hover { background:var(--accent-hover) }
-.si-rec-patch-copy.copied { background:#5e8252 }
-.si-rec-patch-snippet { background:var(--bg-surface);padding:10px 12px;border-radius:4px;border-left:2px solid var(--accent);font-size:11.5px;line-height:1.55;overflow-x:auto;margin:0 }
-.si-rec-patch-snippet code { font-family:"SF Mono",Menlo,monospace;color:var(--text-primary);white-space:pre;display:block }
-
-/* 三视角细节折叠(底部)*/
-.si-modal-detail { margin-top:14px;border-top:1px solid var(--border);padding-top:10px }
-.si-modal-detail > summary { cursor:pointer;font-size:12px;font-weight:600;color:var(--text-secondary);user-select:none;list-style:none;padding:4px 0 }
-.si-modal-detail > summary::-webkit-details-marker { display:none }
-.si-modal-detail > summary:hover { color:var(--text-primary) }
-.si-modal-detail-body { margin-top:8px;padding:8px 10px;background:var(--bg-soft);border-radius:5px }
-
-/* Modal 内的样式(沿用 modal-overlay/modal-content,只补本页特有的)*/
-.si-modal { max-width:760px;width:90% }
-.si-modal-h { display:flex;align-items:center;gap:10px;flex-wrap:wrap }
-.si-modal-num { font-size:12px;font-weight:700;color:var(--text-muted);background:var(--bg-soft);padding:2px 8px;border-radius:4px }
-.si-modal-sev { font-size:18px }
-.si-modal-title { margin:0;font-size:17px;font-weight:600;color:var(--text-primary) }
-/* si-modal-tags / si-modal-affect / si-aud-tag — modal v4 极简后不再使用,保留 placeholder 防回退 */
-.si-modal-desc { color:var(--text-secondary);font-size:13px;line-height:1.6;margin:0 0 14px }
-.si-modal-purpose { color:var(--text-secondary);font-size:13px;line-height:1.6;margin:6px 0 12px;font-style:italic }
-.si-modal-stats { color:var(--text-secondary);font-size:13px;margin-bottom:14px;padding:8px 12px;background:var(--bg-soft);border-radius:5px;font-variant-numeric:tabular-nums }
-.si-modal-empty { color:var(--text-muted);font-size:13px;padding:18px;text-align:center;font-style:italic }
-
-.si-sev-tag { padding:2px 9px;border-radius:11px;font-size:11px;font-weight:600 }
-.si-sev-tag--high { background:rgba(156,74,63,.14);color:#9c4a3f }
-.si-sev-tag--medium { background:rgba(176,128,48,.12);color:#b08030 }
-.si-sev-tag--low { background:rgba(94,130,82,.14);color:#5e8252 }
-
-/* 证据 */
-.si-evidence { background:var(--bg-soft);padding:10px 12px;border-radius:6px;margin-bottom:12px }
-.si-evidence-h { font-size:12px;font-weight:600;color:var(--text-secondary);margin-bottom:8px }
-.si-ev { padding:4px 0;font-size:13px;line-height:1.55 }
-.si-ev-line { display:grid;grid-template-columns:24px 100px 1fr;gap:10px;align-items:start }
-.si-ev-icon { text-align:center;font-weight:600 }
-.si-ev--flagged .si-ev-icon { color:#9c4a3f }
-.si-ev--blind .si-ev-icon { color:#7a6b89 }
-.si-ev--silent .si-ev-icon { color:#7a9270 }
-.si-ev--na .si-ev-icon { color:var(--text-muted) }
-.si-ev-perspective { color:var(--text-secondary);font-weight:500 }
-.si-ev-msg { color:var(--text-primary) }
-.si-ev-ill { margin-top:4px;margin-left:34px }
-.si-ev-ill > summary { cursor:pointer;font-size:11.5px;color:var(--accent);list-style:none;padding:2px 0 }
-.si-ev-ill > summary::-webkit-details-marker { display:none }
-.si-ev-ill > summary::before { content:'▸ ';color:var(--text-muted) }
-.si-ev-ill[open] > summary::before { content:'▾ ' }
-.si-ev-ill-body { padding:6px 0;display:flex;flex-direction:column;gap:8px }
-.si-illustration { background:var(--bg-surface);border-left:2px solid var(--border);padding:6px 10px;border-radius:4px;font-size:11.5px }
-.si-ill-h { margin-bottom:4px }
-.si-ill-h code { background:var(--bg-soft);padding:1px 5px;border-radius:3px;font-size:11px }
-.si-ill-row { display:grid;grid-template-columns:80px 1fr;gap:8px;align-items:start;margin-bottom:3px }
-.si-ill-label { color:var(--text-muted);font-size:10.5px;font-weight:500 }
-.si-ill-text { color:var(--text-primary);font-size:11.5px;background:var(--bg-soft);padding:3px 6px;border-radius:3px;white-space:pre-wrap;word-break:break-word }
-.si-ill-text--mono { font-family:"SF Mono",Menlo,monospace;background:rgba(156,74,63,.10);color:#9c4a3f }
-.si-ill-tools { margin:0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:2px }
-.si-ill-tools li { font-family:"SF Mono",Menlo,monospace;font-size:10.5px;background:var(--bg-soft);padding:2px 5px;border-radius:3px }
-
-/* 推荐 */
-.si-recs ul { margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px }
-.si-recs li { font-size:13px;line-height:1.55 }
-.si-rec-line { display:flex;gap:8px;align-items:flex-start }
-.si-rec-pri { padding:1px 7px;border-radius:8px;font-size:10.5px;font-weight:600;flex-shrink:0;margin-top:1px }
-.si-rec-pri--high { background:rgba(156,74,63,.14);color:#9c4a3f }
-.si-rec-pri--medium { background:rgba(176,128,48,.12);color:#b08030 }
-.si-rec-pri--low { background:rgba(94,130,82,.14);color:#5e8252 }
-.si-rec-action { color:var(--text-primary);flex:1 }
-.si-recs-h { font-size:12px;font-weight:600;color:var(--text-secondary);margin-bottom:8px;margin-top:0 }
-.si-patch { margin-top:6px;margin-left:24px }
-.si-patch > summary { cursor:pointer;font-size:11.5px;color:var(--accent);list-style:none;padding:2px 0 }
-.si-patch > summary::-webkit-details-marker { display:none }
-.si-patch > summary::before { content:'▸ ';color:var(--text-muted) }
-.si-patch[open] > summary::before { content:'▾ ' }
-.si-patch-body { padding:6px 0 }
-.si-patch-meta { display:flex;gap:8px;margin-bottom:6px;font-size:11px;color:var(--text-muted);align-items:center }
-.si-patch-target { font-weight:600;color:var(--text-secondary) }
-.si-patch-loc { font-family:"SF Mono",Menlo,monospace }
-.si-patch-snippet { background:var(--bg-soft);padding:10px 12px;border-radius:4px;border-left:2px solid var(--accent);font-size:11.5px;line-height:1.55;overflow-x:auto;margin:0 }
-.si-patch-snippet code { font-family:"SF Mono",Menlo,monospace;color:var(--text-primary);white-space:pre;display:block }
-
-/* Modal 内的 doctor rule list */
-.si-rules { list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px }
-.si-rule { display:flex;gap:10px;font-size:13px;line-height:1.55;align-items:flex-start;padding:8px 10px;border-radius:4px }
-.si-rule--warn { background:rgba(176,128,48,.07) }
-.si-rule--fail { background:rgba(156,74,63,.08) }
-.si-rule-icon { flex-shrink:0;font-weight:700;width:16px;text-align:center;font-size:14px }
-.si-rule--pass .si-rule-icon { color:#5e8252 }
-.si-rule--warn .si-rule-icon { color:#b08030 }
-.si-rule--fail .si-rule-icon { color:#9c4a3f }
-.si-rule-body { flex:1;min-width:0 }
-.si-rule-id { font-size:11px;color:var(--text-muted);background:var(--bg-soft);padding:1px 5px;border-radius:3px;margin-right:6px }
-.si-rule-msg { color:var(--text-primary) }
-.si-rule-hint { font-size:12px;color:var(--text-secondary);margin-top:3px;line-height:1.55 }
-
-/* Sample list (eval modal — 全部用例清单)。复用 si-history-row 大部分样式,只重写 grid */
-.si-sample-list { max-height:340px;overflow-y:auto }
-.si-sample-row { grid-template-columns:18px 100px 56px 1fr auto !important;gap:8px !important }
-.si-sample-row--pass { background:rgba(94,130,82,.06) }
-.si-sample-row--fail { background:rgba(156,74,63,.06);border-left:2px solid #9c4a3f }
-.si-sample-row--tripwire { background:rgba(122,107,137,.06);border-left:2px solid #7a6b89 }
-.si-sample-icon { font-weight:700;text-align:center;font-size:13px }
-.si-sample-icon--pass { color:#5e8252 }
-.si-sample-icon--fail { color:#9c4a3f }
-.si-sample-icon--tripwire { color:#7a6b89 }
-.si-sample-id { font-size:11px;color:var(--text-secondary);background:transparent;padding:0;font-family:"SF Mono",Menlo,monospace;font-weight:600 }
-.si-sample-score { font-variant-numeric:tabular-nums;font-size:12px;color:var(--text-secondary);font-weight:600;text-align:right }
-.si-sample-desc { color:var(--text-secondary);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0 }
-@media(max-width:640px){
-  .si-sample-row { grid-template-columns:18px 1fr auto !important }
-  .si-sample-id { grid-column:2/3 }
-  .si-sample-score, .si-sample-desc { display:none }
-}
-
-/* History section in stage modals */
-.si-history { margin-top:14px;border-top:1px solid var(--border);padding-top:10px }
-.si-history > summary { cursor:pointer;list-style:none;padding:6px 4px;font-size:12.5px;font-weight:600;color:var(--text-secondary);user-select:none;display:flex;align-items:center;gap:6px }
-.si-history > summary::-webkit-details-marker { display:none }
-.si-history > summary::before { content:'▸ ';color:var(--text-muted);font-size:11px }
-.si-history[open] > summary::before { content:'▾ ' }
-.si-history > summary:hover { color:var(--text-primary) }
-.si-history-list { margin:6px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px }
-.si-history-list li { padding:0;background:transparent }
-/* 整行可点击:eval/observe 用 <a>,doctor 历史用 <button>(走 inline modal),样式完全一致 */
-.si-history-row { all:unset;cursor:pointer;display:grid;grid-template-columns:64px 1fr auto auto;gap:10px;align-items:center;padding:7px 10px;background:var(--bg-soft);border-radius:5px;font-size:12.5px;line-height:1.45;transition:background .12s,transform .12s;text-align:left;width:100%;box-sizing:border-box;color:var(--text-primary) }
-.si-history-row:hover { background:var(--bg-elevated);transform:translateX(2px) }
-.si-history-row:focus-visible { outline:2px solid var(--accent);outline-offset:1px }
-.si-history-date { font-variant-numeric:tabular-nums;font-weight:600;color:var(--text-secondary) }
-.si-history-meta { color:var(--text-secondary);font-variant-numeric:tabular-nums }
-.si-history-status { font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:8px;letter-spacing:0.02em;justify-self:end }
-.si-history-status--green { background:rgba(94,130,82,.18);color:#5e8252 }
-.si-history-status--yellow { background:rgba(176,128,48,.16);color:#b08030 }
-.si-history-status--red { background:rgba(156,74,63,.18);color:#9c4a3f }
-.si-history-arrow { color:var(--text-muted);font-size:14px;font-weight:300 }
-@media(max-width:640px){
-  .si-history-row { grid-template-columns:56px 1fr auto;gap:6px }
-  .si-history-arrow { display:none }
-}
-
-/* Eval modal blocks */
-.si-eval-block { background:var(--bg-soft);padding:12px 14px;border-radius:6px;margin-bottom:12px }
-.si-eval-block:last-child { margin-bottom:0 }
-.si-eval-h { margin:0 0 10px;font-size:13px;font-weight:600;color:var(--text-primary) }
-.si-eval-score-row { display:flex;gap:14px;align-items:flex-end;margin-bottom:10px }
-.si-eval-composite { font-size:30px;font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums;line-height:1 }
-.si-eval-composite-sub { font-size:11.5px;color:var(--text-muted);margin-left:4px;font-weight:normal }
-.si-eval-headline { color:var(--text-secondary);font-size:12.5px;line-height:1.5;margin:0;font-style:italic }
-.si-layers { display:flex;flex-direction:column;gap:5px;margin-bottom:8px }
-.si-layer { display:grid;grid-template-columns:80px 1fr 50px;gap:10px;align-items:center;font-size:12.5px }
-.si-layer-lbl { color:var(--text-secondary) }
-.si-layer-bar { background:var(--bg-surface);border-radius:4px;height:8px;overflow:hidden }
-.si-layer-fill { height:100%;border-radius:4px }
-.si-layer-fill--pass { background:#5e8252 }
-.si-layer-fill--warn { background:#b08030 }
-.si-layer-fill--fail { background:#9c4a3f }
-.si-layer-num { font-variant-numeric:tabular-nums;font-weight:600;text-align:right;font-size:12px }
-.si-layer-num--pass { color:#5e8252 }
-.si-layer-num--warn { color:#b08030 }
-.si-layer-num--fail { color:#9c4a3f }
-.si-eval-link { display:inline-block;color:var(--accent);font-size:12.5px;text-decoration:none;font-weight:500 }
-.si-eval-link:hover { text-decoration:underline }
-.si-failed-list { margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px }
-.si-failed-list li { font-size:12.5px;line-height:1.55;display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;padding:8px 10px;border-radius:4px;background:rgba(156,74,63,.06);border-left:2px solid #9c4a3f }
-.si-fs-id { font-size:11px;background:var(--bg-surface);padding:1px 5px;border-radius:3px;color:#9c4a3f;font-weight:600 }
-.si-fs-mode { font-size:10.5px;color:#b08030;background:rgba(176,128,48,.14);padding:1px 6px;border-radius:8px;font-weight:500 }
-.si-fs-summary { color:var(--text-secondary);font-size:12px;flex-basis:100% }
-`;
-// ────────── chart.js init script ──────────
-const TREND_INIT_SCRIPT = `
-<script src="/static/chart.js" onerror="window.__omkChartLoadError=true"></script>
-<script>
-(function(){
-  var L = (document.documentElement.dataset.lang || 'zh');
-  function showFallback(canvas, msg){
-    if (!canvas) return;
-    var wrap = canvas.parentElement;
-    if (!wrap || wrap.dataset.omkFallback === '1') return;
-    wrap.dataset.omkFallback = '1'; // 防止异步路径多次写入
-    wrap.innerHTML = '<div class="si-trend-fallback">' +
-      '<div class="si-trend-fallback-icon">📉</div>' +
-      '<div class="si-trend-fallback-msg">' + msg + '</div>' +
-      '<div class="si-trend-fallback-hint">' + (L === 'en' ? 'Check browser console for details.' : '数据仍可从下方指标速览看,或在浏览器控制台看具体错误。') + '</div>' +
-      '</div>';
-  }
-  // 异步兜底:Chart 内部 RAF / setTimeout 抛错会冒泡到 window.error,这里捕获后
-  // 把 trend canvas 区域降级,不让"图表 init 看似成功但渲染失败"留出空白。
-  window.addEventListener('error', function(ev){
-    var canvas = document.getElementById('trend-chart');
-    if (!canvas) return;
-    var msg = (ev && ev.message) || '';
-    if (/chart/i.test(msg) || (ev.filename && /chart\\.js$/i.test(ev.filename))) {
-      showFallback(canvas, L === 'en' ? 'Trend chart error' : '趋势图渲染异常');
-    }
-  });
-  function init(){
-    var canvas = document.getElementById('trend-chart');
-    if (!canvas) return;
-    if (window.__omkChartLoadError || !window.Chart) {
-      showFallback(canvas, L === 'en' ? 'Chart failed to load' : '趋势图加载失败');
-      return;
-    }
-    var raw = canvas.getAttribute('data-chart');
-    var rawLinks = canvas.getAttribute('data-links');
-    if (!raw) return;
-    try {
-      var data = JSON.parse(raw);
-      var links = rawLinks ? JSON.parse(rawLinks) : null;
-      // 防御:dataset data 长度跟 labels 严重不一致直接降级,别让 chart 静默画空 canvas
-      if (data && Array.isArray(data.labels) && Array.isArray(data.datasets)) {
-        var bad = data.datasets.some(function(ds){
-          return !Array.isArray(ds.data) || ds.data.length !== data.labels.length;
-        });
-        if (bad) {
-          showFallback(canvas, L === 'en' ? 'Chart data format error' : '趋势图数据格式异常');
-          return;
-        }
-      }
-      new Chart(canvas, {
-        type: 'line',
-        data: data,
-        options: {
-          responsive: true, maintainAspectRatio: false,
-          plugins: {
-            legend: { position: 'bottom', labels: { boxWidth: 10, font: { size: 11 }, color: '#7a7a7a' } },
-            tooltip: { callbacks: {
-              label: function(ctx){ return ctx.dataset.label + ': ' + (ctx.parsed.y == null ? '—' : ctx.parsed.y.toFixed(1) + '%'); },
-              afterLabel: function(ctx){
-                var hint = ctx.dataset._hint || '';
-                var lines = hint ? [hint] : [];
-                if (links) {
-                  var url = links[ctx.datasetIndex] && links[ctx.datasetIndex][ctx.dataIndex];
-                  if (url) lines.push(L === 'en' ? '→ Click to view report' : '→ 点击看那期报告');
-                }
-                return lines;
-              }
-            } }
-          },
-          scales: {
-            y: { min: 0, max: 100, ticks: { callback: function(v){ return v === 0 || v === 100 ? v + '%' : ''; }, color: '#a8a8a8', font: { size: 10 }, stepSize: 25 }, grid: { color: 'rgba(58,58,58,.06)' } },
-            x: { ticks: { color: '#a8a8a8', font: { size: 10 } }, grid: { display: false } }
-          },
-          elements: { point: { radius: 3, hoverRadius: 5 } },
-          onClick: function(_evt, elements){
-            if (!links || !elements || elements.length === 0) return;
-            var el = elements[0];
-            var url = links[el.datasetIndex] && links[el.datasetIndex][el.index];
-            if (url) window.location.href = url;
-          },
-          onHover: function(evt, elements){
-            if (!links) return;
-            var any = elements && elements.some(function(el){ return links[el.datasetIndex] && links[el.datasetIndex][el.index]; });
-            evt.native.target.style.cursor = any ? 'pointer' : 'default';
-          }
-        }
-      });
-    } catch(e) {
-      console.warn('trend chart init failed:', e);
-      showFallback(canvas, L === 'en' ? 'Trend chart error' : '趋势图渲染异常');
-    }
-  }
-  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
-  else init();
-})();
-</script>`;
-// ────────── v7:三视角顶层全景 + 各 section 直铺 ──────────
-/** 紧凑 inline sparkline(供顶部速览卡每张里用,显示该视角历史走向)。
- *  values 是 0-100 归一化数组(空数组返回占位)。 */
-function renderInlineSpark(values, color) {
-    if (!values || values.length === 0) {
-        return `<svg class="si-vs-spark" width="80" height="22" viewBox="0 0 80 22" xmlns="http://www.w3.org/2000/svg"><text x="50%" y="55%" text-anchor="middle" fill="#a8a8a8" font-size="9">no data</text></svg>`;
-    }
-    const w = 80, h = 22, pad = 2;
-    const min = Math.min(...values, 0);
-    const max = Math.max(...values, 100);
-    const range = (max - min) || 1;
-    const dx = values.length > 1 ? (w - 2 * pad) / (values.length - 1) : 0;
-    const pts = values.map((v, i) => {
-        const x = pad + i * dx;
-        const y = pad + (h - 2 * pad) * (1 - (v - min) / range);
-        return `${x.toFixed(1)},${y.toFixed(1)}`;
-    }).join(' ');
-    return `<svg class="si-vs-spark" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}" xmlns="http://www.w3.org/2000/svg">
-    <polyline points="${pts}" fill="none" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-  </svg>`;
-}
-/** Donut ring SVG:中央显示百分比,弧色按 band。半径 38,周长 ~239。 */
-function renderDonutRing(pct, color, label) {
-    const r = 38, c = 2 * Math.PI * r;
-    const safePct = pct == null ? 0 : Math.max(0, Math.min(100, pct));
-    const dashOffset = c * (1 - safePct / 100);
-    const centerText = pct == null ? '—' : `${Math.round(safePct)}%`;
-    return `<svg class="si-ring" width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="${e(label)}">
-    <circle cx="50" cy="50" r="${r}" fill="none" stroke="var(--bg-soft)" stroke-width="8"/>
-    ${pct != null ? `<circle cx="50" cy="50" r="${r}" fill="none" stroke="${color}" stroke-width="8"
-      stroke-dasharray="${c.toFixed(2)}" stroke-dashoffset="${dashOffset.toFixed(2)}"
-      stroke-linecap="round" transform="rotate(-90 50 50)"/>` : ''}
-    <text x="50" y="56" text-anchor="middle" font-size="19" font-weight="700" fill="${pct == null ? 'var(--text-muted)' : color}" font-family="-apple-system,BlinkMacSystemFont,sans-serif">${centerText}</text>
-  </svg>`;
-}
-/** 三视角顶部全景:3 个 Apple-watch 风 donut ring,每个 ring 下面带 emoji + label + 状态 + sparkline */
-function renderViewSummaryCards(entry, lang) {
-    // doctor
-    const docBand = entry.doctor
-        ? (entry.doctor.status === 'fail' ? 'red' : entry.doctor.status === 'warn' ? 'yellow' : 'green') : 'gray';
-    const docColor = docBand === 'green' ? '#5e8252' : docBand === 'yellow' ? '#b08030' : docBand === 'red' ? '#9c4a3f' : '#a8a8a8';
-    const docPct = entry.doctor && (entry.doctor.passCount + entry.doctor.warnCount + entry.doctor.failCount) > 0
-        ? (entry.doctor.passCount / (entry.doctor.passCount + entry.doctor.warnCount + entry.doctor.failCount)) * 100
-        : null;
-    const docPassRates = entry.doctorHistory.map((h) => {
-        const tot = h.passCount + h.warnCount + h.failCount;
-        return tot > 0 ? (h.passCount / tot) * 100 : 0;
-    });
-    const docStat = entry.doctor
-        ? `${entry.doctor.passCount}✓ ${entry.doctor.warnCount}⚠ ${entry.doctor.failCount}✗`
-        : (lang === 'zh' ? '未运行' : 'not run');
-    // eval
-    const evalBand = entry.eval
-        ? (entry.eval.failCount === 0 ? 'green' : entry.eval.passCount === 0 ? 'red' : 'yellow') : 'gray';
-    const evalColor = evalBand === 'green' ? '#5e8252' : evalBand === 'yellow' ? '#b08030' : evalBand === 'red' ? '#9c4a3f' : '#a8a8a8';
-    const evalPct = entry.eval && entry.eval.compositeScore != null
-        ? (entry.eval.compositeScore / 5) * 100
-        : null;
-    const evalCompositeRates = entry.evalHistory.map((h) => (h.compositeScore ?? 0) / 5 * 100);
-    const evalStat = entry.eval && (entry.eval.passCount + entry.eval.failCount) > 0
-        ? `${entry.eval.totalSamples} ${lang === 'zh' ? '用例' : 'samples'} · ${Math.round((entry.eval.passCount / (entry.eval.passCount + entry.eval.failCount)) * 100)}%${entry.eval.compositeScore != null ? ` · ${entry.eval.compositeScore.toFixed(2)}/5` : ''}`
-        : (lang === 'zh' ? '未运行' : 'not run');
-    // observe
-    const obsBand = entry.observe?.healthBand ?? 'gray';
-    const obsColor = obsBand === 'green' ? '#5e8252' : obsBand === 'yellow' ? '#b08030' : obsBand === 'red' ? '#9c4a3f' : '#a8a8a8';
-    const obsPct = entry.observe ? (1 - entry.observe.gapRate) * 100 : null;
-    const obsStabilityRates = entry.observeHistory.map((h) => (1 - h.gapRate) * 100);
-    const obsStat = entry.observe
-        ? `${entry.observe.segmentCount} ${lang === 'zh' ? '段' : 'segs'} · ${((1 - entry.observe.gapRate) * 100).toFixed(0)}% ${lang === 'zh' ? '稳定' : 'stable'}`
-        : (lang === 'zh' ? '未运行' : 'not run');
-    const node = (icon, label, sublabel, band, pct, color, stat, sparkRates, anchor) => `<a class="si-vs si-vs--${band}" href="#${anchor}">
-    ${renderDonutRing(pct, color, `${label} ${sublabel}`)}
-    <div class="si-vs-h">
-      <span class="si-vs-icon">${icon}</span>
-      <span class="si-vs-label">${e(label)}</span>
-      <span class="si-vs-sublabel">${e(sublabel)}</span>
-    </div>
-    <div class="si-vs-stat">${e(stat)}</div>
-    ${renderInlineSpark(sparkRates, color)}
-  </a>`;
-    return `${node('🩺', lang === 'zh' ? '健康度' : 'Structure', '(doctor)', docBand, docPct, docColor, docStat, docPassRates, 'section-doctor')}
-    ${node('🧪', lang === 'zh' ? '评测结果' : 'Test score', '(eval)', evalBand, evalPct, evalColor, evalStat, evalCompositeRates, 'section-eval')}
-    ${node('👁', lang === 'zh' ? '线上观测' : 'Live stability', '(observe)', obsBand, obsPct, obsColor, obsStat, obsStabilityRates, 'section-observe')}`;
-}
-/** doctor section:展示告警 / 失败规则;通过的规则折叠到底部 */
-function renderDoctorSection(snap, lang) {
-    if (!snap) {
-        return `<section id="section-doctor" class="si-sect si-sect--gray">
-      <div class="si-sect-h">🩺 ${lang === 'zh' ? '健康度 (doctor)' : 'Structure (doctor)'}</div>
-      <div class="si-sect-empty">${lang === 'zh' ? '未运行 omk doctor' : 'doctor not run yet'}</div>
-    </section>`;
-    }
-    const getDet = (r) => r.detail;
-    const SORT_ORDER = { fail: 0, warn: 1, skipped: 2, pass: 3 };
-    const dims = snap.results
-        .filter((r) => !r.ruleId.endsWith(':_summary'))
-        .sort((a, b) => (SORT_ORDER[a.status] ?? 9) - (SORT_ORDER[b.status] ?? 9));
-    const STATUS_CFG = {
-        fail: { dot: '🔴', label: lang === 'zh' ? '不通过' : 'fail', cls: 'err' },
-        warn: { dot: '🟡', label: lang === 'zh' ? '告警' : 'warn', cls: 'warn' },
-        pass: { dot: '🟢', label: lang === 'zh' ? '通过' : 'pass', cls: 'pass' },
-        skipped: { dot: '⚪', label: lang === 'zh' ? '跳过' : 'skip', cls: 'skip' },
-    };
-    const renderDimRow = (r) => {
-        const det = getDet(r);
-        const name = det?.displayName ?? r.ruleId;
-        const cfg = STATUS_CFG[r.status] ?? STATUS_CFG.pass;
-        const findings = det?.findings ?? [];
-        const errors = findings.filter((f) => f.level === '错误');
-        const warnings = findings.filter((f) => f.level === '警告');
-        const hasDetails = errors.length > 0 || warnings.length > 0;
-        const badge = (count, type) => {
-            if (!count)
-                return '';
-            const label = type === 'err' ? (lang === 'zh' ? '错误' : 'err') : (lang === 'zh' ? '警告' : 'warn');
-            return `<span class="sd-badge sd-badge--${type}">${count} ${label}</span>`;
-        };
-        const header = `<div class="sd-dim-header">
-      <span class="sd-dim-dot">${cfg.dot}</span>
-      <span class="sd-dim-name">${e(name)}</span>
-      <span class="sd-dim-badges">${badge(errors.length, 'err')}${badge(warnings.length, 'warn')}</span>
-    </div>`;
-        if (!hasDetails)
-            return `<div class="sd-dim sd-dim--${cfg.cls}">${header}</div>`;
-        let body = '';
-        if (errors.length > 0) {
-            body += errors.map((f) => `<div class="sd-item sd-item--err">
-        <div class="sd-item-desc">❌ ${e(f.description ?? '')}</div>
-        ${f.suggestion ? `<div class="sd-item-sug">💡 ${e(f.suggestion)}</div>` : ''}
-      </div>`).join('');
-        }
-        if (warnings.length > 0) {
-            body += `<details class="sd-warn-fold"><summary class="sd-warn-toggle">${lang === 'zh' ? `${warnings.length} 条警告` : `${warnings.length} warning(s)`}</summary>`;
-            body += `<div class="sd-warn-list">${warnings.map((f) => `<div class="sd-item sd-item--warn">
-        <div class="sd-item-desc">⚠️ ${e(f.description ?? '')}</div>
-        ${f.suggestion ? `<div class="sd-item-sug">💡 ${e(f.suggestion)}</div>` : ''}
-      </div>`).join('')}</div>`;
-            body += `</details>`;
-        }
-        return `<details class="sd-dim sd-dim--${cfg.cls}" ${errors.length > 0 ? 'open' : ''}>
-      <summary>${header}</summary>
-      <div class="sd-dim-body">${body}</div>
-    </details>`;
-    };
-    return `<section id="section-doctor" class="si-sect si-sect--${snap.status === 'fail' ? 'red' : snap.status === 'warn' ? 'yellow' : 'green'}">
-    <div class="si-sect-h">
-      <span class="si-sect-title">🩺 ${lang === 'zh' ? '健康度 (doctor)' : 'Structure (doctor)'}</span>
-      <span class="si-sect-meta">${snap.passCount}✓ ${snap.warnCount}⚠ ${snap.failCount}✗ · ${relTime(snap.timestamp, lang)}</span>
-    </div>
-    <div class="sd-grid">
-      ${dims.filter((r) => r.status === 'fail' || r.status === 'warn').map(renderDimRow).join('')}
-      ${dims.filter((r) => r.status === 'pass' || r.status === 'skipped').length > 0
-        ? `<details class="sd-pass-fold"><summary class="sd-pass-toggle">${lang === 'zh'
-            ? `▸ ${dims.filter((r) => r.status === 'pass' || r.status === 'skipped').length} 项通过`
-            : `▸ ${dims.filter((r) => r.status === 'pass' || r.status === 'skipped').length} passed`}</summary>
-          ${dims.filter((r) => r.status === 'pass' || r.status === 'skipped').map(renderDimRow).join('')}
-        </details>`
-        : ''}
-    </div>
-  </section>`;
-}
-/** eval section:失败 sample 列表(默认折叠,展开看 prompt/期望/实际/建议) */
-function renderEvalSection(snap, evalReport, langQ, lang) {
-    if (!snap) {
-        return `<section id="section-eval" class="si-sect si-sect--gray">
-      <div class="si-sect-h">🧪 ${lang === 'zh' ? '评测结果 (eval)' : 'Test score (eval)'}</div>
-      <div class="si-sect-empty">${lang === 'zh' ? '未运行 omk eval' : 'eval not run yet'}</div>
-    </section>`;
-    }
-    const failedSamples = [];
-    const passedSamples = [];
-    const tripwireSamples = [];
-    if (evalReport && snap.variantName) {
-        const variant = snap.variantName;
-        for (const r of evalReport.results) {
-            const v = r.variants?.[variant];
-            if (!v)
-                continue;
-            const sid = r.sample_id;
-            const prompt = evalReport.sampleSnapshots?.[sid]?.prompt ?? '';
-            const promptPreview = prompt.slice(0, 80).replace(/\n+/g, ' ');
-            const passed = (v.assertions?.details ?? []).every((d) => d.passed);
-            const isTripwire = (v.diagnostic?.rootCause ?? []).includes('tripwire_intentional')
-                || evalReport.sampleSnapshots?.[sid]?.tripwire === true;
-            if (isTripwire) {
-                tripwireSamples.push({ sampleId: sid, prompt, promptPreview });
-            }
-            else if (passed) {
-                passedSamples.push({
-                    sampleId: sid, prompt, promptPreview, score: v.compositeScore ?? null,
-                    rubric: evalReport.sampleSnapshots?.[sid]?.rubric ?? '',
-                    output: v.outputPreview ?? '',
-                });
-            }
-            else {
-                failedSamples.push({
-                    sampleId: sid,
-                    diagnosticSummary: v.diagnostic?.summary ?? '',
-                    prompt,
-                    expected: v.diagnostic?.expected ?? '',
-                    actual: v.diagnostic?.actual ?? '',
-                    suggestionSkill: v.diagnostic?.suggestion?.skill ?? '',
-                    suggestionSample: v.diagnostic?.suggestion?.sample ?? '',
-                    failureModes: (v.diagnostic?.failureModes ?? []),
-                    illustration: null,
-                });
-            }
-        }
-    }
-    const total = snap.passCount + snap.failCount;
-    const pct = total > 0 ? Math.round((snap.passCount / total) * 100) : 0;
-    const sectBand = snap.failCount === 0 ? 'green' : snap.passCount === 0 ? 'red' : 'yellow';
-    const failedBlock = failedSamples.length > 0
-        ? failedSamples.map((s) => {
-            const summary = s.diagnosticSummary || (lang === 'zh' ? '(无诊断摘要)' : '(no summary)');
-            const modes = s.failureModes.length > 0
-                ? `<span class="si-failure-modes">${s.failureModes.map((m) => `<span class="si-failure-mode">${e(m)}</span>`).join('')}</span>`
-                : '';
-            const traceLink = `<a class="si-failure-trace" href="/reports/${e(snap.reportId)}${langQ}#sample-${e(s.sampleId)}" onclick="event.stopPropagation()">${lang === 'zh' ? '完整 trace →' : 'full trace →'}</a>`;
-            return `<details class="si-failure-item">
-          <summary class="si-failure-head">
-            <div class="si-failure-row1">
-              <span class="si-sample-dot si-sample-dot--fail">🔴</span>
-              <code class="si-failure-id">${e(s.sampleId)}</code>
-              ${modes}
-              <span class="si-failure-spacer"></span>
-              ${traceLink}
-            </div>
-            <div class="si-failure-row2">${e(summary)}</div>
-          </summary>
-          <div class="si-failure-detail">${renderSampleBody(s, lang)}</div>
-        </details>`;
-        }).join('')
-        : '';
-    // 通过 sample: 可展开看 prompt 全文 + 得分 + trace 链接
-    const renderPassedSample = (s) => {
-        const traceLink = `<a class="si-failure-trace" href="/reports/${e(snap.reportId)}${langQ}#sample-${e(s.sampleId)}" onclick="event.stopPropagation()">${lang === 'zh' ? '完整 trace →' : 'full trace →'}</a>`;
-        const scoreText = s.score != null ? `${s.score.toFixed(1)}/5` : '';
-        return `<details class="si-pass-card">
-      <summary class="si-pass-head">
-        <div class="si-pass-row1">
-          <span class="si-sample-dot">🟢</span>
-          <code class="si-pass-id">${e(s.sampleId)}</code>
-          ${scoreText ? `<span class="si-pass-score">${scoreText}</span>` : ''}
-          <span class="si-failure-spacer"></span>
-          ${traceLink}
-        </div>
-        <div class="si-pass-prompt-preview">${e(s.promptPreview)}${s.prompt.length > 80 ? '…' : ''}</div>
-      </summary>
-      <div class="si-pass-body">
-        <div class="si-pass-section">
-          <div class="si-pass-label">${lang === 'zh' ? '📝 用例 Prompt' : '📝 Prompt'}</div>
-          <div class="si-pass-content">${e(s.prompt)}</div>
-        </div>
-        ${s.rubric ? `<div class="si-pass-section">
-          <div class="si-pass-label">${lang === 'zh' ? '🎯 期望' : '🎯 Expected'}</div>
-          <div class="si-pass-content">${e(s.rubric)}</div>
-        </div>` : ''}
-        ${s.output ? `<div class="si-pass-section">
-          <div class="si-pass-label">${lang === 'zh' ? '✅ 实际输出' : '✅ Actual'}</div>
-          <div class="si-pass-content">${e(s.output)}</div>
-        </div>` : ''}
-      </div>
-    </details>`;
-    };
-    const passedFold = passedSamples.length > 0
-        ? `<details class="si-sect-fold">
-        <summary>${lang === 'zh' ? `▸ 已通过 ${passedSamples.length} 条用例` : `▸ ${passedSamples.length} samples passed`}</summary>
-        <div class="si-sect-fold-body">${passedSamples.map(renderPassedSample).join('')}</div>
-      </details>`
-        : '';
-    const tripwireFold = tripwireSamples.length > 0
-        ? `<details class="si-sect-fold">
-        <summary>${lang === 'zh' ? `▸ 诱错样本 ${tripwireSamples.length} 条(按设计应该失败)` : `▸ ${tripwireSamples.length} tripwire samples (designed to fail)`}</summary>
-        <div class="si-sect-fold-body">${tripwireSamples.map(renderPassedSample).join('')}</div>
-      </details>`
-        : '';
-    const failedHeading = failedSamples.length > 0
-        ? `<div class="si-sect-line">${lang === 'zh' ? `${failedSamples.length} 条用例失败:` : `${failedSamples.length} samples failed:`}</div>`
-        : `<div class="si-sect-allpass">✓ ${lang === 'zh' ? '所有用例通过' : 'all samples pass'}</div>`;
-    // 综合得分 + 六维雷达
-    const variantSummary = evalReport?.summary?.[snap.variantName];
-    const scoreCard = (label, value, max) => {
-        if (value == null)
-            return '';
-        const pctW = Math.round((value / max) * 100);
-        const cls = pctW >= 80 ? 'good' : pctW >= 60 ? 'mid' : 'low';
-        return `<div class="se-score-card">
-      <div class="se-score-label">${e(label)}</div>
-      <div class="se-score-bar"><div class="se-score-fill se-score-fill--${cls}" style="width:${pctW}%"></div></div>
-      <div class="se-score-val">${value.toFixed(2)}<span class="se-score-max">/${max}</span></div>
-    </div>`;
-    };
-    const scoreSummary = variantSummary ? `<div class="se-scores">
-    <div class="se-scores-hero">
-      <div class="se-hero-label">${lang === 'zh' ? '综合得分' : 'Composite'}</div>
-      <div class="se-hero-val">${(variantSummary.avgCompositeScore ?? 0).toFixed(2)}<span class="se-hero-max">/5</span></div>
-      <a class="se-hero-link" href="/reports/${e(snap.reportId)}${langQ}">${lang === 'zh' ? '查看详情 →' : 'Details →'}</a>
-    </div>
-    <div class="se-scores-grid">
-      ${scoreCard(lang === 'zh' ? '事实 / Fact' : 'Fact', variantSummary.avgFactScore, 5)}
-      ${scoreCard(lang === 'zh' ? '行为 / Behavior' : 'Behavior', variantSummary.avgAssertionScore, 5)}
-      ${scoreCard(lang === 'zh' ? 'LLM 评价 / Judge' : 'Judge', variantSummary.avgJudgeScore, 5)}
-      ${scoreCard(lang === 'zh' ? '工具成功率' : 'Tool success', variantSummary.toolSuccessRate != null ? variantSummary.toolSuccessRate * 100 : null, 100)}
-      ${scoreCard(lang === 'zh' ? 'Trace 覆盖率' : 'Trace coverage', variantSummary.traceCoverageRate != null ? variantSummary.traceCoverageRate * 100 : null, 100)}
-      ${scoreCard(lang === 'zh' ? '平均轮次' : 'Avg turns', variantSummary.avgNumTurns, 20)}
-    </div>
-  </div>` : '';
-    return `<section id="section-eval" class="si-sect si-sect--${sectBand}">
-    <div class="si-sect-h">
-      <span class="si-sect-title">🧪 ${lang === 'zh' ? '评测结果 (eval)' : 'Test score (eval)'}</span>
-      <span class="si-sect-meta">${snap.totalSamples} ${lang === 'zh' ? '用例' : 'samples'} · ${pct}% ${lang === 'zh' ? '通过' : 'pass'}${snap.compositeScore != null ? ` · ${snap.compositeScore.toFixed(2)}/5` : ''} · ${relTime(snap.timestamp, lang)}</span>
-    </div>
-    <div class="si-sect-body">
-      ${scoreSummary}
-      ${failedHeading}
-      ${failedBlock}
-      ${passedFold}
-      ${tripwireFold}
-      <a class="si-sect-link" href="/reports/${e(snap.reportId)}${langQ}">${lang === 'zh' ? '完整 A/B 报告 →' : 'Full A/B report →'}</a>
-    </div>
-  </section>`;
-}
-/** observe section:展示异常指标(gap / 工具失败率) */
-function renderObserveSection(snap, langQ, lang) {
-    if (!snap) {
-        return `<section id="section-observe" class="si-sect si-sect--gray">
-      <div class="si-sect-h">👁 ${lang === 'zh' ? '线上观测 (observe)' : 'Live stability (observe)'}</div>
-      <div class="si-sect-empty">${lang === 'zh' ? '未跑 omk observe' : 'observe not run yet'}</div>
-    </section>`;
-    }
-    const gapPct = (snap.gapRate * 100).toFixed(0);
-    const failPct = (snap.failureRate * 100).toFixed(1);
-    const alerts = [];
-    if (snap.gapRate >= 0.2) {
-        alerts.push(`<div class="si-rule si-rule--warn">
-      <div class="si-rule-head">
-        <span class="si-rule-icon">⚠</span>
-        <code class="si-rule-id">${lang === 'zh' ? '知识库 gap' : 'KB gap'}</code>
-        <span class="si-rule-msg">${gapPct}% ${lang === 'zh' ? '段命中知识库 gap — LLM 找不到该读哪段' : 'segments hit knowledge gap'}</span>
-      </div>
-    </div>`);
-    }
-    if (snap.failureRate >= 0.2) {
-        alerts.push(`<div class="si-rule si-rule--warn">
-      <div class="si-rule-head">
-        <span class="si-rule-icon">⚠</span>
-        <code class="si-rule-id">${lang === 'zh' ? '工具失败率' : 'tool fail rate'}</code>
-        <span class="si-rule-msg">${failPct}% ${lang === 'zh' ? '工具调用失败 — 可能环境问题或 skill 让 LLM 走错路径' : 'tool calls failing'}</span>
-      </div>
-    </div>`);
-    }
-    const body = alerts.length > 0
-        ? alerts.join('')
-        : `<div class="si-sect-allpass">✓ ${lang === 'zh' ? '生产观测健康' : 'production observation healthy'}</div>`;
-    return `<section id="section-observe" class="si-sect si-sect--${snap.healthBand}">
-    <div class="si-sect-h">
-      <span class="si-sect-title">👁 ${lang === 'zh' ? '线上观测 (observe)' : 'Live stability (observe)'}</span>
-      <span class="si-sect-meta">${snap.segmentCount} ${lang === 'zh' ? '段' : 'segs'} · gap ${gapPct}% · ${lang === 'zh' ? '工具失败率' : 'tool fail'} ${failPct}% · ${relTime(snap.generatedAt, lang)}</span>
-    </div>
-    <div class="si-sect-body">
-      ${body}
-      <a class="si-sect-link" href="/analyses/${e(snap.analysisId)}${langQ}">${lang === 'zh' ? '完整观测报告 →' : 'Full observation report →'}</a>
-    </div>
-  </section>`;
-}
-// ────────── 主入口 ──────────
-export function renderSkillDetail(entry, evalReport, lang = DEFAULT_LANG, insights = []) {
-    const langQ = lang === DEFAULT_LANG ? '' : `?lang=${lang}`;
-    const reportCount = [entry.doctor, entry.eval, entry.observe].filter(Boolean).length;
-    const lastTs = [entry.doctor?.timestamp, entry.eval?.timestamp, entry.observe?.generatedAt]
-        .filter((s) => Boolean(s)).sort().pop();
-    return layout(entry.skillName, `
-    <main>
-      <a class="si-back" href="/${langQ}">${lang === 'zh' ? '← 返回 Skills' : '← Back to Skills'}</a>
-      ${renderHero(entry, insights, lastTs, reportCount, lang)}
-
-      <div class="si-overview">
-        <section class="si-overview-cards" aria-label="${lang === 'zh' ? '三视角速览' : 'View summary'}">
-          ${renderViewSummaryCards(entry, lang)}
-        </section>
-        <section class="si-overview-trend">
-          <div class="si-trend-h">📈 ${lang === 'zh' ? '健康趋势(0-100%)' : 'Trend (0-100%)'}</div>
-          ${renderTrendChart(entry, langQ, lang)}
-        </section>
-      </div>
-
-      ${renderDoctorSection(entry.doctor, lang)}
-      ${renderEvalSection(entry.eval, evalReport, langQ, lang)}
-      ${renderObserveSection(entry.observe, langQ, lang)}
-    </main>
-    <style>${SKILL_DETAIL_CSS}</style>
-    ${TREND_INIT_SCRIPT}
-  `, lang);
-}
-//# sourceMappingURL=skill-detail-renderer.js.map