feat(webapp): add optimization advice section to report UI

- index.html: add section ⑤ advice block (hidden by default, shown when advice_markdown present)
- report.js: add renderAdvice() called in render(), simple Markdown→HTML converter
- app.js: add noise_sensitivity / factual_correctness / semantic_similarity to shortMetric map
- app.css: add .advice-panel, .advice-badge, .advice-md styles (purple left-border theme)

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

webapp/static/js/report.js

@@ -26,6 +26,7 @@ const Report = {
       Report.renderDistribution(detail.report);
       Report.renderGroupings(detail.report);
       Report.renderLowest(detail.report);
+      Report.renderAdvice(detail.summary, detail.report);
       content.style.opacity = "1";
     } catch (err) {
       empty.hidden = false;
@@ -186,8 +187,7 @@ const Report = {
   },
 
   // ④ 最低分样本逐条复核表（点击展开）。
-  renderLowest(report) {
-    const wrap = document.getElementById("lowest-table");
+  renderLowest(report) {    const wrap = document.getElementById("lowest-table");
     const samples = report.lowest_samples || [];
     wrap.innerHTML = "";
     if (samples.length === 0) {
@@ -255,4 +255,35 @@ const Report = {
       </div>
     `;
   },
+
+  // ⑤ 优化建议（仅 optimization_advice.md 存在时渲染）。
+  renderAdvice(summary, report) {
+    const section = document.getElementById("advice-section");
+    const body = document.getElementById("advice-body");
+    const modelLabel = document.getElementById("advice-model-label");
+
+    const md = report.advice_markdown || "";
+    if (!md.trim()) {
+      section.hidden = true;
+      return;
+    }
+
+    section.hidden = false;
+    modelLabel.textContent = summary.judge_model ? `judge: ${summary.judge_model}` : "";
+
+    // 简单 Markdown → HTML 转换（标题、列表、分隔线、粗体）
+    const escaped = md
+      .replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+    const html = escaped
+      .replace(/^#{3}\s+(.+)$/gm, "<h3>$1</h3>")
+      .replace(/^#{2}\s+(.+)$/gm, "<h2>$1</h2>")
+      .replace(/^#{1}\s+(.+)$/gm, "<h1>$1</h1>")
+      .replace(/^---+$/gm, "<hr>")
+      .replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>")
+      .replace(/^- (.+)$/gm, "<li>$1</li>")
+      .replace(/(<li>[^]*?<\/li>\n?)+/g, (m) => `<ul>${m}</ul>`)
+      .replace(/\n\n+/g, "\n<br>\n");
+
+    body.innerHTML = `<div class="advice-md">${html}</div>`;
+  },
 };