oh-my-knowledge 0.28.0 → 0.30.0

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

@@ -0,0 +1,1234 @@
+/**
+ * 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