diff --git a/frontend-web/package-lock.json b/frontend-web/package-lock.json
index 5317a272..2edad9b5 100644
--- a/frontend-web/package-lock.json
+++ b/frontend-web/package-lock.json
@@ -61,8 +61,10 @@
         "ogl": "^1.0.11",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
+        "react-markdown": "^10.1.0",
         "react-resizable-panels": "^4.4.1",
         "react-router-dom": "^7.9.4",
+        "react-syntax-highlighter": "^16.1.1",
         "rehype-katex": "^7.0.1",
         "rehype-raw": "^7.0.0",
         "remark-gfm": "^4.0.1",
@@ -4625,6 +4627,11 @@
         "undici-types": "~6.21.0"
       }
     },
+    "node_modules/@types/prismjs": {
+      "version": "1.26.6",
+      "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.6.tgz",
+      "integrity": "sha512-vqlvI7qlMvcCBbVe0AKAb4f97//Hy0EBTaiW8AalRnG/xAN5zOiWWyrNqNXeq8+KAuvRewjCVY1+IPxk4RdNYw=="
+    },
     "node_modules/@types/react": {
       "version": "19.2.13",
       "license": "MIT",
@@ -5979,6 +5986,18 @@
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
       "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
     },
+    "node_modules/fault": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/fault/-/fault-1.0.4.tgz",
+      "integrity": "sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==",
+      "dependencies": {
+        "format": "^0.2.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/fdir": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
@@ -5996,6 +6015,14 @@
         }
       }
     },
+    "node_modules/format": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz",
+      "integrity": "sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==",
+      "engines": {
+        "node": ">=0.4.x"
+      }
+    },
     "node_modules/framer-motion": {
       "version": "12.38.0",
       "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.38.0.tgz",
@@ -6303,6 +6330,19 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/highlight.js": {
+      "version": "10.7.3",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
+      "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/highlightjs-vue": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/highlightjs-vue/-/highlightjs-vue-1.0.0.tgz",
+      "integrity": "sha512-PDEfEF102G23vHmPhLyPboFCD+BkMGu+GuJe2d9/eH4FsCwvgBpnc9n0pGE+ffKdph38s6foEZiEjdgHdzp+IA=="
+    },
     "node_modules/hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -6852,6 +6892,19 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/lowlight": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.20.0.tgz",
+      "integrity": "sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==",
+      "dependencies": {
+        "fault": "^1.0.0",
+        "highlight.js": "~10.7.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -6863,7 +6916,8 @@
     },
     "node_modules/lucide-react": {
       "version": "0.562.0",
-      "license": "ISC",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.562.0.tgz",
+      "integrity": "sha512-82hOAu7y0dbVuFfmO4bYF1XEwYk/mEbM5E+b1jgci/udUBEE/R7LF5Ip0CCEmXe8AybRM8L+04eP+LGZeDvkiw==",
       "peerDependencies": {
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
@@ -8085,6 +8139,14 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/prismjs": {
+      "version": "1.30.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
+      "integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/process-nextick-args": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -8293,6 +8355,25 @@
         }
       }
     },
+    "node_modules/react-syntax-highlighter": {
+      "version": "16.1.1",
+      "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-16.1.1.tgz",
+      "integrity": "sha512-PjVawBGy80C6YbC5DDZJeUjBmC7skaoEUdvfFQediQHgCL7aKyVHe57SaJGfQsloGDac+gCpTfRdtxzWWKmCXA==",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "highlight.js": "^10.4.1",
+        "highlightjs-vue": "^1.0.0",
+        "lowlight": "^1.17.0",
+        "prismjs": "^1.30.0",
+        "refractor": "^5.0.0"
+      },
+      "engines": {
+        "node": ">= 16.20.2"
+      },
+      "peerDependencies": {
+        "react": ">= 0.14.0"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -8322,6 +8403,21 @@
         "util-deprecate": "~1.0.1"
       }
     },
