From 54fc1baa4c908acf22796bc3d7d2a8d2969a8e62 Mon Sep 17 00:00:00 2001
From: bruce <sunzhiye01@outlook.com>
Date: Wed, 3 Jun 2026 22:31:23 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=8E=9F=E5=9E=8B=E8=AE=BE=E8=AE=A1):=20?=
 =?UTF-8?q?=E5=A2=9E=E5=BC=BA=E5=BC=BAAgent=E5=AF=B9=E8=AF=9D=E5=B7=A5?=
 =?UTF-8?q?=E4=BD=9C=E5=8F=B0=E5=8E=9F=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../原型设计/registration-prototype-demo.html | 1365 +++++++++++------
 1 file changed, 903 insertions(+), 462 deletions(-)

diff --git a/docs/原型设计/registration-prototype-demo.html b/docs/原型设计/registration-prototype-demo.html
index c3d047f..4440f66 100644
--- a/docs/原型设计/registration-prototype-demo.html
+++ b/docs/原型设计/registration-prototype-demo.html
@@ -6,24 +6,27 @@
   <title>注册审核平台原型演示站</title>
   <style>
     :root {
-      --bg: #edf2f6;
-      --bg-strong: #dfe8ef;
-      --panel: rgba(255, 255, 255, 0.92);
+      --bg: #eef2f5;
+      --bg-strong: #d9e1e8;
+      --panel: #ffffff;
       --panel-strong: #ffffff;
-      --ink: #122233;
-      --muted: #5f7285;
-      --line: #d5dee6;
-      --navy: #153d62;
-      --teal: #1f6b7a;
-      --accent: #d6803b;
-      --danger: #b54a34;
-      --success: #2f7d57;
-      --warning: #cb8a2f;
-      --shadow: 0 18px 40px rgba(28, 48, 73, 0.12);
-      --radius-xl: 28px;
-      --radius-lg: 20px;
-      --radius-md: 14px;
-      --radius-sm: 10px;
+      --ink: #132535;
+      --muted: #627588;
+      --line: #d7e0e7;
+      --line-strong: #c4d0da;
+      --navy: #173a58;
+      --navy-strong: #112b42;
+      --teal: #245d69;
+      --accent: #b77a39;
+      --danger: #a94731;
+      --success: #2f6a4b;
+      --warning: #b8802f;
+      --shadow: 0 8px 18px rgba(23, 41, 61, 0.06);
+      --shadow-strong: 0 12px 24px rgba(18, 35, 53, 0.08);
+      --radius-xl: 10px;
+      --radius-lg: 8px;
+      --radius-md: 6px;
+      --radius-sm: 4px;
     }
 
     * {
@@ -35,9 +38,7 @@
       font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
       color: var(--ink);
       background:
-        radial-gradient(circle at top left, rgba(59, 108, 143, 0.18), transparent 30%),
-        radial-gradient(circle at bottom right, rgba(215, 128, 59, 0.14), transparent 30%),
-        linear-gradient(180deg, #f6f9fb 0%, #edf2f6 100%);
+        linear-gradient(180deg, #f5f7f9 0%, #edf2f5 100%);
     }
 
     a {
@@ -61,19 +62,20 @@
       position: sticky;
       top: 0;
       height: 100vh;
-      padding: 24px 18px;
-      background: linear-gradient(180deg, #163754 0%, #10283f 100%);
+      padding: 18px 14px;
+      background: linear-gradient(180deg, #173754 0%, #122c43 100%);
       color: rgba(255, 255, 255, 0.94);
       display: flex;
       flex-direction: column;
-      gap: 18px;
+      gap: 12px;
+      border-right: 1px solid rgba(255, 255, 255, 0.08);
     }
 
     .brand {
-      padding: 18px;
+      padding: 16px;
       border-radius: var(--radius-lg);
-      background: rgba(255, 255, 255, 0.08);
-      border: 1px solid rgba(255, 255, 255, 0.1);
+      background: rgba(255, 255, 255, 0.06);
+      border: 1px solid rgba(255, 255, 255, 0.08);
     }
 
     .brand h1 {
@@ -105,9 +107,9 @@
 
     .nav-btn {
       width: 100%;
-      padding: 14px 16px;
-      border-radius: 14px;
-      background: rgba(255, 255, 255, 0.06);
+      padding: 12px 14px;
+      border-radius: var(--radius-md);
+      background: rgba(255, 255, 255, 0.03);
       color: white;
       text-align: left;
       border: 1px solid transparent;
@@ -122,20 +124,21 @@
 
     .nav-btn.active,
     .nav-btn:hover {
-      background: rgba(255, 255, 255, 0.14);
+      background: rgba(255, 255, 255, 0.09);
       border-color: rgba(255, 255, 255, 0.12);
-      transform: translateX(2px);
+      transform: none;
     }
 
     .sidebar-summary {
       margin-top: auto;
       padding: 16px;
       border-radius: var(--radius-lg);
-      background: rgba(255, 255, 255, 0.08);
+      background: rgba(255, 255, 255, 0.06);
+      border: 1px solid rgba(255, 255, 255, 0.08);
     }
 
     .main {
-      padding: 22px 24px 30px;
+      padding: 16px 18px 24px;
     }
 
     .topbar {
@@ -143,18 +146,18 @@
       justify-content: space-between;
       gap: 16px;
       align-items: center;
-      padding: 18px 22px;
+      padding: 16px 18px;
       border-radius: var(--radius-xl);
-      background: rgba(255, 255, 255, 0.84);
-      border: 1px solid rgba(255, 255, 255, 0.8);
+      background: #ffffff;
+      border: 1px solid var(--line);
       box-shadow: var(--shadow);
-      backdrop-filter: blur(18px);
-      margin-bottom: 22px;
+      margin-bottom: 16px;
     }
 
     .topbar h2 {
       margin: 0 0 6px;
-      font-size: 26px;
+      font-size: 22px;
+      letter-spacing: 0.01em;
     }
 
     .status-row,
@@ -174,19 +177,20 @@
       display: inline-flex;
       align-items: center;
       gap: 6px;
-      padding: 7px 12px;
+      padding: 6px 10px;
       border-radius: 999px;
       font-size: 12px;
       font-weight: 700;
     }
 
     .status-chip {
-      background: #edf5ff;
-      color: var(--navy);
+      background: #eef3f8;
+      color: #264764;
+      border: 1px solid #d6e0ea;
     }
 
     .tag {
-      background: #f5f7fa;
+      background: #f6f8fa;
       color: var(--muted);
       border: 1px solid var(--line);
     }
@@ -209,27 +213,28 @@
 
     .primary-btn,
     .secondary-btn {
-      padding: 11px 16px;
-      border-radius: 12px;
+      padding: 10px 14px;
+      border-radius: var(--radius-md);
       font-weight: 700;
     }
 
     .primary-btn {
-      background: linear-gradient(135deg, #1d5b8f 0%, #123c62 100%);
+      background: linear-gradient(180deg, #214b74 0%, #163754 100%);
       color: white;
-      box-shadow: 0 10px 24px rgba(21, 61, 98, 0.24);
+      box-shadow: none;
+      border: 1px solid #153754;
     }
 
     .secondary-btn,
     .mini-btn {
       background: white;
       color: var(--ink);
-      border: 1px solid var(--line);
+      border: 1px solid var(--line-strong);
     }
 
     .mini-btn {
-      padding: 8px 10px;
-      border-radius: 10px;
+      padding: 7px 10px;
+      border-radius: var(--radius-md);
       font-size: 12px;
       font-weight: 700;
     }
@@ -247,16 +252,15 @@
       display: grid;
       grid-template-columns: 1.35fr 1fr;
       gap: 18px;
-      margin-bottom: 18px;
+      margin-bottom: 16px;
     }
 
     .panel {
       background: var(--panel);
-      border: 1px solid rgba(255, 255, 255, 0.8);
+      border: 1px solid var(--line);
       border-radius: var(--radius-xl);
       box-shadow: var(--shadow);
-      padding: 20px;
-      backdrop-filter: blur(18px);
+      padding: 18px;
     }
 
     .panel h3,
@@ -273,24 +277,24 @@
       display: grid;
       grid-template-columns: repeat(4, minmax(0, 1fr));
       gap: 14px;
-      margin-bottom: 18px;
+      margin-bottom: 16px;
     }
 
     .metric-card,
     .task-card,
     .info-card {
       border-radius: var(--radius-lg);
-      padding: 18px;
+      padding: 16px;
       background: var(--panel-strong);
       border: 1px solid var(--line);
     }
 
     .metric-card strong {
       display: block;
-      font-size: 30px;
-      margin-top: 10px;
+      font-size: 28px;
+      margin-top: 8px;
       line-height: 1;
-      color: var(--navy);
+      color: var(--navy-strong);
     }
 
     .section-title {
@@ -315,7 +319,7 @@
       display: grid;
       grid-template-columns: repeat(4, minmax(0, 1fr));
       gap: 14px;
-      margin-bottom: 18px;
+      margin-bottom: 12px;
     }
 
     .task-card {
@@ -325,21 +329,22 @@
     }
 
     .task-card.active {
-      border-color: rgba(21, 61, 98, 0.28);
-      box-shadow: 0 18px 34px rgba(21, 61, 98, 0.12);
+      border-color: #8da4b8;
+      box-shadow: none;
+      background: #fbfdff;
     }
 
     .task-card.active::after {
       content: "";
       position: absolute;
       inset: 0;
-      border-top: 5px solid var(--navy);
+      border-top: 3px solid var(--navy);
       border-radius: inherit;
     }
 
     .task-card h4 {
       margin: 0 0 8px;
-      font-size: 17px;
+      font-size: 16px;
     }
 
     .task-card p {
@@ -347,7 +352,7 @@
       color: var(--muted);
       min-height: 36px;
       line-height: 1.5;
-      font-size: 13px;
+      font-size: 12px;
     }
 
     .task-meta {
@@ -397,10 +402,10 @@
     .issue-item,
     .check-item,
     .governance-row {
-      padding: 14px;
-      border-radius: 14px;
-      background: #f8fafc;
-      border: 1px solid #e1e8ee;
+      padding: 12px;
+      border-radius: var(--radius-md);
+      background: #f8fafb;
+      border: 1px solid #dbe4eb;
     }
 
     .tree-node button {
@@ -471,9 +476,9 @@
 
     .evidence {
       padding: 14px;
-      border-radius: 16px;
-      background: linear-gradient(180deg, #f6f9fd 0%, #edf3f8 100%);
-      border: 1px solid #dbe5ef;
+      border-radius: var(--radius-md);
+      background: #f5f8fb;
+      border: 1px solid #d6e1ea;
       line-height: 1.7;
       color: #2f4358;
     }
@@ -485,7 +490,7 @@
 
     .alert {
       padding: 14px 16px;
-      border-radius: 16px;
+      border-radius: var(--radius-md);
       border: 1px solid;
       font-size: 14px;
       line-height: 1.65;
@@ -515,10 +520,9 @@
       right: -720px;
       width: min(720px, 100vw);
       height: 100vh;
-      background: rgba(248, 251, 253, 0.97);
-      backdrop-filter: blur(18px);
-      box-shadow: -24px 0 40px rgba(14, 29, 43, 0.2);
-      border-left: 1px solid rgba(255, 255, 255, 0.7);
+      background: #f7fafc;
+      box-shadow: -16px 0 24px rgba(14, 29, 43, 0.12);
+      border-left: 1px solid var(--line);
       transition: right 0.28s ease;
       z-index: 20;
       display: flex;
@@ -557,7 +561,7 @@
       padding: 10px 12px;
       border-radius: 999px;
       background: white;
-      border: 1px solid var(--line);
+      border: 1px solid var(--line-strong);
       color: var(--muted);
       font-weight: 700;
     }
@@ -584,11 +588,11 @@
     }
 
     .message-card {
-      border-radius: 22px;
-      background: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
-      border: 1px solid #dce5ec;
-      padding: 20px;
-      box-shadow: 0 16px 28px rgba(24, 40, 54, 0.1);
+      border-radius: var(--radius-lg);
+      background: #ffffff;
+      border: 1px solid #d6e0e7;
+      padding: 18px;
+      box-shadow: none;
     }
 
     .message-card .card-head {
@@ -615,9 +619,9 @@
       align-items: center;
       gap: 12px;
       padding: 16px;
-      border-radius: 16px;
-      background: #f6fafc;
-      border: 1px dashed #bad0df;
+      border-radius: var(--radius-md);
+      background: #f7fafc;
+      border: 1px solid #cfdae3;
     }
 
     .copy-grid {
@@ -626,6 +630,170 @@
       gap: 14px;
     }
 
+    .workspace-main {
+      display: grid;
+      grid-template-columns: 1.5fr 0.95fr;
+      gap: 16px;
+      margin-top: 16px;
+    }
+
+    .agent-shell {
+      display: grid;
+      gap: 12px;
+    }
+
+    .prompt-bar {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .prompt-chip {
+      padding: 8px 12px;
+      border-radius: var(--radius-md);
+      background: #f3f6f9;
+      border: 1px solid var(--line);
+      color: var(--navy-strong);
+      font-size: 12px;
+      font-weight: 700;
+    }
+
+    .conversation-board {
+      display: grid;
+      gap: 12px;
+    }
+
+    .message {
+      border: 1px solid var(--line);
+      border-radius: var(--radius-lg);
+      background: #ffffff;
+      overflow: hidden;
+    }
+
+    .message.user {
+      border-color: #cdd9e2;
+      background: #f7fafc;
+    }
+
+    .message.agent {
+      border-color: #cfdae3;
+      background: #ffffff;
+    }
+
+    .message.tool {
+      border-color: #d7dfe6;
+      background: #fbfcfd;
+    }
+
+    .message.system {
+      border-color: #d9e1e8;
+      background: #f6f8fa;
+    }
+
+    .message-head {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 10px;
+      padding: 10px 14px;
+      border-bottom: 1px solid #e6edf2;
+      background: #f7fafc;
+    }
+
+    .message.user .message-head {
+      background: #eef4f8;
+    }
+
+    .message.agent .message-head {
+      background: #f5f8fb;
+    }
+
+    .message-body {
+      padding: 14px;
+      line-height: 1.75;
+      color: #314659;
+    }
+
+    .message-body p {
+      margin: 0 0 10px;
+    }
+
+    .message-body p:last-child {
+      margin-bottom: 0;
+    }
+
+    .trace-grid {
+      display: grid;
+      gap: 10px;
+      margin-top: 12px;
+    }
+
+    .trace-item {
+      padding: 12px;
+      border-radius: var(--radius-md);
+      border: 1px solid #dbe4eb;
+      background: #f8fafb;
+    }
+
+    .trace-item strong {
+      display: block;
+      margin-bottom: 6px;
+    }
+
+    .review-actions {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-top: 12px;
+    }
+
+    .review-btn {
+      padding: 8px 12px;
+      border-radius: var(--radius-md);
+      border: 1px solid var(--line-strong);
+      background: #ffffff;
+      color: var(--ink);
+      font-size: 12px;
+      font-weight: 700;
+    }
+
+    .review-btn.primary {
+      background: #173754;
+      border-color: #173754;
+      color: #ffffff;
+    }
+
+    .page-agent-grid {
+      display: grid;
+      grid-template-columns: 1.35fr 0.95fr;
+      gap: 16px;
+      margin-top: 16px;
+    }
+
+    .page-agent-side {
+      display: grid;
+      gap: 16px;
+    }
+
+    .agent-mini-panel {
+      display: grid;
+      gap: 12px;
+    }
+
+    .agent-q-list {
+      display: grid;
+      gap: 8px;
+    }
+
+    .agent-q-item {
+      padding: 10px 12px;
+      border: 1px solid var(--line);
+      border-radius: var(--radius-md);
+      background: #f8fafb;
+      font-size: 13px;
+      color: #314659;
+    }
+
     .list-inline {
       display: flex;
       flex-wrap: wrap;
@@ -672,7 +840,9 @@
       .two-col,
       .tri-col,
       .split,
-      .subsplit {
+      .subsplit,
+      .workspace-main,
+      .page-agent-grid {
         grid-template-columns: 1fr;
       }
 
@@ -881,6 +1051,121 @@
         receipt: { id: "om_demo_message_20260603_103000", time: "2026-06-03 10:30:00" },
         webLink: "http://localhost:8000/audit/1001/",
       },
+      agent: {
+        quickPrompts: [
+          "检查当前资料完整性",
+          "抽取本批次核心字段",
+          "解释产品名称冲突原因",
+          "生成整改建议和责任人分发"
+        ],
+        workspaceConversation: [
+          {
+            role: "user",
+            title: "用户指令",
+            meta: "10:05 · 审核任务工作台",
+            body: [
+              "请基于当前批次资料，按注册申报流程完成完整性检查、字段抽取、一致性核查，并给出风险结论。"
+            ]
+          },
+          {
+            role: "agent",
+            title: "Agent 计划",
+            meta: "10:05 · orchestration",
+            body: [
+              "我将按 5 个阶段执行：读取资料包目录 -> 加载法规规则包 -> 抽取统一字段池 -> 执行强一致比对 -> 汇总风险并判断是否允许导出。",
+              "当前建议优先关注 CH1 监管信息和说明书相关字段。"
+            ]
+          },
+          {
+            role: "tool",
+            title: "工具调用记录",
+            meta: "10:06 · tools",
+            body: [
+              "已调用 `scan_submission_package`、`check_nmpa_completeness`、`extract_product_fields`、`compare_field_consistency`、`build_risk_alerts`。",
+              "RAG 命中来源包括《体外诊断试剂注册申报资料要求及说明》与目标产品说明书切片。"
+            ]
+          },
+          {
+            role: "system",
+            title: "结构化结论",
+            meta: "10:09 · result",
+            body: [
+              "完整性检查：发现 1 个缺失项、1 个错放项。",
+              "字段抽取：13 个目标字段中 12 个已抽取，1 个待复核。",
+              "一致性核查：产品名称存在冲突，疑似混档。",
+              "综合风险：高风险，不允许正式导出，仅允许生成草稿。"
+            ]
+          }
+        ],
+        workspaceTrace: [
+          { label: "当前任务", value: "注册申报审核闭环执行" },
+          { label: "命中规则", value: "nmpa_ivd_registration_v1 / ivd_strict_consistency_v1" },
+          { label: "工具链路", value: "资料扫描 -> 完整性检查 -> 字段抽取 -> 一致性 -> 风险汇总" },
+          { label: "人工复核点", value: "储存条件字段 / 产品名称冲突 / CH1 缺失项确认" }
+        ],
+        pagePanels: {
+          completeness: {
+            question: "为什么 CH1.11.4 会被判定为缺失？",
+            answer: "Agent 先读取目录汇总结果，再将 CH1 章节与法规规则包逐项匹配。规则要求 CH1.11.4 属于必交声明类资料，但当前资料包未识别到有效命中文档，因此判定为缺失。RAG 证据仅用于引用法规原文，不改变规则结论。",
+            trace: [
+              "规则命中：CH1.11.4 -> 必交项 -> 默认高风险",
+              "证据来源：法规要求说明 / CH1 监管信息章节",
+              "建议动作：补充资料后重跑完整性检查"
+            ],
+            actions: ["确认缺失项", "标记疑似命中", "发起补件通知"]
+          },
+          fields: {
+            question: "储存条件为什么是待复核，而不是直接回填？",
+            answer: "该字段来自申请表表格抽取，原文字段表述较模糊，和说明书标准口径未形成稳定一对一映射。Agent 将其保留在字段池中，但置信度标记为低，并要求人工确认后才能进入正式导出。",
+            trace: [
+              "抽取方式：表格抽取 + 标准化",
+              "字段状态：manual_review_required = true",
+              "影响范围：正式导出时触发阻断"
+            ],
+            actions: ["采用推荐值", "驳回推荐值", "重新抽取"]
+          },
+          consistency: {
+            question: "产品名称冲突为什么会被上升为混档风险？",
+            answer: "因为当前审核范围内的说明书与申请表属于同一批次业务资料，而强一致规则要求产品名称必须完全一致。两份文档标准化后仍不一致，因此 Agent 将其识别为字段冲突，并进一步提示疑似跨产品资料混入。",
+            trace: [
+              "强一致字段：product_name",
+              "来源文档：目标产品说明书 / CH1.4 申请表",
+              "处理建议：先确认审核范围，再继续导出"
+            ],
+            actions: ["确认混档风险", "排除文档后重跑", "采用说明书版本"]
+          },
+          risk: {
+            question: "为什么最终是不通过，而不是待复核？",
+            answer: "风险规则中配置了 high_risk_policy = fail。当前批次同时存在缺失必交资料和产品名称冲突两个高风险项，因此 Agent 直接给出不通过结论，而不是仅提示待复核。",
+            trace: [
+              "风险规则：ivd_registration_risk_v1",
+              "高风险项：缺失必交资料 / 产品名称冲突",
+              "下游影响：正式导出阻断 / 飞书通知责任人"
+            ],
+            actions: ["确认风险结论", "生成整改任务", "推送飞书通知"]
+          },
+          word: {
+            question: "为什么只能生成草稿版，不能正式导出？",
+            answer: "Word 导出步骤会读取一致性核查和风险预警结果。当前批次存在高风险和待复核字段，因此回填拦截检查命中正式导出阻断条件，Agent 只允许生成带审阅用途的草稿版。",
+            trace: [
+              "模板：registration_application_form_v1",
+              "阻断原因：高风险 + 冲突字段 + 待复核字段",
+              "导出策略：allow_draft_when_blocked = true"
+            ],
+            actions: ["生成草稿", "查看阻断详情", "整改后重试"]
+          },
+          notification: {
+            question: "飞书通知里为什么要同时 @ 两个责任人？",
+            answer: "因为责任人映射同时命中了章节缺失和风险类型冲突两类规则。CH1 缺失项对应注册申报负责人，产品名称冲突对应注册资料负责人，所以 Agent 在同一张消息卡片中同时 @ 两位责任人，并附上 Web 详情入口。",
+            trace: [
+              "责任人映射：CH1 -> 注册资料负责人",
+              "风险映射：missing_required_document -> 注册申报负责人",
+              "通知载荷：interactive_card + Web detail URL"
+            ],
+            actions: ["发送通知", "切换消息模板", "查看回执日志"]
+          }
+        }
+      },
       governance: [
         {
           id: "rules",
@@ -1005,6 +1290,89 @@
       `).join("")}</div>`;
     }
 
+    function renderAgentConversation(messages) {
+      return `
+        <div class="conversation-board">
+          ${messages.map(message => `
+            <div class="message ${message.role}">
+              <div class="message-head">
+                <strong>${message.title}</strong>
+                <span class="tag">${message.meta}</span>
+              </div>
+              <div class="message-body">
+                ${message.body.map(line => `<p>${line}</p>`).join("")}
+              </div>
+            </div>
+          `).join("")}
+        </div>
+      `;
+    }
+
+    function renderTraceItems(items) {
+      return `
+        <div class="trace-grid">
+          ${items.map(item => `
+            <div class="trace-item">
+              <strong>${item.label || item}</strong>
+              ${item.value ? `<div class="muted" style="color:#5f7285;">${item.value}</div>` : ""}
+            </div>
+          `).join("")}
+        </div>
+      `;
+    }
+
+    function renderAgentSidePanel(key, title) {
+      const panel = data.agent.pagePanels[key];
+      if (!panel) return "";
+
+      return `
+        <div class="page-agent-side">
+          <div class="panel">
+            <div class="section-title">
+              <div>
+                <h3>Agent 页面追问</h3>
+                <p>${title}中的解释型对话与证据追溯。</p>
+              </div>
+            </div>
+            <div class="agent-mini-panel">
+              <div class="message user">
+                <div class="message-head">
+                  <strong>追问</strong>
+                  <span class="tag">用户</span>
+                </div>
+                <div class="message-body">
+                  <p>${panel.question}</p>
+                </div>
+              </div>
+              <div class="message agent">
+                <div class="message-head">
+                  <strong>Agent 解释</strong>
+                  <span class="tag">当前页面上下文</span>
+                </div>
+                <div class="message-body">
+                  <p>${panel.answer}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="panel">
+            <div class="section-title">
+              <div>
+                <h3>执行轨迹</h3>
+                <p>说明这个结论是怎么来的。</p>
+              </div>
+            </div>
+            <div class="agent-q-list">
+              ${panel.trace.map(item => `<div class="agent-q-item">${item}</div>`).join("")}
+            </div>
+            <div class="review-actions">
+              ${panel.actions.map((action, index) => `<button class="review-btn ${index === 0 ? "primary" : ""}">${action}</button>`).join("")}
+            </div>
+          </div>
+        </div>
+      `;
+    }
+
     function renderWorkspacePage() {
       return `
         <section class="page active" data-page="workspace">
@@ -1106,6 +1474,49 @@
               </div>
             </div>
           </div>
+          <div class="workspace-main">
+            <div class="agent-shell">
+              <div class="panel">
+                <div class="section-title">
+                  <div>
+                    <h3>Agent 主对话区</h3>
+                    <p>体现用户指令、Agent 计划、工具调用和结构化结论的多轮协作过程。</p>
+                  </div>
+                </div>
+                <div class="prompt-bar">
+                  ${data.agent.quickPrompts.map(prompt => `<span class="prompt-chip">${prompt}</span>`).join("")}
+                </div>
+                <div style="margin-top:12px;">
+                  ${renderAgentConversation(data.agent.workspaceConversation)}
+                </div>
+              </div>
+            </div>
+            <div class="page-agent-side">
+              <div class="panel">
+                <div class="section-title">
+                  <div>
+                    <h3>Agent 执行轨迹</h3>
+                    <p>把这次审核从“聊天”升级为“可追踪执行”。</p>
+                  </div>
+                </div>
+                ${renderTraceItems(data.agent.workspaceTrace)}
+              </div>
+              <div class="panel">
+                <div class="section-title">
+                  <div>
+                    <h3>人工复核协同</h3>
+                    <p>支持人机共审，而不是单向回答。</p>
+                  </div>
+                </div>
+                <div class="review-actions">
+                  <button class="review-btn primary">确认当前结论</button>
+                  <button class="review-btn">采用说明书值</button>
+                  <button class="review-btn">重新执行一致性核查</button>
+                  <button class="review-btn">生成整改任务</button>
+                </div>
+              </div>
+            </div>
+          </div>
         </section>
       `;
     }
@@ -1243,96 +1654,101 @@
       return `
         <section class="page" data-page="completeness">
           ${metricCards(data.completeness.summary.map(item => ({ label: item.label, value: item.value, note: "" })))}
-          <div class="split">
-            <div class="panel">
-              <div class="section-title">
-                <div>
-                  <h3>法规目录树</h3>
-                  <p>按章节展示匹配情况和缺失项。</p>
-                </div>
-                <button class="secondary-btn" data-open-governance="rules">查看规则包</button>
-              </div>
-              <div class="tree">
-                <div class="tree-node expanded">
-                  <button type="button" class="tree-toggle">▾ CH1 监管信息</button>
-                  <div class="tree-children" style="display:grid;">
-                    <div class="tree-node-child">CH1.2 已匹配</div>
-                    <div class="tree-node-child">CH1.4 已匹配</div>
-                    <div class="tree-node-child">CH1.9 疑似错放</div>
-                    <div class="tree-node-child">CH1.11.4 缺失</div>
-                  </div>
-                </div>
-                <div class="tree-node">
-                  <button type="button" class="tree-toggle">▸ CH2 产品综述资料</button>
-                  <div class="tree-children">
-                    <div class="tree-node-child">待展开</div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="panel">
-              <div class="section-title">
-                <div>
-                  <h3>缺失项 / 错放项</h3>
-                  <p>聚焦当前最值得讲解的完整性问题。</p>
-                </div>
-              </div>
-              <div class="issue-list">
-                ${data.completeness.issues.map(item => `
-                  <div class="issue-item">
-                    <div class="split-actions" style="justify-content: space-between;">
-                      <strong>${item.chapter} ${item.name}</strong>
-                      <span class="tag ${item.risk === "高" ? "high" : item.risk === "中" ? "medium" : ""}">${item.type} / ${item.risk}</span>
+          <div class="page-agent-grid">
+            <div>
+              <div class="split">
+                <div class="panel">
+                  <div class="section-title">
+                    <div>
+                      <h3>法规目录树</h3>
+                      <p>按章节展示匹配情况和缺失项。</p>
+                    </div>
+                    <button class="secondary-btn" data-open-governance="rules">查看规则包</button>
+                  </div>
+                  <div class="tree">
+                    <div class="tree-node expanded">
+                      <button type="button" class="tree-toggle">▾ CH1 监管信息</button>
+                      <div class="tree-children" style="display:grid;">
+                        <div class="tree-node-child">CH1.2 已匹配</div>
+                        <div class="tree-node-child">CH1.4 已匹配</div>
+                        <div class="tree-node-child">CH1.9 疑似错放</div>
+                        <div class="tree-node-child">CH1.11.4 缺失</div>
+                      </div>
+                    </div>
+                    <div class="tree-node">
+                      <button type="button" class="tree-toggle">▸ CH2 产品综述资料</button>
+                      <div class="tree-children">
+                        <div class="tree-node-child">待展开</div>
+                      </div>
                     </div>
-                    <div class="muted" style="margin-top: 8px; line-height: 1.7;">${item.detail}</div>
                   </div>
-                `).join("")}
-              </div>
-            </div>
-          </div>
-          <div class="two-col" style="margin-top: 18px;">
-            <div class="panel">
-              <div class="section-title">
-                <div>
-                  <h3>法规依据</h3>
-                  <p>RAG 负责给证据，规则负责做结论。</p>
                 </div>
-                <button class="secondary-btn" data-open-governance="chunks">查看切片</button>
-              </div>
-              <div class="evidence">${data.completeness.evidence}</div>
-            </div>
-            <div class="panel">
-              <div class="section-title">
-                <div>
-                  <h3>处理建议</h3>
-                  <p>风险等级与责任角色已结构化。</p>
+                <div class="panel">
+                  <div class="section-title">
+                    <div>
+                      <h3>缺失项 / 错放项</h3>
+                      <p>聚焦当前最值得讲解的完整性问题。</p>
+                    </div>
+                  </div>
+                  <div class="issue-list">
+                    ${data.completeness.issues.map(item => `
+                      <div class="issue-item">
+                        <div class="split-actions" style="justify-content: space-between;">
+                          <strong>${item.chapter} ${item.name}</strong>
+                          <span class="tag ${item.risk === "高" ? "high" : item.risk === "中" ? "medium" : ""}">${item.type} / ${item.risk}</span>
+                        </div>
+                        <div class="muted" style="margin-top: 8px; line-height: 1.7;">${item.detail}</div>
+                      </div>
+                    `).join("")}
+                  </div>
+                </div>
+              </div>
+              <div class="two-col" style="margin-top: 18px;">
+                <div class="panel">
+                  <div class="section-title">
+                    <div>
+                      <h3>法规依据</h3>
+                      <p>RAG 负责给证据，规则负责做结论。</p>
+                    </div>
+                    <button class="secondary-btn" data-open-governance="chunks">查看切片</button>
+                  </div>
+                  <div class="evidence">${data.completeness.evidence}</div>
+                </div>
+                <div class="panel">
+                  <div class="section-title">
+                    <div>
+                      <h3>处理建议</h3>
+                      <p>风险等级与责任角色已结构化。</p>
+                    </div>
+                  </div>
+                  <table>
+                    <thead>
+                      <tr>
+                        <th>问题类型</th>
+                        <th>等级</th>
+                        <th>建议动作</th>
+                        <th>责任角色</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr>
+                        <td>缺失</td>
+                        <td><span class="tag high">高</span></td>
+                        <td>补充授权 / 声明资料后重跑完整性检查。</td>
+                        <td>注册申报负责人</td>
+                      </tr>
+                      <tr>
+                        <td>错放</td>
+                        <td><span class="tag medium">中</span></td>
+                        <td>调整 CH1.9 文档路径并重新确认目录结构。</td>
+                        <td>注册资料负责人</td>
+                      </tr>
+                    </tbody>
+                  </table>
                 </div>
               </div>
-              <table>
-                <thead>
-                  <tr>
-                    <th>问题类型</th>
-                    <th>等级</th>
-                    <th>建议动作</th>
-                    <th>责任角色</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr>
-                    <td>缺失</td>
-                    <td><span class="tag high">高</span></td>
-                    <td>补充授权 / 声明资料后重跑完整性检查。</td>
-                    <td>注册申报负责人</td>
-                  </tr>
-                  <tr>
-                    <td>错放</td>
-                    <td><span class="tag medium">中</span></td>
-                    <td>调整 CH1.9 文档路径并重新确认目录结构。</td>
-                    <td>注册资料负责人</td>
-                  </tr>
-                </tbody>
-              </table>
             </div>
+            ${renderAgentSidePanel("completeness", "法规完整性检查")}
           </div>
         </section>
       `;
@@ -1342,72 +1758,77 @@
       return `
         <section class="page" data-page="fields">
           ${metricCards(data.fields.summary.map(item => ({ label: item.label, value: item.value, note: "" })))}
-          <div class="panel">
-            <div class="section-title">
-              <div>
-                <h3>字段池主表</h3>
-                <p>统一沉淀字段事实、来源证据、置信度和回填可用性。</p>
+          <div class="page-agent-grid">
+            <div>
+              <div class="panel">
+                <div class="section-title">
+                  <div>
+                    <h3>字段池主表</h3>
+                    <p>统一沉淀字段事实、来源证据、置信度和回填可用性。</p>
+                  </div>
+                  <div class="toolbar">
+                    <span class="tag">全部字段</span>
+                    <span class="tag">可回填</span>
+                    <span class="tag medium">待复核</span>
+                    <button class="secondary-btn" data-open-governance="schema">维护字段 Schema</button>
+                  </div>
+                </div>
+                <table>
+                  <thead>
+                    <tr>
+                      <th>字段编码</th>
+                      <th>中文名</th>
+                      <th>标准值</th>
+                      <th>来源文档</th>
+                      <th>抽取方式</th>
+                      <th>置信度</th>
+                      <th>待复核</th>
+                      <th>可回填</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    ${data.fields.items.map(item => `
+                      <tr>
+                        <td>${item.key}</td>
+                        <td>${item.label}</td>
+                        <td>${item.value}</td>
+                        <td>${item.source}<br><span class="muted">${item.location}</span></td>
+                        <td>${item.method}</td>
+                        <td><span class="tag ${item.confidence === "低" ? "medium" : ""}">${item.confidence}</span></td>
+                        <td>${item.review}</td>
+                        <td>${item.fillable}</td>
+                      </tr>
+                    `).join("")}
+                  </tbody>
+                </table>
               </div>
-              <div class="toolbar">
-                <span class="tag">全部字段</span>
-                <span class="tag">可回填</span>
-                <span class="tag medium">待复核</span>
-                <button class="secondary-btn" data-open-governance="schema">维护字段 Schema</button>
-              </div>
-            </div>
-            <table>
-              <thead>
-                <tr>
-                  <th>字段编码</th>
-                  <th>中文名</th>
-                  <th>标准值</th>
-                  <th>来源文档</th>
-                  <th>抽取方式</th>
-                  <th>置信度</th>
-                  <th>待复核</th>
-                  <th>可回填</th>
-                </tr>
-              </thead>
-              <tbody>
-                ${data.fields.items.map(item => `
-                  <tr>
-                    <td>${item.key}</td>
-                    <td>${item.label}</td>
-                    <td>${item.value}</td>
-                    <td>${item.source}<br><span class="muted">${item.location}</span></td>
-                    <td>${item.method}</td>
-                    <td><span class="tag ${item.confidence === "低" ? "medium" : ""}">${item.confidence}</span></td>
-                    <td>${item.review}</td>
-                    <td>${item.fillable}</td>
-                  </tr>
-                `).join("")}
-              </tbody>
-            </table>
-          </div>
-          <div class="two-col" style="margin-top: 18px;">
-            <div class="panel">
-              <div class="section-title">
-                <div>
-                  <h3>待复核字段</h3>
-                  <p>突出需要人工确认的低置信度字段。</p>
+              <div class="two-col" style="margin-top: 18px;">
+                <div class="panel">
+                  <div class="section-title">
+                    <div>
+                      <h3>待复核字段</h3>
+                      <p>突出需要人工确认的低置信度字段。</p>
+                    </div>
+                  </div>
+                  <div class="alert warning">储存条件字段来自申请表表格抽取，原文为“建议冷冻保存”，标准化值为“-20℃ 以下避光保存”，需人工确认。</div>
+                </div>
+                <div class="panel">
+                  <div class="section-title">
+                    <div>
+                      <h3>来源证据预览</h3>
+                      <p>说明字段不是无来源生成。</p>
+                    </div>
+                  </div>
+                  <div class="evidence">
+                    来源文档：目标产品说明书.docx<br />
+                    章节：一、产品名称<br />
+                    抽取规则：标题规则 + 正文标准化<br />
+                    证据片段：“产品名称：新型冠状病毒 2019-nCoV 核酸检测试剂盒”
+                  </div>
                 </div>
               </div>
-              <div class="alert warning">储存条件字段来自申请表表格抽取，原文为“建议冷冻保存”，标准化值为“-20℃ 以下避光保存”，需人工确认。</div>
-            </div>
-            <div class="panel">
-              <div class="section-title">
-                <div>
-                  <h3>来源证据预览</h3>
-                  <p>说明字段不是无来源生成。</p>
-                </div>
-              </div>
-              <div class="evidence">
-                来源文档：目标产品说明书.docx<br />
-                章节：一、产品名称<br />
-                抽取规则：标题规则 + 正文标准化<br />
-                证据片段：“产品名称：新型冠状病毒 2019-nCoV 核酸检测试剂盒”
-              </div>
             </div>
+            ${renderAgentSidePanel("fields", "字段抽取与字段池")}
           </div>
         </section>
       `;
@@ -1417,67 +1838,72 @@
       return `
         <section class="page" data-page="consistency">
           ${metricCards(data.consistency.summary.map(item => ({ label: item.label, value: item.value, note: "" })))}
-          <div class="two-col">
-            <div class="panel">
-              <div class="section-title">
-                <div>
-                  <h3>冲突字段主表</h3>
-                  <p>对同一审核范围内的字段做严格一致性比对。</p>
-                </div>
-                <button class="secondary-btn" data-open-governance="rules">维护强一致规则</button>
-              </div>
-              <table>
-                <thead>
-                  <tr>
-                    <th>字段名</th>
-                    <th>结果</th>
-                    <th>冲突值</th>
-                    <th>来源文档</th>
-                    <th>风险等级</th>
-                    <th>混档风险</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  ${data.consistency.conflicts.map(item => `
-                    <tr>
-                      <td>${item.field}</td>
-                      <td><span class="tag ${item.result === "冲突" ? "high" : "medium"}">${item.result}</span></td>
-                      <td>${item.values}</td>
-                      <td>${item.docs}</td>
-                      <td>${item.risk}</td>
-                      <td>${item.mixed}</td>
-                    </tr>
-                  `).join("")}
-                </tbody>
-              </table>
-            </div>
-            <div class="panel">
-              <div class="section-title">
-                <div>
-                  <h3>来源对比视图</h3>
-                  <p>点击字段可联动来源比对，此处展示产品名称冲突。</p>
-                </div>
-              </div>
-              <div class="card-stack">
-                ${data.consistency.compare.map(item => `
-                  <div class="info-card">
-                    <strong>${item.doc}</strong>
-                    <div class="muted" style="margin-top: 8px;">${item.chapter} · ${item.page}</div>
-                    <div style="margin-top: 10px; line-height: 1.7;">原始值：${item.value}</div>
-                    <div class="muted" style="margin-top: 8px;">标准化：${item.normalized}</div>
+          <div class="page-agent-grid">
+            <div>
+              <div class="two-col">
+                <div class="panel">
+                  <div class="section-title">
+                    <div>
+                      <h3>冲突字段主表</h3>
+                      <p>对同一审核范围内的字段做严格一致性比对。</p>
+                    </div>
+                    <button class="secondary-btn" data-open-governance="rules">维护强一致规则</button>
                   </div>
-                `).join("")}
+                  <table>
+                    <thead>
+                      <tr>
+                        <th>字段名</th>
+                        <th>结果</th>
+                        <th>冲突值</th>
+                        <th>来源文档</th>
+                        <th>风险等级</th>
+                        <th>混档风险</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      ${data.consistency.conflicts.map(item => `
+                        <tr>
+                          <td>${item.field}</td>
+                          <td><span class="tag ${item.result === "冲突" ? "high" : "medium"}">${item.result}</span></td>
+                          <td>${item.values}</td>
+                          <td>${item.docs}</td>
+                          <td>${item.risk}</td>
+                          <td>${item.mixed}</td>
+                        </tr>
+                      `).join("")}
+                    </tbody>
+                  </table>
+                </div>
+                <div class="panel">
+                  <div class="section-title">
+                    <div>
+                      <h3>来源对比视图</h3>
+                      <p>点击字段可联动来源比对，此处展示产品名称冲突。</p>
+                    </div>
+                  </div>
+                  <div class="card-stack">
+                    ${data.consistency.compare.map(item => `
+                      <div class="info-card">
+                        <strong>${item.doc}</strong>
+                        <div class="muted" style="margin-top: 8px;">${item.chapter} · ${item.page}</div>
+                        <div style="margin-top: 10px; line-height: 1.7;">原始值：${item.value}</div>
+                        <div class="muted" style="margin-top: 8px;">标准化：${item.normalized}</div>
+                      </div>
+                    `).join("")}
+                  </div>
+                </div>
+              </div>
+              <div class="panel" style="margin-top: 18px;">
+                <div class="section-title">
+                  <div>
+                    <h3>混档风险提示</h3>
+                    <p>把字段冲突上升为可执行的风险结论。</p>
+                  </div>
+                </div>
+                <div class="alert danger">说明书与申请表中的产品名称存在文本不一致，系统判定为疑似跨产品资料混入，建议先确认当前审核范围再继续回填和导出。</div>
               </div>
             </div>
-          </div>
-          <div class="panel" style="margin-top: 18px;">
-            <div class="section-title">
-              <div>
-                <h3>混档风险提示</h3>
-                <p>把字段冲突上升为可执行的风险结论。</p>
-              </div>
-            </div>
-            <div class="alert danger">说明书与申请表中的产品名称存在文本不一致，系统判定为疑似跨产品资料混入，建议先确认当前审核范围再继续回填和导出。</div>
+            ${renderAgentSidePanel("consistency", "一致性核查")}
           </div>
         </section>
       `;
@@ -1487,67 +1913,72 @@
       return `
         <section class="page" data-page="risk">
           ${metricCards(data.risk.summary.map(item => ({ label: item.label, value: item.value, note: "" })))}
-          <div class="hero">
-            <div class="panel">
-              <div class="section-title">
-                <div>
-                  <h3>综合风险结论</h3>
-                  <p>把完整性、字段抽取和一致性问题统一归并。</p>
+          <div class="page-agent-grid">
+            <div>
+              <div class="hero">
+                <div class="panel">
+                  <div class="section-title">
+                    <div>
+                      <h3>综合风险结论</h3>
+                      <p>把完整性、字段抽取和一致性问题统一归并。</p>
+                    </div>
+                    <span class="tag high">是否通过：${data.batch.passStatus}</span>
+                  </div>
+                  <div class="card-stack">
+                    <div class="alert danger">最高风险等级：高。正式版导出被阻断。</div>
+                    <div class="alert warning">当前需优先处理 CH1 缺失资料与产品名称冲突问题。</div>
+                    <div class="alert success">可先生成草稿版供内部核对使用。</div>
+                  </div>
                 </div>
-                <span class="tag high">是否通过：${data.batch.passStatus}</span>
-              </div>
-              <div class="card-stack">
-                <div class="alert danger">最高风险等级：高。正式版导出被阻断。</div>
-                <div class="alert warning">当前需优先处理 CH1 缺失资料与产品名称冲突问题。</div>
-                <div class="alert success">可先生成草稿版供内部核对使用。</div>
-              </div>
-            </div>
-            <div class="panel">
-              <div class="section-title">
-                <div>
-                  <h3>责任角色分布</h3>
-                  <p>风险项已经绑定责任角色，便于协同。</p>
+                <div class="panel">
+                  <div class="section-title">
+                    <div>
+                      <h3>责任角色分布</h3>
+                      <p>风险项已经绑定责任角色，便于协同。</p>
+                    </div>
+                    <button class="secondary-btn" data-open-governance="owner">维护责任人映射</button>
+                  </div>
+                  <div class="check-list">
+                    <div class="check-item">注册申报负责人：2 个待处理高风险</div>
+                    <div class="check-item">注册资料负责人：2 个待处理问题</div>
+                    <div class="check-item">临床注册负责人：0 个高优先级问题</div>
+                  </div>
                 </div>
-                <button class="secondary-btn" data-open-governance="owner">维护责任人映射</button>
               </div>
-              <div class="check-list">
-                <div class="check-item">注册申报负责人：2 个待处理高风险</div>
-                <div class="check-item">注册资料负责人：2 个待处理问题</div>
-                <div class="check-item">临床注册负责人：0 个高优先级问题</div>
+              <div class="panel">
+                <div class="section-title">
+                  <div>
+                    <h3>风险清单</h3>
+                    <p>适合演示时逐条解释“问题 -> 依据 -> 动作 -> 责任人”。</p>
+                  </div>
+                </div>
+                <table>
+                  <thead>
+                    <tr>
+                      <th>风险类型</th>
+                      <th>等级</th>
+                      <th>问题描述</th>
+                      <th>来源报告</th>
+                      <th>整改建议</th>
+                      <th>责任角色</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    ${data.risk.items.map(item => `
+                      <tr>
+                        <td>${item.type}</td>
+                        <td><span class="tag ${item.level === "高" ? "high" : item.level === "中" ? "medium" : "low"}">${item.level}</span></td>
+                        <td>${item.desc}</td>
+                        <td>${item.source}</td>
+                        <td>${item.advice}</td>
+                        <td>${item.owner}</td>
+                      </tr>
+                    `).join("")}
+                  </tbody>
+                </table>
               </div>
             </div>
-          </div>
-          <div class="panel">
-            <div class="section-title">
-              <div>
-                <h3>风险清单</h3>
-                <p>适合演示时逐条解释“问题 -> 依据 -> 动作 -> 责任人”。</p>
-              </div>
-            </div>
-            <table>
-              <thead>
-                <tr>
-                  <th>风险类型</th>
-                  <th>等级</th>
-                  <th>问题描述</th>
-                  <th>来源报告</th>
-                  <th>整改建议</th>
-                  <th>责任角色</th>
-                </tr>
-              </thead>
-              <tbody>
-                ${data.risk.items.map(item => `
-                  <tr>
-                    <td>${item.type}</td>
-                    <td><span class="tag ${item.level === "高" ? "high" : item.level === "中" ? "medium" : "low"}">${item.level}</span></td>
-                    <td>${item.desc}</td>
-                    <td>${item.source}</td>
-                    <td>${item.advice}</td>
-                    <td>${item.owner}</td>
-                  </tr>
-                `).join("")}
-              </tbody>
-            </table>
+            ${renderAgentSidePanel("risk", "风险预警")}
           </div>
         </section>
       `;
@@ -1562,75 +1993,80 @@
             { label: "阻断项", value: "3", note: "高风险 / 冲突 / 待复核" },
             { label: "导出状态", value: "草稿已生成", note: "正式版被阻断" },
           ])}
-          <div class="split">
-            <div class="panel">
-              <div class="section-title">
-                <div>
-                  <h3>回填字段表</h3>
-                  <p>从字段池到模板占位符的映射一目了然。</p>
-                </div>
-                <button class="secondary-btn" data-open-governance="template">维护模板与映射</button>
-              </div>
-              <table>
-                <thead>
-                  <tr>
-                    <th>占位符</th>
-                    <th>字段名</th>
-                    <th>字段值</th>
-                    <th>来源</th>
-                    <th>状态</th>
-                    <th>必填</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  ${data.word.filled.map(item => `
-                    <tr>
-                      <td>${item.placeholder}</td>
-                      <td>${item.field}</td>
-                      <td>${item.value}</td>
-                      <td>${item.source}</td>
-                      <td><span class="tag low">${item.status}</span></td>
-                      <td>${item.required}</td>
-                    </tr>
-                  `).join("")}
-                </tbody>
-              </table>
-            </div>
-            <div class="panel">
-              <div class="section-title">
-                <div>
-                  <h3>拦截项</h3>
-                  <p>说明为什么正式导出没有直接放行。</p>
-                </div>
-              </div>
-              <div class="card-stack">
-                ${data.word.blocked.map(item => `
-                  <div class="alert ${item.reason.includes("高风险") ? "danger" : "warning"}">
-                    <strong>${item.reason}</strong><br />
-                    ${item.field}：${item.detail}
+          <div class="page-agent-grid">
+            <div>
+              <div class="split">
+                <div class="panel">
+                  <div class="section-title">
+                    <div>
+                      <h3>回填字段表</h3>
+                      <p>从字段池到模板占位符的映射一目了然。</p>
+                    </div>
+                    <button class="secondary-btn" data-open-governance="template">维护模板与映射</button>
                   </div>
-                `).join("")}
+                  <table>
+                    <thead>
+                      <tr>
+                        <th>占位符</th>
+                        <th>字段名</th>
+                        <th>字段值</th>
+                        <th>来源</th>
+                        <th>状态</th>
+                        <th>必填</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      ${data.word.filled.map(item => `
+                        <tr>
+                          <td>${item.placeholder}</td>
+                          <td>${item.field}</td>
+                          <td>${item.value}</td>
+                          <td>${item.source}</td>
+                          <td><span class="tag low">${item.status}</span></td>
+                          <td>${item.required}</td>
+                        </tr>
+                      `).join("")}
+                    </tbody>
+                  </table>
+                </div>
+                <div class="panel">
+                  <div class="section-title">
+                    <div>
+                      <h3>拦截项</h3>
+                      <p>说明为什么正式导出没有直接放行。</p>
+                    </div>
+                  </div>
+                  <div class="card-stack">
+                    ${data.word.blocked.map(item => `
+                      <div class="alert ${item.reason.includes("高风险") ? "danger" : "warning"}">
+                        <strong>${item.reason}</strong><br />
+                        ${item.field}：${item.detail}
+                      </div>
+                    `).join("")}
+                  </div>
+                  <div class="split-actions" style="margin-top: 16px;">
+                    <button class="primary-btn" id="draftBtn">生成草稿</button>
+                    <button class="secondary-btn" id="formalBtn">尝试正式导出</button>
+                  </div>
+                </div>
               </div>
-              <div class="split-actions" style="margin-top: 16px;">
-                <button class="primary-btn" id="draftBtn">生成草稿</button>
-                <button class="secondary-btn" id="formalBtn">尝试正式导出</button>
+              <div class="panel" style="margin-top: 18px;">
+                <div class="section-title">
+                  <div>
+                    <h3>导出记录与下载入口</h3>
+                    <p>展示输出状态、版式校验结果和下载入口。</p>
+                  </div>
+                </div>
+                <div class="download-box" id="downloadBox">
+                  <div>
+                    <strong>注册申报表格_回填草稿.docx</strong>
+                    <div class="muted" style="margin-top: 8px;">状态：草稿已生成 · 版式校验：通过 · 时间：2026-06-03 10:20</div>
+                  </div>
+                  <button class="primary-btn">下载草稿</button>
+                </div>
               </div>
             </div>
-          </div>
-          <div class="panel" style="margin-top: 18px;">
-            <div class="section-title">
-              <div>
-                <h3>导出记录与下载入口</h3>
-                <p>展示输出状态、版式校验结果和下载入口。</p>
-              </div>
-            </div>
-            <div class="download-box" id="downloadBox">
-              <div>
-                <strong>注册申报表格_回填草稿.docx</strong>
-                <div class="muted" style="margin-top: 8px;">状态：草稿已生成 · 版式校验：通过 · 时间：2026-06-03 10:20</div>
-              </div>
-              <button class="primary-btn">下载草稿</button>
-            </div>
+            ${renderAgentSidePanel("word", "Word 回填导出")}
           </div>
         </section>
       `;
@@ -1639,61 +2075,66 @@
     function renderNotificationPage() {
       return `
         <section class="page" data-page="notification">
-          <div class="split">
-            <div class="panel">
-              <div class="section-title">
-                <div>
-                  <h3>飞书消息卡片预览</h3>
-                  <p>把风险摘要与导出状态转成可直接发送的协同消息。</p>
-                </div>
-                <button class="secondary-btn" data-open-governance="feishu">维护飞书配置</button>
-              </div>
-              <div class="message-card">
-                <div class="card-head">
-                  <div>
-                    <div class="muted">interactive card</div>
-                    <h4 style="margin: 8px 0 0;">批次 ${data.batch.id} 风险预警通知</h4>
+          <div class="page-agent-grid">
+            <div>
+              <div class="split">
+                <div class="panel">
+                  <div class="section-title">
+                    <div>
+                      <h3>飞书消息卡片预览</h3>
+                      <p>把风险摘要与导出状态转成可直接发送的协同消息。</p>
+                    </div>
+                    <button class="secondary-btn" data-open-governance="feishu">维护飞书配置</button>
+                  </div>
+                  <div class="message-card">
+                    <div class="card-head">
+                      <div>
+                        <div class="muted">interactive card</div>
+                        <h4 style="margin: 8px 0 0;">批次 ${data.batch.id} 风险预警通知</h4>
+                      </div>
+                      <span class="tag high">${data.batch.passStatus}</span>
+                    </div>
+                    <div class="lead" style="margin-bottom: 14px;">
+                      当前批次存在 CH1 必交资料缺失和产品名称冲突，已阻断正式导出，仅生成草稿版供内部复核。
+                    </div>
+                    <div class="list-inline" style="margin-bottom: 14px;">
+                      ${data.notification.mentions.map(item => `<span class="mention">${item}</span>`).join("")}
+                    </div>
+                    <div class="card-stack">
+                      <div class="info-card">高风险：CH1.11.4 缺失必交资料</div>
+                      <div class="info-card">高风险：产品名称冲突，疑似混档</div>
+                      <div class="info-card">导出状态：仅草稿版允许下载</div>
+                    </div>
+                    <div class="split-actions" style="margin-top: 18px;">
+                      <button class="primary-btn" id="sendBtn">发送通知</button>
+                      <button class="secondary-btn">查看 Web 详情</button>
+                    </div>
                   </div>
-                  <span class="tag high">${data.batch.passStatus}</span>
                 </div>
-                <div class="lead" style="margin-bottom: 14px;">
-                  当前批次存在 CH1 必交资料缺失和产品名称冲突，已阻断正式导出，仅生成草稿版供内部复核。
-                </div>
-                <div class="list-inline" style="margin-bottom: 14px;">
-                  ${data.notification.mentions.map(item => `<span class="mention">${item}</span>`).join("")}
-                </div>
-                <div class="card-stack">
-                  <div class="info-card">高风险：CH1.11.4 缺失必交资料</div>
-                  <div class="info-card">高风险：产品名称冲突，疑似混档</div>
-                  <div class="info-card">导出状态：仅草稿版允许下载</div>
-                </div>
-                <div class="split-actions" style="margin-top: 18px;">
-                  <button class="primary-btn" id="sendBtn">发送通知</button>
-                  <button class="secondary-btn">查看 Web 详情</button>
-                </div>
-              </div>
-            </div>
-            <div class="panel">
-              <div class="section-title">
-                <div>
-                  <h3>通知配置与回执</h3>
-                  <p>展示责任人映射、消息模板和发送状态。</p>
-                </div>
-              </div>
-              <div class="card-stack">
-                <div class="info-card">
-                  <strong>责任人映射</strong>
-                  <div class="muted" style="margin-top: 8px;">注册资料负责人 -> ou_demo_owner<br />注册申报负责人 -> ou_demo_registration_owner</div>
-                </div>
-                <div class="info-card">
-                  <strong>Web 详情链接</strong>
-                  <div class="muted" style="margin-top: 8px;">${data.notification.webLink}</div>
-                </div>
-                <div class="alert success" id="receiptBox">
-                  当前为未发送预览状态。点击“发送通知”后展示回执。
+                <div class="panel">
+                  <div class="section-title">
+                    <div>
+                      <h3>通知配置与回执</h3>
+                      <p>展示责任人映射、消息模板和发送状态。</p>
+                    </div>
+                  </div>
+                  <div class="card-stack">
+                    <div class="info-card">
+                      <strong>责任人映射</strong>
+                      <div class="muted" style="margin-top: 8px;">注册资料负责人 -> ou_demo_owner<br />注册申报负责人 -> ou_demo_registration_owner</div>
+                    </div>
+                    <div class="info-card">
+                      <strong>Web 详情链接</strong>
+                      <div class="muted" style="margin-top: 8px;">${data.notification.webLink}</div>
+                    </div>
+                    <div class="alert success" id="receiptBox">
+                      当前为未发送预览状态。点击“发送通知”后展示回执。
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
+            ${renderAgentSidePanel("notification", "飞书通知视图")}
           </div>
         </section>
       `;