+    "node_modules/refractor": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/refractor/-/refractor-5.0.0.tgz",
+      "integrity": "sha512-QXOrHQF5jOpjjLfiNk5GFnWhRXvxjUVnlFxkeDmewR5sXkr3iM46Zo+CnRR8B+MDVqkULW4EcLVcRBNOPXHosw==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/prismjs": "^1.0.0",
+        "hastscript": "^9.0.0",
+        "parse-entities": "^4.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/regenerator-runtime": {
       "version": "0.14.1",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
@@ -8375,7 +8471,8 @@
     },
     "node_modules/rehype-raw": {
       "version": "7.0.0",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/rehype-raw/-/rehype-raw-7.0.0.tgz",
+      "integrity": "sha512-/aE8hCfKlQeA8LmyeyQvQF3eBiLRGNlfBJEvWH7ivp9sBqs7TNqBL5X3v157rM4IFETqDnIOO+z5M/biZbo9Ww==",
       "dependencies": {
         "@types/hast": "^3.0.0",
         "hast-util-raw": "^9.0.0",
@@ -8388,7 +8485,8 @@
     },
     "node_modules/remark-gfm": {
       "version": "4.0.1",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/remark-gfm/-/remark-gfm-4.0.1.tgz",
+      "integrity": "sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==",
       "dependencies": {
         "@types/mdast": "^4.0.0",
         "mdast-util-gfm": "^3.0.0",
diff --git a/frontend-web/package.json b/frontend-web/package.json
index 41f0baaa..a9319e1d 100644
--- a/frontend-web/package.json
+++ b/frontend-web/package.json
@@ -63,8 +63,10 @@
     "ogl": "^1.0.11",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-markdown": "^10.1.0",
     "react-resizable-panels": "^4.4.1",
     "react-router-dom": "^7.9.4",
+    "react-syntax-highlighter": "^16.1.1",
     "rehype-katex": "^7.0.1",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1",
diff --git a/frontend-web/src/components/page-sidebar.tsx b/frontend-web/src/components/page-sidebar.tsx
index 6f9f8078..3c39dc32 100644
--- a/frontend-web/src/components/page-sidebar.tsx
+++ b/frontend-web/src/components/page-sidebar.tsx
@@ -1,5 +1,6 @@
 import { useState } from "react";
 import type { ElementType } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
 import {
   BarChart3,
   Bot,
@@ -38,6 +39,7 @@ type MenuItem = {
   id: string;
   label: string;
   icon: ElementType;
+  path?: string;
   children?: MenuItem[];
 };
 
@@ -53,7 +55,7 @@ const menuItems: MenuItem[] = [
     icon: HelpCircle,
     children: [
       { id: "new-qa", label: "新建问答", icon: Plus },
-      { id: "general-qa", label: "通用问答", icon: CircleHelp },
+      { id: "general-qa", label: "通用问答", icon: CircleHelp, path: "/page/strategy/qa/general" },
       { id: "agent-qa", label: "智能体问答", icon: Bot },
       { id: "multi-agent-qa", label: "多智能体", icon: Layers },
       { id: "sixstep-chat", label: "六步对话", icon: Workflow },
@@ -128,7 +130,7 @@ const menuItems: MenuItem[] = [
     label: "智能体管理",
     icon: Bot,
     children: [
-      { id: "agent-overview", label: "智能体列表", icon: Users },
+      { id: "agent-overview", label: "智能体列表", icon: Users, path: "/page/strategy/agents" },
       { id: "agent-trial", label: "单智能体试用", icon: PlayCircle },
     ],
   },
@@ -233,6 +235,8 @@ export function PageSidebar({
   onToggleCollapsed,
 }: PageSidebarProps) {
   const [expandedIds, setExpandedIds] = useState<Set<string>>(defaultExpandedIds);
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
 
   const iconButtonClass =
     "rounded-lg p-2 text-gray-500 transition-all duration-300 ease-out hover:scale-105 hover:bg-red-50 hover:text-red-600";
@@ -256,14 +260,20 @@ export function PageSidebar({
 
   const renderLeaf = (item: MenuItem, depth = 0) => {
     const Icon = item.icon;
+    const isActive = !!item.path && pathname === item.path;
 
     return (
       <button
         key={item.id}
         type="button"
         title={collapsed && depth === 0 ? item.label : undefined}
-        className={`flex w-full items-center rounded-lg py-2 text-left text-gray-600 transition-all duration-300 ease-out hover:-translate-y-0.5 hover:bg-red-50 hover:text-red-600 ${
+        onClick={() => item.path && navigate(item.path)}
+        className={`flex w-full items-center rounded-lg py-2 text-left transition-all duration-300 ease-out hover:-translate-y-0.5 ${
           collapsed && depth === 0 ? "justify-center px-2" : "gap-2 px-3"
+        } ${
+          isActive
+            ? "bg-red-50 text-red-600 font-semibold"
+            : "text-gray-600 hover:bg-red-50 hover:text-red-600"
         }`}
       >
         <Icon className={`${depth === 0 ? "h-5 w-5" : "h-4 w-4"} flex-shrink-0 transition-transform duration-300 ease-out`} />
diff --git a/frontend-web/src/config/defaultConfig.js b/frontend-web/src/config/defaultConfig.js
new file mode 100644
index 00000000..182b7f17
--- /dev/null
+++ b/frontend-web/src/config/defaultConfig.js
@@ -0,0 +1,158 @@
+/**
+ * 后端 API 默认地址
+ */
+export const DEFAULT_BACKEND_URL = 'http://10.26.128.38:8030';
+
+/**
+ * 默认前端配置
+ *
+ * 包含：
+ * - coordinator_config: 协调者各阶段策略提示
+ * - agents: 默认四智能体（背景研判师、目的策略师、受众分析师、叙事策划师）
+ * - report_schema: 六字段报告结构定义
+ * - report_examples: 各字段的示例输出（问界 M7 事故场景）
+ * - field_requirements: 字段依赖关系定义
+ */
+export const DEFAULT_CONFIG = {
+  task_context: "",
+  llm_preset_id: "",
+  consistency_mode: "soft",
+  coordinator_mode: "auto",
+  coordinator_config: {
+    system_prompt_prefix: "",
+    round1_guidance: `这是发散阶段第1轮，草稿刚起步。
+策略：优先填写草稿中空缺最关键的字段，同时识别智能体之间最尖锐的分歧——
+这些分歧往往意味着草稿中某个判断还无法做出，需要通过交锋来解决。`,
+    middle_round_guidance: `这是发散阶段的中间轮次。
+策略：审查草稿现状，找出仍然太模糊或有冲突的字段，
+选择能推进这些字段的智能体，给出让草稿变得更具体的任务。`,
+    final_round_guidance: `这是发散阶段最后一轮。
+策略：草稿必须在这轮后达到可以收尾的状态，但仍要求智能体给出完整材料包，
+包括明确判断、依据链、反例、风险边界和可核验线索；最终压缩、取舍和成文由协调者完成。`,
+    speaker_selection_rules: "优先选择最能扩充 partial/blocked 字段材料、解决关键冲突、补充证据或论证链的智能体。",
+    focus_instruction_rules: "focus 必须写成内容型任务书，不能只催促 agent 继续分析。每条至少包含：目标字段、已有材料或草稿判断、真正缺口、为什么该缺口会阻塞报告、需要补充的具体材料类型、建议切入角度、预期输出形态、风险或禁止事项。指令应鼓励 agent 展开材料、证据线索、论证链、反例、分歧和边界条件，而不是只给短结论。",
+    revise_prompt_prefix: ""
+  },
+  agents: [
+    {
+      id: "situation",
+      name: "背景研判师",
+      dimension: "背景研判",
+      expertise: "你是一位资深的舆情和战略分析专家。你的任务是判断当前舆论场的格局：现在存在哪几条叙事，各自的势头如何，哪些认知锚点可以被打散，哪些比较维度可以被引入或重构，竞争对手的动作有哪些逻辑漏洞。不是做损失报告，而是做战略研判——找到可以操作的叙事空间。",
+    },
+    {
+      id: "purpose",
+      name: "目的策略师",
+      dimension: "传播目标",
+      expertise: "你是一位认知传播专家，专门设计可实现的传播目标——即通过传播内容能够在受众头脑中建立的具体认知或情绪。你不关心商业结果，只关心：这次传播结束后，目标受众的想法和感受会发生什么具体变化？用第一人称写出目标受众在成功传播后的内心独白。也可以设计竞争性目标（让受众对竞品产生质疑）。",
+    },
+    {
+      id: "audience",
+      name: "受众分析师",
+      dimension: "受众图谱",
+      expertise: "你是一位受众研究专家。你的任务是识别具体的、可操作的目标受众群体。拒绝泛化：不接受'年轻人''汽车爱好者'这类描述，必须给出年龄段、性别比例、城市层级、具体平台和具体账号/社区名称。同时要写出该群体当前的心理状态——他们现在在想什么，核心疑虑是什么，用第一人称写出他们的内心独白。",
+    },
+    {
+      id: "narrative",
+      name: "叙事策划师",
+      dimension: "叙事方案",
+      expertise: "你是一位顶尖的叙事战略家和内容策划师。你的任务是设计具体的叙事支柱：每个支柱必须包含（1）具体内容——发什么、怎么说，给出可执行的内容方向或文案草稿；（2）为什么这么设计——预期的心理机制；（3）预期效果——目标受众会产生什么认知变化；（4）风险与局限——在什么条件下会失效或反噬。叙事框架和具体消息写在一起，不要分开。",
+    }
+  ],
+  phase_config: { diverge_rounds: 3 },
+  template_id: "",
+  template_name: "",
+  template_brief: "",
+  report_schema: {
+    situation_assessment: "背景研判：当前舆论场/市场/竞争格局的战略研判。包含现有几条并行叙事及其势头、可以被打散的认知锚点、竞争对手动作的逻辑漏洞、可操作的叙事空间。不是损失报告，是战略判断。",
+    communication_objectives: "传播目标：2-4个本方案期望在受众中建立的具体认知或情绪，用目标受众的第一人称内心独白表达。不写商业结果，不写指标，只写认知和情绪目标。可含竞争性目标。",
+    audience_map: "核心受众：2-4个具体受众群体，每个包含：（1）人口画像——年龄段、性别、城市层级、具体特征；（2）当前心理状态——用第一人称内心独白；（3）关键信息节点——具体平台和账号/社区名称，不接受泛化描述。",
+    narrative_plan: "叙事方案：2-3个叙事支柱，每个包含：（1）具体内容——可执行的内容方向或文案草稿；（2）为什么这么设计——预期心理机制；（3）预期效果——目标受众的认知变化；（4）风险与局限——失效条件。叙事框架和消息合并在一起。",
+    action_plan: "分阶段行动计划：按时间线的3-4个阶段，每个行动具体到：做什么、谁执行（官方/第三方/独立账号）、何时。",
+    risk_playbook: "风险预案：3-5个风险场景，每个含触发条件、具体应对步骤、明确禁止的动作。"
+  },
+  report_examples: {
+    situation_assessment: `事故发生后，舆论场中存在三条并行叙事：
+- 主流情绪叙事（当前占主导）："电动车关门困死人"——聚焦电动门锁这一单一缺陷，将问界塑造为主动伤人的产品
+- 竞品借势叙事：理想、小米相继发声强调"物理门把手不会消失"，将安全心智差异化
+- 技术中性叙事（目前声量极弱）：部分汽车工程师账号指出燃油车追尾同样可能起火且无法逃生，但未被放大
+
+核心判断：目前的"关门困死人"叙事对问界的伤害远超事故本身，因为它指向的是所有电动车门锁的系统性问题，而非这次追尾的偶发性。叙事反转的关键在于：将"问界门锁缺陷"重新定框为"追尾高速起火是极端工况，不同于日常安全风险"，同时打开"燃油车在同等追尾条件下结果是否更好"这一比较维度。
+
+此外，竞品的"物理门把手"营销动作，实质上是在暗示所有纯电动车都有同等风险——问界可以借助行业数据，将这一模糊指控反向用于质疑竞品的安全宣传逻辑。`,
+
+    communication_objectives: `目标一：让现有问界车主相信此次事故属于极端偶发工况
+> "这是一辆车被高速追尾、车身严重变形后才发生的，不是日常开车会遇到的情况，和我每天通勤的安全性是两件事。"
+
+目标二：让公众了解燃油车在同等追尾工况下的起火概率并不低于电动车
+> "我以为电动车特别容易起火，看了数据才知道燃油车追尾也会爆炸，而且逃生时间更短。这个问题不是问界独有的。"
+
+目标三：让潜在购车者相信问界已做出真实的技术改进，而非只是公关操作
+> "他们不只是道歉，而是真的改了——门锁逻辑改了，还加了物理把手，有第三方测了。这和之前那些只道歉不改的品牌不一样。"
+
+目标四（竞争性）：在科技圈和华为生态用户中种下"竞品安全宣传是过度营销"的质疑
+> "理想说保留物理门把手就安全了？那燃油车追尾不也照样困死人，他们这是蹭热度。"`,
+
+    audience_map: `受众一：现有问界M7车主（最优先）
+- 画像：25-45岁男性为主（问界买家中男性占比约75%），华为手机深度用户，在二三线城市比例高于理想/小米，家庭用车场景为主
+- 当前心理状态："在家人追问压力下动摇，既不想认错（承认买错了），又需要一个可以说服家人的说法"
+- 关键触点：AITO官方App推送、华为花粉俱乐部社区（注册用户2000万+）、各省市问界车主微信群
+
+受众二：考虑30万内家用SUV的25-38岁已婚男性（主要流失群体）
+- 画像：集中在北京、上海、成都、杭州、武汉；在懂车帝/汽车之家浏览过问界M7、理想L7对比页面；家庭有6岁以下子女的比例约40%，配偶对选车有实质否决权
+- 当前心理状态："事故前已接近下定，现在进入观望，主要疑虑是'安全有保障吗'，在等一个可以放心的理由"
+- 关键触点：懂车帝的问界M7评测区（日均浏览约4万次）、B站@42号车库（汽车技术向，260万粉）、@老司机测评（抖音+微博，180万粉）`,
+
+    narrative_plan: `叙事支柱一：工况重构——把"电动门锁缺陷"扩展为"追尾高速起火"议题
+
+具体内容：发布或推动媒体发布《追尾高速事故生存数据分析》，引用可验证的事故数据：中国高速追尾事故中燃油车起火比例、燃油车在高速追尾后因油箱破裂导致无法逃生的案例、断电门锁问题在行业内的普遍性（其他品牌纯电车是否存在类似设计）。
+
+为什么这么设计：公众对"电动车起火"的恐惧，部分来自"燃油车才是安全默认值"的认知锚点。此叙事目标不是洗白问界，而是打散原有的比较基准——把"问界门锁失效"从"品牌失职"变成"高速追尾这一极端工况下的行业性挑战"。
+
+预期效果：目标受众在搜索"问界安全"时，搜到的不是事故视频，而是工况对比分析，认知从"问界车会困死人"转向"高速追尾是极端事故，概率极低"。
+
+风险与局限：如果数据无法支持"燃油车风险不低于电动车"的结论，此叙事会反噬——数据必须真实可查。部分受众会将此解读为"转移焦点"。`,
+
+    action_plan: `第一阶段：止血（D+0 至 D+3）
+- D+0：余承东删除原有争议微博。AITO官方发布声明，核心措辞：承认断电门锁释放机制有改进空间，公布将与第三方机构联合调查，暂停全部品牌宣传广告
+- D+1：通过APP+服务顾问向全体问界M7车主发送一对一信息，提供免费安全检测预约和免费代步车
+- D+2：联系@42号车库、@老司机测评，提供完整的碰撞技术资料（不要求立场，只提供信息）
+
+第二阶段：叙事建立（第1-4周）
+- 第1周：推动@42号车库发布《追尾高速起火，燃油车和电动车谁更危险？》技术向内容，问界提供数据但不参与内容制作
+- 第2周：举办技术说明会，邀请10家垂直媒体，公布OTA升级方案和物理把手加装方案详细规格
+- 第3周：中国汽研开始改进后车辆的独立测试，全程开放媒体记者跟拍`,
+
+    risk_playbook: `风险一：12周内发生第二起相似事故
+- 触发条件：同类门锁失效导致的伤亡事故再次出现
+- 应对步骤：①立即暂停全部销售；②主动召回所有已售问界M7，不等监管要求；③停止所有叙事支柱三（竞品对比）内容的推进
+- 明确禁止：不得发布任何暗示"概率极低"的安抚性内容
+
+风险二：数据核查显示燃油车追尾起火比例低于电动车
+- 触发条件：第三方核查发现叙事支柱一中引用的数据不成立
+- 应对步骤：①立即停止涉及数据比较的传播；②调整叙事回归"我们改进了"主线，放弃工况比较维度
+- 明确禁止：不得继续引用已被质疑的数据，不得删除原文（会被截图放大）`
+  },
+  field_requirements: {
+    communication_objectives: {
+      title: "传播目标",
+      dependencies: ["situation_assessment"],
+    },
+    audience_map: {
+      title: "核心受众",
+      dependencies: ["communication_objectives"],
+    },
+    narrative_plan: {
+      title: "叙事方案",
+      dependencies: ["communication_objectives", "audience_map"],
+    },
+    action_plan: {
+      title: "分阶段行动计划",
+      dependencies: ["communication_objectives", "audience_map", "narrative_plan"],
+    },
+    risk_playbook: {
+      title: "风险预案",
+      dependencies: ["narrative_plan", "action_plan"],
+    },
+  }
+};
diff --git a/frontend-web/src/config/templateStore.js b/frontend-web/src/config/templateStore.js
new file mode 100644
index 00000000..5085f05d
--- /dev/null
+++ b/frontend-web/src/config/templateStore.js
@@ -0,0 +1,96 @@
+/** localStorage 存储前缀，用于模板覆盖数据的 key */
+const OVERRIDE_PREFIX = 'mope_template_override:';
+
+/**
+ * 深拷贝对象
+ * 使用 JSON 序列化/反序列化实现简单深拷贝，
+ * 适用于纯数据的配置对象（不含函数、循环引用等）。
+ */
+export function clone(value) {
+  return JSON.parse(JSON.stringify(value));
+}
+
+/**
+ * 从后端加载模板索引列表
+ * @returns {Promise<Array>} 模板摘要数组 [{ template_id, template_name, file }]
+ */
+export async function loadTemplateIndex() {
+  const response = await fetch('/templates/index.json');
+  if (!response.ok) throw new Error(`HTTP ${response.status}`);
+  const data = await response.json();
+  return data.templates || [];
+}
+
+/**
+ * 加载完整模板数据
+ * 优先使用 localStorage 中的用户覆盖版本，
+ * 否则从后端静态文件加载。
+ *
+ * @param {string|Object} metaOrId - 模板 ID 字符串或包含 template_id/file 的元数据对象
+ * @returns {Promise<Object>} 完整模板对象
+ */
+export async function loadTemplateByMeta(metaOrId) {
+  const templateId = typeof metaOrId === 'string' ? metaOrId : metaOrId?.template_id;
+  const file = typeof metaOrId === 'string' ? `/templates/${templateId}.json` : metaOrId?.file;
+  const response = await fetch(file || `/templates/${templateId}.json`);
+  if (!response.ok) throw new Error(`HTTP ${response.status}`);
+  const template = await response.json();
+  const override = getTemplateOverride(template.template_id || templateId);
+  return override ? clone(override) : template;
+}
+
+/**
+ * 加载原始模板（忽略用户覆盖）
+ * @param {string|Object} metaOrId - 模板标识
+ * @returns {Promise<Object>} 后端静态模板
+ */
+export async function loadOriginalTemplate(metaOrId) {
+  const templateId = typeof metaOrId === 'string' ? metaOrId : metaOrId?.template_id;
+  const file = typeof metaOrId === 'string' ? `/templates/${templateId}.json` : metaOrId?.file;
+  const response = await fetch(file || `/templates/${templateId}.json`);
+  if (!response.ok) throw new Error(`HTTP ${response.status}`);
+  return response.json();
+}
+
+/**
+ * 获取用户在 localStorage 中保存的模板覆盖数据
+ * @param {string} templateId - 模板 ID
+ * @returns {Object|null} 覆盖的模板对象，未覆盖时返回 null
+ */
+export function getTemplateOverride(templateId) {
+  if (!templateId) return null;
+  try {
+    const raw = localStorage.getItem(`${OVERRIDE_PREFIX}${templateId}`);
+    return raw ? JSON.parse(raw) : null;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * 判断指定模板是否已被用户覆盖修改
+ * @param {string} templateId - 模板 ID
+ * @returns {boolean}
+ */
+export function hasTemplateOverride(templateId) {
+  return Boolean(getTemplateOverride(templateId));
+}
+
+/**
+ * 保存模板覆盖到 localStorage
+ * @param {string} templateId - 模板 ID
+ * @param {Object} template - 修改后的模板对象
+ */
+export function saveTemplateOverride(templateId, template) {
+  if (!templateId) throw new Error('缺少 template_id');
+  localStorage.setItem(`${OVERRIDE_PREFIX}${templateId}`, JSON.stringify(template));
+}
+
+/**
+ * 清除指定模板的覆盖数据，恢复为后端原始版本
+ * @param {string} templateId - 模板 ID
+ */
+export function clearTemplateOverride(templateId) {
+  if (!templateId) return;
+  localStorage.removeItem(`${OVERRIDE_PREFIX}${templateId}`);
+}
diff --git a/frontend-web/src/hooks/index.ts b/frontend-web/src/hooks/index.ts
new file mode 100644
index 00000000..bb2d9d1b
--- /dev/null
+++ b/frontend-web/src/hooks/index.ts
@@ -0,0 +1,9 @@
+export { useLocalStorage } from './useLocalStorage';
+export { useWindowSize, useIsMobile } from './useWindowSize';
+export { useDebounce, useDebounceCallback } from './useDebounce';
+export { useToggle } from './useToggle';
+export { useAsync } from './useAsync';
+export { useChatHistory } from './useChatHistory';
+export { useExpertAuthBootstrap } from './useExpertAuthBootstrap';
+export type { LlmItem, CurrentUser } from './useExpertAuthBootstrap';
+export type { ChatMessage } from './useChatHistory';
\ No newline at end of file
diff --git a/frontend-web/src/hooks/use-mobile.tsx b/frontend-web/src/hooks/use-mobile.tsx
new file mode 100644
index 00000000..2b0fe1df
--- /dev/null
+++ b/frontend-web/src/hooks/use-mobile.tsx
@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}
diff --git a/frontend-web/src/hooks/useAsync.ts b/frontend-web/src/hooks/useAsync.ts
new file mode 100644
index 00000000..792fd967
--- /dev/null
+++ b/frontend-web/src/hooks/useAsync.ts
@@ -0,0 +1,37 @@
+import { useState, useCallback } from 'react';
+
+interface AsyncState<T> {
+  data: T | null;
+  loading: boolean;
+  error: Error | null;
+}
+
+export function useAsync<T>() {
+  const [state, setState] = useState<AsyncState<T>>({
+    data: null,
+    loading: false,
+    error: null,
+  });
+
+  const execute = useCallback(async (asyncFunction: () => Promise<T>) => {
+    setState({ data: null, loading: true, error: null });
+    try {
+      const data = await asyncFunction();
+      setState({ data, loading: false, error: null });
+      return data;
+    } catch (error) {
+      setState({ data: null, loading: false, error: error as Error });
+      throw error;
+    }
+  }, []);
+
+  const reset = useCallback(() => {
+    setState({ data: null, loading: false, error: null });
+  }, []);
+
+  return {
+    ...state,
+    execute,
+    reset,
+  };
+}
\ No newline at end of file
diff --git a/frontend-web/src/hooks/useChatHistory.ts b/frontend-web/src/hooks/useChatHistory.ts
new file mode 100644
index 00000000..f3ba37ce
--- /dev/null
+++ b/frontend-web/src/hooks/useChatHistory.ts
@@ -0,0 +1,80 @@
+import { useState, useCallback } from 'react';
+
+export interface ChatMessage {
+  id: string;
+  role: 'user' | 'assistant';
+  content: string;
+  timestamp: number;
+}
+
+interface UseChatHistoryReturn {
+  messages: ChatMessage[];
+  addMessage: (role: 'user' | 'assistant', content: string) => void;
+  clearMessages: () => void;
+  deleteMessage: (id: string) => void;
+  updateMessage: (id: string, content: string) => void;
+}
+
+export function useChatHistory(storageKey: string = 'chat-history'): UseChatHistoryReturn {
+  const [messages, setMessages] = useState<ChatMessage[]>(() => {
+    try {
+      const stored = localStorage.getItem(storageKey);
+      return stored ? JSON.parse(stored) : [];
+    } catch {
+      return [];
+    }
+  });
+
+  const saveToStorage = useCallback((newMessages: ChatMessage[]) => {
+    try {
+      localStorage.setItem(storageKey, JSON.stringify(newMessages));
+    } catch (error) {
+      console.error('Failed to save chat history:', error);
+    }
+  }, [storageKey]);
+
+  const addMessage = useCallback((role: 'user' | 'assistant', content: string) => {
+    const newMessage: ChatMessage = {
+      id: `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+      role,
+      content,
+      timestamp: Date.now(),
+    };
+    setMessages((prev) => {
+      const updated = [...prev, newMessage];
+      saveToStorage(updated);
+      return updated;
+    });
+  }, [saveToStorage]);
+
+  const clearMessages = useCallback(() => {
+    setMessages([]);
+    localStorage.removeItem(storageKey);
+  }, [storageKey]);
+
+  const deleteMessage = useCallback((id: string) => {
+    setMessages((prev) => {
+      const updated = prev.filter((msg) => msg.id !== id);
+      saveToStorage(updated);
+      return updated;
+    });
+  }, [saveToStorage]);
+
+  const updateMessage = useCallback((id: string, content: string) => {
+    setMessages((prev) => {
+      const updated = prev.map((msg) =>
+        msg.id === id ? { ...msg, content } : msg
+      );
+      saveToStorage(updated);
+      return updated;
+    });
+  }, [saveToStorage]);
+
+  return {
+    messages,
+    addMessage,
+    clearMessages,
+    deleteMessage,
+    updateMessage,
+  };
+}
\ No newline at end of file
diff --git a/frontend-web/src/hooks/useDebounce.ts b/frontend-web/src/hooks/useDebounce.ts
new file mode 100644
index 00000000..5f8d8254
--- /dev/null
+++ b/frontend-web/src/hooks/useDebounce.ts
@@ -0,0 +1,40 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+
+export function useDebounce<T>(value: T, delay: number = 300): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}
+
+export function useDebounceCallback<T extends (...args: any[]) => any>(
+  callback: T,
+  delay: number = 300
+): T {
+  const callbackRef = useRef(callback);
+  const timeoutRef = useRef<NodeJS.Timeout>();
+
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+
+  const debouncedCallback = useCallback((...args: Parameters<T>) => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(() => {
+      callbackRef.current(...args);
+    }, delay);
+  }, [delay]) as T;
+
+  return debouncedCallback;
+}
\ No newline at end of file
diff --git a/frontend-web/src/hooks/useExpertAuthBootstrap.ts b/frontend-web/src/hooks/useExpertAuthBootstrap.ts
new file mode 100644
index 00000000..5dfa0b9d
--- /dev/null
+++ b/frontend-web/src/hooks/useExpertAuthBootstrap.ts
@@ -0,0 +1,110 @@
+import { useCallback, useEffect, useState } from 'react';
+
+export interface LlmItem {
+  id: string;
+  name: string;
+}
+
+export interface CurrentUser {
+  id: string;
+  email: string;
+  is_active: boolean;
+  is_superuser: boolean;
+  is_verified: boolean;
+  pages_limit: number;
+  pages_used: number;
+}
+
+type RequestInfoLike = Parameters<typeof fetch>[0];
+type RequestInitLike = Parameters<typeof fetch>[1];
+
+const LOGIN_URL = 'http://47.88.25.99:8000/auth/jwt/login';
+const LLMS_URL = 'http://47.88.25.99:8000/api/v1/expert-agents/llms';
+const ME_URL = 'http://47.88.25.99:8000/users/me';
+
+export function useExpertAuthBootstrap() {
+  const [llmList, setLlmList] = useState<LlmItem[]>([]);
+  const [currentUser, setCurrentUser] = useState<CurrentUser | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const authedFetch = useCallback(async (input: RequestInfoLike, init?: RequestInitLike) => {
+    const token = localStorage.getItem('access_token');
+    const headers = new Headers(init?.headers);
+    if (token) {
+      headers.set('Authorization', `Bearer ${token}`);
+    }
+    return fetch(input, { ...init, headers });
+  }, []);
+
+  const login = useCallback(async () => {
+    const formData = new FormData();
+    formData.append('username', 'dhk@qq.com');
+    formData.append('password', '1qaz@WSX');
+    formData.append('grant_type', 'password');
+
+    const res = await fetch(LOGIN_URL, {
+      method: 'POST',
+      body: formData,
+    });
+
+    if (!res.ok) {
+      throw new Error(`登录失败: ${res.status} ${res.statusText}`);
+    }
+
+    const data = await res.json();
+    if (data?.access_token) {
+      localStorage.setItem('access_token', data.access_token);
+    }
+  }, []);
+
+  const fetchLlmList = useCallback(async () => {
+    const res = await authedFetch(LLMS_URL, { method: 'GET' });
+    if (!res.ok) {
+      throw new Error(`llms 接口失败: ${res.status} ${res.statusText}`);
+    }
+
+    const data: unknown = await res.json();
+    const list = Array.isArray(data) ? (data as LlmItem[]) : [];
+    setLlmList(list);
+    return list;
+  }, [authedFetch]);
+
+  const fetchCurrentUser = useCallback(async () => {
+    const res = await authedFetch(ME_URL, { method: 'GET' });
+    if (!res.ok) {
+      throw new Error(`users/me 接口失败: ${res.status} ${res.statusText}`);
+    }
+
+    const data: unknown = await res.json();
+    const user = (data as CurrentUser) ?? null;
+    setCurrentUser(user);
+    return user;
+  }, [authedFetch]);
+
+  const bootstrap = useCallback(async () => {
+    setLoading(true);
+    try {
+      await login();
+      await Promise.all([fetchLlmList(), fetchCurrentUser()]);
+    } finally {
+      setLoading(false);
+    }
+  }, [fetchCurrentUser, fetchLlmList, login]);
+
+  useEffect(() => {
+    void bootstrap().catch((error) => {
+      console.error('专家中心初始化失败:', error);
+    });
+  }, [bootstrap]);
+
+  return {
+    llmList,
+    currentUser,
+    loading,
+    authedFetch,
+    login,
+    fetchLlmList,
+    fetchCurrentUser,
+    bootstrap,
+  };
+}
diff --git a/frontend-web/src/hooks/useLocalStorage.ts b/frontend-web/src/hooks/useLocalStorage.ts
new file mode 100644
index 00000000..b262b521
--- /dev/null
+++ b/frontend-web/src/hooks/useLocalStorage.ts
@@ -0,0 +1,25 @@
+import { useState, useEffect } from 'react';
+
+export function useLocalStorage<T>(key: string, initialValue: T) {
+  const [storedValue, setStoredValue] = useState<T>(() => {
+    try {
+      const item = window.localStorage.getItem(key);
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      console.error('Error reading from localStorage:', error);
+      return initialValue;
+    }
+  });
+
+  const setValue = (value: T | ((val: T) => T)) => {
+    try {
+      const valueToStore = value instanceof Function ? value(storedValue) : value;
+      setStoredValue(valueToStore);
+      window.localStorage.setItem(key, JSON.stringify(valueToStore));
+    } catch (error) {
+      console.error('Error writing to localStorage:', error);
+    }
+  };
+
+  return [storedValue, setValue] as const;
+}
\ No newline at end of file
diff --git a/frontend-web/src/hooks/useSession.js b/frontend-web/src/hooks/useSession.js
new file mode 100644
index 00000000..d4adce26
--- /dev/null
+++ b/frontend-web/src/hooks/useSession.js
@@ -0,0 +1,852 @@
+import { useState, useRef, useCallback } from 'react';
+
+/**
+ * 会话初始状态
+ *
+ * status 枚举：
+ * - 'idle': 未启动
+ * - 'running': 正在运行（流式输出中）
+ * - 'waiting_human': 等待人工确认（仅 human_review 模式）
+ * - 'done': 分析完成
+ * - 'error': 发生错误
+ *
+ * phase 枚举：
+ * - 'starting': 启动阶段（第 1 轮，协调者分配初始任务）
+ * - 'diverging': 辩论阶段（多智能体并行输出）
+ * - 'closing': 收敛阶段（协调者整合草稿）
+ * - 'done': 完成
+ */
+const initialState = {
+  status: 'idle',
+  sessionId: null,
+  backendUrl: '',
+  coordinatorMode: 'auto',
+  phase: null,
+  currentRound: 0,
+  totalRounds: 0,
+  divergeRounds: 0,
+  reportSchema: {},
+  agents: [],
+  agentStates: {},
+  coordinatorUpdates: [],
+  latestDraft: {},
+  sharedMemory: null,
+  backgroundRetrieval: null,
+  finalReport: null,
+  finalReportPartial: {},
+  currentFinalField: null,
+  pendingReview: null,
+  reviewSubmitting: false,
+  reviewRevising: false,
+  errors: [],
+  timeline: [],
+};
+
+/**
+ * 规范化运行时智能体配置
+ *
+ * 将模板中的原始 agents 数组转换为运行时格式，
+ * 确保每个 agent 都包含所有必需字段（id、name、dimension、expertise 等）。
+ *
+ * @param {Array} agents - 原始智能体配置数组
+ * @param {Object} reportSchema - 报告结构定义，用于推断 relevant_fields
+ * @returns {Array} 规范化后的智能体数组
+ */
+function normalizeRuntimeAgents(agents = [], reportSchema = {}) {
+  const allFields = Object.keys(reportSchema || {});
+
+  return agents.map((agent, index) => {
+    const id = agent.id || `agent_${index + 1}`;
+    const description = agent.description || agent.expertise || agent.dimension || '';
+    const skill = agent.skill || agent.expertise || description;
+
+    return {
+      id,
+      name: agent.name || id,
+      description,
+      skill,
+      dimension: agent.dimension || agent.name || id,
+      scenario_role: agent.scenario_role || agent.expertise || description,
+      relevant_fields: Array.isArray(agent.relevant_fields) && agent.relevant_fields.length > 0
+        ? agent.relevant_fields
+        : allFields,
+      analysis_contract: Array.isArray(agent.analysis_contract)
+        ? agent.analysis_contract
+        : [
+            '输出自然语言分析，不输出 JSON。',
+            '充分展开材料、依据、反例、分歧和边界条件，最终收缩由协调者完成。',
+          ],
+      retrieval_mode: agent.retrieval_mode || 'always',
+      allowed_source_ids: agent.allowed_source_ids || [],
+      retrieval_instruction: agent.retrieval_instruction || '优先检索与本轮任务相关的最新新闻、公开事实和可核验线索。',
+    };
+  });
+}
+
+/**
+ * 构建发送给后端的模板对象
+ */
+function buildTemplate(config) {
+  return {
+    template_id: config.template_id,
+    template_name: config.template_name || '',
+    template_brief: config.template_brief || '',
+    consistency_mode: config.consistency_mode || 'free',
+    report_schema: config.report_schema || {},
+    report_examples: config.report_examples || {},
+    field_requirements: config.field_requirements || {},
+    coordinator_config: config.coordinator_config || {},
+    agent_adaptation_policy: config.agent_adaptation_policy || {},
+  };
+}
+
+/**
+ * 构建发送给后端的完整 session 请求体
+ */
+function buildSessionPayload(config) {
+  const reportSchema = config.report_schema || {};
+  const reviewMode = config.coordinator_mode || config.review_mode || 'auto';
+
+  return {
+    task_context: config.task_context || '',
+    template: buildTemplate(config),
+    agents: normalizeRuntimeAgents(config.agents || [], reportSchema),
+    llm_preset_id: config.llm_preset_id || '',
+    phase_config: config.phase_config || { diverge_rounds: 3 },
+    review_mode: reviewMode,
+    retrieval: config.retrieval || config.retrieve,
+  };
+}
+
+/**
+ * 将后端 proposal 数据转换为前端 CoordinatorCard 所需格式
+ *
+ * @param {Object} proposal - 后端提案对象
+ * @param {Object} previousDraft - 上一轮的草稿（用于合并增量更新）
+ * @returns {Object} 前端协调者数据
+ */
+function proposalToCoordData(proposal, previousDraft = {}) {
+  const draftUpdates = proposal?.draft_updates || {};
+  return {
+    round: proposal?.round_index,
+    divergeRound: proposal?.diverge_round,
+    totalDivergeRounds: proposal?.total_diverge_rounds,
+    nextSpeakers: proposal?.next_speakers || [],
+    focus: proposal?.focus || {},
+    draft: { ...previousDraft, ...draftUpdates },
+    draftUpdates,
+    gaps: proposal?.gaps || [],
+    fieldAssessment: proposal?.field_assessment || {},
+    sharedMemory: proposal?.shared_memory || null,
+    reasoning: proposal?.reasoning || '',
+    proposal,
+  };
+}
+
+/**
+ * 解析 SSE (Server-Sent Events) 数据行
+ *
+ * 格式: "data: {...}" 或 "data: [DONE]"
+ * @param {string} line - SSE 行文本
+ * @returns {Object|null} 解析后的 JSON 对象，无效行返回 null
+ */
+function parseSsePayload(line) {
+  const trimmed = line.trim();
+  if (!trimmed.startsWith('data:')) return null;
+  const jsonStr = trimmed.slice(5).trim();
+  if (!jsonStr || jsonStr === '[DONE]') return null;
+  return JSON.parse(jsonStr);
+}
+
+/**
+ * useSession hook
+ *
+ * 管理整个分析会话的生命周期：
+ * - startSession: 发送 POST /sessions/start 创建会话，然后连接 SSE 事件流
+ * - stopSession: 中断当前连接
+ * - reset: 重置所有状态
+ * - approveCoordinator / reviseCoordinator: 人工确认 / 修改提案
+ *
+ * SSE 事件类型及处理：
+ * - session_started: 初始化阶段、智能体、轮次
+ * - agent_started: 在 timeline 中插入 agent_contribution（streaming=true）
+ * - agent_token: 追加 token 到对应 agent_contribution 的 content/thinking
+ * - agent_done: 将对应 agent_contribution 的 streaming 标记为 false
+ * - coordinator_started: 插入 coordinator_streaming 卡片
+ * - coordinator_token: 追加 coordinator 的思考过程或内容 token
+ * - coordinator_status: 更新状态横幅
+ * - coordinator_proposal: 替换 coordinator_streaming 为 coordinator 完成卡片
+ * - human_review_required: 切换状态为 waiting_human
+ * - final_report_token: 追加最终报告 token
+ * - final_report_done: 插入 final_report 卡片，状态切换为 done
+ * - error: 追加错误到 errors 数组
+ *
+ * @returns {Object} 会话状态 + 操作方法
+ */
+export function useSession() {
+  const [state, setState] = useState(initialState);
+  const abortControllerRef = useRef(null);
+  const timelineRef = useRef([]);        // 用 ref 保存 timeline，避免闭包过期
+  const configRef = useRef(null);        // 保存启动时的配置引用
+
+  /** 重置所有状态 */
+  const reset = useCallback(() => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+      abortControllerRef.current = null;
+    }
+    timelineRef.current = [];
+    configRef.current = null;
+    setState(initialState);
+  }, []);
+
+  /**
+   * 从历史记录 JSON 恢复会话展示状态。
+   *
+   * 后端历史接口未来会直接返回保存时的 snapshot；这里把 snapshot 写回 state 和 timelineRef，
+   * 让用户进入页面后无需重新生成，也能直接看到 Timeline、左右侧进度和最终报告。
+   */
+  const hydrateFromSnapshot = useCallback((snapshot = {}) => {
+    const nextTimeline = Array.isArray(snapshot.timeline) ? snapshot.timeline : [];
+    timelineRef.current = nextTimeline;
+    configRef.current = snapshot.config || null;
+    setState({
+      ...initialState,
+      ...snapshot,
+      status: snapshot.status || (nextTimeline.length > 0 ? 'done' : 'idle'),
+      phase: snapshot.phase || (nextTimeline.length > 0 ? 'done' : null),
+      timeline: nextTimeline,
+      errors: Array.isArray(snapshot.errors) ? snapshot.errors : [],
+      agentStates: snapshot.agentStates || {},
+      agents: Array.isArray(snapshot.agents) ? snapshot.agents : [],
+      reportSchema: snapshot.reportSchema || snapshot.config?.report_schema || {},
+      finalReportPartial: snapshot.finalReportPartial || snapshot.finalReport?.report || {},
+      pendingReview: null,
+      reviewSubmitting: false,
+      reviewRevising: false,
+    });
+  }, []);
+
+  /** 停止当前会话（中断 SSE 连接） */
+  const stopSession = useCallback(() => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+      abortControllerRef.current = null;
+    }
+    setState(prev => ({ ...prev, status: 'idle' }));
+  }, []);
+
+  /**
+   * SSE 事件处理器
+   *
+   * 根据 event 类型分发处理，修改 timelineRef 和 state。
+   * 使用 timelineRef（而非 state.timeline）进行链表式修改，
+   * 避免在快速 token 到来时因 React 批量更新导致丢帧。
+   */
+  const handleEvent = useCallback((parsed, backendUrl) => {
+    const { event, data } = parsed;
+    if (!event) return;
+
+    switch (event) {
+      // ====== 会话启动 ======
+      case 'session_started': {
+        const agents = data.agents || [];
+        const agentStates = {};
+        agents.forEach(agent => {
+          agentStates[agent.id] = {
+            id: agent.id,
+            name: agent.name,
+            dimension: agent.dimension,
+            status: 'idle',
+            rounds: [],
+          };
+        });
+        setState(prev => ({
+          ...prev,
+          sessionId: prev.sessionId,
+          backendUrl,
+          phase: 'starting',
+          agents,
+          agentStates,
+          totalRounds: (configRef.current?.phase_config?.diverge_rounds || 3) + 1,
+          divergeRounds: configRef.current?.phase_config?.diverge_rounds || 3,
+          reportSchema: configRef.current?.report_schema || {},
+        }));
+        break;
+      }
+
+      // ====== 智能体开始输出 ======
+      case 'agent_started': {
+        const agentId = data.agent_id;
+        const round = data.round_index || 0;
+        const phase = data.phase || 'starting';
+
+        // 检查是否已有该轮次的 round_start，没有则插入
+        const hasRoundStart = timelineRef.current.some(
+          item => item.type === 'round_start' && item.round === round && item.phase === phase
+        );
+
+        if (!hasRoundStart) {
+          timelineRef.current = [
+            ...timelineRef.current,
+            { type: 'round_start', round, phase, agentIds: [agentId] },
+          ];
+        } else {
+          timelineRef.current = timelineRef.current.map(item =>
+            item.type === 'round_start' && item.round === round && item.phase === phase
+              ? { ...item, agentIds: [...new Set([...(item.agentIds || []), agentId])] }
+              : item
+          );
+        }
+
+        // 插入流式 agent_contribution
+        timelineRef.current = [
+          ...timelineRef.current,
+          {
+            type: 'agent_contribution',
+            agentId,
+            round,
+            phase,
+            streaming: true,
+            data: {
+              round,
+              phase,
+              content: '',
+              thinking: '',
+              retrievalLog: [],
+              retrievalCount: 0,
+              referenceMap: {},
+            },
+          },
+        ];
+
+        setState(prev => {
+          const updatedAgentStates = { ...prev.agentStates };
+          updatedAgentStates[agentId] = {
+            ...(updatedAgentStates[agentId] || { id: agentId, name: data.agent_name, dimension: agentId, rounds: [] }),
+            status: 'thinking',
+          };
+          return {
+            ...prev,
+            phase,
+            currentRound: Math.max(prev.currentRound, round),
+            agentStates: updatedAgentStates,
+            timeline: timelineRef.current,
+          };
+        });
+        break;
+      }
+
+      // ====== 智能体完成输出 ======
+      case 'agent_done': {
+        const agentId = data.agent_id;
+        const round = data.round_index || 0;
+        const phase = data.phase || 'starting';
+        const retrievalLog = data.retrieval_log || [];
+        const roundData = {
+          round,
+          phase,
+          content: data.content || '',
+          thinking: data.thinking || '',
+          retrievalLog,
+          retrievalCount: retrievalLog.length,
+          referenceMap: data.reference_map || {},
+          metadata: data.metadata || {},
+        };
+
+        // 将对应的流式条目转为完成状态
+        timelineRef.current = timelineRef.current.map(item =>
+          item.type === 'agent_contribution' && item.agentId === agentId && item.round === round && item.streaming
+            ? { ...item, streaming: false, data: roundData }
+            : item
+        );
+
+        setState(prev => {
+          const updatedAgentStates = { ...prev.agentStates };
+          const existing = updatedAgentStates[agentId] || {
+            id: agentId,
+            name: data.agent_name,
+            dimension: agentId,
+            status: 'idle',
+            rounds: [],
+          };
+          updatedAgentStates[agentId] = {
+            ...existing,
+            name: data.agent_name,
+            status: 'done',
+            rounds: [...(existing.rounds || []), roundData],
+          };
+          return { ...prev, agentStates: updatedAgentStates, timeline: timelineRef.current };
+        });
+        break;
+      }
+
+      // ====== 智能体 token（流式追加） ======
+      case 'agent_token': {
+        const agentId = data.agent_id;
+        const round = data.round_index || 0;
+        const token = data.token || '';
+        const tokenType = data.token_type || 'content';
+
+        // 找到对应的 streaming agent_contribution 并追加 token
+        timelineRef.current = timelineRef.current.map(item => {
+          if (item.type !== 'agent_contribution' || item.agentId !== agentId || item.round !== round || !item.streaming) {
+            return item;
+          }
+          if (tokenType === 'thinking') {
+            return { ...item, data: { ...item.data, thinking: (item.data.thinking || '') + token } };
+          }
+          return { ...item, data: { ...item.data, content: (item.data.content || '') + token } };
+        });
+        setState(prev => ({ ...prev, timeline: timelineRef.current }));
+        break;
+      }
+
+      // ====== 协调员开始流式输出 ======
+      case 'coordinator_started': {
+        timelineRef.current = [
+          ...timelineRef.current,
+          {
+            type: 'coordinator_streaming',
+            phase: data.phase || 'diverging',
+            divergeRound: data.diverge_round,
+            totalDivergeRounds: data.total_diverge_rounds,
+            thinking: '',
+            content: '协调者正在评估字段完成度、更新草稿并选择下一轮发言者。',
+            statusMessage: '协调草案生成中…',
+            currentField: null,
+            reportPartial: {},
+          },
+        ];
+        setState(prev => ({ ...prev, phase: data.phase || prev.phase, timeline: timelineRef.current }));
+        break;
+      }
+
+      // ====== 协调员 token（流式追加） ======
+      case 'coordinator_token': {
+        const token = data.token || '';
+        const tokenType = data.token_type || 'thinking';
+        const phase = data.phase || 'diverging';
+
+        // 找到最后一个 coordinator_streaming 项并追加
+        const lastIdx = timelineRef.current.reduce((last, item, idx) => (
+          item.type === 'coordinator_streaming' ? idx : last
+        ), -1);
+
+        if (lastIdx === -1) {
+          // 尚未创建，新建一个
+          timelineRef.current = [
+            ...timelineRef.current,
+            {
+              type: 'coordinator_streaming',
+              phase,
+              divergeRound: data.diverge_round,
+              totalDivergeRounds: data.total_diverge_rounds,
+              thinking: tokenType === 'thinking' ? token : '',
+              content: tokenType === 'content' ? token : '',
+              statusMessage: '',
+              currentField: data.field || null,
+              reportPartial: {},
+            },
+          ];
+        } else {
+          timelineRef.current = timelineRef.current.map((item, idx) => {
+            if (idx !== lastIdx || item.type !== 'coordinator_streaming') return item;
+            return {
+              ...item,
+              currentField: data.field || item.currentField,
+              thinking: tokenType === 'thinking' ? (item.thinking || '') + token : item.thinking,
+              content: tokenType === 'content' ? (item.content || '') + token : item.content,
+              statusMessage: '',
+            };
+          });
+        }
+        setState(prev => ({ ...prev, timeline: timelineRef.current }));
+        break;
+      }
+
+      // ====== 协调员状态更新 ======
+      case 'coordinator_status': {
+        const message = data.message || '';
+        const phase = data.phase || 'diverging';
+
+        const lastIdx = timelineRef.current.reduce((last, item, idx) => (
+          item.type === 'coordinator_streaming' ? idx : last
+        ), -1);
+
+        if (lastIdx === -1) {
+          timelineRef.current = [
+            ...timelineRef.current,
+            {
+              type: 'coordinator_streaming',
+              phase,
+              divergeRound: data.diverge_round,
+              totalDivergeRounds: data.total_diverge_rounds,
+              thinking: '',
+              content: '',
+              statusMessage: message,
+              currentField: null,
+              reportPartial: {},
+            },
+          ];
+        } else {
+          timelineRef.current = timelineRef.current.map((item, idx) => {
+            if (idx !== lastIdx || item.type !== 'coordinator_streaming') return item;
+            return { ...item, statusMessage: message };
+          });
+        }
+
+        setState(prev => ({ ...prev, timeline: timelineRef.current }));
+        break;
+      }
+
+      // ====== 协调员提案完成 ======
+      case 'coordinator_proposal': {
+        setState(prev => {
+          const coordData = proposalToCoordData(data.proposal, prev.latestDraft);
+          let replaced = false;
+
+          // 将最后一个 coordinator_streaming 替换为 coordinator 完成卡片
+          timelineRef.current = timelineRef.current.map((item, idx) => {
+            if (item.type !== 'coordinator_streaming' || replaced) return item;
+            const lastIdx = timelineRef.current.reduce((last, it, i) => it.type === 'coordinator_streaming' ? i : last, -1);
+            if (idx !== lastIdx) return item;
+            replaced = true;
+            return {
+              type: 'coordinator',
+              data: coordData,
+              thinking: coordData.reasoning,
+            };
+          });
+
+          if (!replaced) {
+            timelineRef.current = [...timelineRef.current, { type: 'coordinator', data: coordData, thinking: coordData.reasoning }];
+          }
+
+          return {
+            ...prev,
+            status: data.revised ? 'running' : prev.status,
+            coordinatorUpdates: [...prev.coordinatorUpdates, coordData],
+            latestDraft: coordData.draft,
+            sharedMemory: coordData.sharedMemory,
+            pendingReview: data.revised ? null : prev.pendingReview,
+            reviewRevising: false,
+            timeline: timelineRef.current,
+          };
+        });
+        break;
+      }
+
+      // ====== 需要人工确认（仅 human_review 模式） ======
+      case 'human_review_required': {
+        setState(prev => {
+          const coordData = proposalToCoordData(data.proposal, prev.latestDraft);
+          return {
+            ...prev,
+            status: 'waiting_human',
+            pendingReview: {
+              ...coordData,
+              proposal: data.proposal,
+            },
+            sharedMemory: coordData.sharedMemory,
+            reviewSubmitting: false,
+            reviewRevising: false,
+          };
+        });
+        break;
+      }
+
+      // ====== 最终报告生成完成 ======
+      case 'final_report_done': {
+        const output = {
+          report: data.report || {},
+          dimensions: data.dimensions || {},
+          meta: data.metadata || {},
+        };
+        timelineRef.current = [...timelineRef.current, { type: 'final_report', data: output }];
+        setState(prev => ({
+          ...prev,
+          status: 'done',
+          finalReport: output,
+          finalReportPartial: output.report || {},
+          currentFinalField: null,
+          phase: 'done',
+          pendingReview: null,
+          reviewSubmitting: false,
+          reviewRevising: false,
+          timeline: timelineRef.current,
+        }));
+        break;
+      }
+
+      // ====== 最终报告 token（流式追加） ======
+      case 'final_report_token': {
+        const token = data.token || '';
+        const field = data.field || null;
+        const reportPartial = data.report_partial || {};
+
+        const lastIdx = timelineRef.current.reduce((last, item, idx) => (
+          item.type === 'coordinator_streaming' ? idx : last
+        ), -1);
+
+        if (lastIdx === -1) {
+          timelineRef.current = [
+            ...timelineRef.current,
+            {
+              type: 'coordinator_streaming',
+              phase: 'final_report',
+              thinking: '',
+              content: token,
+              statusMessage: '',
+              currentField: field,
+              reportPartial,
+            },
+          ];
+        } else {
+          timelineRef.current = timelineRef.current.map((item, idx) => {
+            if (idx !== lastIdx || item.type !== 'coordinator_streaming') return item;
+            const fieldChanged = field && field !== item.currentField;
+            return {
+              ...item,
+              phase: 'final_report',
+              content: fieldChanged ? token : (item.content || '') + token,
+              currentField: field || item.currentField,
+              reportPartial,
+            };
+          });
+        }
+        setState(prev => ({
+          ...prev,
+          finalReportPartial: reportPartial,
+          currentFinalField: field,
+          timeline: timelineRef.current,
+        }));
+        break;
+      }
+
+      // ====== 错误 ======
+      case 'error': {
+        setState(prev => ({
+          ...prev,
+          status: prev.status === 'waiting_human' ? prev.status : 'error',
+          errors: [...prev.errors, { error: data.message || data.error || JSON.stringify(data), ...data }],
+        }));
+        break;
+      }
+
+      default:
+        break;
+    }
+  }, []);
+
+  /**
+   * 读取 SSE 事件流
+   *
+   * 使用 fetch + ReadableStream reader 逐行解析，
+   * 支持 AbortController 中断。
+   *
+   * @param {string} url - SSE 端点 URL
+   * @param {string} backendUrl - 后端基础地址
+   * @param {AbortController} abortController - 中断控制器
+   */
+  const readEventStream = useCallback(async (url, backendUrl, abortController) => {
+    const response = await fetch(url, { signal: abortController.signal });
+    if (!response.ok) {
+      const text = await response.text();
+      throw new Error(`HTTP ${response.status}: ${text}`);
+    }
+
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder();
+    let buffer = '';
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done || abortController.signal.aborted) break;
+
+      buffer += decoder.decode(value, { stream: true });
+      const lines = buffer.split('\n');
+      buffer = lines.pop() || '';
+
+      for (const line of lines) {
+        try {
+          const parsed = parseSsePayload(line);
+          if (parsed) handleEvent(parsed, backendUrl);
+        } catch (error) {
+          console.warn('Failed to parse SSE line:', line, error);
+        }
+      }
+    }
+  }, [handleEvent]);
+
+  /**
+   * 启动分析会话
+   *
+   * 1. 发送 POST /sessions/start 创建会话
+   * 2. 获取 session_id
+   * 3. 通过 GET /sessions/{id}/events 订阅 SSE 事件流
+   *
+   * @param {Object} config - 页面配置（任务背景、模板、智能体等）
+   * @param {string} backendUrl - 后端 API 地址
+   */
+  const startSession = useCallback(async (config, backendUrl) => {
+    timelineRef.current = [];
+    configRef.current = config;
+    setState({
+      ...initialState,
+      status: 'running',
+      backendUrl,
+      coordinatorMode: config.coordinator_mode || 'auto',
+      reportSchema: config.report_schema || {},
+    });
+
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+    const abortController = new AbortController();
+    abortControllerRef.current = abortController;
+
+    try {
+      const payload = buildSessionPayload(config);
+      const response = await fetch(`${backendUrl}/sessions/start`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload),
+        signal: abortController.signal,
+      });
+
+      if (!response.ok) {
+        const text = await response.text();
+        throw new Error(`HTTP ${response.status}: ${text}`);
+      }
+
+      const result = await response.json();
+      const sessionId = result.session_id;
+      setState(prev => ({
+        ...prev,
+        sessionId,
+        status: result.status === 'created' ? 'running' : result.status,
+      }));
+
+      await readEventStream(`${backendUrl}/sessions/${sessionId}/events`, backendUrl, abortController);
+
+      // SSE 流结束后，设置最终状态（除非已是 error/waiting_human/done）
+      setState(prev => ({
+        ...prev,
+        status: prev.status === 'error' || prev.status === 'waiting_human' || prev.status === 'done'
+          ? prev.status
+          : 'done',
+      }));
+    } catch (err) {
+      if (err.name === 'AbortError') return;
+      console.error('Session error:', err);
+      setState(prev => ({
+        ...prev,
+        status: 'error',
+        errors: [...prev.errors, { error: err.message }],
+      }));
+    }
+  }, [readEventStream]);
+
+  /**
+   * 人工确认协调者提案
+   *
+   * 在 human_review 模式下，用户修改提案内容后提交确认。
+   * 发送 POST /sessions/{id}/coordinator/approve。
+   *
+   * @param {Object} payload - { nextSpeakers, focus, draft, gaps }
+   */
+  const approveCoordinator = useCallback(async (payload) => {
+    if (!state.sessionId || !state.backendUrl) {
+      throw new Error('session 未初始化');
+    }
+
+    const baseProposal = state.pendingReview?.proposal || {};
+    const proposal = {
+      ...baseProposal,
+      next_speakers: payload.nextSpeakers,
+      focus: payload.focus,
+      draft_updates: payload.draft,
+      gaps: payload.gaps,
+    };
+
+    setState(prev => ({ ...prev, reviewSubmitting: true }));
+    try {
+      const response = await fetch(`${state.backendUrl}/sessions/${state.sessionId}/coordinator/approve`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ proposal }),
+      });
+
+      if (!response.ok) {
+        const msg = await response.text();
+        throw new Error(msg || `HTTP ${response.status}`);
+      }
+
+      const result = await response.json();
+      setState(prev => ({
+        ...prev,
+        status: 'running',
+        pendingReview: null,
+        reviewSubmitting: false,
+      }));
+    } catch (err) {
+      console.error('approve error:', err);
+      setState(prev => ({
+        ...prev,
+        reviewSubmitting: false,
+        errors: [...prev.errors, { error: err.message }],
+      }));
+    }
+  }, [state.sessionId, state.backendUrl, state.pendingReview]);
+
+  /**
+   * 发送修改指令，让协调员重新生成提案
+   *
+   * @param {string} instruction - 用户的修改指令（自然语言）
+   */
+  const reviseCoordinator = useCallback(async (instruction) => {
+    if (!state.sessionId || !state.backendUrl) {
+      throw new Error('session 未初始化');
+    }
+
+    setState(prev => ({ ...prev, reviewRevising: true }));
+    try {
+      const response = await fetch(`${state.backendUrl}/sessions/${state.sessionId}/coordinator/revise`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ instruction }),
+      });
+
+      if (!response.ok) {
+        const msg = await response.text();
+        throw new Error(msg || `HTTP ${response.status}`);
+      }
+
+      // 后端会在修订完成后通过 SSE 推送新的 coordinator_proposal
+      setState(prev => ({
+        ...prev,
+        reviewRevising: false,
+        pendingReview: null,
+        status: 'running',
+      }));
+    } catch (err) {
+      console.error('revise error:', err);
+      setState(prev => ({
+        ...prev,
+        reviewRevising: false,
+        errors: [...prev.errors, { error: err.message }],
+      }));
+    }
+  }, [state.sessionId, state.backendUrl]);
+
+  return {
+    ...state,
+    hydrateFromSnapshot,
+    reset,
+    startSession,
+    stopSession,
+    approveCoordinator,
+    reviseCoordinator,
+  };
+}
diff --git a/frontend-web/src/hooks/useToggle.ts b/frontend-web/src/hooks/useToggle.ts
new file mode 100644
index 00000000..e581c28a
--- /dev/null
+++ b/frontend-web/src/hooks/useToggle.ts
@@ -0,0 +1,15 @@
+import { useState, useCallback } from 'react';
+
+export function useToggle(initialValue: boolean = false): [boolean, () => void, (value: boolean) => void] {
+  const [value, setValue] = useState<boolean>(initialValue);
+
+  const toggle = useCallback(() => {
+    setValue((prev) => !prev);
+  }, []);
+
+  const setToggle = useCallback((newValue: boolean) => {
+    setValue(newValue);
+  }, []);
+
+  return [value, toggle, setToggle];
+}
\ No newline at end of file
diff --git a/frontend-web/src/hooks/useWindowSize.ts b/frontend-web/src/hooks/useWindowSize.ts
new file mode 100644
index 00000000..c55fc3d7
--- /dev/null
+++ b/frontend-web/src/hooks/useWindowSize.ts
@@ -0,0 +1,32 @@
+import { useState, useEffect, useCallback } from 'react';
+
+interface WindowSize {
+  width: number;
+  height: number;
+}
+
+export function useWindowSize() {
+  const [windowSize, setWindowSize] = useState<WindowSize>({
+    width: window.innerWidth,
+    height: window.innerHeight,
+  });
+
+  const handleResize = useCallback(() => {
+    setWindowSize({
+      width: window.innerWidth,
+      height: window.innerHeight,
+    });
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, [handleResize]);
+
+  return windowSize;
+}
+
+export function useIsMobile() {
+  const { width } = useWindowSize();
+  return width < 768;
+}
\ No newline at end of file
diff --git a/frontend-web/src/pages/StrategyRoutes.tsx b/frontend-web/src/pages/StrategyRoutes.tsx
index 54839e33..879730b9 100644
--- a/frontend-web/src/pages/StrategyRoutes.tsx
+++ b/frontend-web/src/pages/StrategyRoutes.tsx
@@ -1,11 +1,30 @@
 import { Navigate, Route, Routes } from "react-router-dom";
+import type { ReactNode } from "react";
+
+import { getStoredAuth } from "@/core/auth";
+import { SubtasksProvider } from "@/core/tasks/context";
+import { ArtifactsProvider } from "@/components/workspace/artifacts";
+import { PromptInputProvider } from "@/components/ai-elements/prompt-input";
 
-import QA from "@/strategy-components/components/qa/QA";
 import GeneralQA from "@/strategy-components/components/qa/GeneralQA";
-import AgentQA from "@/strategy-components/components/qa/AgentQA";
-import CollaborativeQA from "@/strategy-components/components/qa/CollaborativeQA";
-import MopeChat from "@/strategy-components/components/qa/MopeChat";
-import TemplateEditor from "@/strategy-components/components/qa/TemplateEditor";
+import AgentsPage from "./AgentsPage";
+import ChatsPage from "./ChatsPage";
+import ChatPage from "./ChatPage";
+import NewAgentPage from "./NewAgentPage";
+import AgentChatPage from "./AgentChatPage";
+import ScheduledTasksPage from "./ScheduledTasksPage";
+import ScheduledTaskRunDetailPage from "./ScheduledTaskRunDetailPage";
+import RecommendedQuestionsPage from "./RecommendedQuestionsPage";
+
+function ChatRuntime({ children }: { children: ReactNode }) {
+  return (
+    <SubtasksProvider>
+      <ArtifactsProvider>
+        <PromptInputProvider>{children}</PromptInputProvider>
+      </ArtifactsProvider>
+    </SubtasksProvider>
+  );
+}
 
 export default function StrategyRoutes() {
   return (
@@ -14,15 +33,57 @@ export default function StrategyRoutes() {
         <Route index element={<Navigate to="qa/general" replace />} />
 
         {/* 问答中心 */}
-        <Route path="qa" element={<Navigate to="qa/general" replace />} />
-        <Route path="qa/new" element={<QA initialMode="new" />} />
         <Route path="qa/general" element={<GeneralQA />} />
-        <Route path="qa/agent" element={<AgentQA />} />
-        <Route path="qa/multi-agent" element={<CollaborativeQA />} />
-        <Route path="qa/mope" element={<MopeChat />} />
-        <Route path="qa/template" element={<TemplateEditor />} />
 
-        <Route path="*" element={<Navigate to="qa/general" replace />} />
+        {/* 对话 */}
+        <Route path="chats" element={<ChatsPage />} />
+        <Route
+          path="chats/:thread_id"
+          element={
+            <ChatRuntime>
+              <ChatPage />
+            </ChatRuntime>
+          }
+        />
+
+        {/* 智能体管理 */}
+        <Route path="agents" element={<AgentsPage />} />
+        <Route path="agents/new" element={<NewAgentPage />} />
+        <Route
+          path="agents/:agent_id/chats"
+          element={<Navigate to="/page/strategy/agents" replace />}
+        />
+        <Route
+          path="agents/:agent_id/chats/:thread_id"
+          element={
+            <ChatRuntime>
+              <AgentChatPage />
+            </ChatRuntime>
+          }
+        />
+
+        {/* 定时任务 */}
+        <Route
+          path="scheduled"
+          element={<Navigate to="/page/strategy/scheduled/tasks" replace />}
+        />
+        <Route path="scheduled/tasks" element={<ScheduledTasksPage />} />
+        <Route
+          path="scheduled/runs/:run_id"
+          element={<ScheduledTaskRunDetailPage />}
+        />
+
+        {/* 设置 */}
+        <Route
+          path="settings/recommended-questions"
+          element={
+            getStoredAuth()?.system_role === "admin" ? (
+              <RecommendedQuestionsPage />
+            ) : (
+              <Navigate to="/page/strategy/chats" replace />
+            )
+          }
+        />
       </Routes>
     </div>
   );
diff --git a/frontend-web/src/pages/WorkspaceRoutes.tsx b/frontend-web/src/pages/WorkspaceRoutes.tsx
index a69ab007..b03318e5 100644
--- a/frontend-web/src/pages/WorkspaceRoutes.tsx
+++ b/frontend-web/src/pages/WorkspaceRoutes.tsx
@@ -20,7 +20,7 @@ import ScheduledTaskRunDetailPage from "./ScheduledTaskRunDetailPage";
 import ScheduledTasksPage from "./ScheduledTasksPage";
 import RecommendedQuestionsPage from "./RecommendedQuestionsPage";
 
-function WorkspaceLayout({
+export function WorkspaceLayout({
   children,
   pageSidebarCollapsed,
   pageSidebarHidden = false,
diff --git a/frontend-web/src/strategy-components/MarkdownRenderer.tsx b/frontend-web/src/strategy-components/MarkdownRenderer.tsx
new file mode 100644
index 00000000..51821967
--- /dev/null
+++ b/frontend-web/src/strategy-components/MarkdownRenderer.tsx
@@ -0,0 +1,204 @@
+import React, { useState } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import rehypeRaw from 'rehype-raw';
+import { Check, Copy } from 'lucide-react';
+import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
+import bash from 'react-syntax-highlighter/dist/esm/languages/prism/bash';
+import css from 'react-syntax-highlighter/dist/esm/languages/prism/css';
+import java from 'react-syntax-highlighter/dist/esm/languages/prism/java';
+import javascript from 'react-syntax-highlighter/dist/esm/languages/prism/javascript';
+import json from 'react-syntax-highlighter/dist/esm/languages/prism/json';
+import jsx from 'react-syntax-highlighter/dist/esm/languages/prism/jsx';
+import markup from 'react-syntax-highlighter/dist/esm/languages/prism/markup';
+import sql from 'react-syntax-highlighter/dist/esm/languages/prism/sql';
+import tsx from 'react-syntax-highlighter/dist/esm/languages/prism/tsx';
+import typescript from 'react-syntax-highlighter/dist/esm/languages/prism/typescript';
+import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+
+interface MarkdownRendererProps {
+  content: string;
+  className?: string;
+  onCitationClick?: (index: number) => void;
+}
+
+SyntaxHighlighter.registerLanguage('bash', bash);
+SyntaxHighlighter.registerLanguage('css', css);
+SyntaxHighlighter.registerLanguage('html', markup);
+SyntaxHighlighter.registerLanguage('java', java);
+SyntaxHighlighter.registerLanguage('javascript', javascript);
+SyntaxHighlighter.registerLanguage('json', json);
+SyntaxHighlighter.registerLanguage('jsx', jsx);
+SyntaxHighlighter.registerLanguage('markup', markup);
+SyntaxHighlighter.registerLanguage('sql', sql);
+SyntaxHighlighter.registerLanguage('tsx', tsx);
+SyntaxHighlighter.registerLanguage('typescript', typescript);
+SyntaxHighlighter.registerLanguage('vue', markup);
+
+const extractTextFromNode = (node: React.ReactNode): string => {
+  if (typeof node === 'string' || typeof node === 'number') return String(node);
+  if (Array.isArray(node)) return node.map(extractTextFromNode).join('');
+  if (React.isValidElement<{ children?: React.ReactNode }>(node)) return extractTextFromNode(node.props.children);
+  return '';
+};
+
+const getLanguageFromClassName = (className = '') => (
+  className.match(/language-([\w-]+)/)?.[1]?.toLowerCase() || 'text'
+);
+
+const languageLabels: Record<string, string> = {
+  js: 'javascript',
+  jsx: 'jsx',
+  ts: 'typescript',
+  tsx: 'tsx',
+  vue: 'vue',
+  java: 'java',
+  py: 'python',
+  sh: 'shell',
+  bash: 'bash',
+  json: 'json',
+  css: 'css',
+  html: 'html',
+  xml: 'xml',
+  sql: 'sql',
+  text: 'text',
+};
+
+const InlineCode: React.FC<{ children: React.ReactNode; className?: string }> = ({ children, className = '' }) => (
+  <code
+    className={`rounded-md border border-gray-200 bg-gray-100 px-1.5 py-0.5 font-mono text-[0.92em] text-rose-700 dark:border-slate-700 dark:bg-slate-800 dark:text-cyan-200 ${className}`}
+  >
+    {children}
+  </code>
+);
+
+const CodeBlock: React.FC<{ children: React.ReactNode; className?: string }> = ({ children, className = '' }) => {
+  const [copied, setCopied] = useState(false);
+  const codeText = extractTextFromNode(children).replace(/\n$/, '');
+  const language = getLanguageFromClassName(className);
+  const languageLabel = languageLabels[language] || language;
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(codeText);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1500);
+    } catch (error) {
+      console.error('复制代码失败:', error);
+    }
+  };
+
+  return (
+    <div className="group relative my-4 overflow-hidden rounded-lg border border-slate-200 bg-[#282c34] shadow-sm dark:border-slate-700">
+      <div className="flex items-center justify-between border-b border-white/10 bg-black/20 px-3 py-2">
+        <span className="font-mono text-xs font-semibold uppercase tracking-wide text-slate-300">
+          {languageLabel}
+        </span>
+        <button
+          type="button"
+          onClick={handleCopy}
+          className="inline-flex items-center gap-1.5 rounded-md border border-white/10 bg-white/10 px-2.5 py-1.5 text-xs font-medium text-slate-200 transition-colors hover:bg-white/15"
+        >
+          {copied ? <Check className="h-3.5 w-3.5" /> : <Copy className="h-3.5 w-3.5" />}
+          {copied ? '已复制' : '复制'}
+        </button>
+      </div>
+      <SyntaxHighlighter
+        language={language}
+        style={oneDark}
+        PreTag="div"
+        customStyle={{
+          margin: 0,
+          padding: '16px',
+          background: 'transparent',
+          fontSize: '13px',
+          lineHeight: 1.7,
+        }}
+        codeTagProps={{
+          style: {
+            fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+          },
+        }}
+      >
+        {codeText}
+      </SyntaxHighlighter>
+    </div>
+  );
+};
+
+const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({ content, className = '', onCitationClick }) => {
+  const contentWithCitationBadge = content.replace(
+    /\[\[(\d+)\]\]/g,
+    '<button type="button" data-citation-index="$1" class="inline-flex items-center justify-center min-w-[1.5rem] h-6 px-2 mx-0.5 rounded-md border text-xs font-semibold align-middle bg-red-50 text-red-600 border-red-200 dark:bg-slate-700 dark:text-slate-100 dark:border-slate-500 cursor-pointer transition-all hover:opacity-85">[$1]</button>',
+  );
+
+  return (
+    <div
+      className={`markdown-content ${className}`}
+      onClick={(event) => {
+        if (!onCitationClick) return;
+        const target = event.target as HTMLElement;
+        const button = target.closest('[data-citation-index]') as HTMLElement | null;
+        if (!button) return;
+        const index = Number(button.dataset.citationIndex || '0');
+        if (Number.isNaN(index) || index <= 0) return;
+        onCitationClick(index);
+      }}
+    >
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        rehypePlugins={[rehypeRaw]}
+        components={{
+          h1: ({ node, ...props }) => <h1 className="mb-4 text-2xl font-bold" {...props} />,
+          h2: ({ node, ...props }) => <h2 className="mb-3 text-xl font-bold" {...props} />,
+          h3: ({ node, ...props }) => <h3 className="mb-2 text-lg font-bold" {...props} />,
+          h4: ({ node, ...props }) => <h4 className="mb-2 text-base font-bold" {...props} />,
+          h5: ({ node, ...props }) => <h5 className="mb-2 text-sm font-bold" {...props} />,
+          h6: ({ node, ...props }) => <h6 className="mb-2 text-xs font-bold" {...props} />,
+          p: ({ node, ...props }) => <p className="mb-4 leading-relaxed" {...props} />,
+          ul: ({ node, ...props }) => <ul className="mb-4 ml-4 list-inside list-disc" {...props} />,
+          ol: ({ node, ...props }) => <ol className="mb-4 ml-4 list-inside list-decimal" {...props} />,
+          li: ({ node, ...props }) => <li className="mb-1" {...props} />,
+          code: ({ node, inline, className, children, ...props }: any) => {
+            const codeText = extractTextFromNode(children).trim();
+            const isShortSingleLineCode = !codeText.includes('\n') && codeText.length <= 80;
+
+            if (inline || isShortSingleLineCode) {
+              return (
+                <InlineCode className={className || ''} {...props}>
+                  {children}
+                </InlineCode>
+              );
+            }
+
+            return <CodeBlock className={className}>{children}</CodeBlock>;
+          },
+          pre: ({ node, children }) => <>{children}</>,
+          blockquote: ({ node, ...props }) => (
+            <blockquote className="my-4 border-l-4 border-gray-300 pl-4 italic dark:border-gray-600" {...props} />
+          ),
+          a: ({ node, ...props }) => (
+            <a className="text-blue-600 hover:underline dark:text-blue-400" {...props} />
+          ),
+          table: ({ node, ...props }) => (
+            <div className="mb-4 overflow-x-auto">
+              <table className="min-w-full border-collapse" {...props} />
+            </div>
+          ),
+          thead: ({ node, ...props }) => <thead className="bg-gray-100 dark:bg-gray-800" {...props} />,
+          tbody: ({ node, ...props }) => <tbody className="divide-y divide-gray-200 dark:divide-gray-700" {...props} />,
+          tr: ({ node, ...props }) => <tr className="hover:bg-gray-50 dark:hover:bg-gray-700" {...props} />,
+          th: ({ node, ...props }) => <th className="px-4 py-2 text-left font-semibold" {...props} />,
+          td: ({ node, ...props }) => <td className="px-4 py-2" {...props} />,
+          hr: ({ node, ...props }) => <hr className="my-4 border-gray-300 dark:border-gray-600" {...props} />,
+          strong: ({ node, ...props }) => <strong className="font-bold" {...props} />,
+          em: ({ node, ...props }) => <em className="italic" {...props} />,
+        }}
+      >
+        {contentWithCitationBadge}
+      </ReactMarkdown>
+    </div>
+  );
+};
+
+export default MarkdownRenderer;
diff --git a/frontend-web/src/strategy-components/components/qa/QA.tsx b/frontend-web/src/strategy-components/components/qa/QA.tsx
index 1964b56e..8581f91b 100644
--- a/frontend-web/src/strategy-components/components/qa/QA.tsx
+++ b/frontend-web/src/strategy-components/components/qa/QA.tsx
@@ -49,7 +49,7 @@ import {
   TrendingUp,
 } from 'lucide-react';
 import { useTheme } from '../../../contexts/ThemeContext';
-import { useChatContext } from '../../contexts/ChatContext';
+import { useChatContext } from '../../../contexts/ChatContext';
 import QATypeSwitch from './QATypeSwitch';
 
 type QAMode = 'single-round' | 'multi-round' | 'deep-search';
diff --git a/frontend-web/src/strategy-components/components/qa/QACommon.tsx b/frontend-web/src/strategy-components/components/qa/QACommon.tsx
index 831e7bbc..97ba01ed 100644
--- a/frontend-web/src/strategy-components/components/qa/QACommon.tsx
+++ b/frontend-web/src/strategy-components/components/qa/QACommon.tsx
@@ -20,7 +20,7 @@ import {
   UserRound,
 } from 'lucide-react';
 import { useTheme } from '../../../contexts/ThemeContext';
-import MarkdownRenderer from '../MarkdownRenderer';
+import MarkdownRenderer from '../../MarkdownRenderer';
 
 /**
  * 单条检索结果。
diff --git a/frontend-web/src/strategy-components/components/qa/components/ScenarioConfigPage.jsx b/frontend-web/src/strategy-components/components/qa/components/ScenarioConfigPage.jsx
deleted file mode 100644
index 217847ce..00000000
--- a/frontend-web/src/strategy-components/components/qa/components/ScenarioConfigPage.jsx
+++ /dev/null
@@ -1,469 +0,0 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import {
-  clearTemplateOverride,
-  clone,
-  hasTemplateOverride,
-  loadOriginalTemplate,
-  loadTemplateByMeta,
-  loadTemplateIndex,
-  saveTemplateOverride,
-} from '@/config/templateStore';
-import './ScenarioConfigPage.css';
-
-/**
- * 协调者配置字段定义
- * 每个字段包含 [key, 中文标签]，对应 coordinator_config 对象中的属性
- */
-const COORDINATOR_FIELDS = [
-  ['system_prompt_prefix', '协调者全局规则'],
-  ['round1_guidance', '首轮策略'],
-  ['middle_round_guidance', '中间轮策略'],
-  ['final_round_guidance', '末轮策略'],
-  ['speaker_selection_rules', '选人规则'],
-  ['focus_instruction_rules', '任务指令规则'],
-  ['dependency_driving_rules', '依赖推进规则'],
-  ['consistency_check_rules', '一致性/冲突检查规则'],
-  ['revise_prompt_prefix', '人工修改解释规则'],
-];
-
-/**
- * 不可变更新数组中的指定索引项
- * @param {Array} items - 原数组
- * @param {number} index - 目标索引
- * @param {Function} updater - 接收克隆后的项，就地修改
- * @returns {Array} 新数组
- */
-function updateAtIndex(items, index, updater) {
-  return items.map((item, current) => current === index ? updater(clone(item)) : item);
-}
-
-/**
- * 将多行文本按行分割为数组（过滤空行）
- */
-function linesToList(value) {
-  return value
-    .split('\n')
-    .map(item => item.trim())
-    .filter(Boolean);
-}
-
-/**
- * 场景配置页面
- *
- * 用于查看和编辑模板中的提示资产（Prompt Assets）：
- * - 模板信息：ID、名称、说明、一致性模式
- * - 协调者提示：各阶段的协调者策略文本
- * - 推荐智能体：每个智能体的名称、维度、专家提示、分析契约、关联字段等
- * - 完整模板 JSON：原始 JSON 的直接编辑
- *
- * 修改后的模板通过 localStorage 覆盖保存（'mope_template_override:' 前缀），
- * 不影响后端静态文件。可在首页选择"已修改"标记的模板使用。
- *
- * 暂不支持新增模板和新增智能体。
- *
- * @param {Function} onBack - 返回首页回调
- */
-export default function ScenarioConfigPage({ onBack }) {
-  const [templates, setTemplates] = useState([]);
-  const [selectedId, setSelectedId] = useState('');
-  const [draft, setDraft] = useState(null);
-  const [rawJson, setRawJson] = useState('');
-  const [activeAgentIndex, setActiveAgentIndex] = useState(0);
-  const [loading, setLoading] = useState(false);
-  const [message, setMessage] = useState('');
-  const [error, setError] = useState('');
-
-  /** 当前选中模板的元数据 */
-  const selectedMeta = useMemo(
-    () => templates.find(item => item.template_id === selectedId),
-    [templates, selectedId],
-  );
-
-  /** 从 report_schema 和 field_requirements 生成字段选项列表 */
-  const fieldOptions = useMemo(() => {
-    const schema = draft?.report_schema || {};
-    const requirements = draft?.field_requirements || {};
-    return Object.keys(schema).map(field => ({
-      key: field,
-      title: requirements?.[field]?.title || field,
-      description: schema[field] || '',
-    }));
-  }, [draft]);
-
-  /** 加载模板索引列表 */
-  const loadTemplates = async () => {
-    setLoading(true);
-    setError('');
-    try {
-      const list = await loadTemplateIndex();
-      setTemplates(list);
-      if (!selectedId && list[0]) {
-        setSelectedId(list[0].template_id);
-      }
-    } catch (err) {
-      setError(err.message || '模板列表加载失败');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  /** 加载完整模板（含用户覆盖） */
-  const loadTemplate = async (templateId) => {
-    if (!templateId) return;
-    const meta = templates.find(item => item.template_id === templateId) || templateId;
-    setLoading(true);
-    setError('');
-    setMessage('');
-    try {
-      const template = await loadTemplateByMeta(meta);
-      setDraft(template);
-      setRawJson(JSON.stringify(template, null, 2));
-      setActiveAgentIndex(0);
-    } catch (err) {
-      setError(err.message || '模板加载失败');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    loadTemplates();
-  }, []);
-
-  useEffect(() => {
-    if (selectedId && templates.length > 0) {
-      loadTemplate(selectedId);
-    }
-  }, [selectedId, templates.length]);
-
-  /**
-   * 同步更新 draft 状态
-   * 深拷贝后通过 updater 修改，并同步更新 rawJson 预览
-   */
-  const syncDraft = (updater) => {
-    setDraft(prev => {
-      const next = clone(prev);
-      updater(next);
-      setRawJson(JSON.stringify(next, null, 2));
-      return next;
-    });
-    setMessage('');
-  };
-
-  const setCoordinatorField = (key, value) => {
-    syncDraft(next => {
-      next.coordinator_config = {
-        ...(next.coordinator_config || {}),
-        [key]: value,
-      };
-    });
-  };
-
-  const setAgentField = (index, key, value) => {
-    syncDraft(next => {
-      next.agents = updateAtIndex(next.agents || [], index, agent => ({
-        ...agent,
-        [key]: value,
-      }));
-    });
-  };
-
-  /** 从 rawJson 文本框解析并应用 JSON */
-  const applyRawJson = () => {
-    setError('');
-    setMessage('');
-    try {
-      const parsed = JSON.parse(rawJson);
-      if (!parsed.template_id) throw new Error('JSON 中缺少 template_id');
-      setDraft(parsed);
-      setSelectedId(parsed.template_id);
-      setMessage('完整 JSON 已应用，保存后生效。');
-    } catch (err) {
-      setError(err.message || 'JSON 解析失败');
-    }
-  };
-
-  /** 保存当前修改到 localStorage */
-  const saveDraft = () => {
-    if (!draft?.template_id) return;
-    try {
-      saveTemplateOverride(draft.template_id, draft);
-      setMessage('已保存到浏览器本地覆盖。返回首页选择该模板即可使用修改后的提示。');
-      setError('');
-    } catch (err) {
-      setError(err.message || '保存失败');
-    }
-  };
-
-  /** 恢复模板为后端原始版本 */
-  const resetTemplate = async () => {
-    if (!selectedId) return;
-    setLoading(true);
-    setMessage('');
-    setError('');
-    try {
-      clearTemplateOverride(selectedId);
-      const original = await loadOriginalTemplate(selectedMeta || selectedId);
-      setDraft(original);
-      setRawJson(JSON.stringify(original, null, 2));
-      setMessage('已恢复为静态模板原始内容。');
-    } catch (err) {
-      setError(err.message || '恢复失败');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const activeAgent = draft?.agents?.[activeAgentIndex];
-  const activeRelevantFields = new Set(activeAgent?.relevant_fields || []);
-
-  return (
-    <div className="scenario-page">
-      {/* 页面头部 */}
-      <header className="scenario-header">
-        <div>
-          <div className="scenario-kicker">场景配置</div>
-          <h1>模板提示资产</h1>
-          <p>查看和修改场景模板对应的协调者提示、推荐智能体配置及智能体提示。新增模板暂不支持。</p>
-        </div>
-        <div className="scenario-header-actions">
-          <button type="button" className="btn-secondary" onClick={onBack}>返回首页</button>
-        </div>
-      </header>
-
-      {/* 工具栏：模板选择 + 操作按钮 */}
-      <section className="scenario-toolbar">
-        <select
-          className="scenario-select"
-          value={selectedId}
-          onChange={event => setSelectedId(event.target.value)}
-          disabled={loading}
-        >
-          <option value="">选择场景模板...</option>
-          {templates.map(template => (
-            <option key={template.template_id} value={template.template_id}>
-              {template.template_name || template.template_id}
-              {hasTemplateOverride(template.template_id) ? '（已修改）' : ''}
-            </option>
-          ))}
-        </select>
-        <button type="button" className="btn-primary" disabled>新增模板（暂不支持）</button>
-        <button type="button" className="btn-secondary" onClick={loadTemplates} disabled={loading}>
-          刷新
-        </button>
-        <button type="button" className="btn-secondary" onClick={resetTemplate} disabled={!draft || loading}>
-          恢复原始模板
-        </button>
-        <button type="button" className="btn-primary" onClick={saveDraft} disabled={!draft || loading}>
-          保存修改
-        </button>
-      </section>
-
-      {message && <div className="scenario-message">{message}</div>}
-      {error && <div className="scenario-error">{error}</div>}
-
-      {!draft ? (
-        <div className="scenario-empty">请选择一个模板。</div>
-      ) : (
-        <main className="scenario-layout">
-          {/* ====== 模板信息 ====== */}
-          <section className="scenario-card scenario-template-card">
-            <div className="scenario-card-title">模板信息</div>
-            <div className="scenario-grid-2">
-              <label>
-                模板 ID
-                <input className="scenario-input" value={draft.template_id || ''} readOnly />
-              </label>
-              <label>
-                模板名称
-                <input
-                  className="scenario-input"
-                  value={draft.template_name || ''}
-                  onChange={event => syncDraft(next => { next.template_name = event.target.value; })}
-                />
-              </label>
-            </div>
-            <label>
-              模板说明
-              <textarea
-                className="scenario-textarea scenario-textarea-sm"
-                value={draft.template_brief || ''}
-                onChange={event => syncDraft(next => { next.template_brief = event.target.value; })}
-              />
-            </label>
-            <label>
-              一致性模式
-              <select
-                className="scenario-select scenario-select-inline"
-                value={draft.consistency_mode || 'free'}
-                onChange={event => syncDraft(next => { next.consistency_mode = event.target.value; })}
-              >
-                <option value="free">free</option>
-                <option value="soft">soft</option>
-              </select>
-              <div className="scenario-inline-hint">
-                `free` 适合开放式模板；`soft` 会要求后续字段尽量承接前文依赖和命名。
-              </div>
-            </label>
-            {draft.usage_notes && (
-              <label>
-                使用说明
-                <textarea
-                  className="scenario-textarea"
-                  value={draft.usage_notes || ''}
-                  onChange={event => syncDraft(next => { next.usage_notes = event.target.value; })}
-                />
-              </label>
-            )}
-          </section>
-
-          {/* ====== 协调者提示 ====== */}
-          <section className="scenario-card">
-            <div className="scenario-card-title">协调者提示</div>
-            <div className="scenario-coordinator-grid">
-              {COORDINATOR_FIELDS.map(([key, label]) => (
-                <label key={key}>
-                  {label}
-                  <span className="scenario-field-key">{key}</span>
-                  <textarea
-                    className="scenario-textarea"
-                    value={draft.coordinator_config?.[key] || ''}
-                    onChange={event => setCoordinatorField(key, event.target.value)}
-                  />
-                </label>
-              ))}
-            </div>
-          </section>
-
-          {/* ====== 推荐智能体及提示 ====== */}
-          <section className="scenario-card">
-            <div className="scenario-card-head">
-              <div>
-                <div className="scenario-card-title">推荐智能体及提示</div>
-                <div className="scenario-card-desc">当前支持修改已有智能体，不支持新增或删除。</div>
-              </div>
-              <button type="button" className="btn-primary" disabled>新增智能体（暂不支持）</button>
-            </div>
-
-            <div className="scenario-agent-layout">
-              {/* 智能体列表（Tab 切换） */}
-              <div className="scenario-agent-list">
-                {(draft.agents || []).map((agent, index) => (
-                  <button
-                    type="button"
-                    key={agent.id || index}
-                    className={`scenario-agent-tab ${index === activeAgentIndex ? 'active' : ''}`}
-                    onClick={() => setActiveAgentIndex(index)}
-                  >
-                    <span>{agent.name || agent.id || `agent-${index + 1}`}</span>
-                    <code>{agent.id}</code>
-                  </button>
-                ))}
-              </div>
-
-              {/* 智能体编辑表单 */}
-              {activeAgent && (
-                <div className="scenario-agent-editor">
-                  <div className="scenario-grid-2">
-                    <label>
-                      ID
-                      <input className="scenario-input" value={activeAgent.id || ''} readOnly />
-                    </label>
-                    <label>
-                      名称
-                      <input
-                        className="scenario-input"
-                        value={activeAgent.name || ''}
-                        onChange={event => setAgentField(activeAgentIndex, 'name', event.target.value)}
-                      />
-                    </label>
-                  </div>
-                  <label>
-                    分析维度
-                    <input
-                      className="scenario-input"
-                      value={activeAgent.dimension || ''}
-                      onChange={event => setAgentField(activeAgentIndex, 'dimension', event.target.value)}
-                    />
-                  </label>
-                  {/* 智能体专家角色提示 */}
-                  <label>
-                    智能体提示 / 专家角色
-                    <textarea
-                      className="scenario-textarea scenario-textarea-lg"
-                      value={activeAgent.expertise || ''}
-                      onChange={event => setAgentField(activeAgentIndex, 'expertise', event.target.value)}
-                    />
-                  </label>
-                  {/* 分析契约 */}
-                  <label>
-                    分析契约（每行一条）
-                    <textarea
-                      className="scenario-textarea"
-                      value={(activeAgent.analysis_contract || []).join('\n')}
-                      onChange={event => setAgentField(activeAgentIndex, 'analysis_contract', linesToList(event.target.value))}
-                    />
-                  </label>
-                  {/* 关联字段选择器 */}
-                  <label>
-                    关联字段
-                    <div className="scenario-field-picker">
-                      {fieldOptions.map(option => (
-                        <label key={option.key} className={`scenario-field-option ${activeRelevantFields.has(option.key) ? 'selected' : ''}`}>
-                          <input
-                            type="checkbox"
-                            checked={activeRelevantFields.has(option.key)}
-                            onChange={event => {
-                              const current = activeAgent.relevant_fields || [];
-                              const next = event.target.checked
-                                ? [...current, option.key]
-                                : current.filter(item => item !== option.key);
-                              setAgentField(activeAgentIndex, 'relevant_fields', next);
-                            }}
-                          />
-                          <div className="scenario-field-option-body">
-                            <div className="scenario-field-option-title">{option.title}</div>
-                            <div className="scenario-field-option-key">{option.key}</div>
-                            {option.description && (
-                              <div className="scenario-field-option-desc">{option.description}</div>
-                            )}
-                          </div>
-                        </label>
-                      ))}
-                    </div>
-                  </label>
-                  {/* 检索补充说明 */}
-                  <label>
-                    检索补充说明
-                    <textarea
-                      className="scenario-textarea scenario-textarea-sm"
-                      value={activeAgent.retrieval_instruction || ''}
-                      onChange={event => setAgentField(activeAgentIndex, 'retrieval_instruction', event.target.value)}
-                    />
-                  </label>
-                </div>
-              )}
-            </div>
-          </section>
-
-          {/* ====== 完整模板 JSON ====== */}
-          <section className="scenario-card">
-            <div className="scenario-card-head">
-              <div>
-                <div className="scenario-card-title">完整模板 JSON</div>
-                <div className="scenario-card-desc">用于修改页面暂未拆出的提示资产，例如字段要求、样例和报告结构。</div>
-              </div>
-              <button type="button" className="btn-secondary" onClick={applyRawJson}>应用 JSON</button>
-            </div>
-            <textarea
-              className="scenario-json"
-              value={rawJson}
-              onChange={event => setRawJson(event.target.value)}
-              spellCheck={false}
-            />
-          </section>
-        </main>
-      )}
-    </div>
-  );
-}